Tutorial NodeMCU ESP32: Membuat Web Server Untuk Mengontrol Relay/ Lampu

Pada tulisan sebelumnya tentang Proyek IoT (Internet of Thing) dengan judul Tutorial ESP-01: Membuat Web Server Untuk Mengontrol Relay/ Lampu maka konsep yang sama akan diterapkan pada modul NodeMCU ESP32 pada proyek kali ini. Perbedaan hanya terletak pada penggunaan Library saja dan sisanya hampir sama. Proyek kali ini juga akan mengontrol lampu atau relay karena ini merupakan proyek dasar dalam pengenalan konsep IoT yang bisa diaplikasikan untuk keperluan kehidupan sehari-hari di rumah seperti halnya mengontrol lampu taman atau saklar lampu atau salah satu proyek home automation. Pengguna dapat mengontrol perangkat dengan koneksi internet yang tersambung ke perangkat IoT.

Pada tulisan ini akan dibahas tentang proyek IoT untuk mengontrol lampu menggunakan modul NodeMCU ESP32. Modul ini merupakan penerus dari NodeMCU ESP8266. Pada mikrokontroler ini sudah tersedia modul WiFi dalam chip sehingga sangat mendukung untuk membuat sistem aplikasi Internet of Things.

Persiapan Komponen

Modul NodeMCU32
LED
Kapasitor 220 ohm

Keterangan Komponen

Terdapat fitur dasar pada NodeMCU ESP32

Jumlah pin : 30 meliputi pin tegangan dan GPIO.
15 pin ADC (Analog to Digital Converter)
3 UART Interface
3 SPI Interface
2 I2C Interface
16 pin PWM (Pulse Width Modulation)
2 pin DAC (Digital to Analog Converter)

Wiring Diagram

Perlu diperhatikan saat wiring:

GPIO13 (pin 13) menjadi OUTPUT jadi koneksikan ke LED (melalui resistor 220 ohm)

Program

Sebelum memulai menuliskan kode program pastikan beberapa pengaturan berikut lebih awal.

Pastikan sudah meng-Install Board ESP32 ke IDE Arduino
Board yang digunakan: ESP32 Dev Module
Baudrate: 115200

Program ini dibuat dengan menambahkan Tab Baru untuk menampung Kode Tampilan Web. Pada Halaman Utama dituliskan Kode Program Arduino. Dibutuhkan library WebServer.h untuk memprogram sistem ini.


#include 
#include "index.h"
 
const char *ssid = "Masukkan Nama Wi-Fi";
const char *password = "Masukkan Password Wi-Fi";
 
WebServer server(80);
 
const int led = 13;
 
void handleRoot() {
  String page = FPSTR (Main_Page);
  digitalWrite(led, 1);
  server.send(200, "text/html", page);
  digitalWrite(led, 0);
}
 
void handleOn() {
  String page = FPSTR (Main_Page);
  digitalWrite(led, 1);
  server.send(200, "text/html", "ON");
  digitalWrite(led, 1);
}
 
void handleOff() {
  String page = FPSTR (Main_Page);
  digitalWrite(led, 1);
  server.send(200, "text/html", "OFF");
  digitalWrite(led, 0);
}
 
void setup(void) {
  pinMode(led, OUTPUT);
  digitalWrite(led, 0);
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");
 
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
 
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
 
  server.on("/", handleRoot);
  server.on("/H", handleOn);
  server.on("/L", handleOff);
 
  server.begin();
  Serial.println("HTTP server started");
}
 
void loop(void) {
  server.handleClient();
  delay(2);//allow the cpu to switch to other tasks
}

Tampilan Web dibuat di Tab Baru dengan Nama: index.h (boleh apa saja) namun ekstensinya harus ".h" yang merupakan ekstensi file header atau library. Selanjutnya file header ini dipanggil ke dalam program utama dengan menuliskan #include "index.h"

Kenapa dipisah ke dalam Tab Baru adalah membuat tampilan kode program lebih rapih dan mudah di pahami, ketimbang menulisnya di dalam satu halaman.

Upload

Setelah upload selesai, buka Serial Monitor dengan Baudrate:15200 setelah itu Reset Modul dengan menekan Tombol Reset pada USB Program. Tunggu beberapa saat ESP32 koneksi ke jaringan Wi-Fi. Jika terkoneksi maka seperti Gambar di bawah, terdapat nama Wi-Fi dan Esp32 mendapatkan IP Address dan tertulis "HTTP Server Started" yang artinya server sudah terkoneksi dengan jaringan internet. Selanjutnya Copy dan Paste IP Address ke Web Browser.

Maka tampilan Web akan muncul. Sekarang Lampu sudah bisa dikontrol dengan menekan Push-Button yang ada di Web dan indikator STATUS akan berubah sesuai dengan kondisi lampu.

madewhidi.com