Node-RED學習心得(實戰篇1)

node-red 物聯網

Zacch 2021-11-04 17:03:48 ‧ 6394 瀏覽

分享至

架構圖

安裝節點

再進行操作前我們需要先安裝第三方節點庫，點右側選單欄內的節點管理選項

分別安裝圖中的兩個節點庫

dashboard-evi
node-red-contrib-aedes

這兩個分別是圖表與操作介面、MQTT相關的節點庫

讀取數據篇

實現目的

目的1: 從網站資料中讀取json格式的資料
目的2: 生成UI介面
目的3: 手動輸入序號，輸出族裔消息
目的4: 清除dashboard功能

執行結果

使用節點

整體的節點流程圖如下所示，主要就是使用5種節點

button節點*3
text節點*4
text input節點*1
function節點*3
http request節點*1

操作流程

下載公開資料

首先我們需要從公開的資料平台拉取資料，可以按這裡選擇政府的公開資料，然後選擇資料集頁面，再側邊欄位勾選JSON檔案格式，篩選出可用資料

接著點擊想要的資料，我這裡選擇台灣原住民人口總數的資料集

點擊檢視資料，複製網站提供的URL

JSON raw data

如果你有把資料下載下來可以看出JSON的多層結構，我們等等會利用function來處理這一串資料

設定http request

回到Node-RED，從側邊欄位拉取http request，點擊進入設定選單，將http method設定成GET，URL貼上剛剛複製的網誌，返回對象選擇JSON對象

設定function

全域變數節點

拉取一個function節點，目的是為了讓輸入序號值變成全域變數，使得處理資料的function可以依照這個值去讀指定JSON資料
複製以下程式碼到function中

var num = msg.payload-1; // UI輸入是從1開始
global.set("index", num); // 將index設為Global

return msg;

全域變數的變化可以再右側欄位的上下文(context)中看到

處理函數節點

以下程式碼負責按照指定的序號輸入讀取相應的json資料，同樣複製貼到function節點中

var a = msg.payload;
var b = global.get("index", msg.payload); // 獲得全域變數

if(b == null){
    b = 0;
}

if(a[0].success == true){
    msg.payload = a[0].result.records[b];
    msg.payload.people = a[0].result.records[b].族別;
    msg.payload.numbers = a[0].result.records[b].人口數;
}
else{
    msg.payload = [{"0":"0"}];
}

return msg;

清空資料函數節點

我們會有一個清除所有資料的功能，一樣複製程式碼到function中

msg.payload = ""; // 空字串

return msg;

UI介面

輸入按鍵

UI介面一共需要兩種節點，分別是
button
負責觸發http request以及清除資料

Clear
獲得資料

text input
負責將輸入整數值

輸入序號

這裡不需要做額外的設定，只要改成你想要的名字就好

Group

記得輸入輸出的節點要設定在同一個Group當中，相同的Group會將dashboard節點放在同一個輸出視窗當中

於是我們將每一個跟dashboard有關的節點都設定成同一個group。但若是你有特殊要求也可以分成多的Group。預設要自己設定，好在只要改名字就好

輸出按鍵

序號

對應JSON資料中的Seq，所以我們將輸出的格式設定成

{{msg.payload.Seq}}

統計日期

對應JSON資料中的DateListed，所以我們將輸出的格式設定成

{{msg.payload.DateListed}}

族別

JSON中的族別是用中文顯示，為了避免中文編碼問題，我在處理函數節點中已經將它儲存成people屬性，因此我們將輸出格是改成

{{msg.payload.people}}

人口數

跟族別一樣，我把它儲存成numbers屬性，所以輸出使用以下格式

{{msg.payload.numbers}}

執行

連接所有節點

按照以下流程把所有節點連接起來，其實流程非常簡單，主要就三條思路:

輸入序號，使輸出符合我們的需求
輸入序號(button) → 全域變數(function)
觸發http request消息，然後把讀值餵給處理函數
獲得資料(button) → 資料集(http request) → 序號\統計日期\族別\人口數(text)
按下Clear鍵清除所有顯示資料
Clear(button) → 清理資料結點(function) → 序號\統計日期\族別\人口數(text)