使用 Firebase Emulator 套件，針對 Flutter 應用程式進行本機開發

1. 事前準備

在這個程式碼研究室中，您將瞭解如何在本機開發期間搭配使用 Firebase Emulator 套件和 Flutter。您將瞭解如何透過模擬器套件使用電子郵件密碼驗證，以及如何在 Firestore 模擬器中讀取及寫入資料。最後，您將使用模擬器匯入及匯出資料，以便在每次返回開發時處理相同的假資料。

事前準備

本程式碼研究室假設您已具備一些 Flutter 經驗。如果不是，不妨先瞭解基本概念。以下連結相當實用：

你應該會具備一些 Firebase 經驗，但如果你從未將 Firebase 加入 Flutter 專案也沒關係。如果您對 Firebase 控制台不熟悉，或是完全不熟悉 Firebase，請先查看下列連結：

課程內容

本程式碼研究室會引導您建構簡單的日誌應用程式。應用程式會有登入畫面，以及可讓您讀取過往日誌項目及建立新日誌項目的畫面。

cd5c4753bbee8af.png 8cb4d21f656540bf.png

課程內容

您將瞭解如何開始使用 Firebase，以及如何在 Flutter 開發工作流程中整合及使用 Firebase Emulator 套件。這部分 Firebase 主題將涵蓋：

請注意，這些主題涵蓋了 Firebase 模擬器套件的必要部分，因此請多加利用。本程式碼研究室著重於將 Firebase 專案新增至 Flutter 應用程式，以及使用 Firebase Emulator 套件進行開發作業。我們不會深入討論 Firebase 驗證或 Firestore。如果您不熟悉這些主題，建議先從瞭解 Firebase for Flutter 程式碼研究室開始。

事前準備

  • 具備 Flutter 相關知識，且已安裝 SDK
  • Intellij JetBrains 或 VS Code 文字編輯器
  • Google Chrome 瀏覽器 (或其他慣用的 Flutter 開發目標)。本程式碼研究室中的某些終端機指令會假設您是在 Chrome 中執行應用程式

2. 建立及設定 Firebase 專案

您需要完成的第一項工作，是在 Firebase 的網路控制台中建立 Firebase 專案。本程式碼研究室中的大部分內容都著重於模擬器套件，這類套件會使用本機執行的 UI，但您必須先設定完整的 Firebase 專案。

建立 Firebase 專案

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

fe6aeab3b91965ed.png

  1. 點選專案建立選項。如果系統顯示提示，請接受 Firebase 條款。略過設定 Google Analytics，因為這個應用程式不會使用 Analytics。

d1fcec48bf251eaa.png

如要進一步瞭解 Firebase 專案，請參閱「瞭解 Firebase 專案」一文。

您建構的應用程式使用了兩種適用於 Flutter 應用程式的 Firebase 產品：

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

這兩項產品需要特殊設定，或透過 Firebase 控制台啟用。

啟用 Cloud Firestore

Flutter 應用程式使用 Cloud Firestore 儲存日誌項目。

啟用 Cloud Firestore：

  1. 在 Firebase 控制台的「建構」專區中，按一下「Cloud Firestore」。
  2. 按一下「建立資料庫」。99e8429832d23fa3.png
  3. 選取「以測試模式啟動」選項。閱讀安全性規則免責事項。測試模式可確保您在開發期間能自由寫入資料庫。點選「下一步」。6be00e26c72ea032.png
  4. 選取資料庫位置 (您可以使用預設值)。請注意，這個位置在設定後即無法變更。278656eefcfb0216.png
  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 目錄，其中包含一系列程式碼研究室的程式碼。本程式碼研究室的程式碼位於 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
  1. 這個指令會將本機電腦連結至 Firebase，並授予您 Firebase 專案的存取權。
  1. 列出 Firebase 專案，藉此測試是否已正確安裝 CLI，且可存取您的帳戶。執行下列指令：
firebase projects:list
  1. 畫面中顯示的清單應與 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 專案檔案修改的設定)。fe6401d769be8f53.png
  2. 接著在系統提示時選取「使用現有專案」。

f11dcab439e6ac1e.png

  1. 接著，選取您在上一步建立的專案：flutter-firebase-codelab。

3bdc0c6934991c25.png

  1. 接下來，需要您回答一系列關於命名檔案的問題。建議您按下「Enter」鍵來選取每個問題的預設選項9bfa2d507e199c59.png
  2. 最後，您必須設定模擬器。從清單中選取「Firestore」和「驗證」，然後按下「Enter」鍵針對每個模擬器使用的特定通訊埠。系統詢問您是否要使用 Emulator UI 時，應選取「Yes」這個預設值。

