使用 Firebase Emulator Suite 對 Flutter 應用程式進行本機開發

1. 開始之前

在此 Codelab 中，您將了解如何在本機開發期間將 Firebase Emulator Suite 與 Flutter 結合使用。您將了解如何透過模擬器套件使用電子郵件密碼驗證，以及如何在 Firestore 模擬器中讀取和寫入資料。最後，您將從模擬器匯入和匯出數據，以便每次返回開發時都使用相同的偽造數據。

先決條件

此 Codelab 假設您有一定的 Flutter 經驗。如果沒有，您可能想先學習基礎知識。以下連結很有幫助：

• 瀏覽 Flutter Widget 框架
• 嘗試編寫您的第一個 Flutter 應用程序，第 1 部分Codelab

您還應該有一些 Firebase 經驗，但如果您從未將 Firebase 添加到 Flutter 專案中也沒關係。如果您不熟悉 Firebase 控制台，或者您完全不熟悉 Firebase，請先查看以下連結：

• Firebase 基礎知識文檔
• 透過 Flutter Codelab 了解 Firebase 。

你將創造什麼

此 Codelab 將指導您建立簡單的日記應用程式。該應用程式將有一個登入螢幕，以及一個允許您閱讀過去的日記條目並創建新條目的螢幕。

你將學到什麼

您將了解如何開始使用 Firebase，以及如何將 Firebase 模擬器套件整合並使用到您的 Flutter 開發工作流程中。將涵蓋以下 Firebase 主題：

• Firebase 模擬器套件
• Firebase 身份驗證
• Firebase Firestore 資料庫

請注意，這些主題的涵蓋範圍僅限於涵蓋 Firebase 模擬器套件所需的範圍。此 Codelab 的重點是為您的 Flutter 應用程式添加 Firebase 項目，並使用 Firebase Emulator Suite 進行開發。不會深入討論 Firebase 身份驗證或 Firestore。如果您不熟悉這些主題，我們建議您從了解 Firebase for Flutter Codelab開始。

你需要什麼

• Flutter 的使用知識以及已安裝的 SDK
• Intellij JetBrains 或 VS Code 文字編輯器
• Google Chrome 瀏覽器（或您的其他首選 Flutter 開發目標。此 Codelab 中的某些終端命令將假設您在 Chrome 上執行應用程式）

2. 建立並設定 Firebase 項目

您需要完成的第一個任務是在 Firebase 的 Web 控制台中建立 Firebase 專案。此 Codelab 的絕大多數內容將專注於模擬器套件，它使用本地運行的 UI，但您必須先設定完整的 Firebase 專案。

創建 Firebase 項目

1. 登入 Firebase 控制台。
2. 在 Firebase 控制台中，按一下「新增專案」 （或「建立專案」），然後輸入 Firebase 專案的名稱（例如「 Firebase-Flutter-Codelab」） 。

3. 按一下項目建立選項。如果出現提示，請接受 Firebase 條款。跳過設定 Google Analytics，因為您不會為此應用程式使用 Analytics。

要了解有關 Firebase 專案的更多信息，請參閱了解 Firebase 專案。

您正在建置的應用程式使用兩種可用於 Flutter 應用的 Firebase 產品：

• Firebase 驗證可讓您的使用者登入您的應用程式。
• Cloud Firestore將結構化資料保存在雲端，並在資料變更時接收即時通知。

這兩個產品需要特殊配置或需要使用 Firebase 控制台啟用。

啟用 Cloud Firestore

Flutter 應用程式使用Cloud Firestore來儲存日記條目。

啟用 Cloud Firestore：

1. 在 Firebase 控制台的「建置」部分中，按一下Cloud Firestore 。
2. 按一下建立資料庫。
3. 選擇“以測試模式啟動”選項。閱讀有關安全規則的免責聲明。測試模式保證您在開發過程中可以自由寫入資料庫。點擊下一步。
4. 選擇資料庫的位置（您可以使用預設值）。請注意，此位置以後無法變更。
5. 單擊啟用。

3. 設定 Flutter 應用程式

在開始之前，您需要下載入門程式碼並安裝 Firebase CLI。

取得起始代碼

從命令列克隆GitHub 儲存庫：

git clone https://github.com/flutter/codelabs.git flutter-codelabs

或者，如果您安裝了GitHub 的 cli工具：

gh repo clone flutter/codelabs flutter-codelabs

