Visualizzare i dati del sensore in tempo reale dall'hub IoT di Azure usando la funzionalità App Web del Servizio App di AzureVisualize real-time sensor data from your Azure IoT hub by using the Web Apps feature of Azure App Service

Diagramma end-to-end

Nota

Prima di iniziare questa esercitazione, configurare il dispositivo.Before you start this tutorial, set up your device. In questo articolo si configureranno il dispositivo e l'hub IoT di Azure e si distribuirà un'applicazione di esempio da eseguire nel dispositivo.In the article, you set up your Azure IoT device and IoT hub, and you deploy a sample application to run on your device. L'applicazione invia i dati del sensore raccolti all'hub IoT.The application sends collected sensor data to your IoT hub.

Contenuto dell'esercitazioneWhat you learn

In questa esercitazione si imparerà a visualizzare i dati del sensore in tempo reale che l'hub IoT riceve eseguendo un'applicazione Web ospitata in un'app Web.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. Se si desidera provare a visualizzare i dati nell'hub IoT con Power BI, vedere Usare Power BI per visualizzare i dati del sensore in tempo reale dall'hub IoT di Azure.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.

Operazioni da fareWhat you do

  • Creare un'app Web nel portale di Azure.Create a web app in the Azure portal.
  • Preparare l'hub IoT per l'accesso dei dati mediante l'aggiunta di un gruppo di consumer.Get your IoT hub ready for data access by adding a consumer group.
  • Configurare l'app Web per leggere i dati del sensore dall'hub IoT.Configure the web app to read sensor data from your IoT hub.
  • Caricare un'applicazione Web che deve essere ospitata dall'app Web.Upload a web application to be hosted by the web app.
  • Aprire l'app Web per visualizzare i dati di temperatura e umidità in tempo reale dall'hub IoT.Open the web app to see real-time temperature and humidity data from your IoT hub.

Elementi necessariWhat you need

  • Configurare il dispositivo che presenta i seguenti requisiti:Set up your device, which covers the following requirements:
    • Una sottoscrizione di Azure attivaAn active Azure subscription
    • Un hub IoT nella sottoscrizioneAn Iot hub under your subscription
    • Un'applicazione client che invia messaggi all'hub IoTA client application that sends messages to your Iot hub
  • Scaricare GitDownload Git

Creare un'app WebCreate a web app

  1. Nel portale di Azure fare clic su Nuovo > Web e dispositivi mobili > App Web.In the Azure portal, click New > Web + Mobile > Web App.
  2. Immettere un nome univoco del processo, verificare la sottoscrizione, specificare un gruppo di risorse e il percorso, selezionare Aggiungi al dashboard, quindi fare clic su Crea.Enter a unique job name, verify the subscription, specify a resource group and a location, select Pin to dashboard, and then click Create.

    È consigliabile selezionare la stessa posizione in cui si trova il gruppo di risorse.We recommend that you select the same location as that of your resource group. In questo modo, si aumenta la velocità di elaborazione e si riducono i costi del trasferimento dati.Doing so assists with processing speed and reduces the cost of data transfer.

    Creare un'app Web

Aggiungere un gruppo di consumer dell'hub IoTAdd a consumer group to your IoT hub

I gruppi di consumer vengono usati dalle applicazioni per eseguire il pull dei dati dall'hub IoT di Azure.Consumer groups are used by applications to pull data from Azure IoT Hub. In questa esercitazione si crea un gruppo di consumer che verrà usato da un prossimo servizio di Azure per leggere i dati dall'hub IoT.In this tutorial, you create a consumer group to be used by a coming Azure service to read data from your IoT hub.

Per aggiungere un gruppo di consumer all'hub IoT, seguire questa procedura:To add a consumer group to your IoT hub, follow these steps:

  1. Nel portale di Azure, aprire l'hub IoT.In the Azure portal, open your IoT hub.
  2. Fare clic su Endpoint nel riquadro a sinistra, selezionare Eventi nel riquadro centrale, immettere un nome in Gruppi di consumer nel riquadro a destra, quindi fare clic su Salva.In the left pane, click Endpoints, select Events on the middle pane, enter a name under Consumer groups on the right pane, and then click Save.

    Creare un gruppo di consumer nell'hub IoT

