DIYables ESP32 Web Apps Web Monitor - Cara Membuat Serial Monitor Berbasis Web pada ESP32

Elga Aris Prastyo Juli 22, 2026

Saat mengembangkan proyek berbasis ESP32, Serial Monitor merupakan salah satu alat yang paling sering digunakan untuk menampilkan informasi, membaca data sensor, maupun melakukan proses debugging. Namun, penggunaan Serial Monitor memiliki keterbatasan karena hanya dapat diakses melalui komputer yang terhubung langsung ke board ESP32. Library DIYables ESP32 Web Apps menyediakan solusi yang lebih praktis melalui contoh Web Monitor, yaitu sebuah Serial Monitor berbasis web yang dapat diakses menggunakan browser pada komputer, laptop, tablet, maupun smartphone yang berada dalam jaringan WiFi yang sama. Dengan Web Monitor, seluruh output yang biasanya ditampilkan pada Serial Monitor Arduino IDE dapat dipantau secara real-time melalui halaman web. Selain itu, pengguna juga dapat mengirimkan perintah (command) langsung dari browser ke ESP32 sehingga proses pengujian dan debugging menjadi jauh lebih fleksibel.

Fitur DIYables ESP32 Web Monitor

Contoh Web Monitor yang disediakan oleh library DIYables ESP32 Web Apps memiliki berbagai fitur yang mempermudah proses monitoring dan debugging, di antaranya:

- Output Serial Real-time untuk menampilkan seluruh pesan Serial secara langsung melalui browser.

- Input Command yang memungkinkan pengguna mengirimkan perintah ke ESP32 melalui halaman web.

- Dark Theme dengan tampilan menyerupai terminal sehingga nyaman digunakan dalam waktu yang lama.

- Auto Scroll yang secara otomatis menampilkan pesan terbaru tanpa perlu menggulir halaman secara manual.

- Timestamp pada setiap pesan sehingga memudahkan analisis waktu terjadinya suatu proses.

- Command History untuk mengakses kembali perintah yang pernah dikirim menggunakan tombol panah keyboard.

- Clear Monitor untuk menghapus seluruh isi tampilan monitor.

- Copy dan Paste Support sehingga seluruh teks dapat dipilih serta disalin dengan mudah.

 

Baca juga: DIYables ESP32 Web Apps Web Digital Pins - Mengontrol dan Memantau GPIO ESP32 Melalui Web Browser 

Perangkat Keras yang Dibutuhkan

- Modul ESP32 ESP-WROOM-32 Dev Board (38 Pin)

- Kabel USB

Menginstal Library DIYables ESP32 Web Apps

Ikuti langkah-langkah berikut untuk menginstal library yang dibutuhkan:

1. Hubungkan board ESP32 ke komputer menggunakan kabel USB.

2. Jalankan Arduino IDE.

3. Pilih jenis board ESP32 yang digunakan, misalnya ESP32 Dev Module, kemudian pilih port COM yang sesuai.

4. Klik ikon Library Manager pada sisi kiri Arduino IDE.

5. Cari library dengan kata kunci DIYables ESP32 WebApps.

6. Pilih DIYables ESP32 WebApps by DIYables, kemudian klik Install.



7. Setelah proses instalasi dimulai, Arduino IDE biasanya akan meminta izin untuk menginstal beberapa library pendukung.

8. Klik Install All agar seluruh dependensi yang dibutuhkan ikut terinstal sehingga contoh program dapat dijalankan tanpa mengalami error.



Menjalankan Contoh Program Web Monitor

Setelah library berhasil diinstal, langkah berikutnya adalah membuka contoh program bawaan.

1. Pilih menu File → Examples → DIYables ESP32 Web Apps → WebMonitor.

2. Program contoh akan terbuka secara otomatis.

Selanjutnya, ubah konfigurasi jaringan WiFi dengan mengganti SSID dan password sesuai jaringan yang digunakan.

 

const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";

const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";

 

3. Pastikan ESP32 dan perangkat yang nantinya digunakan untuk mengakses Web Monitor berada pada jaringan WiFi yang sama. Setelah konfigurasi selesai, klik tombol Upload untuk mengunggah program ke board ESP32.

Melihat Alamat IP ESP32

1. Setelah proses upload selesai, buka Serial Monitor.

2. Apabila ESP32 berhasil terhubung ke jaringan WiFi, Serial Monitor akan menampilkan informasi seperti alamat IP yang diperoleh dari router.



3. Apabila tidak muncul informasi apa pun, tekan tombol EN/Reset pada board ESP32 untuk melakukan restart.

4. Catat alamat IP yang muncul, misalnya: 10.195.113.32

