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


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

設計原型並測試

如「Firebase Local Emulator Suite 簡介」所述，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 Functions 的不同資料流、評估安全性規則變更、檢查記錄檔來確認後端服務的執行情況等。然後，如要重新開始，只要清除資料庫，並以新的設計概念重新開始即可。

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

firebase emulators:start

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

  1. 編輯專案目錄中的 functions/index.js 檔案，建立由資料庫寫入作業觸發的 Cloud 函式。將現有檔案的內容替換為下列程式碼片段。這個函式會監聽 messages 階層中節點的變更，將節點 original 屬性的內容轉換為大寫，並將結果儲存在該節點的 uppercase 屬性中。
    2.   const functions = require('firebase-functions/v1');

  exports.makeUppercase = functions.database.ref('/messages/{pushId}/original')
      .onCreate((snapshot, context) => {
        const original = snapshot.val();
        console.log('Uppercasing', context.params.pushId, original);
        const uppercase = original.toUpperCase();
        return snapshot.ref.parent.child('uppercase').set(uppercase);
      });
  2. 使用 firebase emulators:start 啟動 Local Emulator Suite。Cloud Functions 和資料庫模擬器會啟動，並自動設定為可互通。
  3. 在瀏覽器中查看使用者介面，網址為 http://localhost:4000。 通訊埠 4000 是 UI 的預設通訊埠，但請檢查 Firebase CLI 輸出的終端機訊息。請注意可用模擬器的狀態。在本例中，Cloud Functions 和 Realtime Database 模擬器會執行。
    我的影像
  4. 在 UI 的「即時資料庫」分頁中，使用資料庫內容編輯器控制項建立一組節點，其中包含 messages 節點，而該節點又包含 message1 節點，後者則包含鍵設為 original、值設為 test 的節點。這會觸發我們的 Cloud 函式。請注意，不久後會出現新的 uppercase 屬性，值為 TEST。
    我的影像 我的影像
  5. 檢查「記錄」分頁，確認函式更新資料庫時未發生錯誤。

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

將應用程式連結至模擬器

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

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

如要讓應用程式寫入資料庫，請將測試類別或應用程式內設定指向 Realtime Database 模擬器。

Kotlin
// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
val database = Firebase.database
database.useEmulator("10.0.2.2", 9000)
Java
// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
FirebaseDatabase database = FirebaseDatabase.getInstance();
database.useEmulator("10.0.2.2", 9000);
Swift
    // In almost all cases the ns (namespace) is your project ID.
let db = Database.database(url:"http://127.0.0.1:9000?ns=YOUR_DATABASE_NAMESPACE")
Unity
// Connects to the RTDB Emulator running on port 9000.
// Note: You may need to append your namespace: "?ns=YOUR_PROJECT_ID"
FirebaseDatabase database = FirebaseDatabase.GetInstance("http://127.0.0.1:9000");

Web

import { getDatabase, connectDatabaseEmulator } from "firebase/database";

const db = getDatabase();
if (location.hostname === "localhost") {
  // Point to the RTDB emulator running on localhost.
  connectDatabaseEmulator(db, "127.0.0.1", 9000);
}

Web

var db = firebase.database();
if (location.hostname === "localhost") {
  // Point to the RTDB emulator running on localhost.
  db.useEmulator("127.0.0.1", 9000);
}

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

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

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

深入瞭解個別模擬器

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

後續步驟

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