Hands-on guide #1: "Data visualization of virtualized IoT devices using Azure"

In this tutorial I will show how to simulate Iot devices and monitor the data of their sensors through a web app in nodejs. For this tutorial I will use the Azure IoT Hub and so using as well the Azure SDK.

• Create an Azure IoT Hub
• Configure your IoT hub with a device, a consumer group, and use that information for connecting a device and a service application
• On a website, register for device telemetry and broadcast it over a web socket to attached clients
• In a web page, display device data in a chart

To proceed with the guide, it is needed an Azure Account.

Before continuing

This is the Github repo if you want to check out the full code. I suggest to clone the repository or download it, in order to have:

• The script that simulates the device locally
• The complete webapp code, ready to be used for the cloud deployment

This is a brief focus video on the key points of this hands-on:

Create the IoT hub

1. Create IoT hub, as a student I have chosen the tier: “F1: Free tier”.
2. If not yet created, you will need to create a resource group, from now on the resource group name will be: "azureiotdemo".

Add devices to the Hub

To authorize the devices to send data to our hub we need to add them or via the GUI on the Azure's portal or via the cloud shell. I prefer the second option:

from the Azure portal we can open the cloud shell and type these commands:

• First of all install the IoT extension:

• Add a device via this command:

• Then copy the connection string that will output after this command:

az iot hub device-identity show-connection-string --hub-name {YourIoTHubName} --device-id MyPythonDevice

The key should look like this:

HostName={YourIoTHubName}.azure-devices.net;DeviceId=MyPythonDevice;SharedAccessKey={YourSharedAccessKey}

Send data via the virtualized device

To simulate the device we can use a script in Python that sends random data to the IoT Hub. This is presents in the folder "simulatedDevice". We will use the Azure SDK to communicate to the Hub via the MQTT protocol.

Using the connection string retrieved before, we can connect to the hub via the object "IotHubDeviceClient".

Then construct messages with random data and send it through the connection object returned once the connection is established to the Hub. In the azure quickstart repository there is an example to understand better the concept.

It is possible to attach custom property on the sent message, in this way we can set alarm, but also use it as a kind of topic, since the SDK of Azure hide, in a certain sense, this pattern of the MQTT protocol.

To complete the configuration of the python script, we need to create locally a file in the root folder of the project, called "properties.json". Then put the snippet above inside the file, as always substitute the string with your key retrieved before.

You can add multiple strings in order to simulate different devices.

{ "deviceConnectionStrings": [
        "HostName={YourIoTHubName}.azure-devices.net;DeviceId=MyPythonDevice;SharedAccessKey={YourSharedAccessKey}"
    ]
}

If you do not have installed yet the Azure sdk for python, then execute the command in your local shell:

pip install azure-iot-device

To run the script to test if it is working you can execute the command in your shell (the local one, not the cloud):

python .\simulatedDevice\SimulatedDevice.py 0

The argument passed corresponds to the index of the list created in the JSON file. This is done to avoid putting the private keys in the repo.

Dashboard on the website

You can use the webapp inside the repo. However, if this does not suit your needs and you want to customize your dashboard. I suggest to you in order to not start completely from zero this skeleton node.js webapp.

We can deploy this webapp locally or on the azure cloud, in this case I choose the cloud solution. At the server-side we have two main things to manage:

1. Open a WebSocket and broadcast to the clients the data
2. Open a connection to the IoTHub.

I wrote a script that will handle the latest hour data and visualize them in tables. There are also "monitor" (like the one on the left picture) to visualize the last data provided by a specific station.

We can see also the latest data grouped by a sensor.

Persistence

Unfortunately I have to handle the persistence of data without the use of a proper DB. I think this is due to some restrictions on the Azure student account. I do not have permission to deploy the SQL DB in any of the available locations, as is visible from the picture on top.

To solve the problem I have used at server-side a JSON file that stores the latest data sent by the sensors.

Whenever a new client is connected, the server will push the data of the latest hour if there are any.

Whenever a new message comes from a device to the IotHub, the EventHubReader will be notified. The new data are written in the JSON and then send it to the client-side for visualization.

Preliminary operations for the WebApp deploy

We have to configure the consumer group, we can consider it as a particular topic so that applications can reach data from the same endpoint of interest. We can create a new resource group using the command:

Similarly to what we have done before we need the connection string but now of the IoT Hub and not the device:

Deploy the app in the Azure App service

To deploy the web application in the Azure Cloud, we need first an App Service Plan. Running this command will create a new FREE service plan, we have to use the same resource group of the Hub (azureiotdemo).

Finally, to create the webapp we can run this command:

az webapp create -n <your web app name> -g <your resource group name> -p <your app service plan name> --runtime "node|10.6" --deployment-local-git

Remember the connection string of the Hub that we have generated before? Now we need it, we have to set the environment variable of this web app. It can be done in this way:

az webapp config appsettings set -n <your web app name> -g <your resource group name> --settings EventHubConsumerGroup=<your consumer group> IotHubConnectionString=<your IoT hub connection string>

We have spoken of web socket, to enable the web app to use it we have to insert these lines in the shell:

It is needed a general git credential in the Azure account to proceed, if we do not have one, we can create it in this way:

az webapp deployment user set --user-name <your deployment user name>

So finally we are enabled to configure the latest parameter of the webapp:

az webapp deployment source config-local-git -n <your web app name> -g <your resource group name>

Now we are done, we just need to push the app with the git command:

git remote add webapp <Git clone URL>

git push webapp master:master

The website will be deployed at: https://<your web app name>.azurewebsites.net

You can now start sending message through the python script and visualize them in the website.

If you want to see my website deployed, this is the link: