Modul Tutorial IoT: ESP8266 & GAS

Tujuan Pembelajaran

Setelah menyelesaikan modul ini secara berurutan, Anda diharapkan mampu:

Merangkai komponen IoT dasar (ESP8266, DHT11, dan Relay) dengan aman.
Memahami konsep pengiriman data (HTTP POST) dari mikrokontroler ke Cloud server.
Membuat database pencatatan sensor sederhana menggunakan Google Sheets.
Membuat Dashboard Web Interaktif (HTML/JS) di atas Google Apps Script.
Mengendalikan perangkat keras (Relay) dari jarak jauh melalui antarmuka web.

Persiapan Hardware

Pastikan semua komponen berikut tersedia di meja kerja Anda sebelum memulai merangkai:

NodeMCU ESP8266 (atau Wemos D1 Mini) x 1
Sensor Suhu & Kelembaban DHT11 x 1
Modul Relay 1 Channel (5V) x 1
Kabel Jumper (Female-to-Female & Male-to-Female) secukupnya
Kabel Micro USB (Pastikan kabel transfer data, bukan hanya charge).

Skema Rangkaian (Wiring)

Hubungkan komponen dengan presisi mengikuti tabel konfigurasi pin berikut:

Komponen	Pin Modul	Pin NodeMCU
Sensor DHT11	VCC / +	`3V3`
	GND / -	`GND`
	DATA / OUT	`D2` (GPIO 4)
Modul Relay 5V	VCC / DC+	`VIN` (atau 5V)
	GND / DC-	`GND`
	IN / Signal	`D1` (GPIO 5)

Tips Kelistrikan: Sebagian besar relay 5V bisa aktif dengan sinyal 3.3V dari ESP8266 (pada pin IN), namun power VCC relay sangat disarankan mengambil dari pin VIN/VU yang merupakan jalur langsung 5V dari USB agar relay bekerja stabil.

Persiapan Software

1 Instalasi Board ESP8266

Buka Arduino IDE. Pergi ke menu File > Preferences.
Pada kolom Additional Boards Manager URLs, masukkan link berikut:
http://arduino.esp8266.com/stable/package_esp8266com_index.json
Klik OK.
Pergi ke Tools > Board > Boards Manager...
Ketik esp8266 di kotak pencarian dan klik Install.

2 Instalasi Library Sensor

Pergi ke menu Sketch > Include Library > Manage Libraries...
Cari DHT sensor library (yang dibuat oleh Adafruit), klik Install.
Cari Adafruit Unified Sensor (diperlukan sebagai dependensi), klik Install.

Google Apps Script

Kita akan menyulap infrastruktur Google menjadi server backend (API) dan halaman Dashboard Web secara gratis.

A. Siapkan Database (Spreadsheet)

Buka Google Sheets → dan buat Spreadsheet baru bernama "Database IoT".
Pada baris pertama, ketik header berurutan: Timestamp (A1), Suhu (B1), dan Kelembaban (C1).
Klik menu Ekstensi > Apps Script.

B. Kode Backend (Code.gs)

Hapus isi default di file Code.gs, lalu copy-paste script berikut:

Code.gs

// Fungsi dipanggil saat URL Web App dibuka di browser
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('Index')
      .setTitle('IoT Smart Home')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
      .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

// Fungsi dipanggil oleh ESP8266 untuk mengirim data (POST)
function doPost(e) {
  try {
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
    var suhu = e.parameter.suhu;
    var kelembaban = e.parameter.kelembaban;
    var timestamp = new Date();

    if(suhu && kelembaban) {
      sheet.appendRow([timestamp, suhu, kelembaban]);
    }

    var props = PropertiesService.getScriptProperties();
    var relayState = props.getProperty('relayState');
    if(!relayState) {
      relayState = 'OFF';
      props.setProperty('relayState', relayState);
    }

    return ContentService.createTextOutput(relayState);
  } catch(error) {
    return ContentService.createTextOutput("Error");
  }
}

// Ambil data untuk HTML
function getDashboardData() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var lastRow = sheet.getLastRow();
  var suhu = 0, kelembaban = 0;
  
  if(lastRow > 1) {
    var data = sheet.getRange(lastRow, 2, 1, 2).getValues()[0];
    suhu = data[0]; kelembaban = data[1];
  }
  var props = PropertiesService.getScriptProperties();
  return { suhu: suhu, kelembaban: kelembaban, relay: props.getProperty('relayState') || 'OFF' };
}

function toggleRelay(state) {
  PropertiesService.getScriptProperties().setProperty('relayState', state);
  return state;
}

C. Kode Frontend (Index.html)

