AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 Azure IoT Hub 所接收到的數據透過 Azure Function 存入 Azure Digital Twins 再透過 Azure Event Grid 將警示資訊顯示於 Azure Indoor Map ( Node.js 版 )

Archer

• 21 min read
【 Cloud 】將 Azure IoT Hub 所接收到的數據透過 Azure Function 存入 Azure Digital Twins 再透過 Azure Event Grid 將警示資訊顯示於 Azure Indoor Map ( Node.js 版 )
Photo by John Hernandez / Unsplash

學習目標

  • 如何透過 Azure IoT Hub 所接收到的數據透過 Azure Function 存入 Azure Digital Twins 再透過 Azure Event Grid 將警示資訊顯示於 Azure Indoor Map

前置準備作業

  • 已建立 Azure 帳號並能正常登入與使用。
  • 已於電腦端安裝 IDE，本範例使用 Visual Studio Code
  • 已於電腦端安裝 Node.js

流程

---2022-01-03---8.22.19

  1. 建立 Azure Maps Accounts Service
  2. 透過 Creator 建立 Azure Indoor Map
  3. 建立 Feature State
  4. 透過 Azure Maps Indoor Maps module 取得 Feature ID
  5. 建立 Azure Digital Twin Service
  6. 透過 Azure Digital Twins Explorer 上傳 DTDL 到 Azure Digital Twins
  7. 透過 Azure Digital Twins Explorer 建立 Twin並初始化 Temperature 為 168
  8. 建立 Azure IoT Hub、Device ID 並取得 Device Connection String
  9. 建立 Azure Functions 將 Azure IoT Hub 所取得的數據傳到 Azure Digital Twin
  10. 建立 Azure Functions 將 Azure Digital Twins 的警示資訊傳送到 Azure Indoor Map
  11. 建立 Event Grid Topic 與 Event Subscription
  12. 在 Azure Digital Twins 中建立 Endpoint 以將 Event Grid Topic 連結至 Azure Digital Twins 並再建立 Event Route，以將對應的更新事件傳送至 Endpoint
  13. 撰寫隨機產生溫度數據的傳送程式
  14. 透過 Azure Digital Twins Explorer 查看所建立的 Twin 中的 Temperature 是否有更新
  15. 透過 Azure Maps Indoor Maps module 查看所對應的 Feature ID 是否有更新

建立 Azure Maps Service

Step 1. 在上方搜尋框輸入 map 關鍵字並點選 Azure Maps Accounts 的搜尋結果

---2021-12-23---8.32.56

Step 2. 點選 + Create

---2021-12-23---8.37.24

Step 3. 輸入相關資訊

---2021-12-23---8.41.45

  • Subscription 欄位選擇所要使用的訂閱。
  • Resource group 欄位輸入服務所要歸屬於的群組。
  • Name 欄位輸入一個可識別的名稱。
  • Region 欄位請選擇 East US。
  • Pricing tier 欄位請選擇 Gen2 (Maps and Location Insights)。
  • 勾選 I confirm that I have read and agree to the License and Privacy Statement. 欄位。
  • 當輸入完成後點選 Review + create。

---2021-12-23---8.43.47

Step 4. 建立服務

  • 確認資訊正確則點選 Create

---2021-12-23---8.44.56

Step 5. 點選 Go to resource

---2021-12-23---8.46.44

Step 6. 建立 Creator

  • 點選左側的 Creator > 再點選上方的 + Create a Creator resource

---2021-12-23---8.58.20

  • 輸入相關資訊
    • Creator name 欄位請輸入一個可識別的名稱。
    • Storage Units 欄位請輸入 1。
    • Location 欄位請選擇 (US East US 2)。
    • 當輸入完成後點選 Review + create。

---2021-12-23---9.01.31

---2021-12-23---9.02.04

  • 確認資訊正確則點選 Create

---2021-12-23---9.03.24

  • 點選 Go to resource

---2021-12-23---9.05.11

  • 建立完成

---2021-12-23---9.06.03

---2021-12-23---9.07.14

