九、使用 Node-RED 创建一个 ToDo 应用

在本章中，我们将在 Node-RED 中创建一个简单的 ToDo 应用。 这篇文章简单明了，是关于在 Node-RED 中创建应用(流)的很好的教程。 我们将使用在前一章中解释的项目特性，因此本章也将作为对该功能的回顾。

让我们从以下四个主题开始:

  • 为什么你应该在 web 应用中使用 Node-RED

  • 创建一个数据库

  • 如何连接到数据库

  • 运行应用

在本章结束时，您将掌握如何在 Node-RED 上使用数据库制作一个简单的 web 应用。

技术要求

要读完本章，你需要具备以下条件:

为什么你应该在 web 应用中使用 Node-RED

到目前为止，本书已经解释了 Node-RED 对于物联网(物联网)是一个易于使用的工具。 在物联网领域，Node-RED 作为解决方案使用的情况很多。

然而，最近，Node-RED 已被公认为创建 web 应用和物联网的工具。

我认为其中一个原因是无代码和低代码的思想在世界范围内广泛传播。 如今，了解基于流的编程工具和可视化编程工具的人越来越多，并且它们正在各个领域中得到应用。

Node-RED 是用 Node.js 制作的，用于 web 应用是很自然的。

我们在前一章中学习的项目功能，与 Git/GitHub 合作，也可能是 web 应用开发文化的一部分。

在本章中，我们将创建一个 ToDo 应用，它非常适合作为一个开发教程。

要创建的应用的总体情况如下:

Figure 9.1 – An overview of the application we'll create

图 9.1 -我们将创建的应用的概述

图 9.1 概述了应用的概述。 应用将从客户端 PC 浏览器访问。 该应用的用户界面采用 Node.js 框架，TodoMVC，Todo-Backend。 数据处理编程构建在 Node-RED 上，方法是将 CouchDB 连接起来作为该数据的存储。

在这个应用中，用户界面和后端应用不是在 Node-RED 上构建的。

应用是在本地主机上作为 Node.js 应用直接实现的。 我们将在后面的步骤中讨论这个问题，在访问 Node-RED 运行的 localhost 端口时，将它设置为重定向到 localhost Node.js 应用。

在开始实践示例之前，我们应该了解这个应用使用的两个框架。 在本教程中，我们将使用 Node-RED 创建 ToDo 应用。 应用是通过这两个 Node.js 框架实现的:

Figure 9.2 – TodoMVC

Figure 9.2 – TodoMVC

Figure 9.3 – Todo-Backend

现在仔细看

正如你从中所看到的，通过链接 web 应用框架可以创建 Node-RED 流，Node-RED 与用 Node.js 实现的 web 应用以及围绕它的框架工作得非常好。 本实践教程将帮助您理解为何 Node-RED 在无代码/低代码模式的 web 应用开发中如此流行。

接下来，我们将进入实际操作步骤。

创建数据库

我们在前一节介绍了应用的总体情况，但更具体地说，该应用使用 CouchDB 作为数据库。 在本教程中，我们将创建一个在本地主机上运行 Node-RED 的应用。 因此，您还需要在自己的本地机器上安装 CouchDB。

让我们按照以下步骤安装它:

  1. Access the CouchDB website at https://couchdb.apache.org/ and then click the DOWNLOAD button:

Figure 9.4 – Click the DOWNLOAD button 

图 9.4 -单击 DOWNLOAD 按钮

  1. Select a file depending on the system running on local machine:

Figure 9.5 – Select file 

图 9.5 -选择文件

  1. Expand the ZIP file you downloaded and run the application file to start CouchDB once the file has finished downloading:

Figure 9.6 – Start CouchDB 

图 9.6 -启动 CouchDB

  1. Running the CouchDB application file launches a browser and opens the CouchDB management console. If it doesn’t open automatically, you can also open it manually from the application menu:

Figure 9.7 – Open the CouchDB admin console 

图 9.7 -打开 CouchDB 管理控制台

  1. In the CouchDB management console, create a new database. Create it with the name todos. No partition is needed. Finally, click the Create button to complete:

Figure 9.8 – Create a new database named "todos" 

图 9.8 -创建名为“todos”的新数据库

现在，您可以在 CouchDB 管理控制台上看到名为**todos**的数据库:

Figure 9.9 – Check the database you created 

图 9.9 -检查您创建的数据库

  1. Create an admin user to access this database from your application. To do this, access User Management from the side menu of the CouchDB Management Console, select the Create Server Admin tab, and set the user account and password.

    其中，admin设置为用户名，adminpass设置为密码:

Figure 9.10 – Create a server admin user account

图 9.10 -创建一个服务器管理用户帐户

这样就完成了与 CouchDB 相关的所有设置。 接下来，让我们继续设置我们的 Node-RED 端。

如何连接数据库

