SIWARTA

1. Prasyarat & Persiapan Awal

1.1 Akun yang Perlu Disiapkan

1.2 Software yang Perlu Diinstal di Komputer

• Browser modern — Chrome, Edge, atau Firefox versi terbaru.
• Text editor — VS Code, Notepad++, atau bahkan Notepad biasa.
  Untuk pemula, Notepad bawaan Windows sudah cukup. Tapi VS Code jauh lebih nyaman karena ada warna sintaks.
• Node.js (opsional) — hanya jika ingin testing lokal dengan server. Download dari nodejs.org.
• Python (opsional) — alternatif untuk testing lokal. Biasanya sudah terinstal di macOS/Linux.

1.3 File yang Harus Ada

• index.html — file utama aplikasi (sudah Anda punya).
• sw.js — file service worker untuk PWA (akan dibuat di Bagian 6).

2. Setting Firebase

Firebase adalah layanan dari Google yang akan menyimpan seluruh data aplikasi (warga, tagihan, kas, pengaduan, dll). Kita akan menggunakan dua fitur utama:

• Firestore Database — untuk menyimpan data.
• Authentication (Anonymous) — untuk keamanan akses tanpa perlu login manual.

2.1 Buat Project Firebase Baru

Buka browser dan kunjungi:

https://console.firebase.google.com

Login menggunakan akun Google Anda.

1. Klik tombol "Add project" atau "Create a project".
2. Isi nama project, contoh: rt9bc2 atau siwarta-rt.
   Nama project tidak boleh ada spasi. Gunakan huruf kecil, angka, dan tanda hubung saja.
3. Klik Continue.
4. Google Analytics: pilih Disable atau Enable (bebas, tidak mempengaruhi aplikasi).
5. Klik Create project. Tunggu sekitar 30 detik sampai selesai.
6. Klik Continue setelah project siap.

2.2 Aktifkan Firestore Database

Di sidebar kiri Firebase Console, klik:

Build → Firestore Database

1. Klik "Create database".
2. Pilih mode keamanan: pilih "Start in production mode" (kita akan set rules manual di langkah 2.4).
3. Klik Next.
4. Pilih lokasi server: pilih yang terdekat, contoh:
   • asia-southeast1 (Singapore) → Direkomendasikan untuk Indonesia.
   • asia-southeast2 (Jakarta) → jika tersedia, paling cepat untuk pengguna Indonesia.
   ⚠️ PENTING — Lokasi tidak bisa diubah!

   Setelah database dibuat, lokasi server tidak dapat dipindahkan. Pilih dengan hati-hati. Untuk warga Indonesia, Singapore atau Jakarta adalah pilihan terbaik.

5. Klik Enable. Tunggu proses provisioning (1–2 menit).

1. Setelah database siap, klik "Start collection".
2. Collection ID: ketik apps → klik Next.
3. Document ID: ketik rtdigital → klik Next.
4. Tambahkan field pertama (dummy dulu):
   • Field: initialized
   • Type: boolean
   • Value: true
5. Klik Save.

2.3 Aktifkan Authentication (Anonymous)

Build → Authentication

Klik tombol "Get started".

1. Buka tab Sign-in method.
2. Cari "Anonymous" di daftar providers.
3. Klik ikon pensil / Edit.
4. Toggle Enable menjadi ON.
5. Klik Save.

2.4 Set Firestore Security Rules

Masih di Firestore Database, klik tab Rules di bagian atas.

Hapus semua isi default, lalu paste kode di bawah ini:

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

    // Dokumen utama aplikasi
    match /apps/{docId} {
      allow read, write: if request.auth != null;
    }

    // Role user (untuk multi-role: ketua/bendahara/keamanan)
    match /userRoles/{uid} {
      allow read, write: if request.auth != null
                         && request.auth.uid == uid;
    }

    // Default: tolak semua akses lain
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

Klik tombol Publish di kanan atas. Tunggu sampai muncul notifikasi "Rules published".

2.5 Daftarkan Web App & Salin Config

Klik logo Firebase / Project Overview di kiri atas, atau:

Project settings → General

1. Scroll ke bawah ke bagian "Your apps".
2. Klik ikon </> (Web) untuk menambahkan web app.
3. App nickname: ketik SIWARTA Web.
4. Firebase Hosting: JANGAN centang (kita akan hosting di tempat lain).
5. Klik Register app.

Firebase akan menampilkan kode seperti ini — salin dan simpan:

const firebaseConfig = {
  apiKey: "AIzaSyAgH9Zz8ORfIFAmvSahAMOJBJld3_yxK_U",
  authDomain: "rt9bc2.firebaseapp.com",
  projectId: "rt9bc2",
  storageBucket: "rt9bc2.firebasestorage.app",
  messagingSenderId: "480773365990",
  appId: "1:480773365990:web:aa1acf0bbdc43a7c4c9b27"
};

Selesai! Firebase sudah siap.

3. Setting Cloudinary

Cloudinary dipakai untuk menyimpan foto bukti transfer, selfie absen jaga, lampiran pengaduan, dan foto bank sampah. Free tier Cloudinary memberikan 25 GB storage + 25 GB bandwidth/bulan — lebih dari cukup untuk RT.

3.1 Daftar Akun Cloudinary

https://cloudinary.com/users/register_free

• Email: email Anda.
• Password: password kuat.
• What best describes you?: pilih Developer atau Other.
• What do you plan to build?: pilih Web application atau isi bebas.

Klik Create Account. Verifikasi email Anda.

3.2 Dapatkan Cloud Name

Setelah login, Anda akan diarahkan ke Dashboard. Cari bagian "Account Details":

Cloud name:   e0sfugt2
API Key:      123456789012345
API Secret:   xxxxxxxxxxxxxxxxxxxx

3.3 Buat Upload Preset (Unsigned)

Upload Preset adalah "profil" upload yang menentukan folder, format, dan ukuran file yang diizinkan. Kita pakai unsigned preset supaya bisa upload langsung dari browser tanpa perlu signature server-side.

Di sidebar kiri, klik ikon gerigi (⚙️) → Upload.

Atau langsung ke:

https://console.cloudinary.com/settings/upload

Klik "Add upload preset".

Klik Save di kanan atas.

3.4 (Opsional) Buat Folder Default

Folder rt-bukti akan otomatis dibuat saat upload pertama. Tidak perlu dibuat manual.

4. Setting Cloudflare Worker

Cloudflare Worker di sini berfungsi sebagai "penghapus foto otomatis". Aplikasi akan memanggilnya untuk menghapus bukti transfer yang sudah lebih dari 30 hari, agar storage Cloudinary tidak penuh.

4.1 Daftar Akun Cloudflare

https://dash.cloudflare.com/sign-up

Daftar dengan email, verifikasi, lalu login.

4.2 Buat Worker Baru

Di sidebar kiri: Workers & Pages → Create application → Create Worker.

Ketik nama, contoh: rt-cloudinary-delete. Klik Deploy.

Setelah deploy sukses, klik Edit code (atau "Quick edit"). Hapus kode default, ganti dengan kode berikut:

// Cloudflare Worker — Cloudinary Delete Proxy
export default {
  async fetch(request, env, ctx) {
    // CORS headers
    const corsHeaders = {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
    };

    // Preflight
    if (request.method === 'OPTIONS') {
      return new Response(null, { headers: corsHeaders });
    }

    if (request.method !== 'POST') {
      return new Response(
        JSON.stringify({ success: false, error: 'Method not allowed' }),
        { status: 405, headers: { 'Content-Type': 'application/json', ...corsHeaders } }
      );
    }

    try {
      const { publicIds } = await request.json();

      if (!Array.isArray(publicIds) || publicIds.length === 0) {
        return new Response(
          JSON.stringify({ success: false, error: 'publicIds kosong' }),
          { status: 400, headers: { 'Content-Type': 'application/json', ...corsHeaders } }
        );
      }

      const CLOUD_NAME = env.CLOUDINARY_CLOUD_NAME;
      const API_KEY    = env.CLOUDINARY_API_KEY;
      const API_SECRET = env.CLOUDINARY_API_SECRET;

      if (!CLOUD_NAME || !API_KEY || !API_SECRET) {
        return new Response(
          JSON.stringify({ success: false, error: 'Env variable belum diset' }),
          { status: 500, headers: { 'Content-Type': 'application/json', ...corsHeaders } }
        );
      }

      const results = [];

      for (const publicId of publicIds) {
        try {
          const timestamp = Math.floor(Date.now() / 1000);
          const toSign = `public_id=${publicId}×tamp=${timestamp}${API_SECRET}`;
          const signature = await sha1(toSign);

          const formData = new FormData();
          formData.append('public_id', publicId);
          formData.append('api_key', API_KEY);
          formData.append('timestamp', timestamp);
          formData.append('signature', signature);

          const res = await fetch(
            `https://api.cloudinary.com/v1_1/${CLOUD_NAME}/image/destroy`,
            { method: 'POST', body: formData }
          );

          const data = await res.json();
          results.push({ publicId, result: data.result, error: data.error });
        } catch (err) {
          results.push({ publicId, result: 'error', error: err.message });
        }
      }

      const sukses = results.filter(r => r.result === 'ok' || r.result === 'not found').length;

      return new Response(
        JSON.stringify({ success: true, deleted: sukses, total: publicIds.length, results }),
        { headers: { 'Content-Type': 'application/json', ...corsHeaders } }
      );

    } catch (e) {
      return new Response(
        JSON.stringify({ success: false, error: e.message }),
        { status: 500, headers: { 'Content-Type': 'application/json', ...corsHeaders } }
      );
    }
  }
};

