And we finally arrived at the last part of our Blockchain iOT (proof of concept) POC where we will explain how to read data from a web page that the API server (which we described in the second post) stores on the blockchain. In this case we have the following scenario: the device (see the first part) is transmitting data relating to temperature, humidity and GPS position to a rest server API which in turn registers them within the blockchain, creating a smart contract called IotData for each data received. In the blockchain there is another smart contract, called IotDataManager that collects all these instances and makes them available by exposing some methods.

Web App Architecture

The web app it’s very simple. It is a website written in C # with Asp.net Core technology and practically made up of a single controller with two actions: the first one refers to the page concerning the reading of the temperatures on the blockchain, the second one concerns the detection of the device path by detecting the GPS points stored during the recording of values. In both cases no server technology will be used, but the Web3.js library will be used, a javascript library that simplifies RPC communications with the Ethereum endpoint through an ad hoc provider

Let’s start

First of all we have to install the Web3.js library. You can do it with the command line using npm (install it if you don’t have in your pc)

 

npm install -g web3

We used an interesting chart.js plugin that is able to process data in real time by taking them from a stream. The plugin can be downloaded from the site and is very easy to use. At this point, all that remains is to dive in the code and analyze its main parts. Insert the link to the js libraries used in the code:

<script src="~/lib/moment/moment.min.js"></script>
    <script src="~/lib/charts/chart.js@2.8.0.js"></script>
    <script src="~/lib/charts/chartjs-plugin-streaming@1.8.0.js"></script>

When we want use the web3 library we have to choose a provider. We now are using Ganache that simulate a real Ethereum Blockchain and so we’ll connect through a http provider. Use the following line of code to instantiate your provider

web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));

You should always check the version of the library to avoid any syntactical errors. To check which is the current library’s verse use the following line of code (possibly run from your browser’s command line)

var version = web3.version.api;

For each Smart Contract we want to use we need to get the Json chaimata ‘abi’ format interface. This will allow us to recall an instance of that particular Smart Contract from the blockchain. In addition, to request a particular instance we must also provide its Address assigned by Ethereum at the time of creation. We get this address when we perform the smart contract migration on Ganache via the ‘truffle migrate’ command

var abi = JSON.parse('[{"constant": true,"inputs": [{"name": "","type": "uint256"}],"name": "iotdata",...   
var address = "0x7e03d3fEd772AFA633B3Fe0889Be03bA4F5d591E";

Here the result of the migration of IotDataManager Smart Contract where you can get the address of deployment

We get the instance (the only one) of the IotDataManager smart contract

 var iotDataManagerContract = web3.eth.contract(abi);
 var iotDataManagerContractInstance = iotDataManagerContract.at(address);

Now we are ready to invoke any method, both those that read the status of our Blockchain and those that carry out transactions with relative use of Gas. First we see how much data has arrived and stored in Blockchain. Recall that every reading that comes from the device and is stored in the Blockchain causes the creation of an IotData type smartcontract which is in turn stored in the iotDataManager which simulates the functionality of a DataBase. Let’s invoke the method ‘getNumberOfIotData()’ and we get this kind of response (as you can get from chrome debugger)

 

In the solidity code of the smart contract IotDataManager there is an array containing all the addresses of the IotData smart contracts and an associative array that returns a structure with the recorded data corresponding to an address

let’s take the last recorded data with its temperature and update the dashboard

 var lastDataAddress = iotDataManagerContractInstance.getIotDataAddress(tot - 1);
 var lastResp = iotDataManagerContractInstance.getIotData(lastDataAddress);
 var lastTempValue = parseFloat(lastResp[1]);
 updateDashboard(lastResp);

Here is the code of updateDashboard(lastResp)

Now let’s analyze the last part of our javascript code

The onRefresh() function is part of the graph configuration that is displayed and indicates which data must be published in correspondence with the Cartesian axes of the graph itself. The current time is reported on the X axis and the result of the call to the getIotdata () function is reported on the Y axis. This function checks that new values have arrived. If they arrived then it takes the last arrived (remember that the device launches the data once per second) otherwise it keeps the last value. The final result is the graph shown below where at the Out of Range values ( > 25 dgree) there is a registration in the table on the right

With the same type of logic you go to query the blockchai to capture for example the last 10 positions indicating exactly where the device has actually covered the GPS points

The visible result on a Google Maps will be the path of the device reported by the Makers that are inserted on the map at each recording

Conclusions

In this series of posts we have covered the main aspects related to a Proof of Concept of type iOT Blockchain. We have deliberately omitted all those aspects of authentication and security necessary on these occasions which can then be subsequently implemented as an improvement to the POC