Menambahkan Firebase ke aplikasi Flutter

Ikuti panduan ini untuk menambahkan layanan Firebase ke aplikasi Flutter.

Langkah 1: Menyiapkan lingkungan Anda

  • Instal Flutter sesuai sistem operasi spesifik Anda, yang mencakup penginstalan:

    • Flutter SDK
    • Library pendukung
    • Software khusus platform dan SDK
  • Instal editor atau IDE pilihan Anda, seperti Android Studio, IntelliJ, Xcode, atau VS Code.

  • Buka aplikasi Flutter di editor atau IDE pilihan Anda.

    • Pengembangan iOS — Aplikasi harus menargetkan iOS 8 atau yang lebih baru.
    • Pengembangan Android — Aplikasi harus menargetkan API level 16 (Jelly Bean) atau yang lebih baru.
  • Akses perangkat atau emulator untuk menjalankan aplikasi Anda.

    • Pengembangan Android — Emulator harus menggunakan gambar emulator dengan Google Play.
  • Login ke Firebase menggunakan akun Google Anda.

Langkah 2: Membuat project Firebase

Sebelum dapat menambahkan Firebase ke aplikasi Flutter, buat project Firebase untuk terhubung ke aplikasi Flutter Anda.

Untuk membuat project Firebase:

  1. Buka Firebase console.

  2. Klik Tambahkan project, lalu pilih atau masukkan Nama project.

    • Jika Anda memiliki project Google yang terkait dengan aplikasi Anda, pilih project tersebut dari menu dropdown Nama project.
    • Jika Anda belum memiliki project Google, masukkan Nama project baru.
  3. (Opsional) Edit Project ID.

    Firebase menetapkan ID unik ke project Firebase Anda secara otomatis. ID ini ditampilkan di layanan Firebase yang tersedia untuk publik, misalnya:

    • URL Realtime Database default — your-project-id.firebaseio.com
    • Nama bucket Cloud Storage default — your-project-id.appspot.com
    • Subdomain Hosting default — your-project-id.firebaseapp.com
  4. Ikuti langkah-langkah penyiapan yang tersisa di Firebase console, lalu klik Buat project (atau Tambahkan Firebase, jika Anda menggunakan project Google yang sudah ada).

Firebase menyediakan resource untuk project Firebase Anda secara otomatis. Proses ini biasanya perlu waktu beberapa menit. Setelah selesai, Anda akan dibawa ke halaman ringkasan untuk project Firebase Anda di Firebase console.

Langkah 3: Mengonfigurasi aplikasi Anda untuk menggunakan Firebase

Anda dapat mengonfigurasi satu atau beberapa aplikasi untuk terhubung dengan project Firebase Anda. Untuk melakukannya, daftarkan ID khusus platform aplikasi dengan project Firebase Anda. Firebase akan secara otomatis membuat file konfigurasi untuk aplikasi Anda.

Guna mengetahui petunjuk terperinci untuk mengonfigurasi aplikasi Anda, baca langkah-langkah khusus platform di bawah untuk iOS dan Android.

Di direktori tingkat teratas aplikasi Flutter, direktori ios dan android memiliki file konfigurasi khusus platform untuk iOS dan Android.

Mengonfigurasi aplikasi iOS

  1. Di halaman ringkasan project Firebase, buka wizard penyiapan untuk iOS.

  2. Tambahkan aplikasi ke project Firebase Anda:

    1. Masukkan ID paket aplikasi di kolom ID paket iOS.

      • Temukan ID paket ini dengan membuka aplikasi di XCode, lalu mengakses tab Umum di direktori Runner tingkat atas. Nilai kolom ID Paket adalah ID paket iOS (misalnya, com.yourcompany.yourproject).
    2. (Opsional) Masukkan informasi aplikasi lain seperti yang diminta oleh wizard penyiapan.

    3. Klik Daftarkan aplikasi.

  3. Tambahkan file konfigurasi iOS Firebase ke aplikasi Anda:

    1. Klik Download GoogleService-Info.plist untuk mendapatkan file konfigurasi iOS Firebase Anda (GoogleService-Info.plist).

      Anda dapat mendownload file konfigurasi iOS Firebase lagi kapan saja.

    2. Pindahkan file ke direktori Runner/Runner aplikasi Flutter Anda.

  4. Kembali ke wizard penyiapan Firebase console, klik Berikutnya untuk melewati langkah-langkah yang tersisa.

  5. Lanjutkan ke Tambahkan plugin FlutterFire.

