Jalan-Jalan Ala KID: Modul IOT + FIREBASE + GAS

Pertemuan 1 - 6

Fase Onboarding IoT 🚀

Sebelum bikin inovasi "sihir" kalian sendiri, kita gaspol belajar resep dasar bikin smart home selama 6 minggu!

Persiapan

Membangun Fondasi Kuat

Target Onboarding

Pada fase ini, kalian tidak perlu memikirkan ide dulu, cukup ikuti dan pelajari tutorial **Masterclass Dasar IoT** (Sensor Suhu DHT11 & Modul Relay) yang didemonstrasikan Guru.

Paham Alur

Pahami alur komunikasi dari HP -> Firebase -> ESP8266 -> Relay.

Praktik Merakit

Target utama: Mampu merangkai kabel NodeMCU, DHT11, & Relay dengan benar ke Breadboard.

Pemanasan Coding

Instalasi Arduino IDE, setting library ESP8266 & Firebase RTDB.

💡 Catatan Penting: Di tahap ini kalian BELUM membuat video. Fokuslah untuk menyerap ilmu, berlatih merakit, dan memastikan kalian paham alur C++ dan Cloud. Siswa yang cepat tanggap bisa eksplorasi fitur notifikasi web!

Pertemuan 7 - 8

Ide Gilamu Dimulai
Dari Sini! 🕵️‍♂️

Kalian sudah lulus tahap Onboarding. Sekarang waktunya pecahkan masalah nyata di sekolah atau asrama!

Kolaborasi

Mencari Masalah & Solusi

Pertanyaan Pemantik

"Bapak/Ibu udah ngasih tahu resep dasar bikin nasi goreng (baca suhu & nyalain lampu via internet). Sekarang, terserah kalian mau bikin nasi goreng gila atau mie goreng sekalian!"

Tantangannya: Kira-kira sihir teknologi IoT ini bisa kita pakai buat beresin masalah nyata apa di asrama/sekolah? Misalnya: ngingetin jadwal piket, otomatisasi toren air, siram tanaman atau bel sekolah otomatis?

Pembagian Peran Tim

Hustler

Pencari masalah di lapangan, perancang konsep solusi, dan juru bicara utama saat presentasi ke audiens.

Hacker

Otak logika tim. Bertanggung jawab mencari tahu library sensor, ngoding C++, & merakit komponen (teknisi).

Hipster

Desainer kreatif. Fokus merancang antarmuka (UI) web remote control di GAS biar *user friendly* & cantik.

Videografer

Sutradara & Editor. Mendokumentasikan proyek menjadi 6 seri vlog yang informatif, jelas, dan "joyful".

🎥 Tugas Video 1: Pitching Ide

Rekam video perkenalan tim kalian dan jelaskan dengan mantap:

Masalah spesifik apa yang kalian temukan di sekolah/asrama?
Solusi inovatif (sensor apa & buat apa) yang akan kalian buat?

Pertemuan 9 - 11

Pilih Senjatamu! ⚙️

Pilih komponen (*input & output*) yang paling tepat untuk memecahkan masalah yang sudah tim kalian rancang.

Hardware

Eksplorasi Modul Custom

Inti Sistem (Wajib Tetap)

NodeMCU ESP8266

Si Otak Utama yang punya modul WiFi bawaan buat nyambung ke Cloud/Internet.

Modul Relay

Saklar sakti pengeksekusi tegangan tinggi (buat nyalain pompa air 220V, kipas, lampu terang).

Sensor Custom (Input Pilihan)

📏

Ultrasonik (HC-SR04)

Cocok untuk: Deteksi jarak (toren air luber), palang pintu, tong sampah pintar.

🌱

Soil Moisture

Cocok untuk: Pertanian/Penyiram pot otomatis jika tanah asrama sudah mulai kering.

🏃

PIR (Sensor Gerak)

Cocok untuk: Alarm keamanan lab komputer malam hari, lampu lorong otomatis nyala jika ada orang.

💡

LDR (Sensor Cahaya)

Cocok untuk: Jemuran otomatis (deteksi mendung), atau otomatisasi lampu taman asrama saat maghrib.

Aktuator Tambahan (Output Custom)

🔔

Buzzer (Alarm Suara)

Bisa membunyikan nada/tit-tit-tit. Sangat cocok dipadukan dengan PIR untuk alarm maling, atau bel pergantian jam pelajaran.

📺

Modul Layar OLED

Layar mini digital. Cocok untuk: Menampilkan teks suhu/jarak langsung di alat tanpa buka HP, atau pesan sapaan digital.

Target Video 2:

Rekam *unboxing* atau riset kalian mencari komponen. Jelaskan *kenapa* tim kalian memilih sensor dan aktuator tersebut (termasuk bel/layar jika pakai) untuk menyelesaikan masalah di Video 1.

