Firebase Auth & Firestore untuk Aplikasi IoT

Langkah Register Web App:
1. Di Firebase Console → Project Settings → General
2. Scroll ke bagian "Your apps"
3. Klik ikon Web () untuk register web app
4. Masukkan nama app (misal: "iot-dashboard")
5. Centang "Also set up Firebase Hosting" (opsional)
6. Klik "Register app"
7. Salin konfigurasi Firebase yang muncul

// Import Firebase SDK (modular v9+)
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// Konfigurasi dari Firebase Console
const firebaseConfig = {
  apiKey: "AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "iot-smart-home.firebaseapp.com",
  projectId: "iot-smart-home",
  storageBucket: "iot-smart-home.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abcdef123456"
};

// Inisialisasi Firebase
const app = initializeApp(firebaseConfig);

// Inisialisasi layanan Authentication dan Firestore
export const auth = getAuth(app);
export const db = getFirestore(app);
export default app;

# Instalasi Firebase SDK untuk web (via npm)
npm install firebase

# Atau gunakan CDN (untuk project tanpa bundler/Vite)
# <script type="module">
#   import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js";
#   import { getAuth } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-auth.js";
#   import { getFirestore } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js";
# </script>

import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "./firebase-config.js";

async function registerUser(email, password) {
  try {
    // Buat akun baru
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    const user = userCredential.user;

    console.log("User berhasil didaftarkan:", user.uid);
    console.log("Email:", user.email);

    return user;
  } catch (error) {
    // Handle error umum
    switch (error.code) {
      case "auth/email-already-in-use":
        console.error("Email sudah terdaftar!");
        break;
      case "auth/weak-password":
        console.error("Password terlalu lemah (minimal 6 karakter)");
        break;
      case "auth/invalid-email":
        console.error("Format email tidak valid");
        break;
      default:
        console.error("Error:", error.message);
    }
    throw error;
  }
}

// Contoh penggunaan di form
document.getElementById("registerForm").addEventListener("submit", async (e) => {
  e.preventDefault();
  const email = document.getElementById("email").value;
  const password = document.getElementById("password").value;
  await registerUser(email, password);
});

import { signInWithEmailAndPassword, signOut, onAuthStateChanged } from "firebase/auth";
import { auth } from "./firebase-config.js";

// Login dengan email dan password
async function loginUser(email, password) {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    console.log("Login berhasil!", userCredential.user.email);
    return userCredential.user;
  } catch (error) {
    switch (error.code) {
      case "auth/user-not-found":
        console.error("User tidak ditemukan");
        break;
      case "auth/wrong-password":
        console.error("Password salah");
        break;
      case "auth/too-many-requests":
        console.error("Terlalu banyak percobaan login. Coba lagi nanti.");
        break;
      default:
        console.error("Error login:", error.message);
    }
    throw error;
  }
}

// Logout
async function logoutUser() {
  await signOut(auth);
  console.log("User berhasil logout");
}

// Monitor status auth (penting untuk Single Page App)
onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log("User login:", user.email);
    // Tampilkan dashboard, sembunyikan halaman login
    document.getElementById("dashboard").style.display = "block";
    document.getElementById("loginPage").style.display = "none";
  } else {
    console.log("User belum login");
    // Tampilkan halaman login, sembunyikan dashboard
    document.getElementById("dashboard").style.display = "none";
    document.getElementById("loginPage").style.display = "block";
  }
});

import { signInWithPopup, GoogleAuthProvider, GithubAuthProvider } from "firebase/auth";
import { auth } from "./firebase-config.js";

// === Google Sign-In ===
async function signInWithGoogle() {
  try {
    const provider = new GoogleAuthProvider();
    provider.addScope("email");
    provider.addScope("profile");

    const result = await signInWithPopup(auth, provider);
    const user = result.user;

    console.log("Google login berhasil!");
    console.log("Nama:", user.displayName);
    console.log("Email:", user.email);
    console.log("Photo:", user.photoURL);

    // Dapatkan Google Access Token (untuk akses Google API lain)
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    return user;
  } catch (error) {
    console.error("Error Google login:", error.code, error.message);
    throw error;
  }
}

// === GitHub Sign-In ===
async function signInWithGitHub() {
  try {
    const provider = new GithubAuthProvider();
    provider.addScope("repo");

    const result = await signInWithPopup(auth, provider);
    const user = result.user;

    console.log("GitHub login berhasil!");
    console.log("Username:", user.displayName);
    console.log("Email:", user.email);

    return user;
  } catch (error) {
    if (error.code === "auth/account-exists-with-different-credential") {
      console.error("Email sudah terdaftar dengan provider lain!");
    }
    throw error;
  }
}

