Öğretici: Azure IoT hub'ınızdaki gerçek zamanlı algılayıcı verilerini bir web uygulamasında görselleştirme

Bu makalede, yerel bilgisayarınızda çalışan bir Node.js web uygulamasıyla IoT hub'ınızın aldığı gerçek zamanlı algılayıcı verilerini görselleştirmeyi öğreneceksiniz. Web uygulamasını yerel olarak çalıştırdıktan sonra web uygulamasını Azure Uygulaması Hizmeti'nde barındırabilirsiniz.

Önkoşullar

Bu öğreticinin web uygulaması örneği Node.js yazılır. Bu makaledeki adımlarda bir Windows geliştirme makinesi olduğu varsayılır; ancak bu adımları tercih ettiğiniz kabuktaki bir Linux sisteminde de gerçekleştirebilirsiniz.

• Azure aboneliği. Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.

• Azure aboneliğinizde bir IoT hub'ı. Henüz bir hub'ına sahip değilseniz, CLI veya Azure portalını kullanarak IoT hub'ı oluşturma adımlarını izleyebilirsiniz.

• IoT hub'ınıza kayıtlı bir cihaz. Henüz bir cihaz kaydetmediyseniz Azure portalında bir cihaz kaydedin.

• IoT hub'ınıza telemetri iletileri gönderen sanal cihaz. IoT Hub'a sıcaklık verileri gönderen bir simülasyon cihazı almak için Raspberry Pi çevrimiçi simülatörünü kullanın.

• Node.js sürüm 14 veya üzeri. Düğüm sürümünüzü denetlemek için komutunu çalıştırın node --version.

• Git.

• Azure Cloud Shell'de Bash ortamını kullanın. Daha fazla bilgi için bkz . Azure Cloud Shell'de Bash için hızlı başlangıç.

  

• CLI başvuru komutlarını yerel olarak çalıştırmayı tercih ediyorsanız Azure CLI'yı yükleyin . Windows veya macOS üzerinde çalışıyorsanız Azure CLI’yi bir Docker kapsayıcısında çalıştırmayı değerlendirin. Daha fazla bilgi için bkz . Docker kapsayıcısında Azure CLI'yi çalıştırma.

  • Yerel yükleme kullanıyorsanız az login komutunu kullanarak Azure CLI ile oturum açın. Kimlik doğrulama işlemini tamamlamak için terminalinizde görüntülenen adımları izleyin. Diğer oturum açma seçenekleri için bkz . Azure CLI ile oturum açma.

  • İstendiğinde, ilk kullanımda Azure CLI uzantısını yükleyin. Uzantılar hakkında daha fazla bilgi için bkz. Azure CLI ile uzantıları kullanma.

  • Yüklü sürümü ve bağımlı kitaplıkları bulmak için az version komutunu çalıştırın. En son sürüme yükseltmek için az upgrade komutunu çalıştırın.

IoT hub'ınıza tüketici grubu ekleme

Tüketici grupları , uygulamaların ve Azure hizmetlerinin aynı Event Hubs uç noktasındaki verileri bağımsız olarak kullanmasına olanak tanıyan olay akışına bağımsız görünümler sağlar. Bu bölümde, Web uygulamasının verileri okumak için kullandığı IoT hub'ınızın yerleşik uç noktasına bir tüketici grubu eklersiniz.

IoT hub'ınızın yerleşik uç noktasına bir tüketici grubu eklemek için aşağıdaki komutu çalıştırın:

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

Seçtiğiniz adı not edin, bu öğreticinin ilerleyen bölümlerinde bu ada ihtiyacınız vardır.

IoT hub'ınız için hizmet bağlantı dizesi alma

IoT hub'ları birkaç varsayılan erişim ilkesiyle oluşturulur. Bu tür ilkelerden biri, bir hizmetin IoT hub uç noktalarını okuması ve yazması için yeterli izinler sağlayan hizmet ilkesidir. IoT hub'ınız için hizmet ilkesine uygun bir bağlantı dizesi almak için aşağıdaki komutu çalıştırın:

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

Hizmet bağlantı dizesi aşağıdaki örneğe benzer görünmelidir:

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

