(IoT) Monitoring Suhu dan Kelembaban

Stack: Tailwind MQTT HTML CSS Javascript EasyEDA ESP8266

Kategori: Personal Project

Versi: 1.0.0

Update: 04 Jan 2026

Author: Fahmi Ibrahim

Monitoring Suhu dan Kelembaban Berbasis MQTT (Sekalian Ngatur Kipas Otomatis)


Awalnya project ini sederhana.

Saya cuma pengen monitor suhu dan kelembaban ruangan, terus kalau panas ya kipas nyala, kalau dingin ya mati. Kedengarannya simpel, tapi seperti biasa… makin dikerjain, makin kepikiran buat nambah fitur 😄


Akhirnya project ini berkembang jadi monitoring real-time berbasis MQTT, lengkap dengan dashboard web dan threshold config yang bisa diatur langsung tanpa upload ulang program ke mikrokontroler.


Kenapa Saya Pakai MQTT?


Saya sempat kepikiran pakai HTTP biasa. Tapi setelah dicobacoba, rasanya kurang cocok buat data sensor yang update terusmenerus.

MQTT ini enak karena:

  • ringan,

  • real-time,

  • dan cocok buat IoT.

ESP cukup publish data, dashboard tinggal subscribe. Selesai.


Tampilan Dashboard Monitoring



Di dashboard, saya bisa lihat:

  • suhu,
  • kelembaban,
  • status kipas (ON / OFF), dan
  • grafik data real-time.

Semua data dikirim lewat MQTT, jadi begitu sensor update, tampilan langsung ikut berubah.


Threshold Config: Biar Kipas Nggak Nyala Terus


Nah ini bagian yang menurut saya penting.

Daripada hardcode suhu di ESP, saya bikin Threshold Config:

  • suhu berapa kipas ON,

  • suhu berapa kipas OFF.

Setting-nya langsung dari web dashboard.

Misalnya:

  • ON di 30°C

  • OFF di 28°C

Begitu nilainya di-update, ESP langsung terima lewat MQTT dan logika kipas ikut berubah.


Prototype


Secara hardware, prototype ini masih versi breadboard. Tapi justru dari sini keliatan alur sistemnya.



Di LCD, suhu, kelembaban, dan status kipas ditampilkan langsung, jadi kalau web mati pun masih bisa monitoring.


Desain PCB



Setelah prototype jalan, langkah berikutnya jelas: PCB.


Saya desain PCB sendiri di EasyEDA:

  • satu board buat ESP,

  • terminal screw buat sensor, relay, dan power,

  • layout dibuat simpel tapi rapi.

Dengan PCB, rangkaian jadi: lebih rapi, lebih aman, dan siap dipasang permanen.


Skematik Rangkaian


Biar jelas alur koneksinya, ini skematik yang saya pakai.



Dari sini kelihatan:

  • pin DHT,

  • I2C ke LCD,

  • output relay ke kipas,

  • dan jalur power 5V.


Skematik rangkaian di atas adalah versi yang saya gunakan pada implementasi project ini. Untuk memudahkan replikasi dan pengembangan, saya sertakan Bill of Materials serta seluruh file project di bawah ini.


Bill of Materials

No Nama Barang Qty Harga Total
1 WEMOS D1 MINI NODEMCU 4MB LUA WIFI IOT INTERNET ESP8266 ESP12E + KABEL MICRO USB 1 Rp 34.900 Rp 34.900
2 RELAY 5V 1 CHANNEL OUTPUT 250VAC 30VDC 10A MODULE FOR ARDUINO 1 Rp 9.300 Rp 9.300
3 Bc547 To-92 100ma Npn Amplifier Transistor 1 Rp 250 Rp 250
4 TERMINAL PCB BLOCK SCREW 2 PIN KF301-2P BLUE BIRU 3 Rp 600 Rp 1.800
5 TERMINAL PCB BLOCK SCREW 3 PIN KF301-3P BLUE BIRU 2 Rp 900 Rp 1.800
6 DHT22 AM2302 Sensor Suhu & Kelembaban 1 Rp 22.900 Rp 22.900
7 Kipas Pendingin DC Fan 5V 5x5x1CM 1 Rp 15.200 Rp 15.200
8 Adaptor 5V 1A 1 Rp 14.500 Rp 14.500
9 PCB Polos FR4 Fiber Double Layer 15x20CM 1 Rp 20.600 Rp 20.600
10 SOKET DC MUR 2.1X5.5MM BULAT 1 Rp 1.225 Rp 1.225
11 BOX ELEKTRONIK X4 KOTAK RANGKAIAN 1 Rp 9.500 Rp 9.500
12 KABEL SERABUT AWG 22 AWG22 HIGH QUALITY MERAH PERMETER 2 Rp 4.500 Rp 9.000
13 KABEL SERABUT AWG 22 AWG22 HIGH QUALITY HITAM PERMETER 2 Rp 5.000 Rp 10.000
14 LCD 1602 16X2 CHARACTER GREEN BACKLIGHT+ I2C SERIAL INTERFACE MODULE 1 Rp 23.900 Rp 23.900
15 CASE LCD 16X2 FRAME 1 Rp 10.400 Rp 10.400
16 SPACER PCB METAL 10MM X 3MM HEXAGONAL PLUS NUT 8 Rp 800 Rp 6.400
Total Keseluruhan Rp 191.675

Detail Project

Kategori Personal Project
Versi 1.0.0
Rilis 04 Jan 2026
Diposting 04 Jan 2026
Update 04 Jan 2026
Author Fahmi Ibrahim