ESP32: Buat Manager WiFi (AsyncWebServer library)

ESP32: Buat Manager WiFi (AsyncWebServer library)

Di panduan ini, kita bakal bikin dan nyiapin Wi-Fi Manager pakai Library ESPAsyncWebServer. Ini bisa kamu modifikasi buat proyek server web kamu atau proyek apa pun yang butuh koneksi ke Wi-Fi. Dengan Wi-Fi Manager ini, kamu bisa sambungin ESP32 ke jaringan Wi-Fi (titik akses) mana aja tanpa harus nulis kode buat SSID atau password tiap kali.
Nantinya, ESP kamu bakal otomatis nyambung ke jaringan terakhir yang udah disimpan. Kalau nggak ada jaringan yang tersimpan, ESP bakal bikin titik akses (hotspot) sendiri. Dari situ, kamu tinggal masuk dan atur kredensial Wi-Fi baru lewat browser, gampang kan? Jadi nggak perlu repot-repot upload ulang kode cuma buat ganti jaringan!

Biar lebih paham cara kerja proyek ini, coba deh cek tutorial berikut:

Cara Kerjanya

Cek diagram berikut, biar lebih gampang ngerti gimana Wi-Fi Manager yang bakal kita bikin ini bekerja!

  • Saat ESP pertama kali dimulai, ia mencoba membaca file ssid.txt, pass.txt dan ip.txt* (1);
  • Jika file kosong (2) (pertama kali Anda menjalankan board, file kosong), board Anda ditetapkan sebagai titik akses (3);
  • Menggunakan perangkat berkemampuan Wi-Fi apa pun dengan browser, Kamu dapat terhubung ke Titik Akses yang baru dibuat (nama default ESP-WIFI-MANAGER);
  • Setelah membuat koneksi dengan ESP-WIFI-MANAGER, Kamu dapat pergi ke alamat IP default 192.168.4.1 untuk membuka halaman web yang memungkinkan Kamu mengkonfigurasi SSID dan kata sandi Anda (4);
  • SSID, kata sandi, dan alamat IP yang dimasukkan ke dalam formulir disimpan di file terkait: ssid.txt, pass.txt, dan ip.txt (5);
  • Setelah itu, boardESP restart (6);
  • Kali ini, setelah restart, file tidak kosong, sehingga ESP akan mencoba menyambung ke jaringan dalam station mode menggunakan pengaturan yang telah Kamu masukkan ke dalam formulir (7);
  • Jika membuat koneksi, proses selesai dengan sukses, dan Anda dapat mengakses halaman server web utama yang dapat melakukan apa pun yang Anda inginkan (mengontrol pembacaan sensor, mengontrol output, menampilkan beberapa teks, dll.) (9). Jika tidak, ini akan mengatur Titik Akses (3), dan Anda dapat mengakses alamat IP default (192.168.4.1) untuk menambahkan kombinasi SSID/kata sandi lainnya.

* kami juga membuat bidang gateway dan file gateway.txt untuk menyimpan alamat IP gateway (ini tidak ditampilkan dalam diagram).

Biar gampang dipahami, kita bakal bahas cara setup Wi-Fi Manager sambil bikin server web yang bisa ngontrol satu output (GPIO2—LED bawaan). Wi-Fi Manager ini bisa dipakai di proyek server web apa aja yang pakai library ESPAsyncWebServer, atau proyek lain yang butuh ESP buat konek ke jaringan Wi-Fi.

Menginstall Libary (Arduino IDE)

Kamu perlu install beberapa library di Arduino IDE buat bikin server web untuk proyek ini. Gampang kok, tinggal download dan pasang aja.

Library ESPAsyncWebServer, AsyncTCP, sama ESPAsyncTCP nggak tersedia di Arduino Library Manager, jadi harus dipasang manual. Caranya, copy file library-nya ke folder Libraries di instalasi Arduino kamu. Alternatifnya, di Arduino IDE kamu bisa klik Sketch > Include Library > Add .zip Library, terus pilih file library yang udah kamu download. Mudah kan

Menginstal Perpustakaan (VS Code + PlatformIO)