程序最後，畫面會顯示類似以下螢幕截圖的輸出內容。

重要事項：輸出內容可能會與我本人略有不同，如下方螢幕截圖所示，因為最後一個問題預設為「否」。如已下載模擬器

8544e41037637b07.png

設定 FlutterFire

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

flutterfire configure

執行這個指令時，系統會提示您選取要使用的 Firebase 專案，以及想要設定的平台。在這個程式碼研究室中，範例使用 Flutter 網頁版，但您可以將 Firebase 專案設為使用所有選項。

以下螢幕截圖列出您需要回答的問題。

619b7aca6dc15472.png 301c9534f594f472.png

這張螢幕截圖顯示程序結束時的輸出內容。如果您熟悉 Firebase，就會發現您不需要在主控台中建立應用程式，而且 FlutterFire CLI 會幫您完成這項作業。

12199a85ade30459.png

在 Flutter 應用程式中新增 Firebase 套件

最後一個設定步驟是將相關 Firebase 套件新增至 Flutter 專案。在終端機中，確認您位於 flutter-codelabs/firebase-emulator-suite/start 的 Flutter 專案根目錄。接著，執行下列指令：

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 函式

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 通訊埠。執行該指令時，畫面應會顯示類似以下的輸出內容：

bb7181eb70829606.png

這些輸出內容會指出正在執行的模擬器，以及可前往何處查看模擬器。首先，請前往 localhost:4000 查看模擬器 UI。

11563f4c7216de81.png

這是本機模擬器 UI 的首頁。其中會列出所有可用的模擬器，每個模擬器都會標示為開啟或關閉。

5. Firebase 驗證模擬器

您要使用的第一個模擬器是驗證模擬器。按一下「Go to emulator」以啟動驗證模擬器您會看到一個類似下方的頁面：

3c1bfded40733189.png

這個頁面與「Auth」(驗證) 網頁控制台頁面相似。這個表格會列出線上控制台等使用者，並允許手動新增使用者。還有一個一大差別，就是模擬器中唯一可用的驗證方法選項是透過電子郵件和密碼。這樣就足以進行本機開發。

接下來，您將逐步瞭解如何將使用者新增至 Firebase 驗證模擬器，然後透過 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 是否為空值的程式碼取代。「AppClass」的程式碼讓這個問題更加瞭解。

app_state.dart

AppState 中程式碼的兩個部分需要更新。首先，將 firebase_auth 套件中的類別成員 AppState.user 設為 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> 物件。日後完成後，此程式碼會檢查 UserCredential 是否附加了 User。如果憑證物件上存在使用者，表示使用者已成功登入，且可以設定 AppState.user 屬性。如果找不到，表示發生錯誤，系統可以列印。

請注意，這個方法中唯一針對這個應用程式的程式碼行 (而非一般 FirebaseAuth 程式碼) 是對 _listenForEntries 方法的呼叫，下一個步驟將說明。

待辦事項：動作圖示 – 重新載入應用程式，然後在算繪後按下「登入」按鈕。這會使應用程式要前往顯示「歡迎回來，大家！」的頁面。。驗證功能必須正常運作，因為您可以前往這個頁面，但必須對 logged_in_view.dart 進行小幅更新，才能顯示使用者的實際名稱。

logged_in_view.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 會在您定義首位使用者時在模擬器中設定。應用程式現在應會顯示「Welcome back, Dash!」而非 TODO 登入。

6. 讀取資料並將資料寫入 Firestore 模擬器

首先，請查看 Firestore 模擬器。在模擬器 UI 首頁 (localhost:4000) 中，按一下「Go to emulator」(前往模擬器)。如下所示：

模擬器：

791fce7dc137910a.png

Firebase 控制台：

e0dde9aea34af050.png

如果您有使用 Firestore 的經驗，您會發現這個頁面看起來與 Firebase 控制台的 Firestore 頁面類似。但還是有一些明顯差異。

  1. 只要輕觸一個按鈕，即可清除所有資料。這可能會對正式環境資料造成危險，但有助於快速疊代！如果您正在製作新專案，而且資料模型有所變更，很容易就會放棄這項作業。
  2. 如果有「要求」分頁。這個分頁可讓您查看對這個模擬器發出的傳入要求。我稍後會詳細說明這個分頁。
  3. 「規則」、「索引」或「使用方式」沒有任何分頁。有一項工具 (將在下一節說明) 有助於編寫安全性規則，但無法設定本機模擬器的安全性規則。

