专栏首页数据库基于关系型数据库的App Inventor网络应用(3)

基于关系型数据库的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窗口是我们须臾离不开的“天窗”!

本文来自企鹅号 - 老巫婆的程序世界媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 数据结构 数组和广义表以及树的基本概念

    2-1 设有一个10阶的对称矩阵A,采用压缩存储方式,以行序为主存储,a11为第一元素,其存储地址为1,每个元素占一个地址空间,则a85的地址为 (2分) 1...

    Kindear
  • 自制前端脚手架

    前言 新建项目是很繁琐的一项工作, 要考虑项目目录结构,基础库的配置等等。 前段时间因为需求使用了几款前端脚手架,包括yeoman、imweb-cli, 他们...

    IMWeb前端团队
  • 归并排序详解 和逆序数计算

    归并排序(MERGE-SORT)是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(Divide and Conquer)的一个非常典型的应用。将已有序...

    Kindear
  • PTA 二叉树求深度和叶子数(20 分)

    二叉树求深度和叶子数(20 分) 编写函数计算二叉树的深度以及叶子节点数。二叉树采用二叉链表存储结构 函数接口定义: int GetDepthOfBiTree ...

    Kindear
  • Eclipse连接到My sql数据库之前操作

    Eclipse连接到My sql数据库之前操作 1:首先是安装My sql数据库(为了减少你的麻烦,按照下面的连接,下载即可)百度云链接:http://pan....

    别先生
  • 【Chromium中文文档】Chrome/Chromium沙箱 - 安全架构设计

    安全是Chromium最重要的目标之一。安全的关键在于理解下面这点:在我们完整地理解了系统在所有可能的输入组合下表现出的行为之后,我们才能够真的保证系统安全。对...

    梦里茶
  • PTA 7-1 有序链表的插入(20 分)

    已知一个递增有序链表L(带头结点,元素为整数),编写程序将一个新整数插入到L中,并保持L的有序性。 其中单链表的类型定义参考如下: typedef int el...

    Kindear
  • 利用Django在前端展示TOP SQL信息

    开发环境 操作系统:CentOS 7.4 Python版本 :3.6 Django版本: 1.10.5 操作系统用户:oms 数据处理:pandas 通过上面我...

    企鹅号小编
  • 【Chromium中文文档】线程

    概览 Chromium是一个极其多线程的产品。我们努力让UI尽可能快速响应,这意味着任何阻塞I/O或者其他昂贵操作不能阻塞UI线程。我们的做法是在线程间传递消息...

    梦里茶
  • Object.observe简介

    Object.observe 是一个提供数据监视的API,在chrome中已经可以使用。是 ECMAScript 7 的一个提案规范,官方建议的是...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券