Tugas: Menggunakan Fitur Wi-Fi dalam ESP32 untuk Web Server
--
Halo! Dalam artikel kali ini, saya akan mencoba membuat sebuah Web Server yang dapat digunakan untuk menyalakan dan mematikan lampu LED. Web Server ini dibuat dengan bantuan fitur Wi-Fi yang dimiliki oleh ESP32.
Alat dan Bahan
Berikut merupakan alat-alat yang dibutuhkan dalam projek ini.
- 1 buah ESP32 Development Board
- 1 buah Breadboard
- 2 buah lampu LED
- 3 buah kabel male to male
- 2 buah hambatan (330 ohm)
Diagram Rangkaian
Berikut merupakan diagram rangkaian yang digunakan untuk projek ini.
Diagram rangkaian yang digunakan dalam projek ini sederhana. Hubungkan lampu LED ke sebuah hambatan, kemudian hubungkan ke sebuah pin GPIO yang ada di ESP32. Dalam projek ini, digunakan GPIO26 dan GPIO27, namun banyak pin lain yang dapat digunakan. Anda dapat mereferensikan website ini (lihat tabel besar di website tersebut) dan cari nomor-nomor pin yang bertulisan OK untuk output. Sebagai contoh, Anda dapat menghubungkan lampu ke GPIO4 dan GPIO5. Jangan lupa untuk menghubungkan pin GND dari ESP32 ke Breadboard. Perhatikan juga kaki lampu LED yang terhubung ke masing-masing komponen dan bedakan kaki yang satu dengan kaki yang lebih panjang.
Kode Program
Berikut merupakan kode program yang digunakan untuk menjalankan Web Server dan mengendalikan lampu dalam projek ini. Kode program diambil dari sumber ini.
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
// Load Wi-Fi library
#include <WiFi.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Auxiliar variables to store the current output state
String output26State = "off";
String output27State = "off";
// Assign output variables to GPIO pins
const int output26 = 26;
const int output27 = 27;
// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;
void setup() {
Serial.begin(115200);
// Initialize the output variables as outputs
pinMode(output26, OUTPUT);
pinMode(output27, OUTPUT);
// Set outputs to LOW
digitalWrite(output26, LOW);
digitalWrite(output27, LOW);
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
currentTime = millis();
previousTime = currentTime;
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
currentTime = millis();
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// turns the GPIOs on and off
if (header.indexOf("GET /26/on") >= 0) {
Serial.println("GPIO 26 on");
output26State = "on";
digitalWrite(output26, HIGH);
} else if (header.indexOf("GET /26/off") >= 0) {
Serial.println("GPIO 26 off");
output26State = "off";
digitalWrite(output26, LOW);
} else if (header.indexOf("GET /27/on") >= 0) {
Serial.println("GPIO 27 on");
output27State = "on";
digitalWrite(output27, HIGH);
} else if (header.indexOf("GET /27/off") >= 0) {
Serial.println("GPIO 27 off");
output27State = "off";
digitalWrite(output27, LOW);
}
// Display the HTML web page
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:,\">");
// CSS to style the on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preferences
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #555555;}</style></head>");
// Web Page Heading
client.println("<body><h1>ESP32 Web Server</h1>");
// Display current state, and ON/OFF buttons for GPIO 26
client.println("<p>GPIO 26 - State " + output26State + "</p>");
// If the output26State is off, it displays the ON button
if (output26State=="off") {
client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
}
// Display current state, and ON/OFF buttons for GPIO 27
client.println("<p>GPIO 27 - State " + output27State + "</p>");
// If the output27State is off, it displays the ON button
if (output27State=="off") {
client.println("<p><a href=\"/27/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/27/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("</body></html>");
// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}Program dimulai dengan memasukkan Library Wi-Fi terlebih dahulu. Kemudian, masukkan informasi dari koneksi Wi-Fi yang anda miliki. Informasi yang dibutuhkan adalah nama dari Wi-Fi anda (SSID) dan kata sandi dari Wi-Fi anda. Setelah itu beberapa variabel diinisialisasi, beberapa untuk kebutuhan koneksi dan beberapa yang lainnya untuk menyimpan informasi output yang kita gunakan, yaitu lampu LED. Program juga menetapkan waktu maksimal untuk mendapat respon, dalam program ini 2 detik (2000 milisekon).
Selanjutnya dilakukan inisialisasi untuk menetapkan GPIO lampu sebagai output dari projek ini. Sesuaikan dengan pin GPIO yang anda gunakan. Dalam gambar yang disertakan di bagian paling atas, saya menggunakan GPIO4 dan GPIO5. Seperti yang telah dijelaskan sebelumnya, Anda bisa menggunakan pin lain atau mengikuti diagram (GPIO26 dan GPIO27). Selain itu, dilakukan juga inisialisasi untuk fungsionalitas Wi-Fi di ESP32. Jika Wi-Fi terhubung, maka pada Serial Monitor akan dapat dilihat alamat IP milik Wi-Fi yang menjadi Web Server dari projek ini.
Seluruh bagian kode berikutnya dijalankan secara terus menurus. Inti dari bagian program ini adalah memeriksa apakah ada perangkat yang terhubung ke alamat IP yang telah disebutkan sebelumnya. Jika ada, maka program akan terus memeriksa jika perangkat tersebut mengirimkan perintah apapun. Jika tombol ON ditekan pada Web Server, maka lampu akan menyala. Begitupun sebaliknya untuk tombol OFF. Hal yang sama terjadi untuk lampu satunya. Bagian kode program ini juga membuat elemen-elemen website yang bisa dilihat di Web Server, seperti tombol On/Off dan teks penanda tombol mana yang digunakan untuk lampu mana.
Hasil
Berikut merupakan beberapa tangkapan layar hasil projek ini.
Analisis dan Kesimpulan
Banyak kemungkinan yang bisa dibuat dari fitur Wi-Fi yang dimiliki oleh ESP32. Karena dapat digunakan sebagai Web Server, maka ESP32 mungkin saja digunakan menjadi sarana untuk home automation, yaitu membuat rumah memiliki fungsionalitas otomatis seperti menyalakan lampu atau membuka jendela melalui perangkat seperti telepon genggam maupun laptop. Dalam kasus ini, Web Server baru digunakan untuk menyalakan lampu LED.
Saya juga melihat bahwa jika seseorang memiliki pengetahuan lebih lanjut mengenai cara pembuatan website, atau mengerti tentang HTML, maka projek serupa yang membuat Web Server akan terasa lebih mudah dan website bisa dibuat dengan lebih menarik.
Secara rangkaian, tidak ada yang unik dari projek ini. Namun, saya sempat mencoba bentuk rangkaian yang berbeda. Entah mengapa, namun lampu dan kabel yang terhubung ke pin GND tidak dapat diletakkan berjauhan. Dalam diagram yang diberikan, kabel GND terletak dekat dengan kedua lampu. Ketika saya mencoba untuk memindahkan lampu agar lebih jauh, lampu tidak mau menyala. Hal ini masih menjadi pertanyaan untuk saya, namun mungkin terjadi karena arus tidak sampai ke ujung.
Sebagai kesimpulan, kita telah mencoba membuat Web Server yang dapat menyalakan dua buah lampu LED secara terpisah. Konsep Web Server ini memanfaatkan fungsi Wi-Fi yang ada di dalam ESP32, dan kemungkinan implementasi dari fitur ini sangatlah luas. Terima kasih telah membaca, selamat bereksplorasi!
