Visualizzare i dati del sensore in tempo reale dall'hub IoT di Azure usando la funzionalità App Web del Servizio App di Azure

Diagramma end-to-end

Nota

Prima di iniziare questa esercitazione, configurare il dispositivo. In questo articolo si configureranno il dispositivo e l'hub IoT di Azure e si distribuirà un'applicazione di esempio da eseguire nel dispositivo. L'applicazione invia i dati del sensore raccolti all'hub IoT.

Contenuto dell'esercitazione

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

Operazioni da fare

  • Creare un'app Web nel portale di Azure.
  • Preparare l'hub IoT per l'accesso dei dati mediante l'aggiunta di un gruppo di consumer.
  • Configurare l'app Web per leggere i dati del sensore dall'hub IoT.
  • Caricare un'applicazione Web che deve essere ospitata dall'app Web.
  • Aprire l'app Web per visualizzare i dati di temperatura e umidità in tempo reale dall'hub IoT.

Elementi necessari

  • Configurare il dispositivo che presenta i seguenti requisiti:
    • Una sottoscrizione di Azure attiva
    • Un hub IoT nella sottoscrizione
    • Un'applicazione client che invia messaggi all'hub IoT
  • Scaricare Git

Creare un'app Web

  1. Nel portale di Azure fare clic su Nuovo > Web e dispositivi mobili > App Web.
  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.

    È consigliabile selezionare la stessa posizione in cui si trova il gruppo di risorse. In questo modo, si aumenta la velocità di elaborazione e si riducono i costi del trasferimento dati.

    Creare un'app Web

Aggiungere un gruppo di consumer dell'hub IoT

I gruppi di consumer vengono usati dalle applicazioni per eseguire il pull dei dati dall'hub IoT di Azure. 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.

Per aggiungere un gruppo di consumer all'hub IoT, seguire questa procedura:

  1. Nel portale di Azure, aprire l'hub IoT.
  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.

    Creare un gruppo di consumer nell'hub IoT

Configurare l'app Web per leggere i dati dall'hub IoT

  1. Aprire l'app Web di cui è stato appena effettuato il provisioning.
  2. Fare clic su Impostazioni applicazione, quindi aggiungere le seguenti coppie chiave/valore in Impostazioni app:

    Chiave Valore
    Azure.IoT.IoTHub.ConnectionString Ottenuto da iothub-explorer
    Azure.IoT.IoTHub.ConsumerGroup Il nome del gruppo di consumer che si aggiunge all'hub IoT

    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.

    Attivare/disattivare l'opzione Web Socket

Caricare un'applicazione Web che deve essere ospitata dall'app Web

Su GitHub è disponibile un'applicazione Web che consente di visualizzare i dati del sensore in tempo reale dall'hub IoT. È 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.

  1. Nell'app Web fare clic su Opzioni di distribuzione > Scegli origine > Repository Git locale, quindi scegliere 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.

  3. Fare clic su Panoramica e prendere nota del valore di URL clone GIT.

    Ottenere l'URL clone Git dell'app Web

  4. Aprire una finestra del comando o del terminale nel computer locale.

  5. Scaricare l'app Web da GitHub e caricarla in Azure affinché ospiti l'app Web. A tale scopo, eseguire i comandi seguenti:

    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.

Aprire l'app Web per visualizzare i dati di temperatura e umidità in tempo reale dall'hub IoT

Nella pagina Panoramica dell'app Web fare clic sull'URL per aprire l'app Web.

Ottenere l'URL dell'app Web

Vengono visualizzati i dati di temperatura e umidità in tempo reale dall'hub IoT.

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

Nota

Verificare che l'applicazione di esempio sia in esecuzione nel dispositivo. Se non lo fosse, si otterrà un grafico vuoto, ed è possibile fare riferimento alle esercitazioni descritte in Configurare il dispositivo.

Passaggi successivi

L'app Web è stata usata correttamente per visualizzare i dati del sensore in tempo reale dall'hub IoT.

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.

Per altre informazioni sulle attività iniziali con l'hub IoT di Azure e per esplorare altri scenari IoT, vedere: