Over the last few lessons, we’ve collected a treasure trove of data. But it’s trapped in your serial monitor, doing absolutely no one any good. Today, we take our projects to the cloud. We’ll send our readings to the internet and visualize them using beautiful dashboards. Because if you can’t show off a colorful graph to your friends, what’s the point of engineering?

Why Use a Cloud Dashboard?

Instead of building a web server from scratch on your ESP32 or Arduino, using an IoT platform saves time and provides slick mobile and web interfaces out of the box. Here are the tools we’ll be looking at:

• Adafruit IO: Fantastic for beginners and pros alike. It offers straightforward REST and MQTT APIs and features a drag-and-drop web interface with gauges, line charts, and sliders.
• Blynk: Perfect for mobile-first projects. You build the UI directly on your smartphone, and link the app’s widgets to your hardware using virtual pins.
• MQTT Protocol: The lightweight messaging protocol that powers most of these platforms. It’s incredibly efficient, making it ideal for low-power IoT devices.

Code Example: Sending Data to Adafruit IO

Here is a basic snippet demonstrating how to publish a simulated temperature reading to an Adafruit IO feed using an ESP32 and the MQTT protocol.

#include <WiFi.h>
#include "Adafruit_MQTT.h"
#include "Adafruit_MQTT_Client.h"

// WiFi credentials
#define WLAN_SSID       "YOUR_SSID"
#define WLAN_PASS       "YOUR_PASSWORD"

// Adafruit IO setup
#define AIO_SERVER      "io.adafruit.com"
#define AIO_SERVERPORT  1883
#define AIO_USERNAME    "YOUR_AIO_USERNAME"
#define AIO_KEY         "YOUR_AIO_KEY"

WiFiClient client;
Adafruit_MQTT_Client mqtt(&client, AIO_SERVER, AIO_SERVERPORT, AIO_USERNAME, AIO_KEY);

// Define a feed called 'temperature'
Adafruit_MQTT_Publish temperature = Adafruit_MQTT_Publish(&mqtt, AIO_USERNAME "/feeds/temperature");

void setup() {
  Serial.begin(115200);
  WiFi.begin(WLAN_SSID, WLAN_PASS);
  
  Serial.print("Connecting to WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println(" Connected!");
}

void loop() {
  // Ensure MQTT connection is alive (reconnection code omitted for brevity)
  
  // Read your sensor (simulated here)
  float tempValue = 24.5;

  // Publish data to the cloud
  Serial.print(F("\nSending temperature val: "));
  Serial.print(tempValue);
  Serial.print("...");
  
  if (! temperature.publish(tempValue)) {
    Serial.println(F("Failed"));
  } else {
    Serial.println(F("OK!"));
  }

  // Wait 10 seconds before the next update to respect rate limits
  delay(10000); 
}

Once this code is running, your microcontroller will quietly stream data to the internet, and your Adafruit IO dashboard will light up with real-time graphs and dials! Next week, we’ll look at sending commands back from the dashboard to control physical hardware.

Hardware You’ll Need

To follow along with this lesson, you’ll need the following components:

• ESP32 Development Board