Control ESP32 from ANYWHERE in the World - Step-By-Step Tutorial
YouTube Viewers YouTube Viewers
11.2K subscribers
61,188 views
0

 Published On Premiered Sep 16, 2022

Learn how to control ESP32 GPIO pins in real-time with AWS API Gateway WebSockets. I will show you step-by-step how to create and build:
- PlatformIO project with ESP32 WebSocket Client (C/C++)
- Serverless Framework project utilizing AWS API Gateway WebSockets, AWS Lambda, and AWS DynamoDB to handle the communication between clients (TypeScript)
- Web Application to control ESP32 from the browser (ReactJS)

👍 Subscribe for more IoT and programming tutorials like this:    / @tomasztarnowski4434  

Link to the code:
ESP32 Project - https://github.com/ttarnowski/esp32-w...
WebSocket Server Code - https://github.com/ttarnowski/esp32-w...
ESP32 Control Panel (React) - https://github.com/ttarnowski/esp32-c...

Serverless, AWS, TypeScript v2 template project - https://github.com/ttarnowski/serverl...
React, TypeScript, TailwindCSS, Vite template project - https://github.com/ttarnowski/vite-re...

How to get started with Serverless Framework:
   • Getting started with AWS Lambda and S...  

How to connect ESP32 to WiFi:
   • Connect ESP32 to WiFi - Step-By-Step ...  

How to build Web Chat with Serverless Framework and AWS API Gateway Websockets:
   • How to Build a Realtime Web Chat and ...  

ESP32 Datasheet Specification: https://www.espressif.com/sites/defau...

NodeMCU 32S Development Board Specification:
https://circuits4you.com/2018/12/31/e...

Parts and components used in this video (affiliate links):
- NodeMCU-32S Development Board:
eBay UK - https://ebay.us/fpZEVO
eBay USA - https://ebay.us/7TqjQu
eBay DE - https://ebay.us/SUf9t1
AliExpress - https://s.click.aliexpress.com/e/_Dc9...
- USB Type-C to Micro USB cable (tested and working):
eBay UK - https://ebay.us/7z9AF6
eBay USA - https://ebay.us/cwrWGo
eBay DE - https://ebay.us/ixcU7P
AliExpress - https://s.click.aliexpress.com/e/_Dm6...
- LED Diode:
eBay UK - https://ebay.us/8y6xEz
eBay USA - https://ebay.us/38nwTv
eBay DE - https://ebay.us/UQNXy5
AliExpress - https://s.click.aliexpress.com/e/_DBE...
- Resistor equal to or greater than 75Ω:
eBay UK - https://ebay.us/a3nJTv
eBay USA - https://ebay.us/4fSgND
eBay DE - https://ebay.us/uael4z
AliExpress - https://s.click.aliexpress.com/e/_Ddu...
- Breadboard:
eBay UK - https://ebay.us/Mcsgpn
eBay USA - https://ebay.us/9Xr8uH
eBay DE - https://ebay.us/lQJ4XI
AliExpress - https://s.click.aliexpress.com/e/_Dlf...
- Wires:
eBay UK - https://ebay.us/jqCLLG
eBay USA - https://ebay.us/7p2Bjj
eBay DE - https://ebay.us/7MZ3Dc
AliExpress - https://s.click.aliexpress.com/e/_Dms...

Software used in the video:
Visual Studio Code IDE: https://code.visualstudio.com/
PlatformIO Extension: https://platformio.org/platformio-ide
Clang-Format Extensions (Code Formatter): https://marketplace.visualstudio.com/...

Social Media:
Twitter:   / t_tarnowski​  
Linkedin:   / tomasz-ta...​  
GitHub: https://github.com/ttarnowski​

Thank you for watching and see you soon!

00:00 Intro
00:11 What I'm going to build
00:53 Hardware presentation
01:10 ESP32 Project - Creating Project with PlatformIO
02:11 ESP32 Project - Using ESP32 WiFi Connect Template
03:49 ESP32 Project - Adding WebSocket Client to the Code
07:55 ESP32 Project - Listening to WebSocket Client Events
09:29 ESP32 Project - Handling WebSocket Events
13:49 ESP32 Project - How to Validate and Parse WebSocket Message Event
27:49 ESP32 Project - Handle Pin Mode Command
33:20 ESP32 Project - Handle Digital Read&Write Commands
36:14 ESP32 Project - Additional Error Handling
37:38 ESP32 Project - Acknowledgement Message
39:39 AWS WebSocket Server - Creating the Project
41:57 AWS WebSocket Server - Infrastructure Configuration
46:30 AWS WebSocket Server - Implementing WebSocket Handler with TypeScript
51:15 AWS WebSocket Server - Client Connect Implementation
53:36 AWS WebSocket Server - Client Disconnect Implementation
55:40 AWS WebSocket Server - Pass the Message Implementation
01:08:04 AWS WebSocket Server - Walk-through the code
01:11:13 AWS WebSocket Server - Deployment to AWS
01:11:37 ESP32 Project - Updating the Code with URL to WebSocket Server
01:12:28 ESP32 Project - Deploying the Code to ESP32
01:13:29 ReactJS Control Panel - Creating the Project
01:16:23 ReactJS Control Panel - Importing WebSocket Client Hook
01:18:09 ReactJS Control Panel - Building UI
01:23:16 ReactJS Control Panel - Behaviour Implementation
01:26:41 ReactJS Control Panel - Sending a Digital Write Message to the WebSocket Server
01:29:00 ReactJS Control Panel - Pin Mode and Digital Read Behaviour
01:41:11 Hardware - Wiring up the LED Diode
01:42:16 Testing the Project Locally
01:44:02 ReactJS Control Panel - Deployment to AWS S3
01:47:50 Testing Newly Deployed Website
01:48:35 The End

show more

Share/Embed