Buka konsol

Menambahkan Firebase ke aplikasi Flutter

Ikuti panduan ini untuk menambahkan produk Firebase ke aplikasi Flutter.

Langkah 1: Siapkan 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.
  • Siapkan perangkat atau emulator untuk menjalankan aplikasi Anda.

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

Langkah 2: Buat project Firebase

Agar dapat menambahkan Firebase ke aplikasi Flutter, Anda perlu membuat project Firebase untuk terhubung ke aplikasi Android. Buka bagian Memahami Project Firebase untuk mempelajari lebih lanjut project Firebase.

Langkah 3: Konfigurasi 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.

Untuk mendapatkan petunjuk terperinci dalam mengonfigurasi aplikasi Anda, ikuti 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 tengah halaman ringkasan project Firebase console, klik ikon iOS untuk meluncurkan alur kerja penyiapan.

    Jika Anda sudah menambahkan aplikasi ke project Firebase, klik Tambahkan aplikasi untuk menampilkan opsi platform.

  2. Tambahkan aplikasi ke project Firebase Anda:

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

      • Temukan ID paket ini dengan membuka aplikasi Anda di XCode, lalu mengakses tab General di direktori Runner level teratas. Nilai kolom ID Paket adalah ID paket iOS (misalnya, com.yourcompany.yourproject).
    2. (Opsional) Masukkan informasi aplikasi lain seperti yang diminta oleh alur kerja 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. Kembalilah ke alur kerja penyiapan Firebase console, klik Berikutnya untuk melewati langkah-langkah yang tersisa.

  5. Lanjutkan ke Tambahkan plugin FlutterFire.

Mengonfigurasi aplikasi Android

  1. Di tengah halaman ringkasan project Firebase console, klik ikon Android untuk meluncurkan alur kerja penyiapan.

  2. Tambahkan aplikasi ke project Firebase Anda:

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

      • ID aplikasi terkadang disebut sebagai nama paket.

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

    2. (Opsional) Masukkan informasi aplikasi lain seperti yang diminta oleh alur kerja 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 {
      
        repositories {
          // Check that you have the following line (if not, add it):
          google()  // Google's Maven repository
        }
      
        // ...
        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. Dalam file Gradle modul Anda (level aplikasi) (biasanya android/app/build.gradle), tambahkan baris berikut ke bagian paling bawah file.

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

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

  5. Lanjutkan ke Tambahkan plugin FlutterFire.

Langkah 4: Tambahkan 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 produk 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 produk Firebase tertentu.

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

  5. Jalankan aplikasi Anda untuk memverifikasi penginstalan.

Anda sudah siap! Aplikasi Flutter Anda sudah terdaftar dan dikonfigurasi untuk menggunakan 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. Pada 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 informasi lebih lanjut tentang cara mengelola paket dan plugin, baca Menggunakan Paket.

Contoh aplikasi Analytics

Seperti semua paket lainnya, plugin firebase_analytics dilengkapi dengan contoh program.

  1. Buka aplikasi Flutter yang telah Anda konfigurasi untuk menggunakan Firebase.

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

  3. Dari repositori contoh program 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 panel 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 informasi lebih lanjut tentang cara menyiapkan Analytics, baca panduan memulai untuk iOS dan Android.

Selengkapnya tentang Firebase dan Flutter