Alvoria Neura


Cara Program Wifi Espasyncwebserver Station Esp32 Devkit V1

Tutorial Lengkap: Membuat Web Server WiFi Station (STA) pada ESP32 DevKit V1 dengan ESPAsyncWebServer

ESP32 DevKit V1 adalah mikrokontroler yang memiliki fitur WiFi dan Bluetooth, sehingga sering digunakan dalam proyek IoT. Salah satu fitur yang sering digunakan adalah web server, yang memungkinkan kita untuk mengontrol atau memantau perangkat secara nirkabel.

Pada tutorial ini, kita akan menggunakan library ESPAsyncWebServer untuk membuat web server dalam mode Station (STA) pada ESP32 DevKit V1. Dalam mode STA, ESP32 akan terhubung ke jaringan WiFi yang sudah ada (misalnya, router rumah), sehingga dapat diakses dari perangkat lain dalam jaringan yang sama. Dengan demikian, pengguna tidak perlu membuat jaringan baru, cukup menggunakan jaringan yang sudah ada untuk komunikasi antara ESP32 dan klien web.

1. Persiapan Perangkat dan Software

Perangkat Keras

  • ESP32 DevKit V1
  • Kabel USB Type-C/Micro USB
  • LED dan Resistor (Opsional untuk demonstrasi kontrol perangkat)
  • Sensor tambahan (misalnya, DHT11 untuk temperatur dan kelembaban, opsional)

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
  5. Pastikan library WiFi sudah tersedia di Arduino IDE.

3. Konfigurasi Koneksi WiFi

Dalam mode Station (STA), ESP32 akan bertindak sebagai klien dan menghubungkan dirinya ke jaringan WiFi yang tersedia. Pastikan Anda memiliki akses ke router dan mengetahui SSID serta kata sandinya sebelum melanjutkan.

4. Kode Program Web Server Mode Station (STA)

Berikut adalah contoh kode lengkap untuk membuat web server dengan ESP32 dalam mode Station (STA) yang menampilkan halaman HTML dan dapat mengontrol LED. Selain itu, kita juga bisa mengembangkan fitur tambahan seperti menampilkan data dari sensor.


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

const char* ssid = "NamaWiFi"; // Ganti dengan SSID WiFi Anda
const char* password = "KataSandiWiFi"; // Ganti dengan password WiFi Anda
const int ledPin = 2;

AsyncWebServer server(80);


const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
    <title>ESP32 STA 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 STA 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.begin(ssid, password);
    Serial.print("Menghubungkan ke WiFi");
    while (WiFi.status() != WL_CONNECTED) {
        delay(1000);
        Serial.print(".");
}
    Serial.println("\nTerhubung ke jaringan WiFi");
    Serial.print("IP Address: ");
    Serial.println(WiFi.localIP());

    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 Station (STA).
    • 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. Menghubungkan ke WiFi:

    • WiFi.begin(ssid, password); akan menghubungkan ESP32 ke jaringan WiFi yang tersedia.
    • WiFi.status() akan dicek hingga ESP32 berhasil terhubung ke jaringan.
  4. Menampilkan Alamat IP:

    • WiFi.localIP(); menampilkan alamat IP yang diberikan oleh router
  5. Menangani HTTP Requests:

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

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

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

5. Pengujian dan Debugging Web Server

  1. Unggah kode ke ESP32 menggunakan Arduino IDE.
  2. ESP32 akan mencoba menghubungkan ke jaringan WiFi yang telah dikonfigurasi.
  3. Setelah berhasil terhubung, periksa IP Address di Serial Monitor.
  4. Buka browser dan masukkan IP Address yang muncul pada Serial Monitor (misalnya: http://192.168.1.100)
  5. Klik tombol "Nyalakan LED" atau "Matikan LED" untuk mengontrol LED.
  6. Jika terjadi kendala koneksi, periksa SSID dan kata sandi WiFi.

6. Pengembangan Lebih Lanjut

  • Menambahkan Sensor: Bisa ditambahkan pembacaan data dari sensor seperti DHT11 untuk menampilkan suhu dan kelembaban.
  • Autentikasi Pengguna: Menambahkan fitur login agar hanya pengguna tertentu yang bisa mengontrol perangkat.
  • AJAX untuk Komunikasi Real-time: Memungkinkan pembaruan status perangkat secara dinamis tanpa harus memuat ulang halaman.
  • Penyimpanan Data: Menggunakan penyimpanan internal atau eksternal seperti microSD untuk mencatat log aktivitas perangkat.

Kesimpulan

Pada tutorial ini, kita telah belajar cara membuat web server berbasis WiFi menggunakan ESPAsyncWebServer pada ESP32 DevKit V1 dalam mode Station (STA). Dengan mode ini, ESP32 dapat terhubung ke jaringan WiFi yang sudah ada dan dapat diakses dari perangkat lain dalam jaringan tersebut.

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!