Portal Captive ESP32 untuk Mengonfigurasi Pengaturan IP Statis dan DHCP: 8 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:56

ESP 32 adalah perangkat dengan WiFi dan BLE terintegrasi. Ini adalah semacam keuntungan bagi proyek-proyek IoT. Cukup berikan konfigurasi SSID, kata sandi, dan IP Anda dan integrasikan semuanya ke dalam cloud. Namun, mengelola pengaturan IP dan kredensial Pengguna dapat membuat pengguna pusing.

Bagaimana jika Pengguna ingin mengubah kredensial WiFi?

Bagaimana jika pengguna ingin mengganti pengaturan DHCP/IP Statis?

Mem-flash ESP32 setiap saat tidak dapat diandalkan dan bahkan bukan solusi untuk masalah ini. Di sini, di instruksi ini kita akan menunjukkan.

• Cara membuat portal tawanan.
• Hosting formulir web dari ESP32.
• Membaca dan Menulis dari SPIFFS ESP32.
• Membuat Titik Akses Lunak dan menghubungkan ke stasiun

Langkah 1: Spesifikasi Perangkat Keras dan Perangkat Lunak

Spesifikasi Perangkat Keras

• ESP32 WiFi/BLE
• Sensor Suhu dan Kelembaban Nirkabel

Spesifikasi Perangkat Lunak

Arduino IDE

Langkah 2: Membuat Portal Tawanan

Portal tawanan adalah halaman web yang ditampilkan kepada pengguna yang baru terhubung t sebelum mereka diberikan akses yang lebih luas ke sumber daya jaringan. Di sini kami menyajikan tiga halaman web untuk memilih antara DHCP dan Pengaturan IP Statis. kita dapat menentukan alamat IP ke ESP dengan dua cara.

• Alamat IP DHCP- ini adalah cara untuk menetapkan alamat IP secara dinamis ke perangkat. Alamat IP default ESP adalah 192.168.4.1
• Alamat IP statis- menetapkan Alamat IP permanen ke perangkat jaringan kami. untuk memberikan IP statis ke perangkat kita perlu menentukan alamat IP, alamat gateway, dan subnet mask.

Di halaman web pertama, Pengguna diberikan tombol radio untuk memilih antara pengaturan DHCP dan IP Statis. Di halaman web berikutnya, kami harus memberikan informasi terkait IP untuk melangkah lebih jauh.

Kode HTML

Kode HTML untuk halaman web dapat ditemukan di repositori Github ini.

Anda dapat menggunakan IDE atau editor teks apa pun seperti Sublime atau notepad++ untuk membuat halaman web HTML.

• Pertama Buat halaman web HTML yang berisi dua tombol radio untuk memilih antara DHCP dan Pengaturan IP Statis.
• Sekarang buat tombol untuk mengirimkan tanggapan Anda
• Beri nama pada tombol radio. Kelas server Web ESP akan menggunakan nama-nama ini sebagai argumen dan mendapatkan respons dari tombol radio menggunakan argumen ini
• Sekarang masukkan tombol ' KIRIM ' untuk mengirim respons ke perangkat.
• Di halaman web lain, kami memiliki kotak teks. Berikan nilai nama dan jenis Input ke kotak teks dan tambahkan tombol kirim ke ' KIRIM ' kirim respons.
• Buat tombol 'RESET' untuk mengatur ulang konten bidang teks.

//Pengaturan DHCP Tombol Radio

Pengaturan IP Statis

//Masukkan Kotak Teks

//Tombol Kirim