Klik tombol + (Tambah file) > HTML. Beri nama Index. Masukkan kode UI Dashboard berikut:

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body { font-family: sans-serif; background: #f8fafc; text-align: center; padding: 20px; }
      .card { background: white; padding: 30px; border-radius: 16px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); max-width: 400px; margin: 20px auto; }
      .data-box { font-size: 24px; font-weight: bold; margin: 20px 0; color: #334155; }
      .btn { padding: 15px; font-size: 16px; border: none; border-radius: 8px; cursor: pointer; color: white; font-weight: bold; width: 100%; }
      .btn-on { background: #ef4444; } .btn-off { background: #94a3b8; }
    </style>
  </head>
  <body>
    <div class="card">
      <h2>🏠 Smart Home</h2>
      <div class="data-box">
        🌡️ Suhu: <span id="suhu">--</span> °C<br>
        💧 Kelembaban: <span id="kelembaban">--</span> %
      </div>
      <button id="relayBtn" class="btn btn-off" onclick="changeRelay()">Memuat...</button>
      <div id="status" style="margin-top:15px; font-size:12px; color:#64748b;">Koneksi...</div>
    </div>

    <script>
      let state = "OFF";
      function fetchData() { google.script.run.withSuccessHandler(updateUI).getDashboardData(); }
      function updateUI(data) {
        document.getElementById('suhu').innerText = data.suhu;
        document.getElementById('kelembaban').innerText = data.kelembaban;
        state = data.relay;
        const btn = document.getElementById('relayBtn');
        btn.innerText = state === "ON" ? "MATIKAN (ON)" : "NYALAKAN (OFF)";
        btn.className = state === "ON" ? "btn btn-on" : "btn btn-off";
      }
      function changeRelay() {
        state = state === "ON" ? "OFF" : "ON";
        google.script.run.withSuccessHandler(fetchData).toggleRelay(state);
      }
      setInterval(fetchData, 5000); fetchData();
    </script>
  </body>
</html>

Langkah Penting: Deployment Web

Klik tombol Terapkan (Deploy) > Deployment Baru.
Pilih jenis roda gigi: Aplikasi Web.
Jalankan sebagai: Saya.
Akses: WAJIB pilih Siapa saja (Anyone).
Klik Terapkan & Otorisasi. Salin URL Aplikasi Web (berakhiran /exec)!

Kode Mikrokontroler (C++)

Buka Arduino IDE, pastikan board NodeMCU 1.0 terpilih. Tempelkan kode berikut.
⚠️ Jangan lupa ubah SSID, Password, dan URL GAS Anda pada bagian PENGATURAN PENGGUNA.

main.ino

#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <WiFiClientSecure.h>
#include "DHT.h"

// ================= PENGATURAN PENGGUNA =================
const char* ssid = "WIFI_SSID_ANDA";
const char* password = "WIFI_PASSWORD_ANDA";
const String gas_url = "URL_GAS_ANDA";
// =======================================================

#define DHTPIN 4      // Pin D2
#define DHTTYPE DHT11 // Jenis Sensor
#define RELAY_PIN 5   // Pin D1

DHT dht(DHTPIN, DHTTYPE);

void setup() {
  Serial.begin(115200);
  pinMode(RELAY_PIN, OUTPUT);
  digitalWrite(RELAY_PIN, LOW); 
  dht.begin();

  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) { delay(500); }
}

void loop() {
  if (WiFi.status() == WL_CONNECTED) {
    float kelembaban = dht.readHumidity();
    float suhu = dht.readTemperature();

    if (isnan(kelembaban) || isnan(suhu)) return;

    WiFiClientSecure client;
    client.setInsecure(); 
    HTTPClient http;

    http.setFollowRedirects(HTTPC_STRICT_FOLLOW_REDIRECTS);
    http.begin(client, gas_url);
    http.addHeader("Content-Type", "application/x-www-form-urlencoded");

    String payload = "suhu=" + String(suhu) + "&kelembaban=" + String(kelembaban);
    int httpCode = http.POST(payload);

    if (httpCode > 0) {
      String response = http.getString();
      if (response == "ON") digitalWrite(RELAY_PIN, HIGH);
      else if (response == "OFF") digitalWrite(RELAY_PIN, LOW);
    }
    http.end(); 
  }
  delay(5000); 
}

Pengujian & Troubleshooting

Urutan Pengujian

Upload program ke ESP8266 dari Arduino IDE.
Buka Serial Monitor (Baudrate 115200) untuk memantau log perangkat.
Buka URL Web App (Link GAS) di browser HP atau Laptop Anda.
Pastikan nilai Suhu & Kelembaban tampil dan update otomatis.
Klik tombol Nyala/Mati di Web. Perhatikan modul Relay, terdengar bunyi "klik".

Masalah Umum

Suhu 'nan' (Not a Number) Jalur kabel data sensor (DHT11) bermasalah. Pin DATA mungkin terbalik, kendor, atau rusak.
Data tidak masuk ke web Pastikan setting Apps Script di-set ke "Siapa saja (Anyone)", dan URL di program Arduino berakhiran /exec.
Relay bekerja terbalik Beberapa modul relay bertipe Active Low. Tukar logika HIGH menjadi LOW di baris kode eksekusi relay.