7_Web_Dashboard.md

Web Dashboard

In the previous activities, we connected sensors to a NodeMCU which is configured to send the data to Azure IoT Hub, and visualize the data in PowerBI. In this activity, we will deploy a web application to Azure to visualize the data. In the spirit of open source, we'll deploy a NodeJS application to Azure App Service via an automated Git connected deployment.

The web app subscribes to the IoT Events and forwards them onto our webpage where the data is trended in a HTML5 chart via ChartJS.

1. Open the Azure Portal

2. Select + New → Web + Mobile → Web App

3. Enter a unique name for your Web App, such as {firstname}{lastname}IoTWeb

   The name will be used to create your URL: {firstname}{lastname}IoTWeb.azurewebsites.net

4. Select the subscription to create the App Service in

5. Create a new Resource Group or use the Resource Group you created in section 3

   The recommended resource group from Section 3 was: IoT_{firstname}_{lastname}

6. Create a new App Service Plan

   In order to minimize network costs, select the same region as before: West Central US

   Select an appropriate App Service Plan. For this demo, a Free plan is sufficient, but you scale up or scale down as is desired. If you have an existing App Service Plan, you can use it for this excercise

7. Ensure the "Pin to dashboard" option is selected and click Create to continue.

Add IoT Hub Consumer Group

Consumer groups are used by applications to pull data from Azure IoT Hub. In this lesson, you create a consumer group to be used by a coming Azure service to read data from your IoT hub.

To add a consumer group to your IoT hub, follow these steps:

1. In the Azure portal, open your IoT hub.

2. Click Endpoints on the left pane, select Events on the middle pane, enter IoTWebApp as the name under Consumer groups on the right pane, and then click Save.

   

Configure the Web App

1. Once the Web App deployment is completed, open the Web App from the Dashboard
2. Scroll down and select Deployment Options
3. Tap Choose Source
4. Select External Repository

   Azure has integrations with several Source Control and file sharing systems that make deploying code from secure, private locations easy. In our case, we'll use an external repository to get the code from a public GitHub repository.

5. In the Repository URL, enter:

   https://github.com/L2services/web-apps-node-iot-hub-data-visualization.git
   

   
6. Leave the default selections for master branch, git type and select OK to continue.

Enable Web Sockets and Set Configuration

1. Scroll down and select Application Settings
2. Change Web Sockets to On
3. Scroll down to App Settings and add the following keys: Azure.IoT.IoTHub.ConnectionString
Azure.IoT.IoTHub.ConsumerGroup
4. Fill in the keys with the Connection String and Consumer Group your IoT Hub

   The recommended Consumer Group was IoTWebApp and the Connection String can be found in Device Explorer on the Configuration Tab or in the Azure Portal by selecting your IoT Hub → Shared Access Polices → iothubowner and copy the Connection string-primary key field.

5. Check that the git based deployment is complete by selecting the Deployment Options

   If the app service deployment is complete, you should see a checkmark and timestamp of the deployment:

   

6. Click the Overview tab and then click the link in the URL field to open the web app.

   Every three seconds, the NodeMCU will send sensor values to IoT Hub which the web app is subscribed to. The web app will then push the data to your browser where it should be displayed in a chart similar to below.

   

Hooray!

We've successfully connected a custom web application to pull live streaming data from IoT Hub, and visualized the data through a 3rd party javascript charting library. This demonstrated the integration flexibility of IoT Hub and concludes the hands on lab. Great Job!