Esercitazione: Visualizzare i dati dei sensori in tempo reale dall'hub IoT di Azure in un'applicazione Web

  • Articolo

In questo articolo viene illustrato come visualizzare i dati del sensore in tempo reale ricevuti dall'hub IoT con un'app Web Node.js in esecuzione nel computer locale. Dopo aver eseguito l'app Web in locale, è possibile ospitare l'app Web in Servizio app di Azure.

Diagramma end-to-end

Prerequisiti

L'esempio di applicazione Web per questa esercitazione viene scritto in Node.js. I passaggi descritti in questo articolo presuppongono un computer di sviluppo Windows; Tuttavia, è anche possibile eseguire questi passaggi in un sistema Linux nella shell preferita.

  • Una sottoscrizione di Azure. Se non si ha una sottoscrizione di Azure, creare un account gratuito prima di iniziare.

  • Un hub IoT nella sottoscrizione di Azure. Se non si dispone ancora di un hub, è possibile seguire la procedura per creare un hub IoT usando l'interfaccia della riga di comando o l'portale di Azure.

  • Un dispositivo registrato nell'hub IoT. Se non è ancora stato registrato un dispositivo, registrare uno nella portale di Azure.

  • Dispositivo simulato che invia messaggi di telemetria all'hub IoT. Usare il simulatore online Raspberry Pi per ottenere un dispositivo simulato che invia dati di temperatura a hub IoT.

  • Node.js versione 14 o successiva. Per controllare la versione del nodo eseguire node --version.

  • Git.

Aggiungere un gruppo di consumer dell'hub IoT

I gruppi di consumer forniscono visualizzazioni indipendenti nel flusso di eventi che consentono alle app e ai servizi di Azure di usare in modo indipendente i dati dallo stesso endpoint di Hub eventi. In questa sezione viene aggiunto un gruppo consumer all'endpoint predefinito dell'hub IoT usato dall'app Web per leggere i dati.

Eseguire il comando seguente per aggiungere un gruppo di consumer all'endpoint predefinito dell'hub IoT:

az iot hub consumer-group create --hub-name YOUR_IOT_HUB_NAME --name YOUR_CONSUMER_GROUP_NAME

Annotare il nome scelto, è necessario più avanti in questa esercitazione.

Ottenere una stringa di connessione del servizio per l'hub IoT

Gli hub IoT vengono creati con diversi criteri di accesso predefiniti. Uno di questi è il criterio del servizio, che offre a un servizio autorizzazioni sufficienti per la lettura e la scrittura degli endpoint dell'hub IoT. Eseguire il comando seguente per ottenere una stringa di connessione per l'hub IoT che rispetti i criteri del servizio:

az iot hub connection-string show --hub-name YOUR_IOT_HUB_NAME --policy-name service

La stringa di connessione del servizio dovrebbe essere simile all'esempio seguente:

"HostName=YOUR_IOT_HUB_NAME.azure-devices.net;SharedAccessKeyName=service;SharedAccessKey=YOUR_SHARED_ACCESS_KEY"

Prendere nota della stringa di connessione del servizio, necessaria più avanti in questa esercitazione.

Scaricare l'app Web da GitHub

Scaricare o clonare l'esempio di app Web da GitHub: web-apps-node-iot-hub-data-visualization.

Esaminare il codice dell'app Web

Nel computer di sviluppo passare alla directory web-apps-node-iot-hub-data-visualization , quindi aprire l'app Web nell'editor preferito. Di seguito viene illustrata la struttura di file visualizzata in Visual Studio Code:

Screenshot che mostra la struttura di file dell'app Web.

Esaminare i file seguenti:

  • server.js è uno script sul lato servizio che inizializza il socket Web e la classe wrapper di Hub eventi. Fornisce un callback alla classe wrapper di Hub eventi usata dalla classe per trasmettere messaggi in ingresso al web socket.

  • script/event-hub-reader.js è uno script lato servizio che si connette all'endpoint predefinito dell'hub IoT usando la stringa di connessione e il gruppo consumer specificati. Esso estrae DeviceId ed EnqueuedTimeUtc dai metadati dei messaggi in ingresso e quindi inoltra il messaggio usando il metodo di callback registrato da server.js.

  • public/js/chart-device-data.js è uno script lato client in ascolto sul web socket, tiene traccia di ogni DeviceId e archivia gli ultimi 50 punti di dati in ingresso per ogni dispositivo. Associa quindi i dati del dispositivo selezionati all'oggetto grafico.

  • public/index.html gestisce il layout dell'interfaccia utente per la pagina Web e fa riferimento agli script necessari per la logica lato client.

Configurare le variabili di ambiente per l'app Web

Per leggere i dati dall'hub IoT, l'app Web necessita della stringa di connessione dell'hub IoT e del nome del gruppo di consumer da leggere. Ottiene queste stringhe dall'ambiente del processo nelle righe seguenti in server.js:

const iotHubConnectionString = process.env.IotHubConnectionString;
if (!iotHubConnectionString) {
  console.error(`Environment variable IotHubConnectionString must be specified.`);
  return;
}
console.log(`Using IoT Hub connection string [${iotHubConnectionString}]`);

const eventHubConsumerGroup = process.env.EventHubConsumerGroup;
console.log(eventHubConsumerGroup);
if (!eventHubConsumerGroup) {
  console.error(`Environment variable EventHubConsumerGroup must be specified.`);
  return;
}
console.log(`Using event hub consumer group [${eventHubConsumerGroup}]`);

Impostare le variabili di ambiente nella finestra di comando con i comandi seguenti. Sostituire i valori segnaposto con la stringa di connessione del servizio per l'hub IoT e il nome del gruppo di consumer creato in precedenza. Non racchiudere tra virgolette le stringhe.

set IotHubConnectionString=YOUR_IOT_HUB_CONNECTION_STRING
set EventHubConsumerGroup=YOUR_CONSUMER_GROUP_NAME

Eseguire l'app Web

  1. Verificare che il dispositivo sia in esecuzione e che invii i dati.

  2. Nella finestra dei comandi eseguire le righe seguenti per scaricare e installare pacchetti a cui si fa riferimento e avviare il sito Web:

    npm install
npm start

  3. Nella console verrà visualizzato l'output che indica che l'app Web è stata connessa correttamente all'hub IoT e che è in ascolto sulla porta 3000:

    Screenshot che mostra l'esempio di app Web in esecuzione correttamente nella console.

Aprire una pagina Web per visualizzare i dati dall'hub IoT

Aprire una finestra in http://localhost:3000.

Nell'elenco Seleziona un dispositivo, selezionare il dispositivo per visualizzare un tracciato di esecuzione degli ultimi 50 punti dati di temperatura e umidità inviati dal dispositivo all'hub IoT.

Screenshot dell'app Web in esecuzione in localhost, che mostra la temperatura e l'umidità in tempo reale.

Si dovrebbe visualizzare anche l'output nella console che mostra i messaggi trasmessi dall'app Web al client browser:

Screenshot dell'output dell'app Web nella console.

Ospitare l'app Web nel Servizio app di Azure

L'Servizio app di Azure fornisce una piattaforma come servizio (PAAS) per ospitare applicazioni Web. Le applicazioni Web ospitate in servizio app possono trarre vantaggio da potenti funzionalità di Azure, ad esempio sicurezza, bilanciamento del carico e scalabilità, nonché soluzioni DevOps di Azure e partner come distribuzione continua, gestione pacchetti e così via. servizio app supporta applicazioni Web sviluppate in molte lingue popolari e distribuite nell'infrastruttura Windows o Linux.

In questa sezione si esegue il provisioning di un'app Web in Servizio app e si distribuisce il codice usando i comandi dell'interfaccia della riga di comando di Azure. Per informazioni dettagliate sui comandi usati, vedere la documentazione di AZ webapp.

  1. Un piano di servizio app definisce un set di risorse di calcolo per l'esecuzione di un'app ospitata in Servizio app. In questa esercitazione per ospitare l'app Web viene usato il livello Sviluppatore/gratuito. Con il livello gratuito, l'app Web viene eseguita su risorse Windows condivise con altre app del servizio app, incluse le app di altri clienti. Azure offre anche piani di servizio app per distribuire app Web in risorse di calcolo Linux. Se si dispone già di un piano di servizio app che si desidera usare, è possibile ignorare questo passaggio.

    Per creare un piano servizio app usando il livello gratuito di Windows, usare il comando az appservice plan create. Usare lo stesso gruppo di risorse usato dall'hub IoT dell'utente. Il nome del piano di servizio può contenere lettere maiuscole e minuscole, numeri e trattini.

    az appservice plan create --name NEW_NAME_FOR_YOUR_APP_SERVICE_PLAN --resource-group YOUR_RESOURCE_GROUP_NAME --sku FREE

  2. Usare il comando az webapp create per effettuare il provisioning di un'app Web nel piano di servizio app. Il parametro --deployment-local-git consente di caricare e distribuire il codice dell'app Web da un repository Git nel computer locale. Il nome dell'app Web deve essere globalmente univoco e può contenere lettere maiuscole e minuscole, numeri e trattini. Assicurarsi di specificare Node versione 14 o successiva per il --runtime parametro, a seconda della versione del runtime di Node.js in uso. È possibile usare il az webapp list-runtimes comando per ottenere un elenco di runtime supportati.

    az webapp create -n NEW_NAME_FOR_YOUR_WEB_APP -g YOUR_RESOURCE_GROUP_NAME -p YOUR_APP_SERVICE_PLAN_NAME --runtime "NODE:14LTS" --deployment-local-git

  3. Usare il comando az webapp config appsettings set per aggiungere le impostazioni dell'applicazione per le variabili di ambiente che specificano la stringa di connessione dell'hub IoT e il gruppo consumer dell'hub eventi. Le singole impostazioni sono delimitate dallo spazio nel -settings parametro. Usare la stringa di connessione del servizio per l'hub IoT e il gruppo di consumer creato in precedenza in questa esercitazione.

    az webapp config appsettings set -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --settings EventHubConsumerGroup=YOUR_CONSUMER_GROUP_NAME IotHubConnectionString="YOUR_IOT_HUB_CONNECTION_STRING"

  4. Abilitare il protocollo Web Sockets per l'app Web e impostare l'app Web affinché riceva solo richieste HTTPS (le richieste HTTP vengono reindirizzate a HTTPS).

    az webapp config set -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --web-sockets-enabled true
az webapp update -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --https-only true

  5. Per distribuire il codice in servizio app, usare le credenziali di distribuzione a livello di utente. Le credenziali di distribuzione livello utente sono diverse dalle credenziali di Azure e vengono usate per le distribuzioni FTP e locali Git in un'app Web. Una volta impostate, sono valide in tutte le app del servizio app in tutte le sottoscrizioni dell'account Azure. Se in precedenza sono state impostate delle credenziali di distribuzione livello utente, è possibile usare tali credenziali.

    Se in precedenza non sono state impostate credenziali di distribuzione a livello di utente o non è possibile ricordare la password, eseguire il comando az webapp deployment user set . Il nome utente della distribuzione deve essere univoco in Azure e per i push Git locali non deve contenere il simbolo "@". Quando viene richiesto, immettere e confermare la nuova password. La password deve essere composta da almeno otto caratteri, con due dei tre elementi seguenti: lettere, numeri e simboli.

    az webapp deployment user set --user-name NAME_FOR_YOUR_USER_CREDENTIALS

  6. Ottenere l'URL Git da usare per eseguire il push del codice nel servizio app.

    az webapp deployment source config-local-git -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME

  7. Aggiungere un oggetto remoto al clone che fa riferimento al repository Git per l'app Web nel servizio app. Sostituire il GIT_ENDPOINT_URL segnaposto con l'URL restituito nel passaggio precedente. Assicurarsi di essere nella directory di esempio web-apps-code-iot-hub-data-visualization, quindi eseguire il comando seguente nella finestra di comando.

    git remote add webapp GIT_ENDPOINT_URL

  8. Per distribuire il codice nel servizio app, immettere il comando seguente nella finestra di comando. Assicurarsi di essere nella directory di esempio web-apps-code-iot-hub-data-visualization. Se vengono richieste le credenziali, immettere le credenziali di distribuzione a livello di utente create nel passaggio 5. Eseguire il push nel ramo principale del servizio app remoto.

    git push webapp master:master

  9. Stato degli aggiornamenti della distribuzione nella finestra di comando. Una distribuzione riuscita termina con righe simili all'output seguente:

    remote:
remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Deployment successful.
To https://contoso-web-app-3.scm.azurewebsites.net/contoso-web-app-3.git
6b132dd..7cbc994  master -> master

  10. Eseguire il comando seguente per eseguire una query sullo stato dell'app Web e verificare che sia in esecuzione:

    az webapp show -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --query state

  11. Andare a https://<your web app name>.azurewebsites.net in un browser. Una pagina Web simile a quella visualizzata quando è stata eseguita l'app Web in locale. Supponendo che il dispositivo sia in esecuzione e invii dati, dovrebbe essere visualizzato un tracciato in esecuzione delle 50 più recenti letture di temperatura e umidità inviate dal dispositivo.

Risoluzione dei problemi

Se si verificano problemi con questo esempio, provare a eseguire i passaggi nelle sezioni riportate di seguito. In caso di problemi, inviare commenti e suggerimenti nella parte inferiore di questo articolo.

Problemi relativi al client

  • Se un dispositivo non viene visualizzato nell'elenco o non viene disegnato alcun grafico, assicurarsi che il codice del dispositivo sia in esecuzione nel dispositivo.

  • Nel browser aprire gli strumenti di sviluppo (in molti browser il tasto F12 lo apre) e trovare la console. Cercare eventuali avvisi o errori.

  • È possibile eseguire il debug dello script lato client in /js/chat-device-data.js.

Problemi del sito Web locale

  • Controllare l'output nella finestra in cui è stato avviato il nodo per l'output della console.

  • Eseguire il debug del codice server, in particolare server.js e /scripts/event-hub-reader.js.

Problemi relativi al servizio app di Azure

  • Nel portale di Azure passare all'app Web. Nel riquadro sinistro, in Monitoraggio selezionare App Service logs (Log del servizio app). Attivare Registrazione applicazioni (file system) , impostare Livello su Errore, quindi selezionare Salva. Aprire quindi Flusso di registrazione (in Monitoraggio).

  • Dall'app Web in portale di Azure, in Strumenti di sviluppo selezionare Console e convalidare le versioni di nodo e npm con node -v e npm -v.

  • Se viene visualizzato un errore relativo alla mancata individuazione di un pacchetto, è possibile che siano stati eseguiti i passaggi non in ordine. Quando il sito viene distribuito (con git push), il servizio app esegue npm install, che viene eseguito in base alla versione corrente del nodo che è stato configurato. Se la configurazione viene modificata in un secondo momento, è necessario apportare una modifica senza significato al codice ed eseguire di nuovo il push.

Passaggi successivi

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

Per un altro modo per interagire con i dati di hub IoT di Azure, vedere l'esercitazione seguente:

Usare le app per la logica per il monitoraggio remoto e le notifiche