Azure IOT MQTT devices + dashboard

This project has been developed for an Internet of Things assignment.Sapienza Università di Roma

In this exercise I will use Microsoft Azure IoT Hub to manage values sent from some MQTT devices, collect them via a C# backend and expose them through a REST API; then I will show the collected values on a very simple HTML dashboard.

First of all let's create an IoT hub and associate it to a resource group on Azure and add some devices. The default options will be okay, but if you are a student pay attention to check the free plan (the default one is S1 - not free). Please collect their connection string.

Open the azure shell and collect the following values:

Event Hub-compatible endpoint

>> az iot hub show --query properties.eventHubEndpoints.events.endpoint --name {your IoT Hub name}

Event Hub-compatible name

>> az iot hub show --query properties.eventHubEndpoints.events.path --name {your IoT Hub name}

SAS key

>> az iot hub policy show --name service --query primaryKey --hub-name {your IoT Hub name}

We will need them later in order to connect to the hub from the backend.

Let'create a new ASP.NET application for the REST API and the frontend.

>> git clone https://github.com/Azure-Samples/dotnet-core-api

Edit the hub controller class with the details of your hub just collected.

Enter in the new folder and just type:

>> dotnet restore

>> dotnet run

He will start collecting messages and also start a webserver on port 5000.

Let's do the very same thing for the client.

>> git clone https://github.com/Azure-Samples/dotnet-core-api

Change the connection strings in order to connect to your devices.

Enter in the new folder and just type:

>> dotnet restore

>> dotnet run

The client will start sending messages to the broker, and into the backend logs you should now see the messages from each client.

Open your browser and surf to localhost:5000/swagger; here you can see all the REST API exposed by the server used by the frontend.

Open your browser and surf to localhost:5000, here you can see the dashboard.

In order to deploy it on Azure as a Web Application, just keep on going as below.

Set user credential for deployment, so open the azure terminal and:

>> az webapp deployment user set --user-name <username> --password <password>

Create a Application Service plan

>> az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE

Create the application

>> az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --deployment-local-git

You should get an output with your local git where to push your data

"deploymentLocalGitUrl": "https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git",

In your local terminal

>> git remote add azure <deploymentLocalGitUrl-from-create-step>

>> git push azure master

And the deploy will start!

Once finished your dashboard will be available at: http://<app_name>.azurewebsites.net/