Arduino in die Cloud

Von Arduino in die Cloud: IoT-Projekt mit ESP32, MQTT & React Dashboard

In dieser Anleitung bauen wir ein vollständiges IoT-System: Ein ESP32-Mikrocontroller liest Sensordaten aus und sendet sie per MQTT an einen Broker. Anschließend werden die Daten live in einem React-Dashboard angezeigt.

1. Voraussetzungen

• ESP32 Entwicklungsboard
• DHT22 oder BME280 Sensor
• MQTT-Broker (z. B. Mosquitto lokal oder HiveMQ Cloud)
• Node.js (Backend optional)
• React-Anwendung zur Visualisierung

2. ESP32 mit Sensor verbinden

Verbinde den Sensor mit dem ESP32, z. B. DHT22 Datenpin an GPIO 4. Lade die folgenden Bibliotheken hoch:

#include <WiFi.h>
#include <PubSubClient.h>
#include <DHT.h>

#define DHTPIN 4
#define DHTTYPE DHT22

const char* ssid = "DEIN_WIFI";
const char* pass = "DEIN_PASS";
const char* mqttServer = "broker.hivemq.com";
int mqttPort = 1883;
const char* mqttTopic = "esp32/sensor";

DHT dht(DHTPIN, DHTTYPE);
WiFiClient espClient;
PubSubClient client(espClient);

void setup() {
  Serial.begin(115200);
  dht.begin();
  WiFi.begin(ssid, pass);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  client.setServer(mqttServer, mqttPort);
}

void loop() {
  if (!client.connected()) {
    while (!client.connect("esp32Client")) {
      delay(500);
    }
  }
  float h = dht.readHumidity();
  float t = dht.readTemperature();
  if (!isnan(h) && !isnan(t)) {
    String payload = "{ \"temp\": " + String(t) + ", \"hum\": " + String(h) + " }";
    client.publish(mqttTopic, payload.c_str());
    Serial.println(payload);
  }
  client.loop();
  delay(5000);
}

3. MQTT-Broker einrichten

Falls du Mosquitto lokal nutzt:

sudo apt update
sudo apt install mosquitto mosquitto-clients
sudo systemctl enable mosquitto
mosquitto_sub -h localhost -t "esp32/sensor"

Alternativ kannst du HiveMQ Cloud verwenden.

4. React Dashboard erstellen

Erstelle ein neues React-Projekt und installiere den MQTT-Client:

npx create-react-app iot-dashboard
cd iot-dashboard
npm install mqtt

Beispielcode für das Dashboard:

// src/App.js
import { useState, useEffect } from 'react';
import mqtt from 'mqtt';

function App() {
  const [data, setData] = useState({ temp: 0, hum: 0 });

  useEffect(() => {
    const client = mqtt.connect('ws://test.mosquitto.org:8080');
    client.on('connect', () => {
      client.subscribe('esp32/sensor');
    });
    client.on('message', (topic, message) => {
      setData(JSON.parse(message.toString()));
    });
    return () => client.end();
  }, []);

  return (
    <div className="dashboard">
      <h2>ESP32 Sensor Dashboard</h2>
      <p><strong>Temperatur:</strong> {data.temp} °C</p>
      <p><strong>Luftfeuchtigkeit:</strong> {data.hum} %</p>
    </div>
  );
}

export default App;

5. (Optional) REST-API Backend

Falls du Daten speichern willst, kannst du ein kleines Express-Backend einrichten:

npm install express body-parser
// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
let readings = [];
app.post('/api/data', (req, res) => {
  readings.push(req.body);
  res.sendStatus(200);
});
app.get('/api/data', (req, res) => res.json(readings));
app.listen(3002, () => console.log('API läuft auf Port 3002'));

6. Tipps für Deployment & Skalierung

• Nutze WSS für sichere MQTT-Verbindungen
• Deploy React-Dashboard z. B. auf Vercel oder Netlify
• Füge Authentifizierung hinzu (JWT, OAuth)
• Nutze InfluxDB oder TimescaleDB für Langzeit-Speicherung

Fazit

Du hast ein vollständiges IoT-Projekt gebaut: Sensor mit ESP32 → MQTT-Broker → React-Dashboard (und optional Backend). Dieses Setup bildet die Grundlage für echte Anwendungen in Smart Home, Umweltüberwachung oder industriellen Lösungen.

Im nächsten Teil: OTA-Updates, mehrere Geräte, Benachrichtigungen und Visualisierungen mit Grafana.