Sdílet prostřednictvím

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.

Diagram znázorňující kompletní tok vizualizace dat

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 kroků v tématu Vytvoření centra IoT.

  • Zařízení zaregistrované ve službě IoT Hub. Pokud ve službě IoT Hub nemáte zařízení, postupujte podle pokynů v části Registrace zařízení.

  • 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 Node.js, spusťte node --version.

  • Git

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ískejte řetězec pro připojení 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

Řetězec pro připojení ke službě by měl 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 řetězec připojení ke službě, který budete potřebovat později v tomto kurzu.

Důležité

Tento článek obsahuje postup připojení ke službě pomocí sdíleného přístupového podpisu. Tato metoda ověřování je vhodná pro testování a vyhodnocení, ale ověřování ve službě pomocí MICROSOFT Entra ID nebo spravovaných identit je bezpečnější přístup. Další informace najdete v tématu Osvědčené postupy zabezpečení zabezpečení řešení > IoT v cloudu.

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:

Snímek obrazovky znázorňující strukturu souborů webové aplikace se zvýrazněnými čtyřmi soubory

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ě serveru, který se připojuje k vestavěnému koncovému bodu IoT Hubu pomocí zadaného připojovacího řetězce 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ů. Nahraďte zástupné hodnoty připojovacím řetězcem služby pro vaše IoT centrum 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ý značí, že webová aplikace byla úspěšně připojená k vašemu centru IoT a naslouchá na portu 3000:

    Snímek obrazovky znázorňující ukázku webové aplikace úspěšně spuštěnou v konzole

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

Otevřete prohlížeč na 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.

Snímek obrazovky webové aplikace spuštěné na místním hostiteli zobrazující teplotu a vlhkost v reálném čase

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:

Snímek obrazovky s výstupem webové aplikace v konzole

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 využívat funkce Azure, jako jsou zabezpečení, vyrovnávání zatížení a škálovatelnost. Webové aplikace můžou využívat také řešení Azure a Partner 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 váš IoT hub. 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 Node.js modulu runtime, který používáte, nezapomeňte pro --runtime parametr zadat Node.js verze 16 nebo novější. Pomocí příkazu az webapp list-runtimes můžete získat seznam podporovaných prostředí runtime.

    az webapp create -n NEW_NAME_FOR_YOUR_WEB_APP -g YOUR_RESOURCE_GROUP_NAME -p YOUR_APP_SERVICE_PLAN_NAME --runtime "NODE:16LTS" --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 uživatelské přihlašovací údaje pro nasazení, nebo si nepamatujete své 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 lokální push na Git. 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. Odeslání na hlavní větev vzdáleného úložiště App Service.

    git push webapp master:master

  9. Průběh aktualizací při nasazení v příkazovém okně. Úspěšné nasazení končí řádky podobnými 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, když jste aplikaci spustili lokálně. 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é jsou tam uvedeny.

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

Problémy s místním webem

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

  • Odladit kód serveru, zejména kód v 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 zvolte Uložit. Pak otevřete protokolový stream (v části Monitorování).

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

  • Pokud dojde k chybě související s nenalezením balíčku, možná jste spustili kroky mimo pořadí. Po nasazení webu (s git push) se spustí npm install App Service, která běží na základě aktuálně nakonfigurované verze Node.js. Pokud se to později změní v konfiguraci, musíte provést bezvýznamnou změnu kódu a znovu odeslat.

Další kroky

Úspěšně jste použili webovou aplikaci k vizualizaci dat 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í

  • Last updated on