Panduan

Web Server Virtual ESP32

ESP32 bisa berperan sebagai web server: ia menyajikan halaman web yang bisa dibuka dari browser. Di Noviot, kemampuan ini tersedia sebagai Web Server virtual. Halaman yang disajikan sketch-mu tampil di panel pratinjau web di dalam simulator, lengkap dengan alamat virtual http://192.168.4.2/, jadi kamu bisa berlatih membuat web server tanpa board fisik dan tanpa jaringan asli.

Syarat sebelum membuat server

Web server berjalan di atas koneksi WiFi. Pastikan sketch-mu sudah terhubung ke WiFi virtual lebih dulu (lihat halaman WiFi Virtual ESP32). Urutan standarnya: WiFi.begin(), tunggu sampai terhubung, baru nyalakan server.

Membuat server dan route

Pustaka yang dipakai adalah WebServer bawaan ESP32. Pola dasarnya:

#include <WiFi.h>
#include <WebServer.h>

WebServer server(80);

void setup() {
  Serial.begin(115200);
  WiFi.begin("NOVIOT", "12345678");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
  }

  server.on("/", []() {
    server.send(200, "text/html", "<h1>Halo dari ESP32</h1>");
  });
  server.begin();
}

void loop() {
  server.handleClient();
}

Bagian pentingnya:

Kode	Fungsi
`WebServer server(80);`	Membuat server di port 80
`server.on("/", ...)`	Mendaftarkan route: balasan untuk alamat tertentu
`server.send(200, "text/html", ...)`	Mengirim halaman balasan ke pengunjung
`server.handleClient();`	Melayani permintaan masuk; wajib dipanggil terus di `loop()`

Route bisa ditambah sesuai kebutuhan, misalnya server.on("/status", ...) untuk halaman lain, dan route terakhir server.onNotFound(...) untuk menangani alamat yang tidak dikenal.

Melihat halaman di panel pratinjau

Setelah simulasi berjalan dan server menyala, buka tab Web di simulator. Panel ini menampilkan halaman yang disajikan ESP32 virtual pada alamat http://192.168.4.2/, persis seperti browser membuka alamat IP ESP32 fisik. Setiap kali kamu mengubah isi halaman di sketch lalu menekan Run lagi, pratinjau menampilkan versi terbaru.

Karena halamannya berupa teks HTML yang dikirim dari sketch, kamu bebas menyusunnya: judul, paragraf, bahkan tombol yang memanggil route lain untuk menyalakan dan mematikan LED dari halaman web.

Contoh: monitoring suhu lewat web

Pola web server paling sering dipakai untuk memantau sensor dari jauh. Alurnya:

ESP32 membaca sensor suhu pada rangkaian.
Route / menyusun halaman HTML yang berisi nilai suhu terakhir.
Pengunjung membuka panel pratinjau dan melihat nilai itu; memuat ulang halaman menampilkan bacaan terbaru.

Template resmi ESP32 Web Server: Monitoring Suhu menunjukkan pola ini secara utuh dan bisa langsung dijalankan. Dari sana kamu bisa mengembangkan: tambahkan satuan dan waktu baca, tampilkan lebih dari satu sensor, atau beri tombol kendali aktuator di halaman yang sama.