範例程式碼應克隆到flutter-codelabs目錄中，其中包含 Codelab 集合的程式碼。此 Codelab 的程式碼位於flutter-codelabs/firebase-emulator-suite 。

flutter-codelabs/firebase-emulator-suite下的目錄結構是兩個Flutter專案。一種稱為complete ，如果您想跳過或交叉引用您自己的程式碼，可以參考它。另一個項目稱為start 。

您想要開始的程式碼位於目錄flutter-codelabs/firebase-emulator-suite/start 。開啟該目錄或將該目錄匯入到您首選的 IDE 中。

cd flutter-codelabs/firebase-emulator-suite/start

安裝 Firebase CLI

Firebase CLI 提供了管理 Firebase 專案的工具。使用模擬器套件需要 CLI，因此您需要安裝它。

安裝 CLI 的方法有多種。如果您使用的是 MacOS 或 Linux，最簡單的方法是從終端機執行以下命令：

curl -sL https://firebase.tools | bash

安裝 CLI 後，您必須使用 Firebase 進行身份驗證。

1. 執行以下命令，使用您的 Google 帳戶登入 Firebase：

firebase login

2. 此命令將您的本機連接到 Firebase 並授予您對 Firebase 專案的存取權限。

3. 透過列出您的 Firebase 專案來測試 CLI 是否已正確安裝並可以存取您的帳戶。運行以下命令：

firebase projects:list

4. 顯示的清單應與Firebase 控制台中列出的 Firebase 專案相同。您至少應該看到 firebase-flutter-codelab。

安裝 FlutterFire CLI

FlutterFire CLI 建置於 Firebase CLI 之上，它讓 Firebase 專案與 Flutter 應用程式的整合變得更加容易。

首先，安裝 CLI：

dart pub global activate flutterfire_cli

確保 CLI 已安裝。在 Flutter 專案目錄中執行以下命令，並確保 CLI 輸出幫助選單。

flutterfire --help

使用 Firebase CLI 和 FlutterFire CLI 將 Firebase 專案加入 Flutter 應用

安裝兩個 CLI 後，您可以設定單獨的 Firebase 產品（例如 Firestore）、下載模擬器，然後只需幾個終端命令即可將 Firebase 新增到您的 Flutter 應用程式中。

首先，透過執行以下命令完成 Firebase 設定：

firebase init

該命令將引導您回答設定項目所需的一系列問題。這些螢幕截圖顯示了流程：

1. 當提示選擇功能時，選擇“Firestore”和“模擬器”。 （沒有身份驗證選項，因為它不使用可從 Flutter 專案文件中修改的配置。）
2. 接下來，出現提示時選擇「使用現有項目」。

3. 現在，選擇您在上一步中建立的專案：flutter-firebase-codelab。

4. 接下來，系統將詢問您一系列有關命名將產生的檔案的問題。我建議對每個問題按“Enter”鍵選擇預設值。
5. 最後，您需要配置模擬器。從清單中選擇 Firestore 和驗證，然後針對每個模擬器要使用的特定連接埠的每個問題按下「Enter」鍵。當詢問您是否要使用模擬器 UI 時，您應該選擇預設值「是」。

在該過程結束時，您應該會看到類似於以下螢幕截圖的輸出。

重要提示：您的輸出可能與我的略有不同，如下面的螢幕截圖所示，因為如果您已經下載了模擬器，則最後的問題將預設為「否」。

配置 FlutterFire

接下來，您可以使用 FlutterFire 產生所需的 Dart 程式碼，以便在 Flutter 應用程式中使用 Firebase。

flutterfire configure

執行此命令時，系統會提示您選擇要使用的 Firebase 專案以及要設定的平台。在此 Codelab 中，範例使用 Flutter Web，但您可以將 Firebase 專案設定為使用所有選項。

以下螢幕截圖顯示了您需要回答的提示。

此螢幕截圖顯示了該過程結束時的輸出。如果您熟悉 Firebase，您會注意到您不必在控制台中創建應用程序，FlutterFire CLI 已經為您完成了這件事。

將 Firebase 套件加入 Flutter 應用

最後的設定步驟是將相關的 Firebase 套件新增到您的 Flutter 專案中。在終端機中，確保您位於 Flutter 專案的根目錄flutter-codelabs/firebase-emulator-suite/start 。然後，執行以下三個命令：

flutter pub add firebase_core

flutter pub add firebase_auth

flutter pub add cloud_firestore

