For the seventh project, we are assigned to build web server with an ESP32. Unlike previous project where we managed to work together as a team, in this project we are separated by (geographical) distance due to the current COVID-19 pandemic. While I’m still here in Bandung, my teammates, Alya and Shofu had came back to their hometown in Medan (for Alya) and Pekanbaru (for Shofu).

But eight hours before her flight to Medan, Alya had sent me all the tools needed for upcoming projects, which are the ESP32 and breadboard (only). Yes. I just realized that we only own this two items. Despite our limited tools, we were able to finish the six previous projects thanks to all of our very kindly friends who lent us the other tools needed for each project…!!

So, before doing the seventh project, of course I have to order the other basic tools first, such as jumper wires (female to female, male to male, male to female), LED, resistor, and the other tools such as LCD, DHT11 and BMP180.

Thankfully, the process of online shopping is very easy and fast.

Having received all the tools needed for this project, I started to follow the instruction written in this page:

Preparation

Here’s a list of parts that I need to prepare :

  1. DOIT ESP32 DevKit v1
  2. Breadboard
  3. 2 LEDs
  4. 2 resistors (330 Ω)
  5. 3 jumper wires (male to female)

Following the schematic diagram above, I managed to arrange the circuit that looked like below pictures:

Note : Make sure that the resistor is connected with LED’s cathode

At first, I forgot to connect ESP32 GND with breadboard. The LEDs won’t turn on when I clicked the buttons in the web server. I was very confused whether the LEDs were broken/I arranged the circuit incorrectly. . .

It turned out that I realy skipped one of the most important wirings :))

Here’s the code that can be found within the page:

Then, I uploaded the program into ESP32, opened the Serial Monitor (Tools > Serial Monitor) at the baud rate of 115200, and pressed the ESP32 EN button. The Serial Monitor will displayed the information about IP address needed to access the ESP32 web server.

I copied the IP address, opened Firefox and pasted it.

Display on Serial Monitor

When I clicked the button to turn GPIO 26 ON, ESP32 would receive a request on the /26/on URL, turned on the LED attached to GPIO 26 and updated its state on the web page.

And when I clicked the button to turn GPIO 26 OFF, ESP32 would receive a request on the /26/off URL, turned off the LED attached to GPIO 26 and updated its state on the web page.

Display on Serial Monitor

The same things happened with GPIO27 button.

And here’s the video:

Sorry for the sad background song… (it’s an OST from Kdrama Crash Landing on You)

Thank you for reading, and see you on another blog! 😄

Information System and Technology Student at Institut Teknologi Bandung.