學習目標
- 於 AWS 建立設定 Node-RED 來視覺化顯示感測資料
前置準備作業
一台已連上網路的電腦
一個 AWS 帳號
【 註冊 AWS 帳號教學 】
Step 1. 開啟 Node-RED 編輯頁面
☆ 請參考下方網址中的 【 Step 4. 開啟 Node-RED 編輯環境 】
https://oranwind.org/-aws-zai-ec2-an-zhuang-node-red/
Step 2. 新增 【 node-red-dashboard 】 節點
☆ 點選右上角 【 ≡ 】 圖示
☆ 點選 【 Manage palette 】
☆ 點選 【 Install 】 頁籤
☆ 在 【 search modules 】 欄位中輸入 【 node-red-dashboard 】
☆ 點選 【 node-red-dashboard 】 欄位右邊的 【 install 】 按鈕
☆ 點選 【 Install 】 按鈕
☆ 安裝完成
Step 4. 建立 Node-RED 串接 MCS 程式
❖ 4.1 將 【 Input 】 中的 【 mqtt 】 節點拉到 Node-RED 編輯區域
❖ 4.2 點選編輯區中的 【 mqtt 】 節點
❖ 4.3 點選 【 server 】 欄位右邊的畫筆
❖ 4.4 在 【 server 】 欄位中輸入 【 mqtt.mcs.mediatek.com 】
❖ 4.5 點選右上方 【 Add 】 按鈕
❖ 4.6 在 【 Topic 】 欄位輸入 【 mcs/DeviceId/DeviceKey/+ 】
㊟ 請修改 DeviceId 與 DeviceKey ，請參考 【 啟用 MCS MQTT Broker 教學 】 文中的 【 Step 4. 取得 DeviceId 與 DeviceKey 】，參考紽頁如下：
https://oranwind.org/-aws-windows-chuan-song-dang-an-dao-aws-ec2-jiao-xue-2/
❖ 4.7 點選右上方 【 Done 】 按鈕
Step 5. 建立 Node-RED 處理程式
❖ 5.1 將 【 function 】 中的 【 function 】 節點拉到 Node-RED 編輯區域
❖ 5.2 建立 【 mqtt 】 節點與【 function 】 節點之間的關聯
❖ 5.3 點選編輯區中的 【 function 】 節點
❖ 5.4 在 【 function 】 欄位中輸入以下程式，在點選右上方的 【 Done 】 按鈕
var Ultrasonic = JSON.parse(msg.payload); msg.payload = Ultrasonic.datapoints[0].values.value; return {payload: msg.payload}
Step 6. 建立 Node-RED 串接 Dashboard 程式
❖ 6.1 將 【 dashboard 】 中的 【 gauge 】 節點拉到 Node-RED 編輯區域
❖ 6.2 建立 【 gauge 】 節點與【 function 】 節點之間的關聯
❖ 6.3 點選右上角的 【 dashboard 】 頁籤
❖ 6.4 點選 【 + tab 】
❖ 6.5 點選 【 + group 】
❖ 6.6 點選 【 + edit 】
❖ 6.7 將 【 Name 】 欄位的值改成 【 Status 】再點選 【 Update 】按鈕
❖ 6.8 點選 【 gauge 】 節點
❖ 6.9 ① 點選 【 Group 】 欄位的下拉選單為 【 Status[Tab 1] 】
② 將 【 Range 】 欄位的 max 改成 300
③ 點選 【 Done 】
❖ 6.10 點選右上角的 【 Deploy 】 的按鈕
❖ 6.11 部署成功後的畫面
❖ 6.12 執行 Arduino 程式
【 LinkIt 7697 串接 Node-RED Dashboard 教學 】
❖ 6.13 點選右上角的 【 dashboard 】 頁籤 ➙ 【 Site 頁籤右邊的開啟視窗 】 按鈕
❖ 6.14 Node-RED Dashbaord 顯示數據畫面
