Pada praktikum ini, diperkenalkan pada konsep dasar akuisisi data sensor dalam sistem IoT. Sebagai contoh, digunakan sensor DHT22 untuk membaca suhu dan kelembaban, kemudian dihubungkan ke salah satu pin input pada ESP32. Setelah data berhasil dibaca, ESP32 mengirimkan nilai suhu dan kelembaban tersebut ke broker MQTT. Aplikasi web yang terhubung ke broker MQTT kemudian melakukan subscribe pada topik tempat ESP32 mengirimkan data. Saat pesan baru diterima, JavaScript pada halaman web akan memproses payload tersebut menggunakan library Paho MQTT dan menampilkannya secara real-time pada tampilan antarmuka. Implementasi ini menggambarkan bagaimana data dari dunia fisik dapat dikumpulkan oleh mikrokontroler, dikirim melalui jaringan menggunakan protokol MQTT, dan akhirnya ditampilkan dalam aplikasi web secara real-time sebagai informasi.
A. Skematik Rangkaian
Gambar 1. Skematik Rangkaian Sensor DHT22 dan LED
Skematik ini memperlihatkan rangkaian sederhana yang menghubungkan sensor DHT22. Sensor DHT22 terhubung ke pin 3.3V sebagai sumber daya, GND sebagai ground, dan satu pin data yang disambungkan ke salah satu GPIO input ESP32 (GPIO 2) untuk membaca nilai suhu dan kelembaban. Skematik ini menjadi dasar pemahaman tentang bagaimana sensor lingkungan dan aktuator dapat bekerja bersama dalam satu sistem IoT yang terintegrasi.
B. Koding Mikrokontroler (Arduino IDE)
C. Koding Aplikasi WEB
Gambar 2. Halaman Web ON/OFF dan Menampilkan data Suhu serta Kelembaban
Pada versi ini, fitur monitoring suhu dan kelembaban ditambahkan sehingga halaman web tidak hanya berperan sebagai kontrol aktuator tetapi juga sebagai dashboard pemantauan sensor. Pada halaman web di panel monitoring berfungsi untuk menampilkan data sensor DHT22 yang dikirimkan ESP32 melalui MQTT. ESP32 melakukan pembacaan suhu dan kelembaban, lalu mengirimkannya secara berkala ke broker dalam bentuk payload teks. Aplikasi web melakukan subscribe pada topik data sensor melalui script MQTT di websockets.js. Ketika pesan baru diterima, fungsi callback MQTT akan mengekstrak nilai suhu dan kelembaban dari payload, kemudian menggunakan jQuery untuk memperbarui elemen HTML yang menampilkan angka tersebut di halaman web secara real-time.
index.html
websocket.js
config.js