這些是您將在此應用程式中使用的唯一套件。

4. 啟用 Firebase 模擬器

到目前為止，Flutter 應用程式和您的 Firebase 專案已設定為能夠使用模擬器，但您仍需要告訴 Flutter 程式碼將傳出 Firebase 請求重新路由到本機連接埠。

首先，將 Firebase 初始化程式碼和模擬器設定程式碼加入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());
}

前幾行程式碼初始化 Firebase。幾乎普遍來說，如果您在 Flutter 應用程式中使用 Firebase，您需要先呼叫WidgetsFlutterBinding.ensureInitialized和Firebase.initializeApp 。

接下來， if (kDebugMode)行開頭的程式碼告訴您的應用程式以模擬器而不是生產 Firebase 專案為目標。 kDebugMode確保僅當您處於開發環境時才會針對模擬器。因為kDebugMode是一個常數值，所以 Dart 編譯器知道在發布模式下完全刪除該程式碼區塊。

啟動模擬器

您應該在啟動 Flutter 應用程式之前啟動模擬器。首先，透過在終端機中執行以下命令來啟動模擬器：

firebase emulators:start

該命令啟動模擬器，並公開本地主機端口，我們可以透過這些端口與它們進行交互。當您執行該命令時，您應該會看到類似於以下內容的輸出：

此輸出告訴您哪些模擬器正在運行，以及您可以在哪裡查看模擬器。首先，檢查localhost:4000的模擬器 UI。

這是本機模擬器 UI 的主頁。它列出了所有可用的模擬器，並且每個模擬器都標有狀態開啟或關閉。

5.Firebase Auth 模擬器

您將使用的第一個模擬器是身份驗證模擬器。透過點擊 UI 中身份驗證卡上的「前往模擬器」開始使用 Auth 模擬器，您將看到如下所示的頁面：

此頁面與 Auth Web 控制台頁面相似。它有一個像線上控制台一樣列出使用者的表格，並允許您手動新增使用者。這裡的一個很大的區別是模擬器上唯一可用的身份驗證方法選項是透過電子郵件和密碼。這足以滿足當地的發展。

接下來，您將逐步完成將使用者新增至 Firebase Auth 模擬器，然後透過 Flutter UI 登入該使用者的程序。

新增用戶

點擊“新增使用者”按鈕，並使用以下資訊填寫表單：

• 顯示名稱：破折號
• 電子郵件：dash@email.com
• 密碼：破折號

提交表單，您將看到該表現在包含一個使用者。現在您可以更新程式碼以使用該使用者登入。

Logged_out_view.dart

LoggedOutView小工具中唯一需要更新的程式碼是在使用者按下登入按鈕時觸發的回呼中。將程式碼更新為如下所示：

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'),
          ),
        ),
      ],
    ),
   ),
  );
 }
}

更新後的程式碼將TODO字串替換為您在身分驗證模擬器中建立的電子郵件和密碼。在下一行中， if(true)行已替換為檢查state.user是否為 null 的程式碼。 AppClass中的程式碼更清楚地說明了這一點。

應用程式狀態.dart

AppState中的兩部分程式碼需要更新。首先，為類別成員 AppState.user 提供firebase_auth套件中的User類型，而不是Object類型。

其次，填入AppState.login方法，如下所示：

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!');
   }
 } 
 // ...
}

使用者的類型定義現在是User? 。此User類別來自 Firebase Auth，並提供所需的信息，例如User.displayName ，稍後將對此進行討論。

這是在 Firebase Auth 中使用電子郵件和密碼登入使用者所需的基本程式碼。它會呼叫 FirebaseAuth 進行登錄，這會傳回一個Future<UserCredential>物件。當 future 完成時，此程式碼檢查是否有User附加到UserCredential 。如果憑證物件上存在用戶，則使用者已成功登錄，並且可以設定AppState.user屬性。如果沒有，則出現錯誤，並列印出來。

請注意，此方法中唯一特定於此應用程式的程式碼行（而不是一般的 FirebaseAuth 程式碼）是對_listenForEntries方法的調用，該方法將在下一步中介紹。

TODO：操作圖示 – 重新載入您的應用程序，然後在呈現時按下登入按鈕。這會導致應用程式導航到顯示「歡迎回來，人員！」的頁面。在頂部。身份驗證必須有效，因為它允許您導航到此頁面，但需要對logged_in_view.dart進行較小的更新以顯示使用者的實際名稱。

登入視圖.dart