// Helper SHA-1
async function sha1(str) {
  const buf = new TextEncoder().encode(str);
  const hash = await crypto.subtle.digest('SHA-1', buf);
  return Array.from(new Uint8Array(hash))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
}

Klik Save and Deploy di kanan atas.

4.3 Set Environment Variables (API Secret Cloudinary)

Di halaman Worker, klik tab Settings → Variables and Secrets.

Klik Add variable tiga kali, isi sebagai berikut (ambil dari Dashboard Cloudinary di Bagian 3.2):

Klik Save and Deploy lagi supaya variable aktif.

4.4 Salin URL Worker

Kembali ke halaman utama Worker. URL akan tampak seperti ini:

https://rt-cloudinary-delete.username.workers.dev

Salin URL ini — akan dipakai di Bagian 5.

4.5 Test Worker (Opsional tapi Direkomendasikan)

Untuk memastikan Worker bekerja, buka Terminal / Command Prompt, jalankan:

curl -X POST https://rt-cloudinary-delete.username.workers.dev ^
  -H "Content-Type: application/json" ^
  -d "{\"publicIds\":[\"dummy-test-id\"]}"

Respons yang benar (meski public_id tidak ada):

{"success":true,"deleted":1,"total":1,"results":[{"publicId":"dummy-test-id","result":"not found"}]}

5. Edit Konfigurasi di index.html

Sekarang saatnya menempelkan konfigurasi dari langkah-langkah sebelumnya ke dalam file index.html.

5.1 Buka index.html di Text Editor

Klik kanan file index.html → Open with → VS Code / Notepad++.

5.2 Cari Bagian firebaseConfig

Gunakan Ctrl+F, cari kata kunci:

firebaseConfig

Anda akan menemukan kode seperti ini di baris ~30:

const firebaseConfig = {
  apiKey: "AIzaSyAgH9Zz8ORfIFAmvSahAMOJBJld3_yxK_U",
  authDomain: "rt9bc2.firebaseapp.com",
  projectId: "rt9bc2",
  storageBucket: "rt9bc2.firebasestorage.app",
  messagingSenderId: "480773365990",
  appId: "1:480773365990:web:aa1acf0bbdc43a7c4c9b27"
};

Ganti semua nilai dengan config dari Firebase Console Anda (yang disalin di Bagian 2.5):

const firebaseConfig = {
  apiKey: "PASTE_API_KEY_ANDA_DI_SINI",
  authDomain: "NAMA_PROJECT.firebaseapp.com",
  projectId: "NAMA_PROJECT",
  storageBucket: "NAMA_PROJECT.firebasestorage.app",
  messagingSenderId: "PASTE_SENDER_ID",
  appId: "PASTE_APP_ID"
};

5.3 Cari Bagian Cloudinary Config

Masih dengan Ctrl+F, cari:

CLOUDINARY_CLOUD_NAME

Anda akan menemukan 3 baris ini (baris ~44):

const CLOUDINARY_CLOUD_NAME = 'e0sfugt2';
const CLOUDINARY_UPLOAD_PRESET = 'rt_bukti';
const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/' + CLOUDINARY_CLOUD_NAME + '/auto/upload';
const CLOUDINARY_DELETE_WORKER_URL = 'https://rt-cloudinary-delete.helmy-bagus-saputra.workers.dev';

Ganti 2 nilai berikut:

