Flutter : Memulai Projek dengan Firebase

Baiklah, pada artikel ini kita akan belajar lebih dalam lagi tentang flutter nih 😌 
Kita akan mencoba menghubungkan projek kita dengan salah satu basis data ( database ) realtime. Apa itu!? Bisa menebak?
Kita akan belajar firebase 😁

Baiklah, pertama dan yang paling utama kita buat projeknya terlebih dahulu yah...
Di artikel ini kami menggunakan contoh nama firebase sebagai nama projek flutternya.

Dengan perintah :

flutter create firebase

Akan muncul dong projek kita 😎


Masuk ke dalam folder tersebut dan buka dengan VS Code, akan kita dapatkan sebuah tampilan yang biasa kita kenal yah untuk inisialisasi awal projek kita :


Sudah fix untuk create project flutternya. Lanjut ke dalam urusan firebasenya, kita buat projek firebase melalui tautan ini ( web firebase ), tampilannya :

Dari laman itu, kita klik tombol Buka Konsole yang ada di sebelah kiri atas. Akan tampil sebuah halaman baru. Dari tampilan tersebut  klik tombol Create Project :




Setelah itu akan muncul halaman untuk mengisikan nama projek kita, di artikel ini kami memberikan nama projeknya dengan nama :

flutter firebase test

Tampak pada gambar dibawah :

Ceklis semua persetujuan yang diajukan oleh firebase ( boleh juga jika berkenan membaca semua dokumen sebelum melakukan ceklis 😂 ). Nampak seperti dibawah kemudian klik tombol Continue :

Aktifkan pilihan "Enable Google Analytics for this project", ikuti seluruh langkah yang ada dalam rangkaian gambar berikut : 




Kemudian klik tombol Create Project, akan menampilkan proses pembuatan projek. Tunggu saja sejenak!


⚠ Ketika muncul pesan gagal, ulangi proses create project sampai berhasil! 


Saat projek berhasil dibuat, muncul nama projek kita di halaman konsol firebase ( tautan ini )

Klik projek kita, akan ada laman baru untuk menentukan projek firebase kita diperuntukkan untuk apa. Karena kita akan membuat projek flutter, maka kita klik ikon Android :



Di bagian ini, kita akan menambahkan beberapa data yang kita ambil di projek flutter. Yaitu data Android package name dan App nickname. Untuk Android package name kita ambil di projek flutter dalam file AndroidManifest.xml
Lokasi file ini ada di :
[ Drive ] \firebase\android\app\src\main\AndroidManifest.xml


Di bagian ini yah, perhatikan baik-baik 😁 
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.firebase">

com.example.firebase inilah yang kita salin kemudian kita tuliskan di bagian Android package name :
Lalu untuk kolom App nickname, boleh diisi dengan nama terserah pada kita masing-masing. Kalau disini, kami mencontohkan dengan nama firstFirebase.
Klik tombol Register app, kemudian akan lanjut ke langkah berikutnya :



Unduh file google-services.json, setelah itu salin atau pindahkan file tersebut ke dalam folder projek flutter kita ( firebase ) di lokasi :
[ Drive ] \firebase\android\app


Selanjutnya kita tambahkan firebase SDK 
🛈 Perhatikan setiap informasi yang tampil pada bagian gambar diatas, sesuaikan dengan yang akan dituliskan nantinya dalam build.gradle


Di projek flutter kita, pertama di file build.gradle yang berada di lokasi :

\firebase\android\

Tambahkan :
classpath 'com.google.gms:google-services:4.3.13'

Sehingga dalam file build.gradle tersebut menjadi :

Kemudian pada file build.gradle yang ada di lokasi :

\firebase\android\app

Kita tambahkan teks :
apply plugin: 'com.google.gms.google-services'

Sehingga dalam file tersebut menjadi :


Setelah sampai sini, coba jalankan projek ini di real device atau di emulator. Pastikan tidak ada pesan error yang muncul. Nah, sampai sini tugas menyambungkan flutter ke firebase selesai gas 😁


Tunggu artikel selanjutnya untuk lebih ke CRUD gaes 😎

Ahmad Istakim

Alumni dari jurusan Manajemen Informatika di Universitas Sains Al-Qur'an (UNSIQ ) Wonosobo. Tertarik dalam bidang pendidikan, teknologi komputasi dan disiplin ilmu keislaman ( Tafsir, Hadits, Arudl, Nahwu-Sharaf, Fiqh maupun Aqidah ) - https://s.id/blog-islamQ. Pernah juga mengenyam pendidikan di beberapa pesantren yang ada di Kab. Wonosobo dan Kab. Purworejo

Posting Komentar

Lebih baru Lebih lama