Kalau kamu pakai PlatformIO buat program ESP32, cukup tambahin ini ke file platformio.ini. Nanti library ESPAsyncWebServer bakal otomatis ke-install, termasuk dependency-nya kayak AsyncTCP atau ESPAsyncTCP. Plus, sekalian kita setting sistem file default ke LittleFS dan ubah baud rate jadi 115200. Nih, langsung copas aja:

monitor_speed = 115200
lib_deps = ESP Async WebServer
board_build.filesystem = littlefs

Mengatur File kamu

Biar proyeknya rapi dan gampang dimengerti, kita bakal bikin 4 file terpisah buat bangun server web ini. Jadi semuanya nggak numpuk di satu tempat dan lebih enak buat diatur.

  • Sketsa Arduino yang menangani server web;
  • index.html: untuk menentukan konten halaman web dalam station mode untuk mengontrol keluaran (atau halaman web lain yang ingin Anda buat);
  • style.css: untuk menata halaman web;
  • wifimanager.html: untuk menentukan konten halaman web untuk menampilkan Manajer Wi-Fi saat ESP dalam mode titik akses.

File HTML dan CSS-nya harus disimpan di folder data yang ada di dalam folder sketsa Arduino kamu. Kayak yang udah dijelasin di diagram sebelumnya. Nanti file ini bakal kita upload ke sistem file ESP32 (LittleFS).

Kamu bisa Mengunduh Semua File projek :

Membuat File HTML

Buat proyek ini, kamu butuh dua file HTML:

index.html buat halaman utama yang ngontrol output (kayak LED). wifimanager.html buat halaman Wi-Fi Manager biar ESP32 bisa konek ke Wi-Fi. Simpel kan? Tinggal siapin aja dua file ini!

index.html

Nih, teks yang harus kamu copas ke file index.html

<!DOCTYPE html>
<html>
  <head>
    <title>ESP WEB SERVER</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  </head>
  <body>
    <div class="topnav">
      <h1>ESP WEB SERVER</h1>
    </div>
    <div class="content">
      <div class="card-grid">
        <div class="card">
          <p class="card-title"><i class="fas fa-lightbulb"></i> GPIO 2</p>
          <p>
            <a href="on"><button class="button-on">ON</button></a>
            <a href="off"><button class="button-off">OFF</button></a>
          </p>
          <p class="state">State: %STATE%</p>
        </div>
      </div>
    </div>
  </body>
</html>

Kita nggak bakal bahas gimana cara kerja file HTML ini, soalnya bukan itu fokus tutorial ini. Tujuan utama tutorial ini adalah ngejelasin bagian-bagian yang ada hubungannya sama Wi-Fi Manager.

wifimanager.html

Tampilan halaman web Wi-Fi Manager kayak gini nih:

Copy aja kode berikut ke file wifimanager.html. Kode ini bakal bikin halaman web dengan form yang punya tiga kolom input plus tombol Kirim.

<!DOCTYPE html>
<html>
<head>
  <title>ESP Wi-Fi Manager</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:,">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="topnav">
    <h1>ESP Wi-Fi Manager</h1>
  </div>
  <div class="content">
    <div class="card-grid">
      <div class="card">
        <form action="/" method="POST">
          <p>
            <label for="ssid">SSID</label>
            <input type="text" id ="ssid" name="ssid"><br>
            <label for="pass">Password</label>
            <input type="text" id ="pass" name="pass"><br>
            <label for="ip">IP Address</label>
            <input type="text" id ="ip" name="ip" value="192.168.1.200"><br>
            <label for="gateway">Gateway Address</label>
            <input type="text" id ="gateway" name="gateway" value="192.168.1.1"><br>
            <input type ="submit" value ="Submit">
          </p>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

Di file HTML ini, kita bikin form yang bakal ngirim data ke server lewat HTTP POST.

<form action="/" method="POST">

Formnya punya tiga kolom input lengkap sama labelnya: SSID, password, sama alamat IP.

Berikut ini kolom input buat SSID:

<label for="ssid">SSID</label>
<input type="text" id ="ssid" name="ssid"><br>

Berikut ini kolom input buat password:

<label for="pass">Password</label>
<input type="text" id ="pass" name="pass"><br>

