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


開始使用 Firebase Local Emulator Suite 前,請務必先建立 Firebase 專案、設定開發環境,並根據開始使用 Firebase 主題,為您的平台選取並安裝 Firebase SDK:AppleAndroidWeb

製作原型並進行測試

Local Emulator Suite 包含多個產品模擬器,如「Firebase Local Emulator Suite 簡介」一文所述。您可以根據實際情況,使用個別模擬器或模擬器組合來製作原型並進行測試,以便對應您在實際環境中使用的 Firebase 產品。

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

為了在本主題中介紹 Local Emulator Suite 工作流程,我們假設您正在使用採用以下產品組合的應用程式:Firebase 資料庫和由該資料庫作業觸發的雲端函式。

在本機初始化 Firebase 專案後,使用 Local Emulator Suite 的開發週期一般會有三個步驟:

  1. 原型功能可與模擬器和 Emulator Suite UI 互動。

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

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

在本機初始化 Firebase 專案

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

curl -sL firebase.tools | bash

如果您尚未將目前的工作目錄初始化為 Firebase 專案,請按照螢幕上的提示操作,以指出您用 Cloud FunctionsCloud FirestoreRealtime Database

firebase init

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

以互動方式設計原型

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

您可以使用 Emulator Suite UI 重複執行資料庫設計、嘗試使用涉及 Cloud 函式的不同資料流程、評估安全性規則變更、檢查記錄檔以確認後端服務的效能,以及更多其他操作。接著,如果您想重新開始,只要清除資料庫,並運用新的設計構想重新開始即可。

使用以下條件Local Emulator Suite即可開始使用所有資源:

firebase emulators:start

為了製作假設應用程式的原型,我們將設定及測試基本雲端函式,用於修改資料庫中的文字項目,並在 Emulator Suite UI 中建立及填入該資料庫,以便觸發該函式。

  1. 編輯專案目錄中的 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});
          });
      
  3. 使用 firebase emulators:start 啟動 Local Emulator SuiteCloud Functions 和資料庫模擬器會啟動,並自動設定為互通運作。
  4. 在瀏覽器中查看 UI,網址為 http://localhost:4000。通訊埠 4000 是 UI 的預設值,但請檢查 Firebase CLI 輸出的終端機訊息。請注意可用模擬器的狀態。在本範例中,Cloud FunctionsCloud Firestore 模擬器會開始執行。
    我的圖片
  5. 在 UI 的 Firestore > 資料分頁中,按一下「開始建立資料集」,然後按照提示在 messages 資料集中建立新文件,其中包含欄位名稱 original 和值 test。這會觸發 Cloud 函式。請注意,系統很快就會顯示新的 uppercase 欄位,並填入「TEST」字串。
    我的圖片 我的圖片
  6. 在「Firestore > 請求」分頁中,檢查對模擬資料庫提出的請求,包括為了滿足這些請求而執行的所有 Firebase Security Rules 評估。
  7. 請查看「Logs」分頁,確認函式在更新資料庫時沒有發生錯誤。

您可以輕鬆地在 Cloud 函式程式碼和互動式資料庫編輯作業之間進行疊代,直到取得所需資料流程為止,不必輕觸應用程式內資料庫存取程式碼、重新編譯和重新執行測試套件。

將應用程式連結至模擬器

在互動式原型設計作業進展順利,並確定設計後,您就可以使用適當的 SDK 將資料庫存取程式碼新增至應用程式。您將繼續使用資料庫分頁,如果是函式,則使用 Emulator Suite UI 中的「Logs」分頁,確認應用程式的行為正確無誤。

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

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

Kotlin+KTX
// 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
}
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);
Swift
let settings = Firestore.firestore().settings
settings.host = "127.0.0.1:8080"
settings.cacheSettings = MemoryCacheSettings()
settings.isSSLEnabled = false
Firestore.firestore().settings = settings

Web

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

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

Web

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

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

接下來是整個工作流程的最後一個步驟。在應用程式中製作原型,並確認在所有平台上都運作良好後,您就可以進行最終實作和測試。針對單元測試和 CI 工作流程,您可以使用 exec 指令在單一呼叫中啟動模擬器、執行指令碼測試,以及關閉模擬器:

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

深入探索個別模擬器

您已瞭解基本用戶端工作流程的運作方式,現在可以繼續瞭解套件中的個別模擬器詳細資訊,包括如何將這些模擬器用於伺服器端應用程式開發:

後續步驟

請務必閱讀上述連結的特定模擬器相關主題。接著: