Kurz: Vizualizace dat snímačů v reálném čase z centra Azure IoT ve webové aplikaci

V tomto článku se dozvíte, jak vizualizovat data snímačů v reálném čase, která vaše centrum IoT přijímá pomocí webové aplikace Node.js běžící na místním počítači. Po místním spuštění webové aplikace můžete webovou aplikaci hostovat ve službě Aplikace Azure Service.

Požadavky

Ukázka webové aplikace pro tento kurz je napsaná v Node.js. Kroky v tomto článku předpokládají vývojový počítač s Windows; Tyto kroky však můžete provést také v systému Linux ve vašem upřednostňovaném prostředí.

• Předplatné Azure. Pokud ještě nemáte předplatné Azure, vytvořte si napřed bezplatný účet.

• Centrum IoT ve vašem předplatném Azure Pokud centrum ještě nemáte, můžete postupovat podle pokynů k vytvoření centra IoT pomocí rozhraní příkazového řádku nebo webu Azure Portal.

• Zařízení zaregistrované ve službě IoT Hub. Pokud jste zařízení ještě nezaregistrovali, zaregistrujte ho na webu Azure Portal.

• Simulované zařízení, které odesílá telemetrické zprávy do centra IoT. Pomocí online simulátoru Raspberry Pi získáte simulované zařízení, které odesílá data o teplotě do IoT Hubu.

• Node.js verze 14 nebo novější. Chcete-li zkontrolovat verzi uzlu, spusťte node --version.

• Git

• Použijte prostředí Bash v Azure Cloud Shellu. Další informace najdete v tématu Rychlý start pro Bash v Azure Cloud Shellu.

  

• Pokud dáváte přednost místnímu spouštění referenčních příkazů rozhraní příkazového řádku, nainstalujte Azure CLI. Pokud používáte Windows nebo macOS, zvažte spuštění Azure CLI v kontejneru Docker. Další informace najdete v tématu Jak spustit Azure CLI v kontejneru Dockeru.

  • Pokud používáte místní instalaci, přihlaste se k Azure CLI pomocí příkazu az login. Pokud chcete dokončit proces ověřování, postupujte podle kroků zobrazených na terminálu. Další možnosti přihlášení najdete v tématu Přihlášení pomocí Azure CLI.

  • Po zobrazení výzvy nainstalujte rozšíření Azure CLI při prvním použití. Další informace o rozšířeních najdete v tématu Využití rozšíření v Azure CLI.

  • Spuštěním příkazu az version zjistěte verzi a závislé knihovny, které jsou nainstalované. Pokud chcete upgradovat na nejnovější verzi, spusťte az upgrade.

Přidání skupiny příjemců do centra IoT

Skupiny příjemců poskytují nezávislá zobrazení do streamu událostí, která umožňují aplikacím a službám Azure nezávisle využívat data ze stejného koncového bodu služby Event Hubs. V této části přidáte skupinu příjemců do integrovaného koncového bodu centra IoT, který webová aplikace používá ke čtení dat.

Spuštěním následujícího příkazu přidejte skupinu příjemců do integrovaného koncového bodu centra IoT:

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

Poznamenejte si název, který zvolíte, budete ho potřebovat později v tomto kurzu.

Získání připojovací řetězec služby pro centrum IoT

Centra IoT se vytvářejí s několika výchozími zásadami přístupu. Jednou z těchto zásad je zásada služby , která poskytuje dostatečná oprávnění ke čtení a zápisu koncových bodů centra IoT Hub. Spuštěním následujícího příkazu získejte připojovací řetězec pro centrum IoT, který dodržuje zásady služby:

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

Služba připojovací řetězec by měla vypadat podobně jako v následujícím příkladu:

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

Poznamenejte si službu připojovací řetězec, kterou budete potřebovat později v tomto kurzu.

Stažení webové aplikace z GitHubu

Stáhněte nebo naklonujte ukázku webové aplikace z GitHubu: web-apps-node-iot-hub-data-visualization.

Prozkoumání kódu webové aplikace

Na vývojovém počítači přejděte do adresáře web-apps-node-iot-hub-data-visualization a pak otevřete webovou aplikaci ve svém oblíbeném editoru. Následující příklad ukazuje strukturu souborů zobrazenou v editoru Visual Studio Code:

Chvíli se podívejte na následující soubory:

• server.js je skript na straně služby, který inicializuje webový soket a třídu obálky Event Hubs. Poskytuje zpětné volání do třídy obálky Event Hubs, kterou třída používá k vysílání příchozích zpráv do webového soketu.

• skripty/event-hub-reader.js je skript na straně služby, který se připojuje k integrovanému koncovému bodu ioT Hubu pomocí zadané připojovací řetězec a skupiny příjemců. Extrahuje DeviceId a EnqueuedTimeUtc z metadat příchozích zpráv a pak předá zprávu pomocí metody zpětného volání registrované server.js.

