Membangun Jembatan Digital: Dashboard Monitoring Sensor Real-Time dengan Firebase

social

Pernahkah Anda memimpikan memiliki dashboard sendiri yang memantau data sensor secara instan? Proyek IoT menjadi powerful bukan hanya karena hardware yang canggih, tetapi karena cara kita memvisualisasikan datanya.

Kunci dari monitoring real-time adalah menyingkirkan delay akibat polling (bertanya berulang kali) yang membuang waktu. Solusinya? Firebase Realtime Database!

Mari kita pelajari cara membangun jembatan digital sempurna dari Sensor $\rightarrow$ ESP32 $\rightarrow$ Firebase $\rightarrow$ Web Browser dengan tiga langkah krusial.

Langkah 1: Persiapan Firebase (The Bridge)

Pertama, kita harus menyiapkan wadah data kita di Cloud.

  1. Buat Proyek Firebase: Kunjungi Firebase Console dan buat proyek baru.

  2. Aktifkan Realtime Database: Di menu, pilih Realtime Database dan klik Create Database.

  3. Atur Aturan Akses (Rules): Karena ini proyek prototype (sebelum production), kita ubah aturan keamanan agar ESP32 bisa menulis dan web dashboard bisa membaca.

    • Pilih tab Rules. Ubah $auth != null menjadi true agar akses publik diizinkan:

    JSON

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

  4. Catat Kredensial: Simpan Database URL Anda (misalnya: https://[nama-proyek-anda].firebaseio.com/). Anda akan membutuhkannya di Step 2.

Langkah 2: Kode ESP32/ESP8266 (The Sender)

Pada hardware (ESP32/ESP8266), tugas kita adalah membaca data sensor dan mengirimkannya ke Firebase.

A. Persiapan Arduino IDE

  1. Install Library: Pastikan Anda menginstal library Firebase ESP8266 Client (atau Firebase ESP32 Client) melalui Library Manager Arduino IDE.

  2. Ganti Kredensial: Masukkan kredensial WiFi dan Firebase Anda.

B. Kode Sederhana untuk Mengirim Data

Kode ini akan mengirimkan data random (sebagai simulasi sensor) ke node bernama /data/suhu:

C++

 
#include <WiFi.h>
#include <Firebase_ESP_Client.h>

// Kredensial WiFi Anda
#define WIFI_SSID "NAMA_WIFI_ANDA"
#define WIFI_PASSWORD "PASSWORD_WIFI_ANDA"

// Kredensial Firebase Anda
#define FIREBASE_HOST "URL_DARI_STEP_1" // Contoh: [nama-proyek-anda].firebaseio.com
#define FIREBASE_AUTH "TOKEN_RAHASIA_ANDA" // (Dapatkan dari Project Settings > Service Accounts)

FirebaseData fbdo;

void setup() {
  Serial.begin(115200);
  
  // 1. Koneksi WiFi
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi Connected.");

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

void loop() {
  if (Firebase.ready()) {
    // Simulasi Baca Sensor (Angka 20 sampai 30)
    float suhu = random(20, 30);
    
    // Kirim data ke node /data/suhu
    if (Firebase.setFloat(fbdo, "/data/suhu", suhu)) {
      Serial.print("Data terkirim: ");
      Serial.println(suhu);
    } else {
      Serial.print("Gagal mengirim data: ");
      Serial.println(fbdo.errorReason());
    }
  }
  delay(5000); // Kirim setiap 5 detik
}

Setelah upload, cek Firebase Console Anda. Anda akan melihat data suhu terus berubah di sana.

Langkah 3: Membangun Web Dashboard (The Receiver)

Dashboard ini akan menggunakan HTML, CSS, dan JavaScript untuk listening ke Firebase dan menampilkan hasilnya.

A. Struktur HTML Dasar (index.html)

HTML

 
<!DOCTYPE html>
<html>
<head>
    <title>Dashboard Suhu Real-Time</title>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
        #suhuDisplay { font-size: 4em; font-weight: bold; color: #ff5722; }
    </style>
</head>
<body>

    <h1>Monitoring Suhu Real-Time</h1>
    <p>Data terakhir dari ESP32:</p>
    <div id="suhuDisplay">-- °C</div>

    <script>
        // INISIALISASI FIREBASE (Ganti dengan konfigurasi Anda!)
        const firebaseConfig = {
            apiKey: "AIzaSy...", // Ambil dari Project Settings > Web App
            databaseURL: "URL_DARI_STEP_1",
            // ... lainnya
        };
        firebase.initializeApp(firebaseConfig);

        const dbRef = firebase.database().ref('/data/suhu');

        // FUNGSI REAL-TIME LISTENER
        dbRef.on('value', (snapshot) => {
            const suhuSaatIni = snapshot.val();
            
            // Update tampilan HTML secara instan
            document.getElementById('suhuDisplay').innerHTML = 
                suhuSaatIni.toFixed(2) + " °C";

            console.log("Data baru diterima:", suhuSaatIni);
        });
    </script>
</body>
</html>

B. Cara Kerja JavaScript (The Magic)

Perhatikan baris dbRef.on('value', (snapshot) => { ... });.

Ini bukan polling! Baris ini memerintahkan browser untuk: “Jangan tanya apa-apa. Cukup tunggu, dan ketika node /data/suhu di Firebase berubah, Firebase akan memberitahumu (melalui event listener on('value')), dan eksekusi fungsi ini secara instan.”

Inilah yang menciptakan pengalaman Real-Time yang mulus. Setiap kali ESP32 mengirim data di Step 2, dashboard Anda di Step 3 akan langsung merespons tanpa refresh.

📝 Kesimpulan

Anda baru saja membangun sistem full-stack IoT! Proyek ini menunjukkan kekuatan sinergi antara hardware (ESP32/Sensor), Cloud (Firebase), dan Front-end (Web Dashboard).

Anda tidak hanya memantau data, tetapi memvisualisasikannya secara instan dan global—fondasi utama untuk segala sesuatu mulai dari sistem rumah pintar hingga monitoring industri.

Related Posts

Scroll to Top