Proyek IoT: Relay Otomatis Menggunakan ESP8266

Halo teman-teman, ketemu lagi di artikel Duwi Arsana! Kali ini, kita akan membahas cara mengontrol relay secara otomatis menggunakan ESP8266 dan web interface yang keren dengan tampilan dark mode.

Kenapa Harus Menggunakan Relay IoT?

Bagi kamu yang ingin mengendalikan peralatan listrik secara otomatis berdasarkan jadwal tertentu, relay IoT adalah solusinya! Dengan relay IoT, kamu bisa:

• Menghidupkan dan mematikan perangkat listrik sesuai jadwal.
• Mengontrol relay dari mana saja melalui jaringan WiFi.
• Menggunakan tampilan web modern untuk mengatur waktu dengan mudah.
• Mendapatkan waktu yang akurat melalui NTP (Network Time Protocol).

Nah, dengan menggunakan modul relay IoT dari Duwi Arsana, kamu bisa langsung mencoba tanpa harus ribet menyusun rangkaian dari nol!

Peralatan yang Dibutuhkan

Untuk menjalankan proyek ini, kamu memerlukan:

• Modul Relay IoT dari Duwi Arsana
• Power supply 5V
• Kabel jumper
• WiFi untuk koneksi Internet

Cara Kerja

Sistem ini bekerja dengan cara:

1. ESP8266 mendapatkan waktu real-time dari internet menggunakan NTP.
2. User mengatur waktu ON/OFF relay melalui web interface yang bisa diakses lewat browser.
3. ESP8266 menyimpan pengaturan waktu dan menjalankan relay sesuai jadwal yang telah diset.
4. Web interface menampilkan jam real-time yang terus diperbarui tanpa perlu refresh.

Kode Program ESP8266

Berikut adalah kode yang digunakan untuk proyek ini:

#include <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
#include <NTPClient.h>
#include <WiFiUdp.h>
#include <EEPROM.h>

const char* ssid = "your-SSID";
const char* password = "your-PASSWORD";

#define RELAY1 4
#define RELAY2 5

WiFiUDP ntpUDP;
NTPClient timeClient(ntpUDP, "pool.ntp.org", 28800, 60000); // GMT+7
AsyncWebServer server(80);

// Struktur data untuk menyimpan pengaturan
struct TimerSetting {
  int hourOn;
  int minuteOn;
  int hourOff;
  int minuteOff;
};

TimerSetting relay1Setting;
TimerSetting relay2Setting;

void saveSettings() {
  Serial.println("Saving settings...");
  EEPROM.put(0, relay1Setting);
  EEPROM.put(sizeof(TimerSetting), relay2Setting);
  EEPROM.commit();
  Serial.println("Settings saved:");
  Serial.print("Relay1 ON: "); Serial.print(relay1Setting.hourOn); Serial.print(":"); Serial.println(relay1Setting.minuteOn);
  Serial.print("Relay1 OFF: "); Serial.print(relay1Setting.hourOff); Serial.print(":"); Serial.println(relay1Setting.minuteOff);
  Serial.print("Relay2 ON: "); Serial.print(relay2Setting.hourOn); Serial.print(":"); Serial.println(relay2Setting.minuteOn);
  Serial.print("Relay2 OFF: "); Serial.print(relay2Setting.hourOff); Serial.print(":"); Serial.println(relay2Setting.minuteOff);
}

void loadSettings() {
  Serial.println("Loading settings...");
  EEPROM.get(0, relay1Setting);
  
  Serial.println("Settings loaded:");
  Serial.print("Relay1 ON: "); Serial.print(relay1Setting.hourOn); Serial.print(":"); Serial.println(relay1Setting.minuteOn);
  Serial.print("Relay1 OFF: "); Serial.print(relay1Setting.hourOff); Serial.print(":"); Serial.println(relay1Setting.minuteOff);
  Serial.print("Relay2 ON: "); Serial.print(relay2Setting.hourOn); Serial.print(":"); Serial.println(relay2Setting.minuteOn);
  Serial.print("Relay2 OFF: "); Serial.print(relay2Setting.hourOff); Serial.print(":"); Serial.println(relay2Setting.minuteOff);
  EEPROM.get(sizeof(TimerSetting), relay2Setting);
}