现在数据库已经实际创建好了，我们将转向实践教程，在这里我们将从 GitHub 克隆 Node-RED 流，并从 Node-RED 流实现到该数据库的连接。 使用您在前一章学到的项目特性连接到您的 GitHub 存储库，加载准备好的流定义文件，并在本地环境中的 Node-RED 上实现它。 因为您已经在前一章中完成了这一点，所以这次没有必要创建一个新的流。

配置 Node-RED

您需要做的第一件事是更改 Node-RED 流编辑器的本地主机路径(URL)。 目前,您可以访问流编辑器在localhost: 1880,但是为了更改路径(URL)的 web 应用创建的这个实践教程localhost: 1880,我们需要改变流编辑器的路径localhost: 1880 / admin。

这是因为您必须移动 Node-RED 流编辑器的根路径，才能访问运行在本地主机上相同端口上的 Node.js ToDo 应用。

要配置 Node-RED，请遵循以下步骤:

  1. 打开设置文件(~/.node-red/settings.js)。

  2. Find the httpAdminRoot setting in the settings.js file you opened.

这将更改您访问 Node-RED 流编辑器的路径。 默认情况下，它使用根路径 /，然而，我们希望在我们的应用中使用它，所以我们可以使用这个设置来移动编辑器。 默认情况下，它被注释掉了，所以通过删除该行开头的 // 来取消注释:

Figure 9.11 – Uncomment httpAdminRoot to enable the flow editor path 

图 9.11 -取消 httpAdminRoot 注释以启用流编辑器路径

  1. 您现在已经将流编辑器移动到 /admin。 在本地机器上重新启动 Node-RED 并访问http://localhost:1880/admin URL 来运行 Node-RED 流编辑器。

接下来，让我们克隆这个项目。

克隆 Node-RED 项目

本实用教程提供了一个 Node-RED 项目的示例供您使用。 在将其克隆到本地 Node-RED 实例之前，您应该首先 fork 该项目，以便使用自己的副本。

fork 之后，需要将项目克隆到 Node-RED 实例中。

要克隆你的项目，遵循以下步骤:

  1. 在https://github.com/taijihagino/node-red-todo-app打开示例项目。

  2. 单击fork按钮来创建您自己的存储库副本。

  3. 复制您派生的存储库的 URL。

  4. 通过**http://127.0.0.1:1880/admin/**访问 Node-RED 编辑器。

  5. Click the Clone Repository button in the Projects Welcome screen. If you’ve already closed that screen, you can reopen it with Projects | New from the main menu:

Figure 9.12 – Click New under the Projects menu to clone the repo 

图 9.12 -在 Projects 菜单下点击 New 来克隆 repo

  1. 在**项目（Projects）**界面中，填写你的仓库地址、用户名和密码。这些信息将在提交项目修改时使用。如果你的本地 Git 客户端已完成配置，系统会自动读取这些值。**凭证加密密钥（Credentials encryption key）**一栏可以留空。

Figure 9.13 – Provide your GitHub repository information 

图 9.13 -提供你的 GitHub 存储库信息

  1. 这会将代码仓库克隆到一个新的本地项目中并开始运行。在工作区里，你可以看到实现应用 REST API 各个模块的流程。

你会在所有 Cloudant 节点上看到一些错误提示，但这些错误的原因来自连接配置。这些配置将在后续步骤中完成，因此目前这不是问题：

Figure 9.14 – The flow overview you cloned 

图 9.14 -你克隆的流程概览

  1. 该项目还包含一些需要由运行时提供服务的静态资源。为此，你需要在配置文件中修改访问此 Web 应用程序的方式。

首先，必须在本地文件系统中定位新克隆的项目。 它将在**/projects/中。 在该文件夹中，您将发现一个名为public**的文件夹。 它包含了这个 ToDo 应用的项目的静态资源，例如如下所示:

/Users/taiji/.node-red/projects/node-red-todo-app

下面的图片就是一个例子。 当检查自己的文件路径时，请使用它作为参考:

Figure 9.15 – The ToDo application project folder 

图 9.15 - ToDo 应用项目文件夹

  1. 编辑你的配置文件（~/.node-red/settings.js），并在文件中找到 httpStatic 配置项。删除该行开头的 // 注释符以取消注释，然后将其值设置为 public 文件夹的绝对路径。下图中的路径仅为示例，请替换为你本地的实际路径：

Figure 9.16 – Uncomment httpStatic and set your application project path 

图 9.16 -取消 httpStatic 注释并设置应用项目路径

  1. 重启 Node-RED。

通过重启 Node-RED，更改的settings.js内容将被重新加载并应用。

接下来，让我们配置 Node-RED 和 CouchDB 连接。

配置 Node-RED 和 CouchDB 连接

正如所知，我们正在使用云节点连接到 CouchDB，对吗?

Cloudant 是一个基于 Apache CouchDB 的 JSON 数据库。 Cloudant 具有 CouchDB 风格的复制和同步功能，因此您可以使用 node - red 提供的云节点连接到 CouchDB。

如前所述，node - red 上的云节点出现错误。 这是因为从 GitHub 克隆到本地系统上 CouchDB 的连接信息没有正确设置。