Hizmet bağlantı dizesi not edin, bu öğreticinin ilerleyen bölümlerinde buna ihtiyacınız vardır.

GitHub'dan web uygulamasını indirme

GitHub'dan web uygulaması örneğini indirin veya kopyalayın: web-apps-node-iot-hub-data-visualization.

Web uygulaması kodunu inceleme

Geliştirme makinenizde web-apps-node-iot-hub-data-visualization dizinine gidin ve web uygulamasını sık kullandığınız düzenleyicide açın. Visual Studio Code'da görüntülenen dosya yapısı aşağıda gösterilmiştir:

Aşağıdaki dosyaları incelemek için biraz bekleyin:

• server.js, web yuvasını ve Event Hubs sarmalayıcı sınıfını başlatan bir hizmet tarafı betiğidir. Sınıfın gelen iletileri web yuvasına yayınlamak için kullandığı Event Hubs sarmalayıcı sınıfına bir geri çağırma sağlar.

• scripts/event-hub-reader.js, belirtilen bağlantı dizesi ve tüketici grubunu kullanarak IoT hub'ındaki yerleşik uç noktaya bağlanan bir hizmet tarafı betiğidir. Gelen iletilerdeki meta verilerden DeviceId ve EnqueuedTimeUtc değerlerini ayıklar ve ardından server.js tarafından kaydedilen geri çağırma yöntemini kullanarak iletiyi aktarır.

• public/js/chart-device-data.js , web yuvasını dinleyen, her DeviceId'yi izleyen ve her cihaz için son 50 gelen veri puanını depolayan bir istemci tarafı betiğidir. Ardından seçili cihaz verilerini grafik nesnesine bağlar.

• public/index.html web sayfasının kullanıcı arabirimi düzenini işler ve istemci tarafı mantığı için gerekli betiklere başvurur.

Web uygulaması için ortam değişkenlerini yapılandırma

IoT hub'ınızdaki verileri okumak için web uygulamasının IoT hub'ınızın bağlantı dizesi ve okuması gereken tüketici grubunun adına ihtiyacı vardır. bu dizeleri işlem ortamından aşağıdaki satırlarda server.js alır:

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}]`);

Aşağıdaki komutlarla komut pencerenizde ortam değişkenlerini ayarlayın. Yer tutucu değerlerini IoT hub'ınızın hizmet bağlantı dizesi ve daha önce oluşturduğunuz tüketici grubunun adıyla değiştirin. Dizeleri alıntı yapmayın.

set IotHubConnectionString=YOUR_IOT_HUB_CONNECTION_STRING
set EventHubConsumerGroup=YOUR_CONSUMER_GROUP_NAME

Web uygulamasını çalıştırma

1. Cihazınızın çalıştığından ve veri gönderdiğinizden emin olun.

2. Komut penceresinde, başvuruda bulunan paketleri indirip yüklemek ve web sitesini başlatmak için aşağıdaki satırları çalıştırın:

   npm install
   npm start
   

3. Konsolunda web uygulamasının IoT hub'ınıza başarıyla bağlandığını ve 3000 numaralı bağlantı noktasını dinlediğini gösteren bir çıkış görmeniz gerekir:

   

IoT hub'ınızdaki verileri görmek için bir web sayfası açma

için bir tarayıcı http://localhost:3000açın.

Cihaz seçin listesinde cihazınızı seçerek cihaz tarafından IoT hub'ınıza gönderilen son 50 sıcaklık ve nem veri noktalarının çalışan bir çizimini görebilirsiniz.

Ayrıca konsolda, web uygulamanızın tarayıcı istemcisine yayımladığını belirten iletileri gösteren bir çıktı görmeniz gerekir:

Web uygulamasını App Service'te barındırma

Azure Uygulaması Hizmeti, web uygulamalarını barındırmak için bir hizmet olarak platform (PAAS) sağlar. App Service'te barındırılan web uygulamaları, güvenlik, yük dengeleme ve ölçeklenebilirlik gibi güçlü Azure özelliklerinin yanı sıra sürekli dağıtım, paket yönetimi gibi Azure ve iş ortağı DevOps çözümlerinden yararlanabilir. App Service, birçok popüler dilde geliştirilen ve Windows veya Linux altyapısına dağıtılan web uygulamalarını destekler.

Bu bölümde, App Service'te bir web uygulaması sağlar ve Azure CLI komutlarını kullanarak kodunuzu buna dağıtırsınız. Kullanılan komutların ayrıntılarını az webapp belgelerinde bulabilirsiniz.

1. App Service planı, App Service'te barındırılan bir uygulamanın çalıştırılacak işlem kaynakları kümesini tanımlar. Bu öğreticide, web uygulamasını barındırmak için Geliştirici/Ücretsiz katmanını kullanacağız. Ücretsiz katmanı ile web uygulamanız, diğer müşterilerin uygulamaları da dahil olmak üzere diğer App Service uygulamalarıyla paylaşılan Windows kaynakları üzerinde çalışır. Azure, Linux işlem kaynaklarına web uygulamaları dağıtmak için App Service planları da sunar. Kullanmak istediğiniz bir App Service planınız varsa bu adımı atlayabilirsiniz.

   Windows ücretsiz katmanını kullanarak app service planı oluşturmak için az appservice plan create komutunu kullanın. IoT hub'ınızın içinde olduğu kaynak grubunu kullanın. Hizmet planınızın adı büyük ve küçük harf, sayı ve kısa çizgi içerebilir.

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

2. App Service planınızda bir web uygulaması sağlamak için az webapp create komutunu kullanın. --deployment-local-git parametresi, web uygulaması kodunun yerel makinenizdeki bir Git deposundan karşıya yüklenmesini ve dağıtılabilmesini sağlar. Web uygulamanızın adı genel olarak benzersiz olmalıdır ve büyük ve küçük harf, sayı ve kısa çizgi içerebilir. Kullandığınız Node.js çalışma zamanının --runtime sürümüne bağlı olarak parametre için Node sürüm 14 veya üzerini belirttiğinizden emin olun. Desteklenen çalışma zamanlarının listesini almak için komutunu kullanabilirsiniz az webapp list-runtimes .

   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. IoT hub'ı bağlantı dizesi ve Olay hub'ı tüketici grubunu belirten ortam değişkenleri için uygulama ayarları eklemek için az webapp config appsettings set komutunu kullanın. Bağımsız ayarlar parametresinde -settings boşlukla ayrılmıştır. Bu öğreticide daha önce oluşturduğunuz IoT hub'ınız ve tüketici grubu için hizmet bağlantı dizesi kullanın.

   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. Web uygulaması için Web Yuvaları protokolunu etkinleştirin ve web uygulamasını yalnızca HTTPS isteklerini alacak şekilde ayarlayın (HTTP istekleri HTTPS'ye yönlendirilir).

   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. Kodu App Service'e dağıtmak için kullanıcı düzeyinde dağıtım kimlik bilgilerini kullanırsınız. Kullanıcı düzeyinde dağıtım kimlik bilgileriniz Azure kimlik bilgilerinizden farklıdır ve web uygulamasına git yerel ve FTP dağıtımları için kullanılır. Ayarlandıktan sonra, Bunlar Azure hesabınızdaki tüm aboneliklerdeki tüm App Service uygulamalarınızda geçerli olur. Daha önce kullanıcı düzeyinde dağıtım kimlik bilgilerini ayarladıysanız, bunları kullanabilirsiniz.

   Daha önce kullanıcı düzeyinde dağıtım kimlik bilgilerini ayarlamadıysanız veya parolanızı anımsayamıyorsanız az webapp deployment user set komutunu çalıştırın. Dağıtım kullanıcı adınızın Azure içinde benzersiz olması ve yerel Git gönderimleri için '@' simgesini içermemesi gerekir. İstendiğinde yeni parolanızı girin ve onaylayın. Parola en az sekiz karakter uzunluğunda olmalı ve şu üç öğeden ikisi olmalıdır: harfler, sayılar ve simgeler.

   az webapp deployment user set --user-name NAME_FOR_YOUR_USER_CREDENTIALS
   

6. Kodunuzu App Service'e göndermek için kullanılacak Git URL'sini alın.

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

7. Kopyanıza App Service'teki web uygulaması için Git deposuna başvuran bir uzak sunucu ekleyin. Yer tutucuyu GIT_ENDPOINT_URL önceki adımda döndürülen URL ile değiştirin. Web-apps-code-iot-hub-data-visualization örnek dizininde olduğunuzdan emin olun ve komut pencerenizde aşağıdaki komutu çalıştırın.

   git remote add webapp GIT_ENDPOINT_URL
   

8. Kodu App Service'e dağıtmak için komut pencerenize aşağıdaki komutu girin. Web-apps-code-iot-hub-data-visualization örnek dizininde olduğunuzdan emin olun. Kimlik bilgileri istenirse, 5. adımda oluşturduğunuz kullanıcı düzeyinde dağıtım kimlik bilgilerini girin. App Service uzak öğesinin ana dalına gönderin.

   git push webapp master:master
   

9. Dağıtım ilerleme durumu, komut pencerenizde güncelleştirilir. Başarılı bir dağıtım aşağıdaki çıkışa benzer satırlarla sona erer:

   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. Web uygulamanızın durumunu sorgulamak ve çalıştığından emin olmak için aşağıdaki komutu çalıştırın:

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

11. Bir tarayıcıda https://<your web app name>.azurewebsites.net sayfasına gidin. Web uygulamasını yerel olarak çalıştırdığınızda gördüğünüze benzer bir web sayfası görüntülenir. Cihazınızın çalıştığını ve veri gönderdiğini varsayarsak, cihaz tarafından gönderilen en son 50 sıcaklık ve nem okumasının çalışan bir çizimini görmeniz gerekir.

Sorun giderme

Bu örnekle ilgili herhangi bir sorunla karşılaşırsanız, aşağıdaki bölümlerde yer alan adımları deneyin. Sorun yaşamaya devam ediyorsanız bu makalenin en altında bize geri bildirim gönderin.

İstemci sorunları

• Listede bir cihaz görünmüyorsa veya graf çizilmiyorsa cihaz kodunun cihazınızda çalıştığından emin olun.

• Tarayıcıda geliştirici araçlarını açın (birçok tarayıcıda F12 tuşu açar) ve konsolu bulun. Burada yazdırılan uyarıları veya hataları arayın.

• /js/chat-device-data.js istemci tarafı betiğinde hata ayıklayabilirsiniz.

Yerel web sitesi sorunları

• Konsol çıkışı için düğümü başlattığınız pencerede çıkışı izleyin.

• Sunucu kodunda, özellikle server.js ve /scripts/event-hub-reader.js hatalarını ayıklayın.

Azure Uygulaması Hizmeti sorunları

• Azure portalında web uygulamanıza gidin. Sol bölmedeki İzleme'nin altında App Service günlükleri'ni seçin. Uygulama Günlüğü'ne (Dosya Sistemi) açın, Düzey'i Hata olarak ayarlayın ve kaydet'i seçin. Ardından Günlük akışını açın (İzleme'nin altında).

• Azure portalındaki web uygulamanızdan Geliştirme Araçları'nın altında Konsol'a tıklayın ve ile düğüm ve npm sürümlerini npm -vnode -v doğrulayın.

• Paket bulamamayla ilgili bir hata görürseniz adımları sıra dışı çalıştırmış olabilirsiniz. Site dağıtıldığında (ile git push) app service, yapılandırdığı düğümün geçerli sürümüne göre çalışan öğesini çalıştırır npm install. Bu daha sonra yapılandırmada değiştirilirse kodda anlamsız bir değişiklik yapmanız ve yeniden göndermeniz gerekir.

Sonraki adımlar

IoT hub'ınızdaki gerçek zamanlı algılayıcı verilerini görselleştirmek için web uygulamanızı başarıyla kullandınız.

Azure IoT Hub'dan verilerle etkileşim kurmanın başka bir yolu için aşağıdaki öğreticiye bakın:

Uzaktan izleme ve bildirimler için Logic Apps’i kullanma