Cloud Home Automation Series Part 3 : Create web-client in Node-RED to control ESP32 from Web

[Updated - 14 December, 2020] : Course updated, Now you can run the NodeRED Instance in any AWS Region, which uses secure HTTPS connection using self-signed Certificate (Generated during boot up) & set non-default Password & Username to login to NodeRED Admin Dashboard.]

Welcome to SIMPLE LEARNING AWS Cloud Home Automation, Zero to Hero Series. In the third part,

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

. Before starting, let's do a recap, in Part 1, we have connected the ESP32 MCU with AWS and able to publish Messages to IoT Core and in Part 2 we have uploaded another code which interacts with Things Shadow to control ESP32 inbuilt led using MQTT client.

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.

Everything covered from scratch you won't face any difficulty understanding. In case of any clarification, drop me a note on LinkedIn. Feel free to explore them with ease, skip to the one which is relevant to you.

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:

It's the continuation of the following series. Hence, we need to make sure we have followed all the steps correctly and able to achieve desirable output in the last two parts.
We are going to re-use the Arduino code used in Part 2. Hence, plug the ESP32 and it will work like a charm, no upload required.
This tutorial mostly covers hands-on, prior knowledge of AWS IoT is an advantage. Click here to check AWS Official IoT Documentation.
Either we need a free Tier AWS account or IBM Cloud account to host the Node-RED application on web.

Learning Objectives:

We will create a Web Client application hosted either in AWS or IBM cloud, which subscribes to AWS MQTT broker. Thus, we can send our interaction to ESP32 to turn ON/OFF the led via the broker.

So let's see something happen now.

At first, we will host the Node-RED in AWS. Click here

to follow the steps for AWS

Note: If you want to learn to Host Node-RED in IBM Cloud, Click here.

A few things to remember, if you have hosted your Node-RED instance on AWS, though it is a free tier instance, switch it off when you aren't using it. If you perform a stop and start, the public IPv4 Public IP of the machine will change. For IBM cloud, Node-RED deployment would need some dedication, but IBM cloud doesn't require Credit Card to avail its Lite plan, the hosted app uses SSL unlike AWS, Lite plan services deleted after 30 days of inactivity and it's always great to learn something new to stay curious 😎.

In the making: Flow

Once we login to Node-RED, in the sidebar we can see Action Symbol which we will use to make the entire workflow as shown below. We are trying to create two HTTP(s) endpoints (ON/OFF signal) which send the request to AWS MQTT and from AWS MQTT to ESP32 and vice-versa.

To achieve this flow, we will use a predefined flow and import it in the Node-RED. Click here to download the flows.json (Hit Save as and keep it on your local machine) . Next, click on the menu button (three parallel horizontal lines) in the top right corner and select Import and pick the flows.json file. After that, a new tab (Web-client Flow) will load the below schematic.

Now, we will make a few minor changes, after that the entire flow will be up and running. First, we will pick each shadow topic and replace {thingname} with the actual thing name we gave before (e.g. ESP32), refer to the Part I of the series. Double click the shadow topic block (check which start with $aws), under topic we need to make this change, for all the shadow topics (four topics) as shown below and click Done.

Now, double click any one Shadow topic and we will change the configuration details of the AWS_Broker. Click the Edit button ✎ beside the AWS_Broker as shown below. Under connection, change the Server Address with the AWS IoT Endpoint address you provided previously, if you don't remember, Click Here to go to AWS IoT Main Dashboard, make sure region selected as N. Virginia, go to Settings (Second last option in the Sidebar) & under Custom endpoint, you will find the Endpoint (Server_Address). After that, we will update the Certificates and Private key, beside TLS Configuration there is an Edit Button ✎ click that to proceed further.

Here, we will upload the certificates and private key which we have created in Part 1 of the series. In Certificate upload, the

Thing Certificate

and the rest are self-explanatory. Click here to copy or download the CA certificate. Once done, click Update → Update → Done. Thus, we have completed the Node-RED configuration. Next, we will do the testing.

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.

Testing

So in the final check, we will deploy our workflow on the internet. Click deploy on the Top Right corner. Once, deployed you be able to see that the shadow topics are shown connected. Now plug in the ESP32 with a USB cable wait for some time for connection establishment (Here we are using the same Arduino code we have uploaded in Part 2). Now we are going to test the web endpoints, hit your Node-RED primary URL followed by /OFF, AWS (e.g.

http://52.90.186.136:1880/OFF

) or IBM Cloud (e.g.

https://aws-iot.eu-gb.cf.appdomain.cloud/OFF

). It will load a website, click on the light bulb to turn ON/OFF the inbuilt LED. If you have come so far, tadaa! You did it finally 💪.

Note: The following web endpoints (ON/OFF) is available on the internet and accessible from anywhere.

Congratulations on completing the 3rd part :)

. In the next part, we will exercise our final objective to create an automation system to make your light bulb connected using AWS and ESP32.

Kindly Share & Comment only if you find it useful and help me on my mission to educate and familiarize people in the world of digitization 💪 #This is a Free tutorial and all my upcoming tutorials will be free and accessible from Public forums.# Appreciate if you drop me a note on

LinkedIn

 & share your opinion. Don't worry, I don't bite 👻 so don't shy away 🏃🏻‍♀️ 🏃🏻. Your feedback will help me to come up  with more awesome contents on the internet. Check my other tech stories & tutorials @

https://hackernoon.com/@gourav-das