1. Sebelum memulai
Dalam codelab ini, Anda akan mempelajari cara menggunakan Firebase Emulator Suite dengan Flutter selama pengembangan lokal. Anda akan mempelajari cara menggunakan autentikasi email dan sandi melalui Emulator Suite, serta cara membaca dan menulis data ke emulator Firestore. Terakhir, Anda akan bekerja dengan mengimpor dan mengekspor data dari emulator, untuk menggunakan data palsu yang sama setiap kali Anda kembali ke pengembangan.
Prasyarat
Codelab ini mengasumsikan bahwa Anda memiliki pengalaman menggunakan Flutter. Jika tidak, sebaiknya pelajari dasar-dasarnya terlebih dahulu. Link berikut akan membantu:
- Ikuti Tur Framework Widget Flutter
- Coba ikuti codelab Menulis Aplikasi Flutter Pertama Anda, bagian 1
Anda juga seharusnya memiliki beberapa pengalaman Firebase, tetapi tidak apa-apa jika Anda belum pernah menambahkan Firebase ke project Flutter. Jika Anda tidak terbiasa dengan Firebase console, atau Anda benar-benar baru mengenal Firebase, lihat link berikut terlebih dahulu:
Yang akan Anda buat
Codelab ini memandu Anda dalam membangun aplikasi Penjurnalan sederhana. Aplikasi akan memiliki layar masuk dan layar yang memungkinkan Anda membaca entri jurnal sebelumnya dan membuat yang baru.
Yang akan Anda pelajari
Anda akan mempelajari cara mulai menggunakan Firebase, dan cara mengintegrasikan serta menggunakan rangkaian Firebase Emulator ke dalam alur kerja pengembangan Flutter Anda. Topik Firebase berikut akan dibahas:
Perhatikan bahwa topik ini tercakup selama diperlukan untuk mencakup Firebase Emulator Suite. Codelab ini berfokus pada penambahan project Firebase ke aplikasi Flutter, dan pengembangan menggunakan Firebase Emulator Suite. Tidak akan ada diskusi mendalam tentang Firebase Authentication atau Firestore. Jika Anda belum memahami topik ini, sebaiknya mulai dengan codelab Mengenal Firebase untuk Flutter.
Yang Anda butuhkan
- Pengetahuan tentang Flutter, dan SDK yang diinstal
- Editor teks Intellij JetBrains atau VS Code
- Browser Google Chrome (atau target pengembangan pilihan Anda lainnya untuk Flutter. Beberapa perintah terminal dalam codelab ini akan mengasumsikan bahwa Anda menjalankan aplikasi di Chrome)
2. Membuat dan menyiapkan project Firebase
Tugas pertama yang harus Anda selesaikan adalah membuat project Firebase di konsol web Firebase. Sebagian besar codelab ini akan berfokus pada Emulator Suite, yang menggunakan UI yang berjalan secara lokal, tetapi Anda harus menyiapkan project Firebase lengkap terlebih dahulu.
Membuat project Firebase
- Login ke Firebase console.
- Di Firebase console, klik Tambahkan Project (atau Buat project), lalu masukkan nama untuk project Firebase Anda (misalnya, "Firebase-Flutter-Codelab").
- Klik opsi pembuatan project. Setujui persyaratan Firebase jika diminta. Lewati penyiapan Google Analytics, karena Anda tidak akan menggunakan Analytics untuk aplikasi ini.
Untuk mempelajari project Firebase lebih lanjut, lihat Memahami project Firebase.
Aplikasi yang Anda bangun menggunakan dua produk Firebase yang tersedia untuk aplikasi Flutter:
- Firebase Authentication untuk mengizinkan pengguna login ke aplikasi Anda.
- Cloud Firestore untuk menyimpan data terstruktur di cloud dan menerima notifikasi instan saat data berubah.
Kedua produk ini memerlukan konfigurasi khusus atau perlu diaktifkan menggunakan Firebase console.
Aktifkan Cloud Firestore
Aplikasi Flutter menggunakan Cloud Firestore untuk menyimpan entri jurnal.
Aktifkan Cloud Firestore:
- Di bagian Build Firebase console, klik Cloud Firestore.
- Klik Create database.
- Pilih opsi Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan. Mode pengujian memastikan bahwa Anda dapat menulis ke database dengan bebas selama pengembangan. Klik Next.
- Pilih lokasi untuk database Anda (Anda cukup menggunakan default). Perhatikan bahwa lokasi ini tidak dapat diubah nanti.
- Klik Enable.
3. Menyiapkan aplikasi Flutter
Anda harus mendownload kode awal dan menginstal Firebase CLI sebelum memulai.
Mendapatkan kode awal
Clone repositori GitHub dari command line:
git clone https://github.com/flutter/codelabs.git flutter-codelabs
Atau, jika Anda sudah menginstal alat cli GitHub:
gh repo clone flutter/codelabs flutter-codelabs
Kode contoh harus di-clone ke direktori flutter-codelabs, yang berisi kode untuk kumpulan codelab. Kode untuk codelab ini ada di flutter-codelabs/firebase-emulator-suite.
Struktur direktori di bagian flutter-codelabs/firebase-emulator-suite adalah dua project Flutter. Salah satunya disebut complete, yang dapat Anda rujuk jika ingin melewatinya, atau melakukan referensi silang pada kode Anda sendiri. Project lainnya disebut start.
Kode yang ingin Anda gunakan untuk memulai ada di direktori flutter-codelabs/firebase-emulator-suite/start. Buka atau impor direktori itu ke IDE pilihan Anda.
cd flutter-codelabs/firebase-emulator-suite/start
Instal Firebase CLI
Firebase CLI menyediakan alat untuk mengelola project Firebase Anda. CLI diperlukan untuk menggunakan Emulator Suite, jadi Anda harus menginstalnya.
Ada berbagai cara untuk menginstal CLI. Cara paling sederhana, jika Anda menggunakan MacOS atau Linux, adalah dengan menjalankan perintah ini dari terminal Anda:
curl -sL https://firebase.tools | bash
Setelah menginstal CLI, Anda harus melakukan autentikasi dengan Firebase.
- Login ke Firebase menggunakan akun Google Anda dengan menjalankan perintah berikut:
firebase login
- Perintah ini menghubungkan komputer lokal Anda ke Firebase dan memberikan akses ke project Firebase Anda.
- Uji apakah CLI sudah diinstal dengan benar dan memiliki akses ke akun Anda dengan mencantumkan project Firebase Anda. Jalankan perintah berikut:
firebase projects:list
- Daftar yang ditampilkan harus sama dengan project Firebase yang tercantum di Firebase console. Anda akan melihat setidaknya firebase-flutter-codelab.
Menginstal FlutterFire CLI
FlutterFire CLI dibuat berdasarkan Firebase CLI, dan memudahkan integrasi project Firebase dengan aplikasi Flutter Anda.
Pertama, instal CLI:
dart pub global activate flutterfire_cli
Pastikan CLI sudah diinstal. Jalankan perintah berikut dalam direktori project Flutter dan pastikan CLI menampilkan menu bantuan.
flutterfire --help
Menggunakan Firebase CLI dan FlutterFire CLI untuk menambahkan project Firebase Anda ke aplikasi Flutter Anda
Setelah menginstal dua CLI, Anda dapat menyiapkan masing-masing produk Firebase (seperti Firestore), mendownload emulator, dan menambahkan Firebase ke aplikasi Flutter hanya dengan beberapa perintah terminal.
Pertama, selesaikan penyiapan Firebase dengan menjalankan perintah berikut:
firebase init
Perintah ini akan memandu Anda melalui serangkaian pertanyaan yang diperlukan untuk menyiapkan proyek. Screenshot ini menunjukkan alurnya:
- Saat diminta memilih fitur, pilih "Firestore" dan "Emulator". (Tidak ada opsi Authentication, karena opsi ini tidak menggunakan konfigurasi yang dapat diubah dari file project Flutter Anda.)
- Berikutnya, pilih "Use an existing project", saat diminta.
- Sekarang, pilih project yang Anda buat pada langkah sebelumnya: flutter-firebase-codelab.
- Selanjutnya, Anda akan ditanyai serangkaian pertanyaan tentang penamaan {i>file<i} yang akan dihasilkan. Sebaiknya tekan "enter" untuk setiap pertanyaan guna memilih default.
- Terakhir, Anda harus mengonfigurasi emulator. Pilih Firestore dan Authentication dari daftar, lalu tekan "Enter" ke setiap pertanyaan tentang port tertentu yang akan digunakan untuk setiap emulator. Anda harus memilih default, Yes, saat ditanya apakah ingin menggunakan UI Emulator.
Di akhir proses, Anda akan melihat output yang terlihat seperti screenshot berikut.
Penting: Output Anda mungkin sedikit berbeda dari milik saya, seperti yang terlihat pada screenshot di bawah, karena pertanyaan terakhir akan ditetapkan secara default ke "Tidak" jika Anda sudah mendownload emulatornya.
Mengonfigurasi FlutterFire
Selanjutnya, Anda dapat menggunakan FlutterFire untuk menghasilkan kode Dart yang diperlukan untuk menggunakan Firebase di aplikasi Flutter Anda.
flutterfire configure
Saat perintah ini dijalankan, Anda akan diminta untuk memilih project Firebase yang ingin digunakan, dan platform yang ingin disiapkan. Dalam codelab ini, contoh-contoh tersebut menggunakan Web Flutter, tetapi Anda dapat menyiapkan project Firebase untuk menggunakan semua opsi.
Screenshot berikut menampilkan perintah yang harus Anda jawab.
Screenshot ini menampilkan output di akhir proses. Jika terbiasa dengan Firebase, Anda akan melihat bahwa Anda tidak perlu membuat aplikasi di konsol, dan FlutterFire CLI melakukannya untuk Anda.
Menambahkan paket Firebase ke aplikasi Flutter
Langkah penyiapan terakhir adalah menambahkan paket Firebase yang relevan ke project Flutter Anda. Di terminal, pastikan Anda berada di root project Flutter di flutter-codelabs/firebase-emulator-suite/start. Kemudian, jalankan tiga perintah berikut:
flutter pub add firebase_core
flutter pub add firebase_auth
flutter pub add cloud_firestore
Ini adalah satu-satunya paket yang akan Anda gunakan di aplikasi ini.
4. Mengaktifkan emulator Firebase
Sejauh ini, aplikasi Flutter dan project Firebase Anda disiapkan agar dapat menggunakan emulator, tetapi Anda masih harus memberi tahu kode Flutter untuk mengubah rute permintaan Firebase yang keluar ke port lokal.
Pertama, tambahkan kode inisialisasi Firebase dan kode penyiapan emulator ke fungsi main di main.dart.
main.dart
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'app_state.dart';
import 'firebase_options.dart';
import 'logged_in_view.dart';
import 'logged_out_view.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
if (kDebugMode) {
try {
FirebaseFirestore.instance.useFirestoreEmulator('localhost', 8080);
await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
} catch (e) {
// ignore: avoid_print
print(e);
}
}
runApp(MyApp());
}
Beberapa baris pertama kode melakukan inisialisasi Firebase. Hampir secara universal, jika menggunakan Firebase di aplikasi Flutter, sebaiknya Anda memulai dengan memanggil WidgetsFlutterBinding.ensureInitialized dan Firebase.initializeApp.
Setelah itu, kode yang dimulai dengan baris if (kDebugMode) memberi tahu aplikasi Anda untuk menargetkan emulator, bukan project Firebase produksi. kDebugMode memastikan bahwa penargetan emulator hanya akan terjadi jika Anda berada di lingkungan pengembangan. Karena kDebugMode adalah nilai yang konstan, compiler Dart dapat menghapus blok kode tersebut sepenuhnya dalam mode rilis.
Memulai emulator
Anda harus memulai emulator sebelum memulai aplikasi Flutter. Pertama, mulai emulator dengan menjalankannya di terminal:
firebase emulators:start
Perintah ini akan melakukan booting emulator, dan mengekspos port localhost yang dapat kita gunakan untuk berinteraksi dengan emulator. Saat Anda menjalankan perintah tersebut, Anda akan melihat output mirip seperti ini:
Output ini memberi tahu Anda emulator yang sedang berjalan dan tempat untuk melihat emulatornya. Pertama, lihat UI emulator di localhost:4000.
Halaman ini adalah halaman beranda untuk UI emulator lokal. Daftar tersebut mencantumkan semua emulator yang tersedia, dan masing-masing diberi label dengan status aktif atau nonaktif.
5. Emulator Firebase Auth
Emulator pertama yang akan Anda gunakan adalah emulator Authentication. Mulailah dengan emulator Auth dengan mengklik "Buka emulator" pada kartu Authentication di UI, dan Anda akan melihat halaman yang terlihat seperti ini:
Halaman ini memiliki kemiripan dengan halaman konsol web Auth. Dasbor ini memiliki tabel yang mencantumkan pengguna seperti konsol {i>online<i}, dan memungkinkan Anda menambahkan pengguna secara manual. Satu perbedaan besar di sini adalah satu-satunya opsi metode autentikasi yang tersedia di emulator adalah melalui Email dan Sandi. Ini cukup untuk pengembangan lokal.
Selanjutnya, Anda akan memandu proses penambahan pengguna ke emulator Firebase Auth, lalu proses login pengguna tersebut melalui UI Flutter.
Tambahkan pengguna
Klik tombol "Tambahkan pengguna", dan isi formulir dengan informasi ini:
- Nama tampilan: Dash
- Email: dash@email.com
- Sandi: dashword
Kirim formulir, dan Anda akan melihat tabel yang sekarang berisi pengguna. Sekarang Anda dapat memperbarui kode untuk login dengan pengguna tersebut.
logged_out_view.dart
Satu-satunya kode dalam widget LoggedOutView yang harus diupdate adalah dalam callback yang dipicu saat pengguna menekan tombol login. Perbarui kode agar terlihat seperti ini:
class LoggedOutView extends StatelessWidget {
final AppState state;
const LoggedOutView({super.key, required this.state});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Firebase Emulator Suite Codelab'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Please log in',
style: Theme.of(context).textTheme.displaySmall,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () async {
await state.logIn('dash@email.com', 'dashword').then((_) {
if (state.user != null) {
context.go('/');
}
});
},
child: const Text('Log In'),
),
),
],
),
),
);
}
}
Kode yang diperbarui ini akan mengganti string TODO dengan email dan sandi yang Anda buat di emulator autentikasi. Dan pada baris berikutnya, baris if(true) telah diganti dengan kode yang memeriksa apakah state.user adalah null. Kode dalam AppClass menjelaskan hal ini lebih lanjut.
app_state.dart
Dua bagian kode di AppState perlu diupdate. Pertama, beri anggota class AppState.user jenis User dari paket firebase_auth, bukan jenis Object.
Kedua, isi metode AppState.login seperti yang ditunjukkan di bawah ini:
import 'dart:async';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'entry.dart';
class AppState {
AppState() {
_entriesStreamController = StreamController.broadcast(onListen: () {
_entriesStreamController.add([
Entry(
date: '10/09/2022',
text: lorem,
title: '[Example] My Journal Entry',
)
]);
});
}
User? user; // <-- changed variable type
Stream<List<Entry>> get entries => _entriesStreamController.stream;
late final StreamController<List<Entry>> _entriesStreamController;
Future<void> logIn(String email, String password) async {
final credential = await FirebaseAuth.instance
.signInWithEmailAndPassword(email: email, password: password);
if (credential.user != null) {
user = credential.user!;
_listenForEntries();
} else {
print('no user!');
}
}
// ...
}
Definisi jenis untuk pengguna sekarang adalah User?. Class User tersebut berasal dari Firebase Auth, dan memberikan informasi yang diperlukan seperti User.displayName, yang akan dibahas sebentar lagi.
Ini adalah kode dasar yang diperlukan untuk memasukkan pengguna dengan email dan sandi di Firebase Auth. Fungsi ini melakukan panggilan ke FirebaseAuth untuk login, yang akan menampilkan objek Future<UserCredential>. Setelah masa mendatang selesai, kode ini akan memeriksa apakah terdapat User yang dilampirkan ke UserCredential. Jika ada pengguna di objek kredensial, berarti pengguna telah berhasil login, dan properti AppState.user dapat ditetapkan. Jika tidak ada, berarti terjadi error, lalu dokumen akan dicetak.
Perhatikan bahwa satu-satunya baris kode dalam metode ini yang khusus untuk aplikasi ini (bukan kode FirebaseAuth umum) adalah panggilan ke metode _listenForEntries, yang akan dibahas pada langkah berikutnya.
TODO: Ikon Tindakan – Muat ulang aplikasi Anda, lalu tekan tombol Login saat aplikasi dirender. Hal ini menyebabkan aplikasi membuka halaman yang bertuliskan "Welcome Back, Person!" di bagian atas. Autentikasi harus berfungsi, karena Anda dapat membuka halaman ini, tetapi perlu dilakukan perubahan kecil pada logged_in_view.dart untuk menampilkan nama asli pengguna.
logged_in_view.dart
Ubah baris pertama dalam metode LoggedInView.build:
class LoggedInView extends StatelessWidget {
final AppState state;
LoggedInView({super.key, required this.state});
final PageController _controller = PageController(initialPage: 1);
@override
Widget build(BuildContext context) {
final name = state.user!.displayName ?? 'No Name';
return Scaffold(
// ...
Sekarang, baris ini mengambil displayName dari properti User di objek AppState. displayName ini ditetapkan di emulator saat Anda menentukan pengguna pertama. Aplikasi Anda sekarang akan menampilkan "Selamat datang kembali, Dash!" saat Anda login, bukan TODO.
6. Membaca dan Menulis data ke emulator Firestore
Pertama, lihat emulator Firestore. Di halaman beranda UI Emulator (localhost:4000), klik "Buka emulator" di kartu Firestore. Kodenya akan terlihat seperti berikut:
Emulator:
Firebase console:
Jika pernah menggunakan Firestore, Anda akan melihat bahwa halaman ini terlihat mirip dengan halaman Firestore Firebase console. Namun, ada beberapa perbedaan penting.
- Anda dapat menghapus semua data dengan mengetuk satu tombol. Hal ini akan berbahaya untuk data produksi, tetapi berguna untuk pengulangan yang cepat! Jika Anda mengerjakan project baru dan model data Anda berubah, ini akan mudah diselesaikan.
- Ada tab "Permintaan". Tab ini memungkinkan Anda melihat permintaan masuk yang dibuat ke emulator ini. Saya akan membahas tab ini secara lebih mendetail nanti.
- Tidak ada tab untuk Aturan, Indeks, atau Penggunaan. Ada alat (yang dibahas di bagian berikutnya) yang membantu menulis aturan keamanan, tetapi Anda tidak dapat menetapkan aturan keamanan untuk emulator lokal.
Singkatnya, versi Firestore ini menyediakan lebih banyak alat yang berguna selama pengembangan, dan menghapus alat yang diperlukan dalam produksi.
Menulis ke Firestore
Sebelum membahas tab 'Permintaan' di emulator, buat permintaan terlebih dahulu. Tindakan ini memerlukan pembaruan kode. Mulailah dengan menghubungkan formulir di aplikasi untuk menulis jurnal baru Entry ke Firestore.
Alur tingkat tinggi untuk mengirimkan Entry adalah:
- Pengguna mengisi formulir dan menekan tombol
Submit - UI memanggil
AppState.writeEntryToFirebase AppState.writeEntryToFirebasemenambahkan entri ke Firebase
Tidak ada kode yang terlibat dalam langkah 1 atau 2 yang perlu diubah. Satu-satunya kode yang perlu ditambahkan untuk langkah 3 akan ditambahkan di class AppState. Buat perubahan berikut untuk AppState.writeEntryToFirebase.
app_state.dart
import 'dart:async';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'entry.dart';
class AppState {
AppState() {
_entriesStreamController = StreamController.broadcast(onListen: () {
_entriesStreamController.add([
Entry(
date: '10/09/2022',
text: lorem,
title: '[Example] My Journal Entry',
)
]);
});
}
User? user;
Stream<List<Entry>> get entries => _entriesStreamController.stream;
late final StreamController<List<Entry>> _entriesStreamController;
Future<void> logIn(String email, String password) async {
final credential = await FirebaseAuth.instance
.signInWithEmailAndPassword(email: email, password: password);
if (credential.user != null) {
user = credential.user!;
_listenForEntries();
} else {
print('no user!');
}
}
void writeEntryToFirebase(Entry entry) {
FirebaseFirestore.instance.collection('Entries').add(<String, String>{
'title': entry.title,
'date': entry.date.toString(),
'text': entry.text,
});
}
// ...
}
Kode di metode writeEntryToFirebase mengambil referensi ke koleksi yang disebut "Entri" di Firestore. Kemudian, entri baru ditambahkan, yang harus berjenis Map<String, String>.
Dalam hal ini, koleksi "Entries" di Firestore tidak ada, sehingga Firestore membuatnya.
Setelah kode tersebut ditambahkan, lakukan hot reload atau mulai ulang aplikasi Anda, login, dan buka tampilan EntryForm. Anda dapat mengisi formulir dengan Strings apa pun yang Anda inginkan. (Kolom Date akan mengambil String apa pun, karena kolom ini telah disederhanakan untuk codelab ini. Kode ini tidak memiliki validasi yang kuat atau memperhatikan objek DateTime dengan cara apa pun.)
Tekan kirim di formulir. Tidak ada yang akan terjadi di aplikasi, tetapi Anda dapat melihat entri baru di UI emulator.
Tab permintaan di emulator Firestore
Di UI, buka emulator Firestore, lalu lihat tab "Data". Anda akan melihat bahwa sekarang ada Koleksi di root database Anda yang disebut "Entri". Dokumen tersebut harus berisi informasi yang sama dengan yang Anda masukkan ke dalam formulir.
Hal tersebut mengonfirmasi bahwa AppState.writeEntryToFirestore berfungsi, dan sekarang Anda dapat menjelajahi permintaan ini lebih lanjut di tab Permintaan. Klik tab tersebut sekarang.
Permintaan emulator Firestore
Di sini, Anda akan melihat daftar yang terlihat mirip dengan ini:
Anda dapat mengklik salah satu item daftar tersebut dan melihat banyak informasi yang bermanfaat. Klik item daftar CREATE yang sesuai dengan permintaan Anda untuk membuat entri jurnal baru. Anda akan melihat tabel baru yang terlihat seperti ini:
Seperti yang disebutkan, emulator Firestore menyediakan alat untuk mengembangkan aturan keamanan aplikasi Anda. Tampilan ini menunjukkan dengan tepat baris mana dalam aturan keamanan Anda yang lulus permintaan ini (atau gagal, jika itu yang terjadi). Di aplikasi yang lebih tangguh, Aturan Keamanan dapat berkembang dan memiliki beberapa pemeriksaan otorisasi. Tampilan ini digunakan untuk membantu menulis dan men-debug aturan otorisasi tersebut.
Pemeriksaan ini juga menyediakan cara mudah untuk memeriksa setiap bagian dari permintaan ini, termasuk metadata dan data otentikasi. Data ini digunakan untuk menulis aturan otorisasi yang kompleks.
Membaca dari Firestore
Firestore menggunakan sinkronisasi data untuk mengirim data yang diperbarui ke perangkat terhubung. Dalam kode Flutter, Anda dapat memantau (atau berlangganan) koleksi dan dokumen Firestore, dan kode Anda akan diberi tahu setiap kali data berubah. Di aplikasi ini, pemrosesan pembaruan Firestore dilakukan dalam metode yang disebut AppState._listenForEntries.
Kode ini berfungsi bersama dengan StreamController dan Stream yang masing-masing disebut AppState._entriesStreamController dan AppState.entries. Kode tersebut sudah ditulis, begitu juga semua kode yang diperlukan di UI untuk menampilkan data dari Firestore.
Perbarui metode _listenForEntries agar cocok dengan kode di bawah ini:
app_state.dart
import 'dart:async';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'entry.dart';
class AppState {
AppState() {
_entriesStreamController = StreamController.broadcast(onListen: () {
_entriesStreamController.add([
Entry(
date: '10/09/2022',
text: lorem,
title: '[Example] My Journal Entry',
)
]);
});
}
User? user;
Stream<List<Entry>> get entries => _entriesStreamController.stream;
late final StreamController<List<Entry>> _entriesStreamController;
Future<void> logIn(String email, String password) async {
final credential = await FirebaseAuth.instance
.signInWithEmailAndPassword(email: email, password: password);
if (credential.user != null) {
user = credential.user!;
_listenForEntries();
} else {
print('no user!');
}
}
void writeEntryToFirebase(Entry entry) {
FirebaseFirestore.instance.collection('Entries').add(<String, String>{
'title': entry.title,
'date': entry.date.toString(),
'text': entry.text,
});
}
void _listenForEntries() {
FirebaseFirestore.instance
.collection('Entries')
.snapshots()
.listen((event) {
final entries = event.docs.map((doc) {
final data = doc.data();
return Entry(
date: data['date'] as String,
text: data['text'] as String,
title: data['title'] as String,
);
}).toList();
_entriesStreamController.add(entries);
});
}
// ...
}
Kode ini memantau koleksi "Entri" di Firestore. Saat memberi tahu klien ini bahwa ada data baru, Firestore akan meneruskan data tersebut dan kode dalam _listenForEntries akan mengubah semua dokumen turunannya ke dalam objek yang dapat digunakan oleh aplikasi kita (Entry). Kemudian, Firestore menambahkan entri tersebut ke StreamController yang disebut _entriesStreamController (yang sedang diproses oleh UI). Kode ini adalah satu-satunya pembaruan yang diperlukan.
Terakhir, ingat bahwa metode AppState.logIn melakukan panggilan ke _listenForEntries, yang memulai proses pemrosesan setelah pengguna login.
// ...
Future<void> logIn(String email, String password) async {
final credential = await FirebaseAuth.instance
.signInWithEmailAndPassword(email: email, password: password);
if (credential.user != null) {
user = credential.user!;
_listenForEntries();
} else {
print('no user!');
}
}
// ...
Sekarang, jalankan aplikasi. Seharusnya aplikasi akan terlihat seperti ini:
7. Mengekspor dan mengimpor data ke emulator
Emulator Firebase mendukung pengimporan dan ekspor data. Menggunakan impor dan ekspor memungkinkan Anda melanjutkan pengembangan dengan data yang sama saat Anda berhenti sejenak dari pengembangan lalu melanjutkannya. Anda juga dapat meng-commit file data ke git, dan developer lain yang bekerja sama dengan Anda akan memiliki data yang sama untuk digunakan.
Mengekspor data emulator
Pertama, ekspor data emulator yang sudah Anda miliki. Selagi emulator masih berjalan, buka jendela terminal baru, lalu masukkan perintah berikut:
firebase emulators:export ./emulators_data
.emulators_data adalah argumen, yang memberi tahu Firebase tempat untuk mengekspor data. Jika tidak ada, direktori akan dibuat. Anda dapat menggunakan nama apa pun
yang Anda inginkan untuk direktori itu.
Saat menjalankan perintah ini, Anda akan melihat output ini di terminal tempat Anda menjalankan perintah:
i Found running emulator hub for project flutter-firebase-codelab-d6b79 at http://localhost:4400 i Creating export directory /Users/ewindmill/Repos/codelabs/firebase-emulator-suite/complete/emulators_data i Exporting data to: /Users/ewindmill/Repos/codelabs/firebase-emulator-suite/complete/emulators_data ✔ Export complete
Dan jika beralih ke jendela terminal tempat emulator berjalan, Anda akan melihat output ini:
i emulators: Received export request. Exporting data to /Users/ewindmill/Repos/codelabs/firebase-emulator-suite/complete/emulators_data. ✔ emulators: Export complete.
Terakhir, jika melihat di direktori project, Anda akan melihat direktori bernama ./emulators_data, yang berisi file JSON, di antara file metadata lainnya, dengan data yang telah Anda simpan.
Mengimpor data emulator
Sekarang, Anda dapat mengimpor data tersebut sebagai bagian dari alur kerja pengembangan, dan melanjutkan dari bagian terakhir yang Anda kerjakan.
Pertama, hentikan emulator jika sedang berjalan dengan menekan CTRL+C di terminal Anda.
Selanjutnya, jalankan perintah emulators:start yang sudah Anda lihat, tetapi dengan flag yang memberi tahu data apa yang akan diimpor:
firebase emulators:start --import ./emulators_data
Saat emulator aktif, buka UI emulator di localhost:4000, dan Anda akan melihat data yang sama dengan yang sebelumnya Anda gunakan.
Mengekspor data secara otomatis saat menutup emulator
Anda juga dapat mengekspor data secara otomatis saat keluar dari emulator, daripada mengingat untuk mengekspor data di akhir setiap sesi pengembangan.
Saat memulai emulator, jalankan perintah emulators:start dengan dua flag tambahan.
firebase emulators:start --import ./emulators_data --export-on-exit
Nah! Data Anda sekarang akan disimpan dan dimuat ulang setiap kali Anda menggunakan emulator untuk project ini. Anda juga dapat menentukan direktori lain sebagai argumen untuk –export-on-exit flag, tetapi direktori tersebut secara default akan diteruskan ke –import.
Anda juga dapat menggunakan kombinasi apa pun dari opsi ini. Ini adalah catatan dari dokumen: Direktori ekspor dapat ditentukan dengan flag ini: firebase emulators:start --export-on-exit=./saved-data. Jika --import digunakan, jalur ekspor akan ditetapkan secara default ke nilai yang sama; misalnya: firebase emulators:start --import=./data-path --export-on-exit. Terakhir, jika diinginkan, teruskan jalur direktori yang berbeda ke flag --import dan --export-on-exit.
8. Selamat!
Anda telah menyelesaikan Penyiapan dan penerapan dengan emulator Firebase dan Flutter. Anda dapat menemukan kode lengkap untuk Codelab ini di direktori "complete" di github: Flutter Codelabs
Yang telah kita bahas
- Menyiapkan aplikasi Flutter untuk menggunakan Firebase
- Menyiapkan project Firebase
- CLI FlutterFire
- Firebase CLI
- Emulator Firebase Authentication
- Emulator Firebase Firestore
- Mengimpor dan mengekspor data emulator
Langkah Berikutnya
- Pelajari lebih lanjut cara menggunakan Firestore dan Authentication di Flutter: Mempelajari Firebase untuk Flutter Codelab
- Pelajari alat Firebase lainnya yang menawarkan emulator:
- Cloud Storage
- Cloud Functions
- Realtime Database
- Pelajari UI FlutterFire untuk menambahkan Autentikasi Google ke aplikasi Anda dengan cepat.
Pelajari lebih lanjut
- Situs Firebase: firebase.google.com
- Situs Flutter: flutter.dev
- Widget Firebase Flutter FlutterFire: firebase.flutter.dev
- Channel YouTube Firebase
- Channel YouTube Flutter
Sparky bangga pada Anda!
