Over 10 years we help companies reach their financial and branding goals. Engitech is a values-driven technology agency dedicated.

Gallery

Contacts

Bhubaneswar, India

info@krescitus.com

+1 -800-456-478-23

Technology

Set up the Angular project

Begin by configuring the angular project and installing dependencies:


ng new serverless_application
cd serverless_application
  • Configure AWS CLI 

To deploy your Angular Universal application to AWS Lambda, you will first need an AWS account. Sign up here, if you do not have one. You will also need to install AWS CLI if you haven’t done so.


> aws configure
  • Deploy to AWS Lambda

AWS Lambda is a serverless computing engine, so to deploy your Angular Universal application on AWS Lambda, you will need to implement the Serverless Framework. To configure your application to run as a serverless application on AWS, run the following commands.


> npm install serverless

Let’s test the application by hitting the:


ng serve

Test your application by navigating to http://localhost:4200
Create a component create-ledger
On This create-ledger.html looks like this.

<section class=”all_catagorysection”>
  <div class=”container-fluid”>
    <div class=”row row-offcanvas row-offcanvas-right”>
      <div class=”row”>
        <app-sidebar></app-sidebar>
        <div class=”col-md-9″>
          <div class=”bodycontent” style=”margin-top:64px;”>
            <div class=”dashboard_home_page”>
              <div class=”category-items”>
                <div class=”row”>
                  <div class=”col-md-12″>
                    <h4 class=”widget-title title-dots”>
                      <span>Create QLDB Ledger</span>
                    </h4>
                  </div>
                  <div class=”col-md-12″>
                    <div class=”bodycontent”>
                      <div class=”arrow-up”></div>
                      <div class=”row”>
                        <div class=”col-md-8 col-sm-6″>
                          <form [formGroup]=”qldbForm”>
                            <div class=”form-group”>
                              <label>Ledger Name</label>
                              <input name=”Name” formControlName=”Name” placeholder=”” type=”text”
                                class=”form-control input-sm” />
                            </div>
                            <div class=”form-group” style=”text-align: center”>
                              <div class=”mb-15″>
                                <button type=”submit” class=”btn btn-color btn-sm”
                                  (click)=”CreateLedger()”>Create</button>
                              </div>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
This is your create_ledger.component.ts

import { BrowserModule, Meta, Title } from '@angular/platform-browser';
import { Component, OnInit, Inject, Input, ViewChild, PLATFORM_ID } from '@angular/core';
//import * as $ from 'jquery';
import { AppComponent } from '../../app.component';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
import { LedgerService } from '../../services/ledger.service';
import swal from 'sweetalert2/dist/sweetalert2.js';
declare var $: any;
@Component({
    selector: 'app-create-ledger',
    templateUrl: './create-ledger.component.html',
    styleUrls: ['./create-ledger.component.css']
})
export class CreateLedgerComponent implements OnInit {
    qldbForm: FormGroup;
    baseAPiRootUrl: any;
    baseRootUrl: string;
    constructor(
        private LedgerService: LedgerService,
        public mainComponent: AppComponent,
        private fb: FormBuilder,
    ) { }
    ngOnInit() {
        let formData: FormData = new FormData()
        this.qldbForm = this.fb.group({
            Name: [''],
            path: ['/create_ledger']

        });
    }
    closeForm() {
        this.qldbForm.reset();
    }

    CreateLedger() {
        let formData: FormData = new FormData();
        let modelData = this.qldbForm.value;
        for (var key in modelData) {
            formData[key] = modelData[key];
        }
        this.LedgerService.CreateLedger(formData).subscribe((response) => {
            if (response) {
                swal('Thank You', 'Qldb Ledger is Creating', 'success');
                this.closeForm();
            }
        });
    }
}

Create a service file that invokes the API of AWS ApiGateway API


import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { map, filter, switchMap } from 'rxjs/operators';

@Injectable({
 providedIn: 'root'
})
export class LedgerService {

constructor(private http: HttpClient) { }
  public httpOptions = {
    headers: new HttpHeaders({
     'Content-Type': 'application/x-www-form-urlencoded'
    })
   }; 
 private getFormUrlEncoded(toConvert) {
   const formBody = [];
  // tslint:disable-next-line: forin
   for (const property in toConvert) {
     const encodedKey = encodeURIComponent(property);
     const encodedValue = encodeURIComponent(toConvert[property]);
     formBody.push(encodedKey + '=' + encodedValue);
    }
  return formBody.join('&');
 }
 CreateLedger(data:FormData) {
  return this.http.post('', JSON.stringify(data)).pipe(map(res => {
    if (res) {
      return res ;
    }
    return [];
  }));
}
}

 Set up the AWS Account

Create ApiGateway

Create an API Gateway on your AWS Account, Enable the CORS and Deploy your stage.

Create Permissions

Create AWS Lambda
Create a lambda function <name>, and configure a trigger to API Gateway which invokes the function CreateLedger function on code.

This lambda function code is written by Python.


"use strict"
import json
import boto3

client = boto3.client("qldb")
import logging

logger = logging.getLogger()
logger.setLevel(logging.INFO)
createPath = "/create_ledger"


def lambda_handler(event, context):
    path = event["path"]
    if path == createPath:
        response = CreateQldb(event["Name"])
    else:
        response = buildResponse(404)
    return response


def CreateQldb(Name):
    response = client.create_ledger(
        Name=Name,
        Tags={"krescitus": "krescitus"},
        PermissionsMode="STANDARD",
        DeletionProtection=False,
    )


def buildResponse(statusCode):
    response = {
        "statusCode": statusCode,
        "header": {
            "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "POST, GET, DELETE, PUT",
        },
    }

When you call the API and the code is run then go to the QLDB page, now you see a ledger is created. It takes some time to be active.