Skip to content

🛠️ Mini Proyek: Firebase & Backend

⭐⭐⭐⭐ · 1–2 hari

Apa yang akan kamu bangun

Papan Pengumuman Komunitas — aplikasi tempat anggota sebuah komunitas memposting pengumuman dan acara, dan anggota lain menanggapinya. Bayangkan papan pengumuman RT, klub lari, atau komunitas kampus: siapa pun yang masuk bisa menempelkan sesuatu, dan yang lain bisa menyatakan "saya ikut" atau sekadar memberi reaksi.

Bagian IV adalah bagian dengan paling banyak bagian bergerak, dan aplikasi ini menyusunnya dalam urutan yang wajar. Pengguna harus masuk dulu, jadi kamu menyentuh autentikasi dan gerbang navigasi reaktif (Bab 28) — termasuk keputusan yang mudah dilupakan: apa yang terjadi pada state aplikasi ketika seseorang keluar akun. Pengumuman adalah dokumen dengan foto opsional, jadi Firestore dan Storage terpakai bersamaan (Bab 29). Reaksi dan RSVP adalah angka yang bisa diubah banyak orang sekaligus — inilah alasan FieldValue.increment() ada, dan alasan kenapa membaca-lalu-menulis adalah bug yang menunggu terjadi.

Notifikasi adalah bagian yang paling sering dikerjakan setengah jalan (Bab 30). Kebanyakan orang berhenti setelah onMessage bekerja, lalu heran kenapa mengetuk notifikasi saat aplikasi tertutup tidak membawa ke mana-mana. Proyek ini secara eksplisit menuntut ketiga keadaan ditangani.

Terakhir, papan pengumuman adalah aplikasi yang wajar dibuka di tempat dengan sinyal buruk — ruang serbaguna, lapangan, basement kantor. Jadi ia harus tetap menampilkan isi terakhir yang pernah dimuat ketika koneksi hilang (Bab 31).

Prasyarat

Selesaikan dulu:

Requirement fungsional

  • Pengguna bisa mendaftar dan masuk dengan email/kata sandi, atau dengan akun Google. Satu di antaranya cukup; keduanya lebih baik.
  • Setiap pengguna punya dokumen profil di Firestore dengan ID yang sama dengan UID-nya, berisi setidaknya nama tampilan.
  • Beranda menampilkan daftar pengumuman terbaru secara waktu nyata — pengumuman yang diposting di satu perangkat muncul di perangkat lain tanpa perlu menyegarkan.
  • Membuat pengumuman: judul, isi, jenis (pengumuman atau acara), dan foto opsional. Untuk jenis acara, tambahkan tanggal pelaksanaan.
  • Anggota lain bisa memberi reaksi pada pengumuman, dan menyatakan hadir/tidak hadir pada acara. Jumlahnya terlihat oleh semua orang.
  • Satu pengguna hanya bisa memberi satu reaksi per pengumuman, dan bisa membatalkannya.
  • Pembuat pengumuman bisa menghapus miliknya sendiri. Orang lain tidak bisa — dan ini ditegakkan di aturan keamanan Firestore, bukan hanya dengan menyembunyikan tombolnya.
  • Menghapus pengumuman juga menghapus fotonya dari Storage.
  • Semua pengguna menerima push notification ketika ada pengumuman baru.
  • Mengetuk notifikasi membuka pengumuman yang bersangkutan — dan ini bekerja dalam tiga keadaan: aplikasi terbuka, di latar belakang, dan tertutup sepenuhnya.
  • Saat perangkat offline, beranda tetap menampilkan pengumuman yang terakhir dimuat, dengan penanda visual bahwa data mungkin tidak mutakhir.

