Library DIYables ESP32 Web Apps merupakan sebuah library yang dirancang untuk mempermudah pembuatan aplikasi web interaktif berbasis ESP32 tanpa harus membangun antarmuka web dari nol. Library ini menyediakan berbagai aplikasi web siap pakai sekaligus framework yang memungkinkan Anda membuat aplikasi web sendiri sesuai kebutuhan. Salah satu keunggulan utama library ini adalah penggunaan arsitektur modular, sehingga hanya modul yang benar-benar diperlukan saja yang dimuat ke dalam program. Pendekatan ini membantu mengurangi penggunaan memori (RAM maupun Flash), meningkatkan performa, serta membuat kode lebih mudah dikelola. Library ini menggunakan WebSocket sebagai media komunikasi utama antara browser dan ESP32, sehingga setiap perubahan data dapat dikirim dan diterima secara real-time tanpa perlu melakukan refresh halaman.
Fitur Utama DIYables ESP32 Web Apps Library
Library ini menyediakan berbagai fitur yang dirancang agar proses pengembangan aplikasi web pada ESP32 menjadi lebih sederhana sekaligus efisien.
1. Arsitektur Modular
Setiap aplikasi web dibuat sebagai modul yang berdiri sendiri. Anda hanya perlu menambahkan modul yang benar-benar digunakan sehingga penggunaan memori menjadi lebih optimal.
2. Penggunaan Memori Lebih Efisien
Karena setiap modul dapat diaktifkan atau dinonaktifkan secara independen, library tidak akan membebani ESP32 dengan fitur yang tidak digunakan.
3. Web App Siap Digunakan
Library telah menyediakan berbagai aplikasi web bawaan sehingga Anda dapat langsung mengendalikan ESP32 melalui browser tanpa harus memahami HTML, CSS, maupun JavaScript secara mendalam.
4. Framework untuk Custom Web App
Selain aplikasi bawaan, library juga menyediakan kelas dasar (base class) yang dapat digunakan untuk membuat aplikasi web sendiri dengan struktur yang konsisten.
5. Komunikasi Real-Time Menggunakan WebSocket
Semua pertukaran data antara browser dan ESP32 dilakukan melalui protokol WebSocket, sehingga perubahan status dapat ditampilkan secara instan tanpa perlu melakukan reload halaman.
6. Tampilan Responsif
Seluruh aplikasi web dirancang agar dapat berjalan dengan baik pada berbagai ukuran layar, baik desktop, tablet, maupun smartphone.
7. API yang Mudah Digunakan
Library menggunakan sistem callback yang sederhana sehingga proses integrasi dengan program Arduino menjadi lebih mudah dipahami.
8. Mendukung Banyak Web App Sekaligus
Satu server ESP32 dapat menjalankan beberapa aplikasi web secara bersamaan. Setiap aplikasi memiliki URL masing-masing sehingga mudah diakses melalui browser.
Mengenal Kelas Inti DIYables ESP32 Web Apps
Struktur library dibangun menggunakan beberapa kelas utama. Kelas yang paling penting adalah DIYablesWebAppServer, karena bertugas mengelola seluruh komunikasi antara browser dan ESP32.
DIYablesWebAppServer
Kelas DIYablesWebAppServer merupakan pusat pengelolaan library. Seluruh permintaan HTTP, koneksi WebSocket, serta manajemen halaman web dikendalikan oleh kelas ini. Fungsi utamanya meliputi:
- Menjalankan HTTP Server.
- Mengelola koneksi WebSocket.
- Menambahkan dan menghapus aplikasi web.
-Mengatur halaman 404 (Not Found).
- Menyediakan akses ke berbagai aplikasi web bawaan.
Konstruktor DIYablesWebAppServer
Membuat Instance Server
Konstruktor digunakan untuk membuat objek server aplikasi web. Parameter yang digunakan meliputi:
- httpPort : nomor port yang digunakan oleh HTTP Server (default 80).
- websocketPort : nomor port yang digunakan untuk komunikasi WebSocket (default 81).
Jika parameter tidak diberikan, library akan otomatis menggunakan port default tersebut.
Metode Pengaturan dan Koneksi
1. bool begin()
Metode ini digunakan untuk menginisialisasi jaringan yang telah dikonfigurasi sebelumnya, misalnya koneksi Ethernet atau konfigurasi WiFi yang sudah tersedia. Nilai yang dikembalikan (Return):
- true apabila inisialisasi berhasil.
- false apabila terjadi kegagalan.
Kapan digunakan?
Metode ini cocok digunakan ketika koneksi jaringan telah dikonfigurasi sebelum server dijalankan, atau untuk implementasi Ethernet pada pengembangan berikutnya.
bool begin(const char ssid, const char password)
Metode ini merupakan cara yang paling umum digunakan untuk menghubungkan ESP32 ke jaringan WiFi sekaligus menjalankan web server.
Parameter:
- ssid : nama jaringan WiFi.
- password : kata sandi WiFi.
Return
- true jika koneksi berhasil.
- false jika koneksi gagal.
Metode ini merupakan pilihan standar ketika ESP32 langsung terhubung ke access point menggunakan SSID dan password.
2. void loop()
Metode loop() bertugas menangani seluruh aktivitas server, mulai dari permintaan HTTP hingga komunikasi WebSocket. Metode ini harus dipanggil secara terus-menerus di dalam fungsi utama loop() Arduino agar server tetap berjalan dan mampu merespons setiap permintaan dari browser.
3. bool isConnected()
Digunakan untuk memeriksa apakah ESP32 masih terhubung ke jaringan WiFi.
Return
- true jika koneksi masih aktif.
- false jika koneksi terputus.
4. String getIPAddress()
Mengembalikan alamat IP yang digunakan oleh ESP32 dalam bentuk objek String.
Alamat IP ini biasanya ditampilkan pada Serial Monitor sehingga pengguna dapat mengetahui alamat yang harus dibuka melalui browser.
Manajemen Aplikasi Web
Selain mengelola koneksi jaringan, DIYablesWebAppServer juga bertugas mengatur seluruh aplikasi web yang berjalan pada server.
void addApp(DIYablesWebAppPageBase app)*
Menambahkan sebuah aplikasi web ke dalam server.
Parameter:
- app : pointer menuju objek aplikasi web yang akan didaftarkan.
Setelah ditambahkan, aplikasi dapat diakses melalui URL yang telah ditentukan.
void removeApp(const String& path)
Menghapus aplikasi web berdasarkan URL-nya.
Parameter:
- path : jalur URL aplikasi, misalnya /chat.
DIYablesWebAppPageBase getApp(const String& path)*
Mengambil objek aplikasi berdasarkan URL.
Parameter:
- path : URL aplikasi.
Return
- Pointer ke objek aplikasi jika ditemukan.
- nullptr apabila aplikasi tidak tersedia.
void setNotFoundPage(const DIYablesNotFoundPage& page)
Menentukan halaman 404 Not Found yang akan ditampilkan ketika pengguna membuka URL yang tidak tersedia.
Parameter:
- page : objek halaman 404.
Penggunaan metode ini bersifat opsional.
DIYablesWebDigitalPinsPage getWebDigitalPinsPage()*
Mengambil instance halaman Web Digital Pins apabila sebelumnya telah ditambahkan ke server.
Return
- Pointer ke objek halaman.
- nullptr jika halaman tidak tersedia.
DIYablesWebSliderPage getWebSliderPage()*
Mengambil instance halaman Web Slider.
Return
- Pointer ke objek slider.
- nullptr apabila belum ditambahkan.
DIYablesWebJoystickPage getWebJoystickPage()*
Mengambil instance halaman Web Joystick.
Return
- Pointer ke objek joystick.
- nullptr jika halaman belum tersedia.
DIYablesWebAppPageBase
Selain server utama, library juga menyediakan kelas dasar bernama DIYablesWebAppPageBase. Kelas ini merupakan abstract base class yang menjadi fondasi bagi seluruh aplikasi web di dalam library. Setiap aplikasi baru harus mewarisi (inherit) kelas ini agar memiliki kemampuan menangani permintaan HTTP, komunikasi WebSocket, serta navigasi halaman.
1. Konstruktor DIYablesWebAppPageBase
DIYablesWebAppPageBase(const String& pagePath)
Konstruktor ini digunakan untuk membuat halaman web baru dengan menentukan alamat URL yang akan digunakan.
Parameter:
- pagePath : jalur URL halaman, misalnya "web-joystick" atau "custom".
2. Metode Virtual yang Wajib Diimplementasikan
Karena merupakan abstract class, terdapat beberapa metode virtual yang wajib dibuat pada kelas turunan.
virtual void handleHTTPRequest(IWebClient& client)
Metode ini bertugas menangani setiap permintaan HTTP yang masuk ke halaman tersebut.
Parameter:
- client : antarmuka client HTTP yang digunakan untuk mengirimkan respons ke browser.
virtual void handleWebSocketMessage(IWebSocket& ws, const char message, uint16_t length)*
Digunakan untuk menangani seluruh pesan yang diterima melalui WebSocket.
Parameter:
- ws : objek koneksi WebSocket.
- message : isi pesan yang diterima.
- length : panjang data pesan.
Metode ini biasanya digunakan untuk memproses data yang dikirim dari browser menuju ESP32.
virtual const char getPageInfo() const*
Mengembalikan informasi identitas halaman yang ditampilkan pada informasi koneksi.
Return
String identitas halaman, misalnya:
Web Joystick:
virtual String getNavigationInfo() const
Mengembalikan kode HTML yang digunakan untuk menampilkan kartu navigasi pada halaman utama.
Return
String HTML yang berisi tombol atau kartu navigasi menuju aplikasi tersebut.
3. Metode Virtual Opsional (Override)
Selain metode wajib, terdapat beberapa metode yang dapat dioverride apabila diperlukan.
virtual void onWebSocketConnection(IWebSocket& ws)
Dipanggil secara otomatis ketika terdapat klien baru yang berhasil terhubung melalui WebSocket.
Parameter:
- ws : objek koneksi WebSocket.
Metode ini umumnya digunakan untuk mengirim data awal kepada klien yang baru terhubung.
virtual void onWebSocketClose(IWebSocket& ws)
Dipanggil ketika koneksi WebSocket ditutup.
Parameter:
- ws : objek koneksi yang telah terputus.
Metode ini biasanya digunakan untuk membersihkan data atau melakukan proses penutupan koneksi.
4. Metode Umum
const char getPagePath() const*
Mengembalikan jalur URL halaman.
Return
String yang berisi URL halaman.
bool isEnabled() const
Memeriksa apakah halaman sedang aktif.
Return
- true jika halaman aktif.
- false jika dinonaktifkan.
void setEnabled(bool enable)
Mengaktifkan atau menonaktifkan suatu halaman.
Parameter:
- enable = true untuk mengaktifkan halaman.
- enable = false untuk menonaktifkan halaman.
5. Metode Utilitas
Library juga menyediakan beberapa fungsi utilitas yang mempermudah pengiriman data antara ESP32 dan browser.
void sendHTTPHeader(IWebClient& client, const char contentType = "text/html")*
Mengirimkan header HTTP standar sebelum isi halaman dikirim ke browser.
Parameter:
- client : objek client HTTP.
- contentType : tipe MIME yang dikirim. Secara default menggunakan "text/html".
void sendWebSocketMessage(IWebSocket& ws, const char message)*
Mengirimkan sebuah pesan ke satu klien WebSocket tertentu.
Parameter:
- ws : koneksi tujuan.
- message : isi pesan yang akan dikirim.
void broadcastToAllClients(const char message)*
Mengirimkan pesan yang sama ke seluruh klien WebSocket yang sedang terhubung.
Parameter:
- message : data yang akan disiarkan.
Metode ini sangat berguna ketika ESP32 perlu memperbarui seluruh browser yang sedang membuka aplikasi web secara bersamaan.
void sendLargeHTML(IWebClient& client, const char html)*
Mengirimkan dokumen HTML berukuran besar menggunakan chunked transfer encoding, sehingga penggunaan memori menjadi lebih efisien dibandingkan mengirim seluruh halaman sekaligus.
Parameter:
- client : objek client HTTP.
- html : konten HTML yang akan dikirim.
Metode ini sangat berguna ketika halaman web memiliki ukuran yang cukup besar dan berisi banyak elemen antarmuka.
Contoh Implementasi Custom Web App
class CustomPage : public DIYablesWebAppPageBase {
public:
CustomPage() : DIYablesWebAppPageBase("/custom") {}
void handleHTTPRequest(IWebClient& client) override {
sendHTTPHeader(client);
client.println("<html><body>Custom Page</body></html>");
}
void handleWebSocketMessage(IWebSocket& ws, const char* message, uint16_t length) override {
// Handle WebSocket messages
sendWebSocketMessage(ws, "Response: " + String(message));
}
const char* getPageInfo() const override {
return " 🔧 Custom Page: ";
}
String getNavigationInfo() const override {
return "<a href=\"/custom\" class=\"app-card custom\">"
"<h3>🔧 Custom</h3><p>Custom functionality</p></a>";
}
};
Pada contoh tersebut, kelas CustomPage mengimplementasikan seluruh metode virtual yang diwajibkan, mulai dari menangani permintaan HTTP, memproses pesan WebSocket, hingga menyediakan informasi navigasi halaman. Dengan pola pewarisan (inheritance) seperti ini, Anda dapat mengembangkan berbagai aplikasi web baru dengan struktur yang konsisten dan mudah dipelihara.
Kelas Aplikasi Web pada DIYables ESP32 Web Apps
Selain menyediakan server utama, DIYables ESP32 Web Apps Library juga dilengkapi dengan berbagai kelas aplikasi web (Web App Classes) yang dapat langsung digunakan pada proyek ESP32. Setiap kelas memiliki fungsi yang berbeda, mulai dari antarmuka chat, serial monitor berbasis web, kontrol pin digital, joystick, slider, hingga visualisasi data secara real-time. Keuntungan menggunakan kelas-kelas ini adalah Anda tidak perlu membuat halaman HTML, CSS, maupun JavaScript sendiri. Seluruh antarmuka telah disediakan oleh library, sehingga Anda cukup memanggil API yang tersedia dari program Arduino.
1. DIYablesHomePage
DIYablesHomePage merupakan halaman utama (Home Page) yang berfungsi sebagai pusat navigasi seluruh aplikasi web yang telah ditambahkan ke server. Ketika browser membuka alamat IP ESP32, halaman inilah yang pertama kali ditampilkan. Seluruh aplikasi yang telah didaftarkan melalui fungsi addApp() akan muncul sebagai menu navigasi sehingga pengguna dapat berpindah antar aplikasi dengan mudah.
Konstruktor
DIYablesHomePage()
Jalur URL
- Path: /
Karena menggunakan path root (/), halaman ini akan menjadi halaman utama ketika pengguna mengakses alamat IP ESP32 melalui browser.
2. DIYablesWebChatPage
DIYablesWebChatPage menyediakan antarmuka chat berbasis web yang memungkinkan komunikasi dua arah (bidirectional communication) antara browser dan ESP32. Aplikasi ini sangat cocok digunakan untuk mengirim perintah dari browser ke ESP32, menampilkan pesan balasan dari ESP32 secara real-time, dan membuat sistem komunikasi sederhana tanpa perlu membuka Serial Monitor Arduino IDE.
Konstruktor
DIYablesWebChatPage()
Jalur URL
- Path: /webchat
Metode yang Tersedia
void onWebChatMessage(std::function<void(const String&)> callback)
Menentukan fungsi callback yang akan dipanggil setiap kali browser mengirimkan pesan chat ke ESP32. Melalui callback ini, program Arduino dapat memproses isi pesan sesuai kebutuhan.
void sendToWebChat(const String& message)
Mengirimkan pesan dari ESP32 menuju antarmuka Web Chat. Metode ini biasanya digunakan untuk memberikan respons terhadap pesan yang dikirim oleh pengguna atau menampilkan informasi tertentu secara real-time.
3. DIYablesWebMonitorPage
DIYablesWebMonitorPage merupakan versi berbasis web dari Serial Monitor pada Arduino IDE. Halaman ini memungkinkan pengguna melihat data serial sekaligus mengirimkan perintah langsung melalui browser. Fitur ini sangat berguna ketika ESP32 dijalankan secara jarak jauh sehingga komputer tidak perlu selalu terhubung menggunakan kabel USB.
Konstruktor
DIYablesWebMonitorPage()
Jalur URL
- Path: /webmonitor
Metode yang Tersedia
void onWebMonitorMessage(std::function<void(const String&)> callback)
Menentukan callback yang akan dipanggil ketika browser mengirimkan data ke Web Monitor. Melalui callback ini, Arduino dapat menerima berbagai perintah dari pengguna.
void sendToWebMonitor(const String& message)
Mengirimkan data atau teks ke halaman Web Monitor sehingga tampil secara langsung pada browser.
Metode ini berfungsi layaknya Serial.println(), tetapi hasilnya ditampilkan pada antarmuka web.
4. DIYablesWebDigitalPinsPage
DIYablesWebDigitalPinsPage digunakan untuk mengendalikan sekaligus memantau status pin digital ESP32 melalui browser. Dengan halaman ini, pengguna dapat mengubah status pin maupun membaca kondisi input digital secara real-time.
Konstruktor
DIYablesWebDigitalPinsPage()
Jalur URL
- Path: /webdigitalpins
Metode yang Tersedia
void enablePin(int pin, int mode)
Mengaktifkan pin digital agar dapat dikontrol melalui antarmuka web.
Parameter:
- pin : nomor pin digital.
- mode : mode pin, yaitu WEB_PIN_OUTPUT atau WEB_PIN_INPUT.
void onPinWrite(std::function<void(int, int)> callback)
Menentukan callback yang dipanggil ketika pengguna mengubah status pin output melalui browser.
void onPinRead(std::function<int(int)> callback)
Menentukan callback untuk membaca kondisi pin input. Nilai yang dikembalikan callback akan langsung ditampilkan pada halaman web.
void onPinModeChange(std::function<void(int, int)> callback)
Dipanggil ketika mode suatu pin diubah, misalnya dari INPUT menjadi OUTPUT atau sebaliknya.
void updatePinState(int pin, int state)
Memperbarui status pin secara real-time pada seluruh browser yang sedang terhubung. Metode ini biasanya dipanggil setelah kondisi pin berubah akibat proses yang terjadi di dalam program Arduino.
5. DIYablesWebSliderPage
DIYablesWebSliderPage menyediakan dua buah slider yang dapat digunakan untuk mengatur nilai analog atau PWM secara interaktif. Halaman ini sangat cocok digunakan untuk mengontrol intensitas LED (PWM), kecepatan motor, posisi servo, dan nilai analog lainnya.
Konstruktor
DIYablesWebSliderPage()
Jalur URL
- Path: /webslider
Metode yang Tersedia
void onSliderValueFromWeb(std::function<void(int, int)> callback)
Menentukan callback ketika nilai slider berubah dari browser. Parameter callback:
- slider1 : nilai slider pertama (0–255).
- slider2 : nilai slider kedua (0–255).
void onSliderValueToWeb(std::function<void()> callback)
Dipanggil ketika browser meminta nilai slider terbaru dari ESP32. Metode ini memastikan posisi slider pada browser selalu sesuai dengan kondisi aktual di ESP32.
void sendToWebSlider(int slider1, int slider2)
Mengirimkan nilai kedua slider ke halaman web sehingga posisi slider diperbarui secara otomatis.
6. DIYablesWebJoystickPage
DIYablesWebJoystickPage menyediakan joystick virtual dua dimensi (2D) yang dapat digunakan untuk mengendalikan berbagai aplikasi robotika, kendaraan, maupun sistem navigasi. Joystick mengirimkan koordinat sumbu X dan Y secara real-time melalui WebSocket.
Konstruktor
DIYablesWebJoystickPage(bool autoReturn = true, float sensitivity = 10.0)
Parameter:
- autoReturn : menentukan apakah joystick akan kembali ke posisi tengah secara otomatis setelah dilepas.
- sensitivity : persentase perubahan minimum yang diperlukan sebelum data baru dikirimkan.
Jalur URL
- Path: /webjoystick
Metode yang Tersedia
void onJoystickValueFromWeb(std::function<void(int, int)> callback)
Menentukan callback ketika posisi joystick berubah pada browser.
Parameter callback:
- x : posisi sumbu X (-100 hingga 100).
- y : posisi sumbu Y (-100 hingga 100).
void onJoystickValueToWeb(std::function<void()> callback)
Dipanggil ketika browser meminta posisi joystick terbaru.
void sendToWebJoystick(int x, int y)
Mengirimkan posisi joystick dari ESP32 ke browser. Metode ini berguna ketika posisi joystick dikendalikan oleh program, bukan oleh pengguna.
void setAutoReturn(bool autoReturn)
Mengatur apakah joystick akan kembali ke titik tengah secara otomatis setelah dilepas.
void setSensitivity(float sensitivity)
Mengatur tingkat sensitivitas joystick. Semakin kecil nilai sensitivitas, semakin sering perubahan posisi dikirimkan melalui WebSocket.
7. DIYablesWebPlotterPage
DIYablesWebPlotterPage digunakan untuk menampilkan grafik data secara real-time langsung di browser. Halaman ini mendukung banyak data series, sehingga beberapa parameter sensor dapat ditampilkan dalam satu grafik secara bersamaan. Sangat cocok digunakan untuk monitoring sensor suhu, grafik kelembapan, tegangan, arus listrik, dan data eksperimen lainnya.
Konstruktor
DIYablesWebPlotterPage()
Jalur URL
- Path: /webplotter
Metode yang Tersedia
void setPlotTitle(const String& title)
Mengatur judul grafik.
void setAxisLabels(const String& xLabel, const String& yLabel)
Mengatur label pada sumbu X dan Y.
void enableAutoScale(bool enable)
Mengaktifkan atau menonaktifkan fitur Auto Scale pada sumbu Y. Ketika fitur ini aktif, skala grafik akan menyesuaikan secara otomatis berdasarkan nilai data yang diterima.
void setMaxSamples(int maxSamples)
Menentukan jumlah maksimum titik data yang ditampilkan pada grafik. Jika jumlah data melebihi batas tersebut, data lama akan dihapus secara otomatis.
void addDataPoint(const String& seriesName, float x, float y)
Menambahkan satu titik data ke dalam suatu data series.
Parameter:
- seriesName : nama seri data.
- x : koordinat sumbu X.
- y : koordinat sumbu Y.
void clearPlot()
Menghapus seluruh data yang sedang ditampilkan pada grafik. Metode ini biasanya digunakan ketika proses pengukuran dimulai kembali atau pengguna ingin mereset tampilan grafik.
8. DIYablesNotFoundPage
DIYablesNotFoundPage merupakan halaman 404 Not Found yang bersifat opsional. Jika pengguna membuka URL yang tidak tersedia pada server ESP32, halaman ini akan ditampilkan sebagai pengganti pesan kesalahan bawaan browser sehingga pengalaman pengguna menjadi lebih baik.
Konstruktor
DIYablesNotFoundPage()
Contoh Penggunaan Dasar DIYables ESP32 Web Apps
Contoh berikut memperlihatkan implementasi dasar DIYables ESP32 Web Apps Library dengan menambahkan tiga aplikasi web, yaitu Home Page, Web Chat, dan Web Monitor.
#include <DIYablesWebApps.h>
// WiFi credentials
const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";
// Create server and web applications
DIYablesWebAppServer webAppsServer(80, 81);
DIYablesHomePage homePage;
DIYablesWebChatPage chatPage;
DIYablesWebMonitorPage monitorPage;
void setup() {
Serial.begin(9600);
// Add only the applications you need
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&chatPage);
webAppsServer.addApp(&monitorPage);
// Optional: Add 404 page
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Start server
if (webAppsServer.begin(ssid, password)) {
Serial.println("Server started successfully");
Serial.print("IP: ");
Serial.println(webAppsServer.getIPAddress());
}
// Setup callbacks
chatPage.onWebChatMessage([](const String& message) {
Serial.println("Chat: " + message);
chatPage.sendToWebChat("Arduino received: " + message);
});
}
void loop() {
webAppsServer.loop();
delay(10);
}
Pada contoh tersebut, objek DIYablesWebAppServer dibuat untuk menjalankan HTTP Server dan WebSocket Server. Selanjutnya, hanya aplikasi yang diperlukan didaftarkan menggunakan fungsi addApp(), sehingga penggunaan memori tetap efisien sesuai konsep modular yang diterapkan oleh library. Setelah proses inisialisasi selesai, fungsi begin() digunakan untuk menghubungkan ESP32 ke jaringan WiFi sekaligus menjalankan web server. Jika koneksi berhasil, alamat IP ESP32 akan ditampilkan melalui Serial Monitor, sehingga dapat digunakan untuk mengakses seluruh aplikasi web melalui browser. Bagian berikutnya adalah konfigurasi callback pada DIYablesWebChatPage. Ketika browser mengirimkan sebuah pesan, callback onWebChatMessage() akan dipanggil secara otomatis.
Pesan tersebut kemudian ditampilkan pada Serial Monitor dan dibalas kembali ke browser menggunakan fungsi sendToWebChat(). Mekanisme ini menunjukkan bagaimana komunikasi dua arah (bidirectional communication) dapat dilakukan secara real-time menggunakan WebSocket. Terakhir, fungsi webAppsServer.loop() harus dipanggil secara terus-menerus di dalam loop() Arduino agar server tetap aktif, mampu menangani permintaan HTTP, serta memproses seluruh komunikasi WebSocket selama ESP32 berjalan. Dengan struktur seperti ini, Anda dapat menambahkan aplikasi web lainnya, seperti Web Slider, Web Joystick, Web Plotter, maupun Web Digital Pins, hanya dengan membuat objek baru dan mendaftarkannya menggunakan fungsi addApp().
Ikhtisar Aplikasi Web DIYables ESP32 Web Apps
DIYables ESP32 Web Apps menyediakan beberapa aplikasi web siap pakai yang dapat dijalankan secara bersamaan pada satu ESP32. Masing-masing aplikasi memiliki URL (endpoint) tersendiri sehingga pengguna dapat mengakses fungsi tertentu langsung melalui browser. Seluruh aplikasi menggunakan antarmuka yang responsif dan berkomunikasi dengan ESP32 melalui WebSocket, sehingga perubahan data dapat ditampilkan secara real-time tanpa perlu me-refresh halaman.
1. Home Page
Home Page merupakan halaman utama yang berfungsi sebagai pusat navigasi seluruh aplikasi web yang telah ditambahkan ke server.
URL: http://{esp32-ip}/
Fungsi:
- Menampilkan halaman utama server ESP32.
- Menyediakan menu menuju seluruh aplikasi web yang aktif.
Fitur:
- Navigasi ke seluruh aplikasi web.
- Menampilkan status koneksi server.
- Antarmuka responsif untuk berbagai perangkat.
2. WebChat
WebChat menyediakan antarmuka komunikasi dua arah antara browser dan ESP32.
URL: http://{esp32-ip}/webchat
Fungsi:
Digunakan untuk mengirim maupun menerima pesan secara langsung melalui browser.
Fitur:
- Komunikasi real-time menggunakan WebSocket.
- Riwayat percakapan.
- Indikator status koneksi WebSocket.
3. Web Monitor
Web Monitor merupakan pengganti Serial Monitor pada Arduino IDE yang dapat diakses melalui browser.
URL: http://{esp32-ip}/webmonitor
Fungsi:
Menampilkan data serial sekaligus menerima perintah dari pengguna secara real-time.
Fitur:
- Output serial secara langsung.
- Input perintah melalui browser.
- Tampilan Dark Mode yang nyaman digunakan.
4. Web Digital Pins
Aplikasi ini digunakan untuk mengendalikan sekaligus memantau kondisi pin digital ESP32 melalui browser.
URL: http://{esp32-ip}/webdigitalpins
Fungsi:
Mengontrol pin digital dan memantau perubahan statusnya secara real-time.
Fitur:
- Kontrol setiap pin secara individual.
- Operasi beberapa pin sekaligus.
- Sinkronisasi status pin secara real-time.
5. Web Slider
Web Slider menyediakan dua slider independen yang dapat digunakan untuk mengendalikan nilai analog atau PWM.
URL: http://{esp32-ip}/webslider
Fungsi:
Mengatur dua nilai analog secara bersamaan melalui browser.
Fitur:
- Dua slider independen.
- Rentang nilai 0–255.
- Nilai preset.
- Umpan balik (feedback) secara real-time.
6. Web Joystick
Web Joystick menyediakan joystick virtual dua dimensi (2D) yang sangat cocok digunakan untuk aplikasi robotika maupun sistem kendali kendaraan.
URL: http://{esp32-ip}/webjoystick
Fungsi:
Mengirimkan koordinat posisi joystick ke ESP32 secara real-time.
Fitur:
- Mendukung kontrol menggunakan mouse maupun layar sentuh.
- Menampilkan koordinat sumbu X dan Y.
- Sensitivitas joystick dapat diatur sesuai kebutuhan.
7. Web Plotter
Web Plotter digunakan untuk menampilkan grafik data sensor secara real-time langsung pada browser.
URL: http://{esp32-ip}/webplotter
Fungsi:
Memvisualisasikan data yang dikirim ESP32 dalam bentuk grafik.
Fitur:
- Mendukung beberapa data series sekaligus.
- Auto Scaling pada sumbu Y.
- Judul grafik dan label sumbu dapat dikustomisasi.
Komunikasi WebSocket
Seluruh aplikasi pada DIYables ESP32 Web Apps menggunakan WebSocket sebagai media komunikasi utama antara browser dan ESP32. Berbeda dengan HTTP biasa yang menggunakan mekanisme request dan response, WebSocket mempertahankan koneksi tetap aktif sehingga pertukaran data dapat dilakukan secara langsung tanpa perlu membuka koneksi baru setiap kali mengirim data. Konfigurasi default komunikasi WebSocket adalah sebagai berikut.
- Port WebSocket: 81
- URL WebSocket: ws://{esp32-ip}:81
- Reconnect: Otomatis melakukan penyambungan kembali apabila koneksi terputus.
- Protokol: Pesan berbasis teks (Text-based Protocol).
Arsitektur ini memungkinkan seluruh aplikasi web memperbarui data secara real-time dengan latensi yang sangat rendah.
Format Pesan WebSocket
Setiap aplikasi menggunakan format pesan yang berbeda sesuai dengan jenis data yang dikirimkan.
1. WebChat
Pesan dari Browser ke ESP32
Pesan teks biasa.
Pesan dari ESP32 ke Browser
Pesan teks biasa.
2. Web Monitor
Pesan dari Browser ke ESP32
Pesan teks biasa.
Pesan dari ESP32 ke Browser
Pesan teks biasa.
3. Web Digital Pins
Komunikasi dilakukan menggunakan format JSON.
Pesan dari Browser
{"pin":13,"state":1
Pesan dari ESP32
{"pin":13,"state":1}
Keterangan:
- pin menunjukkan nomor pin digital.
- state menunjukkan kondisi pin (0 atau 1).
4. Web Slider
Data slider juga dikirim menggunakan format JSON.
Pesan dari Browser
{"slider1":128,"slider2":255}
Pesan dari ESP32
{"slider1":128,"slider2":255}
5. Web Joystick
Posisi joystick dikirim menggunakan koordinat sumbu X dan Y.
Pesan dari Browser
{"x":50,"y":-25}
Pesan dari ESP32
{"x":50,"y":-25}
6. Web Plotter
Berbeda dengan aplikasi lainnya, Web Plotter hanya menerima data dari ESP32.
Pesan dari Browser
Tidak digunakan.
Pesan dari ESP32
{"series":"temp","x":10.5,"y":23.4}
Keterangan:
- series : nama seri data.
- x : nilai sumbu X.
- y : nilai sumbu Y.
Penanganan Kesalahan (Error Handling)
DIYables ESP32 Web Apps telah dilengkapi mekanisme penanganan kesalahan otomatis sehingga aplikasi tetap berjalan dengan stabil ketika terjadi gangguan. Beberapa kondisi yang ditangani secara otomatis antara lain:
- Kegagalan saat menghubungkan ESP32 ke jaringan WiFi.
- Koneksi WebSocket yang terputus secara tiba-tiba.
- Format pesan yang tidak sesuai.
- Batas maksimum jumlah klien yang terhubung.
Dengan mekanisme ini, aplikasi menjadi lebih andal ketika digunakan dalam proyek monitoring maupun sistem kontrol berbasis web.
Penggunaan Memori
Salah satu keunggulan utama DIYables ESP32 Web Apps adalah penggunaan arsitektur modular, sehingga hanya aplikasi yang benar-benar diperlukan saja yang dimuat ke dalam program. Pendekatan ini membantu menghemat penggunaan Flash dan RAM pada ESP32. Berikut adalah perkiraan kebutuhan memori masing-masing komponen:
Perkiraan total ketika seluruh aplikasi diaktifkan:
- Flash: sekitar 53 KB
- RAM: sekitar 12 KB
Sedangkan konfigurasi minimal yang hanya terdiri dari Server, Home Page, dan satu aplikasi web membutuhkan sekitar:
- Flash: ±17 KB
- RAM: ±4,5 KB
Kompatibilitas Browser
DIYables ESP32 Web Apps dirancang menggunakan teknologi web modern sehingga dapat dijalankan pada hampir semua browser yang mendukung WebSocket. Browser yang didukung meliputi:
- Google Chrome 50 atau lebih baru.
- Mozilla Firefox 45 atau lebih baru.
- Safari 10 atau lebih baru.
- Microsoft Edge 79 atau lebih baru.
- Browser mobile seperti Safari iOS dan Chrome Mobile.
Catatan Keamanan
Secara default, library tidak menerapkan mekanisme autentikasi sehingga seluruh perangkat pada jaringan yang sama dapat mengakses aplikasi web ESP32. Oleh karena itu, library ini lebih disarankan digunakan pada jaringan lokal (Local Area Network/LAN) atau lingkungan yang terpercaya. Jika aplikasi akan diakses melalui internet, sebaiknya tambahkan lapisan keamanan tambahan, misalnya:
- Sistem login (authentication).
- HTTPS atau reverse proxy.
- Pembatasan alamat IP.
- Firewall maupun VPN.
Langkah tersebut akan membantu meningkatkan keamanan ketika ESP32 digunakan pada lingkungan produksi.
Pemecahan Masalah (Troubleshooting)
Berikut beberapa masalah yang paling sering ditemui beserta solusi yang dapat dicoba:
1. ESP32 Tidak Dapat Terhubung ke WiFi
Periksa beberapa hal berikut.
- Pastikan SSID dan password telah benar.
- Gunakan jaringan WiFi 2,4 GHz, karena sebagian besar modul ESP32 tidak mendukung jaringan 5 GHz.
- Pastikan sinyal WiFi cukup kuat.
2. Koneksi WebSocket Gagal
Jika browser gagal terhubung ke WebSocket, lakukan pemeriksaan berikut.
- Pastikan alamat IP ESP32 sudah benar.
- Periksa firewall yang mungkin memblokir koneksi.
- Coba menggunakan browser lain.
3. Penggunaan Memori Terlalu Tinggi
Jika ESP32 sering mengalami restart atau kehabisan memori, beberapa langkah berikut dapat membantu.
- Nonaktifkan aplikasi web yang tidak digunakan.
- Batasi jumlah klien yang terhubung secara bersamaan.
- Restart ESP32 apabila terjadi fragmentasi memori.
4. Respons Aplikasi Terasa Lambat
Jika komunikasi terasa lambat, lakukan beberapa optimasi berikut.
- Pastikan kualitas sinyal WiFi baik.
- Kurangi frekuensi pengiriman pesan melalui WebSocket.
- Hindari proses yang terlalu berat di dalam fungsi callback.
Contoh Aplikasi (Examples)
DIYables ESP32 Web Apps telah menyediakan berbagai contoh proyek yang dapat digunakan sebagai referensi untuk mempelajari setiap fitur library. Beberapa contoh yang tersedia antara lain:
- WebChat — komunikasi dua arah antara browser dan ESP32.
- WebMonitor — pengganti Serial Monitor berbasis web.
- WebDigitalPins — kontrol seluruh pin digital dengan indikator status secara real-time.
- WebSlider — pengendalian dua nilai analog atau PWM menggunakan slider.
- WebJoystick — kontrol posisi dua dimensi untuk aplikasi robotika.
- MultipleWebApps — menjalankan beberapa aplikasi web secara bersamaan dalam satu ESP32.
Seluruh contoh program dapat ditemukan pada folder examples/, sedangkan dokumentasi instalasi dan konfigurasi tersedia pada folder docs/.
Platform Abstraction Interface
Salah satu desain menarik pada DIYables ESP32 Web Apps adalah penggunaan Platform Abstraction Layer (PAL) atau lapisan abstraksi platform.
Melalui pendekatan ini, logika utama aplikasi web dipisahkan dari implementasi perangkat keras, sehingga library lebih mudah dipindahkan ke platform lain tanpa harus mengubah kode inti.
A. Antarmuka Inti (Core Interfaces)
Library menyediakan beberapa antarmuka (interface) sebagai dasar komunikasi antara Web Apps dan platform perangkat keras.
1. IWebClient
Antarmuka untuk menangani koneksi HTTP Client.
class IWebClient {
public:
virtual ~IWebClient() = default;
// Stream interface methods
virtual int available() = 0;
virtual int read() = 0;
virtual int peek() = 0;
virtual size_t write(uint8_t data) = 0;
virtual size_t write(const uint8_t* buffer, size_t size) = 0;
virtual void flush() = 0;
// Connection management
virtual bool connected() = 0;
virtual void stop() = 0;
// Convenience methods
virtual void print(const String& str) = 0;
virtual void println(const String& str) = 0;
};
2. IWebSocket
Antarmuka yang digunakan untuk komunikasi dua arah melalui WebSocket.
class IWebSocket {
public:
enum DataType {
TEXT = 1,
BINARY = 2
};
enum CloseCode {
NORMAL_CLOSURE = 1000,
GOING_AWAY = 1001,
PROTOCOL_ERROR = 1002,
UNSUPPORTED_DATA = 1003,
POLICY_VIOLATION = 1008,
MESSAGE_TOO_BIG = 1009,
INTERNAL_ERROR = 1011
};
virtual ~IWebSocket() = default;
// Message handling
virtual void sendText(const char* message) = 0;
virtual void sendBinary(const uint8_t* data, size_t length) = 0;
virtual bool isConnected() const = 0;
virtual void close(CloseCode code = NORMAL_CLOSURE, const char* reason = nullptr) = 0;
// Event callbacks
virtual void onMessage(std::function<void(IWebSocket*, DataType, const char*, uint16_t)> callback) = 0;
virtual void onClose(std::function<void(IWebSocket*, CloseCode, const char*, uint16_t)> callback) = 0;
};
3. IWebServer
Antarmuka dasar untuk implementasi HTTP Server.
class IWebServer {
public:
virtual ~IWebServer() = default;
// Server lifecycle
virtual bool begin() = 0;
virtual void stop() = 0;
virtual IWebClient* available() = 0;
// Configuration
virtual void setPort(uint16_t port) = 0;
virtual uint16_t getPort() const = 0;
};
4. IWebSocketServer
Antarmuka server WebSocket yang bertanggung jawab mengelola koneksi klien.
class IWebSocketServer {
public:
using ConnectionCallback = std::function<void(IWebSocket*)>;
using MessageCallback = std::function<void(IWebSocket*, IWebSocket::DataType, const char*, uint16_t)>;
virtual ~IWebSocketServer() = default;
// Server lifecycle
virtual bool begin() = 0;
virtual void stop() = 0;
virtual void listen() = 0;
// Event handling
virtual void onConnection(ConnectionCallback callback) = 0;
virtual void onMessage(MessageCallback callback) = 0;
// Broadcasting
virtual void broadcastText(const char* message) = 0;
virtual void broadcastBinary(const uint8_t* data, size_t length) = 0;
// Configuration
virtual void setPort(uint16_t port) = 0;
virtual uint16_t getPort() const = 0;
};
5. INetworkProvider
Antarmuka untuk mengelola konektivitas jaringan, seperti WiFi maupun Ethernet.
class INetworkProvider {
public:
virtual ~INetworkProvider() = default;
// Network lifecycle
virtual bool begin(const char* ssid, const char* password) = 0;
virtual void end() = 0;
virtual bool isConnected() = 0;
// Network information
virtual String getLocalIP() = 0;
virtual String getSSID() = 0;
virtual int32_t getRSSI() = 0;
};
6. IServerFactory
Factory Interface yang digunakan untuk membuat implementasi server sesuai platform yang digunakan.
class IServerFactory {
public:
virtual ~IServerFactory() = default;
// Factory methods
virtual INetworkProvider* createNetworkProvider() = 0;
virtual IWebServer* createWebServer(uint16_t port) = 0;
virtual IWebSocketServer* createWebSocketServer(uint16_t port) = 0;
// Platform information
virtual String getPlatformName() const = 0;
};
B. Contoh Implementasi Platform
Pada platform ESP32, seluruh antarmuka tersebut telah diimplementasikan menggunakan library DIYables_ESP32_WebServer.
class ESP32ServerFactory : public IServerFactory {
public:
INetworkProvider* createNetworkProvider() override {
return new ESP32NetworkProvider();
}
IWebServer* createWebServer(uint16_t port) override {
return new ESP32WebServer(port);
}
IWebSocketServer* createWebSocketServer(uint16_t port) override {
return new ESP32WebSocketServer(port);
}
String getPlatformName() const override {
return "ESP32";
}
};
Dengan pendekatan ini, logika utama Web Apps tidak perlu mengetahui detail implementasi server maupun jaringan yang digunakan oleh ESP32.
C. Menambahkan Dukungan Platform Baru
Jika ingin menggunakan library ini pada platform lain, langkah-langkah yang perlu dilakukan relatif sederhana.
- Implementasikan seluruh interface yang diperlukan pada platform target.
- Buat ServerFactory yang menghasilkan implementasi server sesuai platform tersebut.
- Implementasikan sistem jaringan dan WebSocket yang sesuai dengan platform.
- Uji seluruh Web App yang sudah tersedia tanpa perlu mengubah logika inti library.
ESP32ServerFactory factory;
DIYablesWebAppServer server(factory, 80, 81);
// ESP32 (hypothetical)
ESP32ServerFactory esp32Factory;
DIYablesWebAppServer esp32Server(esp32Factory, 80, 81);
Pendekatan ini memungkinkan proses porting ke platform baru dilakukan dengan lebih mudah karena seluruh logika aplikasi tetap dapat digunakan kembali.
Keunggulan Desain Berbasis Interface
Penggunaan desain berbasis interface memberikan sejumlah keuntungan dalam pengembangan library, di antaranya:
- Platform Independent, sehingga logika inti Web Apps dapat digunakan pada berbagai platform perangkat keras.
- Mudah Dikembangkan, karena dukungan terhadap platform baru dapat ditambahkan tanpa mengubah kode utama.
- Maintainability Lebih Baik, sebab implementasi spesifik platform dipisahkan dari logika aplikasi.
- Mendukung Unit Testing, karena setiap interface dapat dibuat versi simulasi (mock implementation) untuk proses pengujian.
- API yang Konsisten, sehingga cara penggunaan library tetap sama meskipun implementasi platform berbeda.
Dengan desain seperti ini, DIYables ESP32 Web Apps tidak hanya cocok digunakan pada proyek berbasis ESP32 saat ini, tetapi juga memiliki fondasi yang fleksibel untuk mendukung platform lain di masa mendatang.
Dalam praktik, hasil dan kendala yang ditemui bisa berbeda tergantung perangkat, konfigurasi, versi library, dan sistem yang digunakan.
- Diskusi umum dan tanya jawab praktik: https://t.me/edukasielektronika
- Kendala spesifik dan kasus tertentu: http://bit.ly/Chatarduino
0 Komentar