Pertemuan 12 - 14

Waktunya Merakit! 🔌

Tabel di bawah adalah patokan dasar (*Baseline*). Tim bagian *Hacker/Hardware* WAJIB mencari tahu susunan kabel (pin) spesifik untuk sensor custom pilihan kalian.

Praktik Elektronika

Wiring & Penyolderan

Panduan Skematik (Baseline)

Komponen	Kaki / Pin Alat	Sambung ke NodeMCU
Modul Relay	VCC (+)	3V3 / VIN
	GND (-)	GND
	IN (Signal)	D1 (GPIO 5)
Sensor Custom	VCC (+)	3V3 / VIN (Cek Manual!)
	GND (-)	GND
	DATA / OUT	D2 (GPIO 4)

Aturan Emas Elektronika!

GND selalu ketemu GND. VCC ketemu arus/tegangan. Jangan sampai terbalik! Jika kalian pakai sensor Ultrasonik/PIR, cek dokumentasi apakah sensor kalian butuh tegangan 3 Volt (3V3) atau 5 Volt (VIN). Salah tegangan bisa gosong!

Target Video 3:

Dokumentasikan proses nyolder & merakit, dan tunjukkan alur kabel proyek tim kalian dengan bangga!

Pertemuan 15 - 18

Setup Cloud & Web ☁️

Tim Web Developer (Hipster), siapkan buku catatan gaib (Firebase) dan bangun antarmuka web khusus untuk proyek custom kalian!

Backend & Frontend

Firebase & Dashboard GAS

1

Database Firebase

A Dapat URL Database

Buka Firebase Console, buat project baru sesuai nama tim.
Di menu Build, pilih Realtime Database -> Create Database (Pilih Singapore, Test Mode).
Salin URL yang muncul (misal: https://project-id.firebaseio.com/).

B Dapat Token Rahasia

Klik ikon Gir ⚙️ (Project settings) -> tab Service accounts.
Pilih menu Database secrets di sebelah kiri.
Klik Show, lalu salin kodenya. Hati-hati, ini rahasia!

C. Atur Rules (Wajib!)

Firebase Rules

{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}

2

Dashboard Web (GAS)

Buka script.google.com. Modifikasi judul dan logika fitur Notifikasi sesuai proyek/sensor tim kalian!

File 1: Code.gs

Code.gs

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('Dashboard Proyek Custom')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

File 2: Index.html (Ada Alert Notifikasinya!)

Index.html

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 p-4 md:p-8">
  <div class="max-w-xl mx-auto">
    <h1 class="text-2xl md:text-3xl font-bold text-center text-slate-800 mb-8">🚀 Panel Remote Custom</h1>
    
    <!-- Alert Notifikasi (Ganti logika suhunya sesuai sensor kalian) -->
    <div id="notif-alert" class="hidden mb-6 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-lg shadow-sm animate-pulse">
      <h3 class="font-bold text-lg">⚠️ Peringatan Sistem!</h3>
      <p id="notif-msg">Data sensor melampaui batas aman.</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
      <div class="bg-white p-6 rounded-2xl shadow-md text-center">
        <h2 class="font-semibold text-slate-500 mb-2">Data Sensor</h2>
        <div class="text-4xl font-black text-brand-600"><span id="data_sensor">--</span></div>
      </div>

      <div class="bg-white p-6 rounded-2xl shadow-md text-center">
        <h2 class="font-semibold text-slate-500 mb-2">Aktuator</h2>
        <div class="flex flex-col gap-2 mt-3">
          <button onclick="toggle(1)" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 rounded-xl transition">ON</button>
          <button onclick="toggle(0)" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 rounded-xl transition">OFF</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // --- GANTI DENGAN URL DATABASE KALIAN ---
    const dbURL = "https://PROJECT_ID_KALIAN.firebaseio.com"; 

    setInterval(() => {
      // Ambil Data Sensor
      fetch(dbURL + "/sensor.json")
        .then(res => res.json())
        .then(data => {
          if(data) {
            document.getElementById("data_sensor").innerText = data.nilai_baca;
            
            // LOGIKA NOTIFIKASI CUSTOM 
            // (Ubah angka 33 jadi 10 kalau pakai Ultrasonik deteksi jarak air, dll)
            const alertBox = document.getElementById("notif-alert");
            if(data.nilai_baca > 33) { 
              alertBox.classList.remove("hidden");
              document.getElementById("notif-msg").innerText = `Waspada! Nilai mencapai: ${data.nilai_baca}`;
            } else {
              alertBox.classList.add("hidden");
            }
          }
        });
    }, 2000);

    // Fungsi Tombol ON/OFF
    function toggle(state) {
      fetch(dbURL + "/kontrol.json", {
        method: "PATCH",
        body: JSON.stringify({ alat: state })
      });
    }
  </script>
</body>
</html>

Target Video 4:

Rekam proses konfigurasi Firebase, desain *style* Web HTML yang *hipster*, dan tunjukkan kalau web/notif sudah jalan (meski belum konek ke alat secara fisik).

Pertemuan 19 - 23

Logika C++ Mesin 🧠

Tim Hacker (Coder), ini tugas utama kalian! Skrip di bawah adalah kerangka dasar (*baseline*). Kalian WAJIB mencari tahu *library* untuk sensor custom kalian dan memodifikasi blok ⚠️ pembacaan sensornya.

Pemrograman

Logika NodeMCU (C++)

NodeMCU_Custom.ino

#include <ESP8266WiFi.h>
#include <FirebaseESP8266.h>

// --- ⚠️ GANTI LIBRARY INI SESUAI SENSOR KALIAN (Misal ganti ke library Ultrasonik) ---
#include <DHT.h> 
#define DHTPIN D2
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
// -----------------------------------------------------------

#define WIFI_SSID "NAMA_WIFI_SEKOLAH"
#define WIFI_PASSWORD "PASSWORD_WIFI"
#define FIREBASE_HOST "PROJECT_ID_KALIAN.firebaseio.com" 
#define FIREBASE_AUTH "TOKEN_RAHASIA"

#define RELAY_PIN D1
FirebaseData firebaseData;

void setup() {
  Serial.begin(115200);
  pinMode(RELAY_PIN, OUTPUT);
  
  // Ganti inisialisasi ini sesuai sensor kalian (Hapus jika tidak perlu)
  dht.begin(); 

  // Connect WiFi
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print("."); delay(500);
  }
  Serial.println("\nWiFi OK!");

  // Connect Firebase
  Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH);
  Firebase.reconnectWiFi(true);
}

