Alvoria Neura


Cara Program Wifi Espasyncwebserver Station Esp8266 Nodemcu V3

Tutorial Lengkap: Membuat Web Server WiFi Station (STA) pada ESP8266 NodeMCU V3 dengan ESPAsyncWebServer

ESP8266 NodeMCU V3 adalah salah satu mikrokontroler berbasis Wi-Fi yang populer dan banyak digunakan dalam berbagai proyek Internet of Things (IoT). Salah satu fitur unggulan dari ESP8266 adalah kemampuannya untuk terhubung ke jaringan WiFi dan bertindak sebagai pusat pengontrolan perangkat lain secara nirkabel. Hal ini menjadikannya pilihan ideal untuk membangun berbagai jenis aplikasi, termasuk web server yang dapat diakses melalui jaringan WiFi.

Dalam tutorial ini, kita akan membuat web server pada ESP8266 menggunakan library ESPAsyncWebServer dalam mode Station (STA). Mode STA pada ESP8266 memungkinkan modul ini untuk terhubung ke router atau titik akses WiFi yang sudah ada, sehingga dapat berkomunikasi dengan perangkat lain dalam jaringan yang sama. Kami juga akan memberikan contoh kode yang memungkinkan Anda untuk mengontrol LED menggunakan antarmuka web yang sederhana.

1. Persiapan Perangkat dan Software

Sebelum memulai, ada beberapa persiapan yang perlu dilakukan baik dari sisi perangkat keras maupun perangkat lunak.


Perangkat Keras


Untuk tutorial ini, berikut adalah perangkat keras yang dibutuhkan:

  • ESP8266 NodeMCU V3: Mikrokontroler ini memiliki kemampuan WiFi dan dapat diprogram menggunakan Arduino IDE.
  • Kabel USB Micro: Untuk menghubungkan ESP8266 ke komputer dan melakukan pemrograman.
  • LED dan resistor (opsional): LED dan resistor digunakan dalam contoh ini untuk mendemonstrasikan kontrol perangkat berbasis web server.

Software


Untuk pengembangan dan pemrograman, kita akan menggunakan:

  • Arduino IDE atau PlatformIO: Arduino IDE adalah pilihan populer untuk pemrograman mikrokontroler seperti ESP8266.
  • Library yang diperlukan:
    • ESPAsyncWebServer: Library ini digunakan untuk menangani permintaan HTTP secara asinkron di web server.
    • AsyncTCP: Digunakan untuk mengimplementasikan komunikasi TCP secara asinkron dengan ESP8266
    • WiFi: Library ini sudah terintegrasi dengan ESP8266 dan memungkinkan mikrokontroler untuk terhubung ke jaringan WiFi.

2. Instalasi Library ESPAsyncWebServer

  1. Buka Arduino IDE
  2. klik Sketch di menu atas, kemudian pilih Include Library dan pilih Manage Libraries.
  3. Di jendela Library Manager, cari ESPAsyncWebServer, Setelah ditemukan, klik Install
  4. Ulangi langkah yang sama untuk menginstal ESAsyncTCP.
  5. Pastikan bahwa library WiFi bawaan ESP8266 juga telah terpasang.

3. Kode Program Web Server Mode Station (STA)

Berikut adalah contoh kode untuk membuat web server pada ESP8266 dalam mode Station (STA). Kode ini juga mengontrol LED dengan mengakses halaman web melalui perangkat yang terhubung ke jaringan WiFi yang sama.


#include <ESP8266WiFi.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; // LED terhubung ke pin D4 (GPIO2) pada ESP8266

AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
    <title>ESP8266 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>ESP8266 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); // Set pin LED sebagai OUTPUT

    WiFi.begin(ssid, password); // Menghubungkan ESP8266 ke WiFi
    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()); // Menampilkan IP ESP8266

    // Menangani permintaan untuk halaman utama '/'
    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
        request->send_P(200, "text/html", index_html); // Mengirimkan HTML ke browser
    });

    // Menangani permintaan untuk menghidupkan LED pada path '/on'
    server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){
        digitalWrite(ledPin, HIGH); // Menghidupkan LED
        request->send(200, "text/plain", "LED ON"); // Mengirimkan respon
    });

    // Menangani permintaan untuk mematikan LED pada path '/off'
    server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
        digitalWrite(ledPin, LOW); // Mematikan LED
        request->send(200, "text/plain", "LED OFF"); // Mengirimkan respon
    });

    server.begin(); // Memulai server
}

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

Penjelasan Kode:

  1. Mengimpor Library:

    • ESP8266WiFi.h: Library ini digunakan untuk menghubungkan ESP8266 ke jaringan WiFi dalam mode Station.
    • ESPAsyncWebServer.h: Library ini menangani semua permintaan HTTP dari klien web (misalnya, browser) secara asinkron, yang berarti bahwa server dapat menangani banyak permintaan sekaligus tanpa menghalangi eksekusi program lainnya.
  2. Menentukan SSID dan Password Access Point:

    • Variabel ssid dan password digunakan untuk mengonfigurasi ESP8266 agar dapat terhubung ke jaringan WiFi tertentu. Anda harus menggantinya dengan informasi WiFi Anda.
  3. Menangani Koneksi WiFi:

    • WiFi.begin(ssid, password); digunakan untuk menghubungkan ESP8266 ke jaringan WiFi.
    • Menggunakan WiFi.status() untuk memeriksa status koneksi. Program akan terus mencoba menghubungkan hingga berhasil.
  4. Menampilkan IP Address:

    • Setelah berhasil terhubung ke WiFi, alamat IP yang diberikan oleh router akan ditampilkan di Serial Monitor menggunakan WiFi.localIP().
  5. Menangani HTTP Requests:

    • Root Path (/): Halaman utama HTML sederhana yang menampilkan dua tombol untuk menghidupkan atau mematikan LED.
    • Path /on: Ketika pengguna mengakses path ini melalui browser, ESP8266 akan mengaktifkan LED yang terhubung dan mengirimkan respons "LED ON".
    • Path /off: Ketika pengguna mengakses path ini, LED akan dimatikan dan ESP8266 akan mengirimkan respons "LED OFF".
  6. Menjalankan Server:

    • server.begin(); memulai server dan mulai mendengarkan permintaan dari klien web.
  7. Loop Kosong:

    • Dalam menggunakan library ESPAsyncWebServer, tidak ada logika yang perlu dijalankan di dalam fungsi loop(), karena semua permintaan HTTP diproses secara asinkron di luar fungsi utama.

4. Uji Coba Web Server

  1. Unggah kode ke ESP8266 menggunakan Arduino IDE.
  2. ESP8266 akan mencoba menghubungkan ke jaringan WiFi sesuai dengan konfigurasi yang Anda berikan.
  3. Setelah berhasil terhubung, buka Serial Monitor untuk melihat IP Address yang diberikan oleh router.
  4. Buka browser dan masukkan IP Address yang muncul pada Serial Monitor (misalnya: http://192.168.1.100)
  5. Anda akan melihat halaman dengan dua tombol: "Nyalakan LED" dan "Matikan LED". Klik tombol tersebut untuk mengontrol LED.

Kesimpulan

Tutorial ini menunjukkan bagaimana cara membangun web server berbasis WiFi menggunakan ESPAsyncWebServer pada ESP8266 NodeMCU V3 dalam mode Station (STA). Dengan demikian, ESP8266 dapat terhubung ke jaringan WiFi yang ada dan dapat diakses dari perangkat lain dalam jaringan yang sama.

Dengan pemahaman dasar ini, Anda dapat mengembangkan berbagai aplikasi berbasis web dengan ESP8266, seperti sensor monitoring, kontrol perangkat lainnya, dan aplikasi IoT lebih lanjut. Anda juga bisa menambahkan fitur lain seperti autentikasi pengguna, komunikasi AJAX,, atau manajemen data sensor untuk membuat aplikasi lebih interaktif dan berguna. Selamat mencoba!