Proyek ini akan memandumu membuat sebuah node IoT yang multifungsi. Dengan ESP32, kita akan membuat web server yang tidak hanya bisa menyalakan atau mematikan perangkat listrik (menggunakan relay), tetapi juga bisa melaporkan data dari sensor secara real-time melalui browser.
1. Kebutuhan Proyek
Pastikan kamu memiliki semua komponen yang diperlukan.
Perangkat Keras (Hardware) 🔌
- ESP32 Development Board: Otak dari proyek ini.
- Modul Relay 1 Channel: Sebagai saklar elektronik.
- Sensor Analog: Potensiometer adalah pilihan termudah untuk memulai. Kamu juga bisa menggunakan sensor cahaya (LDR) atau sensor kelembaban tanah.
- Breadboard dan Kabel Jumper secukupnya.
- Kabel Micro USB.
Perangkat Lunak (Software) 💻
- Arduino IDE: Pastikan sudah ter-install dan sudah ditambahkan dukungan untuk board ESP32.
2. Rangkaian Proyek
Sekarang kita akan menghubungkan kedua komponen (relay dan sensor) ke satu board ESP32 yang sama.
- Koneksi Relay:
- VCC relay → VIN atau 5V pada ESP32.
- GND relay → GND pada ESP32.
- IN relay → GPIO 2 (Pin D2) pada ESP32.
- Koneksi Sensor (Potensiometer):
- VCC sensor → 3V3 pada ESP32.
- GND sensor → GND pada ESP32 (bisa berbagi pin GND yang sama).
- Output sensor → GPIO 34 (Pin D34) pada ESP32.
3. Program Dasar
c++
#include <WiFi.h> #include <WebServer.h> const char* ssid = "NAMA_WIFI"; // Ganti dengan SSID WiFi kamu const char* password = "PASSWORD"; // Ganti dengan password WiFi kamu const int relayPin = 2; // Relay dihubungkan ke pin GPIO 2 const int sensorPin = 34; // Misalnya sensor di GPIO34 (ADC input ESP32) WebServer server(80); void setup() { Serial.begin(115200); // Inisialisasi relay pinMode(relayPin, OUTPUT); digitalWrite(relayPin, LOW); // relay mati default // Inisialisasi WiFi Serial.print("Menghubungkan ke WiFi: "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.println("WiFi tersambung!"); Serial.print("IP Address: "); Serial.println(WiFi.localIP()); // Endpoint utama server.on("/", []() { server.send(200, "text/plain", "ESP32 Relay + Sensor Server Aktif"); }); // Endpoint relay ON server.on("/relay/on", []() { digitalWrite(relayPin, HIGH); server.send(200, "text/plain", "Relay ON"); Serial.println("Relay ON"); }); // Endpoint relay OFF server.on("/relay/off", []() { digitalWrite(relayPin, LOW); server.send(200, "text/plain", "Relay OFF"); Serial.println("Relay OFF"); }); // Endpoint sensor server.on("/sensor", []() { int sensorValue = analogRead(sensorPin); // Baca data sensor analog // int sensorValue = random(0, 100); // Kalau mau dummy data random String json = "{\"value\": " + String(sensorValue) + "}"; server.send(200, "application/json", json); Serial.println("Sensor: " + String(sensorValue)); }); server.begin(); Serial.println("Web server dimulai..."); } void loop() { server.handleClient(); }
4. Penjelasan Kode Program
Mari kita bedah kode yang menggabungkan dua fungsi ini.
Bagian 1: Inisialisasi dan Konfigurasi
C++
#include <WiFi.h> #include <WebServer.h> // --- GANTI BAGIAN INI --- const char* ssid = "NAMA_WIFI"; // Ganti dengan nama (SSID) WiFi kamu const char* password = "PASSWORD"; // Ganti dengan password WiFi kamu // ------------------------- const int relayPin = 2; // Relay dihubungkan ke GPIO 2 const int sensorPin = 34; // Sensor dihubungkan ke GPIO34 WebServer server(80); // Membuat objek server pada port 80
ssid
&password
: Bagian yang wajib diubah sesuai dengan detail jaringan WiFi-mu.relayPin
&sensorPin
: Kita mendefinisikan dua pin GPIO yang berbeda untuk dua fungsi yang berbeda: satu untuk output (relay) dan satu untuk input (sensor).WebServer server(80)
: Menginisialisasi server web.
Bagian 2: Fungsi setup()
Fungsi ini melakukan semua persiapan awal. C++
void setup() { Serial.begin(115200); // Inisialisasi relay pinMode(relayPin, OUTPUT); digitalWrite(relayPin, LOW); // Pastikan relay mati saat program dimulai // Inisialisasi WiFi WiFi.begin(ssid, password); // ... (kode koneksi WiFi) ... Serial.println("\nWiFi tersambung!"); Serial.print("IP Address: "); Serial.println(WiFi.localIP()); // ... (lanjutan di bawah)
pinMode(relayPin, OUTPUT)
: Mengatur pin relay sebagai output.digitalWrite(relayPin, LOW)
: Memastikan relay dalam kondisi mati secara default.WiFi.begin(...)
: Memulai koneksi ke WiFi dan mencetak alamat IP yang didapat ke Serial Monitor. Alamat ini adalah kunci untuk mengakses server.
Bagian 3: Endpoint Web Server (di dalam setup()
)
Inilah bagian inti yang membuat server kita multifungsi. Ada empat alamat (endpoint) yang didaftarkan. C++
// Endpoint utama server.on("/", ...); // Endpoint untuk kontrol relay server.on("/relay/on", ...); server.on("/relay/off", ...); // Endpoint untuk membaca sensor server.on("/sensor", []() { int sensorValue = analogRead(sensorPin); // Baca data sensor String json = "{\"value\": " + String(sensorValue) + "}"; server.send(200, "application/json", json); // Kirim sebagai JSON Serial.println("Sensor: " + String(sensorValue)); }); server.begin(); // Mulai web server Serial.println("Web server dimulai..."); }
server.on("/", ...)
: Halaman utama untuk mengecek status server.server.on("/relay/on", ...)
danserver.on("/relay/off", ...)
: Dua endpoint ini khusus untuk mengontrol relay. Mengaksesnya akan mengubah kondisi relay menjadi ON atau OFF.server.on("/sensor", ...)
: Endpoint ini khusus untuk membaca data sensor. Saat diakses, ia akan membaca nilai darisensorPin
dan mengirimkannya kembali dalam format JSON (contoh:{"value": 1500}
).
Bagian 4: Fungsi loop()
Fungsi ini menjaga server agar tetap berjalan dan responsif.
C++
void loop() { server.handleClient(); // Menangani setiap permintaan yang masuk }
server.handleClient()
: Terus-menerus memeriksa apakah ada permintaan dari browser dan menanganinya sesuai dengan endpoint yang telah didaftarkan.
5. Langkah-Langkah Penggunaan
- Rangkai Sirkuit: Hubungkan ESP32, relay, dan sensor sesuai diagram di atas.
- Masukkan Kode: Salin kode ke Arduino IDE.
- Ubah Kredensial WiFi: Ganti
NAMA_WIFI
danPASSWORD
. - Pilih Board & Port: Pastikan
Tools > Board
danTools > Port
sudah benar. - Upload Kode: Klik tombol Upload.
- Cari Alamat IP: Buka Serial Monitor (
Tools > Serial Monitor
) dengan baud rate 115200. Tunggu dan catat IP Address yang muncul. - Uji Coba: Buka browser di HP atau laptop yang terhubung ke jaringan WiFi yang sama. – Untuk membaca sensor: Kunjungi
http://<IP_ADDRESS_ESP32>/sensor
. Kamu akan melihat data JSON. Coba putar potensiometer dan refresh halaman untuk melihat nilainya berubah. – Untuk mengontrol relay: Buka tab baru di browser. – Kunjungihttp://<IP_ADDRESS_ESP32>/relay/on
untuk menyalakan relay (kamu akan mendengar bunyi “klik”). – Kunjungihttp://<IP_ADDRESS_ESP32>/relay/off
untuk mematikannya. Selamat! Kamu berhasil membuat server IoT yang dapat menerima input sensor dan mengontrol output relay.
7. Integrasi Dengan UnIoT
Untuk bisa mengontrol relay dan menampilkan data dengan UnIoT hanya dengan memasukkan address ke textbox HTTP URL Sensor: http://192.168.1.12/sensor
& HTTP URL Relay tanpa nilai (ON/OFF) http://192.168.1.12/relay

Tinggalkan Balasan