Build the Web App code for Secure Cold Chain Solution

Exercise 3: Uploading the Built UI code to Web Application

Overview

Secure Cold Chain solution for Pharma addresses the challenges and concerns of the pharmaceutical companies, by providing near real-time tracking of the temperature sensitive consignments in a transparent and immutable manner throughout the supply chain, by combining IoT and Blockchain. The solution provides actionable insights for all the stakeholders through real time data capture, comprehensive analytics and immutable access with increased granularity (product, box, carton, or pallet level), thus helping in achieving business transformation and reaping the associated benefits.

Scenario and Objectives

You were asked to create Bing Maps API key, build the UI code and upload the built code to web application.

After completing this lab, you will be able to:

Create Bing Maps API key
Understand the process of bulding the nodejs code
Understand the process of uploading the built UI code to web application

Pre-Requisites

Azure Portal access with Owner permission.
You need to have the local copy of the Secure Cold Chain repository. You can download/clone the same from the below url

https://github.com/SecureColdChain/Wipro-Ltd-ColdChain
You need to complete the following labs before attempting this lab
1. Pre-Deployment Steps for Cold Chain Solution
2. Deploying the Cold Chain Solution ARM template
3. Post-Deployment Steps for Cold Chain Solution

Note: You should have access to Azure portal with Owner permission to complete this Training Lab

Exercise 1: Create Bing Map API Key

Scenario

This exercise explains about how to create a Bing map API key

The main tasks for this exercise are as follows:

Create Bing Map API key

Task 1: Create Bing Map API Key

In Azure portal click on Create a resource.

2. Search for “bing maps” as show below and click on Bing Maps API for Enterprise.

3. Click on Create.

4. Fill all the required details as shown below and click on Create.

5. Go the resource group and Click on Bing map resource

6. Click on the Key Management and copy the masterkey this value you need to use for BingApiKey

Here you can updated the details:

Exercise 2: Build UI Code

Scenario

This exercise explains about how to build the nodejs code.

Task 1: Building the Web App code

Follow the below steps to build web application UI code to point to the deployed resources

Open the ProjectTitanUICode from UI WebApp folder from the ColdChain folder.

Note: Clone the cold-chain repository to your local system and perform the below steps

Open the src folder from ProjectTitanUICode folder.

Open environment folder and update the values of environment.prod file.

Update the values API_Endpoint, SAS_Token,blobAccessUrl,storageUrl, client_id,web3_password,contractAddress,HttpProvider,gasLimit and BingApiKey

You can take all the resource values from the ARM template output section
You can get all the values from the Azure portal as shown below and use the same contract address which you have copied in the earlier step (5.1. Deploying smart contract and getting the Contract Address)

7.Click on Storage Account -> Shared access signature.

Click on Generate SAS and connection string button. Copy the SAS token and Blob Access URL and update into environment.prod.ts file.

Here you can updated the details:

After updating the environment.prod.ts click on open Node.js command prompt window and go to the ProjectTitanUICode location i.e. you web application code location as shown in the following screenshots.

NOTE: make sure that you have latest node modules installed and you have Angular CLI installed on your local machine

Command: npm install -g @angular/cli

Here we can install npm

Command: npm install

Run the following command to build the code

Command: ng build –prod

Note: Before running the above command make sure that you have installed Angular CLI.

After successful build, you will get the folder called dist

Open AngularFrontEnd from the dist folder, add the web.config(download it from here ) to the AngularFrontEnd and select all the files then zip them.

Note: Download the Web.config file from the repository

Exercise 3: Uploading the Built UI code to Web Application

Scenario

This exercise explains about how to upload the UI code to web application using Azure portal.

Task 1: Uploading the Built UI code to Web Application

Open kudu tool to upload the built web application code to the web app. You can open the Kudu tool by adding the scm in the web App URL as shown below

Ex: https://webapikowgh.scm.azurewebsites.net)