Arduino for Web Developers

A little I knew about electrical engineering or electrical circuits, only until I saw a web page programmed on the ESP8266 microchip. Ever since, a new realm was opened for me, the Arduino and open-source hardware realm. But for the sake of sticking to web development, I will not dive deep into it and focus only on the web aspect of it that caught my attention the most.

The ESP8266 is a microchip with WiFi and full TCP/IP capabilities. It’s manufactured by a company called Espressif from Shanghai. It’s not affiliated with the Arduino company which is itself a separate entity but the ESP8266 can be added to the Arduino microcontroller board to give it WiFi capability which it doesn’t have out of the box. Although the Arduino company have their own WiFi Shield, the ESP9266 is a cheaper alternative and it’s available as a separate development board module. It’s also more popular among hobbyists therefore it has more popularity and more support in the community.

Overview

In the following section I will be using the Arduino IDE to program a web server on the ESP8266 NodeMCU board. It won’t be a detailed tutorial and I encourage you to search for more introductory content online if you want to get deeper into the details. The sole purpose of this article is to encourage web developers to get to know the Arduino ecosystem and how they can benefit from it as web developers.

A 2nd generation ESP8266 NodeMCU development board

So I mentioned programming a web server so far but what kind of web page am I going to serve on it? Well, it’s a Temperature and Humidity monitoring web page with the help of the DHT11, a basic, ultra low-cost digital temperature and humidity sensor. The web page can be accessed by any device that has a browser and sits on the local network.

The DHT11 sensor attached to the ESP8266

Getting Started

1. First in the Arduino IDE we need to install the ESP8266 board library

Tools > Board > Boards Manager… > Search for “esp8266” and click install

2. Select the ESP8266 board from the list

Tools > Board > Select “Generic ESP8266 Module”

3. Install the DHT11 sensor library. It feels like npm packages doesn’t it? 😊

Sketch > Include Library > Manage Libraries… > Search for “dht11” and click install

4. We include the ESP8266 and DHT11 dependencies at the top of the arduino sketch

5. This is how we initialize the sensor and set its type and pin number

6. This is how we set our network credentials and connect via WiFi

7. This is how we initialize the web server and run it on port 80

8. This is how we display the ESP8266’s local IP address in the serial monitor

9. We read the sensor data and store it in variables declared of type float

10. We wait for a client to connect to ESP8266

11. Creating the web page and serving it to the client

⚠️ At line 8, we inject our web page’s html header tags and include all assets inline. I found this tool that can be very helpful!

12. We compile and upload the code

Sketch > Verify/Compile > Upload ✔️

For the complete code here you go!

The Result

If the code compiled and was successfully uploaded, the ESP8266 should now be connected to the local network and has its own IP address (Step 8)

Displaying humidity and temperature on the web page 🌡️

And just to make it more interesting I turned that web page into a Google Chrome extension that can be embedded on my desktop:

Created using Applicationize

The End

I hope you enjoyed reading,But more importantly I hope I got you interested in exploring the Arduino world. Please follow and share for me tech stuff 🤖💖