連結應用程式並開始設計原型


開始使用 Firebase Local Emulator Suite 前，請務必建立 Firebase 專案、設定開發環境，並根據平台適用的「開始使用 Firebase」主題，選取並安裝 Firebase SDK：Apple、Android 或 Web。

製作原型並測試

Local Emulator Suite 包含多個產品模擬器，如「Firebase Local Emulator Suite 簡介」所述。您可以視需要使用個別模擬器或模擬器組合進行原型設計和測試，對應您在正式環境中使用的 Firebase 產品。

Firebase 資料庫與函式模擬器之間的互動
資料庫和模擬器是Cloud Functions完整Local Emulator Suite的一部分。

為介紹 Local Emulator Suite 工作流程，我們假設您正在開發的應用程式使用常見的產品組合：Firebase 資料庫，以及由該資料庫上的作業觸發的 Cloud Functions。

在本機初始化 Firebase 專案後，使用 Local Emulator Suite 的開發週期通常會包含三個步驟：

  1. 使用模擬器和 Emulator Suite UI 互動式設計功能原型。

  2. 如果您使用資料庫模擬器或 Cloud Functions 模擬器，請執行一次性步驟，將應用程式連線至模擬器。

  3. 使用模擬器和自訂指令碼自動執行測試。

在本地初始化 Firebase 專案

請務必安裝 CLI 或更新至最新版本。

curl -sL firebase.tools | bash

如果尚未完成，請將目前的工作目錄初始化為 Firebase 專案，然後按照畫面上的提示指定您使用 Cloud Functions 和 Cloud Firestore 或 Realtime Database：

firebase init

專案目錄現在會包含 Firebase 設定檔、資料庫的Firebase Security Rules定義檔、包含 Cloud Functions 程式碼的 functions 目錄，以及其他支援檔案。

以互動方式製作原型

Local Emulator Suite 的設計宗旨是讓您快速製作新功能的原型，而 Suite 內建的使用者介面就是最實用的原型製作工具之一。這有點像是在本機執行 Firebase 控制台。

使用 Emulator Suite UI，您可以疊代資料庫設計、試用涉及 Cloud 函式的不同資料流、評估安全性規則變更、檢查記錄檔來確認後端服務的執行成效等。然後，如要重新開始，只要清除資料庫，並以新的設計概念重新開始即可。

只要使用下列方式啟動 Local Emulator Suite，即可存取所有內容：

firebase emulators:start

如要製作假設應用程式的原型，請設定並測試基本雲端函式，修改資料庫中的文字項目，並在 Emulator Suite UI 中建立及填入該資料庫，以觸發函式。

  1. 如要建立由資料庫寫入作業觸發的 Cloud 函式，請編輯專案目錄中的 functions/index.js 檔案。將現有檔案的內容換成下列程式碼片段。這個函式會監聽 messages 集合中的文件變更，將文件 original 欄位的內容轉換為大寫，然後將結果儲存在該文件的 uppercase 欄位中。
    2.   const functions = require('firebase-functions/v1');

  exports.makeUppercase = functions.firestore.document('/messages/{documentId}')
      .onCreate((snap, context) => {
        const original = snap.data().original;
        console.log('Uppercasing', context.params.documentId, original);
        const uppercase = original.toUpperCase();
        return snap.ref.set({uppercase}, {merge: true});
      });
  2. 使用 firebase emulators:start 啟動 Local Emulator Suite。Cloud Functions 和資料庫模擬器會啟動，並自動設定為可相互運作。
  3. 在瀏覽器中前往 http://localhost:4000，即可查看使用者介面。 使用者介面的預設通訊埠為 4000，但請檢查 Firebase CLI 輸出的終端機訊息。請注意可用模擬器的狀態。在本範例中，Cloud Functions 和 Cloud Firestore 模擬器會執行。
    我的影像
  4. 在使用者介面中，前往「Firestore」>「資料」分頁，按一下「開始集合」，然後按照提示在 messages 集合中建立新文件，並指定欄位名稱 original 和值 test。這會觸發我們的 Cloud 函式。請注意，系統隨即會顯示新的 uppercase 欄位，並填入「TEST」字串。
    我的影像 我的影像
  5. 在「Firestore」>「要求」分頁中，檢查對模擬資料庫提出的要求，包括為滿足這些要求而執行的所有 Firebase Security Rules 評估。
  6. 檢查「記錄」分頁，確認函式在更新資料庫時未發生錯誤。

您可以輕鬆在雲端函式程式碼和互動式資料庫編輯之間反覆操作，直到取得所需的資料流程為止，不必觸及應用程式內資料庫存取程式碼、重新編譯及重新執行測試套件。

將應用程式連線至模擬器

當互動式原型製作有顯著進展，且您已確定設計後，即可使用適當的 SDK，在應用程式中加入資料庫存取程式碼。您會繼續使用資料庫分頁，並在 Emulator Suite UI 中使用「記錄」分頁，確認應用程式行為是否正確。

請注意，Local Emulator Suite 是本機開發工具。寫入正式版資料庫的作業不會觸發您在本地原型設計的函式。

如要讓應用程式開始寫入資料庫，您必須將測試類別或應用程式內設定指向Cloud Firestore模擬器。

Kotlin
// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
val firestore = Firebase.firestore
firestore.useEmulator("10.0.2.2", 8080)

firestore.firestoreSettings = firestoreSettings {
    isPersistenceEnabled = false
}
EmulatorSuite.kt
Java
// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
FirebaseFirestore firestore = FirebaseFirestore.getInstance();
firestore.useEmulator("10.0.2.2", 8080);

FirebaseFirestoreSettings settings = new FirebaseFirestoreSettings.Builder()
        .setPersistenceEnabled(false)
        .build();
firestore.setFirestoreSettings(settings);
EmulatorSuite.java
Swift
let settings = Firestore.firestore().settings
settings.host = "127.0.0.1:8080"
settings.cacheSettings = MemoryCacheSettings()
settings.isSSLEnabled = false
Firestore.firestore().settings = settings
ViewController.swift

Web

import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";

// firebaseApps previously initialized using initializeApp()
const db = getFirestore();
connectFirestoreEmulator(db, '127.0.0.1', 8080);
fs_emulator_connect.js

Web

// Firebase previously initialized using firebase.initializeApp().
var db = firebase.firestore();
if (location.hostname === "localhost") {
  db.useEmulator("127.0.0.1", 8080);
}
emulator-suite.js

使用自訂指令碼自動執行測試

現在要進行最後一個整體工作流程步驟。在應用程式中完成功能原型設計，並確認在所有平台上都能正常運作後，即可進行最終實作和測試。如要進行單元測試和 CI 工作流程，您可以使用 exec 指令，透過單一呼叫啟動模擬器、執行指令碼測試，然後關閉模擬器：

firebase emulators:exec "./testdir/test.sh"

深入瞭解個別模擬器

您已瞭解基本的用戶端工作流程，現在可以繼續查看套件中個別模擬器的詳細資料，包括如何使用這些模擬器開發伺服器端應用程式：

接下來呢？

請務必詳閱上述連結中與特定模擬器相關的主題。接著：