• public/js/chart-device-data.js je skript na straně klienta, který naslouchá na webovém soketu, sleduje každou id zařízení a ukládá posledních 50 bodů příchozích dat pro každé zařízení. Potom sváže vybraná data zařízení s objektem grafu.

• public/index.html zpracovává rozložení uživatelského rozhraní webové stránky a odkazuje na nezbytné skripty pro logiku na straně klienta.

Konfigurace proměnných prostředí pro webovou aplikaci

Aby bylo možné číst data z centra IoT, potřebuje webová aplikace připojovací řetězec vašeho centra IoT a název skupiny příjemců, kterou by měla číst. Načte tyto řetězce z procesního prostředí v následujících řádcích v 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}]`);

Nastavte proměnné prostředí v příkazovém okně pomocí následujících příkazů. Zástupné hodnoty nahraďte službou připojovací řetězec pro centrum IoT a názvem skupiny příjemců, kterou jste vytvořili dříve. Nepoužívejte uvozovky.

set IotHubConnectionString=YOUR_IOT_HUB_CONNECTION_STRING
set EventHubConsumerGroup=YOUR_CONSUMER_GROUP_NAME

Spusťte webovou aplikaci

1. Ujistěte se, že je vaše zařízení spuštěné a odesílá data.

2. V příkazovém okně spusťte následující řádky, abyste stáhli a nainstalovali odkazované balíčky a spustili web:

   npm install
   npm start
   

3. V konzole by se měl zobrazit výstup, který označuje, že webová aplikace se úspěšně připojila k centru IoT a naslouchá na portu 3000:

   

Otevření webové stránky pro zobrazení dat z ioT Hubu

Otevřete prohlížeč.http://localhost:3000

V seznamu Vybrat zařízení vyberte své zařízení, abyste viděli spuštěný graf posledních 50 datových bodů teploty a vlhkosti odesílaných zařízením do centra IoT.

Výstup by se měl zobrazit také v konzole, ve které se zobrazují zprávy, které webová aplikace vysílá klientovi prohlížeče:

Hostování webové aplikace ve službě App Service

Služba Aplikace Azure poskytuje platformu jako službu (PAAS) pro hostování webových aplikací. Webové aplikace hostované ve službě App Service můžou těžit z výkonných funkcí Azure, jako je zabezpečení, vyrovnávání zatížení a škálovatelnost, a také řešení Azure a partnerských DevOps, jako je průběžné nasazování, správa balíčků atd. App Service podporuje webové aplikace vyvinuté v mnoha oblíbených jazycích a nasazené v infrastruktuře pro Windows nebo Linux.

V této části zřídíte webovou aplikaci ve službě App Service a nasadíte do ní kód pomocí příkazů Azure CLI. Podrobnosti o příkazech použitých v dokumentaci az webapp najdete.

1. Plán služby App Service definuje sadu výpočetních prostředků pro spuštění aplikace hostované ve službě App Service. V tomto kurzu používáme k hostování webové aplikace úroveň Developer/Free. S úrovní Free běží vaše webová aplikace na sdílených prostředcích Windows s jinými aplikacemi App Service, včetně aplikací jiných zákazníků. Azure také nabízí plány služby App Service pro nasazení webových aplikací do výpočetních prostředků Linuxu. Tento krok můžete přeskočit, pokud už máte plán služby App Service, který chcete použít.

   Pokud chcete vytvořit plán služby App Service pomocí úrovně Windows Free, použijte příkaz az appservice plan create . Použijte stejnou skupinu prostředků, ve které je vaše centrum IoT. Název plánu služby může obsahovat velká a malá písmena, číslice a pomlčky.

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

2. Pomocí příkazu az webapp create zřiďte webovou aplikaci v plánu služby App Service. Tento --deployment-local-git parametr umožňuje nahrávat a nasazovat kód webové aplikace z úložiště Git na místním počítači. Název webové aplikace musí být globálně jedinečný a může obsahovat velká a malá písmena, číslice a pomlčky. V závislosti na verzi modulu runtime Node.js, který používáte, nezapomeňte pro --runtime parametr zadat Node verze 14 nebo novější. Pomocí az webapp list-runtimes příkazu můžete získat seznam podporovaných modulů runtime.

   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. Pomocí příkazu az webapp config appsettings set přidejte nastavení aplikace pro proměnné prostředí, které určují připojovací řetězec centra IoT a skupinu příjemců centra událostí. Jednotlivá nastavení jsou v parametru -settings oddělená mezerami. Použijte připojovací řetězec služby pro centrum IoT a skupinu příjemců, kterou jste vytvořili dříve v tomto kurzu.

   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. Povolte pro webovou aplikaci protokol Web Sockets a nastavte webovou aplikaci tak, aby přijímala pouze požadavky HTTPS (požadavky HTTP se přesměrují na 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. K nasazení kódu do služby App Service použijete přihlašovací údaje pro nasazení na úrovni uživatele. Vaše přihlašovací údaje pro nasazení na úrovni uživatele se liší od přihlašovacích údajů Azure a používají se pro místní nasazení Gitu a nasazení FTP do webové aplikace. Po nastavení jsou platné ve všech vašich aplikacích App Service ve všech předplatných ve vašem účtu Azure. Pokud jste dříve nastavili přihlašovací údaje pro nasazení na úrovni uživatele, můžete je použít.

   Pokud jste ještě nenastavili přihlašovací údaje nasazení na úrovni uživatele nebo si nepamatujete heslo, spusťte příkaz az webapp deployment user set . Uživatelské jméno nasazení musí být v Rámci Azure jedinečné a nesmí obsahovat symbol @pro místní vložení Gitu. Po zobrazení výzvy zadejte a potvrďte nové heslo. Heslo musí mít alespoň osm znaků, přičemž dva z následujících tří prvků: písmena, číslice a symboly.

   az webapp deployment user set --user-name NAME_FOR_YOUR_USER_CREDENTIALS
   

6. Získejte adresu URL Gitu, která se má použít k nasdílení kódu do služby App Service.

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

7. Přidejte do svého klonu vzdálené úložiště, které odkazuje na úložiště Git pro webovou aplikaci ve službě App Service. GIT_ENDPOINT_URL Zástupný symbol nahraďte adresou URL vrácenou v předchozím kroku. Ujistěte se, že jste v ukázkovém adresáři, web-apps-code-iot-hub-data-visualization, a pak v příkazovém okně spusťte následující příkaz.

   git remote add webapp GIT_ENDPOINT_URL
   

8. Pokud chcete nasadit kód do služby App Service, zadejte do příkazového okna následující příkaz. Ujistěte se, že jste v ukázkovém adresáři web-apps-code-iot-hub-data-visualization. Pokud se zobrazí výzva k zadání přihlašovacích údajů, zadejte přihlašovací údaje pro nasazení na úrovni uživatele, které jste vytvořili v kroku 5. Nasdílení změn do hlavní větve vzdálené služby App Service

   git push webapp master:master
   

9. Průběh aktualizací nasazení v příkazovém okně Úspěšné nasazení končí řádky podobným následujícímu výstupu:

   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. Spuštěním následujícího příkazu zadejte dotaz na stav webové aplikace a ujistěte se, že je spuštěný:

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

11. V prohlížeči přejděte na https://<your web app name>.azurewebsites.net. Webová stránka podobná té, kterou jste viděli při místním spuštění webové aplikace. Za předpokladu, že zařízení běží a odesílá data, měli byste vidět spuštěný graf 50 nejnovějších hodnot teploty a vlhkosti odesílaných zařízením.

Řešení problému

Pokud narazíte na nějaké problémy s touto ukázkou, vyzkoušejte kroky v následujících částech. Pokud máte stále problémy, pošlete nám zpětnou vazbu v dolní části tohoto článku.

Problémy s klienty

• Pokud se zařízení v seznamu nezobrazuje nebo se nevykreslí žádný graf, ujistěte se, že je na vašem zařízení spuštěný kód zařízení.

• V prohlížeči otevřete vývojářské nástroje (v mnoha prohlížečích ho otevře klávesa F12) a vyhledejte konzolu. Vyhledejte všechna upozornění nebo chyby, které se tam vytisknou.

• Skript na straně klienta můžete ladit v /js/chat-device-data.js.

Problémy s místním webem

• Podívejte se na výstup v okně, ve kterém jste spustili uzel pro výstup konzoly.

• Ladění kódu serveru, konkrétně server.js a /scripts/event-hub-reader.js.

Problémy se službou Aplikace Azure

• Na webu Azure Portal přejděte do své webové aplikace. V části Monitorování v levém podokně vyberte protokoly služby App Service. Zapněte protokolování aplikace (systém souborů), nastavte úroveň na Chyba a pak vyberte Uložit. Pak otevřete stream protokolu (v části Monitorování).

• Ve webové aplikaci na webu Azure Portal v části Vývojové nástroje vyberte konzolu a ověřte verze uzlů a npm pomocí node -v a npm -v.

• Pokud se zobrazí chyba týkající se nehledat balíček, možná jste spustili kroky mimo pořadí. Po nasazení webu (s git push) se spustí npm installslužba App Service, která běží na základě aktuální verze uzlu, který nakonfiguroval. Pokud se to později změní v konfiguraci, musíte provést bezvýznamnou změnu kódu a znovu nasdílit.

Další kroky

Úspěšně jste použili webovou aplikaci k vizualizaci dat ze snímačů v reálném čase z centra IoT.

Další způsob interakce s daty z Azure IoT Hubu najdete v následujícím kurzu:

Použití služby Logic Apps ke vzdálenému monitorování a upozorňování