const CLOUDINARY_CLOUD_NAME = 'CLOUD_NAME_ANDA';          // ← dari Bagian 3.2
const CLOUDINARY_UPLOAD_PRESET = 'rt_bukti';               // ← JANGAN DIUBAH
const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/' + CLOUDINARY_CLOUD_NAME + '/auto/upload';
const CLOUDINARY_DELETE_WORKER_URL = 'URL_WORKER_ANDA';    // ← dari Bagian 4.4

5.4 Verifikasi Perubahan

Periksa sekali lagi dengan Ctrl+F, cari kata-kata ini, pastikan tidak ada lagi:

• AIzaSyAgH9Zz8ORfIFAmvSahAMOJBJld3_yxK_U (harus sudah diganti)
• rt9bc2 (harus sudah diganti dengan project ID Anda)
• e0sfugt2 (harus sudah diganti dengan Cloud Name Anda)
• rt-cloudinary-delete.helmy-bagus-saputra.workers.dev (harus sudah diganti)

Simpan file dengan Ctrl+S.

6. Buat File sw.js (PWA Offline Mode)

File sw.js membuat aplikasi bisa dibuka saat offline dan di-install ke home screen HP (PWA). Ini opsional, tapi sangat direkomendasikan.

Di folder yang sama dengan index.html, buat file baru bernama:

sw.js

// sw.js — Service Worker SIWARTA PWA
const CACHE_NAME = 'siwarta-v1';
const PRECACHE = [
  './',
  './index.html'
];

// Install: cache aset dasar
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(PRECACHE))
      .catch(err => console.warn('[SW] Precache gagal:', err))
  );
  self.skipWaiting();
});

// Activate: bersihkan cache lama
self.addEventListener('activate', (e) => {
  e.waitUntil(
    caches.keys().then(keys => Promise.all(
      keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k))
    ))
  );
  self.clients.claim();
});

// Fetch: network-first untuk API, cache-first untuk aset statis
self.addEventListener('fetch', (e) => {
  const url = e.request.url;

  // Skip non-GET
  if (e.request.method !== 'GET') return;

  // Skip Firebase, Cloudinary, Google APIs — selalu live
  if (url.includes('firestore') ||
      url.includes('firebase') ||
      url.includes('cloudinary') ||
      url.includes('googleapis') ||
      url.includes('gstatic') ||
      url.includes('workers.dev')) {
    return;
  }

  e.respondWith(
    fetch(e.request)
      .then(res => {
        // Simpan clone ke cache untuk offline
        if (res && res.status === 200) {
          const clone = res.clone();
          caches.open(CACHE_NAME)
            .then(c => c.put(e.request, clone))
            .catch(() => {});
        }
        return res;
      })
      .catch(() => caches.match(e.request).then(cached => cached || caches.match('./index.html')))
  );
});

Ctrl+S. Sekarang folder Anda punya 2 file:

📁 folder-anda/
   ├── index.html
   └── sw.js

7. Testing Lokal Sebelum Hosting

7.1 Jalankan Local Server

Opsi A: Pakai Python (paling mudah)

Buka Terminal / Command Prompt di folder tempat index.html berada:

Windows (Command Prompt):

cd C:\path\ke\folder\anda
python -m http.server 8000

macOS / Linux:

cd /path/ke/folder/anda
python3 -m http.server 8000

Buka browser, akses:

http://localhost:8000

Opsi B: Pakai Node.js

npx serve

Opsi C: Pakai VS Code Extension

Install ekstensi "Live Server" di VS Code. Klik kanan index.html → "Open with Live Server".

7.2 Checklist Testing

• Halaman login muncul dengan judul "SIWARTA".
• Tombol "Daftar Sebagai Warga Baru" bisa diklik.
• Coba daftar warga baru dengan data dummy — harus muncul halaman "Menunggu Persetujuan".
• Buka Developer Tools (F12) → tab Console — pastikan tidak ada error merah.
• Cek tab Network — pastikan ada request ke firestore.googleapis.com yang statusnya 200.
• Di Firebase Console → Firestore → cek apakah data baru muncul.

7.3 Cara Cek Koneksi Firebase

Di Console browser, ketik:

console.log('Firebase ready?', fbReady);
console.log('Project:', firebaseConfig.projectId);

Harus keluar: Firebase ready? true. Kalau false, berarti config Anda salah.

8. Hosting ke Internet

Pilih salah satu dari 4 opsi di bawah. Untuk pemula, saya rekomendasikan Netlify Drop (paling cepat) atau GitHub Pages (paling fleksibel).

Opsi A: Netlify Drop Tercepat 5 Menit

