If you have been following along the blog series, you’ve seen in Part 1 why blockchain matters and in Part2 how we can build a shopping cart in ReactJs that will be used in this part to send our transactions to the blockchain. In this part, we will see the blockchain plumbing and setup.
Audience: If you are functional consultant or an architect who wants to understand how blockchain transactions work (at a high level). I have explained them in the Blockchain Request Lifecycle section. If you are developer who would like to build something similar, I have also posted the source code of my working prototype that demonstrates how Dynamics can be linked to the blockchain. I have never heard of blockchain in Dynamics365 space, so potentially this the first ever working prototype with source code – hooray!!
There are few blockchains in the market but the two biggest of them are Bitcoin’s blockchain and Ethereum Foundation blockchain. We will be using the Ethereum Foundation one because as per my research it is growing faster and has recently tied-up with Microsoft for a Blockchain As A Service solution. So knowing how to integrate with it will help you understand the underpinnings of that service.
Just to be clear I would not be using Microsoft’s Blockchain as a service because of two reasons
- It costs money to spin up a blockchain cluster in Azure and I am a developer on budget.
- I don’t like shortcuts.
I like to start from the grassroots and make my way up the chain. That way I can understand how connectivity works, dependencies, install order, etc. This is a difficult path because you need to install the packages one by one – in a particular sequence whereas on the Service they are all pre-installed and you get a working infrastructure. So I will leave it upto you, either way you get a blockchain and following is what its eco system is composed of.
The stack I used for Blockchain development
- Ethereum VM (i.e. the platform)
- Ethereum client – the one which connects a webpage to the platform)
- Metamask – a browser plugin which simulate a virtual ether wallet – you need ether (gas) to run SmartContracts)
- Solidity Compiler – a compiler which converts SmartContracts written in JS like language (solidity) into binary format which the platform understands)
- Truffle (optional) – a framework that deploys your SmartContracts from your project folder on the platform
- Remix – an online IDE to develop, compile and unit test smart contracts.
Blockchain Request Lifecycle
Let me try to explain how the Dynamics to Blockchain connectivity works.
Loading Products and Pricing from Dynamics 365
- When a customer browses to the Shopping page, a WebAPI request reads Product and Pricing information from Dynamics 365. This assumes you have already registered your app in the Azure AD. The code for this can be found in connect.js
- This request is raised by a React component called Action. All the data is fetched as JSON object and stored in something called a Store (Redux’s Store).
Initiating the Purchase
- When customer goes to the product catalog and presses Add button the following things happen
- A reducer intercepts this event and updates the state – that updates your UI (decreases the Inventory and adds the product to the shopping cart)
- A smart contract named Buy is invoked, this is first port of entry into the Blockchain
Calling Blockchain Smart contract
- Invocation is done by web3.js which is wrapper around the Ethereum client. Web3.js looks for the SmartContract with the name/signature in the Ethereum VM and if it finds one, it passes the transaction data as arguments. So Web3.js is your conduit between the browser and the blockchain platform.
Below is the code of the smart contract which posts the transaction on the blockchain
I wrote two smart contracts in Solidity
Buy – which actually create the transaction basically a collection of objects in Blockchain’s memory
TotalBillOfACustomer – total bill of the customer
Mining the blocks
- Once this transaction is posted into the blockchain’s data structure it basically goes into something called a block (an unverified block). Then a node actually mines that block (in a bid to put it on the verified chain) . But there is a twist here. The node won’t mine the block until you associate a reward with it. That reward is called gas which is generally paid in Ether (the cryptocurrency of Ethereum).
- That is where the Metamask comes into picture – as you see in my demo gif. Everytime I click on Add item I get an Metamask popup which is asking me to Submit/Reject. If I say Submit, then gas is purchased with ether from my Wallet and that gas is sent along with the smart contract request.
- Lot of miner nodes will compete to mine my block (it is a competition to crack the nonce – whoever finds that nonce will win). Whoever wins gets that reward.
- So Metamask ensures that money is not taken without our manual approval.
- That basically comes up with a response and you can take some action if you want – send email, update inventory, create invoice, etc.
I hope that was useful and as promised the link to full source code is on my Github
You will have to install the npm packages and get the webpack running in your local machine for the dependencies to resolve. It is not going to be a unzip, deploy and run type of application. As explained earlier there a lot of underpinnings / dependencies tools that are being used. Follow the trail starting from the packages.json file.