masukan[type="kirim"]{ background-color: #3498DB; /* Hijau */ batas: tidak ada; warna putih; bantalan:15px 48px; perataan teks: tengah; dekorasi teks: tidak ada; tampilan: blok sebaris; ukuran font: 16px; }

//Tombol Atur ulang

masukan[type="kirim"]{ background-color: #3498DB; /* Hijau */ batas: tidak ada; warna putih; bantalan:15px 48px; perataan teks: tengah; dekorasi teks: tidak ada; tampilan: blok sebaris; ukuran font: 16px; }

Langkah 3: Mendapatkan Respons Web Dari Halaman Web ke ESP32

Melayani halaman web dari perangkat ESP 32 sangat menyenangkan. Itu bisa apa saja mulai dari menampilkan data suhu di halaman web, memutar led dari halaman web khusus atau menyimpan kredensial WiFi Pengguna melalui halaman web. Untuk tujuan ini, ESP 32 menggunakan Kelas WebServer ke halaman web server.

• Pertama, Buat instance kelas WebServer di port 80 (port
• Sekarang atur perangkat ESP sebagai softAP. Berikan SSID dan kunci sandi dan tetapkan IP statis ke perangkat.
• Mulai servernya.

//*********SSID dan Pass untuk AP***************/

const char *ssidAP = "berikan SSID"; const char *passAP = "kunci sandi";

//*********Konfigurasi IP Statis***************/IPaddress ap_local_IP(192, 168, 1, 77); IPaddress ap_gateway(192, 168, 1, 254); IPaddress ap_subnet(255, 255, 255, 0);

//*********Konfigurasi SoftAP***************/

WiFi.mode(WIFI_AP);

Serial.println(WiFi.softAP(ssidAP, passAP) ? "soft-AP setup": "Gagal terhubung");

penundaan(100); Serial.println(WiFi.softAPConfig(ap_local_IP, ap_gateway, ap_subnet)? "Mengkonfigurasi Soft AP": "Kesalahan dalam Konfigurasi"); Serial.println(WiFi.softAPIP());

//mulai server

server.mulai();

• Buat dan sajikan URL menggunakan panggilan balik yang berbeda.
• dan menangani klien secara asinkron menggunakan handleClient.

server.on("/", handleRoot);

server.on("/dhcp", handleDHCP); server.on("/static", handleStatic); // menangani respons server.handleClient();

• Untuk mengakses halaman web. Hubungkan ke AP yang baru saja Anda buat, terdaftar dalam jaringan WiFi Anda. Sekarang, buka browser, Masukkan IP yang dikonfigurasi oleh Anda di langkah terakhir dan akses halaman web.
• Kelas server web mengambil nama yang diberikan ke input('text', 'button', 'radiobutton'etc.) sebagai argumen. Ini menyimpan tanggapan dari input ini sebagai argumen dan kita bisa mendapatkan nilai atau memeriksanya menggunakan metode args, arg, hasArg.

if(server.args()>0){ for(int i=0; i<=server.args();i++){

Serial.println(String(server.argName(i))+'\t' + String(server.arg(i)));

}

if(server.hasArg("ipv4static") && server.hasArg("gateway") && server.hasArg("subnet")){ staticSet(); }else if(server.arg("ipv4")!= ""){ dhcpSetManual(); }else{ dhcpSetDefault(); }

Langkah 4: Konfigurasi IP Statis

Sejauh ini kita telah memahami bagaimana menghubungkan ke AP dan bagaimana mendapatkan nilai dari kolom input halaman web

Pada langkah ini, kita akan mengkonfigurasi IP Statis

• Pilih Pengaturan IP Statis dan klik tombol Kirim. Anda akan diarahkan ke halaman berikutnya.
• Pada halaman berikutnya masukkan alamat IP statis, alamat gateway dan subnet Mask halaman ini akan disajikan di "/ static" yang ditangani dengan metode handle static callback.
• Dapatkan nilai bidang teks menggunakan metode server.arg().

String ipv4static = String(server.arg("ipv4static"));

String gerbang = String(server.arg("gerbang")); String subnet = String(server.arg("subnet"));

• Sekarang, nilai-nilai ini diserialkan ke dalam Format JSON.
• Kemudian kita akan menulis JSON ke SPIFFS.

root["statickey"]="staticSet";

root["staticIP"] = ipv4static;

root["gerbang"] = gerbang;

root["subnet"] = subnet;

File fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE);

if(root.printTo(fileToWrite)){

Serial.println("--File Tertulis"); }

• Konfigurasi ini disimpan di SPIFFS. Kemudian, nilai-nilai ini dibaca dari SPIFFS.
• Nilai IP statis kemudian diurai dari JSON.

File file = SPIFFS.open("/ip_set.txt", "r");

while(file.available()){

debugLogData += char(file.read()); }

if(debugLogData.length()>5){

JsonObject& readRoot =jsonBuffer.parseObject(debugLogData);

if(readRoot.containsKey("statickey")){

String ipStaticValue= readRoot["staticIP"];

String gatewayValue = readRoot["gateway"];

String subnetValue = readRoot["subnet"];

Langkah 5: Pengaturan DHCP

Pada langkah ini, kita akan mengkonfigurasi Pengaturan DHCP

Pilih Pengaturan DHCP dari halaman indeks dan klik "Kirim"

• Anda akan diarahkan ke halaman berikutnya. Di halaman berikutnya masukkan alamat IP atau pilih pilih default dan klik tombol "Kirim" untuk mengirimkan tanggapan. Halaman ini akan disajikan di "/dhcp" yang ditangani oleh metode callback handleDHCP. Dapatkan nilai bidang teks menggunakan metode server.arg(). Ketika diklik pilih kotak centang default. IP 192.168.4.1 akan diberikan ke perangkat.
• Sekarang, nilai-nilai ini diserialkan ke dalam Format JSON.
• Kemudian kita akan menulis JSON ke SPIFFS.

JsonObject& root =jsonBuffer.createObject();

root["dhcpManual"]="dhcpManual";

root["dhcpIP"] = "192.168.4.1";

File fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE);

if(root.printTo(fileToWrite)){

Serial.println("--File Tertulis"); }

• Konfigurasi ini disimpan di SPIFFS. Kemudian, nilai-nilai ini dibaca dari SPIFFS.
• Nilai IP dhcp kemudian diurai dari JSON.

File file = SPIFFS.open("/ip_set.txt", "r"); while(file.available()){ debugLogData += char(file.read()); } if(debugLogData.length()>5){ JsonObject& readRoot =jsonBuffer.parseObject(debugLogData);

if(readRoot.containsKey("dhcpDefault")){

String ipdhcpValue= readRoot["dhcpIP"];

Serial.println(ipdhcpValue);

dhcpAPConfig();}

Langkah 6: Menyimpan Kredensial WiFi

Untuk saat ini, kami telah memilih konfigurasi IP. Sekarang kita perlu menyimpan kredensial wifi Pengguna. Untuk mengatasi situasi ini. Kami telah mengikuti prosedur ini.

• Jadi sekarang kami memiliki pengaturan AP perangkat kami dalam konfigurasi DHCP atau IP Statis yang telah kami pilih dari portal captive yang disebutkan di langkah terakhir.
• Katakanlah kita telah memilih konfigurasi IP Statis.
• Kami akan mengkonfigurasi softAP di IP ini.
• Setelah membaca nilai dari SPIFFS dan menguraikan nilai-nilai ini dari JSON. Kami akan mengkonfigurasi softAP di IP ini.
• Ubah String IP menjadi Bytes.

byte ip[4];

parseBytes(ipv4Arr, '.', ip, 4, 10);

ip0 = (uint8_t)ip[0];

ip1 = (uint8_t)ip[1];

ip2 = (uint8_t)ip[2];

ip3 = (uint8_t)ip[3];

IPaddress ap_local(ip0, ip1, ip2, ip3);

//*************** Mengurai byte dari string******************//

void parseBytes(const char* str, char sep, byte* byte, int maxBytes, int base) {

for (int i = 0; i < maxBytes; i++) {

byte = strtoul(str, NULL, basis);

str = strchr(str, sep);

if (str == NULL || *str == '\0') {

merusak;

}

str++;

}}

Sekarang kita akan mengkonfigurasi softAP di IP ini

Serial.println(WiFi.softAPConfig(ap_localWeb_IP, ap_gate, ap_net) ? "Mengkonfigurasi softAP": "tidak terhubung"); Serial.println(WiFi.softAPIP());

• Sekarang mulai server web dan layani halaman web di IP ini. Untuk memasukkan Kredensial WiFi Pengguna.
• Halaman web terdiri dari dua bidang teks untuk memasukkan SSID dan Kata Sandi.
• handleStaticForm adalah metode panggilan balik yang melayani halaman web.
• server.handleClient() menangani permintaan dan tanggapan ke dan dari halaman web.

server.mulai();

server.on("/", handleStaticForm);

server.onNotFound(handleNotFound);

Stimer = milis();

while(milis()-STimer<= SInterval) {

server.handleClient(); }

Formulir HTML disimpan di SPIFFS. kami memeriksa argumen yang sesuai menggunakan server.arg(). untuk mendapatkan nilai SSID dan Password

File file = SPIFFS.open("/WiFi.html", "r");

server.streamFile(file, "teks/html");

file.tutup();

Langkah 7: Baca dan Tulis Dari SPIFFS

SPIFFS

Sistem File Flash Antarmuka Periferal Serial, atau disingkat SPIFFS. Ini adalah sistem file ringan untuk mikrokontroler dengan chip flash SPI. Chip flash onboard dari ESP32 memiliki banyak ruang untuk halaman web Anda. Kami juga telah menyimpan halaman web kami di Sistem Flash. Ada beberapa langkah yang perlu kita ikuti untuk mengunggah data ke spiffs

Unduh alat pengunggahan data ESP 32 SPIFFS:

• Di direktori sketchbook Arduino Anda, buat direktori tools jika belum ada
• Buka paket alat ke direktori alat (jalurnya akan terlihat seperti /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Mulai ulang Arduino IDE
• Buka sketsa (atau buat sketsa baru dan simpan)
• Masuk ke direktori sketch (pilih Sketch > Show Sketch Folder)
• Buat direktori bernama data dan file apa pun yang Anda inginkan di sistem file di sana. Kami telah mengunggah halaman HTML kami dengan nama webform.html
• Pastikan Anda telah memilih board, port, dan Serial Monitor yang tertutup
• Pilih Alat > Unggah Data Sketsa ESP8266. Ini harus mulai mengunggah file ke sistem file flash ESP8266. Setelah selesai, bilah status IDE akan menampilkan pesan SPIFFS Image Uploaded.

void handleDHCP(){ File file = SPIFFS.open("/page_dhcp.html", "r"); server.streamFile(file, "teks/html"); file.close();}

batal menanganiStatis(){

File file = SPIFFS.open("/page_static.html", "r"); server.streamFile(file, "teks/html"); file.close();}

Menulis ke SPIFFS

Di sini kami menulis pengaturan yang disimpan ke SPIFFS sehingga pengguna tidak harus melalui langkah-langkah ini setiap kali perangkat disetel ulang.

• Konversikan argumen yang diterima dari halaman web ke objek JSON
• Tulis JSON ini ke file.txt yang disimpan di SPIFFS.

String ipv4static = String(server.arg("ipv4static"));

String gerbang = String(server.arg("gerbang")); String subnet = String(server.arg("subnet")); root["statickey"]="staticSet"; root["staticIP"] = ipv4static; root["gerbang"] = gerbang; root["subnet"] = subnet; String JSONStatis; karakter JSON[120]; root.printTo(Serial); root.prettyPrintTo(JSONStatic); JSONStatic.toCharArray(JSON, sizeof(JSONStatic)+2); File fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE); if(!fileToWrite){ Serial.println("Error membuka SPIFFS"); } if(fileToWrite.print(JSON)){ Serial.println("--File Tertulis"); }else{ Serial.println("--Error Menulis File"); } fileToWrite.close();

Langkah 8: Kode Keseluruhan

Kode Over untuk HTML dan ESP32 dapat ditemukan di Repositori Github ini