🔥 Firebase Integration Guide

Sistem PERENCANAAN DINKES NATUNA — Setup Panduan Integrasi Firebase Backend

📁 Struktur File

project/
├── preview.html ← Aplikasi utama
├── firebase-config.js ← Konfigurasi Firebase (NEW)
├── firestore-service.js ← Service layer Firestore (NEW)
├── auth-service.js ← Service layer Auth (NEW)
├── firebase-bridge.js ← Bridge integrasi (NEW)
├── firestore.rules ← Security Rules (NEW)
└── firebase-setup-guide.html ← Panduan ini (NEW)

Langkah 1: Buat Project Firebase

Buka Firebase Console
Klik "Add project" → beri nama: dinkes-natuna
Disable Google Analytics (opsional) → klik Create Project
Setelah selesai, klik Continue

Langkah 2: Buat Web App

Di Firebase Console, klik ikon </> (Web)
Beri nama: dinkes-natuna-web
Klik "Register app"
Copy konfigurasi yang diberikan
Tempel ke firebase-config.js → ganti nilai YOUR_*

// Contoh konfigurasi yang sudah terisi:
const FIREBASE_CONFIG = {
  apiKey: "AIzaSyB...",
  authDomain: "dinkes-natuna.firebaseapp.com",
  projectId: "dinkes-natuna",
  storageBucket: "dinkes-natuna.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abc123"
};

Langkah 3: Enable Authentication

Di Firebase Console → Authentication → Get started
Tab Sign-in method → Enable Email/Password
Tab Users → klik "Add user" untuk membuat akun awal:

Role	Email	Password	Catatan
Admin	admin@dinkes.go.id	admin123	Super admin akses penuh
Verifikator	verifikator@dinkes.go.id	verif123	Validasi laporan
User	puskesmas@example.com	user123	Petugas pelapor

⚠️ Setelah membuat akun di Firebase Console, buat document di Firestore collection users dengan ID = UID akun Firebase, dan isi field role dengan salah satu: super_admin, admin, verifikator, user_puskesmas

Langkah 4: Setup Cloud Firestore

Di Firebase Console → Firestore Database → Create database
Pilih "Start in test mode" (untuk development)
Pilih region terdekat: asia-southeast1 (Singapore)
Click Enable

Deploy Security Rules

Buka Firestore Rules → Paste isi dari firestore.rules → Klik Publish

Buat Collections Awal

Berikut collections yang akan digunakan otomatis oleh aplikasi:

Collection	Deskripsi	Otomatis?
`users`	Profil pengguna dengan role	Manual
`puskesmas`	Data profil puskesmas	Otomatis
`programs`	Daftar program kesehatan	Manual
`laporan`	Semua laporan kesehatan	Otomatis
`dokumen_laporan`	Metadata dokumen pendukung	Otomatis
`log_aktivitas`	Audit trail aktivitas	Otomatis
`notifikasi`	Notifikasi ke pengguna	Otomatis
`penyimpanan`	Backup data per kategori	Otomatis

Langkah 5: Enable Firebase Storage

Di Firebase Console → Storage → Get started
Start in test mode → Select region
Deploy Storage Rules (dari firestore.rules bagian Storage)

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /dokumen_laporan/{laporanId}/{fileName} {
      allow read: if request.auth != null;
      allow write: if request.auth != null
        && request.resource.size < 10 * 1024 * 1024
        && request.resource.contentType.matches('image/.*|application/pdf|application/msword|application/vnd.openxmlformats-officedocument.*');
    }
  }
}

Langkah 6: Integrasikan ke preview.html

Tambahkan berikut di <head> preview.html:

<!-- Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-storage-compat.js"></script>

<!-- Firebase Services -->
<script src="firebase-config.js"></script>
<script src="auth-service.js"></script>
<script src="firestore-service.js"></script>
<script src="firebase-bridge.js"></script>

Langkah 7: Modifikasi Login Flow

Ganti fungsi doLogin() di preview.html:

// LAMA (localStorage):
function doLogin() {
  var user = findUser(selectedRole, username);
  if (user && user.password === password) { ... }
}

