Pada tutorial ini, akan dibahas langkah-langkah pembuatan sistem kendali LED berbasis WiFi menggunakan ESP8266. ESP8266 akan kita konfigurasikan sebagai Access Point (AP) sehingga kita dapat terhubung langsung tanpa menggunakan router tambahan. Selain itu, sistem web server yang digunakan bersifat asynchronous, sehingga respon kontrol menjadi lebih cepat dan halaman web tidak perlu dimuat ulang setiap kali status LED berubah.
1. Alat & Komponen
a. Perangkat Keras (Hardware)
| Nama Komponen | Gambar Komponen |
|---|---|
| NodeMcu esp8266 |  |
| LED |  |
| Resistor 220Ω |  |
| Kabel jumper |  |
| Breadboard |  |
b. Perangkat Lunak (Software)
- Arduino IDE
- Board ESP8266 (https://arduino.esp8266.com/stable/package_esp8266com_index.json)
- Library Wajib:
- ESPAsyncWebServer (lewat Library Manager)
- ESPAsyncTCP (lewat Library Manager)
Gambar Rangkaian
| LED | ESP8266 |
|---|---|
| Anoda (Kaki Panjang +) | pin D5 |
| Katoda (kaki pendek -) dan Resistor | GND |
Code
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
/* ================== AP CONFIG ================== */
const char* ap_ssid = "ESP8266_LED";
const char* ap_pass = "12345678";
/* ================== LED ================== */
#define LED_PIN D5
AsyncWebServer server(80);
bool ledState = false;
/* ================== HTML ================== */
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP8266 LED Control</title>
</head>
<body style="text-align:center; font-family:Arial; margin-top:40px;">
<h2>ESP8266 LED Control</h2>
<p>Status LED: <b id="status">OFF</b></p>
<button onclick="toggle()">TOGGLE</button>
<script>
function toggle() {
fetch('/toggle')
.then(res => res.text())
.then(data => {
document.getElementById("status").innerHTML = data;
});
}
setInterval(() => {
fetch('/status')
.then(res => res.text())
.then(data => {
document.getElementById("status").innerHTML = data;
});
}, 1000);
</script>
</body>
</html>
)rawliteral";
void setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LOW);
WiFi.softAP(ap_ssid, ap_pass);
Serial.print("AP IP: ");
Serial.println(WiFi.softAPIP());
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html);
});
server.on("/toggle", HTTP_GET, [](AsyncWebServerRequest *request){
ledState = !ledState;
if (ledState) {
digitalWrite(LED_PIN, HIGH);
request->send(200, "text/plain", "ON");
} else {
digitalWrite(LED_PIN, LOW);
request->send(200, "text/plain", "OFF");
}
});
server.on("/status", HTTP_GET, [](AsyncWebServerRequest *request){
if (ledState) {
request->send(200, "text/plain", "ON");
} else {
request->send(200, "text/plain", "OFF");
}
});
server.begin();
}
void loop() {
// Async WebServer tidak membutuhkan loop
}
Cara Menggunakan Sistem (Langkah Pengoperasian)
Setelah rangkaian dan program selesai dibuat, unggah kode ke papan ESP8266 menggunakan Arduino IDE. Saat ESP8266 sudah berhasil menyala, modul akan otomatis membuat jaringan WiFi sesuai dengan nama dan kata sandi yang telah ditentukan di dalam program (pastikan sudah dicatat). Selanjutnya, hubungkan laptop atau smartphone kamu ke jaringan WiFi tersebut.
Setelah terhubung, buka aplikasi browser dan masukkan alamat IP 192.168.4.1 pada bilah alamat. Halaman kontrol LED akan tampil dan menunjukkan status LED saat ini. Tekan tombol Toggle untuk mengubah kondisi LED dari mati menjadi menyala atau sebaliknya.