Ada juga kolom input buat alamat IP yang mau dikaitin ke ESP dalam station mode. Secara default, alamatnya diset ke 192.168.1.200, tapi kamu bebas ganti ke alamat IP default lain atau bahkan hapus aja parameter valuenya biar nggak ada nilai default.

<input type="text" id ="ip" name="ip" value="192.168.1.200">

Terakhir, ada kolom input buat alamat gateway. Kalau default alamat IP-nya 192.168.1.200, biasanya gateway-nya otomatis di-set ke 192.168.1.1.

<input type="text" id ="gateway" name="gateway" value="192.168.1.1"><br>

CSS File

Copy aja gaya berikut ke file style.css kamu. Kita nggak bakal bahas gimana cara kerja gaya ini, soalnya gaya serupa udah pernah dijelasin di proyek Server Web ESP lainnya.

html {
  font-family: Arial, Helvetica, sans-serif; 
  display: inline-block; 
  text-align: center;
}

h1 {
  font-size: 1.8rem; 
  color: white;
}

p { 
  font-size: 1.4rem;
}

.topnav { 
  overflow: hidden; 
  background-color: #0A1128;
}

body {  
  margin: 0;
}

.content { 
  padding: 5%;
}

.card-grid { 
  max-width: 800px; 
  margin: 0 auto; 
  display: grid; 
  grid-gap: 2rem; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card { 
  background-color: white; 
  box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
}

.card-title { 
  font-size: 1.2rem;
  font-weight: bold;
  color: #034078
}

input[type=submit] {
  border: none;
  color: #FEFCFB;
  background-color: #034078;
  padding: 15px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 100px;
  margin-right: 10px;
  border-radius: 4px;
  transition-duration: 0.4s;
  }

input[type=submit]:hover {
  background-color: #1282A2;
}

input[type=text], input[type=number], select {
  width: 50%;
  padding: 12px 20px;
  margin: 18px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

label {
  font-size: 1.2rem; 
}
.value{
  font-size: 1.2rem;
  color: #1282A2;  
}
.state {
  font-size: 1.2rem;
  color: #1282A2;
}
button {
  border: none;
  color: #FEFCFB;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  width: 100px;
  border-radius: 4px;
  transition-duration: 0.4s;
}
.button-on {
  background-color: #034078;
}
.button-on:hover {
  background-color: #1282A2;
}
.button-off {
  background-color: #858585;
}
.button-off:hover {
  background-color: #252524;
} 

Menyiapkan Server Web

Kalau pakai VS Code dengan ekstensi PlatformIO, kamu perlu edit file platformio.ini biar sesuai kayak gambar di bawah. Tapi kalau pakai Arduino IDE, kamu bisa skip bagian ini.

platformio.ini ESP32:

[env:esp32doit-devkit-v1]
platform = espressif32
board = esp32doit-devkit-v1
framework = arduino
monitor_speed=115200
lib_deps = ESP Async WebServer

Code

Copy aja kode berikut ke Arduino IDE kamu, atau kalau pakai VS Code, tempel ke file main.cpp.

/*********
  Rui Santos & Sara Santos - Random Nerd Tutorials
  Complete instructions at https://RandomNerdTutorials.com/esp32-wi-fi-manager-asyncwebserver/
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*********/
#include <Arduino.h>
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <AsyncTCP.h>
#include "LittleFS.h"

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

// Search for parameter in HTTP POST request
const char* PARAM_INPUT_1 = "ssid";
const char* PARAM_INPUT_2 = "pass";
const char* PARAM_INPUT_3 = "ip";
const char* PARAM_INPUT_4 = "gateway";

//Variables to save values from HTML form
String ssid;
String pass;
String ip;
String gateway;

// File paths to save input values permanently
const char* ssidPath = "/ssid.txt";
const char* passPath = "/pass.txt";
const char* ipPath = "/ip.txt";
const char* gatewayPath = "/gateway.txt";

IPAddress localIP;
//IPAddress localIP(192, 168, 1, 200); // hardcoded

// Set your Gateway IP address
IPAddress localGateway;
//IPAddress localGateway(192, 168, 1, 1); //hardcoded
IPAddress subnet(255, 255, 0, 0);

// Timer variables
unsigned long previousMillis = 0;
const long interval = 10000;  // interval to wait for Wi-Fi connection (milliseconds)

// Set LED GPIO
const int ledPin = 2;
// Stores LED state

String ledState;

// Initialize LittleFS
void initLittleFS() {
  if (!LittleFS.begin(true)) {
    Serial.println("An error has occurred while mounting LittleFS");
  }
  Serial.println("LittleFS mounted successfully");
}

// Read File from LittleFS
String readFile(fs::FS &fs, const char * path){
  Serial.printf("Reading file: %s\r\n", path);

  File file = fs.open(path);
  if(!file || file.isDirectory()){
    Serial.println("- failed to open file for reading");
    return String();
  }
  
  String fileContent;
  while(file.available()){
    fileContent = file.readStringUntil('\n');
    break;     
  }
  return fileContent;
}

// Write file to LittleFS
void writeFile(fs::FS &fs, const char * path, const char * message){
  Serial.printf("Writing file: %s\r\n", path);

  File file = fs.open(path, FILE_WRITE);
  if(!file){
    Serial.println("- failed to open file for writing");
    return;
  }
  if(file.print(message)){
    Serial.println("- file written");
  } else {
    Serial.println("- write failed");
  }
}

// Initialize WiFi
bool initWiFi() {
  if(ssid=="" || ip==""){
    Serial.println("Undefined SSID or IP address.");
    return false;
  }

  WiFi.mode(WIFI_STA);
  localIP.fromString(ip.c_str());
  localGateway.fromString(gateway.c_str());


  if (!WiFi.config(localIP, localGateway, subnet)){
    Serial.println("STA Failed to configure");
    return false;
  }
  WiFi.begin(ssid.c_str(), pass.c_str());
  Serial.println("Connecting to WiFi...");

  unsigned long currentMillis = millis();
  previousMillis = currentMillis;

  while(WiFi.status() != WL_CONNECTED) {
    currentMillis = millis();
    if (currentMillis - previousMillis >= interval) {
      Serial.println("Failed to connect.");
      return false;
    }
  }

  Serial.println(WiFi.localIP());
  return true;
}

// Replaces placeholder with LED state value
String processor(const String& var) {
  if(var == "STATE") {
    if(digitalRead(ledPin)) {
      ledState = "ON";
    }
    else {
      ledState = "OFF";
    }
    return ledState;
  }
  return String();
}

void setup() {
  // Serial port for debugging purposes
  Serial.begin(115200);

  initLittleFS();

  // Set GPIO 2 as an OUTPUT
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
  
  // Load values saved in LittleFS
  ssid = readFile(LittleFS, ssidPath);
  pass = readFile(LittleFS, passPath);
  ip = readFile(LittleFS, ipPath);
  gateway = readFile (LittleFS, gatewayPath);
  Serial.println(ssid);
  Serial.println(pass);
  Serial.println(ip);
  Serial.println(gateway);

  if(initWiFi()) {
    // Route for root / web page
    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
      request->send(LittleFS, "/index.html", "text/html", false, processor);
    });
    server.serveStatic("/", LittleFS, "/");
    
    // Route to set GPIO state to HIGH
    server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request) {
      digitalWrite(ledPin, HIGH);
      request->send(LittleFS, "/index.html", "text/html", false, processor);
    });

    // Route to set GPIO state to LOW
    server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request) {
      digitalWrite(ledPin, LOW);
      request->send(LittleFS, "/index.html", "text/html", false, processor);
    });
    server.begin();
  }
  else {
    // Connect to Wi-Fi network with SSID and password
    Serial.println("Setting AP (Access Point)");
    // NULL sets an open Access Point
    WiFi.softAP("ESP-WIFI-MANAGER", NULL);

    IPAddress IP = WiFi.softAPIP();
    Serial.print("AP IP address: ");
    Serial.println(IP); 

    // Web Server Root URL
    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
      request->send(LittleFS, "/wifimanager.html", "text/html");
    });
    
    server.serveStatic("/", LittleFS, "/");
    
    server.on("/", HTTP_POST, [](AsyncWebServerRequest *request) {
      int params = request->params();
      for(int i=0;i<params;i++){
        const AsyncWebParameter* p = request->getParam(i);
        if(p->isPost()){
          // HTTP POST ssid value
          if (p->name() == PARAM_INPUT_1) {
            ssid = p->value().c_str();
            Serial.print("SSID set to: ");
            Serial.println(ssid);
            // Write file to save value
            writeFile(LittleFS, ssidPath, ssid.c_str());
          }
          // HTTP POST pass value
          if (p->name() == PARAM_INPUT_2) {
            pass = p->value().c_str();
            Serial.print("Password set to: ");
            Serial.println(pass);
            // Write file to save value
            writeFile(LittleFS, passPath, pass.c_str());
          }
          // HTTP POST ip value
          if (p->name() == PARAM_INPUT_3) {
            ip = p->value().c_str();
            Serial.print("IP Address set to: ");
            Serial.println(ip);
            // Write file to save value
            writeFile(LittleFS, ipPath, ip.c_str());
          }
          // HTTP POST gateway value
          if (p->name() == PARAM_INPUT_4) {
            gateway = p->value().c_str();
            Serial.print("Gateway set to: ");
            Serial.println(gateway);
            // Write file to save value
            writeFile(LittleFS, gatewayPath, gateway.c_str());
          }
          //Serial.printf("POST[%s]: %s\n", p->name().c_str(), p->value().c_str());
        }
      }
      request->send(200, "text/plain", "Done. ESP will restart, connect to your router and go to IP address: " + ip);
      delay(3000);
      ESP.restart();
    });
    server.begin();
  }
}