// BARU (Firebase):
async function doLogin() {
  var email = document.getElementById('loginUsername').value;
  var password = document.getElementById('loginPassword').value;
  
  try {
    var user = await FirebaseBridge.login(email, password);
    var profile = await FirestoreService.getUserProfile(user.uid);
    currentUser = { uid: user.uid, ...profile };
    applyRoleAccess();
  } catch (error) {
    document.getElementById('loginError').textContent = error.message;
  }
}

Alur Data Lengkap

┌─────────────────┐     ┌──────────────────┐     ┌────────────────────┐
│  
  │────▶│   FIRESTORE DB    │◀────│    Super Admin    │
│                  │     │                   │     │                    │
│ 1. Isi laporan   │     │  laporan: {       │     │ 1. Lihat laporan   │
│ 2. Simpan draft  │────▶│    status: draft  │     │ 2. Cek dokumen     │
│ 3. Kirim laporan │────▶│    status: menunggu    │ 3. Verifikasi       │
│ 4. Lihat status  │◀────│    status: terverif│◀───│ 4. Setujui/Tolak   │
│ 5. Perbaiki      │────▶│    status: perlu_  │     │ 5. Minta perbaikan │
│                  │     │    perbaikan       │     │                    │
└─────────────────┘     └──────────────────┘     └────────────────────┘
         │                        │                         │
         ▼                        ▼                         ▼
┌─────────────────┐     ┌──────────────────┐     ┌────────────────────┐
│  NOTIFIKASI      │     │  LOG AKTIVITAS   │     │  DOKUMEN           │
│  - Laporan baru  │     │  - Login          │     │  - Upload file     │
│  - Status update │     │  - Kirim/Cek      │     │  - Validasi file   │
│  - Perlu perbaik │     │  - Verifikasi     │     │  - Status dokumen  │
└─────────────────┘     └──────────────────┘     └────────────────────┘

✅ Yang Sudah Disiapkan

firebase-config.js — Konfigurasi Firebase project
auth-service.js — Otentikasi dengan role management
firestore-service.js — CRUD operations untuk semua collection
firebase-bridge.js — Bridge yang backward-compatible dengan kode existing
firestore.rules — Security Rules lengkap untuk semua collection

⚠️ Yang Perlu Dilakukan

Ganti YOUR_* di firebase-config.js dengan konfigurasi Firebase project Anda
Buat akun pengguna di Firebase Console → Authentication
Buat document users di Firestore untuk setiap akun dengan field role
Deploy Security Rules dari firestore.rules
Modifikasi doLogin() di preview.html untuk menggunakan Firebase Auth
Ganti localStorage calls dengan FirebaseBridge calls

Cara Menambahkan User Baru

Method 1: Firebase Console (Manual)

Authentication → Users → Add user → Email/Password
Copy UID dari user baru
Firestore → Collection users → Add document
Document ID = UID Firebase Auth

Isi fields:

{
  "username": "petugas_ranai",
  "email": "petugas@ranai.go.id",
  "displayName": "Petugas Puskesmas Ranai",
  "role": "user_puskesmas",
  "puskesmas": "Puskesmas Ranai",
  "noHp": "08123456789"
}

Method 2: Dari Aplikasi (Admin)

Menu Pengaturan → Manajemen Akun → Isi form → Klik Daftar

Ini akan otomatis membuat akun di Firebase Auth + document di Firestore

Mapping Role → Menu Akses

Menu	🛡️ Super Admin	🛡️ Admin	✅ Verifikator	👤 User Puskesmas
Dashboard	✅ Ringkasan Kabupaten	✅ Ringkasan Kabupaten	✅ Status Verifikasi	✅ Statistik Internal
Data Umum	✅ Full	✅ Full	✅ Validasi Data	✅ Input Profil
KESGA	✅ Full	✅ Full	✅ Review Laporan	✅ Input Laporan
P2P	✅ Full	✅ Full	✅ Review Laporan	✅ Input Laporan
SDK	✅ Full	✅ Full	✅ Review Laporan	✅ Input Laporan
Yankes	✅ Full	✅ Full	✅ Review Laporan	✅ Input Laporan
✅ Verifikasi	✅ Full	✅ Full	✅ Validasi	❌ Locked
🗃️ Penyimpanan	✅ Backup/Restore	✅ Backup/Restore	✅ Arsip Terverifikasi	✅ Simpan Draft
⚙️ Pengaturan	✅ Full	✅ Full	✅ Notifikasi	✅ Akun Saja