Skip to content

Latest commit

 

History

History
118 lines (73 loc) · 5.96 KB

iot-hub-live-data-visualization-in-web-apps.md

File metadata and controls

118 lines (73 loc) · 5.96 KB
title description author ms.service services ms.topic ms.tgt_pltfrm ms.date ms.author
Real-time data visualization of sensor data from your Azure IoT hub – Web Apps | Microsoft Docs
Use the Web Apps feature of Microsoft Azure App Service to visualize temperature and humidity data that is collected from the sensor and sent to your Iot hub.
rangv
iot-hub
iot-hub
conceptual
arduino
04/11/2018
rangv

Visualize real-time sensor data from your Azure IoT hub by using the Web Apps feature of Azure App Service

End-to-end diagram

[!INCLUDE iot-hub-get-started-note]

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

  • Download Git

Create a web app

  1. In the Azure portal, click Create a resource > Web + Mobile > Web App.

  2. 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.

    Create a web app

[!INCLUDE iot-hub-get-started-create-consumer-group]

Configure the web app to read data from your IoT hub

  1. Open the web app you’ve just provisioned.

  2. 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

    Add settings to your web app with key/value pairs

  3. Click Application settings, under General settings, toggle the Web sockets option, and then click Save.

    Toggle the Web sockets option

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.

  1. In the web app, click Deployment Options > Choose Source > Local Git Repository, and then click OK.

    Configure your web app deployment to use the local Git repository

  2. Click Deployment Credentials, create a user name and password to use to connect to the Git repository in Azure, and then click Save.

  3. Click Overview, and note the value of Git clone url.

    Get the Git clone URL of your web app

  4. Open a command or terminal window on your local computer.

  5. 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

    [!NOTE] <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.

Get the URL of your web app

You should see the real-time temperature and humidity data from your IoT hub.

Web app page showing real-time temperature and humidity

Note

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.

Next steps

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.

[!INCLUDE iot-hub-get-started-next-steps]