void setup() {
  Serial.begin(115200);
  EEPROM.begin(512);
  pinMode(RELAY1, OUTPUT);
  pinMode(RELAY2, OUTPUT);
  digitalWrite(RELAY1, LOW);
  digitalWrite(RELAY2, LOW);
  
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi connected!");
  timeClient.begin();
timeClient.update();
  Serial.print("Current Time: ");
  timeClient.update();
  int currentHour = timeClient.getHours();
  int currentMinute = timeClient.getMinutes();
  Serial.print(currentHour);
  Serial.print(":");
  Serial.println(currentMinute);
  Serial.print(":");
  Serial.println(currentMinute);
  Serial.print(timeClient.getHours());
  Serial.print(":");
  Serial.println(timeClient.getMinutes());

  loadSettings();

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    String html = "<html><head><meta name='viewport' content='width=device-width, initial-scale=1'>";
    html += "<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css'>";
    html += "<style>body{background-color:#121212; color:white; text-align:center; font-family:sans-serif;}";
    html += "h2{color: #fff;} button{background-color:#333; color:white; border:none; padding:10px; border-radius:5px;}";
    html += "input{background-color:#222; color:white; border:1px solid #555; padding:5px; margin:5px; border-radius:5px;}";
    html += "#timeDisplay{font-size:48px; font-weight:bold; margin:10px;}</style></head><body>";
    html += "<h2>Relay Timer Settings</h2>";
    html += "<p><span id='timeDisplay'></span></p>";
    html += "<script>function updateTime() { fetch('/time').then(response => response.text()).then(data => document.getElementById('timeDisplay').innerText = data); } setInterval(updateTime, 1000); updateTime();</script>";
    html += "<form action='/set' method='GET' style='display: flex; flex-direction: column; align-items: center; max-width: 300px; margin: auto;'>";
    html += "<div style='display: flex; justify-content: space-between; width: 100%;'><label>Relay 1 ON:</label> <input type='time' name='ron1' value='" + String(relay1Setting.hourOn) + ":" + String(relay1Setting.minuteOn) + "'></div>";
    html += "<div style='display: flex; justify-content: space-between; width: 100%;'><label>Relay 1 OFF:</label> <input type='time' name='roff1' value='" + String(relay1Setting.hourOff) + ":" + String(relay1Setting.minuteOff) + "'></div>";
    html += "<div style='display: flex; justify-content: space-between; width: 100%;'><label>Relay 2 ON:</label> <input type='time' name='ron2' value='" + String(relay2Setting.hourOn) + ":" + String(relay2Setting.minuteOn) + "'></div>";
    html += "<div style='display: flex; justify-content: space-between; width: 100%;'><label>Relay 2 OFF:</label> <input type='time' name='roff2' value='" + String(relay2Setting.hourOff) + ":" + String(relay2Setting.minuteOff) + "'></div>";
    html += "<div style='width: 100%; display: flex; justify-content: center; margin-top: 10px;'><button class='button-primary' type='submit' style='width: 220px; height: 50px; padding: 0; font-size: 18px; background-color: #4CAF50; color: white; border: none; border-radius: 8px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; font-weight: bold;'>Simpan</button></div></form></body></html>";
    request->send(200, "text/html", html);
  });
  
  server.on("/set", HTTP_GET, [](AsyncWebServerRequest *request){
    if(request->hasParam("ron1")) {
    String timeStr = request->getParam("ron1")->value();
    relay1Setting.hourOn = timeStr.substring(0, 2).toInt();
    relay1Setting.minuteOn = timeStr.substring(3, 5).toInt();
}
    if(request->hasParam("roff1")) {
    String timeStr = request->getParam("roff1")->value();
    relay1Setting.hourOff = timeStr.substring(0, 2).toInt();
    relay1Setting.minuteOff = timeStr.substring(3, 5).toInt();
}
    if(request->hasParam("ron2")) {
    String timeStr = request->getParam("ron2")->value();
    relay2Setting.hourOn = timeStr.substring(0, 2).toInt();
    relay2Setting.minuteOn = timeStr.substring(3, 5).toInt();
}
    if(request->hasParam("roff2")) {
    String timeStr = request->getParam("roff2")->value();
    relay2Setting.hourOff = timeStr.substring(0, 2).toInt();
    relay2Setting.minuteOff = timeStr.substring(3, 5).toInt();
}
    saveSettings();
    request->redirect("/");
  });

  server.on("/time", HTTP_GET, [](AsyncWebServerRequest *request){
    String currentTime = String(timeClient.getHours()) + ":" + String(timeClient.getMinutes()) + ":" + String(timeClient.getSeconds());
    request->send(200, "text/plain", currentTime);
  });
  server.begin();
}

void loop() {
  timeClient.update();
  Serial.print("Current Time: ");
  timeClient.update();
  Serial.print(timeClient.getHours());
  Serial.print(":");
  Serial.println(timeClient.getMinutes());
  int currentHour = timeClient.getHours();
  int currentMinute = timeClient.getMinutes();
  
  if (currentHour == relay1Setting.hourOn && currentMinute == relay1Setting.minuteOn) {
    digitalWrite(RELAY1, HIGH);
} else if (currentHour == relay1Setting.hourOff && currentMinute == relay1Setting.minuteOff) {
    digitalWrite(RELAY1, LOW);
}
  
  
  if (currentHour == relay2Setting.hourOn && currentMinute == relay2Setting.minuteOn) {
    digitalWrite(RELAY2, HIGH);
} else if (currentHour == relay2Setting.hourOff && currentMinute == relay2Setting.minuteOff) {
    digitalWrite(RELAY2, LOW);
}
  
  delay(1000);
}

Kamu bisa menemukan kode lengkapnya di artikel ini atau langsung mengunduh dari repository yang telah disediakan.

Fitur Web Interface

Web interface yang digunakan memiliki beberapa keunggulan: ✅ Dark mode modern dengan desain yang enak dipandang. ✅ Form pengaturan relay yang rapi dan sejajar. ✅ Tombol “Simpan” dengan tampilan yang menarik dan proporsional. ✅ Update jam real-time tanpa perlu refresh manual.

Dengan tampilan ini, kamu bisa dengan mudah mengatur jam ON/OFF relay langsung dari browser di PC atau smartphone!

Kenapa Harus Pakai Modul Relay IoT dari Duwi Arsana?

Produk Modul Relay IoT dari Duwi Arsana memiliki keunggulan:

• Dilengkapi dengan ESP8266 bawaan, jadi tidak perlu modul tambahan.
• Desain compact dan rapi, cocok untuk berbagai proyek otomatisasi.
• Dapat digunakan dengan aplikasi IoT lainnya, seperti Home Assistant atau Blynk.

Jika kamu ingin mencoba proyek ini dengan lebih mudah, kamu bisa mendapatkan Modul Relay IoT Duwi Arsana sekarang juga!

Kesimpulan

Dengan menggunakan ESP8266 dan modul relay IoT dari Duwi Arsana, kamu bisa mengontrol perangkat listrik secara otomatis dengan jadwal yang fleksibel. Proyek ini sangat cocok untuk otomatisasi rumah, kantor, atau proyek IoT lainnya.

Kalau kamu tertarik, jangan lupa cek produk relay IoT dari Duwi Arsana dan mulai proyekmu sekarang! 🚀

Semoga artikel ini bermanfaat! Kalau ada pertanyaan atau kendala, jangan ragu untuk bertanya di kolom komentar. Sampai jumpa di artikel berikutnya! 😊