pada tulisan ini, kita akan mencoba untuk membuat sebuah web server pada NodeMCU ESP 8266 untuk mengontrol output berupa lampu LED. Dengan menggunakan cara ini, kita dapat mengontrol berbagai macam peralatan yang terhubung dengan NodeMCU ESP8266 dengan menggunakan browser yang terhubung dengan jaringan lokal yang ada dirumah kita.
Langsung saja, kita persiapkan alat dan bahan yang dibutuhkan.
Alat dan Bahan
Alat:
- Laptop / komputer yang sudah terinstal Arduino IDE
- Kabel data microUSB untuk mengupload sketch/program ke nodeMCU
Bahan:
- NodeMCU ESP8266
- LED
- Kabel Jumper
- Breadboard
Skema Rangkaian
langkah berikutnya, kita rangkai NodeMCU ESP8266 dan LED sesuai rangkaian yang ada dibawah ini:
| NodeMCU ESP8266 | LED |
|---|---|
| D0 | Anode (+) |
| GND | Cathode (-) |
Menginstal Board ESP8266 ke Arduino IDE
Supaya NodeMCU ESP8266 dapat di program dengan menggunakan Arduino IDE, kita perlu menginstal additional board ESP8266 ke dalam aplikasi Arduino IDE dengan cara:
Buka aplikasi Arduino IDE lalu klik File — Preferences…
Pada Tab settings — Additional boards manager URL, copy dan pastekan URL berikut kedalam kotak:
http://arduino.esp8266.com/stable/package_esp8266com_index.json
Lalu Klik OK.
Seteleh itu kita ke menu boards manager dan ketikkan ESP8266 pada kotak pencarian. Setelah board ditemukan, instal board esp8266 dengan cara mengklik tombol install.
Tunggu instalasi sampai selesai lalu tutup dan buka kembali aplikasi Arduino IDE untuk memastikan board terinstal dengan baik.
Program / Sketch
Buka kembali Arduino IDE lalu klik File — New Sketch
Ketikkan sketch dibawah ini:
#include <ESP8266WiFi.h>
const char* ssid = "Wifi_saya";
const char* password = "1234567890";
WiFiServer server(80);
String header;
String outputState = "off";
const int ledPin = 5;
unsigned long currentTime = millis();
unsigned long previousTime = 0;
const long timeoutTime = 2000;
void setup() {
Serial.begin(115200);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, LOW);
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop(){
WiFiClient client = server.available();
if (client) {
Serial.println("New Client.");
String currentLine = "";
currentTime = millis();
previousTime = currentTime;
while (client.connected() && currentTime - previousTime <= timeoutTime) {
currentTime = millis();
if (client.available()) {
char c = client.read();
Serial.write(c);
header += c;
if (c == '\n') {
if (currentLine.length() == 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
if (header.indexOf("GET /5/on") >= 0) {
Serial.println("GPIO 5 on");
outputState = "on";
digitalWrite(ledPin, HIGH);
} else if (header.indexOf("GET /5/off") >= 0) {
Serial.println("GPIO 5 off");
outputState = "off";
digitalWrite(ledPin, LOW);
}
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #B0DAFF; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #FEFF86;}</style></head>");
client.println("<body><h1>NodeMCU Webserver</h1>");
client.println("<p>GPIO 5 - State " + outputState + "</p>");
if (outputState=="off") {
client.println("<p><a href=\"/5/on\"><button class=\"button\">Hidupkan</button></a></p>");
} else {
client.println("<p><a href=\"/5/off\"><button class=\"button button2\">Matikan</button></a></p>");
}
client.println("</body></html>");
client.println();
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
}
}
header = "";
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
Meng-upload Sketch / program ke NodeMCU
Jika sketch telah selesai di ketikkan, maka langkah berikutnya adalah mengupload sketch yang telah selesai tadi ke mikrokontroler NodeMCU ESP 8266. Untuk itu, langkah-langkah yang harus dilakukan adalah:
Pertama, hubungkan kabel USB dari laptop ke NodeMCU ESP8266.
Setelah itu, di kotak pemilihan board dan port, kita pilih board NodeMCU 1.0 (ESP-12E Module) dan port nya sesuai dengan port yang sedang aktif. Tekan OK lalu klik tombol UPLOAD lalu tunggu sampai selesai
Upload bisa dikatakan berhasil jika tampilan output nya seperti gambar dibawah ini
Langkah berikutnya, kita buka serial monitor untuk mengetahui apakah modul NodeMCU ESP8266 telah terhubung ke wifi dan melihat alamat IP.
Setelah IP address sudah didapatkan, kita buka browser pada HP atau laptop kita, lalu pada address bar kita ketikkan IP address sesuai yang terlihat di serial monitor.
Jika ketika tombol “hidupkan” ditekan atau di klik, maka LED yang terhubung ke NodeMCU ESP8266 akan hidup dan tombol akan berubah menjadi “matikan”
Demikianlah tulisan hari ini, semoga tulisannya gampang dimengerti dan semoga tulisannya juga bermanfaat.
