การแสดงผลข้อมูลที่ IoT hub ได้รับจากเซ็นเซอร์แบบเรียลไทม์ โดยใช้ Azure Web Apps

End-to-end diagram

[!อย่าลืม]
ก่อนที่เราจะลงมือทำตัวอย่างนี้ ลองตรวจดูก่อนซิว่าคุณได้ตั้งค่าอุปกรณ์ IoT, IoT hub และติดตั้งโปรแกรมลงบนอุปกรณ์ IoT เป็นที่เรียบร้อยแล้ว เพื่อให้เราสามารถส่งข้อมูลจากเซ็นเซอร์ไปยัง IoT hub ของคุณได้

สิ่งที่จะได้จากบทเรียนนี้

ในบทเรียนนี้คุณจะได้เรียนวิธีนำข้อมูลที่ IoT hub ได้รับจากเซ็นเซอร์ที่ส่งขึ้นมา ไปแสดงผลบนเว็บไซต์ที่อยู่บน Azure แบบเรียลไทม์ หากต้องการนำไปแสดงผลโดยใช้ Power BI จาก IoT hub ของคุณเอง สามารถดููได้จากตัวอย่างลิงค์นี้ Use Power BI to visualize real-time sensor data from Azure IoT Hub.

สิ่งที่คุณจะได้ทำ

  • สร้างเว็บไซต์บน Azure
  • จัดเตรียม IoT hub ของคุณให้พร้อมโดยการเพิ่ม consumer group ใหม่
  • ตั้งค่าเว็บไซต์ให้ไปอ่านข้อมูลเซ็นเซอร์จาก IoT hub ของคุณ
  • อัพโหลดเว็บไซต์ที่อยู่บน Azure ให้พร้อมใช้งาน
  • เรียกดูเว็บไซต์ของคุณเพื่อดูข้อมูล อุณหภูมิ, ความชื้น แบบเรียวไทม์จาก IoT hub ของคุณ

สิ่งที่คุณต้องมีก่อนลงมือทำ

  • ผ่านขั้นตอนตั้งค่าอุปกรณ์จากตัวอย่าง Setup your device ซึ่งสิ่งที่จะได้จากตัวอย่างคือ
    • บัญชี Azure subscription ที่พร้อมใช้งาน
    • IoT hub ที่พร้อมใช้งาน และอยู่ภายใต้บัญชี Azure subscription ของคุณ
    • โปรแกรมที่จะส่งข้อมูลไปยัง IoT hub ของคุณ
  • โปรแกรม Git (คลิกที่นี่เพื่อดาวโหลด Git).

สร้างเว็บไซต์บน Azure

  1. เข้าไปที่ Azure portal แล้วคลิกที่ New > Web + Mobile > Web App

  2. ที่ช่อง App name ใส่ชื่อเว็บไซต์ที่คุณต้องการ (ชื่อเว็บจะต้องเป็นชื่อที่ไม่ซ้ำกับคนอื่น ซึ่งจะใช้เวลาในการตรวจสอบสักครู่) เลือก resource group และ location และอย่างลืมติ๊ก Pin to dashboard แล้วคลิกปุ่ม Create.

    ช่อง location แนะนำให้เลือกเป็นที่เดียวกันกับ resource group อยู่ เพื่อความรวดเร็วและประหยัดค่าใช้จ่ายในการรับส่งข้อมูล

    Create a Azure web app

เพิ่ม consumer group ใน IoT hub

Consumer groups นั่้นจะถูกเรียกใช้จากโปรแกรมอื่นๆ เพื่อใช้ในการดึงข้อมูลจาก IoT hub ซึ่งในบทเรียนนี้เราจะสร้าง consumer group เพื่อให้ Azure service ของเราเข้ามาอ่านข้อมูลจาก IoT hub ของคุณ

ในการเพิ่ม consumer group ใน IoT hub มีขั้นตอนดังนี้

  1. เข้าไปที่ Azure portal แล้วเปิด IoT hub ที่เตรียมไว้

  2. ที่เมนูคลิก Endpoints แล้วเลือก Events แล้วจะมีเมนูใหม่เปิดขึ้นมา ภายใต้ Consumer groups ให้ทำการเพิ่มชื่อใหม่เข้าไป (ในตัวอย่างจะตั้งชื่อว่า group01) แล้วคลิกปุ่ม Save.

    Create consumer group in Azure IoT Hub