void loop() {

}

Bagaimana Kode Bekerja

Yuk, kita cek kodenya buat ngerti gimana Wi-Fi Manager bekerja.
Variabel berikut dipakai buat nangkep SSID, password, alamat IP, dan gateway dari HTTP POST request yang dikirim pas form di-submit.

// Search for parameter in HTTP POST request
const char* PARAM_INPUT_1 = "ssid";
const char* PARAM_INPUT_2 = "pass";
const char* PARAM_INPUT_3 = "ip";
const char* PARAM_INPUT_4 = "gateway";

Variabel ssid, pass, ip, dan gateway dipakai buat nyimpen nilai SSID, password, alamat IP, dan gateway yang dikirim lewat form.

//Variables to save values from HTML form
String ssid;
String pass;
String ip;
String gateway;

SSID, password, alamat IP, dan gateway yang dikirim bakal disimpan di file di sistem file ESP. Variabel berikut dipakai buat nunjukin jalur file-file itu.

// File paths to save input values permanently
const char* ssidPath = "/ssid.txt";
const char* passPath = "/pass.txt";
const char* ipPath = "/ip.txt";
const char* gatewayPath = "/gateway.txt";

Alamat IP station dan gateway dikirim lewat form Wi-Fi Manager. Subnet-nya di-hardcode, tapi kalau perlu, kamu bisa gampang banget modif proyek ini buat nambahin kolom input buat subnet juga.

