基于关系型数据库的App Inventor网络应用（3）

第三节 初识Node-RED

开发环境简介

如图8所示，整个浏览器窗口被划分为四个部分：

(1) 顶部黑色通栏，左侧显示Node-RED的LOGO，右侧显著位置为部署按钮，部署按钮的右侧（三条横线）为系统菜单按钮。

(2) 黑色通栏下方划分为左中右三个区域：

a) 左侧为节点分组区：开发工具中的全部可用节点都在此处，并按类别分组存放，共有七个分组：输入、输出、功能、社交、存储、分析及高级。

b) 中间部分为工作区，可以从左侧选择任何一个节点，将其拖入到工作区。

c) 右侧为信息显示区，分为上下两部分。上部共有两个子窗口：信息窗口及debug(调试)窗口。在工作区中任意选中一个节点，信息窗口中将显示与该节点有关的详细信息；debug窗口用于显示程序的执行结果。信息显示区的下部为操作提示区，轮流显示各种便捷的操作方法。

Node-RED中的程序以页为单位存放，点击工作区右上角的“+”按钮可以添加新的程序页。工作区右下角有三个小按钮（-、o、+），用来缩放工作区视图的显示比例。

图8 Node-RED 开发工具的用户界面

2. 流程序的组成

在Node-RED中，程序是以流的方式实现的，如图8所示，在hello world程序页中包含了两个流。

流由节点及连线组成，节点是Node-RED中不可再分的最小功能单元，有的节点左右两端都有连接点（显示为圆角方形），如上图8中的change: 2 rules节点，这样的节点通常用来处理数据；有些节点只在左侧或右侧有连接点，仅在左侧有连接点的节点通常为输出型节点，如上图中右下角的msg.payload节点；而仅在右侧有连接点的节点通常为输入型节点，如上图中的hello节点。鼠标从任意一个节点（设为节点A）的右连接点出发，拖拽到另一个节点（设为节点B）的左连接点，都可以在这两个连接点之间添加一条连接线，这条线代表了信息的流动，方向从节点A指向节点B。一个完整的程序流，通常以输入型节点为起点，中间包含若干个数据处理型节点，并以输出型节点为终点。上图中的两个流都包含了3个节点，分别为输入、处理及输出节点。

3. Hello World

让我们编写一个小程序，来亲身体会一下流程序的魅力！

(1) 添加输入节点：从输入节点分组中拖出第一个节点inject，inject的意思是注射器，顾名思义，它是用来输入信息的，它的另一个重要作用是触发一个流程序的运行。

(2)编辑inject节点：双击inject节点，将打开节点编辑窗口，如图9所示，首先在“Topic”后面的输入框中输入一串文字，如“Hello World！”，然后点击完成按钮。

图9 注射器节点的编辑窗口

(3) 添加输出节点：从输出节点分组中拖出第一个节点debug，debug的意思是揪出程序中的错误，通常也指跟踪程序的执行过程，并查看程序的执行结果。

(4)编辑debug节点：双击debug节点，打开节点编辑窗口，将Output后面的payload改为topic，然后点击完成按钮，如图10所示。注意这里的“topic”是大小写敏感的，如果写成“Topic”，结果将有所不同。

图10 debug节点的编辑窗口

(5) 添加连线：将鼠标从inject节点的右侧拖拽到debug节点的左侧，在两个节点之间添加连接线。

(6) 部署程序：注意观察，此时部署按钮的颜色为红色。在完成上述步骤之后，要点击部署按钮，才能让程序生效，完成部署之后，部署按钮的颜色变为灰色。

(7) 测试：将debug窗口设为活动窗口，点击inject节点左侧的方形按钮，观察debug窗口中的变化。

图11 运行一个最简单的流程序——Hello World！

如图11所示，在debug窗口中，显示了一组信息，最后一行是程序的执行结果：输出了“Hello World！”。窗口中还包含了当前的日期时间信息及产生这一结果的节点信息。

以上我们完成了一个最简单的流程序，你会发现，与使用App Inventor开发前端程序不同，Node-RED编写的程序没有用户界面，这是编写后端程序的最大特点。为了便于跟踪调试程序，开发工具提供了debug窗口，因此，在接下来的任务中，debug窗口是我们须臾离不开的“天窗”！