Requirement teknis

  • Seluruh pemanggilan SDK Firebase dibungkus di kelas layanan atau repository. Widget tidak mengimpor cloud_firestore maupun firebase_auth secara langsung.
  • Kode kesalahan Firebase diterjemahkan menjadi pesan berbahasa Indonesia yang bisa ditindaklanjuti pengguna, bukan ditampilkan mentah.
  • Navigasi setelah masuk dan keluar akun memakai gerbang reaktif yang mengawasi authStateChanges() — bukan push manual setelah tombol ditekan.
  • Setiap snapshots() memakai limit(). Tidak ada satu pun langganan yang mengambil seluruh koleksi.
  • Jumlah reaksi dan RSVP diubah dengan FieldValue.increment(), dan waktu pembuatan memakai FieldValue.serverTimestamp().
  • Nama penulis didenormalisasi ke dalam dokumen pengumuman, sehingga menampilkan daftar tidak memicu satu pembacaan tambahan per baris.
  • Aturan keamanan Firestore dan Storage ditulis dan diterapkan, bukan dibiarkan dalam mode uji coba. Sertakan berkas aturannya di dalam proyek.
  • Token FCM disimpan ke dokumen pengguna, diperbarui lewat onTokenRefresh, dan dihapus saat pengguna keluar akun.
  • Handler notifikasi latar belakang adalah fungsi tingkat atas dengan @pragma('vm:entry-point').
  • Foto diperkecil sebelum diunggah, dan jalur di Storage disusun rapi (misalnya pengumuman/<id>/foto.jpg), bukan nama acak di akar bucket.

Checklist penerimaan

  • Dua perangkat (atau perangkat plus emulator) masuk dengan akun berbeda, dan aksi di satu perangkat terlihat di perangkat lain dalam hitungan detik.
  • Menutup aplikasi sepenuhnya, mengirim notifikasi, lalu mengetuknya: aplikasi terbuka langsung di pengumuman yang dimaksud.
  • Mencoba menghapus pengumuman orang lain lewat konsol atau kode langsung ditolak oleh aturan keamanan.
  • Mode pesawat: beranda tetap menampilkan isi, dengan penanda offline yang jelas.
  • Keluar akun lalu masuk dengan akun lain di perangkat yang sama: tidak ada satu pun data pengguna sebelumnya yang masih terlihat.
  • Tidak ada berkas rahasia (google-services.json, kunci layanan) yang ikut ter-commit — lihat Bab 37.

Tantangan ekstra (opsional)

  • Tandai lokasi acara di peta (Bab 32): simpan koordinat sebagai GeoPoint, tampilkan penanda, dan tambahkan penyaring "acara dalam radius sekian kilometer dari saya". Perhatikan bahwa Firestore tidak bisa melakukan kueri jarak — kamu harus memilih salah satu dari tiga pendekatan yang dibahas di bab itu.
  • Tambahkan komentar sebagai subkoleksi. Lalu pastikan menghapus pengumuman juga menghapus subkoleksinya, karena Firestore tidak melakukannya untukmu.
  • Terapkan offline-first penuh dengan antrean operasi lokal, sehingga pengguna bisa memposting saat offline dan kirimannya berangkat sendiri ketika sinyal kembali.
  • Bangun ulang lapisan datanya dengan pola MVVM dari Bab 33, memisahkan entity domain dari DTO Firestore.

Terjebak?

Bagian ini punya paling banyak titik gagal yang tidak menghasilkan pesan error. Notifikasi yang tidak muncul, aturan keamanan yang menolak diam-diam, dan langganan yang tidak pernah aktif semuanya terlihat sama: layar yang tidak berubah. Ketika itu terjadi, buka konsol Firebase dan periksa apakah datanya benar-benar sampai di sana sebelum menyalahkan kode aplikasi. Baca ulang Bab 29 dan Bab 30. Kalau masih macet di satu bagian spesifik, itu wajar: proyek ini memang dirancang untuk memaksamu mengingat kembali konsep yang sudah dibahas, bukan menghafalnya.

Rangkuman pembelajaran pribadi, disusun ulang dari beberapa kursus Flutter.