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

學習目標

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

前置準備作業

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

流程

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

建立 Azure Maps Service

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

Step 2. 點選 + Create

Step 3. 輸入相關資訊

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。

Step 4. 建立服務

確認資訊正確則點選 Create

Step 5. 點選 Go to resource

Step 6. 建立 Creator

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

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

確認資訊正確則點選 Create

點選 Go to resource

建立完成

Step 7. 取得 Shared Key Authentication 的 Primary Key

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

透過 Creator 建立 Azure Indoor Map

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

https://learningsky.io/use-web-ui-creator-rest-api-to-create-indoor-map-azure-indoor-map-tools/

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

建立 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. 經由瀏覽器開啟執行頁面

網址為 https://archerhuang.github.io/Azure-Indoor-Map-Tools/Set-Feature-Stateset/form_textarea/

Step 3. 輸入相關資訊

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 按鈕

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

透過 Azure Maps Indoor Maps module 取得 Feature ID

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

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

Step 2. 輸入相關資訊

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 按鈕

Step 3. 顯示 Map 結果

結果顯示

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

建立 Azure Digital Twin Service

Step 1. 開啟 Azure Digital Twin

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

Step 2. 建立 Azure Digital Twin

點選左上角的 + Create

Step 3. 輸入相關資訊

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

Step 4. 建立服務

確認資訊正確則點選 Create。

Step 5. 點選 Go to resource

Step 6. 取得 Host name

透過 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)

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

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

如未指派 Azure Digital Twins Data Owner 角色
- 點選左側的 Access control (IAM) > 再點選 Add role assignment
- 點選 Azure Digital Twins Data Owner > 再點選 Next
- Assign access to 欄位點選 User, group, or service principal、Members 欄位點選 + Select members，並選擇成員後點選 Select
- 以上資訊輸入完成後點選 Review + assign
- 再次確認 Azure Digital Twins Data Owner 角色
  - 點選左側的 Access control (IAM) > 再點選 Check access 頁籤 > 再點選 View my access > 確認 Role 中是否有指派 Azure Digital Twins Data Owner 角色
- 指定 Azure Digital Twins Data Owner 角色完再稍後幾分鐘重新點選 Azure Digital Twins Explorer 即可正常使用。

Step 3. 上傳 DTDL

點選 Upload a Model 按鈕

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

上傳完成

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

Step 1. 建立 Twin

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

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

建立完成

Step 2. 初始化

點選所建立的 Twin

新增初始化數字 168

點選儲存按鈕

初始化成功

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

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

Step 2. 點選 + Create

Step 3. 輸入相關資訊

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

Step 4. 建立服務

確認資訊正確則點選 Create

Step 5. 點選 Go to resource

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

點選 Devices > + Add Device

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

點選所建立的 Device

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

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

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

Step 2. 點選 + Create

Step 3. 輸入相關資訊

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

Step 4. 建立服務

確認資訊正確則點選 Create

Step 5. 點選 Go to resource

Step 6. 建立 IoTHub_EventHub_To_Adt

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

選擇 IoT Hub (Event Hub)

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

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

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

Step 7. 安裝套件

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

點選上方的 Debug console > CMD

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

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

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

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

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

Step 10. 再點選 Yes

Step 11. 點選 Azure role assignments

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

Step 13. 填寫相關資訊

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

Step 14. 設定完成

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

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

Step 2. 選擇 Azure Event Grid Trigger

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

Step 3. 設定 Adt_To_Map

點選左側的 Code + Test

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

Step 4. 設定 Config

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

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

再點選 + New application setting

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

點選 Save

點選 Continue

Step 5. 安裝套件

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

點選上方的 Debug console > CMD

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

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

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

建立 Event Grid Topic 與 Event Subscription

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

Step 2. 點選 + Create

Step 3. 輸入相關資訊

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

Step 4. 建立服務

確認資訊正確則點選 Create

Step 5. 點選 Go to resource

Step 6. 建立 Event Subscription

點選 + Event Subscription

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

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

Step 2. 建立 Endpoint

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

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

建立完成

Step 3. 建立 Event Route

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

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

建立完成

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
```

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

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

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

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

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

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

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

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

學習目標

前置準備作業

流程

建立 Azure Maps Service

透過 Creator 建立 Azure Indoor Map

建立 Feature State

透過 Azure Maps Indoor Maps module 取得 Feature ID

建立 Azure Digital Twin Service

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

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

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

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

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

建立 Event Grid Topic 與 Event Subscription

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

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

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

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

Azure Indoor Map Tools

GitHub

List of blogs