Menambahkan Firebase ke aplikasi Flutter

Prasyarat

• Instal editor atau IDE pilihan Anda.

• Instal Flutter untuk sistem operasi Anda, termasuk hal-hal berikut:

  • Flutter SDK
  • Library pendukung
  • Software khusus platform dan SDK

• Login ke Firebase menggunakan akun Google Anda.

Jika belum memiliki aplikasi Flutter, Anda dapat menyelesaikan Get Started: Test Drive untuk membuat aplikasi Flutter baru menggunakan editor atau IDE pilihan Anda.

Langkah 1: Instal alat command line yang diperlukan

1. Instal Firebase CLI jika Anda belum melakukannya.

2. Login ke Firebase menggunakan akun Google Anda dengan menjalankan perintah berikut:

   firebase login
   

3. Instal FlutterFire CLI dengan menjalankan perintah berikut dari direktori mana saja:

   dart pub global activate flutterfire_cli
   

Langkah 2: Konfigurasikan aplikasi Anda untuk menggunakan Firebase

Gunakan FlutterFire CLI untuk mengonfigurasi aplikasi Flutter agar dapat terhubung ke Firebase.

Dari direktori project Flutter Anda, jalankan perintah berikut untuk memulai alur kerja konfigurasi aplikasi:

flutterfire configure

Langkah 3: Lakukan inisialisasi Firebase di aplikasi Anda

1. Dari direktori project Flutter Anda, jalankan perintah berikut untuk menginstal plugin inti:

   flutter pub add firebase_core
   

2. Dari direktori project Flutter Anda, jalankan perintah berikut untuk memastikan bahwa konfigurasi Firebase aplikasi Flutter Anda sudah yang terbaru:

   flutterfire configure
   

3. Dalam file lib/main.dart, impor plugin inti Firebase dan file konfigurasi yang Anda buat sebelumnya:

   import 'package:firebase_core/firebase_core.dart';
   import 'firebase_options.dart';
   

4. Selain itu, di file lib/main.dart, lakukan inisialisasi Firebase menggunakan objek DefaultFirebaseOptions yang diekspor oleh file konfigurasi:

   WidgetsFlutterBinding.ensureInitialized();
   await Firebase.initializeApp(
     options: DefaultFirebaseOptions.currentPlatform,
   );
   runApp(const MyApp());
   

5. Build ulang aplikasi Flutter Anda:

   flutter run
   

Jika lebih suka menggunakan project demo, Anda dapat memulai Firebase Emulator dan dalam file lib/main.dart, lakukan inisialisasi Firebase menggunakan demoProjectId (harus dimulai dengan demo-):

  await Firebase.initializeApp(
    demoProjectId: "demo-project-id",
  );

Langkah 4: Tambahkan plugin Firebase

Anda mengakses Firebase di aplikasi Flutter melalui berbagai plugin Firebase Flutter, satu plugin untuk setiap produk Firebase (misalnya: Cloud Firestore, Authentication, Analytics, dll.).

Karena Flutter adalah framework multi-platform, setiap plugin Firebase berlaku untuk platform Apple, Android, dan web. Jadi, jika Anda menambahkan plugin Firebase ke aplikasi Flutter, plugin tersebut akan digunakan oleh versi Apple, Android, dan web aplikasi Anda.

Berikut cara menambahkan plugin Firebase Flutter:

1. Dari direktori project Flutter Anda, jalankan perintah berikut:

   flutter pub add PLUGIN_NAME

2. Dari direktori project Flutter Anda, jalankan perintah berikut:

   flutterfire configure
   

   Dengan menjalankan perintah ini, Anda dapat memastikan konfigurasi Firebase aplikasi Flutter sudah yang terbaru dan dapat menambahkan plugin Gradle yang diperlukan ke aplikasi Anda untuk Crashlytics dan Performance Monitoring di Android.

3. Setelah selesai, bangun ulang project Flutter Anda:

   flutter run
   

