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


架構圖

核心知識點

安裝節點

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

Node-RED選單

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

  • dashboard-evi
  • node-red-contrib-aedes

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

安裝節點

讀取數據篇

實現目的

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

執行結果

原住民人口普查

使用節點

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

流程
  1. button節點*3
  2. text節點*4
  3. text input節點*1
  4. function節點*3
  5. http request節點*1

操作流程

下載公開資料

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

公開平台頁面

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

選擇資料

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

複製URL

JSON raw data

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

JSON資料

設定http request

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

http in設

設定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節點放在同一個輸出視窗當中

group

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

設定group

輸出按鍵

序號

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

{{msg.payload.Seq}}
設定序號
統計日期

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

{{msg.payload.DateListed}}
設定統計日期
族別

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

{{msg.payload.people}}
設定族別
人口數

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

{{msg.payload.numbers}}
設定人口數

執行

連接所有節點

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

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

有兩種方式可以開啟,你可以選擇在網址欄輸入127.0.0.1:1880/ui,或者是再側邊欄位選擇dashboard後按小箭頭進入

進入UI介面
調整layout

如果想調整輸出格式或者是按鍵位置可以點選輸出節點進行配置

輸出layout調整

若是輸入節點可以點選右側欄位找到dashboard後,藉由滑鼠拖曳來調整按鈕配置

輸入layout調整
測試

測試流程是這樣的:

  1. 輸入序號
  2. 按下enter
  3. 按下獲取資料
  4. 清除資料
  5. 重複動作…

經過測試成功! 如果你也配置正確應該也會得到相同效果

bonus

這筆資料的Seq範圍是0~153,如果怕超出範圍的話,也可以選擇使用numeric節點(輸出為整數),進入設定選單可以設定輸入輸出的上下限範圍,這部分就留給大家去玩吧

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

%d 位部落客按了讚: