ESP32 DHT11 Node-RED: Monitoring Suhu & Kelembapan via MQTT dengan Dashboard

ESP32 DHT11 Node-RED adalah proyek IoT klasik untuk belajar monitoring suhu dan kelembapan secara real-time: ESP32 membaca sensor DHT11, mengirim datanya lewat MQTT ke broker Mosquitto, lalu Node-RED menampilkannya di dashboard berisi gauge dan grafik. Tutorial ini membahas langkah demi langkah — wiring, kode ESP32, pembuatan flow, hingga dashboard — lengkap dengan flow Node-RED siap impor. Semua langkah sudah diuji dengan Node-RED terbaru dan Dashboard 2.0.

Baru mengenal MQTT? Baca dulu panduan protokol MQTT. Ingin contoh ESP32 yang juga menerima perintah (kontrol LED)? Lihat tutorial MQTT ESP32.

Daftar isi:

• Arsitektur sistem
• Langkah 1: Wiring DHT11 ke ESP32
• Langkah 3: Kode ESP32
• Langkah 4: Mosquitto dan Node-RED
• Langkah 5: Instal Dashboard 2.0
• Langkah 6: Membuat flow Node-RED
• Langkah 7: Membuka dashboard
• Troubleshooting
• FAQ

Arsitektur Sistem ESP32 DHT11 dan Node-RED

ESP32 berperan sebagai publisher yang mengirim nilai suhu dan kelembapan ke broker MQTT. Node-RED berperan sebagai subscriber yang menerima data tersebut dan menampilkannya di dashboard web.

Alat dan Bahan

• ESP32 DevKit dan kabel USB data.
• Sensor DHT11 (modul 3 pin). Jika memakai sensor 4 pin tanpa modul, tambahkan resistor pull-up 10 kΩ antara DATA dan 3,3 V.
• Breadboard dan kabel jumper.
• Komputer/laptop untuk Arduino IDE, broker Mosquitto, dan Node-RED, terhubung ke WiFi yang sama dengan ESP32.

Spesifikasi singkat DHT11: tegangan kerja 3,3–5 V, rentang suhu 0–50 °C (akurasi ±2 °C), rentang kelembapan 20–90 % (akurasi ±5 %), keluaran digital satu kabel. Untuk akurasi lebih baik, DHT22 bisa dipakai dengan kode yang sama (ubah DHTTYPE).

Langkah 1 – Wiring DHT11 ke ESP32

Versi lama tutorial ini memakai GPIO2. GPIO2 adalah strapping pin ESP32 (sekaligus LED bawaan di banyak board), sehingga sensor yang terpasang di pin tersebut bisa mengganggu proses upload. Gunakan GPIO4 atau pin GPIO umum lainnya.

Langkah 2 – Siapkan Arduino IDE dan Library

1. Di File → Preferences, isi Additional Boards Manager URLs dengan https://espressif.github.io/arduino-esp32/package_esp32_index.json, lalu instal board esp32 dari Boards Manager.
2. Di Library Manager, instal PubSubClient (Nick O’Leary), DHT sensor library (Adafruit), dan Adafruit Unified Sensor.
3. Pilih board ESP32 Dev Module dan port COM yang sesuai.

Langkah 3 – Kode ESP32: Kirim Data DHT11 ke Node-RED via MQTT

Ganti nama WiFi, password, dan MQTT_SERVER (IP komputer yang menjalankan Mosquitto), lalu upload.

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

// ====== KONFIGURASI (ganti sesuai jaringan Anda) ======
const char* WIFI_SSID     = "NAMA_WIFI";
const char* WIFI_PASSWORD = "PASSWORD_WIFI";
const char* MQTT_SERVER   = "192.168.1.5";   // IP komputer yang menjalankan Mosquitto
const int   MQTT_PORT     = 1883;

#define DHTPIN  4            // pin DATA DHT11
#define DHTTYPE DHT11

const char* TOPIC_SUHU = "esp32/dht/temperature";
const char* TOPIC_HUM  = "esp32/dht/humidity";
const unsigned long INTERVAL_KIRIM = 5000;   // kirim tiap 5 detik
// =====================================================

DHT dht(DHTPIN, DHTTYPE);
WiFiClient espClient;
PubSubClient mqtt(espClient);
String clientId;
unsigned long lastSend = 0, lastReconnect = 0;

void setupWiFi() {
  Serial.print("Menghubungkan ke WiFi");
  WiFi.mode(WIFI_STA);
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.print("\nWiFi terhubung, IP: ");
  Serial.println(WiFi.localIP());
}

void connectMQTT() {
  Serial.printf("Menghubungkan ke broker %s ... ", MQTT_SERVER);
  if (mqtt.connect(clientId.c_str())) {
    Serial.println("berhasil");
  } else {
    Serial.printf("gagal, state=%d (coba lagi 5 detik)\n", mqtt.state());
  }
}