IPAddress localIP;
//IPAddress localIP(192, 168, 1, 200); // hardcoded

// Set your Gateway IP address
IPAddress localGateway;
//IPAddress localGateway(192, 168, 1, 1); //hardcoded
IPAddress subnet(255, 255, 0, 0);

initWiFi()

Fungsi initWiFi() bakal ngembaliin nilai boolean (true atau false) yang nunjukin apakah ESP berhasil nyambung ke jaringan atau nggak.

bool initWiFi() {
  if(ssid=="" || ip==""){
    Serial.println("Undefined SSID or IP address.");
    return false;
  }

  WiFi.mode(WIFI_STA);
  localIP.fromString(ip.c_str());

  if (!WiFi.config(localIP, gateway, subnet)){
    Serial.println("STA Failed to configure");
    return false;
  }
  WiFi.begin(ssid.c_str(), pass.c_str());
  Serial.println("Connecting to WiFi...");

  unsigned long currentMillis = millis();
  previousMillis = currentMillis;

  while(WiFi.status() != WL_CONNECTED) {
    currentMillis = millis();
    if (currentMillis - previousMillis >= interval) {
      Serial.println("Failed to connect.");
      return false;
    }
  }

  Serial.println(WiFi.localIP());
  return true;
}

Pertama, fungsi ini ngecek dulu apakah variabel ssid dan ip kosong. Kalau iya, ESP nggak bakal bisa nyambung ke jaringan, jadi hasilnya langsung false.

