Langkah 1: Persiapkan Hardware dan Software

1. ESP32 DevKit V1 - Anda memerlukan board ESP32 yang terhubung ke komputer Anda untuk pemrograman. Pastikan Anda sudah menginstall driver dan board ESP32 di Arduino IDE.
2. Arduino IDE - Pastikan Anda sudah menginstall Arduino IDE terbaru dan telah menambahkan board ESP32. Ikuti langkah-langkah berikut:
• Buka Arduino IDE > File > Preferences
• Pada kolom Additional Boards Manager URLs, tambahkan URL berikut:
Salin

https://dl.espressif.com/dl/package_esp32_index.json



• Pergi ke Tools > Board > Board Manager dan cari ESP32, Lalu Instal board ESP32 by Espressif Systems.
3. Library yang diperlukan:
• ESPAsyncWebServer: Untuk membuat web server yang menangani permintaan HTTP secara asinkron.
• AsyncTCP: Diperlukan oleh library ESPAsyncWebServer.

Langkah 2: Instalasi Library

1. Buka Arduino IDE dan pergi ke Sketch > Include Library > Manage Libraries...
2. Buka Sketch > Include Library > Manage Libraries
3. Cari ESPAsyncWebServer dan install library tersebut.
4. Cari juga AsyncTCP, dan install.

Langkah 3: Menyusun Kode Program

Pada tutorial ini, kita akan membuat ESP32 berfungsi dalam dua mode:

Access Point (AP) dan Station (STA). Mode AP memungkinkan ESP32 untuk membuat jaringan Wi-Fi yang dapat diakses perangkat lain, sementara mode STA memungkinkan ESP32 terhubung ke jaringan Wi-Fi yang sudah ada.

Kode Program

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

// Konfigurasi untuk Mode AP
const char* apSSID = "ESP32-AccessPoint";
const char* apPassword = "123456789";

// Konfigurasi untuk Mode Station
const char* ssid = "NamaWiFiAnda";
const char* password = "PasswordWiFiAnda";

// Membuat objek AsyncWebServer di port 80
AsyncWebServer server(80);

void setup() {
    Serial.begin(115200);
    
    // Mengaktifkan Mode Access Point (AP)
    WiFi.softAP(apSSID, apPassword);
    Serial.println("Access Point Mode Started");
    Serial.print("IP Address: ");
    Serial.println(WiFi.softAPIP());

    // Menghubungkan ke jaringan Wi-Fi (Mode Station)
    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
    }
    Serial.println("");
    Serial.print("Connected to WiFi. IP Address: ");
    Serial.println(WiFi.localIP());

    // Menyiapkan route HTTP
    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/html", "<h1>ESP32 Web Server</h1><p>Welcome to the ESP32 web server!</p>");
    });

    // Menyajikan halaman HTML ketika diakses
    server.on("/status", HTTP_GET, [](AsyncWebServerRequest *request){
    String html = "<h2>Device Status</h2>";
    html += "<p>ESP32 IP (AP Mode): " + WiFi.softAPIP().toString() + "</p>";
    html += "<p>ESP32 IP (STA Mode): " + WiFi.localIP().toString() + "</p>";
    request->send(200, "text/html", html);
    });

    // Menjalankan web server
    server.begin();
}

void loop() {
    // Server tidak memerlukan proses di dalam loop karena semuanya dilakukan asinkron
}

Penjelasan Kode:

1. Inisialisasi Library:
   
   
   • Library WiFi.h digunakan untuk mengelola koneksi Wi-Fi pada ESP32.
   • Library ESPAsyncWebServer.h digunakan untuk membuat server web asinkron yang lebih efisien daripada menggunakan server HTTP biasa.
   • Library AsyncTCP.h diperlukan untuk komunikasi TCP asinkron yang digunakan oleh ESPAsyncWebServer.
2. Pengaturan Mode Wi-Fi:
   
   
   • Mode AP: ESP32 akan membuat jaringan Wi-Fi dengan nama ESP32-AccessPoint dan password 12345678. Pengguna dapat terhubung ke jaringan ini menggunakan perangkat lain seperti laptop atau ponsel.
   • Mode STA: ESP32 juga akan terhubung ke jaringan Wi-Fi yang sudah ada dengan menggunakan SSID dan password yang Anda tentukan.