void setup() {
  Serial.begin(115200);
  dht.begin();
  setupWiFi();

  String mac = WiFi.macAddress();          // client ID unik, contoh: esp32-dht-A1B2C3
  mac.replace(":", "");
  clientId = "esp32-dht-" + mac.substring(6);

  mqtt.setServer(MQTT_SERVER, MQTT_PORT);
}

void loop() {
  if (!mqtt.connected()) {
    if (lastReconnect == 0 || millis() - lastReconnect > 5000) {
      lastReconnect = millis();
      connectMQTT();
    }
    return;
  }
  mqtt.loop();

  if (millis() - lastSend >= INTERVAL_KIRIM) {
    lastSend = millis();
    float h = dht.readHumidity();
    float t = dht.readTemperature();
    if (isnan(h) || isnan(t)) {
      Serial.println("Gagal membaca sensor DHT11!");
      return;
    }
    char buf[16];
    snprintf(buf, sizeof(buf), "%.1f", t);
    mqtt.publish(TOPIC_SUHU, buf);
    Serial.printf("Suhu: %s °C", buf);

    snprintf(buf, sizeof(buf), "%.1f", h);
    mqtt.publish(TOPIC_HUM, buf);
    Serial.printf(" | Kelembapan: %s %%\n", buf);
  }
}

• Client ID unik dibuat dari MAC address, sehingga beberapa ESP32 bisa terhubung ke broker yang sama tanpa saling memutus koneksi.
• Reconnect tanpa blocking — jika broker terputus, ESP32 mencoba lagi tiap 5 detik tanpa menghentikan program.
• Data dikirim tiap 5 detik ke dua topik terpisah berupa angka, sehingga Node-RED bisa langsung menampilkannya tanpa pengolahan tambahan.

Buka Serial Monitor (115200 baud). Jika berhasil, akan tampil:

WiFi terhubung, IP: 192.168.1.50
Menghubungkan ke broker 192.168.1.5 ... berhasil
Suhu: 28.6 °C | Kelembapan: 73.3 %
Suhu: 29.1 °C | Kelembapan: 72.8 %

Langkah 4 – Siapkan Broker Mosquitto dan Node-RED

Instal Mosquitto dan Node-RED di komputer yang sama. Panduan bergambar ada di instalasi Node-RED dan Mosquitto di Windows dan instalasi di Raspberry Pi / Linux. Ringkasnya:

# Node-RED (butuh Node.js versi LTS)
npm install -g --unsafe-perm node-red
node-red
# lalu buka http://localhost:1880 di browser

Karena ESP32 terhubung dari perangkat lain, tambahkan baris berikut di mosquitto.conf, restart Mosquitto, dan izinkan port 1883 di firewall:

listener 1883
allow_anonymous true

Opsi allow_anonymous true hanya untuk belajar di jaringan lokal; untuk penggunaan nyata gunakan user/password (password_file).

Langkah 5 – Instal Node-RED Dashboard 2.0

1. Di Node-RED, buka menu ☰ → Manage palette → tab Install.
2. Cari @flowfuse/node-red-dashboard, lalu klik Install.
3. Setelah selesai, node seperti ui-gauge dan ui-chart muncul di palet kiri.

Paket lama node-red-dashboard (alamat /ui) yang dipakai di banyak tutorial sudah dinyatakan deprecated sejak Juni 2024 dan tidak lagi dikembangkan. Tutorial ini memakai penggantinya, Dashboard 2.0 (alamat /dashboard).

Langkah 6 – Membuat Flow Node-RED untuk Data DHT11 ESP32

1. Tambahkan dua node mqtt in. Buat konfigurasi broker baru: Server localhost, port 1883.
2. Node pertama: Topic esp32/dht/temperature, nama “Suhu”. Node kedua: Topic esp32/dht/humidity, nama “Kelembapan”. Output: auto-detect.
3. Tambahkan dua node ui-gauge: “Suhu” (satuan °C, 0–50) dan “Kelembapan” (satuan %, 0–100). Saat pertama kali, buat juga Group, Page, dan UI baru (cukup klik ikon pensil lalu Add).
4. Tambahkan satu node ui-chart (tipe Line) untuk grafik kedua data, dan satu node debug untuk memeriksa data.
5. Hubungkan kedua node mqtt in ke gauge masing-masing, ke chart, dan ke debug, lalu klik Deploy. Status di bawah node mqtt in harus connected.

Cara cepat: impor flow siap pakai

Salin JSON di bawah, lalu di Node-RED buka menu ☰ → Import, tempel, klik Import, dan Deploy. Pastikan Dashboard 2.0 sudah terinstal (Langkah 5).

