Alvoria Neura


Cara Program Wifi Webserver Esp32 Devkit V1

Tutorial Lengkap: Program WiFi WebServer dalam Beberapa Mode pada ESP32 DevKit V1

ESP32 DevKit V1 adalah mikrokontroler yang memiliki fitur WiFi dan Bluetooth terintegrasi, menjadikannya pilihan ideal untuk berbagai proyek IoT. Salah satu fitur menarik dari ESP32 adalah kemampuannya untuk menjalankan server web melalui koneksi WiFi, yang memungkinkan pengguna mengontrol dan memonitor perangkat dari jarak jauh menggunakan browser.

Mode WiFi WebServer

Dalam tutorial ini, kita akan membahas bagaimana cara memprogram ESP32 sebagai WiFi WebServer dalam beberapa mode, yaitu:

  • Wifi Webserver Mode Access Point (AP) - ESP32 berfungsi sebagai hotspot.
  • Wifi Webserver Mode Station (STA) - ESP32 terhubung ke router WiFi.
  • Wifi Webserver Mode Dual (AP + STA) - ESP32 berfungsi sebagai hotspot sekaligus terhubung ke router WiFi.

Kami juga akan menyertakan kode sederhana dan penjelasan terkait cara menggunakannya.

Persiapan Alat dan Bahan

1. Peralatan yang Dibutuhkan

  • ESP32 DevKit V1
  • Kabel USB (Micro-USB atau USB-C sesuai model ESP32)
  • Software Arduino IDE
  • Library yang Dibutuhkan: WiFi.h

2. Instalasi ESP32 di Arduino IDE

Jika Anda belum memiliki Arduino IDE, unduh dan instal dari situs resmi Arduino (https://www.arduino.cc/en/software).

  1. Buka Arduino IDE
  2. Masuk ke File > Preferences
  3. Tambahkan URL berikut ke bagian Additional Board Manager URLs:
    4. https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

  4. Buka Tools > Board > Board Manager dan cari "ESP32" lalu instal.
  5. Pilih ESP32 Dev Module di Tools > Board
  6. Instal library WiFi.h jika belum tersedia.

3. Pilih Board ESP32

  1. Hubungkan ESP32 DevKit V1 ke komputer menggunakan kabel USB.
  2. Pada Arduino IDE, pilih Tools > Board > ESP32 Arduino > ESP32 Dev Module.
  3. Pilih port COM yang sesuai (Tools > Port).

Mode 1: Access Point (AP)

Dalam mode ini, ESP32 bertindak sebagai titik akses WiFi yang memungkinkan perangkat lain untuk terhubung.


#include <WiFi.h>

const char *ssid = "ESP32-AP";
const char *password = "12345678";

WiFiServer server(80);

void setup() {
Serial.begin(115200);
WiFi.softAP(ssid, password);
Serial.println("Access Point Started");
server.begin();
}

void loop() {
WiFiClient client = server.available();
if (client) {
Serial.println("Client Connected");
client.println("ESP32 Web Server in AP Mode");
client.stop();
}
}

Cara Penggunaan

Setelah menyalin atau menulis kode di atas ke ESP32, ikuti langkah-langkah berikut:

  1. klik Upload Untuk Mengunggah Program Pada Esp32.
  2. Hubungkan perangkat (misal HP/Laptop) ke WiFi Esp32.
  3. Masukan password wifi "ESP32-AP" dengan password "12345678".
  4. Jika perangkat anda sudah terhubung dengan Esp32 Selanjutnya buka browser anda, Lalu ketik di pencarian "192.168.4.1".

Penjelasan Program

Anda bisa mengganti SSID "ESP32-AP" Dan Password "12345678", Sesuai dengan yang anda inginkan.

Wifi Webserver dalam mode AP 'Access Point' ini, Esp32 bertindak sebagai hostpot, jadi tidak memerlukan data atau koneksi internet untuk mengaksesnya.

Mode 2: Station (STA)

Dalam mode ini, ESP32 terhubung ke router WiFi yang sudah ada dan mendapatkan alamat IP dari router.


#include <WiFi.h>

const char* ssid = "Your_WiFi_SSID";
const char* password = "Your_WiFi_Password";

WiFiServer server(80);

void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("Connected!");
Serial.println(WiFi.localIP());
server.begin();
}

void loop() {
WiFiClient client = server.available();
if (client) {
Serial.println("Client Connected");
client.println("ESP32 Web Server in STA Mode");
client.stop();
}
}

Cara Penggunaan

Setelah menyalin atau menulis kode di atas ke ESP32, ikuti langkah-langkah berikut:

  1. Konfigurasi SSID. Ganti "Your_WiFi_SSID" Dengan nama wifi, Sesuai dengan nama wifi route yang anda gunakan
  2. Konfigurasi Password. Ganti "Your_WiFi_Password" Dengan password wifi, Sesuai password wifi route yang anda gunakan
  3. klik Upload Untuk Mengunggah Program Pada Esp32.
  4. Pastikan ESP32 terhubung ke router WiFi yang telah dikonfigurasi.
  5. Setelah Esp32 sudah terhubung dengan route wifi yang anda gunakan, Buka serial monitor pada Arduino Ide, Lalu lihat alamat IP yang tercantum.
  6. Cara melihat alamat ip dari serial monitor, anda cukup perlu tekan tombol EN pada modul Esp32, Dan otomatis Esp32 akan terestart, Lalu menampilkan alamat IP pada serial monitor.
  7. Jika sudah mendapatkan alamat IP, Selanjutnya buka browser anda, Lalu ketik di pencarian, Misalnya "192.168.4.1".