ตั้งค่าเว็บไซต์ให้ไปอ่านข้อมูลเซ็นเซอร์จาก IoT hub ของคุณ

  1. ที่ Azure portal ให้เปิดเว็บไซต์ที่เราพึ่งสร้างไปขึ้นมา

  2. ที่เมนูคลิก Application settings แล้วเลื่อนลงมาด้านล่างจะเจอ App settings ให้เพิ่ม key/value เข้าไปใหม่ 3 ตัวตามตารางที่อยู่ตอนสุดท้ายของขั้นตอนนี้

    Add settings to Azure web app with key value pairs

  3. ในเมนู Application settings ให้เลือก Web sockets เป็น On

    Toggle Web sockets option

Key Value
Azure.IoT.IoTHub.ConnectionString ดูจาก iothub-explorer
Azure.IoT.IoTHub.DeviceId ดูจาก iothub-explorer
Azure.IoT.IoTHub.ConsumerGroup ชื่อ consumer group ที่คุณเพิ่มเข้าไปใหม่ (ซึ่งในตัวอย่างนี้จะใช้ชื่อว่า group01)

อัพโหลดเว็บไซต์ที่อยู่บน Azure ให้พร้อมใช้งาน

ตัวอย่างนี้ได้มีการจัดเตรียมข้อมูลที่จะนำไปสร้างเว็บไซต์เพื่อแสดงข้อมูลที่ IoT hub ได้รับจากอุปกรณ์แบบเรียลไทม์ไว้บน GitHub แล้ว สิ่งที่คุณต้องทำต่อคือการตั้งค่าเว็บไซต์ให้ทำงานร่วมกับ Git repository โดยการดาวโหลดข้อมูลที่ได้จัดเตรียมไว้จาก GitHub แล้วทำการอัพโหลดไปยังเว็บไซต์ที่อยู่บน Azure ของคุณ

  1. เลือกเว็บไซต์ที่คุณสร้างไว้แล้วคลิก Deployment Options > Choose Source > Local Git Repository.

    Configure your Azure web app deployment to use local git repository

  2. คลิก Setup connection แล้วตั้งค่า user name และ password ที่จะติดต่อไปยัง Git repository ที่อยู่บน Azure แล้วคลิกที่ปุ่ม OK (อย่าลืมจด username และ password ที่ตั้งไว้ด้วยเพราะจะต้องนำไปใช้ต่อในขั้นตอนต่อไป)

    Set user name and password for the git repository in Azure for your web app

  3. คลิกที่ปุ่ม OK เพื่อเสร็จสิ้นการตั้งค่า

  4. ที่เมนูคลิก Overview แล้วจดค่า Git clone url เอาไว้

    Get the git clone URL of your Azure web app

  5. เปิด command หรือ terminal window บนเครื่องคอมของคุณ

  6. ทำการดาวโหลดข้อมูลที่จัดเตรียมไว้จาก GitHub แล้วทำการอัพโหลดไปยังเว็บไซต์ที่อยู่บน Azure ของคุณ โดยใช้คำสั่งตามขั้นตอนดังนี้

    git clone https://github.com/Azure-Samples/web-apps-node-iot-hub-data-visualization.git
cd web-apps-node-iot-hub-data-visualization
git remote add webapp <Git clone URL>
git push webapp master:master

    [!อย่าลืม]
    ที่ช่อง Git clone URL ให้ทำการแทนที่ด้วย Git clone url ที่ได้จากเมนู Overview

เรียกดูเว็บไซต์ของคุณเพื่อดูข้อมูล อุณหภูมิ, ความชื้น แบบเรียวไทม์จาก IoT hub ของคุณ

ที่เมนู Overview ให้คลิกที่ URL เพื่อทำการเปิดเว็บไซต์ของคุณ

Get the URL of your Azure web app

คุณจะเห็นข้อมูลอุณหภูมิและความชื้นที่ IoT hub ได้รับมา แสดงผลแบบเรียลไทม์

Azure web app page showing real-time temperature and humidity

[!อย่าลืม]

หากข้อมูลไม่แสดงผลให้ตรวจสอบการตั้งค่าใน App settings ว่าตั้งค่าถูกต้องแล้วหรือยัง หรือที่ตัวอุปกรณ์ IoT มีการส่งข้อมูลไปยัง IoT hub รือไม่

ขั้นตอนต่อไป

ตอนนี้คุณได้ทำการสร้างเว็บไซต์ที่สามารถแสดงผลข้อมูลที่ IoT hub ได้รับมาแบบเรียลไทม์สำเร็จเรียบร้อยแล้ว

เรามีอีกหลายช่องทางที่จะแสดงผลข้อมูลที่ IoT hub ได้รับ ลองดูตัวอย่าง Use Power BI to visualize real-time sensor data from Azure IoT Hub

results matching ""

    No results matching ""