// Pasang event listener ke tombol
document.getElementById("btnGoogle").addEventListener("click", signInWithGoogle);
document.getElementById("btnGitHub").addEventListener("click", signInWithGitHub);

import { collection, doc, setDoc, addDoc, serverTimestamp } from "firebase/firestore";
import { db, auth } from "./firebase-config.js";

// === Metode 1: addDoc() — ID dokumen otomatis ===
async function addDevice(deviceData) {
  try {
    const docRef = await addDoc(collection(db, "devices"), {
      name: deviceData.name,
      type: deviceData.type,
      location: deviceData.location,
      owner_uid: auth.currentUser.uid,
      status: "online",
      created_at: serverTimestamp(),
      updated_at: serverTimestamp()
    });
    console.log("Device ditambahkan dengan ID:", docRef.id);
    return docRef.id;
  } catch (error) {
    console.error("Error menambah device:", error);
    throw error;
  }
}

// === Metode 2: setDoc() — ID manual ===
async function addReading(deviceId, readingData) {
  try {
    const readingId = new Date().toISOString(); // ID berdasarkan timestamp
    const readingRef = doc(db, "devices", deviceId, "readings", readingId);

    await setDoc(readingRef, {
      suhu: readingData.suhu,
      kelembaban: readingData.kelembaban,
      timestamp: serverTimestamp()
    });
    console.log("Data sensor ditambahkan:", readingId);
  } catch (error) {
    console.error("Error menambah data:", error);
    throw error;
  }
}

// Contoh penggunaan
await addDevice({
  name: "Sensor Suhu Gudang",
  type: "temperature",
  location: "Gudang Utama"
});

await addReading("device-001", {
  suhu: 28.5,
  kelembaban: 72.0
});

import { collection, doc, getDoc, getDocs, query, where, orderBy, limit } from "firebase/firestore";
import { db } from "./firebase-config.js";

// === Baca satu dokumen berdasarkan ID ===
async function getDevice(deviceId) {
  const docRef = doc(db, "devices", deviceId);
  const docSnap = await getDoc(docRef);

  if (docSnap.exists()) {
    console.log("Data device:", docSnap.data());
    return { id: docSnap.id, ...docSnap.data() };
  } else {
    console.log("Device tidak ditemukan!");
    return null;
  }
}

// === Baca semua device milik user yang sedang login ===
async function getUserDevices() {
  const q = query(
    collection(db, "devices"),
    where("owner_uid", "==", auth.currentUser.uid),
    orderBy("created_at", "desc"),
    limit(50)
  );

  const querySnapshot = await getDocs(q);
  const devices = [];

  querySnapshot.forEach((doc) => {
    devices.push({ id: doc.id, ...doc.data() });
  });

  console.log(`Ditemukan ${devices.length} device`);
  return devices;
}

// === Baca data sensor dengan filter ===
async function getHighTempReadings(deviceId, minTemp) {
  const q = query(
    collection(db, "devices", deviceId, "readings"),
    where("suhu", ">", minTemp),
    orderBy("suhu", "desc"),
    limit(10)
  );

  const snapshot = await getDocs(q);
  return snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
}

import { doc, updateDoc, deleteDoc, serverTimestamp } from "firebase/firestore";
import { db } from "./firebase-config.js";

// === Update data device ===
async function updateDevice(deviceId, newData) {
  const deviceRef = doc(db, "devices", deviceId);

  await updateDoc(deviceRef, {
    ...newData,
    updated_at: serverTimestamp()
  });

  console.log("Device berhasil diupdate");
}

// Contoh: update status dan lokasi device
await updateDevice("device-001", {
  status: "offline",
  location: "Lantai 3, Ruang Lab"
});

// === Hapus device (termasuk sub-collection) ===
async function deleteDevice(deviceId) {
  // PERINGATAN: Sub-collection tidak otomatis terhapus!
  // Hapus sub-collection "readings" terlebih dahulu
  const readings = await getDocs(collection(db, "devices", deviceId, "readings"));
  const deletePromises = readings.docs.map(d => deleteDoc(d.ref));
  await Promise.all(deletePromises);

  // Hapus dokumen device
  await deleteDoc(doc(db, "devices", deviceId));
  console.log("Device dan semua data sensornya berhasil dihapus");
}

// === Batch write: operasi sekaligus ===
import { writeBatch } from "firebase/firestore";