if(ssid=="" || ip==""){

Kalau nggak kosong, kita bakal coba nyambung ke jaringan pakai SSID dan password yang disimpan di variabel ssid dan pass, sekaligus nge-set alamat IP-nya.

WiFi.mode(WIFI_STA);
localIP.fromString(ip.c_str());

if (!WiFi.config(localIP, gateway, subnet)){
  Serial.println("STA Failed to configure");
  return false;
}
WiFi.begin(ssid.c_str(), pass.c_str());
Serial.println("Connecting to WiFi...");

Kalau dalam 10 detik (sesuai nilai variabel interval) ESP masih nggak bisa nyambung ke Wi-Fi, maka hasilnya bakal false.

unsigned long currentMillis = millis();
previousMillis = currentMillis;

while(WiFi.status() != WL_CONNECTED) {
  currentMillis = millis();
  if (currentMillis - previousMillis >= interval) {
    Serial.println("Failed to connect.");
    return false;
  }

Kalau nggak ada kondisi sebelumnya yang terpenuhi, berarti ESP berhasil nyambung ke jaringan dalam station mode, dan fungsi bakal ngembaliin nilai true.

return true;

setup()

Di fungsi setup(), kita mulai dengan membaca file buat dapetin SSID, password, alamat IP, dan gateway yang sebelumnya udah disimpan.

ssid = readFile(LittleFS, ssidPath);
pass = readFile(LittleFS, passPath);
ip = readFile(LittleFS, ipPath);
gateway = readFile (LittleFS, gatewayPath);

Kalau ESP berhasil terhubung dalam station mode (fungsi initWiFi() ngembaliin nilai true), kita bisa nambahin perintah buat menangani permintaan server web, atau kode lain yang butuh ESP nyambung ke internet.

if(initWiFi()) {
  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send(LittleFS, "/index.html", "text/html", false, processor);
  });
  server.serveStatic("/", LittleFS, "/");
    
  // Route to set GPIO state to HIGH
  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request) {
    digitalWrite(ledPin, HIGH);
    request->send(LittleFS, "/index.html", "text/html", false, processor);
  });

  // Route to set GPIO state to LOW
  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request) {
    digitalWrite(ledPin, LOW);
    request->send(LittleFS, "/index.html", "text/html", false, processor);
  });
  server.begin();
}

Kalau bukan itu masalahnya, fungsi initWiFi() bakal ngembaliin false. Dalam hal ini, ESP bakal nge-setup titik akses (Access Point).

else {
  // Connect to Wi-Fi network with SSID and password
  Serial.println("Setting AP (Access Point)");
  // NULL sets an open Access Point
  WiFi.softAP("ESP-WIFI-MANAGER", NULL);

  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP); 

Buat ngatur titik akses, kita pakai metode softAP() dan ngasih nama titik akses sama password sebagai argumen. Karena mau bikin titik akses terbuka, password-nya kita set ke NULL. Tapi kalau mau, kamu bisa tambahin password. Kalau pengen belajar lebih lanjut soal setup Access Point, cek aja salah satu tutorial berikut:

Pas kamu akses Access Point, ESP bakal nampilin halaman web buat masukin kredensial jaringan lewat form. Jadi, ESP harus ngirim file wifimanager.html tiap kali ada permintaan di root URL (/).

// Web Server Root URL
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(LittleFS, "/wifimanager.html", "text/html");
});

Kita juga perlu ngatur apa yang terjadi pas form dikirim lewat HTTP POST. Baris berikut bakal nyimpen nilai yang dikirim ke variabel ssid, pass, dan ip, terus nyimpen variabel-variabel itu ke file masing-masing di sistem file ESP.

