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

Yashwanth Madaka
Coinmonks
6 min readJun 20, 2018

--

In these series of tutorials, we are going to build a simple supply-chain-management-system using Hyperledger Composer, deploy it locally in our computer and build an angularfront-end to interact with it.

This part-1 focuses on coding, deploying and testing our application in the online composer playground. If you want to know about how to deploy it locally and build a frontend, skip to part-2.

Discover and review best Blockchain softwares

To get started, we are going to visit the hyperledger composer online playground. We can see the below screen when we visit the website.

Now, we click on Deploy a new business network. We are going to name our project Block-Track. So give the Business network name as block-track and give a description of your choice. Give the network admin card name as admin@block-track

Now click on Deploy button on the right side and the below page appears.

Now, click on Connect-now.

Now, this is the main page where we define our model.The Define tab is used to create, edit and upgrade your business network. On the left of the Define tab, you can see a list of all the files in your current business network definition. New files can be added to your business network with the Add a file button. Model files, script files, access control files, and query files can be added to your business network.

Once you’ve added and modified the files for your business network definition, you can deploy the changes to your network with the Deploy changes button. After clicking Deploy changes you can experiment with your changes in the Test tab. The Export button allows you to download your current business network as a .bna file.

First is the

Model File: The developers work with business analysts to define the model of our business network. This is written in Composer modelling language. Now replace the code in the model file with the below code

We create 4 participants. Manufacturer, Distributor, Retailer and Customer and are identified by their email. We create one asset called Product which is identified by productId. We create extra description for the product by specifying enums. We create one transaction called MoveProduct.

Replace the Script file with the below code. This is the main logic of our model.

Now replace the Access Control file with the below code. This file lists all the access controls which everyone has.

After replacing all the files, now click on deploy and a message should appear which says Changes deployed.

Now we can test our model by clicking on test tab. The below page appears.

Ignore the SampleParticipant and SampleAsset in the participants and assets tab. These appeared because we created everything in a Basic Sample Network at the beginning. Select Empty Business network to avoid these extra participants.

Now, Click on customer tab and click +Create New Participant button.

Type out the details of your choice and click on Create New button. Similarly create other participants for distributor, manufacturer and retailer.

Now we create a new product by clicking on Product tab in the assets tab.

Type out the details of your choice. We give the email of manufacturer in the issuer column and the email of distributor in the owner column and click on create new. A new product is created with the details that it has been transferred from manufacturer to distributor.
Now we perform a transaction on the product. Click on Submit transaction and select MoveProduct from the transaction type. We want to send this product from distributor to customer. So type as below.

Click on Submit and the transaction successful message appears. We can see that the owner and issuer of the product had changed.

Click on All Transactions tab to view all the operations that had happened till now.

This is the main part (i.e. the Blockchain Part). All the different entry types had been recorded and chained by the order of timestamp. Click on viewrecord to see the content of that particular block. We can see the transactionId and timestamp of that particular entry type.

Congratulations..!!

You had successfully completed building, deploying and testing your first blockchain application in the online hyperledger composer playground. In the next tutorial, we are going to deploy this locally and build an angular frontend to interact with it. Now go to part-2 to continue blocking.

Note: The above code is just a simple version of the supply-chain-management-system and it is only for demonstration purposes. That code has many vulnerabilities and it needs to be improved.

Originally published at medium.com on June 20, 2018.

--

--