Introduction

Web Apps is an Azure service for hosting web applications, REST APIs, and mobile backends. It allows development in a number of languages such as .NET, Ruby, PHP, etc.

Web Apps empowers your application by adding features such as security, load balancing, auto-scaling and automated management to it.

It provides DevOps capabilities such as continuous integration and deployment (fromVSTS, GitHub, Docker Hub and other sources), package management, staging environments, custom domain, and SSL certificates.

You have to pay for the Azure compute resources you use. The compute resources that are used is determined by the App Service plan that the Web Apps is run on.

For visualizing data from IoT Hub using Web Apps, we will require an IoT Hub and an application that sends data to this IoT Hub.

If you do not already have a Microsoft Azure account, you can refer the topic Microsoft Azure Free Sign-Up in the Getting Started section of Microsoft Azure.

If you have not created an IoT Hub already, you can refer the topic Creating an IoT Hub in Microsoft Azure in the Getting Started section of Microsoft Azure.

If you do not have an application that sends data to your IoT Hub, you can refer the topic Sending DHT11 sensor data to IoT Hub using NodeMCU in the Getting Started section of Microsoft Azure.

To visualize the data from an IoT Hub usingWeb Apps, we will need to do the following:

• Make the IoT Hub ready for data access by adding a consumer group.
• Create and configure a Web App
• Upload a web application to be hosted by the Web App

Adding a Consumer Group to IoT Hub

Consumer groups are used by applications to pull data from the IoT Hub. (In this case, Stream Analytics Job is the application that will be pulling data from the IoT Hub)

Follow the steps given below to add a consumer to your IoT Hub:

1.  Sign in to your Microsoft Azure account.

2.  Open your IoT Hub. Click on Endpoints under Messaging.

3.  In the window that appears after clicking on Endpoints, click on the built-in endpoint named Events. This is shown in the image given below.

4.  A new window named Properties will open. In this window, find Consumer Groups and enter a name for a new consumer group and then click on Save at the top-left of that window. This is shown in the image given below. If you have created any consumer groups in the past, they will be listed under the consumer groups. Create a new consumer group even if there are other consumer groups present. We will use the new consumer group.

Now that we have added a consumer group, we will create and configure a Web App.

Create and Configure a Web App

Creating a Web App

1.  In the Azure Portal, select New --> Web + Mobile --> Web App

2.  A new Web App window will open. Fill in the details asked.

• App name : Choose a name for your app. The name must be globally unique. If the name is valid, a green check mark will appear.
• Resource Group : Select a resource group. Use an existing resource group or create new one. Make sure that the resource group used has the same location as that of the Web App Service Plan in order to reduce the costs of data transfer.
• OS : Select OS. We have used Windows.
• App Service plan/Location : Click on this. A new window will appear where you can click on Create New to create a new plan. Select the location for the service plan, its pricing tier and a name for it. Select the same location as that of the resource group. The name must be unique; a green check mark appears if it is valid. Select the F1 Free pricing tier. Click on Select. Then click on OK.
• Application Insights : We have used Off.
• Pin to Dashboard : Select this option for easy access to the Web App.

3.  Click Create.
It may take a few minutes to create the Web App.
You will get a notification on completion of creation of the Web App.

Configure the Web App to Read Data from IoT Hub

1.  Open the Web App that you created.

2.  Click on Application Settings.

3.  In the details that appear in the window, you will find General Settings at the top.

4.  Under General Settings, there is an option named Web Sockets. Click on On to turn On the Web Sockets.

5.  Click on Save which is at the top left corner.

6.  Now scroll down in the Application Settings, and find App Settings.
In App Settings, add the following Key-Value pairs :

7.  Click on Save which is at the top left corner.

8.  Do not modify any other settings.

Now that we have created and configured a Web App, we will upload a Web Application which will be hosted by the Web App.

We will be using a sample Web Application by Azure that is available on GitHub.

This Web Application is created for use with Azure sample applications which send DHT22 sensor data to an IoT Hub using devices like Adafruit Feather Huzzah and Sparkfun ESP8266 Thing Dev.

You can create your own Web Application for your specific application. You will need the requisite knowledge required for developing Web Applications for this.

Here, we will be using the Azure Sample application to send DHT22/DHT11 sensor data to an IoT Hub and the Azure sample Web Application to visualize the data on the web.

Refer the topic Sending DHT11 sensor data to IoT Hub using NodeMCU in the Getting Started section of Microsoft Azure for an idea about the data being sent to the IoT Hub and how it is being sent.

Upload a Web Application to be Hosted by the Web App

We will require Git to upload the Web Application to the Web App.

If you do not already have Git on your Laptop/PC, download Git from here for your OS.

We need to configure the Web App to work with a Git Repository, download the Web Application from GitHub, and upload the application to the Web App.

Configure Web App to Work with a Git Repository

1.  Open the Web App from your dashboard.

2.  Click on Deployment Options. A new pane will open. Click on Choose Source and select Local Git Repository from the list.

3.  Click OK. (If you are have not set the deployment credentials, you will see a Deployment Credentials option as well in the Deployment Options. You will have to enter the credentials before clicking OK. Follow the step below to know about Deployment Credentials)

4.  Click on Deployment Credentials, a new window will appear. Create a username and password to connect to Git repository in Azure. Then click Save.

5.  Click on Overview, and note the Git clone URL.

Download the Web Application from GitHub

1.  Open a Command Line window.

2.  Type git clone https://github.com/Azure-Samples/web-apps-node-iot-hub-data-visualization in the command line window.

3.  The files for the Web Application will be cloned to your computer.

Uploading the Web Application to the Web App

1.  Open a Command Line window.

2.  Type the commands given below one by one, and press enter after typing
     a.  cd web-apps-node-iot-hub-data-visualization
     b.  git remote add webapp <Git Clone URL>
          <Git Clone URL> is the URL we noted earlier. Put the URL in place of <Git Clone URL>.
     c.  git push webapp master:master

3.  After the third command is run, you will get a pop up where you have to enter the credentials for Git you created earlier in Deployment Credentials. After you enter the credentials, it will take a minute or two to deploy the Web Application to the Web App. You will see certain commands running on the Command Line window, at the end of which you will see Deployment successful.

Now that the Web Application has been deployed, open the application by clicking the URL in the Web App window. The URL is shown in the image below.

The Application looks like the image shown below.

Now connect your device and start sending DHT11 sensor data to your IoT Hub and check the web application for visualization of the data. The application starts plotting the humidity and temperature values on the graph in real time.

For good measure, stop the Web App Service using the Stop button after you are done using the App.