5. Alamat tersebut nantinya digunakan untuk mengakses halaman Web Monitor.

Mengakses Web Monitor Melalui Browser

1. Buka browser pada komputer atau smartphone, kemudian masukkan alamat IP ESP32.

Contoh: http://10.195.113.32

2. Setelah berhasil terhubung, halaman utama DIYables ESP32 Web Apps akan ditampilkan.



3. Selanjutnya klik menu Web Monitor.



Selain melalui halaman utama, Web Monitor juga dapat diakses secara langsung menggunakan URL http://10.195.113.32/web-monitor

4. Ganti alamat IP tersebut sesuai dengan alamat IP yang dimiliki oleh ESP32 Anda.

5. Setelah halaman Web Monitor terbuka, seluruh output dari fungsi Serial.print(), Serial.println(), maupun pesan debugging lainnya akan langsung ditampilkan secara real-time.

Cara Menggunakan Web Monitor

1. Melihat Output Serial

Web Monitor secara otomatis menampilkan seluruh data yang dikirim melalui port Serial. Cara penggunaannya sebagai berikut:

- Buka halaman Web Monitor pada browser.

- ESP32 akan mengirimkan pesan status secara berkala, misalnya setiap 5 detik.

- Semua fungsi Serial.println() akan muncul pada halaman Web Monitor.

- Setiap pesan akan dilengkapi dengan timestamp sehingga urutan kejadian lebih mudah dianalisis.

2. Mengirim Perintah ke ESP32

Selain menampilkan output Serial, Web Monitor juga dapat digunakan sebagai media komunikasi dua arah. Langkah-langkahnya adalah sebagai berikut:

- Ketik perintah pada kolom input di bagian bawah halaman.

- Tekan tombol Enter atau klik Send.

- ESP32 akan menerima, memproses, kemudian mengirimkan respons kembali ke halaman Web Monitor.

Fitur ini sangat berguna untuk mengubah konfigurasi, mengaktifkan aktuator, maupun melakukan pengujian tanpa perlu mengunggah ulang program.

Perintah Bawaan yang Tersedia

Contoh program Web Monitor telah menyediakan beberapa command untuk demonstrasi, antara lain:

1. Kontrol LED

Beberapa perintah yang dapat digunakan antara lain:

- led on → Menyalakan LED bawaan ESP32.

- led off → Mematikan LED bawaan.

- led toggle → Mengubah status LED dari ON menjadi OFF atau sebaliknya.

- blink → Membuat LED berkedip sebanyak tiga kali.

2. Perintah Sistem

Perintah berikut digunakan untuk melihat informasi sistem:

- status → Menampilkan status perangkat beserta lama waktu ESP32 aktif (uptime).

- help → Menampilkan daftar seluruh command yang tersedia.

- reset counter → Mengembalikan penghitung pesan ke nilai awal.

- memory → Menampilkan informasi penggunaan memori yang masih tersedia.

3. Perintah Debugging

Program juga menyediakan beberapa command tambahan untuk kebutuhan pengujian.

- test → Mengirimkan pesan pengujian.

- echo [message] → Mengirim kembali pesan yang dimasukkan.

- repeat [n] [message] → Mengulang pesan sebanyak n kali.

Fitur Antarmuka Web Monitor

1. Keyboard Shortcut

Beberapa kombinasi tombol yang dapat digunakan yaitu:

- Enter → Mengirim command.

- Tombol Panah Atas/Bawah → Menampilkan riwayat command sebelumnya.

- Ctrl + L → Membersihkan tampilan monitor (jika didukung browser).

- Ctrl + A → Memilih seluruh teks.

2. Kontrol Monitor

Selain keyboard shortcut, tersedia pula beberapa tombol kontrol.

- Auto Scroll → Mengikuti pesan terbaru secara otomatis.

- Clear → Menghapus seluruh isi monitor.

- Copy → Menyalin teks yang dipilih ke clipboard.

Mengembangkan Web Monitor Sesuai Kebutuhan

Contoh Web Monitor ini dapat dikembangkan menjadi antarmuka monitoring yang lebih kompleks sesuai kebutuhan proyek. Beberapa pengembangan yang dapat dilakukan antara lain:

- Menambahkan command khusus.

- Menampilkan data sensor secara real-time.

- Mengontrol relay, motor, maupun aktuator lainnya.

- Menampilkan grafik hasil pembacaan sensor.

- Mengubah parameter sistem tanpa perlu mengunggah ulang program.

Dengan demikian, Web Monitor tidak hanya berfungsi sebagai Serial Monitor berbasis web, tetapi juga dapat berkembang menjadi dashboard monitoring dan debugging untuk proyek Internet of Things (IoT).

Struktur Program Web Monitor