void loop() {
  // --- ⚠️ BAGIAN INI WAJIB DIMODIFIKASI SESUAI SENSOR ---
  // Contoh: Kalau pakai Ultrasonik, ganti bacaan ini jadi rumus konversi ke CM
  float nilaiSensor = dht.readTemperature(); 

  if (!isnan(nilaiSensor)) {
    // Kirim ke database
    Firebase.setFloat(firebaseData, "/sensor/nilai_baca", nilaiSensor);
    Serial.println("Data ke Cloud: " + String(nilaiSensor));
  }
  // ------------------------------------------------------

  // BACA PERINTAH DARI WEB (GAS) UNTUK RELAY/BUZZER
  if (Firebase.getInt(firebaseData, "/kontrol/alat")) {
    int statusAlat = firebaseData.intData();
    if (statusAlat == 1) {
      digitalWrite(RELAY_PIN, LOW); // Aktif Low (Cek relay kalian!)
      Serial.println("Alat ON");
    } else {
      digitalWrite(RELAY_PIN, HIGH);
      Serial.println("Alat OFF");
    }
  }
  
  delay(2000); 
}

Target Video 5:

Jelaskan cara kerja skrip C++ tim kalian. Tunjukkan baris mana yang berhasil kalian *Hacker* (rubah/custom) agar sesuai dengan sensor yang dibeli di Video 2.

Pertemuan 24 - 29

Uji TKP & Showcase! 🎬

Bukti nyata kalau karya kalian adalah "Problem Solver" yang aplikatif: Alat dipasang dan dites langsung di lapangan (*TKP*). Waktunya merekam seri grand final!

Showcase

Presentasi & Hasil Akhir

📋 Ceklis Logbook PjBL (Videografer)

Tim Videografer memastikan seluruh tahapan logbook ini terekam dengan jelas, seru, dan *joyful* untuk dikumpulkan.

Vlog 1: Pitching Ide & Identifikasi Masalah (Peran masing-masing siswa) Vlog 2: Riset & Belanja Hardware Custom Vlog 3: Proses Solder & Merakit Rangkaian Vlog 4: Setup Web GAS, Notifikasi, & Database Cloud Vlog 5: Penjelasan *Custom Skrip* C++ Arduino IDE Vlog 6 (Final): Pemasangan di TKP & Uji Coba Alat Real-time!

Sesi Refleksi (Nobar Akhir)

"Berdasarkan pengalaman PjBL selama ini, error/bug terberat apa yang sempat bikin tim kalian pusing, dan bagaimana kolaborasi peran (Hustler, Hacker, dll) pada akhirnya memecahkan masalah tersebut?"

Bangga Jadi Generasi Solusi! 🚀

Jalan-Jalan Ala KID

Rabu, 26 Agustus 2026

Modul IOT + FIREBASE + GAS