更改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(
 // ...

現在，該行從AppState物件的User屬性中取得displayName 。當您定義第一個使用者時，此displayName是在模擬器中設定的。您的應用程式現在應該顯示“歡迎回來，Dash！”當您登入時，而不是TODO 。

6. 向 Firestore 模擬器讀取和寫入數據

首先，檢查 Firestore 模擬器。在模擬器 UI 首頁 ( localhost:4000 ) 上，按一下 Firestore 卡上的「前往模擬器」。它應該看起來像這樣：

模擬器：

Firebase 控制台：

如果您有使用 Firestore 的經驗，您會注意到此頁面看起來與 Firebase 控制台 Firestore 頁面類似。不過，還是有一些顯著的差異。

1. 您只需點擊一個按鈕即可清除所有資料。這對於生產資料來說是危險的，但對於快速迭代很有幫助！如果您正在開發一個新專案並且您的資料模型發生了變化，那麼很容易清除。
2. 有一個“請求”選項卡。此標籤可讓您查看對此模擬器發出的傳入請求。我將稍後更詳細地討論此選項卡。
3. 沒有規則、索引或用法選項卡。有一個工具（在下一節中討論）可以幫助編寫安全規則，但您無法為本機模擬器設定安全規則。

總而言之，這個版本的 Firestore 提供了更多在開發過程中有用的工具，並刪除了生產中所需的工具。

寫入 Firestore

在討論模擬器中的「請求」標籤之前，先發出一個請求。這需要更新程式碼。首先連接應用程式中的表單以將新的日記Entry寫入 Firestore。

提交Entry的高階流程是：

1. 使用者填寫表格並按下Submit按鈕
2. UI呼叫AppState.writeEntryToFirebase
3. AppState.writeEntryToFirebase新增條目

步驟 1 或步驟 2 涉及的程式碼都不需要更改。步驟 3 中唯一需要新增的程式碼將會加入到AppState類別中。對AppState.writeEntryToFirebase進行以下更改。

應用程式狀態.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,
   });
 }
 // ...
}

writeEntryToFirebase 方法中的程式碼取得對 Firestore 中名為「Entries」的集合的參考。然後它會新增一個條目，該條目的類型必須為Map<String, String> 。

在本例中，Firestore 中的「Entries」集合不存在，因此 Firestore 建立了一個集合。

新增代碼後，熱重載或重新啟動您的應用程序，登入並導航至EntryForm視圖。您可以使用您想要的任何Strings填寫表格。 （Date 欄位將採用任何字串，因為它已針對此 Codelab 進行了簡化。它沒有強驗證，也不以任何方式關心DateTime物件。）

按表格上的「提交」。應用程式中不會發生任何事情，但您可以在模擬器 UI 中看到新條目。

Firestore 模擬器中的請求標籤

在 UI 中，導覽至 Firestore 模擬器，然後查看「資料」標籤。您應該看到資料庫的根目錄現在有一個名為“Entries”的集合。該文件應該包含您在表單中輸入的相同資訊。

這證實了AppState.writeEntryToFirestore有效，現在您可以在「請求」標籤中進一步探索該請求。現在點擊該選項卡。

Firestore 模擬器請求

在這裡，您應該會看到一個與此類似的清單：

您可以單擊任何清單項目並查看大量有用的信息。按一下與您的要求相對應的CREATE清單項，以建立新的日記帳分錄。您將看到一個如下所示的新表：

如前所述，Firestore 模擬器提供了開發應用安全規則的工具。此視圖準確顯示此請求在安全性規則中的哪一行通過（或失敗，如果是這種情況）。在更強大的應用程式中，安全規則可以成長並具有多個授權檢查。此視圖用於幫助編寫和調試這些授權規則。

它還提供了一種簡單的方法來檢查該請求的每個部分，包括元資料和身份驗證資料。這些資料用於編寫複雜的授權規則。

從 Firestore 讀取

Firestore 使用資料同步將更新的資料推送到連接的裝置。在 Flutter 程式碼中，您可以監聽（或訂閱）Firestore 集合和文檔，只要資料發生變化，您的程式碼就會收到通知。在這個應用程式中，偵聽 Firestore 更新是在名為AppState._listenForEntries方法中完成的。

此程式碼與分別稱為AppState._entriesStreamController和AppState.entries的StreamController和Stream結合使用。程式碼已經編寫完畢，UI 中顯示 Firestore 資料所需的所有程式碼也是如此。

更新_listenForEntries方法以符合以下程式碼：

應用程式狀態.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);
   });
 }
 // ...
}

此程式碼偵聽 Firestore 中的「Entries」集合。當 Firestore 通知此用戶端有新數據時，它會傳遞該數據，並且_listenForEntries中的程式碼將其所有子文件更改為我們的應用程式可以使用的物件 ( Entry )。然後，它將這些條目新增至名為_entriesStreamController （UI 正在偵聽）的StreamController中。此程式碼是唯一需要的更新。

最後，回想AppState.logIn方法呼叫_listenForEntries ，它在使用者登入後開始偵聽過程。

// ...
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!');
 }
}
// ...

現在運行該應用程式。它應該看起來像這樣：

7. 將資料匯出並匯入模擬器中

Firebase 模擬器支援導入和匯出資料。使用匯入和匯出，您可以在開發暫停然後恢復時使用相同的資料繼續開發。您也可以將資料檔案提交到 git，與您一起工作的其他開發人員將有相同的資料可供使用。

匯出模擬器數據

首先，匯出已有的模擬器資料。當模擬器仍在運行時，打開一個新的終端窗口，然後輸入以下命令：

firebase emulators:export ./emulators_data

.emulators_data是一個參數，它告訴 Firebase 要將資料匯出到哪裡。如果該目錄不存在，則會建立該目錄。您可以為該目錄使用任何您想要的名稱。

當您執行此命令時，您將在執行該命令的終端機中看到以下輸出：

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

如果切換到運行模擬器的終端窗口，您將看到以下輸出：

i  emulators: Received export request. Exporting data to /Users/ewindmill/Repos/codelabs/firebase-emulator-suite/complete/emulators_data.
✔  emulators: Export complete.

最後，如果您查看專案目錄，您應該會看到一個名為./emulators_data的目錄，其中包含JSON檔案以及其他元資料文件，其中包含您儲存的資料。

導入模擬器數據

現在，您可以匯入該資料作為開發工作流程的一部分，並從上次中斷的地方開始。

首先，如果模擬器正在運行，請在終端中按CTRL+C來停止它們。

接下來，執行您已經見過的emulators:start命令，但有一個標誌告訴它要匯入哪些資料：

firebase emulators:start --import ./emulators_data

當模擬器啟動後，導航到位於localhost:4000模擬器 UI，您應該會看到與先前使用的資料相同的資料。

關閉模擬器時自動匯出數據

您也可以在退出模擬器時自動匯出數據，而不必記住在每個開發工作階段結束時匯出資料。

當您啟動模擬器時，請執行帶有兩個附加標誌的emulators:start命令。

firebase emulators:start --import ./emulators_data --export-on-exit

瞧！現在，每次您使用該項目的模擬器時，您的資料都將被儲存並重新載入。您也可以指定不同的目錄作為–export-on-exit flag的參數，但它將預設為傳遞給–import目錄。

您也可以使用這些選項的任意組合。這是文件中的註解：可以使用此標誌指定匯出目錄： firebase emulators:start --export-on-exit=./saved-data 。如果使用--import ，則導出路徑預設相同；例如： firebase emulators:start --import=./data-path --export-on-exit 。最後，如果需要，請將不同的目錄路徑傳遞給--import和--export-on-exit標誌。

8. 恭喜！

您已完成 Firebase 模擬器和 Flutter 的啟動和運行。您可以在 github 上的“完整”目錄中找到此 Codelab 的完整程式碼： Flutter Codelabs

我們涵蓋的內容

• 設定 Flutter 應用程式以使用 Firebase
• 設定 Firebase 項目
• FlutterFire CLI
• Firebase CLI
• Firebase 身份驗證模擬器
• Firebase Firestore 模擬器
• 導入和匯出模擬器數據

下一步

• 了解有關在 Flutter 中使用 Firestore 和身份驗證的更多資訊：了解 Firebase for Flutter Codelab
• 探索提供模擬器的其他 Firebase 工具：
• 雲端儲存
• 雲端功能
• 即時資料庫
• 探索FlutterFire UI以快速將 Google 驗證新增至您的應用程式。

了解更多

• Firebase 網址： firebase.google.com
• 顫動網站： flutter.dev
• FlutterFire Firebase Flutter 小工具： firebase.flutter.dev
• Firebase YouTube 頻道
• 顫動 YouTube 頻道

斯帕克為你感到驕傲！