1. Komponen Utama

Program Web Monitor terdiri atas beberapa bagian utama berikut.

- WebApp Server yang bertugas menangani komunikasi HTTP dan WebSocket.

- Halaman Web Monitor yang menyediakan antarmuka berbasis browser.

- Message Handler yang memproses setiap command dari pengguna.

- Serial Bridge yang meneruskan seluruh output Serial menuju browser.

2. Fungsi Utama


// Handle commands from web interface

void handleWebCommand(String command, String clientId) {

  // Process command and execute actions

}


// Send message to web monitor

void sendToWebMonitor(String message) {

  // Forward message via WebSocket

}


3. Menambahkan Command Baru

Apabila ingin menambahkan command sesuai kebutuhan proyek, lakukan modifikasi pada fungsi handleWebCommand().

 

if (command.startsWith("your_command")) {

  // Extract parameters

  String param = command.substring(12); // After "your_command"

  

  // Execute your action

  digitalWrite(LED_BUILTIN, HIGH);

  

  // Send response

  sendToWebMonitor("Command executed: " + param);

}

 

Contoh Penerapan Web Monitor

Web Monitor dapat dimanfaatkan pada berbagai jenis proyek ESP32.

1. Debugging Program


void loop() {

  // Debug sensor readings

  int sensorValue = analogRead(A0);

  sendToWebMonitor("Sensor A0: " + String(sensorValue));

  

  // Debug variables

  sendToWebMonitor("Loop count: " + String(loopCount++));

  

  delay(1000);

}


2. Monitoring Sistem Secara Jarak Jauh


void checkSystemHealth() {

  // Monitor memory

  int freeMemory = getFreeMemory();

  sendToWebMonitor("Free memory: " + String(freeMemory) + " bytes");

  

  // Monitor sensors

  float temperature = getTemperature();

  sendToWebMonitor("Temperature: " + String(temperature) + "°C");

  

  // Monitor connectivity

  if (WiFi.status() == WL_CONNECTED) {

    sendToWebMonitor("WiFi: Connected (RSSI: " + String(WiFi.RSSI()) + ")");

  } else {

    sendToWebMonitor("WiFi: Disconnected");

  }

}


3. Konfigurasi Perangkat


// Handle configuration commands

if (command.startsWith("config ")) {

  String setting = command.substring(7);

  

  if (setting.startsWith("interval ")) {

    int interval = setting.substring(9).toInt();

    updateInterval = interval * 1000; // Convert to milliseconds

    sendToWebMonitor("Update interval set to " + String(interval) + " seconds");

  }

  

  if (setting == "save") {

    saveConfigToEEPROM();

    sendToWebMonitor("Configuration saved to EEPROM");

  }

}


Fitur Lanjutan

1. Filtering Pesan

Tambahkan kategori atau jenis pesan tertentu sehingga hanya informasi yang diperlukan saja yang ditampilkan.


enum MessageType { INFO, WARNING, ERROR, DEBUG };


void sendToWebMonitor(String message, MessageType type = INFO) {

  String prefix;

  switch(type) {

    case WARNING: prefix = "[WARN] "; break;

    case ERROR:   prefix = "[ERROR] "; break;

    case DEBUG:   prefix = "[DEBUG] "; break;

    default:      prefix = "[INFO] ";

  }

  

  webMonitorPage.sendMessage(prefix + message);

}


2. Parsing Command

Implementasikan parser command yang lebih kompleks agar dapat menangani berbagai parameter sekaligus.


struct Command {

  String name;

  String parameters[5];

  int paramCount;

};


Command parseCommand(String input) {

  Command cmd;

  int spaceIndex = input.indexOf(' ');

  

  if (spaceIndex > 0) {

    cmd.name = input.substring(0, spaceIndex);

    // Parse parameters...

  } else {

    cmd.name = input;

    cmd.paramCount = 0;

  }

  

  return cmd;

}


3. Data Logging

Output monitor juga dapat disimpan ke media penyimpanan seperti SD Card maupun EEPROM sehingga data dapat dianalisis kembali di kemudian hari.


#include <SD.h>


void logMessage(String message) {

  File logFile = SD.open("monitor.log", FILE_WRITE);

  if (logFile) {

    logFile.print(millis());

    logFile.print(": ");

    logFile.println(message);

    logFile.close();

  }

}


Penyelesaian Masalah (Troubleshooting)

1. Web Monitor Tidak Menampilkan Output

Beberapa hal yang perlu diperiksa antara lain:

- Pastikan fungsi Serial.begin() dipanggil pada bagian setup().

- Pastikan koneksi WebSocket berhasil dibuat.

- Periksa Console pada browser apabila terdapat pesan error.