在这里，我们将更正 node - red 上的云节点的设置。

现在按以下步骤执行设置:

  1. 双击任意一个 cloudant 节点以打开设置界面。只要在其中一个 cloudant 节点上完成配置，同一流程中所有 cloudant 节点的设置都会同步更新，因此你选择哪个节点都无所谓：

Figure 9.17 – Open the settings screen with a double-click on any cloudant node 

图 9.17 -双击任意一个云节点打开设置界面

  1. 在 cloudant 节点的设置界面中，点击 Server 右侧的pencil mark按钮，打开 CouchDB 连接信息设置界面。

Figure 9.18 – Click the pencil mark button 

图 9.18 -点击铅笔标记按钮

  1. 当连接信息设置屏幕 CouchDB 打开,去主机和设置为 http://localhost: 5984(如果安装了 CouchDB 在一个不同的港口,适当的取代它)和设置用户名的 CouchDB 服务器管理员用户组。 Password输入服务器的 admin 密码。

  2. After entering all of this, click the Update button on the upper right to return to the previous screen:

Figure 9.19 – Set your CouchDB URL and server admin user/password 

图 9.19 -设置 CouchDB URL 和服务器管理用户/密码

  1. 单击Done按钮并返回到 Node-RED 流编辑器的工作空间。 您将看到一个绿色方块旁边的所有云节点上的连接消息:

Figure 9.20 – Check that all of the cloudant nodes are error-free

图 9.20 -检查所有的云节点都没有错误

很好，您已经成功地配置了在 Node-RED 中启动 ToDo 应用的设置。 接下来，让我们运行这个 ToDo 应用。

运行应用

如果一切正常，您应该能够在浏览器中打开http://localhost:1880并看到应用。

现在，让我们通过以下步骤来确认 ToDo 应用是否工作:

  1. Access http://localhost:1880 to open your ToDo application.

如果您在打开localhost:1880时得到 Node-RED 流编辑器，则设置httpAdminRoot未启用，因此请再次检查您的settings.js文件。

当你访问这个 URL 时，应该显示以下屏幕:

Figure 9.21 – Open your ToDo application 

图 9.21 -打开 ToDo 应用

  1. 本次测试使用任意待办事项（ToDo）均可，因此你可以输入任意文字作为示例任务。这里我输入的是 Report my tasks：

Figure 9.22 – Enter a sample ToDo item 

图 9.22 -输入一个 ToDo 项目样本

  1. 如果你在文本框中输入内容时按下 Enter 键，该内容将会被保存为一条待办事项（ToDo）。在下面的截图中可以看到，它已经成功添加到应用里了。

Figure 9.23 – The ToDo item you entered has been registered 

图 9.23 -你输入的 ToDo 条目已经注册

让我们检查屏幕上显示为已注册的 ToDo 项是否已在数据库中注册。

  1. 打开 CouchDB 管理控制台。

如果忘记如何打开它，可以使用 CouchDB 应用菜单中的open Admin Console选项来打开它。 如果重新打开管理控制台，或者时间已过，可能会要求您登录。 在这种情况下，使用您设置的服务器管理用户名和密码登录。

  1. 在侧边菜单中选择 Database（数据库）选项，然后点击 todos。你将会看到在待办事项应用中已注册的记录。点击该记录可查看更多详情：

Figure 9.24 – Check the record on your todos database 

图 9.24 -检查 todos 数据库中的记录

  1. 您将看到所选记录的详细信息。 数据是您通过 ToDo 应用注册的确切项目，即Report my tasks:

Figure 9.25 – Check the result

图 9.25 -检查结果

恭喜你! 此完成了从 GitHub 克隆 ToDo 应用并在 Node-RED 中实现它的实践教程。

本教程的重点是使用 Node-RED 的项目功能从 GitHub 存储库克隆和执行应用项目。

这个动手教程帮助我们了解到，在使用 Node-RED 制作的 web 应用中，我们不一定要实现用户界面和服务器端业务逻辑。 我们看到了 Node-RED 的一个特性是，我们构建的 web 应用的用户界面和服务器端业务逻辑位于 Node-RED 之外，而只有数据处理功能(如访问数据库)是由 Node-RED 内部完成的。

我们使用的 GitHub 存储库包含两个东西，即处理数据的 Node-RED 流和运行在 Node-RED 之外的 ToDo 应用。 这里的要点是使用 Node-RED 的项目功能从 GitHub 存储库克隆和执行应用项目。

小结

在本章中，以实践教程的形式，我们体验了如何使用项目特性在 Node-RED 上实际运行一个 web 应用。 当然，这只是在 node - red 上创建 web 应用(包括 UI、使用模板节点等等)的一种方法。 然而，记住这个模式对您将来的开发任务肯定是有用的。

在下一章中，我们将看看一个实际操作的场景，我们将使用 Node-RED 从边缘设备发送传感器数据到服务器端(云)。