3. Server Web:
   
   
   • server.on("/", HTTP_GET, ...): Ketika perangkat mengakses halaman root /, server akan mengirimkan HTML yang menampilkan pesan "Welcome to the ESP32 web server!".
   • server.on("/status", HTTP_GET, ...) Ketika mengakses UR /status, server akan mengirimkan halaman yang menampilkan alamat IP ESP32 baik dalam mode AP maupun STA.
4. Fungsi setup():
   
   
   • Karena server beroperasi secara asinkron, fungsi loop() tidak perlu melakukan hal lainnya selain berada dalam kondisi standby untuk menerima permintaan HTTP.
5. Fungsi loop():
   
   
   • Fungsi ini dijalankan sekali saat board ESP32 mulai bekerja. Di sini Anda mengatur mode AP dan STA, menghubungkan ke Wi-Fi, dan menyiapkan server web.

Langkah 4: Memuat dan Menguji Kode

1. Setelah kode selesai ditulis, pilih board ESP32 DevKit V1 pada Tools > Board.
2. Pilih port yang benar di Tools > Port.
3. Klik tombol Upload dan tunggu hingga proses selesai.
4. Setelah ESP32 terhubung, buka Serial Monitor (Tools > Serial Monitor) untuk melihat alamat IP yang diberikan pada mode AP dan STA.
5. Pada perangkat lain, sambungkan ke jaringan Wi-Fi yang dibuat oleh ESP32, misalnya "ESP32-AccessPoint".
6. Buka browser dan masukkan alamat IP ESP32-AccessPoint untuk melihat halaman utama dari web server.
7. Anda juga dapat mengakses halaman status di http://<IP_AP>/status untuk melihat informasi tentang alamat IP dalam mode AP dan STA.

Penjelasan Tentang Mode AP + STA

ESP32 dapat berfungsi dalam dua mode Wi-Fi secara bersamaan:

• Mode Access Point (AP): Board ini bertindak sebagai titik akses Wi-Fi untuk perangkat lain. Dalam contoh ini, board ESP32 membuat jaringan Wi-Fi yang bisa diakses perangkat lain (misalnya laptop atau smartphone).
• Mode Station (STA): Board ESP32 terhubung ke jaringan Wi-Fi yang sudah ada. Di sini, ESP32 berfungsi seperti perangkat lain yang terhubung ke router Wi-Fi..

Dengan menggabungkan kedua mode ini, ESP32 bisa berfungsi sebagai server Wi-Fi yang dapat diakses secara lokal melalui jaringan AP, sekaligus bisa terhubung ke jaringan internet melalui mode STA.

Langkah 5: Pengembangan Lebih Lanjut

1. Menyajikan Halaman HTML Dinamis: Anda dapat membuat halaman web yang lebih dinamis dengan menggunakan JavaScript, CSS, atau data yang dikumpulkan dari sensor atau input pengguna.
2. Menambahkan Halaman Pengaturan: Anda bisa membuat halaman untuk mengonfigurasi parameter seperti SSID dan password Wi-Fi melalui browser.
3. Interaksi dengan Perangkat: Anda bisa menambahkan elemen interaktif seperti tombol atau input form untuk mengontrol perangkat yang terhubung dengan ESP32.

Dengan menggunakan metode ini, Anda dapat membuat aplikasi berbasis web yang dapat diakses secara lokal melalui jaringan Wi-Fi yang dibuat oleh ESP32 atau melalui jaringan Wi-Fi lain yang terhubung ke ESP32.

Kesimpulan

Pada tutorial ini, kita telah belajar cara membuat web server berbasis WiFi menggunakan ESPAsyncWebServer pada ESP32 DevKit V1 dalam mode Dual Mode yaitu mode Station (STA) + Accesspoint (AP). Dengan mode ini, ESP32 dapat terhubung ke jaringan WiFi yang sudah ada dan dapat diakses dari perangkat lain dalam jaringan tersebut ataupun ESP32 dapat menjadi hotspot WiFi dan menerima koneksi langsung dari perangkat lain tanpa router.

Dengan penambahan fitur lebih lanjut seperti sensor, autentikasi, dan komunikasi real-time, ESP32 dapat digunakan dalam berbagai proyek IoT yang lebih kompleks. Semoga tutorial ini bermanfaat, selamat mencoba!