---
creator: Zach
tags: 物聯網
created: 2021-10-27
---
# Node-RED學習心得(實戰篇)
## 架構圖
<center>核心知識點</center>
</br>

## 安裝節點
再進行操作前我們需要先安裝第三方節點庫，點右側選單欄內的節點管理選項
<center>Node-RED選單</center>
</br>

分別安裝圖中的兩個節點庫
- dashboard-evi
- node-red-contrib-aedes

這兩個分別是圖表與操作介面、MQTT相關的節點庫
<center>安裝節點</center>
</br>

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

### 執行結果
<center>原住民人口普查</center>
</br>

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

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

### 操作流程
#### 下載公開資料
首先我們需要從公開的資料平台拉取資料，[可以按這裡](https://data.gov.tw/)選擇政府的公開資料，然後選擇資料集頁面，再側邊欄位勾選JSON檔案格式，篩選出可用資料
<center>公開平台頁面</center>
</br>

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

點擊檢視資料，複製網站提供的URL
<center>複製URL</center>
</br>

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

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

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

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

return msg;

全域變數的變化可以再右側欄位的上下文(context)中看到
<center>全域變數消息</center>
</br>

##### 處理函數節點
以下程式碼負責按照指定的序號輸入讀取相應的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**
負責將輸入整數值
- 輸入序號

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

<center>輸入節點</center>
</br>

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

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

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

{{msg.payload.Seq}}

<center>設定序號</center>

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

{{msg.payload.DateListed}}

<center>設定統計日期</center>

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

{{msg.payload.people}}

<center>設定族別</center>

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

{{msg.payload.numbers}}

<center>設定人口數</center>

#### 執行
##### 連接所有節點
按照以下流程把所有節點連接起來，其實流程非常簡單，主要就三條思路:
1. **輸入序號，使輸出符合我們的需求**
輸入序號(button) &rarr; 全域變數(function)

2. **觸發http request消息，然後把讀值餵給處理函數**
獲得資料(button) &rarr; 資料集(http request) &rarr; 序號\統計日期\族別\人口數(text)

3. **按下Clear鍵清除所有顯示資料**
Clear(button) &rarr; 清理資料結點(function) &rarr; 序號\統計日期\族別\人口數(text)

<center>流程</center>

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

##### 調整layout
如果想調整輸出格式或者是按鍵位置可以點選輸出節點進行配置
<center>輸出layout調整</center>
</br>

若是輸入節點可以點選右側欄位找到dashboard後，藉由滑鼠拖曳來調整按鈕配置
<center>輸入layout調整</center>
</br>

##### 測試
測試流程是這樣的:
1. 輸入序號
2. 按下enter
3. 按下獲取資料
4. 清除資料
5. 重複動作...

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

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