Pada artikel kali ini saya akan membahas cara menghubungkan aplikasi flutter kita dengan firebase, pada artikel “Cara Membuat Project dan Realtime Database Firebase” kita telah membuat project di firebase console, sekarang kita akan membuat aplikasi di flutter dan menghubungkannya dengan project firebase yang telah kita buat, proses ini tidak terlalu sukar, hal-hal yang dibutuhkan adalah node.js, flutter, dart dan vscode sebagai editornya.
Berikut langkah-langkah menghubungkan flutter dengan firebase
1. Membuat Project Flutter
Pertama-tama kita membuat project flutter di vscode, buka vscodenya lalu buka new terminal kemudian masuk kedalam direktori dimana akan disimpan project flutter kita, saya menaruhnya di direktori D:/flutter lalu kita akan membuat project baru flutter dengan perintah “flutter create firebase_app”, tunggu sampai proses pembuatan project selesai seperti gambar
2. Install the Firebase CLI
Setelah membuat project flutter kita akan menginstall Firebase CLI dengan npm, sebelum itu anda harus login dahulu ke firebase console, kemudian masuk kedalam project kita kemuadian buka new terminal dan ketikan “npm install -g firebase-tools”, tunggu proses instalasinya sampai benar-benar selesai, lalu kita akan coba login ke firebase dengan perintah “firebase login” jika berhasil akan kelihatan email anda sesuai dengan akun firebase google anda, tampak seperti gambar
3. Mengaktifkan dan mengkonfigurasi firebase CLI
kita lanjutkan mengaktifkan dan mengkonfigurasi firebasenya dengan mengetikan “dart pub global activate flutterfire_cli” tunggu prosesnya sampai selesai, setelah itu ketikan perintah “flutterfire configure –project=first-project-48b52” jika muncul tulisan “Which platforms should your configuration support (use arrow keys & space to select)?” pilih atau centang android dan ios yang lainnya jangan dicentang, gunakan tombol space untuk mencentang dan tidak mencentang, setelah selesai memilih lalu tekan enter kemudian jika muncul tulisan “Which Android application id (or package name) do you want to use for this configuration, e.g. ‘com.example.app’?” anda bisa ketik “com.contoh.app” jika semuanya berhasil akan tampak seperti gambar dibawah ini
4. Initialise Firebase and add plug-ins
Jalankan perintah “flutter pub add firebase_core” setelah selesai letakan kode dibawah ini di main.dart dibagian atas
import ‘package:firebase_core/firebase_core.dart’;
import ‘firebase_options.dart’;
letak kode dibawah ini di bagian void main seperti kode dibawah ini
5. Jalankan aplikasi
jalankan aplikasi kita dengan emulator atau handphone kita sendiri, jika berhasil akan muncul seperti gambar dibawah ini.
jika tidak tampil seperti gambar diatas berarti ada yang salah dalam langkah-langkahnya, yang perlu diperhatikan adalah versi dari java, node.js.
yang perlu diperhatikan :
- Folder lib/firebase_options.dart -> setting untuk iosBundleId: sesuai dengan app name kita yaitu “com.contoh.app” jadi kodenya iosBundleId:com.contoh.app
- Folder Android/app/build.gradle ->setting untuk applicationId = “com.contoh.app”
- Folder Android/app/google-services.json -> setting untuk “package_name”: “com.contoh.app”
Demikian tutorial ini semoga bisa memberikan manfaat, terima kasih