#1 Flutter & Firebase Tutorial: Langkah Pertama Menghubungkan Projek Flutter dengan Firebase Services Lengkap dengan Gambar

Galang Aji Susanto
4 min readDec 5, 2020

--

Photo by il vano on Unsplash

Hello sobat…

Bagaimana kabarnya nih? Jadi pada story kali ini, saya tuliskan di minggu pertama bulan Desember. Tidak terasa kita 31 hari lagi akan berganti tahun :) Seperti baru kemaren bulan Maret ehh tahu-tahu sudah diujung tahun :D Tapi tidak papa ya dengan semua cobaan yang ada kita harus tetap optimis dan saya yakin kita pasti bisa. Semangat !

Pada penulisan story medium kali ini saya akan membungkusnya kedalam beberapa bagian yang bertemakan sama yaitu hubungan antara flutter dan firebase. Wahh ada apa dengan hubungan mereka berdua ? :D Yang pasti keduanya merupakan teknologi yang banyak digunakan saat ini. Firebase dengan kelengkapan servicenya yang sangat membantu developer dalam membuat aplikasi kaya fitur dengan cepat. Flutter dengan kemampuan multi platformnya membuat developer mudah memanage projek dengan single code base.

Pada bagian awal ini saya akan memulai dari yang paling dasar yaitu menghubungkan antara flutter projek dan firebase. Tanpa basa-basi lagi, Let’s get started!

Membuat Projek Baru pada Firebase Console

1. Langkah pertama yang harus kita lakukan adalah membuat akun di Firebase terlebih dahulu.

2. Setelah itu, Buka konsol pada firebase dan buat sebuah projek baru.

Gambar 1. Halaman firebase console

3. Masukan nama projek yang anda inginkan dan klik button lanjutkan.

Gambar 2. Page masukan nama projek

4. Aktifkan google analytic dan klik button lanjutkan.

Gambar 3. Page aktifkan google analytic

5. Pilih konfigurasi default google analytic dan klik button buat projek.

Gambar 4. Page konfigurasi google analytics

6. Tunggu sampai pembuatan projek selesai, setelah muncul keterangan projek sudah siap kemudian klik button lanjutkan.

Gambar 5. Page keterangan projek telah siap

And well done!

Sekarang anda telah bisa membuat projek baru pada firebase console. Langkah selanjutnya, kita akan menghubungkan aplikasi pada projek tersebut. Kita mulai dengan menghubungkan aplikasi android terlebih dahulu. Ohh ya, sebelum menuju langkah berikutnya pastikan sobat telah membuat projek flutter yang akan dihubungkan dengan firebasenya ya.

Lanjuttt!

Membuat Aplikasi Android Pada Projek Firebase

1. Klik button icon android untuk menghubungkan aplikasi android dengan projek flutter kita.

Gambar 6. Page menambahkan aplikasi

2. Masukan package name aplikasi anda dan klik button daftarkan aplikasi.

Gambar 7. Page daftarkan aplikasi

Pada projek flutter untuk mengetahui package name android, kita bisa melihatnya informasi package pada file AndroidManifest.xml. File tersebut terdapat pada folder android -> app -> src -> main -> AndroidManifest.xml

3. Download file google-services.json dan copy paste pada folder android -> app

Gambar 8. Page download google-services.json

4. Tambahkan plugin google service pada file build.gradle projek android.

Pada folder android -> build.gradle. Tambahkan classpath google services pada dependecies.

dependencies {
classpath 'com.android.tools.build:gradle:3.5.0'
classpath 'com.google.gms:google-services:4.3.4'
classpath "org.jetbrains.kotlin:kotlin-gradle plugin:$kotlin_version"
}

Pada folder android -> app -> build.gradle. tambahkan apply plugin google services.

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'com.google.gms.google-services'

5. Finnaly, klik button lanjutkan ke konsole.

Gambar 9. Page lanjutkan ke konsole

Akhirnya kita telah selesai menghubungkan projek flutter android dengan firebase. Untuk memastikan projek terhubung anda bisa menjalankan aplikasi tersebut pada real device atau emulator dan pastikan tidak ada error saat projek dijalankan.

Terimakasih telah membaca story saya ini. Pada kesempatan selanjutnya saya akan membahas lebih dalam mengenai apa saja fitur yang terdapat di firebase dan bagaimana cara menggunakannya di projek flutter. Banyak hal yang bisa diulas lebih dalam dari sana seperti penerapan firebase dynamic link, crashlytic, cloud messaging, realtime database dan masih banyak lagi.

Jangan lupa tinggalkan jejak kalian ya hehe. Semoga bermanfaat ;) sampai jumpa pada story saya berikutnya.

Happy learning !

--

--

Galang Aji Susanto

iOS Developer | Apple Developer Academy Graduate | Mobile Tech Enthusiast | Full Time Learner & Part Time Coder