2. Command Tidak Berfungsi

Jika command tidak memberikan respons, lakukan pemeriksaan berikut.

- Pastikan penulisan command sudah benar.

- Perhatikan penggunaan huruf besar dan huruf kecil apabila program menerapkannya.

- Lihat respons yang dikirim ESP32 pada Web Monitor.

3. Antarmuka Web Terasa Lambat

Beberapa penyebab yang umum terjadi yaitu:

- Sinyal WiFi kurang stabil.

- Terlalu banyak pesan yang dikirim dalam waktu singkat.

- Cache browser belum dibersihkan.

4. WebSocket Terputus

Jika koneksi WebSocket sering terputus, lakukan beberapa langkah berikut.

- Pastikan jaringan WiFi stabil.

- Kurangi ukuran data yang dikirim.

- Terapkan mekanisme reconnect secara otomatis pada program.

Tips Debugging

Aktifkan pesan debugging yang lebih detail untuk mempermudah proses analisis.


#define DEBUG_WEBMONITOR 1


#if DEBUG_WEBMONITOR

  #define DEBUG_PRINT(x) Serial.print(x)

  #define DEBUG_PRINTLN(x) Serial.println(x)

#else

  #define DEBUG_PRINT(x)

  #define DEBUG_PRINTLN(x)

#endif


Pantau status koneksi WebSocket secara berkala agar gangguan komunikasi dapat segera diketahui.

 

void checkWebSocketStatus() {

  if (server.getClientCount() > 0) {

    sendToWebMonitor("WebSocket clients connected: " + String(server.getClientCount()));

  }

}


Pertimbangan Keamanan

1. Validasi Command

Seluruh command yang diterima dari pengguna sebaiknya divalidasi terlebih dahulu sebelum diproses guna mencegah input yang tidak diinginkan.


bool isValidCommand(String command) {

  // Check command length

  if (command.length() > 100) return false;

  

  // Check for dangerous characters

  if (command.indexOf("\\") >= 0 || command.indexOf("/") >= 0) return false;

  

  // Check against whitelist

  String allowedCommands[] = {"led", "status", "help", "test"};

  String cmdName = command.substring(0, command.indexOf(' '));

  

  for (String allowed : allowedCommands) {

    if (cmdName.equals(allowed)) return true;

  }

  

  return false;

}


2. Kontrol Akses

Untuk meningkatkan keamanan, tambahkan mekanisme autentikasi sehingga hanya pengguna yang memiliki izin yang dapat mengakses Web Monitor.


bool isAuthorized(String clientId) {

  // Check client authorization

  return authorizedClients.indexOf(clientId) >= 0;

}


Contoh Integrasi Web Monitor

Web Monitor dapat diintegrasikan ke berbagai aplikasi Internet of Things (IoT), misalnya:

1. Sistem Monitoring Sensor


void monitorSensors() {

  static unsigned long lastSensorRead = 0;

  

  if (millis() - lastSensorRead > 5000) {

    // Read multiple sensors

    int light = analogRead(A0);

    int temp = analogRead(A1);

    int humidity = analogRead(A2);

    

    // Send formatted data

    String data = "Sensors - Light: " + String(light) + 

                  ", Temp: " + String(temp) + 

                  ", Humidity: " + String(humidity);

    sendToWebMonitor(data);

    

    lastSensorRead = millis();

  }

}


2. Dashboard Smart Home


void monitorHome() {

  // Door sensors

  if (digitalRead(DOOR_SENSOR) == HIGH) {

    sendToWebMonitor("ALERT: Front door opened");

  }

  

  // Motion detection

  if (digitalRead(PIR_SENSOR) == HIGH) {

    sendToWebMonitor("Motion detected in living room");

  }

  

  // Environmental monitoring

  float temp = dht.readTemperature();

  if (temp > 25.0) {

    sendToWebMonitor("WARNING: Temperature high (" + String(temp) + "°C)");

  }

}


Dengan adanya Web Monitor, proses monitoring, debugging, dan pengendalian ESP32 dapat dilakukan langsung melalui browser tanpa harus bergantung pada Serial Monitor Arduino IDE. Hal ini membuat proses pengembangan proyek IoT menjadi lebih fleksibel, efisien, dan mudah diakses dari berbagai perangkat yang terhubung ke jaringan WiFi yang sama.

 

Baca juga: DIYables ESP32 Web Apps Web Plotter - Cara Membuat Grafik Data Sensor Berbasis Web pada ESP32

 

 

 

Dalam praktik, hasil dan kendala yang ditemui bisa berbeda tergantung perangkat, konfigurasi, versi library, dan sistem yang digunakan.

Tags:

Posting Komentar

0 Komentar