Configurare l'app Web per leggere i dati dall'hub IoTConfigure the web app to read data from your IoT hub

  1. Aprire l'app Web di cui è stato appena effettuato il provisioning.Open the web app you’ve just provisioned.
  2. Fare clic su Impostazioni applicazione, quindi aggiungere le seguenti coppie chiave/valore in Impostazioni app:Click Application settings, and then, under App settings, add the following key/value pairs:

    ChiaveKey ValoreValue
    Azure.IoT.IoTHub.ConnectionStringAzure.IoT.IoTHub.ConnectionString Ottenuto da iothub-explorerObtained from iothub-explorer
    Azure.IoT.IoTHub.ConsumerGroupAzure.IoT.IoTHub.ConsumerGroup Il nome del gruppo di consumer che si aggiunge all'hub IoTThe name of the consumer group that you add to your IoT hub

    Aggiungere impostazioni all'app Web di Azure con coppie chiave/valore

  3. Fare clic su Impostazioni applicazione, in Impostazioni generali, attivare/disattivare l'opzione Web Socket, quindi fare clic su Salva.Click Application settings, under General settings, toggle the Web sockets option, and then click Save.

    Attivare/disattivare l'opzione Web Socket

Caricare un'applicazione Web che deve essere ospitata dall'app WebUpload a web application to be hosted by the web app

Su GitHub è disponibile un'applicazione Web che consente di visualizzare i dati del sensore in tempo reale dall'hub IoT.On GitHub, we've made available a web application that displays real-time sensor data from your IoT hub. È sufficiente configurare l'app Web che dovrà usare un repository Git, scaricare l'applicazione Web da GitHub e caricarla in Azure affinché l'applicazione Web possa ospitarla.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. Nell'app Web fare clic su Opzioni di distribuzione > Scegli origine > Repository Git locale, quindi scegliere OK.In the web app, click Deployment Options > Choose Source > Local Git Repository, and then click OK.

    Configurare la distribuzione dell'app Web per l'uso del repository Git

  2. Fare clic su Credenziali per la distribuzione, creare un nome utente e una password da usare per connettersi al repository Git in Azure, quindi scegliere Salva.Click Deployment Credentials, create a user name and password to use to connect to the Git repository in Azure, and then click Save.

  3. Fare clic su Panoramica e prendere nota del valore di URL clone GIT.Click Overview, and note the value of Git clone url.

    Ottenere l'URL clone Git dell'app Web

  4. Aprire una finestra del comando o del terminale nel computer locale.Open a command or terminal window on your local computer.

  5. Scaricare l'app Web da GitHub e caricarla in Azure affinché ospiti l'app Web.Download the web app from GitHub, and upload it to Azure for the web app to host. A tale scopo, eseguire i comandi seguenti: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
    

    Nota

    <URL clone GIT> è l'URL del repository Git che si trova nella pagina Panoramica dell'app Web.<Git clone URL> is the URL of the Git repository found on the Overview page of the web app.

Aprire l'app Web per visualizzare i dati di temperatura e umidità in tempo reale dall'hub IoTOpen the web app to see real-time temperature and humidity data from your IoT hub

Nella pagina Panoramica dell'app Web fare clic sull'URL per aprire l'app Web.On the Overview page of your web app, click the URL to open the web app.

Ottenere l'URL dell'app Web

Vengono visualizzati i dati di temperatura e umidità in tempo reale dall'hub IoT.You should see the real-time temperature and humidity data from your IoT hub.

Pagina dell'app Web che mostra temperatura e umidità in tempo reale

Nota

Verificare che l'applicazione di esempio sia in esecuzione nel dispositivo.Ensure the sample application is running on your device. Se non lo fosse, si otterrà un grafico vuoto, ed è possibile fare riferimento alle esercitazioni descritte in Configurare il dispositivo.If not, you will get a blank chart, you can refer to the tutorials under Setup your device.

Passaggi successiviNext steps

L'app Web è stata usata correttamente per visualizzare i dati del sensore in tempo reale dall'hub IoT.You've successfully used your web app to visualize real-time sensor data from your IoT hub.

Per un modo alternativo di visualizzare i dati dall'hub IoT di Azure, vedere Usare Power BI per visualizzare i dati del sensore in tempo reale dall'hub IoT.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.

Per altre informazioni sulle attività iniziali con l'hub IoT di Azure e per esplorare altri scenari IoT, vedere:To continue to get started with Azure IoT Hub and to explore other IoT scenarios, see the following: