Tutorial: Memvisualisasikan data sensor real-time dari hub Azure IoT Anda di aplikasi web

Dalam artikel ini, Anda mempelajari cara memvisualisasikan data sensor real-time yang diterima IoT hub dengan aplikasi web Node.js yang berjalan di komputer lokal Anda. Setelah menjalankan aplikasi web secara lokal, Anda dapat menghosting aplikasi web di Azure App Service.

Prasyarat

Sampel aplikasi web untuk tutorial ini ditulis dalam Node.js. Langkah-langkah dalam artikel ini mengasumsikan mesin pengembangan Windows; namun, Anda juga dapat melakukan langkah-langkah ini pada sistem Linux di shell pilihan Anda.

• Langganan Azure. Jika Anda tidak memiliki langganan Azure, buat akun gratis sebelum Anda memulai.

• IoT Hub di langganan Azure Anda. Jika Anda belum memiliki hub, Anda dapat mengikuti langkah-langkah untuk membuat hub IoT menggunakan CLI atau portal Azure.

• Perangkat yang terdaftar di hub IoT Anda. Jika Anda belum mendaftarkan perangkat, daftarkan perangkat di portal Azure.

• Perangkat simulasi yang mengirim pesan telemetri ke hub IoT Anda. Gunakan simulator online Raspberry Pi untuk mendapatkan perangkat simulasi yang mengirim data suhu ke IoT Hub.

• Node.js versi 14 atau yang lebih baru. Untuk memeriksa versi node Anda, jalankan node --version.

• Git.

• Gunakan lingkungan Bash di Azure Cloud Shell. Untuk informasi selengkapnya, lihat Mulai Cepat untuk Bash di Azure Cloud Shell.

  

• Jika Anda lebih suka menjalankan perintah referensi CLI secara lokal, instal Azure CLI. Jika Anda menjalankan Windows atau macOS, pertimbangkan untuk menjalankan Azure CLI dalam kontainer Docker. Untuk informasi lebih lanjut, lihat Cara menjalankan Azure CLI di kontainer Docker.

  • Jika Anda menggunakan instalasi lokal, masuk ke Azure CLI dengan menggunakan perintah login az. Untuk menyelesaikan proses autentikasi, ikuti langkah-langkah yang ditampilkan di terminal Anda. Untuk opsi masuk lainnya, lihat Masuk dengan Azure CLI.

  • Saat Anda diminta, instal ekstensi Azure CLI pada penggunaan pertama. Untuk informasi selengkapnya tentang ekstensi, lihat Menggunakan ekstensi dengan Azure CLI.

  • Jalankan versi az untuk menemukan versi dan pustaka dependen yang diinstal. Untuk meningkatkan ke versi terbaru, jalankan peningkatan az.

Tambahkan grup konsumen ke IoT hub Anda

Grup konsumen menyediakan tampilan independen ke dalam aliran peristiwa yang memungkinkan aplikasi dan layanan Azure untuk mengonsumsi data secara independen dari titik akhir Azure Event Hubs yang sama. Di bagian ini, Anda menambahkan grup konsumen ke titik akhir bawaan hub IoT yang digunakan aplikasi web untuk membaca data.

Jalankan perintah berikut untuk menambahkan grup konsumen ke titik akhir bawaan IoT hub Anda:

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

Catat nama yang Anda pilih, Anda membutuhkannya nanti dalam tutorial ini.

Dapatkan string koneksi layanan untuk IoT hub Anda

IoT hub dibuat dengan beberapa kebijakan akses default. Salah satu kebijakan tersebut adalah kebijakan layanan, yang menyediakan izin yang cukup bagi layanan untuk membaca dan menulis titik akhir IoT hub. Jalankan perintah berikut untuk mendapatkan string koneksi untuk IoT hub Anda yang mematuhi kebijakan layanan:

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

Layanan string koneksi akan terlihat mirip dengan contoh berikut:

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

Catat string koneksi layanan, Anda membutuhkannya nanti dalam tutorial ini.

Unduh aplikasi web dari GitHub

Unduh atau kloning sampel aplikasi web dari GitHub: web-apps-node-iot-hub-data-visualization.

Periksa kode aplikasi web

Di komputer pengembangan Anda, navigasikan ke direktori web-apps-node-iot-hub-data-visualization , lalu buka aplikasi web di editor favorit Anda. Berikut ini memperlihatkan struktur file yang ditampilkan di Visual Studio Code:

Luangkan waktu sejenak untuk memeriksa file-file berikut:

• server.js adalah skrip sisi layanan yang menginisialisasi soket web dan kelas pembungkus Azure Event Hubs. Ini menyediakan panggilan balik ke kelas pembungkus Azure Event Hubs yang digunakan kelas untuk menyiarkan pesan masuk ke soket web.

• skrip/event-hub-reader.js adalah skrip sisi layanan yang terhubung ke titik akhir bawaan hub IoT menggunakan string koneksi dan grup konsumen yang ditentukan. Skrip ini mengekstrak DeviceId dan EnqueuedTimeUtc dari metadata pada pesan masuk dan kemudian menyampaikan pesan menggunakan metode panggilan balik yang didaftarkan oleh server.js.

• public/js/chart-device-data.js adalah skrip sisi klien yang mendengarkan di soket web, melacak setiap DeviceId, dan menyimpan 50 titik data masuk terakhir untuk setiap perangkat. Kemudian mengikat data perangkat yang dipilih ke objek bagan.

• public/index.html menangani tata letak UI untuk halaman web dan mereferensikan skrip yang diperlukan untuk logika sisi klien.

Konfigurasikan variabel lingkungan untuk aplikasi web

Untuk membaca data dari IoT hub Anda, aplikasi web memerlukan string koneksi IoT hub Anda dan nama grup konsumen yang harus dibacanya. Aplikasi web mendapatkan string ini dari lingkungan proses di baris berikut dalam 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}]`);

Set variabel lingkungan di jendela perintah Anda dengan perintah berikut. Ganti nilai tempat penampung dengan string koneksi layanan untuk IoT hub Anda dan nama grup konsumen yang Anda buat sebelumnya. Jangan kutip string.

set IotHubConnectionString=YOUR_IOT_HUB_CONNECTION_STRING
set EventHubConsumerGroup=YOUR_CONSUMER_GROUP_NAME

Jalankan aplikasi web

1. Pastikan perangkat Anda berjalan dan mengirim data.

2. Di jendela perintah, jalankan baris berikut untuk mengunduh dan memasang paket yang direferensikan dan memulai situs web:

   npm install
   npm start
   

3. Anda akan melihat output di konsol yang menunjukkan bahwa aplikasi web telah berhasil terhubung ke IoT hub Anda dan mendengarkan di port 3000:

   

Buka halaman web untuk melihat data dari hub IoT Anda

Buka browser ke http://localhost:3000.

Di daftar Pilih perangkat, pilih perangkat Anda untuk melihat plot berjalan dari 50 titik data suhu dan kelembaban terakhir yang dikirim oleh perangkat ke IoT hub Anda.

Anda juga akan melihat output di konsol yang menampilkan pesan yang disiarkan aplikasi web Anda kepada klien browser:

Hosting aplikasi web di App Service

Azure App Service menyediakan platform as a service (PAAS) untuk menghosting aplikasi web. Aplikasi web yang dihosting di App Service dapat memperoleh manfaat dari fitur Azure yang kuat seperti keamanan, penyeimbangan beban, dan skalabilitas serta solusi Azure dan DevOps mitra seperti penyebaran berkelanjutan, manajemen paket, dan sebagainya. App Service mendukung aplikasi web yang dikembangkan dalam banyak bahasa populer dan disebarkan pada infrastruktur Windows atau Linux.

Di bagian ini, Anda memprovisikan aplikasi web di App Service dan menerapkan kode Anda dengan menggunakan perintah Azure CLI. Anda dapat menemukan detail perintah yang digunakan dalam dokumentasi az webapp.

1. Paket App Service mendefinisikan sekumpulan sumber daya komputasi untuk aplikasi yang di-hosting di App Service untuk dijalankan. Dalam tutorial ini, kami menggunakan tingkat Pengembang / Gratis untuk meng-host aplikasi web. Dengan tingkat Gratis, aplikasi web Anda berjalan pada sumber daya Windows bersama dengan aplikasi App Service lainnya, termasuk aplikasi pelanggan lain. Azure juga menawarkan paket Layanan Aplikasi untuk menggunakan aplikasi web di sumber daya komputasi Linux. Anda dapat melewati langkah ini jika Anda sudah memiliki paket App Service yang ingin Anda gunakan.

   Untuk membuat paket App Service menggunakan tingkat gratis Windows, gunakan perintah az appservice plan create . Pilih grup sumber daya yang sama dengan IoT Hub Anda. Nama paket layanan Anda bisa berisi huruf besar dan kecil, angka, dan tanda hubung.

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

2. Gunakan perintah az webapp create untuk menyediakan aplikasi web dalam paket App Service Anda. Parameter --deployment-local-git ini memungkinkan kode aplikasi web diunggah dan diterapkan dari repositori Git di mesin lokal Anda. Nama aplikasi web Anda harus unik secara global dan dapat berisi huruf besar dan kecil, angka, dan tanda hubung. Pastikan untuk menentukan Node versi 14 atau yang lebih baru untuk --runtime parameter, tergantung pada versi runtime Node.js yang Anda gunakan. Anda dapat menggunakan perintah az webapp list-runtimes untuk mendapatkan daftar runtime yang didukung.

   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. Gunakan perintah az webapp config appsettings set untuk menambahkan pengaturan aplikasi untuk variabel lingkungan yang menentukan string koneksi hub IoT dan grup konsumen Event hub. Pengaturan individual dibatasi spasi dalam -settings parameter . Gunakan string koneksi layanan untuk hub IoT Anda dan grup konsumen yang Anda buat sebelumnya dalam tutorial ini.

   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. Aktifkan protokol Web Sockets untuk aplikasi web dan atur aplikasi web untuk menerima permintaan HTTPS saja (permintaan HTTP dialihkan ke 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. Untuk menyebarkan kode ke App Service, Anda menggunakan kredensial penyebaran tingkat pengguna. Informasi masuk penyebaran tingkat pengguna Anda berbeda dari informasi masuk Azure Anda dan digunakan untuk penyebaran Git lokal dan FTP ke aplikasi web. Setelah ditetapkan, aplikasi ini valid di semua aplikasi App Service Anda di semua langganan di akun Azure Anda. Jika sebelumnya Anda telah menetapkan informasi masuk penyebaran tingkat pengguna, Anda dapat menggunakannya.

   Jika sebelumnya Anda belum mengatur kredensial penyebaran tingkat pengguna atau Anda tidak dapat mengingat kata sandi Anda, jalankan perintah az webapp deployment user set . Nama pengguna penyebaran Anda harus unik dalam Azure dan tidak boleh berisi simbol ‘@’ untuk pendorongan Git lokal. Saat diminta, masukkan dan konfirmasi kata sandi baru Anda. Kata sandi harus setidaknya delapan karakter, dengan dua dari tiga elemen berikut: huruf, angka, dan simbol.

   az webapp deployment user set --user-name NAME_FOR_YOUR_USER_CREDENTIALS
   

6. Dapatkan URL Git untuk digunakan untuk mendorong kode Anda ke App Service.

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

7. Tambahkan jarak jauh ke kloning Anda yang mereferensikan repositori Git untuk aplikasi web di App Service. GIT_ENDPOINT_URL Ganti tempat penampung dengan URL yang dikembalikan di langkah sebelumnya. Pastikan Anda berada di direktori sampel, web-apps-code-iot-hub-data-visualization, lalu jalankan perintah berikut di jendela perintah Anda.

   git remote add webapp GIT_ENDPOINT_URL
   

8. Untuk menerapkan kode ke App Service, masukkan perintah berikut di jendela perintah Anda. Pastikan Anda berada di direktori sampel web-apps-code-iot-hub-data-visualization. Jika Anda dimintai kredensial, masukkan kredensial penyebaran tingkat pengguna yang Anda buat di langkah 5. Dorong ke cabang utama App Service jarak jauh.

   git push webapp master:master
   

9. Kemajuan pembaruan penyebaran di jendela perintah Anda. Penyebaran yang berhasil berakhir dengan baris yang mirip dengan output berikut:

   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. Jalankan perintah berikut untuk mengkueri status aplikasi web Anda dan pastikan aplikasi web berjalan:

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

11. Buka https://<your web app name>.azurewebsites.net di browser. Halaman web yang mirip dengan yang Anda lihat saat Anda menjalankan aplikasi web ditampilkan secara lokal. Dengan asumsi bahwa perangkat Anda menjalankan dan mengirim data, Anda akan melihat plot berjalan dari 50 pembacaan suhu dan kelembaban terbaru yang dikirim oleh perangkat.

Pemecahan Masalah

Jika Anda menemukan masalah dengan sampel ini, cobalah langkah-langkah di bagian berikut. Jika Anda masih mengalami masalah, kirimi kami umpan balik di bagian bawah artikel ini.

Masalah Klien

• Jika perangkat tidak muncul dalam daftar, atau tidak ada grafik yang digambar, pastikan kode perangkat berjalan di perangkat Anda.

• Di browser, buka alat pengembang (di banyak browser kunci F12 membukanya), dan temukan konsol. Cari peringatan atau kesalahan yang dicetak di sana.

• Anda dapat men-debug skrip pihak klien dalam /js/chat-device-data.js.

Masalah situs web lokal

• Perhatikan output di jendela tempat Anda meluncurkan simpul untuk output konsol.

• Debug kode server, khususnya server.js dan /scripts/event-hub-reader.js.

Masalah Azure App Service

• Di portal Microsoft Azure, buka aplikasi web Anda. Di bawah Pemantauandi panel sebelah kiri, pilihLog App Service. Hidupkan Pencatatan Log Aplikasi (Sistem File), atur Level ke Kesalahan, lalu pilih Simpan. Kemudian buka Alirkan log (di bawah Pemantauan).

• Dari aplikasi web Anda di portal Microsoft Azure, di bagianAlat Pengembangan pilih Konsol dan validasi versi node dan npm dengan node -v dan npm -v.

• Jika Anda melihat kesalahan tentang tidak menemukan paket, Anda mungkin telah menjalankan langkah-langkah dengan tidak semestinya. Ketika situs disebarkan (dengan git push ) layanan aplikasi menjalankan npm install, yang menjalankan berdasarkan versi simpul saat ini yang telah dikonfigurasi. Jika itu diubah dalam konfigurasi nanti, Anda perlu membuat perubahan yang tidak berarti pada kode dan mendorong lagi.

Langkah berikutnya

Anda berhasil menggunakan aplikasi web untuk memvisualisasikan data sensor real-time dari IoT hub Anda.

Untuk cara lain berinteraksi dengan data dari Azure IoT Hub, lihat tutorial berikut:

Menggunakan Logic Apps untuk pemantauan dan pemberitahuan jarak jauh