Tutorial Lengkap: Firebase + Cloudflare Pages
ALUR BIG PICTURE: Admin panel ini = file HTML statis (diupload ke Cloudflare Pages, gratis). Data konten disimpan di Firebase Realtime Database. Aplikasi Android membaca database itu secara realtime — jadi ganti banner/warna/popup di panel → app langsung berubah tanpa update APK.
1
Buat Project Firebase
Buka console.firebase.google.com → Add project → nama bebas (mis. asterlabs) → Analytics boleh skip/disable → Create.
Buka console.firebase.google.com → Add project → nama bebas (mis. asterlabs) → Analytics boleh skip/disable → Create.
2
Aktifkan Realtime Database
Menu kiri: Build → Realtime Database → Create Database → lokasi bebas (singapore recommended) → mode Start in test mode → Enable.
Menu kiri: Build → Realtime Database → Create Database → lokasi bebas (singapore recommended) → mode Start in test mode → Enable.
3
Rules biar app bisa baca/tulis
Tab Rules di Realtime Database → ganti isinya jadi:
Catatan: open rules = siapapun bisa nulis DB-mu. Untuk produksi, batasi:
Tab Rules di Realtime Database → ganti isinya jadi:
{
"rules": {
".read": true,
".write": true
}
}
Klik Publish.Catatan: open rules = siapapun bisa nulis DB-mu. Untuk produksi, batasi:
".write": "auth != null" + login anonim di app, atau set security key sendiri. Kalau mau simple dulu, open rules OK untuk demo.
4
Ambil Config
Project Settings (ikon roda gigi) → General → Your apps → ikon </> (Web) → daftarkan app (nama bebas, tanpa hosting dulu) → muncul blok const firebaseConfig = {...}. Yang dipakai panel: apiKey, authDomain, databaseURL, projectId.
Project Settings (ikon roda gigi) → General → Your apps → ikon </> (Web) → daftarkan app (nama bebas, tanpa hosting dulu) → muncul blok const firebaseConfig = {...}. Yang dipakai panel: apiKey, authDomain, databaseURL, projectId.
5
Connect panel ini ke Firebase
Tab Firebase di atas → paste config (bisa langsung blok JSON lengkap dari Firebase) → Connect. Status header jadi Connected = sukses. Config tersimpan di browser (localStorage).
Tab Firebase di atas → paste config (bisa langsung blok JSON lengkap dari Firebase) → Connect. Status header jadi Connected = sukses. Config tersimpan di browser (localStorage).
6
Isi data awal
Tab Games → Import Katalog → pilih file data/seed-games.json (udah disiapkan, 552 game) → mode Replace → Import. Lalu isi minimal 1 banner, 1 popup, dan set Appearance sesuka hati.
Tab Games → Import Katalog → pilih file data/seed-games.json (udah disiapkan, 552 game) → mode Replace → Import. Lalu isi minimal 1 banner, 1 popup, dan set Appearance sesuka hati.
7
Sambungkan APK ke Firebase
Edit file app-webview/js/firebase-config.js di project Android (folder pg-slot-project) → isi dengan config yang sama → rebuild APK (gradlew assembleDebug) → install. Atau kirimkan config ini ke saya untuk di-bake ke APK berikutnya.
Edit file app-webview/js/firebase-config.js di project Android (folder pg-slot-project) → isi dengan config yang sama → rebuild APK (gradlew assembleDebug) → install. Atau kirimkan config ini ke saya untuk di-bake ke APK berikutnya.
8
Upload Panel ke Cloudflare Pages (gratis)
Cara termudah: buka dash.cloudflare.com → Workers & Pages → Create → Pages → Upload assets → nama project bebas (mis. aster-admin) → drag & drop file index.html ini (satu file doang) → Deploy. Selesai: panel online di aster-admin.pages.dev.
Alternatif: npm i -g wrangler lalu wrangler pages deploy . --project-name=aster-admin dari folder ini.
Buka panel dari HP/laptop mana pun → connect (config tersimpan per-browser sekali saja).
Cara termudah: buka dash.cloudflare.com → Workers & Pages → Create → Pages → Upload assets → nama project bebas (mis. aster-admin) → drag & drop file index.html ini (satu file doang) → Deploy. Selesai: panel online di aster-admin.pages.dev.
Alternatif: npm i -g wrangler lalu wrangler pages deploy . --project-name=aster-admin dari folder ini.
Buka panel dari HP/laptop mana pun → connect (config tersimpan per-browser sekali saja).
9
Hari-hari: kelola konten
• Ganti warna/branding → tab Appearance (langsung live)
• Splash screen depan → tab Loading
• Banner carousel → tab Banners
• Popup welcome/promo → tab Popups (frekuensi di tab Ads)
• Banner iklan bawah → tab Custom Ads
• Aktif/matikan game, ubah URL demo, tandai maintenance → tab Games
• Kill-switch seluruh app → tab App (maintenance mode)
• Backup semua data → Dashboard → Export Semua
• Ganti warna/branding → tab Appearance (langsung live)
• Splash screen depan → tab Loading
• Banner carousel → tab Banners
• Popup welcome/promo → tab Popups (frekuensi di tab Ads)
• Banner iklan bawah → tab Custom Ads
• Aktif/matikan game, ubah URL demo, tandai maintenance → tab Games
• Kill-switch seluruh app → tab App (maintenance mode)
• Backup semua data → Dashboard → Export Semua
10
Upload gambar (banner/popup/logo)?
Firebase RTDB cuma simpan teks — gambar harus online dulu. Pilihan gratis:
• Cloudflare Pages juga: buat project aster-img, upload folder gambar, URL jadi https://aster-img.pages.dev/banner1.png
• atau pakai image host lain (imgbb, postimages) → paste URL-nya di panel.
Firebase RTDB cuma simpan teks — gambar harus online dulu. Pilihan gratis:
• Cloudflare Pages juga: buat project aster-img, upload folder gambar, URL jadi https://aster-img.pages.dev/banner1.png
• atau pakai image host lain (imgbb, postimages) → paste URL-nya di panel.