Node-RED学习心得(实战篇1)

架构图

安装节点

再进行操作前我们需要先安装第三方节点库，点右侧选单栏内的节点管理选项

分别安装图中的两个节点库

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)