Panduan Lengkap Membuat Dashboard IoT dengan ESP32 & MQTT”** 🚀
Panduan Lengkap Membuat Dashboard IoT dengan ESP32 & MQTT”** 🚀
---
# Panduan Lengkap Membuat Dashboard IoT dengan ESP32 & MQTT
Internet of Things (IoT) memungkinkan perangkat elektronik saling berkomunikasi dan mengirim data secara real-time. Dalam artikel ini kita akan membuat **dashboard sederhana** yang menampilkan data dari **ESP32** menggunakan protokol **MQTT**.
---
## Apa itu MQTT?
**MQTT (Message Queuing Telemetry Transport)** adalah protokol komunikasi ringan yang dirancang untuk perangkat IoT. Konsepnya sederhana:
* **Publisher**: perangkat yang mengirim data (ESP32).
* **Broker**: server yang menyalurkan data (contoh: Mosquitto, HiveMQ).
* **Subscriber**: aplikasi/dashboard yang menerima data.
---
## Alur Sistem
1. Sensor terhubung ke **ESP32**.
2. ESP32 mengirim data ke **MQTT Broker**.
3. Dashboard web membaca data dari broker dan menampilkannya.
---
## Alat & Software yang Dibutuhkan
* **ESP32 board** + sensor (misalnya DHT11/DHT22 untuk suhu & kelembaban).
* **Mosquitto Broker** (atau broker gratis seperti `broker.hivemq.com`).
* **Arduino IDE** untuk programming ESP32.
* **Node.js/React.js** untuk membuat dashboard web sederhana.
---
## Kode ESP32 untuk Publish Data
Upload kode berikut ke ESP32 menggunakan Arduino IDE:
```cpp
#include <WiFi.h>
#include <PubSubClient.h>
#include "DHT.h"
#define DHTPIN 4
#define DHTTYPE DHT11
const char* ssid = "NAMA_WIFI";
const char* password = "PASSWORD_WIFI";
const char* mqtt_server = "broker.hivemq.com";
WiFiClient espClient;
PubSubClient client(espClient);
DHT dht(DHTPIN, DHTTYPE);
void setup_wifi() {
delay(10);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("WiFi connected");
}
void reconnect() {
while (!client.connected()) {
if (client.connect("ESP32Client")) {
Serial.println("Connected to MQTT");
} else {
delay(5000);
}
}
}
void setup() {
Serial.begin(115200);
setup_wifi();
client.setServer(mqtt_server, 1883);
dht.begin();
}
void loop() {
if (!client.connected()) {
reconnect();
}
client.loop();
float h = dht.readHumidity();
float t = dht.readTemperature();
if (!isnan(h) && !isnan(t)) {
String payload = "{\"temperature\":" + String(t) + ",\"humidity\":" + String(h) + "}";
client.publish("enomco/iot/sensor", payload.c_str());
}
delay(2000);
}
```
---
## Membuat Dashboard Web (Node.js + React.js)
Gunakan **MQTT.js** untuk subscribe data dari broker. Contoh script sederhana:
```javascript
import mqtt from 'mqtt';
const client = mqtt.connect('wss://broker.hivemq.com:8884/mqtt');
client.on('connect', () => {
console.log('Connected to MQTT broker');
client.subscribe('enomco/iot/sensor');
});
client.on('message', (topic, message) => {
const data = JSON.parse(message.toString());
console.log("Temperature:", data.temperature, "Humidity:", data.humidity);
// tampilkan data ke dashboard (chart, tabel, dsb)
});
```
Kamu bisa menambahkan chart (misalnya dengan **Chart.js** atau **Recharts**) untuk visualisasi data suhu & kelembaban.
---
## Kesimpulan
Dengan ESP32, MQTT, dan dashboard web sederhana, kita bisa memantau data sensor secara real-time dari mana saja. Proyek ini bisa dikembangkan lebih lanjut dengan:
* Menyimpan data ke database (MongoDB/MySQL).
* Menambahkan autentikasi pada MQTT.
* Membuat UI lebih menarik untuk monitoring banyak sensor.
---
Comments
Post a Comment