Visualize real-time sensor data from your Azure IoT hub by using the Web Apps feature of Azure App Service
Before you start this tutorial, set up your device. In the article, you set up your Azure IoT device and IoT hub, and you deploy a sample application to run on your device. The application sends collected sensor data to your IoT hub.
What you learn
In this tutorial, you learn how to visualize real-time sensor data that your IoT hub receives by running a web application that is hosted on a web app. If you want to try to visualize the data in your IoT hub by using Power BI, see Use Power BI to visualize real-time sensor data from Azure IoT Hub.
What you do
- Create a web app in the Azure portal.
- Get your IoT hub ready for data access by adding a consumer group.
- Configure the web app to read sensor data from your IoT hub.
- Upload a web application to be hosted by the web app.
- Open the web app to see real-time temperature and humidity data from your IoT hub.
What you need
Set up your device, which covers the following requirements:
- An active Azure subscription
- An Iot hub under your subscription
- A client application that sends messages to your Iot hub
Create a web app
In the Azure portal, click Create a resource > Web + Mobile > Web App.
Enter a unique job name, verify the subscription, specify a resource group and a location, select Pin to dashboard, and then click Create.
We recommend that you select the same location as your resource group.
Add a consumer group to your IoT hub
Consumer groups are used by applications to pull data from Azure IoT Hub. In this tutorial, 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:
In the Azure portal, open your IoT hub.
In the left pane, click Built-in endpoints, select Events on the top pane, and enter a name under Consumer groups on the right pane. Click Save after you change the Default TTL value and return it back to the original value.
Configure the web app to read data from your IoT hub
Open the web app you’ve just provisioned.
Click Application settings, and then, under App settings, add the following key/value pairs:
Key Value Azure.IoT.IoTHub.ConnectionString Obtained from Azure CLI Azure.IoT.IoTHub.ConsumerGroup The name of the consumer group that you add to your IoT hub WEBSITE_NODE_DEFAULT_VERSION 8.9.4
Click Application settings, under General settings, toggle the Web sockets option, and then click Save.
Upload a web application to be hosted by the web app
On GitHub, we've made available a web application that displays real-time sensor data from your IoT hub. All you need to do is configure the web app to work with a Git repository, download the web application from GitHub, and then upload it to Azure for the web app to host.
In the web app, click Deployment Options > Choose Source > Local Git Repository, and then click OK.
Click Deployment Credentials, create a user name and password to use to connect to the Git repository in Azure, and then click Save.
Click Overview, and note the value of Git clone url.
Open a command or terminal window on your local computer.
Download the web app from GitHub, and upload it to Azure for the web app to host. To do so, run the following commands:
git clone https://github.com/Azure-Samples/web-apps-node-iot-hub-data-visualization.git cd web-apps-node-iot-hub-data-visualization git remote add webapp <Git clone URL> git push webapp master:master
<Git clone URL> is the URL of the Git repository found on the Overview page of the web app.
Open the web app to see real-time temperature and humidity data from your IoT hub
On the Overview page of your web app, click the URL to open the web app.
You should see the real-time temperature and humidity data from your IoT hub.
Ensure the sample application is running on your device. If not, you will get a blank chart, you can refer to the tutorials under Setup your device.
You've successfully used your web app to visualize real-time sensor data from your IoT hub.
For an alternative way to visualize data from Azure IoT Hub, see Use Power BI to visualize real-time sensor data from your IoT hub.
To continue to get started with Azure IoT Hub and to explore all extended IoT scenarios, see the following:
We’d love to hear your thoughts. Choose the type you’d like to provide:
Our feedback system is built on GitHub Issues. Read more on our blog.