Membangun Web Server ESP32 merupakan salah satu cara terbaik untuk mengendalikan perangkat IoT melalui browser tanpa memerlukan aplikasi tambahan. Dengan menjalankan web server secara langsung di dalam ESP32, pengguna dapat memonitor sensor, mengontrol perangkat elektronik, hingga menampilkan data secara real-time melalui jaringan WiFi. Pada contoh ini, DIYables Web Server digunakan untuk membuat website multi-halaman yang terdiri dari halaman utama, halaman pemantauan suhu, dan halaman kontrol LED. Setiap halaman memiliki fungsi yang berbeda sehingga struktur proyek menjadi lebih rapi serta mudah dikembangkan untuk aplikasi IoT yang lebih kompleks.
Fitur Web Server DIYables ESP32
Contoh proyek ini memiliki beberapa fitur yang umum digunakan pada aplikasi Internet of Things (IoT), di antaranya:
- Navigasi multi-halaman dengan perpindahan halaman yang cepat dan mulus.
- Halaman utama yang menampilkan informasi sistem beserta menu navigasi.
- Halaman pemantauan suhu yang dapat memperbarui data secara otomatis.
- Halaman kontrol LED untuk menyalakan dan mematikan LED melalui browser.
- Menggunakan template HTML sehingga tampilan web lebih mudah dimodifikasi.
- Memanfaatkan fungsi helper agar kode program lebih rapi dan mudah dipelihara.
Dengan struktur seperti ini, proyek dapat dikembangkan menjadi sistem monitoring maupun sistem kendali perangkat berbasis web.
Perangkat Keras yang Dibutuhkan
Sebelum memulai, siapkan beberapa perangkat berikut:
- ESP32 Dev Module ESP-WROOM-32 (38 Pin)
- Kabel USB
Karena contoh ini memanfaatkan LED bawaan (built-in LED) pada board ESP32, Anda tidak memerlukan rangkaian tambahan.
Menginstal Library Web Server DIYables
1. Hubungkan board ESP32 ke komputer menggunakan kabel USB.
2. Jalankan Arduino IDE.
3. Pilih board ESP32 yang sesuai beserta port COM yang digunakan.
4. Buka Library Manager.
5. Cari library Web Server for ESP32.
6. Pilih library mWebSockets dari DIYables.
7. Klik Install dan tunggu hingga proses instalasi selesai.
Library ini menyediakan berbagai fungsi yang memudahkan pembuatan HTTP Server pada ESP32.
Membuka Contoh Program Web Server
Setelah library berhasil dipasang, buka contoh program melalui menu berikut:
File → Examples → DIYables ESP32 WebServer → WebServer
Contoh ini telah menyediakan seluruh struktur dasar yang diperlukan untuk membuat Web Server ESP32 Multi-Halaman.
Rangkaian Koneksi
Contoh program ini tidak memerlukan sensor atau pun modul eksternal. LED yang dikendalikan merupakan LED bawaan ESP32 yang terhubung pada GPIO 13, sehingga Anda cukup menghubungkan ESP32 ke komputer menggunakan kabel USB.
Struktur Program
Program terdiri atas beberapa file yang memiliki fungsi masing-masing.
1. home.h
Berisi template HTML untuk halaman utama (Home Page) yang akan ditampilkan ketika pengguna pertama kali membuka alamat IP ESP32.
2. temperature.h
Berisi template halaman untuk menampilkan informasi suhu. Nilai suhu akan ditempatkan secara dinamis menggunakan placeholder sehingga halaman dapat diperbarui tanpa harus mengubah struktur HTML.
3. led.h
Berisi template halaman yang digunakan untuk mengontrol LED melalui browser. Halaman ini juga menampilkan status LED apakah sedang ON atau OFF.
4. WebServer.ino
WebServer.ino merupakan file utama yang berisi konfigurasi WiFi, inisialisasi web server, pengaturan route, pembacaan data, pengendalian LED, dan seluruh logika program.
Konfigurasi WiFi
Sebelum mengunggah program, ubah terlebih dahulu nama jaringan WiFi beserta password sesuai jaringan yang digunakan.
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
Pastikan ESP32 terhubung ke jaringan WiFi yang sama dengan perangkat yang akan digunakan untuk mengakses web server.
Mengunggah Program ke ESP32
Langkah-langkahnya sebagai berikut.
1. Hubungkan ESP32 ke komputer.
2. Pilih board dan port COM yang benar.
3. Klik Upload.
4. Setelah proses selesai, buka Serial Monitor dengan baud rate 9600.
5. Tunggu hingga ESP32 berhasil terhubung ke jaringan WiFi.
6. Catat alamat IP Address yang muncul pada Serial Monitor.
Jika alamat IP belum muncul, tekan tombol RESET pada board ESP32.
Mengakses Web Server ESP32
Setelah ESP32 memperoleh alamat IP, buka browser pada komputer atau smartphone yang berada pada jaringan WiFi yang sama. Masukkan alamat IP tersebut ke address bar. Jika koneksi berhasil, halaman utama Web Server akan langsung ditampilkan.
Menguji Halaman Monitoring Suhu
Untuk membuka halaman suhu:
1. Klik menu Suhu.
2. Browser akan menampilkan halaman monitoring suhu.
Pada contoh ini, nilai suhu masih berupa data simulasi, sehingga setiap kali halaman dimuat akan menampilkan nilai yang telah ditentukan di dalam program.
Menguji Halaman Kontrol LED
Selanjutnya lakukan pengujian kontrol LED.
1. Klik menu Kontrol LED.
2. Halaman kontrol akan muncul pada browser.
Tekan tombol ON untuk menyalakan LED dan tombol OFF untuk mematikannya. Perubahan status LED akan langsung diterapkan pada board ESP32 tanpa perlu melakukan refresh halaman secara manual.
Daftar Halaman yang Tersedia
1. Halaman Beranda ("/")
- URL: http://alamat-ip-esp32/
- Fitur:
- Menampilkan halaman utama.
- Berisi informasi sistem.
- Menyediakan menu navigasi menuju seluruh halaman.
2. Halaman Monitoring Suhu ("/temperature")
- URL: http://alamat-ip-esp32/temperature
- Fitur:
- Menampilkan suhu dalam satuan Celcius.
- Refresh otomatis setiap lima detik.
- Tombol refresh manual.
- Tombol kembali ke halaman utama.
3. Halaman Kontrol LED ("/led")
- URL: http://alamat-ip-esp32/led
- Untuk menyalakan LED: http://alamat-ip-esp32/led/on
- Untuk mematikan LED: http://alamat-ip-esp32/led/off
- Fitur:
- Menampilkan status LED saat ini.
- Memiliki route khusus untuk ON dan OFF.
- Status LED diperbarui secara langsung.
- Navigasi kembali ke halaman utama.
Penjelasan Program Web Server ESP32
1. Mendaftarkan Route Server
Route merupakan alamat URL yang akan diproses oleh web server.
server.addRoute("/", handleHome);
server.addRoute("/temperature", handleTemperature);
server.addRoute("/led", handleLed);
server.addRoute("/led/on", handleLedOn);
server.addRoute("/led/off", handleLedOff);
Setiap URL dihubungkan dengan sebuah handler function.
Sebagai contoh:
- / akan menjalankan fungsi handleHome().
- /temperature akan menjalankan fungsi handleTemperature().
- /led/on akan menjalankan fungsi handleLedOn().
Dengan mekanisme ini, setiap halaman memiliki logika program yang terpisah sehingga kode menjadi lebih mudah dikembangkan.
2. Menampilkan Halaman Beranda
void handleHome(...) {
server.sendResponse(client, HOME_PAGE);
}
Fungsi ini bertugas mengirimkan template HTML halaman utama kepada browser ketika pengguna membuka alamat IP ESP32.
3. Menampilkan Data Suhu
float tempC = 25.5;
Nilai tersebut masih berupa simulasi.
Kemudian placeholder:
%TEMP_C%
akan diganti menjadi nilai suhu sebenarnya menggunakan:
response.replace("%TEMP_C%", String(tempC,1));
Teknik ini memungkinkan halaman HTML tetap sama, sementara hanya nilai datanya yang berubah.
4. Mengontrol LED
Ketika pengguna membuka URL /led/on fungsi berikut akan dijalankan:
ledState = HIGH;
digitalWrite(LED_PIN, ledState);
Sebaliknya, ketika membuka /led/off nilai LOW dikirimkan ke pin LED sehingga LED mati. Cara kerja ini sama seperti mengendalikan output digital pada program Arduino biasa, hanya saja perintahnya berasal dari browser.
Sistem Template HTML
Program menggunakan placeholder agar isi halaman dapat berubah secara dinamis.
Contohnya:
- %TEMP_C% → diganti menjadi nilai suhu terbaru.
- %LED_STATUS% → diganti menjadi status ON atau OFF.
Pendekatan ini membuat halaman HTML tetap sederhana tanpa perlu membuat banyak file berbeda.
Helper Function
Program juga menggunakan fungsi pembantu agar tidak terjadi pengulangan kode.
void sendLedPage(...)
Fungsi tersebut akan membaca status LED, mengganti placeholder, dan mengirim balasan HTML ke browser. Dengan cara ini, proses pembaruan halaman menjadi lebih efisien.
Mengembangkan Web Server ESP32
1. Menambahkan Halaman Baru
Apabila ingin membuat halaman baru, langkah-langkahnya sebagai berikut:
- Membuat file template HTML baru.
- Menambahkan route baru menggunakan server.addRoute().
- Membuat handler function.
- Menambahkan menu navigasi pada halaman utama.
Dengan struktur tersebut, jumlah halaman dapat ditambah tanpa mengubah bagian program lainnya.
2. Mengubah Tampilan Website
Seluruh tampilan web menggunakan CSS yang berada di dalam template HTML.
<style>
body{
font-family:Arial,sans-serif;
}
</style>
Anda dapat mengubah warna, ukuran huruf, tata letak, maupun menambahkan efek visual sesuai kebutuhan.
3. Menghubungkan Sensor Suhu Sebenarnya
Pada contoh ini nilai suhu masih berupa simulasi. Agar menampilkan data nyata, ganti float tempC = 25.5 dengan fungsi pembacaan sensor, misalnya:
- DHT22
- DS18B20
- LM35
Kemudian kirim hasil pembacaan tersebut ke halaman HTML menggunakan placeholder yang sama.
Penyelesaian Masalah (Troubleshooting)
1. ESP32 Tidak Terhubung ke WiFi
Periksa beberapa hal berikut:
- SSID dan password sudah benar.
- Router WiFi aktif.
- ESP32 masih berada dalam jangkauan sinyal.
2. Halaman Web Tidak Dapat Dibuka
Pastikan:
- Alamat IP pada browser sama dengan yang tampil di Serial Monitor.
- Komputer atau smartphone berada pada jaringan WiFi yang sama.
- Halaman browser telah di-refresh.
3. LED Tidak Merespons
Periksa hal-hal berikut:
- Pin LED sudah sesuai dengan program.
- Route telah didaftarkan dengan benar.
- Tidak ada pesan kesalahan pada Serial Monitor.
Menambahkan Informasi Debug
Selama proses pengembangan, penggunaan Serial.println() sangat membantu untuk mengetahui jalannya program.
Contohnya:
Serial.println("LED route accessed");
Serial.println("Method: " + method);
Serial.println("Request: " + request);
Melalui informasi tersebut, Anda dapat memastikan apakah browser benar-benar mengirimkan permintaan ke ESP32 serta mengetahui route mana yang sedang diproses.
0 Komentar