Modifying Hyperledger Composer WebApp

Question

I've completed the Hyperledger Composer Developer tutorial https://hyperledger.github.io/composer/tutorials/developer-guide.html and I've generated the BNA, deployed it to a local Hyperledger Fabric 1.0 instance, generated the REST API, and generated the skeleton webapp using yo.

However, I noticed that the resulting webapp only has a menu for adding assets, and none for adding participants and submitting transactions. I have two questions:

1) Why doesn't the webapp generate menus for adding participants and submitting transactions? (or does it, and how do I get it to do that?)

2) In an attempt to add the ability to add participants and submit transactions through the webapp, I've looked through the app directory for the relevant source code but became confused as I'm relatively new to web/angular dev.

Is there any reference documentation to show which source files need to be edited to add participants and transactions?

As far as I can tell, \src\app folder has the source files but I don't understand the roles that each of these files play:

• app.component.html has the actual HTML menus, but what is this [routerLink] referring to?

• I noticed for each asset that there is a subfolder with a CSS, HTML, and three .TS files. Are these needed for each participant as well?

Any direction or reference on how to modify the web app to accommodate adding participants and transactions would be much appreciated.

Answer 1

1) Why doesn't the webapp generate menus for adding participants and submitting transactions? (or does it, and how do I get it to do that?)

Because its a very simple skeleton NG2 app scoped to assets, which you as a developer can add to. You can easily add REST API calls (operations) from your Angular app to (for example) submit transactions. This is how you should interact with the runtime Fabric using Composer REST operations.

2) Is there any reference documentation to show which source files need to be edited to add participants and transactions?

This is a straightforward Angular tutorial https://angular.io/tutorial and here https://angular.io/guide/quickstart - and this tutorial will help explain Angular further.

The dataservice in the generated App is where the current 'asset' REST operation is called from and further REST operations can be added here -> /src/app/data.service.ts