Arduino for Web Developers

Arduino for Web Developers

<strong>A little I knew about electrical engineering or electrical circuits, only until I saw a web page programmed on the ESP8266 microchip.</strong>

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.

Getting Started

  1. First in the Arduino IDE we need to install the ESP8266 board library
  2. Tools > Board > Boards Manager… > Search for “esp8266” and click install“Tools > Board > Boards Manager… > Search for “esp8266” and click install”)
  1. Select the ESP8266 board from the list

Tools > Board > Select “Generic ESP8266 Module” “Tools > Board > Select “Generic ESP8266 Module””)

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

  1. We include the ESP8266 and DHT11 dependencies at the top of the arduino sketch
#include "ESP8266WiFi.h">
#include "DHT.h"
  1. This is how we initialize the sensor and set its type and pin number
DHT dht(D5, DHT11);
dht.begin();
  1. 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);
  1. This is how we initialize the web server and run it on port 80
WiFiServer server(80);
server.begin();
  1. This is how we display the ESP8266’s local IP address in the serial monitor
Serial.println(WiFi.localIP());
  1. We read the sensor data and store it in variables declared of type float
float hum = dht.readHumidity();
float temp = dht.readTemperature();
  1. We wait for a client to connect to ESP8266
WiFiClient client = server.available();

if (client) {
    // serving the web page (Step 11)
   }
  1. 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!

  1. We compile and upload the code

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)

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

Recommended Courses:

Mastering Arduino program (Guides to Arduino programming)

Arduino 101 - Intel Curie

Arduino Bootcamp : Learning Through Projects

Advanced Arduino Boards and Tools

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

DIY Sleep Apnea Screening with Arduino Pro Mini

I recently asked my doctor about testing for sleep apnea. There were a few reasons I suspected I might have sleep apnea: I’d sometimes wake up with shortness of breath, morning tiredness, occasional snoring, and had a family history of it. He...

Android of Things Arduino

The Android of Things platform has some big advantages compared to Arduino or Raspbian. We Android developers can use the same tools we use for building applications for our projects, including all our favorite libraries, Google Play Services, and of course Kotlin.

Get Started with Machine Learning on Arduino

Get Started with Machine Learning on Arduino .Arduino is on a mission to make Machine Learning simple enough for anyone to use. We’ve been working with the TensorFlow Lite team over the past few months and are excited to show you what we’ve been up to together: