Alvoria Neura


Cara Program Wifi Espasyncwebserver Accesspoint Esp32 Devkit V1

Tutorial Lengkap Membuat Web Server WiFi Access Point pada ESP32 dengan ESPAsyncWebServer

ESP32 adalah mikrokontroler yang kuat dengan dukungan WiFi dan Bluetooth, menjadikannya pilihan ideal untuk berbagai proyek IoT. Salah satu fitur yang sering digunakan adalah membuat web server untuk mengontrol atau memonitor perangkat secara nirkabel.

Pada tutorial ini, kita akan menggunakan library ESPAsyncWebServer untuk membuat web server berbasis Access Point (AP) WiFi pada ESP32 DevKit V1. Dengan mode AP, ESP32 akan bertindak sebagai hotspot WiFi tanpa memerlukan router eksternal.

1. Persiapan Perangkat dan Software

Perangkat Keras

  • ESP32 DevKit V1
  • Kabel USB Type-C/Micro USB
  • LED dan Resistor (Opsional untuk demonstrasi kontrol perangkat)

Software

  • Arduino IDE atau PlatformIO
  • Library yang diperlukan:
    • ESPAsyncWebServer
    • AsyncTCP
    • WiFi (bawaan dari ESP32)

2. Instalasi Library ESPAsyncWebServer

  1. Buka Arduino IDE
  2. Buka Sketch > Include Library > Manage Libraries
  3. Cari ESPAsyncWebServer, lalu klik Install
  4. Cari AsyncTCP, lalu klik Install

3. Kode Program Web Server Access Point

Berikut adalah contoh kode untuk membuat web server sederhana dengan ESP32 dalam mode Access Point (AP) yang menampilkan halaman HTML dan dapat mengontrol LED.


#include <WiFi.h>
#include <ESPAsyncWebServer.h>

const char* ssid = "ESP32-AP";
const char* password = "12345678";
const int ledPin = 2;

AsyncWebServer server(80);

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

WiFi.softAP(ssid, password);
Serial.println("Access Point dimulai");
Serial.print("IP Address: ");
Serial.println(WiFi.softAPIP());

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
});

server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, HIGH);
    request->send(200, "text/plain", "LED ON");
});

server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, LOW);
    request->send(200, "text/plain", "LED OFF");
});

server.begin();
}

void loop() {
// Tidak perlu kode tambahan dalam loop karena server berjalan secara asinkron
}

Penjelasan Kode:

  1. Mengimpor Library:

    • WiFi.h: Digunakan untuk koneksi WiFi dalam mode Access Point.
    • ESPAsyncWebServer.h: Digunakan untuk menangani web server asinkron.
  2. Menentukan SSID dan Password Access Point:

    • Variabel ssid dan password digunakan untuk menentukan nama jaringan WiFi yang dibuat oleh ESP32.
  3. Mengaktifkan Mode Access Point:

    • WiFi.softAP(ssid, password); akan mengonfigurasi ESP32 sebagai Access Point.
    • WiFi.softAPIP(); menampilkan alamat IP dari ESP32 saat bertindak sebagai AP.
  4. Menjalankan Server:

    • server.begin(); akan memulai web server untuk menerima permintaan dari pengguna.
  5. Loop Kosong:

    • Karena kita menggunakan library ESPAsyncWebServer, semua request diproses secara asinkron, sehingga loop utama dibiarkan kosong.

4. Uji Coba Web Server

  1. Unggah kode ke ESP32 menggunakan Arduino IDE.
  2. Cari WiFi dengan nama "ESP32-AP" pada perangkat Anda.
  3. Sambungkan dengan password 12345678.
  4. Buka browser dan masukkan IP Address yang muncul pada Serial Monitor (misalnya: http://192.168.4.1)
  5. Klik tautan "Nyalakan LED" atau "Matikan LED" untuk mengontrol LED.

5. Menambahkan Tampilan HTML yang Lebih Menarik

jika ingin tampilan lebih menarik dengan CSS dan JavaScript, kita bisa mengubah kode HTML dalam request->send menjadi berikut:


const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 AP Web Server</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
.button { padding: 10px; font-size: 20px; margin: 10px; cursor: pointer; }
.on { background-color: green; color: white; }
.off { background-color: red; color: white; }
</style>
</head>>
<body>
%lt;h1>ESP32 AP Web Server</h1>
<button class="button on" onclick="fetch('/on')">Nyalakan LED</button>
<button class="button off" onclick="fetch('/off')">Matikan LED</button>
</body>
</html>
)rawliteral";

Letakan kode ini di atas void setup().

Sehingga kode akan terlihat seperti berikut:


#include <WiFi.h>
#include <ESPAsyncWebServer.h>

const char* ssid = "ESP32-AP";
const char* password = "12345678";
const int ledPin = 2;

AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 AP Web Server</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
.button { padding: 10px; font-size: 20px; margin: 10px; cursor: pointer; }
.on { background-color: green; color: white; }
.off { background-color: red; color: white; }
</style>
</head>>
<body>
%lt;h1>ESP32 AP Web Server</h1>
<button class="button on" onclick="fetch('/on')">Nyalakan LED</button>
<button class="button off" onclick="fetch('/off')">Matikan LED</button>
</body>
</html>
)rawliteral";

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

WiFi.softAP(ssid, password);
Serial.println("Access Point dimulai");
Serial.print("IP Address: ");
Serial.println(WiFi.softAPIP());

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
});

server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, HIGH);
    request->send(200, "text/plain", "LED ON");
});

server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, LOW);
    request->send(200, "text/plain", "LED OFF");
});

server.begin();
}

void loop() {
// Tidak perlu kode tambahan dalam loop karena server berjalan secara asinkron
}

Penjelasan Kode:

  1. Menangani HTTP Requests:

    • Root Path (/): Menampilkan halaman HTML sederhana dengan dua tautan untuk mengontrol LED.
    • Path /on: Mengaktifkan LED dan mengirimkan respons "LED ON".
    • Path /off: Mematikan LED dan mengirimkan respons "LED OFF".

Kesimpulan

Pada tutorial ini, kita telah belajar cara membuat web server berbasis WiFi menggunakan ESPAsyncWebServer pada ESP32 DevKitC V1 dalam mode Access Point (AP). Dengan mode ini, ESP32 dapat menjadi hotspot WiFi dan menerima koneksi langsung dari perangkat lain tanpa router.

Sebagai pengembangan lebih lanjut, Anda dapat menambahkan sensor data, autentikasi pengguna, atau menggunakan AJAX untuk komunikasi real-time antara ESP32 dan klien web. Semoga tutorial ini bermanfaat, selamat mencoba!