Step 7. 取得 Shared Key Authentication 的 Primary Key

  • 點選左側的 Authentication 頁面中即取得 Primary Key

---2021-12-23---8.49.29

透過 Creator 建立 Azure Indoor Map

Step 1. 請透過下方教學網頁的步驟取得 Conversion ID、Dataset ID、Tileset ID

Step 2. 步驟 1 執行完結果如下

---2021-12-23---9.13.45

建立 Feature State

Step 1. 下載 Number-Style-Rules.json

  • 請將下方資訊複製後存放於本地端電腦，其檔名設定為 Number-Style-Rules.json。
    • Number-Style-Rules.json 設定檔說明
      • Style 的名稱設定為 temperature01、type 設為 number，其數值的範圍與對應的顏色設定如下 :
Temperature 顏色
0 ~ 19 紅色 ( #e71313 )
20 ~ 39 藍色 ( #3f0feb )

Step 2. 經由瀏覽器開啟執行頁面

Step 3. 輸入相關資訊

---2021-12-23---9.20.07

  • Azure Map Primary Key 欄位請輸入 建立 Azure Maps Service 段落中 Step 7 所取得 Shared Key Authentication 的 Primary Key。
  • Dataset ID 欄位請輸入 透過 Creator 建立 Azure Indoor Map 段落中 Step 1 所取得 Dataset ID
  • 點選 匯入 JSON 按鈕選擇 Step 1 的檔案

Step 4. 設定 Style

  • 點選 設定 Style 按鈕

---2021-12-23---9.31.05

  • 執行完結果
    • 請紀錄 Stateset ID 的結果值

---2021-12-23---9.35.07

透過 Azure Maps Indoor Maps module 取得 Feature ID

Step 1. 經由瀏覽器開啟執行頁面

網址為 https://archerhuang.github.io/Azure-Indoor-Map-Tools/Indoor-Map/

Step 2. 輸入相關資訊

---2021-12-23---9.39.32

  • Azure Map Primary Key 欄位請輸入 建立 Azure Maps Service 段落中 Step 7 所取得 Shared Key Authentication 的 Primary Key。
  • Tileset ID 欄位請輸入 透過 Creator 建立 Azure Indoor Map 段落中 Step 1 所取得 Tileset ID
  • Stateset ID 欄位請輸入 建立 Feature State 段落中 Step 4 所取得 Stateset ID
  • 當輸入完成後點選 顯示 Map 按鈕

---2021-12-23---9.40.18

Step 3. 顯示 Map 結果

  • 結果顯示

---2021-12-23---9.41.27

  • 請 Zoom In 地圖
    • 點選各房間可取得對應的 Feature ID，本範例點選左上角的房間以取得對應的 Feature ID 為 UNIT61

---2021-12-23---9.42.40

建立 Azure Digital Twin Service

Step 1. 開啟 Azure Digital Twin

  • 在上方搜尋框輸入 digital twin 並點選下方 Azure Digital Twins 的搜尋結果

---2021-12-23---9.45.42-1

Step 2. 建立 Azure Digital Twin

  • 點選左上角的 + Create

---2021-12-23---9.47.30

Step 3. 輸入相關資訊

---2021-12-23---9.48.45

  • Subscription 欄位選擇所要使用的訂閱。
  • Resource group 欄位輸入此 Digital Twins 所要歸屬於的群組。
  • Resource Name 欄位輸入一個可識別的名稱。
  • Region 欄位請選擇 Digital Twins 服務所要位於的資料中心。
  • 勾選 Assign Azure Digital Twins Data Owner Role 欄位。
  • 當輸入完成後點選 Review + create。

---2021-12-23---9.50.53

Step 4. 建立服務

  • 確認資訊正確則點選 Create。

---2021-12-23---9.51.48

Step 5. 點選 Go to resource

---2021-12-23---9.53.10

Step 6. 取得 Host name

---2021-12-23---9.54.16

透過 Azure Digital Twins Explorer 上傳 DTDL 到 Azure Digital Twins

Step 1. 在本地端電腦建立 device.json 檔案並填入下方 JSON 資料

Step 2. 開啟 Azure Digital Twins Explorer

  • 點選所建立的 Azure Digital Twins > 再點選 Overview > 點選上方的 Open Azure Digital Twins Explorer (preview)

---2021-12-23---9.59.39

  • 如開啟 Azure Digital Twins Explorer 出現 RestError: Unauthorized 或 right permissions 的錯誤訊息，請稍後幾分鐘再重新點選 Azure Digital Twins Explorer

---2021-12-24---7.30.27
---2021-12-24---8.01.38

  • 如過幾分鐘後點選 Azure Digital Twins Explorer 還是出現上述問題，請確認 Azure Digital Twins Data Owner 是否有指派
    • 點選左側的 Access control (IAM) > 再點選 Check access 頁籤 > 再點選 View my access > 確認 Role 中是否有指派 Azure Digital Twins Data Owner 角色

---2021-12-24---7.34.18

  • 如未指派 Azure Digital Twins Data Owner 角色

    • 點選左側的 Access control (IAM) > 再點選 Add role assignment
      ---2021-12-24---7.46.12

    • 點選 Azure Digital Twins Data Owner > 再點選 Next
      ---2021-12-24---7.47.46

    • Assign access to 欄位點選 User, group, or service principal、Members 欄位點選 + Select members，並選擇成員後點選 Select
      ---2021-12-24---7.48.46
      ---2021-12-24---7.54.31
      ---2021-12-24---7.55.24

    • 以上資訊輸入完成後點選 Review + assign
      ---2021-12-24---7.56.49
      ---2021-12-24---8.03.26

    • 再次確認 Azure Digital Twins Data Owner 角色

      • 點選左側的 Access control (IAM) > 再點選 Check access 頁籤 > 再點選 View my access > 確認 Role 中是否有指派 Azure Digital Twins Data Owner 角色
        ---2021-12-24---7.34.18

    • 指定 Azure Digital Twins Data Owner 角色完再稍後幾分鐘重新點選 Azure Digital Twins Explorer 即可正常使用。

Step 3. 上傳 DTDL

  • 點選 Upload a Model 按鈕

---2021-12-23---10.04.44

  • 選擇 Step 1 所建立的 device.json 檔案並點選 打開

---2021-12-23---10.06.34

  • 上傳完成

---2021-12-23---10.07.07

透過 Azure Digital Twins Explorer 建立 Twin並初始化 Temperature 為 168

Step 1. 建立 Twin

  • 點選 ... > 再點選 Create a Twin

---2021-12-23---10.08.12

  • 在 New Twin name 欄位請輸入 透過 Azure Maps Indoor Maps module 取得 Feature ID 段落 Step 3 所取得的 Feature ID > 再點選 Save

---2021-12-23---10.09.34

---2021-12-23---10.11.50

  • 建立完成

---2021-12-23---10.12.24

Step 2. 初始化

  • 點選所建立的 Twin

---2021-12-23---10.12.24--

  • 新增初始化數字 168

---2021-12-23---10.14.10

---2021-12-23---10.15.07

  • 點選儲存按鈕

---2021-12-23---10.16.05

---2021-12-23---10.17.01

  • 初始化成功

---2021-12-23---10.17.52

建立 Azure IoT Hub、Device ID 並取得 Device Connection String

Step 1. 在上方搜尋框輸入 iot hub 關鍵字並點選 IoT Hub 的搜尋結果

---2021-11-25---3.20.00

Step 2. 點選 + Create

---2021-11-25---3.21.56

Step 3. 輸入相關資訊

---2021-11-25---3.23.09

  • Subscription 欄位選擇所要使用的訂閱。
  • Resource group 欄位輸入此 IoT Hub 所要歸屬於的群組。
  • IoT Hub Name 欄位輸入一個可識別的名稱。
  • Region 欄位擇此 IoT Hub 要建置於哪個資料中心。
  • 當輸入完成後點選 Review + create

---2021-12-23---10.22.38

Step 4. 建立服務

  • 確認資訊正確則點選 Create

---2021-12-23---10.23.19

Step 5. 點選 Go to resource

---2021-12-23---10.26.30

Step 6. 取得 IoT Hub 中的 Device Connection String

  • 點選 Devices > + Add Device

---2021-12-23---10.28.22

  • 輸入相關資訊
    • Device ID 欄位請輸入 透過 Azure Maps Indoor Maps module 取得 Feature ID 段落 Step 3 所取得的 Feature ID，本範例為 UNIT61
    • 當輸入完成後點選 Save

---2021-12-23---10.30.16

  • 點選所建立的 Device

---2021-12-23---10.32.31

  • 取得 Device Connection String
    • 點選 Primary Connection String 右側的複製按鈕

---2021-12-23---10.33.21

建立 Azure Functions 將 Azure IoT Hub 所取得的數據傳到 Azure Digital Twin

Step 1. 在上方搜尋框輸入 function 關鍵字並點選 Function App 的搜尋結果

---2021-11-23---1.29.58

Step 2. 點選 + Create

---2021-11-23---1.31.58

Step 3. 輸入相關資訊

---2021-11-23---1.33.09

  • Subscription 欄位選擇所要使用的訂閱。
  • Resource group 欄位輸入此 Function 所要歸屬於的群組。
  • Function App name 欄位輸入一個可識別的名稱。
  • Publish 欄位請選擇 Code。
  • Runtime stack 欄位請選擇 Node.js。
  • Version 欄位請選擇 14 LTS。
  • Region 欄位請選擇服務所要位於的資料中心。
  • 當輸入完成後點選 Review + create

---2021-12-23---10.38.50

Step 4. 建立服務

  • 確認資訊正確則點選 Create

---2021-12-23---10.40.00

Step 5. 點選 Go to resource

---2021-12-23---10.41.56

Step 6. 建立 IoTHub_EventHub_To_Adt

  • 點選左側的 Functions > 再點選上方的 + Create

---2021-12-23---10.42.51

  • 選擇 IoT Hub (Event Hub)

---2021-12-23---10.44.57

  • Template details 輸入相關資訊
    • New Function 欄位請輸入 IoTHub_EventHub_To_Adt
    • 事件中樞連線 欄位請點選 New > 點選 IoT Hub > 事件中樞連線 請選擇所建立的 IoT Hub，當輸入完成後點選 OK
    • 當輸入完成後點選 Create

---2021-12-23---10.47.30

---2021-12-23---10.49.22

---2021-12-23---10.49.31

  • 設定 IoTHub_EventHub_To_Adt
    • 點選左側的 Code + Test

---2021-12-23---10.51.55

  • 點選上方的選單選擇 index.js 再輸入下方程式後再點選 Save 按鈕
    • ㊟ 請修改 index.js 程式中的 第 27 行 中的 ADT-Host-Name 改成所立 Azure Digital Twins 的 Host name

---2021-12-23---10.53.23

---2021-12-23---9.54.16

Step 7. 安裝套件

  • 點選左側的 Advanced Tools > 再點選 Go →

---2021-12-23---10.57.02

  • 點選上方的 Debug console > CMD

---2021-11-24---9.34.11

  • 切換路徑到 IoTHub_EventHub_To_Adt 資料夾
    • 請輸入 cd site\wwwroot\IoTHub_EventHub_To_Adt

---2021-12-01---7.31.35

  • 初始化專案
    • 請輸入 npm init -y

---2021-12-01---7.33.04

  • 安裝 @azure/identity 與 axios 套件 ( 需花一段時間進行安裝 )
    • 請輸入 npm i @azure/identity axios

---2021-12-01---7.36.21

Step 8. 點選所建立的 Azure Function 左側的 identity

---2021-12-23---11.02.35

Step 9. 將 Status 設成 On > 再點選 Save

---2021-12-23---11.03.48

Step 10. 再點選 Yes

---2021-12-23---11.05.05

Step 11. 點選 Azure role assignments

---2021-12-23---11.06.13

Step 12. 點選 + Add role assignment (Preview)

---2021-12-23---11.07.22

Step 13. 填寫相關資訊

  • Scope 欄位請點選 Subscription
  • Subscription 欄位請點選所要使用的訂閱
  • Role 欄位請選擇 Azure Digital Twins Data Owner
  • 資料選取完成後再點選 Save

---2021-12-23---11.08.18

---2021-12-23---11.08.42

Step 14. 設定完成

---2021-12-23---11.10.19

建立 Azure Functions 將 Azure Digital Twins 的警示資訊傳送到 Azure Indoor Map

Step 1. 回到所建立的 Functions > 再點選 + Create

---2021-12-23---11.12.08

Step 2. 選擇 Azure Event Grid Trigger

---2021-12-23---11.14.44

  • Template details 輸入相關資訊
    • New Function 欄位請輸入 Adt_To_Map
    • 當輸入完成後點選 Create

---2021-12-23---11.16.03

Step 3. 設定 Adt_To_Map

  • 點選左側的 Code + Test

---2021-12-23---11.17.42

  • 點選上方的選單選擇 index.js 再輸入下方程式後再點選上方的 Save 按鈕

---2021-12-23---11.19.02

Step 4. 設定 Config

  • 點選左側的 Configuration > 再點選 + New application setting

---2021-12-23---12.53.08

  • 設定 Azure Map 的 Primary Key
    • Name 欄位請輸入 AZURE_MAP_PRIMARY_KEY
    • Value 欄位請輸入 建立 Azure Maps Service 段落 Step 7 所取得 Shared Key Authentication 的 Primary Key
    • 當輸入完成後點選 OK

---2021-11-24---9.21.08

---2021-12-23---12.56.49

  • 再點選 + New application setting

---2021-12-23---12.53.08

  • 設定 Stateset ID 的連接字串
    • Name 欄位請輸入 STATESET_ID
    • Value 欄位請輸入在 建立 Feature State 段落 Step 4 設定 Style Stateset ID 的結果值
    • 當輸入完成後點選 OK

---2021-11-24---9.21.08

---2021-12-23---1.00.16

  • 點選 Save

---2021-12-23---1.00.59

  • 點選 Continue

---2021-12-23---1.01.56

Step 5. 安裝套件

  • 點選左側的 Advanced Tools > 再點選 Go →

---2021-12-23---10.57.02

  • 點選上方的 Debug console > CMD

---2021-11-24---9.34.11

  • 切換路徑到 Adt_To_Map 資料夾
    • 請輸入 cd site\wwwroot\Adt_To_Map

---2021-12-23---11.24.06

  • 初始化專案
    • 請輸入 npm init -y

---2021-12-23---11.25.01

  • 安裝 dotenv 與 axios 套件 ( 需花一段時間進行安裝 )
    • 請輸入 npm i axios dotenv

---2021-12-23---11.26.03

建立 Event Grid Topic 與 Event Subscription

Step 1. 在上方搜尋框輸入 event grid topic 關鍵字並點選 Event Grid Topics 的搜尋結果

---2021-12-23---11.31.41

Step 2. 點選 + Create

---2021-12-23---1.03.09

Step 3. 輸入相關資訊

---2021-12-23---1.04.24

  • Subscription 欄位選擇所要使用的訂閱。
  • Resource group 欄位輸入所要歸屬於的群組。
  • Name 欄位輸入一個可識別的名稱
    • 本範例使用 adtToMapEventGridTopic
  • Region 欄位請選擇服務所要位於的資料中心。
  • 當輸入完成後點選 Review + create

---2021-12-23---1.06.42

Step 4. 建立服務

  • 確認資訊正確則點選 Create

---2021-12-23---1.07.51

Step 5. 點選 Go to resource

---2021-12-23---1.08.44

Step 6. 建立 Event Subscription

  • 點選 + Event Subscription

---2021-12-23---1.12.51

  • 輸入相關資訊
    • Name 欄位請輸入一個可識別的名稱
      • 本範例使用 adtToMapEventSubscription
    • Endpoint Type 欄位請選擇 Azure Function
    • Endpoint 欄位請選擇 Adt_To_Map
      • Endpoint 欄位選擇完成後點選 Confirm Selection
    • 以上資訊輸入完成後點選 Create

---2021-12-23---1.15.01

---2021-12-23---1.17.31

---2021-12-23---1.18.41

---2021-12-23---1.21.20

Step 7. 使用 Azure CLI 可做到 Step 1 到 Step 5

  • 指令如下

Step 8. 使用 Azure CLI 可做到 Step 6

  • 指令如下

在 Azure Digital Twins 中建立 Endpoint 以將 Event Grid Topic 連結至 Azure Digital Twins 並再建立 Event Route，以將對應的更新事件傳送至 Endpoint

Step 1. 回到所建立的 Azure Digital Twins

---2021-12-23---1.22.57

Step 2. 建立 Endpoint

  • 點選左側的 Endpoints > 再點選上方的 + Create an endpoint

---2021-12-23---1.25.24

  • 輸入相關資訊
    • Name 輸入一個可識別的名稱
      • 本範例使用 map-endpoint
    • Endpoint type 選擇 Event Grid
    • Subscription 欄位選擇所要使用的訂閱。
    • Event Grid topic 欄位選擇 建立 Event Grid Topic 與 Event Subscription 段落 Step 3 所建立的 Topic
    • 以上資訊輸入完成後點選 Save

---2021-12-23---1.28.28

---2021-12-23---1.30.40

  • 建立完成

---2021-12-23---1.31.39

Step 3. 建立 Event Route

  • 點選左側的 Event routes > 再點選上方的 + Create an event route

---2021-12-23---1.32.37

  • 輸入相關資訊
    • Name 欄位請輸入一個可識別的名稱
      • 本範例使用 map-route
    • Endpoint 欄位請選擇 Step 2 所建立的 Endpoint
    • Event types 欄位請選擇 Twin Update
    • 以上資訊輸入完成後點選 Save

---2021-12-23---1.34.17

---2021-12-23---1.36.20

  • 建立完成

---2021-12-23---1.39.06

Step 4. 使用 Azure CLI 可做到 Step 2

  • 指令如下

Step 5. 使用 Azure CLI 可做到 Step 3

  • 指令如下

撰寫隨機產生溫度數據的傳送程式

Step 1. 初始化專案

  • 在終端機輸入下方指令
    npm init -y

Step 2. 安裝套件

  • 在終端機輸入下方指令
    npm i dotenv azure-iot-device-mqtt azure-iot-device

Step 3. 撰寫程式

  • 建立一個名為 send.js 的程式，其程式如下 :

Step 4. 於設定檔新增資訊

  • 在剛才所建的 .env 設定檔中新增下方資訊 :
    • 請將 = 右側填入 建立 Azure IoT Hub、Device ID 並取得 Device Connection String 段落中 Step 6 取得 Device Connection String
    IOT_HUB_DEVICE_CONNECTION_STRING=

Step 5. 執行 send.js

  • ① 開啟終端機再切換工作路徑到剛才所建立 send.js 程式的地方
  • ② 執行下方指令
    node send.js

---2021-12-23---1.46.07

透過 Azure Digital Twins Explorer 查看所建立的 Twin 中的 Temperature 是否有更新

Step 1. 透過 Azure Digital Twins Explorer 進行驗證

  • 點選 Azure Digital Twins Explorer 右上方的 Run Query

---2021-12-23---1.48.14

  • 查詢結果
    • Temperature 的數值已從 168 變為所上傳的數值 35

---2021-12-23---1.47.11

透過 Azure Maps Indoor Maps module 查看所對應的 Feature ID 是否有更新

Step 1. 所選定的 Feature ID 因 Temperature 狀態改變成 35 而變成藍色

Temperature 顏色
0 ~ 19 紅色 ( #e71313 )
20 ~ 39 藍色 ( #3f0feb )

---2021-12-23---1.49.07

Azure Indoor Map Tools

GitHub

List of blogs

Sign up for more like this.

Enter your email
Subscribe