async function batchUpdateStatus(deviceIds, status) {
  const batch = writeBatch(db);

  deviceIds.forEach(id => {
    const deviceRef = doc(db, "devices", id);
    batch.update(deviceRef, { status, updated_at: serverTimestamp() });
  });

  await batch.commit(); // Commit semua sekaligus
  console.log(`${deviceIds.length} device diupdate sekaligus`);
}

rules_version = "2";
service cloud.firestore {
  match /databases/{database}/documents {

    // Helper function: cek apakah user sudah login
    function isAuth() {
      return request.auth != null;
    }

    // Helper function: cek apakah user adalah pemilik dokumen
    function isOwner(userId) {
      return request.auth.uid == userId;
    }

    // === Collection: devices ===
    match /devices/{deviceId} {
      // Baca: hanya pemilik device yang bisa melihat
      allow read: if isAuth() && isOwner(resource.data.owner_uid);

      // Buat: user yang login, owner_uid harus miliknya, wajib ada field tertentu
      allow create: if isAuth()
        && request.resource.data.owner_uid == request.auth.uid
        && request.resource.data.keys().hasAll(["name", "type", "owner_uid"])
        && request.resource.data.name is string
        && request.resource.data.name.size() > 0;

      // Update: hanya pemilik, owner_uid tidak bisa diubah
      allow update: if isAuth()
        && isOwner(resource.data.owner_uid)
        && request.resource.data.owner_uid == resource.data.owner_uid;

      // Hapus: hanya pemilik
      allow delete: if isAuth() && isOwner(resource.data.owner_uid);

      // Sub-collection: readings (data sensor)
      match /readings/{readingId} {
        // Baca: hanya pemilik parent device
        allow read: if isAuth() && isOwner(
          get(/databases/$(database)/documents/devices/$(deviceId)).data.owner_uid
        );

        // Tulis data baru: hanya pemilik, validasi tipe data
        allow create: if isAuth()
          && isOwner(get(/databases/$(database)/documents/devices/$(deviceId)).data.owner_uid)
          && request.resource.data.suhu is number
          && request.resource.data.kelembaban is number;

        // Data sensor TIDAK BOLEH diubah atau dihapus (integritas data)
        allow update, delete: if false;
      }
    }
  }
}

# Instalasi Firebase CLI
npm install -g firebase-tools

# Login ke Firebase
firebase login

# Jalankan emulator untuk test security rules secara lokal
firebase emulators:start --only firestore

# Deploy security rules ke production
firebase deploy --only firestore:rules

import { collection, doc, onSnapshot, query, where, orderBy, limit } from "firebase/firestore";
import { db } from "./firebase-config.js";

// === Listener untuk satu dokumen (real-time) ===
function watchDevice(deviceId) {
  const deviceRef = doc(db, "devices", deviceId);

  const unsubscribe = onSnapshot(deviceRef, (docSnap) => {
    if (docSnap.exists()) {
      const data = docSnap.data();
      console.log("Status device berubah:", data.status);

      // Update UI secara real-time
      document.getElementById("deviceName").textContent = data.name;
      document.getElementById("deviceStatus").textContent = data.status;
      document.getElementById("deviceStatus").className =
        data.status === "online" ? "badge-success" : "badge-danger";
    }
  }, (error) => {
    console.error("Error listening device:", error);
  });

  // Kembalikan fungsi unsubscribe untuk berhenti mendengarkan
  return unsubscribe;
}

// === Listener untuk data sensor terbaru ===
function watchLatestReadings(deviceId) {
  const q = query(
    collection(db, "devices", deviceId, "readings"),
    orderBy("timestamp", "desc"),
    limit(10)
  );

  const unsubscribe = onSnapshot(q, (snapshot) => {
    const readings = [];
    snapshot.forEach((doc) => {
      readings.push({ id: doc.id, ...doc.data() });
    });

    console.log(`Data sensor terbaru (${readings.length} records):`, readings);

    // Update grafik di dashboard
    updateChart(readings);

    // Update gauge suhu
    if (readings.length > 0) {
      const latestSuhu = readings[0].suhu;
      document.getElementById("gaugeSuhu").textContent = latestSuhu + "°C";

      // Alert jika suhu kritis
      if (latestSuhu > 35) {
        showAlert("Suhu kritis! " + latestSuhu + "°C");
      }
    }
  });

  return unsubscribe;
}

// === Menggunakan listener ===
const unsubDevice = watchDevice("device-001");
const unsubReadings = watchLatestReadings("device-001");

// Berhenti mendengarkan saat tidak diperlukan (hemat kuota)
// unsubDevice();
// unsubReadings();