DIYables ESP32 Web Apps CustomWebApp merupakan sebuah template yang disediakan oleh DIYables ESP32 WebApps Library untuk memudahkan pengembangan aplikasi web berbasis ESP32. Template ini dirancang sebagai fondasi awal sehingga pengguna dapat membuat antarmuka web (Web UI) sesuai kebutuhan tanpa harus membangun sistem komunikasi dari awal. Salah satu keunggulan utama template ini adalah penggunaan WebSocket sebagai media komunikasi antara browser dan ESP32. Berbeda dengan HTTP biasa yang mengharuskan browser mengirim permintaan (request) setiap kali ingin memperoleh data terbaru, WebSocket mempertahankan koneksi tetap terbuka (persistent connection), sehingga data dapat dikirim dan diterima secara real-time ke dua arah (bidirectional).
Dengan pendekatan tersebut, aplikasi dapat menampilkan data sensor, menerima perintah dari pengguna, memperbarui status perangkat, maupun mengendalikan berbagai perangkat IoT secara instan tanpa perlu melakukan refresh halaman. Template ini sangat cocok digunakan sebagai dasar untuk mengembangkan berbagai aplikasi, seperti:
- Dashboard monitoring sensor.
- Sistem kontrol perangkat IoT.
- Panel konfigurasi perangkat ESP32.
- Monitoring data secara real-time.
- Sistem otomasi berbasis web.
- Berbagai aplikasi web lainnya yang membutuhkan komunikasi dua arah antara browser dan ESP32.
Karena hanya menyediakan struktur dasar aplikasi, pengguna bebas memodifikasi tampilan maupun logika program sesuai kebutuhan proyek. Pengetahuan dasar mengenai HTML, CSS, dan JavaScript akan sangat membantu apabila ingin mengembangkan antarmuka web yang lebih kompleks.
Apa yang Akan Dipelajari?
Pada tutorial ini Anda akan mempelajari berbagai konsep dasar dalam membangun aplikasi web menggunakan ESP32, di antaranya:
- Membuat aplikasi web kustom menggunakan DIYables ESP32 WebApps Library.
- Mengintegrasikan halaman web ke dalam ekosistem DIYables ESP32 WebApps.
- Mengirim data dari browser menuju ESP32 menggunakan WebSocket.
- Mengirim data dari ESP32 ke browser secara real-time.
- Mengelola koneksi WebSocket beserta mekanisme auto reconnect.
- Membuat antarmuka web yang responsif sehingga dapat diakses melalui komputer maupun smartphone.
- Memanfaatkan template CustomWebApp sebagai dasar pengembangan aplikasi IoT yang lebih kompleks.
Fitur Utama DIYables ESP32 Web Apps CustomWebApp
Template CustomWebApp menyediakan berbagai fitur yang mempermudah proses pengembangan aplikasi web pada ESP32.
1. Terintegrasi dengan DIYables ESP32 WebApps Library
Template telah dirancang agar dapat langsung digunakan bersama library DIYables ESP32 WebApps tanpa memerlukan konfigurasi tambahan yang rumit.
2. Template Siap Digunakan
Struktur proyek sudah disusun dengan rapi sehingga dapat langsung dijadikan dasar pengembangan aplikasi web berbasis ESP32.
3. Mudah Dikembangkan
Seluruh bagian kode dapat dimodifikasi sesuai kebutuhan. Anda dapat menambahkan halaman baru, komponen antarmuka, maupun logika program tanpa mengubah struktur utama library.
4. Komunikasi Real-Time Menggunakan WebSocket
Template mendukung komunikasi dua arah antara browser dan ESP32 melalui WebSocket sehingga pertukaran data berlangsung secara cepat tanpa perlu me-refresh halaman.
5. Auto Reconnect
Apabila koneksi WebSocket terputus akibat gangguan jaringan atau ESP32 melakukan restart, browser akan mencoba melakukan koneksi ulang secara otomatis.
6. Antarmuka Responsif
Halaman web telah dirancang agar dapat menyesuaikan ukuran layar sehingga tetap nyaman digunakan melalui komputer, tablet, maupun smartphone.
7. Struktur Kode Mudah Dipahami
Susunan file dibuat sederhana sehingga memudahkan pengguna mempelajari hubungan antara program ESP32 dan halaman web.
8. Fleksibel untuk Berbagai Proyek
Template ini dapat dikembangkan menjadi berbagai jenis aplikasi, seperti dashboard monitoring, sistem kontrol perangkat, data logger, maupun aplikasi Internet of Things (IoT) lainnya.
Perangkat Keras yang Digunakan
Sebelum memulai tutorial, siapkan beberapa perangkat berikut.
- Modul ESP32 ESP-WROOM-32 Dev Board 38 Pin
- Kabel USB yang mendukung transfer data
Cara Menjalankan Contoh Web Custom
Sebelum mulai mengembangkan aplikasi web pada ESP32, sebaiknya pahami terlebih dahulu alur kerja dari template yang disediakan. Dengan memahami struktur proyek sejak awal, proses pengembangan aplikasi akan menjadi lebih mudah dan terorganisir. Pada tutorial ini Anda akan mempelajari beberapa tahapan penting, yaitu:
1. Menjalankan template CustomWebApp pada ESP32.
2. Memastikan aplikasi dapat diakses melalui browser.
3. Memahami mekanisme komunikasi antara browser dan ESP32 menggunakan WebSocket.
4. Mempelajari struktur file penyusun aplikasi.
5. Mengubah tampilan maupun logika aplikasi sesuai kebutuhan proyek.
6. Mengelola beberapa aplikasi web dalam satu proyek ESP32 tanpa terjadi konflik.
Setelah memahami tahapan tersebut, Anda dapat mengembangkan aplikasi yang lebih kompleks, misalnya dashboard monitoring sensor, panel kontrol perangkat, sistem otomasi, maupun aplikasi Internet of Things (IoT) lainnya.
Instalasi DIYables ESP32 WebApps Library
Ikuti langkah-langkah berikut untuk menginstal library pada Arduino IDE:
1. Hubungkan ESP32 ke Komputer
Hubungkan papan ESP32 ke komputer menggunakan kabel USB yang mendukung transfer data.
2. Jalankan Arduino IDE
Buka aplikasi Arduino IDE yang telah terpasang pada komputer.
3. Pilih Board dan Port
Melalui menu Tools, pilih jenis board ESP32 yang digunakan kemudian tentukan Port COM yang sesuai.
4. Buka Library Manager
Klik ikon Library Manager pada panel sebelah kiri Arduino IDE.
5. Cari Library
Ketikkan DIYables ESP32 WebApps pada kolom pencarian.
6. Install Library
Pilih DIYables ESP32 WebApps Library, kemudian klik Install. Setelah proses instalasi selesai, library siap digunakan.
7. Install Library Dependensi
Selama proses instalasi biasanya Arduino IDE akan meminta pemasangan beberapa library tambahan yang menjadi dependensi. Klik tombol Install All agar seluruh dependensi terpasang secara otomatis.
Membuka Contoh Program CustomWebApp
Setelah library berhasil diinstal, buka contoh program melalui menu File → Examples → DIYables ESP32 WebApps → CustomWebApp. Contoh program tersebut terdiri dari empat file utama yang saling bekerja sama.
1. CustomWebApp.ino
Merupakan program utama ESP32. Seluruh logika aplikasi ditulis pada file ini, seperti pembacaan sensor, pengendalian perangkat, pengiriman data ke browser, maupun penerimaan data dari browser.
2. CustomWebApp.h
File header yang berisi deklarasi kelas, fungsi, serta konfigurasi yang diperlukan agar aplikasi dapat berkomunikasi dengan library DIYables ESP32 WebApps.
3. CustomWebApp.cpp
Berisi implementasi seluruh fungsi yang telah dideklarasikan pada file header. File ini menangani proses integrasi antara aplikasi dengan library.
4. custom_page.html.h
File ini menyimpan seluruh kode halaman web yang terdiri dari HTML, CSS dan JavaScript. Seluruh antarmuka pengguna (User Interface) berada pada file ini. Anda dapat memodifikasi tampilan, menambahkan tombol, form, grafik, maupun fitur lainnya sesuai kebutuhan proyek.
Menghubungkan ESP32 ke Jaringan WiFi
Sebelum program diunggah, ubah terlebih dahulu informasi jaringan WiFi sesuai dengan jaringan yang akan digunakan.
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
Masukkan nama jaringan (SSID) dan password WiFi yang benar agar ESP32 dapat terhubung ke jaringan lokal.
Mengunggah Program ke ESP32
1. Klik tombol Upload pada Arduino IDE untuk mengompilasi sekaligus mengunggah program ke papan ESP32.
2. Jika proses upload berhasil, buka Serial Monitor untuk melihat proses koneksi ESP32 ke jaringan WiFi.
3. Jika tidak muncul informasi apa pun pada Serial Monitor, tekan tombol Reset pada papan ESP32 atau lakukan restart perangkat.
4. Setelah berhasil terhubung, Serial Monitor akan menampilkan alamat IP yang diperoleh ESP32, misalnya: http://10.195.113.32
5. Catat alamat IP tersebut karena akan digunakan untuk mengakses aplikasi web melalui browser.
Mengakses Halaman Web ESP32
1. Buka browser pada komputer maupun smartphone yang masih berada dalam jaringan WiFi yang sama, kemudian masukkan alamat IP ESP32. Contoh: http://10.195.113.32. Halaman utama DIYables ESP32 WebApps akan muncul seperti berikut:
2. Selanjutnya klik menu Web Custom untuk membuka aplikasi CustomWebApp.
3. Selain melalui halaman utama, Anda juga dapat membuka aplikasi secara langsung menggunakan URL http://10.195.113.32/web-custom
Dengan cara tersebut browser akan langsung membuka halaman CustomWebApp tanpa melewati halaman utama. Setelah halaman terbuka, cobalah mengirim pesan melalui antarmuka web. Perhatikan bahwa setiap pesan akan langsung diterima oleh ESP32 dan hasilnya dapat diamati melalui Serial Monitor secara real-time.
Menguji dan Memverifikasi CustomWebApp
Setelah template berhasil dijalankan, lakukan beberapa pengujian berikut untuk memastikan seluruh fitur bekerja dengan baik.
1. Memeriksa Antarmuka Halaman Web
Halaman web bawaan CustomWebApp menyediakan beberapa komponen utama.
- Status Connection, yang menunjukkan apakah browser telah berhasil terhubung dengan ESP32 melalui WebSocket.
- Message Input, yaitu kolom untuk memasukkan teks atau perintah yang akan dikirim ke ESP32.
- Send Button, digunakan untuk mengirim pesan. Selain tombol tersebut, pengguna juga dapat menekan tombol Enter pada keyboard.
- ESP32 Message Area, yaitu area yang akan menampilkan setiap pesan yang dikirim oleh ESP32 secara real-time.
2. Memahami Cara Kerja ESP32
Selama koneksi WebSocket aktif, ESP32 akan terus memantau pesan yang dikirim oleh browser. Program dapat melakukan berbagai tindakan, misalnya:
- Menerima dan memproses setiap pesan yang dikirim browser.
- Mengirim balasan sesuai logika program yang dibuat.
- Mengirim data sensor atau informasi lainnya secara berkala tanpa harus menunggu permintaan dari browser.
- Menampilkan seluruh aktivitas komunikasi pada Serial Monitor untuk mempermudah proses debugging.
3. Menguji Komunikasi Dua Arah
Untuk memastikan komunikasi WebSocket berjalan dengan baik, lakukan langkah-langkah berikut:
- Ketik pesan, misalnya Halo ESP32, pada kolom input.
- Tekan tombol Send atau tekan tombol Enter.
- Periksa Serial Monitor dan pastikan pesan telah diterima oleh ESP32.
- Amati halaman web dan pastikan ESP32 mengirimkan balasan sesuai program yang dijalankan.
- Tunggu beberapa saat dan pastikan data yang dikirim secara periodik, seperti uptime, nilai sensor, atau informasi lainnya, muncul secara otomatis tanpa perlu me-refresh halaman.
Jika seluruh pengujian di atas berhasil dilakukan, berarti komunikasi dua arah menggunakan WebSocket telah bekerja dengan baik. Template DIYables ESP32 Web Apps CustomWebApp kini siap dijadikan dasar untuk mengembangkan berbagai aplikasi Internet of Things (IoT) yang lebih kompleks, mulai dari sistem monitoring, dashboard interaktif, hingga panel kontrol perangkat berbasis web.
Memahami Protokol Komunikasi dan Cara Kerjanya di Balik Layar
Agar dapat mengembangkan aplikasi web yang lebih kompleks, penting untuk memahami bagaimana proses komunikasi antara browser dan ESP32 berlangsung di balik layar. Dengan memahami mekanisme ini, Anda akan lebih mudah memodifikasi template, menambahkan fitur baru, serta mengelola beberapa aplikasi web dalam satu perangkat ESP32 tanpa menimbulkan konflik.
Memahami Sistem Application Identifier (App ID)
Template CustomWebApp menggunakan Application Identifier (App ID) sebagai identitas unik pada setiap pesan yang dikirim melalui WebSocket. App ID berfungsi sebagai penanda sehingga browser dan ESP32 dapat mengetahui aplikasi mana yang menjadi tujuan dari setiap pesan. Konsep ini sangat penting ketika satu perangkat ESP32 menjalankan beberapa aplikasi web secara bersamaan. Tanpa adanya App ID, seluruh aplikasi akan menerima semua pesan yang masuk sehingga berpotensi menyebabkan konflik komunikasi. Dengan adanya App ID, setiap aplikasi hanya akan memproses pesan yang memang ditujukan kepadanya, sedangkan pesan milik aplikasi lain akan diabaikan. Pendekatan ini membuat setiap aplikasi dapat berjalan secara independen walaupun menggunakan koneksi WebSocket yang sama.
Implementasi pada Sisi ESP32
Implementasi App ID pada sisi ESP32 terdapat pada file berikut:
- CustomWebApp.h
- CustomWebApp.cpp
// In CustomWebApp.h
class CustomWebAppPage : public DIYablesWebAppPageBase {
private:
// WebSocket message identifier for this custom app
static const String APP_IDENTIFIER;
// ...
};
// In CustomWebApp.cpp
const String CustomWebAppPage::APP_IDENTIFIER = "CUSTOM:";
// Usage in handleWebSocketMessage:
if (message.startsWith(APP_IDENTIFIER)) {
String payload = message.substring(APP_IDENTIFIER.length());
// Process clean payload without identifier
}
// Usage in sendToWeb:
broadcastToAllClients(APP_IDENTIFIER + message);
Implementasi pada Sisi JavaScript
Pada sisi browser, App ID diterapkan pada file:
custom_page.html.h
// WebSocket message identifier for this custom app
const APP_IDENTIFIER = 'CUSTOM:';
// Usage in receiving:
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// Process clean message without identifier
}
// Usage in sending:
ws.send(APP_IDENTIFIER + userInput);
Keunggulan Menggunakan Application Identifier (App ID)
Penggunaan Application Identifier (App ID) memberikan berbagai keuntungan dalam pengembangan aplikasi web berbasis ESP32.
- Konfigurasi lebih sederhana, karena identitas aplikasi hanya perlu ditentukan pada satu bagian kode.
- Mengurangi risiko kesalahan, terutama akibat penggunaan nama aplikasi yang tidak konsisten.
- Mendukung banyak aplikasi dalam satu proyek, sehingga ESP32 dapat menjalankan beberapa WebApp secara bersamaan.
- Mencegah konflik komunikasi, karena setiap aplikasi hanya menerima pesan yang sesuai dengan App ID miliknya.
- Struktur program lebih rapi, sehingga proses debugging, pemeliharaan, dan pengembangan menjadi lebih mudah.
Hal yang Perlu Diperhatikan Saat Menggunakan App ID
Agar komunikasi WebSocket berjalan dengan benar, perhatikan beberapa aturan berikut.
- Gunakan App ID yang sama pada program ESP32 maupun JavaScript.
- Jika App ID diubah, lakukan perubahan pada seluruh bagian kode yang menggunakannya.
- Berikan App ID yang berbeda untuk setiap aplikasi web yang dijalankan pada ESP32.
- Hindari menggunakan App ID yang telah digunakan oleh aplikasi bawaan DIYables ESP32 WebApps Library agar tidak terjadi konflik komunikasi.
Tips Memilih Application Identifier (App ID)
Sebaiknya gunakan nama App ID yang unik, mudah dikenali, dan menggambarkan fungsi aplikasi. Contohnya:
- TEMP_SENSOR
- SMART_HOME
- WEATHER_MONITOR
-DEVICE_CONTROL
- ENERGY_MONITOR
- GREENHOUSE_SYSTEM
Penamaan yang konsisten akan sangat membantu ketika proyek berkembang menjadi lebih besar atau terdiri atas banyak modul.
Alur Komunikasi WebSocket
Secara umum, komunikasi pada template CustomWebApp berlangsung dalam dua arah, yaitu dari browser menuju ESP32 dan dari ESP32 menuju browser.
Komunikasi dari Browser ke ESP32
Sebagai contoh, pengguna mengetikkan pesan Hello pada halaman web kemudian menekan tombol Send. Mekanisme yang terjadi adalah sebagai berikut:
1. JavaScript Menambahkan App ID
Sebelum pesan dikirim melalui WebSocket, JavaScript secara otomatis menambahkan Application Identifier (APP_IDENTIFIER).
Sebagai contoh:
Pesan yang diketik pengguna:
Hello
Pesan yang dikirim melalui WebSocket:
CUSTOM:Hello
Dengan cara ini ESP32 dapat mengenali bahwa pesan tersebut ditujukan untuk aplikasi CustomWebApp.
2. Library DIYables ESP32 WebApps Menerima Pesan
Library menerima pesan:
CUSTOM:Hello
Selanjutnya pesan diteruskan menuju fungsi:
CustomWebAppPage::handleWebSocketMessage()
3. CustomWebApp Menghapus App ID
Di dalam fungsi handleWebSocketMessage(), sistem akan memeriksa apakah pesan diawali dengan APP_IDENTIFIER.
Jika sesuai, bagian CUSTOM: akan dihapus menggunakan fungsi .substring(APP_IDENTIFIER.length()). Sehingga hanya tersisa Hello. Pesan bersih inilah yang kemudian dikirim ke fungsi callback pada file CustomWebApp.ino.
4. Program Utama Memproses Pesan
Pada tahap ini, program ESP32 hanya menerima isi pesan tanpa App ID. Sebagai contoh “Hello”. Selanjutnya Anda bebas menentukan logika program, misalnya:
- Menghidupkan LED.
- Menggerakkan motor servo.
- Membaca sensor.
- Mengaktifkan relay.
- Mengirim balasan kembali ke browser.
Komunikasi dari ESP32 ke Browser
Selain menerima pesan dari browser, ESP32 juga dapat mengirim data ke halaman web secara real-time. Sebagai contoh, ESP32 ingin mengirim informasi "Temperature: 25°C". Alur komunikasinya adalah sebagai berikut:
1. Program Memanggil Fungsi sendToWeb()
Pada file CustomWebApp.ino, data dikirim menggunakan fungsi:
customPage.sendToWeb("Temperature: 25°C");
2. CustomWebApp Menambahkan App ID
Sebelum data dikirim melalui WebSocket, library secara otomatis menambahkan Application Identifier. Data yang dikirim menjadi:
CUSTOM:Temperature: 25°C
Kemudian pesan tersebut dikirim ke seluruh browser yang sedang terhubung.
3. JavaScript Memfilter Pesan
Browser menerima seluruh pesan WebSocket. Namun JavaScript hanya akan memproses pesan yang diawali dengan:
CUSTOM:
Selanjutnya bagian App ID dihapus menggunakan fungsi:
.substring(APP_IDENTIFIER.length())
4. Halaman Web Menampilkan Data
Setelah App ID dihapus, halaman web hanya menerima isi data.
Contohnya:
Temperature: 25°C
Data tersebut kemudian dapat ditampilkan dalam berbagai bentuk, misalnya:
- Teks biasa.
- Nilai sensor.
- Status perangkat.
- Grafik (Chart).
- Gauge.
- Dashboard monitoring.
- Tabel data.
Anda dapat memodifikasi kode JavaScript sesuai kebutuhan sehingga data ditampilkan dengan format yang paling sesuai untuk aplikasi Anda.
Struktur Arsitektur CustomWebApp
Template CustomWebApp terdiri dari empat file utama yang saling berhubungan.
Dengan pemisahan tersebut, pengembangan aplikasi menjadi lebih terstruktur karena logika ESP32 dan tampilan web berada pada file yang berbeda.
Memodifikasi Template Sesuai Kebutuhan Proyek
Template CustomWebApp dirancang agar mudah dikembangkan menjadi berbagai aplikasi IoT.Berikut beberapa bagian yang umumnya dimodifikasi.
1. Integrasi Perangkat Keras
a. Menambahkan Inisialisasi Perangkat Keras
Tambahkan proses inisialisasi sensor maupun aktuator pada fungsi setup() di file CustomWebApp.ino.
void setup() {
Serial.begin(9600);
// Add your hardware initialization here
pinMode(LED_BUILTIN, OUTPUT); // Built-in LED
pinMode(3, OUTPUT); // PWM output pin
pinMode(4, INPUT_PULLUP); // Button input with pullup
pinMode(A0, INPUT); // Analog sensor input
// Initialize sensors, displays, motors, etc.
// servo.attach(9);
// lcd.begin(16, 2);
// Rest of setup...
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&customPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
b. Menambahkan Perintah Kustom
Perluas fungsi callback agar ESP32 mampu mengenali berbagai perintah dari browser. Sebagai contoh:
- ON
- OFF
- START
- STOP
- OPEN
- CLOSE
customPage.onCustomMessageReceived([](const String& message) {
Serial.println("Received: " + message);
// LED Control
if (message == "led_on") {
digitalWrite(LED_BUILTIN, HIGH);
customPage.sendToWeb("LED turned ON");
}
else if (message == "led_off") {
digitalWrite(LED_BUILTIN, LOW);
customPage.sendToWeb("LED turned OFF");
}
// Servo Control
else if (message.startsWith("servo:")) {
int angle = message.substring(6).toInt(); // Get number after "servo:"
// servo.write(angle);
customPage.sendToWeb("Servo moved to " + String(angle) + " degrees");
}
// Sensor Reading Request
else if (message == "get_temperature") {
float temp = readTemperatureSensor(); // Your sensor function
customPage.sendToWeb("Temperature: " + String(temp) + "°C");
}
// Add more custom commands here
});
c. Mengirim Data Sensor Secara Real-Time
Gunakan fungsi sendToWeb() untuk mengirim data sensor secara berkala ke browser. Data dapat berasal dari sensor suhu, sensor kelembapan, sensor cahaya, sensor gas, sensor tekanan, dan sensor jarak.
void loop() {
webAppsServer.loop();
// Send sensor data every 3 seconds
static unsigned long lastSend = 0;
if (millis() - lastSend > 3000) {
// Read your sensors
int lightLevel = analogRead(A0);
bool buttonPressed = !digitalRead(4); // Inverted due to pullup
float temperature = readTemperatureSensor();
// Send to web interface
customPage.sendToWeb("Light: " + String(lightLevel));
customPage.sendToWeb("Button: " + String(buttonPressed ? "Pressed" : "Released"));
customPage.sendToWeb("Temp: " + String(temperature) + "°C");
lastSend = millis();
}
}
2. Menyesuaikan Antarmuka Web
Selain logika ESP32, tampilan web juga dapat dimodifikasi sesuai kebutuhan.
a. Mengubah Tata Letak HTML
Edit struktur halaman pada file:
custom_page.html.h
untuk menambahkan tombol, kartu informasi, tabel, grafik, maupun komponen antarmuka lainnya.
<!-- Add new controls -->
<div>
<h3>🔌 Device Control</h3>
<button onclick="send('led_on')">LED ON</button>
<button onclick="send('led_off')">LED OFF</button>
<br><br>
<label>Servo Angle:</label>
<input type="range" id="servoSlider" min="0" max="180" value="90"
onchange="send('servo:' + this.value)">
<span id="servoValue">90°</span>
</div>
<div>
<h3>📊 Sensor Data</h3>
<div>Temperature: <span id="tempValue">--°C</span></div>
<div>Light Level: <span id="lightValue">--</span></div>
<div>Button Status: <span id="buttonValue">--</span></div>
</div>
b. Memodifikasi JavaScript
Perbarui fungsi ws.onmessage agar mampu memproses berbagai jenis data yang dikirim oleh ESP32. Sebagai contoh:
- JSON
- Nilai sensor
- Status perangkat
- Alarm
- Data monitoring
ws.onmessage = function(event) {
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// Display all messages in general area
document.getElementById('rawMessage').textContent = message;
// Handle specific message types
if (message.startsWith('Temperature:')) {
let temp = message.split(':')[1].trim();
document.getElementById('tempValue').textContent = temp;
}
else if (message.startsWith('Light:')) {
let light = message.split(':')[1].trim();
document.getElementById('lightValue').textContent = light;
}
else if (message.startsWith('Button:')) {
let button = message.split(':')[1].trim();
document.getElementById('buttonValue').textContent = button;
}
}
};
c. Mengubah Tampilan CSS
Sesuaikan desain halaman menggunakan CSS. Anda dapat mengubah warna, font, ukuran komponen, tata letak, dan tema terang maupun gelap (Light/Dark Mode).
<style>
.control-panel {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
padding: 20px;
margin: 10px 0;
color: white;
}
.sensor-display {
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 10px;
padding: 15px;
margin: 10px 0;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
margin: 5px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
</style>
Kustomisasi Tambahan
Selain mengubah tampilan dan logika program, Anda juga dapat menyesuaikan bagaimana aplikasi ditampilkan pada ekosistem DIYables ESP32 WebApps.
1. Mengubah Jalur URL Aplikasi
Secara default, aplikasi memiliki jalur URL tertentu.
Jalur Default
// In CustomWebApp.cpp - Default path is "/custom"
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/custom") {
}
Anda dapat menggantinya menjadi jalur lain yang lebih sesuai.
Contohnya:
Jalur Kustom
// Temperature monitoring app
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/new-path") {
}
// Accessible at: http://[IP_ADDRESS]/new-path
Dengan demikian, aplikasi dapat diakses menggunakan alamat URL yang lebih mudah diingat.
2. Menyesuaikan Kartu Aplikasi pada Halaman Beranda
Halaman utama DIYables ESP32 WebApps akan menampilkan kartu (card) untuk setiap aplikasi.
Informasi tersebut dapat diubah melalui fungsi:
getNavigationInfo()
Anda dapat membuat kartu sederhana maupun kartu yang memiliki ikon, warna, dan CSS khusus.
- Kartu Aplikasi Sederhana
// In CustomWebApp.cpp
String CustomWebAppPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card\">"
"<h3>🔧 Custom App</h3>"
"<p>My custom web application</p>"
"</a>";
}
- Kartu Aplikasi dengan CSS Inline
// In CustomWebApp.cpp
String CustomWebAppPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card\" "
"style=\"background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\">"
"<h3>🌡️ Temperature Monitor</h3>"
"<p>Real-time temperature monitoring</p>"
"</a>";
}
Mengelola Beberapa Aplikasi Web dalam Satu ESP32
Salah satu kelebihan DIYables ESP32 WebApps Library adalah kemampuannya menjalankan beberapa aplikasi web secara bersamaan pada satu perangkat ESP32. Sebagai contoh, sebuah proyek dapat memiliki tiga aplikasi berikut:
- Temperature Monitor
- Motor Controller
- Sensor Dashboard
Agar seluruh aplikasi dapat bekerja secara bersamaan tanpa saling mengganggu, beberapa aturan berikut perlu diperhatikan.
1. Gunakan Application Identifier yang Berbeda
Setiap aplikasi harus memiliki Application Identifier (App ID) yang unik.
Contoh App ID untuk aplikasi Temperature Monitor.
// In TemperatureApp.cpp
const String TemperatureAppPage::APP_IDENTIFIER = "TEMP:";
// JavaScript in temperature_page_html.h
const APP_IDENTIFIER = 'TEMP:';
Contoh App ID untuk aplikasi Motor Controller.
// In MotorApp.cpp
const String MotorAppPage::APP_IDENTIFIER = "MOTOR:";
// JavaScript in motor_page_html.h
const APP_IDENTIFIER = 'MOTOR:';
Contoh App ID untuk aplikasi Sensor Dashboard.
// In SensorApp.cpp
const String SensorAppPage::APP_IDENTIFIER = "SENSOR:";
// JavaScript in sensor_page_html.h
const APP_IDENTIFIER = 'SENSOR:';
2. Gunakan URL yang Berbeda
Setiap aplikasi web harus memiliki jalur URL yang berbeda agar browser dapat membuka aplikasi yang benar.
// Temperature App
TemperatureAppPage::TemperatureAppPage() : DIYablesWebAppPageBase("/temperature") {
}
// Motor Controller App
MotorAppPage::MotorAppPage() : DIYablesWebAppPageBase("/motor") {
}
// Sensor Dashboard App
SensorAppPage::SensorAppPage() : DIYablesWebAppPageBase("/sensors") {
}
3. Gunakan Nama Kelas yang Berbeda
Gunakan nama kelas yang deskriptif agar tidak terjadi konflik selama proses kompilasi.
// Instead of multiple "CustomWebAppPage" classes
class TemperatureMonitorPage : public DIYablesWebAppPageBase { };
class MotorControllerPage : public DIYablesWebAppPageBase { };
class SensorDashboardPage : public DIYablesWebAppPageBase { };
4. Susun Struktur Proyek dengan Baik
Saat menggabungkan beberapa aplikasi dalam satu proyek, susun struktur file secara terorganisir sehingga setiap aplikasi memiliki file implementasi, halaman web, dan konfigurasi masing-masing.
// In main .ino file
#include "TemperatureApp.h"
#include "MotorApp.h"
#include "SensorApp.h"
// Create instances
DIYablesHomePage homePage;
TemperatureMonitorPage tempPage;
MotorControllerPage motorPage;
SensorDashboardPage sensorPage;
void setup() {
// Add all pages to server
webAppsServer.addApp(&homePage); // pre-built app
webAppsServer.addApp(&tempPage);
webAppsServer.addApp(&motorPage);
webAppsServer.addApp(&sensorPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
// Set up callbacks for each app
tempPage.onTemperatureMessageReceived([](const String& message) {
// Handle temperature app messages
});
motorPage.onMotorMessageReceived([](const String& message) {
// Handle motor app messages
});
sensorPage.onSensorMessageReceived([](const String& message) {
// Handle sensor app messages
});
}
5. Terapkan Praktik Terbaik (Best Practice)
a. Organisasi File
Pisahkan setiap aplikasi ke dalam file yang berbeda agar proyek tetap mudah dikelola.
MyProject/
├── MyProject.ino // Main sketch
├── TemperatureApp.h // Temperature app header
├── TemperatureApp.cpp // Temperature app implementation
├── temperature_page_html.h // Temperature app web page
├── MotorApp.h // Motor app header
├── MotorApp.cpp // Motor app implementation
├── motor_page_html.h // Motor app web page
├── SensorApp.h // Sensor app header
├── SensorApp.cpp // Sensor app implementation
└── sensor_page_html.h // Sensor app web page
b. Mempermudah Navigasi Antar Aplikasi
Sesuaikan fungsi getNavigationInfo() pada setiap aplikasi sehingga seluruh WebApp dapat diakses melalui halaman utama DIYables ESP32 WebApps dengan mudah.
String TemperatureMonitorPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card temperature\">"
"<h3>🌡️ Temperature Monitor</h3>"
"<p>View real-time temperature data</p>"
"</a>";
}
String MotorControllerPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card motor\">"
"<h3>⚙️ Motor Controller</h3>"
"<p>Control servo and stepper motors</p>"
"</a>";
}
6. Menguji Seluruh Aplikasi
Setelah semua aplikasi selesai dibuat, lakukan beberapa pengujian berikut.
- Uji setiap aplikasi secara terpisah sebelum dijalankan secara bersamaan.
- Periksa Serial Monitor untuk memastikan tidak terjadi konflik pesan.
- Pastikan setiap aplikasi menggunakan Application Identifier yang berbeda.
- Uji seluruh menu navigasi untuk memastikan setiap URL mengarah ke aplikasi yang benar.
- Pantau penggunaan memori ESP32, terutama apabila jumlah aplikasi yang dijalankan cukup banyak.
Dengan menerapkan langkah-langkah tersebut, Anda dapat membangun beberapa aplikasi web pada satu perangkat ESP32 secara lebih terstruktur, stabil, dan mudah dikembangkan. Pendekatan ini sangat cocok digunakan untuk membuat sistem Internet of Things (IoT) berskala besar, seperti dashboard monitoring multi-sensor, panel kontrol perangkat, maupun sistem otomasi yang terdiri atas beberapa modul aplikasi yang saling terintegrasi tanpa saling mengganggu.
Baca juga: DIYables ESP32 Web Apps Library Reference - Panduan Lengkap Struktur Library dan API ESP32 Web Apps
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