#7 — The ESP32 Web Server using HTTP and WiFi Communication
Jumping to the interwebs in 3… 2…
Nah, that isn’t really the internet. Just a neat excuse to post this picture—it reminds me of my all-time favourite film The Matrix Trilogy (speaking of which, I should re-watch them all though… if I have time lol). But we’re not going to create something out of this world like those sentient, intelligent computers do (Hugo Weaving plays his role really fantastic, by the way). We’re gonna create something very close to our daily lives as… um, whatever you are now :)
P.S. Before we begin, I know that these are trying times and the changes the world faces right now sadden me greatly. But we must all still have hope that like every hardship, this too shall end. I hope you and your loved ones are safe wherever you are!
Web Server
One of the most interesting features in the ESP32 is that it has its own WiFi module which we can use to communicate between ESP32 boards using the HTTP communication protocol. Referring to the tutorial given by randomnerdtutorial.com, I’ll try to create a standalone web server that is accessible via a web browser on a device connected in the same local network. Through the web server, I’ll be able to control two LEDs, either turning it on or off.
1. The ingredients and the wiring
I’ll be using my laptop, a 38 pins ESP32 board, a few male-to-male jumper cables, a MicroUSB to USB cable, a breadboard, two red LEDs, and two 330 ohm resistors. And of course, there must be an active WiFi connection that my laptop and the ESP32 board can connect to.
Wire them all so that the first LED is connected to GPIO 26 and the second LED is connected to GPIO 27. Connect each of them to a resistor before grounding them in the ground holes. It’ll roughly look like this.
Don’t forget to double-check your wirings before connecting the ESP32 to the laptop!
2. Testing the code
I went and copied the code from the website. I changed the value of the ssid and the password constants to my dormitory’s WiFi SSID and password.
Then I uploaded the code to the ESP32 and opened the serial monitor at baud rate 115200. After pressing the enable button on the ESP32, the serial monitor will show the IP address of the newly created web server.
I copied and pasted the IP address on the web browser and it’ll open a simple website with a large “ESP32 Server” title on top and two identical buttons that told me that both the GPIO 26 and the GPIO 27 state are off — meaning both LEDs are off. Look at this video of what happens when I pressed the buttons.
3. Afterword
Regarding the current situation, I and my partner, Kevin Cahyadi Giri, had some trouble working on this project because we had to do it from home (or our own dorms, to be precise) whereas we usually work on them together in the campus. But we managed to do it via video calling each other. Put it plainly, it’s just not the same. Projects like this are meant to be worked on together. But with all the limitations, we still managed to be an effective team partner and that is what matters.
Spoiler: I’ll try to create a BMP180 weather station in my next project. And this time, lots of coding will be involved ;)
