Web interface for blockchain – visualising DLT

One of the problems with DLT (distributed ledger technology) and all the blockchain based applications currently is that all the action is happening behind the scenes.

It is all server-side or shall we say node-side. As technologies and products are still maturing, inevitably the blockchain and server-side aspects, both being mission critical, have received more attention, often meaning there is no proper reflection in the front-end (web interface, smartphone app or desktop application UI).

Simply put, end user does not have a clue whether it is true that this certain web or mobile app does use blockchain, which data and which steps get synchronised on blockchain and what’s really happening there.

As certain tools and solutions begin to emerge for public and consumer section, situation is likely to remain bleak in enterprise blockchain software. Enterprise is famous for dragging behind consumer applications when it comes to UX (user experience).

Dappros is addressing this problem. As part of horizontal toolset constituting our platform we offer simple but impactful solutions such as “on blockchain” widget.

Here is an example of how it works:

Figure 1: TracyChain web application
  1. TracyChain (screenshot above) is a demo application that we have built to demonstrate a blockchain powered supply chain tracking solution.
  2. There is a hypothetical shipment of cheesecakes being tracked between (1) factory, (2) warehouse and (3) retail shop / cafe.
  3. Each status update relevant to the shipment, each change of GPS location or temperature reading, a change of hands, acceptance of delivery, bill of landing – all trigger an API call and trigger a transaction being recorded on blockchain (see screenshot below).
  4. Each transaction becomes logged in perpetuity as a part of immutable distributed ledger. This is the main purpose of using blockchain here. This ensures all actors in the supply chain have simultaneous, independent and transparent access to all transactional records.
Figure 2: Creating DB record and blockchain transaction via API call

The problem however is that a user (could be some end user such as consumer, or an administrative employee of one of the supply chain operators) would not normally have the necessary tools and knowledge to access the blockchain to verify that the above has taken place. Best case scenario nowadays you get a transaction hash which looks like a string of gibberish and isn’t useful at all.

This isn’t helpful and undermines the value of verifiable trust which is a strong added value point for DLT applications when used correctly.

We solve the problem by introducing a simple web interface “widget” allowing to link UI (user interface) of web, desktop or mobile application to blockchain explorer so that end user can personally verify the transaction.

In the example given above, the widget appears upon initiation of blockchain related transaction. It has two states:

1. Syncing to blockchain (amber light, rotating spinner)

Figure 3: “Syncing to blockchain” (web widget state)

2. On blockchain (green light)

Figure 4: “On blockchain” (web widget and hyperlink to transactions explorer)

As soon as it goes into 2nd state, user can click on this widget which is linked to blockchain Explorer which comes out-of-the-box with Dappros Platform.

Explorer highlights the specific transaction:

Figure 5: Blockchain transactions Explorer highlighting the specific transaction

User may click on the transaction to review further details:

Figure 6: Blockchain transaction details

And this basically is how it works. You can see it all in action in our Youtube demo video here:

You may also test this web interface live currently available at TracyChain website: http://tracychain.com/demo

We will keep sharing simple but effective tricks and tools Dappros builds to make blockchain applications more intuitive and accessible for the users.

Please get in touch if you need help integrating the above widget and transactions explorer in your applications.

Previous Article

Leave a Reply

Your email address will not be published. Required fields are marked *