https://app.netlify.com/drop

Seret folder yang berisi index.html dan sw.js ke area upload. Netlify otomatis deploy dalam 10–30 detik.

Setelah deploy, Anda akan dapat URL random seperti:

https://spontaneous-cat-a1b2c3.netlify.app

Klik Site settings → Change site name. Ganti jadi:

https://siwarta-rt09.netlify.app

Opsi B: GitHub Pages Gratis Selamanya

https://github.com/signup

1. Klik ikon + di kanan atas → New repository.
2. Repository name: siwarta-rt
3. Visibility: Public (wajib untuk GitHub Pages gratis).
4. Centang Add a README file.
5. Klik Create repository.

1. Klik Add file → Upload files.
2. Drag index.html dan sw.js ke area upload.
3. Klik Commit changes.

1. Klik tab Settings repository.
2. Di sidebar kiri, klik Pages.
3. Source: pilih Deploy from a branch.
4. Branch: pilih main, folder / (root).
5. Klik Save.
6. Tunggu 1–2 menit. Refresh halaman — akan muncul URL:

https://username-anda.github.io/siwarta-rt/

Opsi C: Vercel Modern & Cepat

https://vercel.com/signup

Klik Add New... → Project → Continue with GitHub (import dari repo GitHub) atau upload folder manual.

Klik Deploy. Tunggu 30 detik. URL akan muncul:

https://siwarta-rt.vercel.app

Opsi D: Firebase Hosting Untuk yang Sudah Pakai Firebase

Buka Terminal / Command Prompt, ketik:

npm install -g firebase-tools

firebase login

Browser akan terbuka. Login dengan akun Google yang dipakai di Firebase.

Masuk ke folder Anda, lalu:

cd path/ke/folder/anda
firebase init hosting

Jawab pertanyaan:

• Please select an option: Use an existing project → pilih project Firebase Anda.
• What do you want to use as your public directory?: ketik . (titik, artinya current folder).
• Configure as a single-page app (rewrite all urls to /index.html)?: No
• Set up automatic builds and deploys with GitHub?: No
• File index.html already exists. Overwrite?: No

firebase deploy

Setelah selesai, URL akan muncul:

https://projectid-anda.web.app
https://projectid-anda.firebaseapp.com

9. Setup Awal Aplikasi (Setelah Online)

Setelah aplikasi online, lakukan langkah-langkah berikut untuk mengisi data awal:

9.1 Login Pertama

1. Buka URL aplikasi Anda.
2. Klik Daftar Sebagai Warga Baru.
3. Isi data:
   • Nama Lengkap: (nama Anda)
   • Nomor Rumah: contoh A-01
   • No. HP: nomor aktif
   • Username: admin atau nama Anda
   • Password: minimal 6 karakter
4. Setelah submit, akan muncul halaman "Menunggu Persetujuan".

9.2 Approve Diri Sendiri via Firebase Console

1. Buka Firebase Console → Firestore Database.
2. Klik collection apps → dokumen rtdigital.
3. Cari field warga (array). Klik untuk expand.
4. Cari entry dengan nama Anda, ubah:
   • status: dari "Pending" → "Aktif"
   • roles: dari ["warga"] → ["warga","ketua","bendahara","keamanan"]
5. Klik Update.
6. Logout dari aplikasi, login ulang dengan akun Anda.
7. Sekarang Anda akan punya akses penuh sebagai Ketua RT.

9.3 Setup Data Master

Login sebagai Ketua RT, lalu isi data berikut secara berurutan:

A. Set Nama & Alamat RT

1. Menu → Pengaturan → Identitas RT → Nama RT.
2. Isi: contoh RT 9 BC 2.
3. Ulangi untuk Alamat / Lokasi RT.

B. Set Rekening Kas (via Bendahara)

Login sebagai Bendahara (atau dari akun Ketua, buka Pengaturan):

1. Pengaturan → Rekening Kas RT.
2. Isi: Nama Bank, Nomor Rekening, Atas Nama.

C. Buat Pos Tagihan

1. Menu → Tagihan → tab Pos.
2. Klik + Tambah Pos.
3. Contoh pos:
   • Iuran Kebersihan — Rp 50.000 — Bulanan
   • Iuran Keamanan — Rp 75.000 — Bulanan
   • Kas RT — Rp 25.000 — Bulanan

D. Tambah Data Warga

1. Menu → Data Warga → + Tambah Warga Baru.
2. Isi data setiap kepala keluarga.
3. Password default akan otomatis dibuat dan ditampilkan — salin dan berikan ke warga.

E. Setting Denda Keamanan (Opsional)

1. Login sebagai Petugas Keamanan → Sesi Keamanan → tab Aturan.
2. Set nominal denda, jam jaga, jumlah orang per sesi.

9.4 Backup Pertama Kali

10. Troubleshooting Masalah Umum

❌ "Firebase belum siap" saat buka aplikasi

Penyebab: Config Firebase salah atau project belum aktif.

Solusi:

1. Buka Console browser (F12) → tab Console, lihat pesan error detail.
2. Cek firebaseConfig di index.html — pastikan tidak ada typo.
3. Pastikan Firestore sudah dibuat & Authentication Anonymous sudah ON.
4. Refresh halaman (Ctrl+Shift+R).

❌ "Auth gagal: permission-denied"

Penyebab: Firestore Rules terlalu ketat, atau Anonymous Auth belum aktif.

Solusi:

1. Cek Firestore Rules — pastikan ada allow read, write: if request.auth != null; untuk apps/{docId}.
2. Cek Authentication → Sign-in method → Anonymous → Enable.
3. Publish rules ulang.

❌ Upload foto gagal: "Cloudinary mengembalikan respons tidak valid"

Penyebab: Preset name salah, atau preset bukan Unsigned.

Solusi:

1. Buka Cloudinary → Settings → Upload → cek preset rt_bukti ada.
2. Klik preset, pastikan Signing Mode = Unsigned.
3. Pastikan CLOUDINARY_CLOUD_NAME di index.html benar.

❌ Worker error 500 "Env variable belum diset"

Penyebab: Env variables di Cloudflare belum tersimpan.

Solusi:

1. Buka Worker → Settings → Variables and Secrets.
2. Pastikan 3 variable ada: CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET.
3. Klik Save and Deploy ulang.

❌ GPS error saat absen jaga

Penyebab: Izin lokasi ditolak, atau dibuka via file://.

Solusi:

1. Pastikan dibuka via https:// atau http://localhost.
2. Izinkan akses lokasi di browser — cek ikon gembok di address bar.
3. Nyalakan GPS di HP (mode High Accuracy).
4. Untuk fallback: aplikasi tetap izinkan absen dengan tombol "Pakai Kode 6 Digit".

❌ Data tidak muncul di HP warga lain

Penyebab: Sinkronisasi Firestore lambat, atau offline.

Solusi:

1. Cek indikator sync di pojok kiri bawah — kalau "Gagal sync", cek koneksi.
2. Tarik ke bawah / refresh halaman.
3. Pastikan semua HP terkoneksi ke internet.
4. Cek Firestore Console — apakah data benar-benar tersimpan di server.

❌ Notifikasi badge tidak hilang setelah dibaca

Penyebab: Cache lokal browser.

Solusi:

1. Klik tombol "Tandai Semua" di sheet notifikasi.
2. Atau clear data browser: Settings → Site data → Clear.

❌ PWA tidak muncul tombol Install

Penyebab: PWA hanya bisa diinstall via HTTPS.

Solusi:

1. Pastikan hosted via HTTPS (Netlify, Vercel, GitHub Pages, Firebase Hosting — semua HTTPS by default).
2. Kalau pakai domain custom, pastikan SSL aktif.
3. Di iOS, install via Safari → Share → "Add to Home Screen" (iOS tidak dukung auto-prompt).

❌ Halaman putih kosong

Penyebab: JavaScript error.

Solusi:

1. F12 → Console → cari error merah. Screenshot dan cari pesan errornya di Google.
2. Error umum: Unexpected token = ada karakter aneh di kode. Copy ulang index.html.
3. fbReady is not defined = file rusak. Redownload.

❌ Data hilang setelah ganti device

Penyebab: Data seharusnya tersimpan di Firestore, bukan lokal.

Solusi:

1. Cek Firestore Console → collection apps → dokumen rtdigital. Kalau kosong, ada masalah autentikasi.
2. Restore dari backup: Pengaturan → Data & Backup → Restore.

📞 Butuh Bantuan Lebih Lanjut?

Kalau masalah Anda tidak ada di daftar di atas:

1. Buka Console browser (F12), screenshot tab Console dan tab Network.
2. Catat: URL apa yang error, kode HTTP berapa, pesan errornya apa.
3. Kirim ke pengembang / forum Firebase Community.