[{"id":"tab_dht","type":"tab","label":"Monitoring DHT11","disabled":false,"info":""},{"id":"broker1","type":"mqtt-broker","name":"Mosquitto lokal","broker":"localhost","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"autoUnsubscribe":true},{"id":"uibase1","type":"ui-base","name":"Dashboard IoT","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default"},{"id":"uitheme1","type":"ui-theme","name":"Tema Default","colors":{"surface":"#12325c","primary":"#0f766e","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"uipage1","type":"ui-page","name":"Monitoring","ui":"uibase1","path":"/monitoring","icon":"home","layout":"grid","theme":"uitheme1","order":1,"className":"","visible":"true","disabled":"false"},{"id":"uigroup1","type":"ui-group","name":"Suhu & Kelembapan DHT11","page":"uipage1","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"in_temp","type":"mqtt in","z":"tab_dht","name":"Suhu","topic":"esp32/dht/temperature","qos":"0","datatype":"auto-detect","broker":"broker1","nl":false,"rap":true,"rh":0,"inputs":0,"x":130,"y":100,"wires":[["g_temp","c_chart","dbg"]]},{"id":"in_hum","type":"mqtt in","z":"tab_dht","name":"Kelembapan","topic":"esp32/dht/humidity","qos":"0","datatype":"auto-detect","broker":"broker1","nl":false,"rap":true,"rh":0,"inputs":0,"x":140,"y":200,"wires":[["g_hum","c_chart","dbg"]]},{"id":"g_temp","type":"ui-gauge","z":"tab_dht","name":"","group":"uigroup1","order":1,"width":3,"height":3,"gtype":"gauge-half","gstyle":"needle","title":"Suhu","units":"°C","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"30","color":"#ffc800"},{"from":"40","color":"#ea5353"}],"min":0,"max":50,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":380,"y":60,"wires":[]},{"id":"g_hum","type":"ui-gauge","z":"tab_dht","name":"","group":"uigroup1","order":2,"width":3,"height":3,"gtype":"gauge-half","gstyle":"needle","title":"Kelembapan","units":"%","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ffc800"},{"from":"40","color":"#5cd65c"},{"from":"70","color":"#2196f3"}],"min":0,"max":100,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":390,"y":240,"wires":[]},{"id":"c_chart","type":"ui-chart","z":"tab_dht","group":"uigroup1","name":"","label":"Grafik Suhu & Kelembapan","order":3,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff7f0e","#2ca02c","#d62728","#a347e1","#8c564b","#e377c2","#7f7f7f","#bcbd22"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":6,"className":"","interpolation":"linear","x":410,"y":150,"wires":[[]]},{"id":"dbg","type":"debug","z":"tab_dht","name":"Cek data","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","x":390,"y":300,"wires":[]}]

Langkah 7 – Membuka Dashboard Node-RED untuk Data ESP32 DHT11

Buka http://localhost:1880/dashboard (atau http://IP-komputer:1880/dashboard dari HP di jaringan yang sama). Gauge dan grafik akan diperbarui otomatis setiap ESP32 mengirim data.

Troubleshooting ESP32 DHT11 Node-RED

Pertanyaan Diskusi

1. Apa fungsi broker MQTT dalam sistem ini, dan apa yang terjadi jika broker mati?
2. Mengapa MQTT lebih cocok daripada HTTP untuk mengirim data sensor secara berkala?
3. Bagaimana cara kerja sensor DHT11 dalam mengukur suhu dan kelembapan?
4. Bagaimana cara menambahkan keamanan (login dan enkripsi) pada koneksi MQTT?
5. Bagaimana menampilkan status online/offline ESP32 di dashboard?

FAQ

Apakah bisa memakai DHT22 atau sensor lain?

Bisa. Untuk DHT22 cukup ubah #define DHTTYPE DHT22. Untuk sensor lain, ganti bagian pembacaan sensor dan tambahkan topik baru, lalu buat node mqtt in dan gauge tambahan di Node-RED.

Apakah Node-RED harus satu komputer dengan Mosquitto?

Tidak wajib. Jika berbeda, isi server broker di Node-RED dengan IP komputer Mosquitto. Node-RED dan Mosquitto juga bisa dijalankan di Raspberry Pi agar menyala 24 jam.

Bagaimana agar data tersimpan untuk jangka panjang?

Simpan data ke database time-series seperti InfluxDB, lalu tampilkan dengan Grafana. Contohnya ada di stack ESP32 + Node-RED + InfluxDB.

Kesimpulan

Dengan ESP32, DHT11, MQTT, dan Node-RED Dashboard 2.0, Anda sudah memiliki sistem monitoring suhu dan kelembapan real-time yang mudah dikembangkan: tinggal menambah sensor, topik, dan widget. Ingin mendalami IoT dan integrasinya dengan sistem otomasi industri secara terstruktur? Ikuti Training IoT Profesional bisaioti atau Training ESP32 Berbasis IoT.

Referensi

• FlowFuse, “Node-RED Dashboard 2.0 – Getting Started” – dashboard.flowfuse.com
• FlowFuse, “Node-RED Dashboard Formally Deprecated” (2024) – flowfuse.com
• Node-RED, “Getting Started” – nodered.org
• Nick O’Leary, “PubSubClient API” – pubsubclient.knolleary.net

Baca Juga:

• MQTT ESP32: Kirim Data Sensor & Kontrol LED dengan PubSubClient
• Membaca Suhu dan Kelembapan DHT11 dengan ESP32
• Tutorial MQTT Python: Publish & Subscribe dengan Paho dan Mosquitto
• ESP32: Panduan Komprehensif untuk Pemula hingga Ahli