Praktikum ESP32 Web Server: Monitoring Sensor Langsung dari Browser Lokal

Tidak semua sistem IoT harus bergantung pada cloud untuk melihat data. ESP32 dapat menyediakan web server ringan di jaringan lokal sehingga teknisi dapat memeriksa status perangkat langsung melalui browser. Praktikum ini membuat halaman status sederhana yang menampilkan uptime, RSSI Wi-Fi, dan nilai analog.

Tujuan praktikum

• Menggunakan ESP32 sebagai Wi-Fi station.
• Menjalankan HTTP server lokal.
• Menghasilkan endpoint HTML dan JSON.
• Memisahkan data mesin (JSON) dan tampilan manusia (HTML).

Program WebServer

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

const char* SSID = "NAMA_WIFI";
const char* PASS = "PASSWORD_WIFI";
const int SENSOR_PIN = 34;

WebServer server(80);

String jsonStatus() {
  String json = "{";
  json += "\"uptime_ms\":" + String(millis()) + ",";
  json += "\"rssi\":" + String(WiFi.RSSI()) + ",";
  json += "\"analog\":" + String(analogRead(SENSOR_PIN));
  json += "}";
  return json;
}

void handleRoot() {
  String html = R"HTML(
<!doctype html><html><head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ESP32 Status</title></head><body>
<h1>ESP32 Local Status</h1>
<p>API JSON: <a href="/api/status">/api/status</a></p>
<script>
setInterval(async()=>{
 const r=await fetch('/api/status');
 const d=await r.json();
 document.getElementById('out').textContent=JSON.stringify(d,null,2);
},1000);
</script><pre id="out">loading...</pre></body></html>
)HTML";
  server.send(200, "text/html", html);
}

void handleApi() {
  server.send(200, "application/json", jsonStatus());
}

void setup() {
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(SSID, PASS);
  while (WiFi.status() != WL_CONNECTED) delay(300);

  Serial.print("Buka http://");
  Serial.println(WiFi.localIP());
  server.on("/", handleRoot);
  server.on("/api/status", handleApi);
  server.begin();
}

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

Langkah pengujian

1. Upload sketch dan catat IP lokal dari Serial Monitor.
2. Pastikan komputer/ponsel berada pada jaringan yang dapat mencapai ESP32.
3. Buka IP tersebut dengan browser.
4. Buka /api/status dan pastikan respons berupa JSON.
5. Amati perubahan RSSI ketika posisi perangkat diubah.

Prinsip desain endpoint

Endpoint HTML ditujukan untuk manusia, sedangkan JSON memudahkan integrasi mesin. Hindari membuat route yang mengubah aktuator tanpa autentikasi pada jaringan yang tidak dipercaya. Untuk perangkat produksi, pertimbangkan autentikasi, TLS/segmentation jaringan, serta pembatasan akses sesuai threat model.

Integrasi dengan cloud

Web server lokal dapat tetap digunakan bersamaan dengan MQTT. MQTT melayani telemetry dan command dari platform, sedangkan halaman lokal menjadi jalur observasi teknisi ketika sedang berada di lokasi perangkat. Keduanya saling melengkapi.

Kriteria keberhasilan

Halaman dapat dibuka dari perangkat lain pada jaringan, endpoint JSON valid, loop server tetap responsif, dan pembacaan sensor tidak menggunakan delay panjang yang membuat web server tersendat.

Referensi resmi dan bacaan lanjut

Gunakan dokumentasi resmi berikut untuk memeriksa API, kompatibilitas board, dan perubahan versi library:

• Arduino-ESP32 Documentation — Espressif
• Arduino IDE 2 Documentation
• Arduino-ESP32 Wi-Fi API
• ESP-IDF HTTP Server — Espressif