Mengonfigurasi aplikasi Android

  1. Di halaman ringkasan project Firebase, buka wizard penyiapan untuk Android.

  2. Tambahkan aplikasi ke project Firebase Anda:

    1. Masukkan ID aplikasi aplikasi Anda di kolom Nama paket Android.

      • ID aplikasi terkadang disebut sebagai nama paket.

      • Temukan ID aplikasi ini dalam file Gradle (tingkat aplikasi) modul Anda, biasanya android/app/build.gradle (contoh ID aplikasi: com.yourcompany.yourproject).

    2. (Opsional) Masukkan informasi aplikasi lain seperti yang diminta oleh wizard penyiapan.

    3. Klik Daftarkan aplikasi.

  3. Tambahkan file konfigurasi Android Firebase ke aplikasi Anda:

    1. Klik Download google-services.json untuk mendapatkan file konfigurasi Android Firebase Anda (google-services.json).

      Anda dapat mendownload file konfigurasi Android Firebase lagi kapan saja.

    2. Pindahkan file konfigurasi ke direktori android/app aplikasi Flutter Anda.

  4. Untuk mengaktifkan layanan Firebase di aplikasi Android, tambahkan plugin google-services ke file Gradle Anda.

    1. Di file Gradle tingkat root (tingkat project) (android/build.gradle), tambahkan aturan untuk menyertakan plugin Layanan Google. Pastikan Anda juga memiliki repositori Maven Google.

      buildscript {
        // ...
        dependencies {
          // ...
          // Add the following line:
          classpath 'com.google.gms:google-services:3.2.1'  // Google Services plugin
        }
      }
      allprojects {
        // ...
        repositories {
          // Check that you have following line (if not, add it):
          google()  // Google's Maven repository
          // ...
        }
      }
      
    2. Di file Gradle (tingkat aplikasi) modul Anda (biasanya android/app/build.gradle), tambahkan baris berikut ke bagian bawah file.

      dependencies {
        // ...
      }
      
      // ...
      
      // Add the following line to the bottom of the file:
      apply plugin: 'com.google.gms.google-services'  // Gradle plugin
      
    3. Jalankan flutter packages get.

      Untuk mengetahui informasi lebih lanjut tentang cara mengelola paket dan plugin, baca Menggunakan Paket.

  5. Lanjutkan ke Tambahkan plugin FlutterFire.

Langkah 4: Menambahkan plugin FlutterFire

Flutter menggunakan plugin untuk menyediakan akses ke berbagai layanan khusus platform, seperti Firebase API. Plugin menyertakan kode khusus platform untuk mengakses layanan dan API di setiap platform.

Firebase diakses melalui sejumlah library berbeda, satu untuk setiap layanan Firebase (misalnya: Database, Authentication, Analytics, atau Storage). Flutter menyediakan serangkaian plugin Firebase, yang secara kolektif disebut FlutterFire.

Karena Flutter adalah SDK multi-platform, setiap plugin FlutterFire dapat diterapkan untuk iOS dan Android. Jadi, jika Anda menambahkan plugin FlutterFire ke aplikasi Flutter, plugin tersebut akan digunakan oleh versi iOS dan Android dari aplikasi Firebase Anda.

Pastikan untuk memeriksa dokumen FlutterFire untuk melihat daftar terbaru plugin FlutterFire.

  1. Pastikan aplikasi saat ini tidak berjalan di emulator atau perangkat Anda.

  2. Dari direktori root aplikasi Flutter, buka file pubspec.yaml.

  3. Tambahkan plugin FlutterFire untuk Firebase Core SDK.

    dependencies:
      flutter:
        sdk: flutter
      firebase_core: ^0.2.5  # add dependency for Firebase Core
    
  4. Tambahkan plugin FlutterFire tambahan untuk menggunakan layanan Firebase tertentu.

    Bagian berikut, Menambahkan Analytics, adalah contoh cara menambahkan plugin FlutterFire ke aplikasi Anda.

  5. Jalankan aplikasi Anda untuk memverifikasi penginstalan.

Aplikasi Flutter Anda sekarang telah terhubung ke Firebase.

Menambahkan Analytics (opsional)

Menambahkan Google Analytics for Firebase ke aplikasi Flutter bersifat opsional, tetapi itu adalah cara yang relatif mudah untuk memverifikasi bahwa Firebase berfungsi dengan baik dengan Flutter. Selain itu, Analytics dapat sangat berguna selama pengembangan dan proses debug, serta membantu melacak keberhasilan aplikasi produksi Anda.

  1. Pastikan aplikasi saat ini tidak berjalan di emulator atau perangkat Anda.

  2. Di file pubspec.yaml, tambahkan plugin FlutterFire untuk Google Analytics for Firebase:

    dependencies:
      flutter:
        sdk: flutter
      firebase_core: ^0.2.5       # This dependency was added during initial configuration.
      firebase_analytics: ^1.0.4  # add dependency for Google Analytics for Firebase
    
  3. Jalankan flutter packages get.

    Untuk mengetahui informasi lebih lanjut tentang cara mengelola paket dan plugin, baca Menggunakan Paket.

Contoh aplikasi Analytics

Seperti paket lainnya, plugin firebase_analytics disertai program contoh.

  1. Buka aplikasi Flutter yang telah Anda [konfigurasi untuk menggunakan Firebase] (#configure_to_use_firebase).

  2. Akses direktori lib aplikasi, lalu hapus file main.dart yang sudah ada.

  3. Dari repositori program contoh Google Analytics for Firebase, copy-paste dua file berikut ke direktori lib aplikasi Anda:

    • main.dart
    • tabs_page.dart
  4. Jalankan aplikasi Flutter Anda.

  5. Buka project Firebase aplikasi Anda di Firebase console, lalu klik Analytics di sebelah kiri.

    • Klik Dasbor. Jika Analytics berfungsi dengan baik, dasbor akan menampilkan pengguna aktif di panel "Pengguna aktif dalam 30 menit terakhir" (mungkin perlu waktu untuk mengisi panel ini).

    • Klik DebugView. Aktifkan fitur untuk melihat semua peristiwa yang dihasilkan oleh program contoh.

Untuk mengetahui informasi lebih lanjut tentang cara menyiapkan Analytics, baca panduan memulai untuk iOS dan Android.

Info lebih lanjut tentang Firebase dan Flutter

Kirim masukan tentang...

Butuh bantuan? Kunjungi halaman dukungan kami.