server.on("/", HTTP_POST, [](AsyncWebServerRequest *request) {
  int params = request->params();
  for(int i=0;i<params;i++){
    AsyncWebParameter* p = request->getParam(i);
    if(p->isPost()){
      // HTTP POST ssid value
      if (p->name() == PARAM_INPUT_1) {
        ssid = p->value().c_str();
        Serial.print("SSID set to: ");
        Serial.println(ssid);
        // Write file to save value
        writeFile(LittleFS, ssidPath, ssid.c_str());
      }
      // HTTP POST pass value
      if (p->name() == PARAM_INPUT_2) {
        pass = p->value().c_str();
        Serial.print("Password set to: ");
        Serial.println(pass);
        // Write file to save value
        writeFile(LittleFS, passPath, pass.c_str());
      }
      // HTTP POST ip value
      if (p->name() == PARAM_INPUT_3) {
        ip = p->value().c_str();
        Serial.print("IP Address set to: ");
        Serial.println(ip);
        // Write file to save value
        writeFile(LittleFS, ipPath, ip.c_str());
      }
     // HTTP POST gateway value
      if (p->name() == PARAM_INPUT_4) {
        gateway = p->value().c_str();
        Serial.print("Gateway set to: ");
        Serial.println(gateway);
        // Write file to save value
        writeFile(LittleFS, gatewayPath, gateway.c_str());
      }
      //Serial.printf("POST[%s]: %s\n", p->name().c_str(), p->value().c_str());
    }
  }

Setelah form dikirim, ESP bakal ngasih respon berupa teks sederhana biar kita tahu kalau detail form-nya udah diterima.

request->send(200, "text/plain", "Done. ESP will restart, connect to your router and go to IP address: " + ip);

Setelah tiga detik, ESP bakal di-restart pakai ESP.restart().

delay(3000);
ESP.restart();

Itu tadi ringkasan singkat gimana kode ini bekerja. Kamu juga bisa pakai ide ini buat proyek server web lainnya yang dibikin pakai pustaka ESPAsyncWebServer.

Mengunggah kode dan file

Upload file di folder data ke ESP32 kamu. Kalau pakai Arduino IDE, tekan [Ctrl] + [Shift] + [P] di Windows atau [⌘] + [Shift] + [P] di MacOS buat buka Command Palette. Cari perintah “Upload LittleFS to Pico/ESP8266/ESP32” terus klik perintah itu. File di folder data bakal langsung diupload ke ESP32 kamu.

Setelah file berhasil diupload, lanjutkan dengan mengupload kodenya ke board kamu.

Demonstrasi

Setelah semua file dan sketsa berhasil diupload, buka Serial Monitor. Kalau ini pertama kali kamu jalanin kodenya, ESP bakal coba baca file ssid.txt, pass.txt, dan ip.txt, tapi nggak bakal berhasil karena file-file itu belum dibuat. Jadi, ESP otomatis bakal ngeaktifin Access Point.

Di komputer atau ponsel kamu, buka pengaturan jaringan dan sambungkan ke access point ESP-WIFI-MANAGER.

Setelah itu, buka browser kamu dan akses 192.168.4.1. Halaman web Wi-Fi Manager bakal muncul.

Masukkan kredensial jaringan kamu: SSID, Password, dan alamat IP yang tersedia di jaringan lokal. Setelah itu, kamu bakal diarahkan ke halaman dengan pesan berikut:
ESP32/ESP8266 sukses terhubung ke station Wi-Fi Manager.

Pada saat yang sama, ESP bakal nge-print di Serial Monitor kalau parameter yang kamu masukin berhasil disimpan di file terkait.
Setelah beberapa detik, ESP bakal restart. Kalau SSID dan password yang kamu masukin benar, ESP bakal mulai dalam mode station.

Sekarang, buka browser di jaringan lokal kamu dan masukkan alamat IP ESP. Kamu bakal dapetin akses ke halaman web buat ngontrol output.

Menyelesaikan

Di tutorial ini, kamu udah belajar gimana cara setup Wi-Fi Manager buat proyek server web atau proyek lain yang butuh ESP terhubung ke internet. Dengan Wi-Fi Manager, kamu bisa gampang-gampangin nyambungin ESP ke jaringan lain tanpa harus hardcode kredensialnya. Fitur ini bisa kamu pakai di proyek server web apa aja yang dibikin pakai pustaka ESPAsyncWebServer.

Semoga tutorial ini bermanfaat buat kamu.
Terima kasih udah membaca!

Sumber : https://randomnerdtutorials.com/esp32-wi-fi-manager-asyncwebserver/

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

    Tinggalkan Balasan

    Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *