Building a blockchain application using Hyperledger Fabric with Angular Frontend: Part-2

Welcome to the part-2 of the article. This is the part which I like the most.

Before starting this, you need to install prerequisites and the development environment . The recommended OS is either Ubuntu or Mac. I know this is sad for Windows users and I myself am a windows user. I installed Ubuntu 16.04 alongside windows in dual boot.

There is a way for getting linux environment in windows but installing Ubuntu alongside Windows was much easier and windows is not preferred for blockchain development due to its vulnerability to threats.

Now, lets start developing. After installing the prerequisites and development environment, make sure your docker is running and you run ./startFabric.sh and ./createPeerAdminCard.sh

New to trading? Try crypto trading bots or copy trading

Step1: Generating the skeleton of the app

Now, we are going to generate a skeleton using Yeoman. Open terminal and type the below command:

yo hyperledger-composer

Now, it will shoot a series of questions. Follow the options shown in the image below:

Now, open this project in a text-editor. I prefer visual-studio-code because of its dynamic nature and its ability to install thousands of extensions. Make sure you install hyperledger composer in vs code.

Step2: Filling the files with the code which we had done in part-1

After opening in a text editor, we can see the 3 files logic.js, model.cto,permissions.acl.

Copy the code of

model file → model.cto

script file → logic.js

AccessControl → permissions.acl

Step-3. Creating the Business Network Archive (BNA) file

BNA or Business network archive file is a file which is a package of the files which we created in tutorial — 1, i.e they are model file, script file and access control file

source : https://hyperledger.github.io/composer/v0.16/business-network/businessnetworkdefinition

So, now we navigate into the block-track app in the terminal and type the below command. This creates a block-track@0.0.1.bna file.

composer archive create -t dir -n .

Step 4: Deploying the .bna file on the Fabric

Step 4.1: Install composer runtime

In order to install the Business Network Archive onto the Hyperledger Fabric network you need to install the business network onto the peers. You will need to have the Business Network archive to do this.

composer network install --card PeerAdmin@hlfv1 --archiveFile
block-track@0.0.1.bna

Step 4.2: Deploy the business network

The below command deploys the business network.

composer network start --networkName block-track
--networkVersion 0.0.1 --networkAdmin admin
--networkAdminEnrollSecret adminpw --card PeerAdmin@hlfv1 --file
networkadmin.card

Step 4.3: Import the network administrator identity as a usable business network card

The next command of this step is the below.

composer card import --file networkadmin.card

Step 4.4: Checking the card

To check if the business network got deployed successfully or not, run the below command.

composer network ping --card admin@block-track

Step 5: Start the RESTful API

Now, we start a REST SERVER. Here, the angular front end and Hyperledger fabric contact with each other through this REST SERVER. All the changes done in Angular App is reflected in Hyperledger fabric and vice-versa. The below image shows a more clear picture of the flow of our app.

source : https://github.com/IBM/Decentralized-Energy-Composer/blob/master/images/arch.png

Run the below command.

composer-rest-server

This will ask several questions. Follow the steps shown in the output image below.

Now, open http://localhost:3000/explorer in your favourite browser and you can interact with the API.

If the code works properly in composer playground, it will work properly in this API.

Step 6: Building Front End with one command

Yes, you read it correct. You can build the whole frontend of this by just using one command which is below. Before doing this make sure that you don’t terminate the server and open a new terminal and navigate to your app folder.

yo

Make sure you are in the block-track folder.

Choose Hyperledger Composer from the above options. Now this will ask several questions. Follow the options shown in the image below.

This will create a folder called angular-app in the main block-track folder. Navigate to this folder in your terminal and start the app.

cd angular-app
npm start 

open http://localhost:4200 in your browser and you can interact with your model.

Try all the features like creating assets, participants.

When you try the Invoke transaction button, it doesn’t work.

Step 7: Fixing the Invoke Transaction Button

I had written a detailed article about how to fix this button in the link below

Fixing Transaction issue in Angular for Hyperledger fabric blockchain application

Step 8: Trying out the invoke Feature

I had added a few little more features like Search Bar in Assets page. I added a new Info tab which is like the Home Page for this App.

I created

a product which has a productID: Shoes_01

a manufacturer called email : lifestyle.manufacturer@email.com

a distributor called email : lifestyle.distributor@email.com

After fixing the button , the below form is opened.

I want to send this product from Manufacturer to Distributor. So I mention the above details.

When I click confirm, I go to Assets page and when I search for ProductID, I can see the new Owner of the product.

I removed the Update and Delete options temporarily from the html page of the asset. I also added a feature in the Info tab which shows Transaction ID’s of all the MOVEPRODUCT transactions which happened on the blockchain.

And now, you had successfully created your first Blockchain app with a good Frontend to interact with it.

Enjoy!! :)

GitHub link:

https://github.com/yashwanthmadaka24/Block-Track

References:

How to create an application on blockchain using Hyperledger

Join Coinmonks Telegram Channel and Youtube Channel get daily Crypto News

Also, Read

• Copy Trading | Crypto Tax Software
• Grid Trading | Crypto Hardware Wallet
• KuCoin vs Kraken vs BitYard | Crypto Trading bots
• Best VPNs for Crypto Trading
• Best Crypto Analytics or On-Chain Data | Bexplus Review
• 10 Biggest NFT MarketPlaces to Mint a Collection
• Crypto Telegram Signals | Crypto Trading Bot
• Best Crypto Exchange | Best Crypto Exchange in India
• Best Crypto APIs for Developers
• Best Crypto Lending Platform
• An ultimate guide to Leveraged Token