Penjelasan Program

Wifi Webserver dalam mode STA 'Station' ini, Esp32 bertindak sebagai client, jadi Esp32 harus terhubung ke jaringan Wi-Fi yang sudah ada (misalnya, router atau hotspot), Jadi Hostpot atau Router anda harus memiliki koneksi internet, Supaya Webserver Esp32 bisa di akses.

Mode 3: Dual Mode (AP + STA)

Dalam mode ini, ESP32 bertindak sebagai AP sekaligus STA.


#include <WiFi.h>

const char *ap_ssid = "ESP32-AP";
const char *ap_password = "12345678";
const char *sta_ssid = "Your_WiFi_SSID";
const char *sta_password = "Your_WiFi_Password";

WiFiServer server(80);

void setup() {
Serial.begin(115200);
WiFi.mode(WIFI_AP_STA);
WiFi.softAP(ap_ssid, ap_password);
WiFi.begin(sta_ssid, sta_password);
Serial.print("Connecting to WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("Connected!");
Serial.println(WiFi.localIP());
server.begin();
}

void loop() {
WiFiClient client = server.available();
if (client) {
Serial.println("Client Connected");
client.println("ESP32 Web Server in Dual Mode");
client.stop();
}
}

Cara Penggunaan

Setelah menyalin atau menulis kode di atas ke ESP32, ikuti langkah-langkah berikut:

  1. Ganti *sta_ssid "Your_WiFi_SSID" Dengan nama wifi, Sesuai dengan nama wifi route yang anda gunakan.
  2. Ganti *sta_password "Your_WiFi_Password" Dengan password wifi, Sesuai password wifi route yang anda gunakan.
  3. Ganti *ap_ssid "ESP32-AP" Dengan nama wifi, Sesuai dengan yang anda inginkan.
  4. Ganti *ap_password "12345678" Dengan password wifi, Sesuai yang anda inginkan.
  5. klik Upload Untuk Mengunggah Program Pada Esp32.
  6. Untuk mengakses Wifi Webserver dalam Mode STA, Pastikan ESP32 terhubung ke router WiFi yang telah dikonfigurasi.
  7. Setelah Esp32 sudah terhubung dengan route wifi yang anda gunakan, Buka serial monitor pada Arduino Ide, Lalu lihat alamat IP yang tercantum.
  8. Cara melihat alamat ip dari serial monitor, anda cukup perlu tekan tombol EN pada modul Esp32, Dan otomatis Esp32 akan terestart, Lalu menampilkan alamat IP pada serial monitor.
  9. Jika sudah mendapatkan alamat IP, Selanjutnya buka browser anda, Lalu ketik di pencarian, Misalnya "192.168.4.1".
  10. Untuk mengakses Wifi Webserver dalam Mode AP, Sambungkan wifi dari perangkat anda (misal HP/Laptop) Ke wifi "ESP32-AP", Dan masukan password "12345678".
  11. Setelah itu buka browser anda dan ketik di pencarian "192.168.4.1".

Penjelasan Program

Wifi Webserver dalam mode AP 'Access Point' ini, Esp32 bertindak sebagai hostpot, jadi tidak memerlukan data atau koneksi internet untuk mengaksesnya.

Wifi Webserver dalam mode STA 'Station' ini, Esp32 bertindak sebagai client, jadi Esp32 harus terhubung ke jaringan Wi-Fi yang sudah ada (misalnya, router atau hotspot), Jadi Hostpot atau Router anda harus memiliki koneksi internet, Supaya Webserver Esp32 bisa di akses.

Jadi anda bisa mengakses Wifi Webserver Pada Esp32, Dengan 2 Mode sekaligus, Bisa dari mode AP dan juga mode STA.

Kesimpulan

Tutorial ini menunjukkan cara mengonfigurasi ESP32 sebagai WiFi WebServer dalam tiga mode: AP, STA, dan Dual mode AP + STA. Dengan memahami mode-mode ini, Anda dapat memilih konfigurasi yang paling sesuai untuk proyek IoT Anda. Mode AP cocok untuk jaringan lokal tanpa router dan koneksi internet, sementara Mode STA memungkinkan integrasi ke dalam jaringan WiFi yang sudah ada. Mode Dual memberikan fleksibilitas terbaik dengan memungkinkan kedua mode berfungsi secara bersamaan.

Setiap mode memiliki kegunaan masing-masing tergantung pada kebutuhan proyek Anda.

Semoga tutorial ini membantu Anda dalam memahami dan mengimplementasikan WiFi WebServer pada ESP32!