Anda sudah siap! Aplikasi Flutter Anda sudah terdaftar dan dikonfigurasi untuk menggunakan Firebase.

Plugin yang tersedia

^{1 Firebase AI Logic sebelumnya disebut "Vertex AI in Firebase" dengan plugin firebase_vertexai.}

Mencoba aplikasi contoh dengan Analytics

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

1. Buka aplikasi Flutter yang telah Anda konfigurasi untuk menggunakan Firebase (lihat petunjuk di halaman ini).

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

3. Dari repositori contoh program Google Analytics, salin dan tempel dua file berikut ke dalam direktori lib aplikasi Anda:

   • main.dart
   • tabs_page.dart

4. Jalankan aplikasi Flutter Anda.

5. Buka project Firebase aplikasi Anda di Firebaseconsole, lalu klik Analytics di panel navigasi kiri.

   1. Klik Dashboard. Jika Analytics berfungsi dengan baik, dasbor akan menampilkan satu pengguna aktif di panel "Users active in the last 30 minutes" (mungkin perlu waktu untuk mengisi panel ini).

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

Untuk mengetahui informasi selengkapnya tentang cara menyiapkan Analytics, baca panduan memulai untuk iOS+, Android, dan web.

Catatan tentang membangun aplikasi web

Dukungan Jenis Tepercaya

Firebase SDK untuk Flutter mendukung penggunaan Jenis Tepercaya untuk membantu mencegah serangan XSS berbasis DOM (sisi klien). Saat Anda mengaktifkan penerapan Jenis Tepercaya untuk aplikasi Anda, Firebase SDK akan memasukkan skripnya ke dalam DOM menggunakan kebijakan Jenis Tepercaya, yang bernama flutterfire-firebase_core, flutterfire-firebase_auth, dan seterusnya.

Menonaktifkan injeksi otomatis Firebase JavaScript SDK

Secara default, Firebase Flutter SDK memasukkan Firebase JavaScript SDK secara otomatis saat membangun aplikasi untuk web. Jika tidak ingin Firebase JavaScript SDK dimasukkan secara otomatis, Anda dapat melakukan hal berikut:

1. Abaikan skrip injeksi otomatis dengan menambahkan properti berikut di dalam tag <script> dalam file web/index.html di project Flutter Anda:

   <!-- Add this property inside a <script> tag within your "web/index.html" file in your Flutter project -->
   <!-- Put in the names of all the plugins you wish to ignore: -->
   window.flutterfire_ignore_scripts = ['analytics', 'firestore'];
   

2. Muat skrip secara manual menggunakan salah satu alternatif berikut:

   • Tambahkan SDK secara eksplisit ke file web/index.html Anda, di dalam callback window.addEventListener:

       window.addEventListener('load', async function (ev) {
         window.firebase_firestore = await import("https://www.gstatic.com/firebasejs/12.7.0/firebase-firestore.js");
         window.firebase_analytics = await import("https://www.gstatic.com/firebasejs/12.7.0/firebase-analytics.js");
     
         _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
           // rest of the code
     

   • Atau, download kode Firebase JavaScript SDK plugin dari domain "gstatic", dan simpan ke file JavaScript agar dapat disimpan dalam project Anda dan dimuat secara manual:

       // "web/my-analytics.js" & "web/my-firestore.js" file loaded as a script into your "web/index.html" file: 
       window.addEventListener('load', async function (ev) {
         window.firebase_analytics = await import("./my-analytics.js");
         window.firebase_firestore = await import("./my-firestore.js");
     
         _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
           // rest of the code
     

Langkah berikutnya

• Dapatkan pengalaman langsung dengan Firebase Flutter Codelab.

• Bersiaplah untuk meluncurkan aplikasi Anda:

  • Siapkan pemberitahuan anggaran untuk project Anda di konsol Google Cloud.
  • Pantau dasbor Usage and billing di Firebase console untuk mendapatkan gambaran keseluruhan penggunaan project Anda di berbagai layanan Firebase.
  • Periksa checklist peluncuran Firebase.