云家庭自动化系列：第3部分在Node-RED中创建Web客户端以从Web控制ESP32

欢迎使用简单学习AWS Cloud Home Automation ，从零到英雄系列。 在第三部分中， we are going to create a web-endpoint that will trigger remote execution in ESP32 by securely switching ON/OFF the ESP32 inbuilt led from a website hosted in Node-RED we are going to create a web-endpoint that will trigger remote execution in ESP32 by securely switching ON/OFF the ESP32 inbuilt led from a website hosted in 。 在开始之前，让我们做一个回顾，在第1部分中，我们将ESP32 MCU与AWS相连，并且能够将消息发布到IoT Core，在第2部分中，我们上传了另一个代码，该代码与Things Shadow交互以控制使用MQTT客户端内置的ESP32 。 The following series split into four parts (refer below) with very simple and clear instructions to provision a home automation system to control house appliances through the web. 一切都从头开始，您将不会遇到任何困难。 如有任何疑问， 请在LinkedIn上给我留言 。 随时轻松探索它们，跳到与您相关的主题。

1. 第一部分 -将设备（ESP32）连接到AWS云。
2. 第二部分 -使用设备影子服务（AWS IoT）来控制使用MQTT客户端内置的ESP32。
3. 第三部分   -创建一个托管在Node-RED中的安全Web客户端，以控制ESP32内置LED。
4. 第四部分 -真正的交易：创建一个自动化系统，以使用AWS和ESP32使您的灯泡变得智能。 [快来了]

Node-RED is a flow-based development tool for visual programming developed originally by IBM for wiring together hardware devices, APIs and online services as part of the Internet of Things. Why are we using Node-RED ? Because we can securely store the certificates and private key to interact with AWS MQTT broker and it's easy to build a web client application to communicate with AWS IoT Core. On the contrary, it would be tedious we have implemented these components on our own.

Prerequisites ：

1. 这是以下系列的延续。 因此，我们需要确保我们正确地遵循了所有步骤，并且能够在最后两部分中实现理想的输出。
2. 我们将重用第2部分中使用的Arduino代码。因此，插入ESP32，它将像超级按钮一样工作，不需要上传。
3. 本教程主要介绍了动手实践，AWS IoT的先验知识是一个优势。 单击此处以查看AWS官方IoT文档。
4. 我们需要一个免费的Tier AWS帐户或IBM Cloud来通过Web托管Node-RED应用程序。

Learning Objectives ：

1. 我们将创建一个托管在AWS或IBM云中的Web客户端应用程序，该应用程序订阅AWS MQTT代理。 因此，我们可以将交互发送到ESP32，以通过代理打开/关闭led。

So let's see something happen now .

首先，我们将在AWS或IBM Cloud中托管Node-RED 。 Click here to follow the steps for AWS或Click here to follow the step for IBM cloud (Follow Step 1 to Step 5 only )

需要记住的一些事情，如果您将Node-RED实例托管在AWS上 ，尽管它是一个免费的层实例，但在不使用它时将其关闭。 如果执行停止并启动，则计算机的公用IPv4公用IP将更改。 对于IBM Cloud ， Node-RED部署需要一定的投入，但是IBM Cloud不需要信用卡即可使用其Lite计划，与AWS相比，托管应用程序使用SSL，在闲置30天后删除了Lite计划服务，对于学习一些新的东西以保持好奇。

制作中：流程

登录到Node-RED后，在侧栏中我们可以看到操作符号，我们将使用它来制作整个工作流程，如下所示。 我们正在尝试创建两个HTTP端点（ON / OFF信号），以将请求发送到AWS MQTT以及从AWS MQTT发送到ESP32，反之亦然。

为了实现此流程，我们将使用预定义的流程并将其导入Node-RED。 单击此处下载flows.json（ 单击 另存为 ，并将其保存在本地计算机中）。 接下来，单击右上角的菜单按钮（三条平行的水平线），然后选择Import并选择jsons.flow文件。 之后，一个新的选项卡（Web客户端流程）将加载原理图。

现在，我们将进行一些小的更改，然后整个流程将启动并运行。 首先，我们将选择每个影子主题，并将{thingname}替换为我们之前给出的实际事物名称（例如ESP32），请参阅Part I - Connect your device (ESP32) to AWS cloud 。 双击 阴影话题块（检查与$ AWS启动），在主题中，我们需要作出这个改变，如下图所示，然后点击完成所有的影子主题（四个主题）。

现在，双击任何一个Shadow主题，我们将更改AWS_Broker的配置详细信息。 单击AWS_Broker旁边的“编辑”按钮✎，如下所示。 在连接下，将服务器地址更改为先前提供的AWS IoT端点地址，如果您不记得了，请单击此处转到AWS IoT主仪表板，确保将区域选择为N.弗吉尼亚州，转到设置 （第二个选项（在边栏）和“自定义”端点下，您将找到端点（Server_Address）。 之后，我们将更新证书和私钥，在“ TLS配置”旁边有一个“编辑”按钮✎单击以继续进行操作。

在这里，我们将上传在系列的第1部分中创建的证书和私钥，请参阅Part I - Connect your device (ESP32) to AWS cloud 。 在证书上载中， Thing Certificate和其余内容是不言自明的。 点击这里   复制或下载CA证书。 完成后，单击更新→更新→完成。 至此，我们已经完成了Node-RED的配置。 接下来，我们将进行测试。 Note: We don't need to repeat it for other Shadow Topics as the AWS-Broker configuration tied with all Shadow Topics, thus it is a one time change.

测试中

因此，在最终检查中，我们将在Internet上部署我们的工作流。 单击右上角的部署 。 部署后，您将能够看到阴影主题显示为已连接。 现在，使用USB电缆插入ESP32，等待一段时间以建立连接（在这里，我们使用的是与第2部分相同的Arduino代码）。 现在，我们将测试Web端点，点击您的Node-RED主URL，然后点击/ OFF ，AWS（例如http://52.90.186.136:1880/OFF ）和IBM Cloud（例如https://aws-iot.eu-gb.cf.appdomain.cloud/OFF ）。 它将加载一个网站，单击灯泡以打开/关闭内置的LED。 如果您已经走到现在，tadaa！ 你终于做到了。 Note: The following web endpoints (ON/OFF) is available on the internet and accessible from anywhere.

Congratulations on completing the 3rd part :) 。 在下一部分中，我们将实现最终目标，即创建一个自动化系统，以使您的灯泡使用AWS和ESP32变得智能。

From: https://hackernoon.com/cloud-home-automation-seriespart-3-create-web-client-in-node-red-to-control-esp32-from-web-4w1b3avj