總結來說，這個版本的 Firestore 可在開發過程中提供更多實用工具，並移除正式環境所需的工具。

寫入 Firestore

討論「要求」前分頁後，請先發出要求。必須更新程式碼。請先開啟應用程式中的表單，以便將新的日誌 Entry 寫入 Firestore。

提交 Entry 的整體流程如下：

  1. 使用者填寫表單並按下「Submit」按鈕
  2. UI 會呼叫 AppState.writeEntryToFirebase
  3. 「AppState.writeEntryToFirebase」會在 Firebase 中新增項目

步驟 1 或 2 中所有的程式碼都不需要修改。步驟 3 中唯一需要新增的程式碼會新增至 AppState 類別。對 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,
   });
 }
 // ...
}

WriteEntryToFirebase 方法中的程式碼會擷取名為「Entries」集合的參照以及 Firestore接著新增一個類型為 Map<String, String> 的項目。

在這個範例中，「項目」Firestore 中找不到集合，因此系統建立了 Firestore 建立這個集合。

新增程式碼後，熱重新載入或重新啟動應用程式，登入並前往 EntryForm 檢視畫面。您可以在表單中填入所需的任何 Strings。(「日期」欄位可採用任何字串，因為這個程式碼研究室已加以簡化，沒有嚴格的驗證機制，也沒有以任何方式關心 DateTime 物件)。

在表單上按下「提交」。應用程式不會有任何變化，但您可以在模擬器 UI 中查看新項目。

Firestore 模擬器中的「Request」(要求) 分頁

在 UI 中，前往 Firestore 模擬器，然後查看「資料」分頁。您應該會在資料庫根目錄中看到名為「Entries」(項目) 的集合。其中應包含與您在表單中輸入的相同資訊的文件。

a978fb34fb8a83da.png

這樣代表 AppState.writeEntryToFirestore 運作正常，現在您可以在「要求」分頁中進一步探索這項要求。現在請點選該分頁標籤。

Firestore 模擬器要求

您應該會看到類似下方的清單：

f0b37f0341639035.png

只要點選這些清單項目，即可查看實用資訊。按一下與要求對應的 CREATE 清單項目，即可建立新的日誌項目。您會看到類似下方的新表格：

385d62152e99aad4.png

如前所述，Firestore 模擬器提供工具，用於開發應用程式安全性規則。這個檢視畫面會明確顯示安全性規則中通過了這項要求 (如為失敗，則為失敗)。在更強大的應用程式中，安全性規則可以擴增並進行多項授權檢查。這個檢視畫面可用於寫入這些授權規則及偵錯。

您也可以透過這種方式輕鬆檢查這項要求的每個部分，包括中繼資料和驗證資料。這項資料用於編寫複雜的授權規則。

從 Firestore 讀取

Firestore 使用資料同步處理功能，將更新後的資料推送至已連結的裝置。在 Flutter 程式碼中，您可以監聽 (或訂閱) Firestore 集合和文件，只要資料有異動，您的程式碼就會收到通知。在此應用程式中，系統會使用名為 AppState._listenForEntries 的方法監聽 Firestore 更新。

此程式碼可分別與名為 AppState._entriesStreamController 和 AppState.entries 的 StreamController 和 Stream 搭配使用。該程式碼已編寫，就像使用者介面顯示 Firestore 資料所需的所有程式碼一樣。

請更新 _listenForEntries 方法，使其符合以下程式碼：

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

這個程式碼會監聽「項目」收集映像檔資料當 Firestore 通知這個用戶端有新資料時，Firestore 會傳送該資料，且 _listenForEntries 中的程式碼會將所有子項文件變更為應用程式可使用的物件 (Entry)。然後將這些項目新增至名為 _entriesStreamController (使用者介面會監聽) 的 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!');
 }
}
// ...

現在請執行應用程式。內容應該會類似這樣：

(b8a31c7a8900331.gif)

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。您可以在「complete」部分中找到本程式碼研究室完成的程式碼GitHub 上的目錄：Flutter 程式碼研究室

涵蓋內容

  • 設定 Flutter 應用程式來使用 Firebase
  • 設定 Firebase 專案
  • FlutterFire CLI
  • Firebase CLI
  • Firebase 驗證模擬器
  • Firebase Firestore 模擬器
  • 匯入及匯出模擬器資料

後續步驟

瞭解詳情

Sparky 以你為榮！

2a0ad195769368b1.gif