Lewati ke isi

Modul Pertemuan 2: Menghubungkan Firebase ke Proyek Flutter

🎯 Tujuan Pembelajaran

  1. Siswa mampu menginstal tools pendukung (Firebase CLI & FlutterFire CLI).

  2. Siswa mampu melakukan konfigurasi otomatis antara Flutter dan Firebase.

  3. Siswa mampu melakukan inisialisasi Firebase di dalam kode program main.dart.

1. Persiapan Alat (Tools)

Sebelum kita menghubungkan kode, kita butuh alat bantu agar proses konfigurasi berjalan otomatis.

Pastikan komputer kalian sudah terinstal Node.js (karena Firebase CLI berjalan di atas Node.js).

A. Instalasi Firebase CLI

Buka terminal (CMD/PowerShell/Terminal VS Code), lalu jalankan perintah berikut:

npm install -g firebase-tools

B. Login ke Firebase

Setelah terinstal, kalian harus login agar terminal mengenali akun Google kalian:

firebase login

(Ikuti instruksi di browser yang muncul sampai berhasil login).

C. Instalasi FlutterFire CLI

Alat ini khusus untuk membantu Flutter mengenali proyek Firebase secara otomatis:

dart pub global activate flutterfire_cli

2. Langkah Menghubungkan Proyek (Konfigurasi)

Sekarang kita akan menghubungkan folder proyek Flutter kalian dengan Proyek Firebase yang dibuat di pertemuan 1.

  1. Buka folder proyek Flutter kalian di terminal VS Code.

  2. Jalankan perintah berikut:

flutterfire configure

  1. Pilih nama proyek Firebase kalian (gunakan tombol panah dan Enter).

  2. Pilih platform yang ingin didukung (pilih: android, ios, dan web menggunakan spasi, lalu Enter).

  3. Jika muncul pertanyaan untuk memperbarui firebase_options.dart, pilih Yes.

3. Menambahkan Dependency ke Proyek

Agar Flutter bisa membaca fungsi-fungsi Firebase, kita perlu menambahkan library resmi ke dalam file pubspec.yaml.

Jalankan perintah ini di terminal:

flutter pub add firebase_core

Perintah ini akan otomatis menambahkan baris firebase_core di bawah bagian dependencies pada file pubspec.yaml kalian.

4. Inisialisasi Firebase di main.dart

Langkah terakhir adalah memastikan Firebase "menyala" saat aplikasi pertama kali dijalankan.

Buka file lib/main.dart dan ubah fungsi main() menjadi seperti berikut:

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart'; // Import library
import 'firebase_options.dart'; // Import file yang digenerate otomatis
import 'package:provider/provider.dart';

// ... import lainnya

void main() async {
  // Pastikan binding Flutter sudah siap
  WidgetsFlutterBinding.ensureInitialized();

  // Inisialisasi Firebase
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(const LogbookApp());
}

Pastikan Anda menambahkan kata kunci async dan await karena proses inisialisasi ini membutuhkan waktu beberapa saat.

5. Cek Keberhasilan

Coba jalankan (Run) aplikasi kalian di Emulator atau HP.

Jika aplikasi berhasil terbuka dan tidak muncul pesan error di bagian Debug Console, berarti proyek kalian sudah resmi terhubung dengan Firebase!

Link Dokumentasi Setup: https://firebase.google.com/docs/flutter/setup

6. Persiapan Pertemuan Berikutnya

Pada pertemuan selanjutnya, kita akan mulai membuat sistem keamanan aplikasi yaitu Firebase Authentication.

Kita akan merombak auth_provider.dart agar bisa melakukan login sungguhan menggunakan Email dan Google.

Pastikan koneksi internet kalian stabil untuk pertemuan berikutnya!