Arduino for Web Developers

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.

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.

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]( “Tools > Board > Boards Manager… > Search for “esp8266” and click install”)

2. Select the ESP8266 board from the list

![Tools > Board > Select “Generic ESP8266 Module”]( “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

#include "ESP8266WiFi.h">
#include "DHT.h"

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

DHT dht(D5, DHT11);
dht.begin();

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

const ssid = "YOUR_NETWORK_SSID";
const password = "YOUR_NETWORK_PASSWORD";

WiFi.begin(ssid, password);

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

WiFiServer server(80);
server.begin();

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

Serial.println(WiFi.localIP());

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

float hum = dht.readHumidity();
float temp = dht.readTemperature();

10. We wait for a client to connect to ESP8266

WiFiClient client = server.available();

if (client) {
    // serving the web page (Step 11)
   }

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

client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
// your actual web page that displays temperature and humidity
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<--! YOUR_WEBPAGE_HTML_HEADER_GOES_HERE -->");
client.println("<body><span>Temperature:  ");
client.println(celsiusTemp);
client.println("&deg;C</span>");
client.println("<span>Humidity:  ");
client.println(humidityTemp);
client.println("%</span>");
client.println("</body></html>");

⚠️ 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

Recommended Courses:

Mastering Arduino program (Guides to Arduino programming)

Arduino 101 - Intel Curie

Arduino Bootcamp : Learning Through Projects

Advanced Arduino Boards and Tools

Suggest:

Web Development Trends 2020

Build a Native Desktop App with Electron (YouTube Stats App)

What To Learn To Become a Python Backend Developer

40+ Online Tools & Resources For Web Developers & Designers

The BEST Blockchain/Web 3.0 Project Ideas - For Developers

State of the Union for Speed Tooling (Chrome Dev Summit 2018)