Tujuan Pembelajaran
- Mengunggah file/gambar ke Firebase Storage.
- Menampilkan gambar dari Storage.
- Menggabungkan Auth, Firestore, dan Storage dalam satu fitur.
- Menerapkan pengamanan akses sederhana berbasis pengguna.
Uraian Materi
Cloud Storage dipakai untuk menyimpan file biner seperti foto profil atau gambar produk. Di Flutter, pengunggahan dilakukan dengan Firebase Storage dan paket image_picker untuk memilih file dari galeri.
Memilih dan Mengunggah Gambar
final picker = ImagePicker();
final file = await picker.pickImage(source: ImageSource.gallery);
final ref = FirebaseStorage.instance
.ref('produk/${file!.name}');
await ref.putFile(File(file.path));
final url = await ref.getDownloadURL();Menyimpan Referensi URL
URL hasil pengunggahan disimpan ke Firestore agar mudah ditampilkan; gambar dimuat ulang melalui Image.network dengan URL tersebut. Menyimpan URL dibanding file membuat akses lebih ringan.
Menggabungkan Seluruh Layanan
Pertemuan ini menyatukan seluruh modul Firebase: pengguna terdaftar (Auth) hanya dapat melihat data miliknya (dipisahkan berdasarkan kolom user ID pada Firestore), foto produk diunggah (Storage), dan datanya tervalidasi (Firestore). Peserta melihat bagaimana layanan saling bekerja.
Batas Keamanan dan Aturan
Pengamanan dasar dijelaskan melalui Firestore Security Rules yang membatasi akses baca/tulis sesuai kondisi, misal hanya pemilik data yang boleh mengubah dokumennya. Peserta diperkenalkan konsep aturan tanpa mendalami konfigurasi menyeluruh.
Memilih Gambar dari Sumber yang Tepat
image_picker memungkinkan memilih gambar dari galeri atau kamera tergantung ImageSource yang dipilih. Izin akses pada perangkat diatur sesuai kebutuhan aplikasi. Peserta menyesuaikan pilihan dengan konteks fitur, misal kamera untuk foto profil langsung.
Menangani Proses Unggah
Pengunggahan memerlukan waktu dan harus menampilkan umpan balik, misal indikator progres. Kegagalan seperti ukuran file terlalu besar atau jaringan terputus ditangani agar pengguna dapat mencoba kembali. Pola ini menjaga pengalaman tetap baik.
Menyimpan URL untuk Penggunaan Selanjutnya
Menyimpan URL hasil unggahan di Firestore membuat data gambar mudah dilampirkan pada dokumen pengguna atau produk. Gambar kemudian dimuat lewat Image.network. Strategi ini sederhana namun efektif untuk aplikasi berbasis media.
Menutup Modul Firebase
Dengan terintegrasinya autentikasi, penyimpanan data, dan media, peserta menguasai tiga pilar Firebase yang umum. Pemahaman ini melengkapi kemampuan membangun aplikasi yang tidak hanya menyimpan data lokal, tetapi juga berbagi data antar perangkat melalui layanan cloud.
Aktivitas Pembelajaran
- Memilih gambar dengan image_picker.
- Mengunggah gambar ke Firebase Storage.
- Menyimpan dan menampilkan URL gambar.
- Mengintegrasikan Auth, Firestore, dan Storage dalam satu fitur.
Tugas dan Latihan
- Tambah fitur foto profil pengguna (pilih, unggah, tampilkan).
- Simpan URL foto ke dokumen Firestore pengguna.
- Batasi tampilan data sesuai pengguna yang login (konsep rules).
Evaluasi
Evaluasi dilakukan melalui pengamatan hasil praktikum, kuis singkat di akhir pertemuan, dan pemantauan proyek. Peserta yang belum mencapai indikator tertentu diberikan remedial melalui bimbingan ulang dan latihan tambahan pada pertemuan berikutnya.
Panduan umum praktik, catatan belajar, dan refleksi tersedia di Panduan Belajar Kribbi Study.