Fase 4 · Minggu 11

ESP32 Web Server & Access Point

WiFi modes (STA/AP), ESP32 sebagai Access Point, web server, dan REST API.

ESP32 WiFi Modes

ESP32 bisa beroperasi dalam 3 mode WiFi:

STA Mode (Station) Router ESP32 ESP32 konek ke WiFi router yang ada ✓ Akses internet ✗ Perlu router AP Mode (Access Point) ESP32 AP 📱 📱 ESP32 membuat WiFi network sendiri ✓ Tanpa router ✗ Tanpa internet AP+STA Mode (Keduanya) Router ESP32 📱 ESP32 sebagai AP + konek ke WiFi ✓ Semua kelebihan ⚡ Lebih kompleks

3 WiFi modes: STA (client), AP (server), AP+STA (kedua)

ℹ️ Minggu ini: Kita akan pakai AP Mode — ESP32 membuat WiFi sendiri. HP langsung connect ke WiFi ESP32 tanpa perlu router. Sangat cocok untuk demonstrasi dan testing!

ESP32: Access Point + Web Server

Install library: ESPAsyncWebServer

Di Arduino IDE: Sketch → Include Library → Manage Libraries → install ESPAsyncWebServer dan AsyncTCP.

C++ (Arduino)#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <ArduinoJson.h>

// Access Point credentials
const char* ssid = "ESP32_IoT_AP";
const char* password = "12345678";

#define LED_PIN 2
#define LDR_PIN 34

AsyncWebServer server(80);

void setup() {
  Serial.begin(115200);
  pinMode(LED_PIN, OUTPUT);

  // Start Access Point
  WiFi.softAP(ssid, password);
  Serial.print("AP IP address: ");
  Serial.println(WiFi.softAPIP()); // biasanya 192.168.4.1

  // ===== REST API Routes =====

  // GET /api/status — baca status semua
  server.on("/api/status", HTTP_GET, [](AsyncWebServerRequest *request) {
    JsonDocument doc;
    doc["led"] = digitalRead(LED_PIN) ? "ON" : "OFF";
    doc["cahaya"] = analogRead(LDR_PIN);
    doc["uptime"] = millis() / 1000;
    doc["clients"] = WiFi.softAPgetStationNum();

    String response;
    serializeJson(doc, response);
    request->send(200, "application/json", response);
  });

  // POST /api/led — kontrol LED
  server.on("/api/led", HTTP_POST, [](AsyncWebServerRequest *request) {},
    NULL,
    [](AsyncWebServerRequest *request, uint8_t *data,
       size_t len, size_t index, size_t total) {
    JsonDocument doc;
    deserializeJson(doc, data, len);
    const char* state = doc["state"];

    if (strcmp(state, "ON") == 0) {
      digitalWrite(LED_PIN, HIGH);
    } else {
      digitalWrite(LED_PIN, LOW);
    }

    request->send(200, "application/json",
      "{\"status\":\"OK\"}");
  });

  // GET / — simple web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    String html = "<!DOCTYPE html><html><body style='background:#0f172a;color:#fff;font-family:sans-serif;text-align:center;padding:40px'>";
    html += "<h1>ESP32 IoT Server</h1>";
    html += "<p>LED: " + String(digitalRead(LED_PIN) ? "ON" : "OFF") + "</p>";
    html += "<a href='/api/status'>View JSON API</a>";
    html += "</body></html>";
    request->send(200, "text/html", html);
  });

  server.begin();
  Serial.println("Web server started!");
}

void loop() {
  // Server berjalan async, tidak perlu code di loop
}
ESP32 AP SSID: ESP32_IoT_AP IP: 192.168.4.1 Port: 80 📱 Phone Flutter App 💻 Laptop Browser REST API Endpoints: GET / → Web page GET /api/status → JSON POST /api/led → Control Body: {"state":"ON"} atau {"state":"OFF"}

ESP32 AP Mode dengan REST API — bisa diakses via browser atau Flutter

Test via Browser

  1. Upload kode ke ESP32
  2. Di HP/laptop: connect ke WiFi "ESP32_IoT_AP" (password: 12345678)
  3. Buka browser → http://192.168.4.1
  4. Buka http://192.168.4.1/api/status → lihat JSON response
💡 Tips: Setelah connect ke WiFi ESP32, internet HP akan terputus (karena ESP32 AP tidak punya internet). Ini normal — data mengalir langsung antara HP dan ESP32.

Checklist Minggu 11