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


開始使用 Firebase Local Emulator Suite 前,請確認你已完成 Firebase 專案、設定開發環境,然後選取 安裝 Firebase SDK (請參閱開始使用 平台適用的 Firebase 主題:AppleAndroid網頁版

原型與測試

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 Functions,以及 Cloud FirestoreRealtime Database

firebase init

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

以互動方式設計原型

Local Emulator Suite 可協助您快速設計新功能的原型 以及套件內建的使用者介面 是最實用的原型設計 工具。看起來像是在本機執行 Firebase 控制台。

您可以使用 Emulator Suite UI 疊代資料庫設計,並試用 涉及雲端函式的不同資料流、評估安全性規則變更, 您可以查看記錄檔來確認後端服務的效能,以及執行其他操作。接著: 如果有需要重新開始 提出新的設計構想

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

firebase emulators:start

為了設計假定應用程式的原型,讓我們設定並測試基本的 Cloud 函式 修改資料庫中的文字項目,以及建立並填入該資料庫 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. 使用以下工具啟動 Local Emulator Suitefirebase emulators:startCloud Functions 和資料庫 模擬器會啟動,並自動設定為互通。
  4. 在瀏覽器中前往 http://localhost:4000 查看 UI。 通訊埠 4000 是 UI 的預設通訊埠,但透過以下項目檢查終端機訊息的輸出: Firebase CLI記下可用模擬器的狀態。在這個範例中 Cloud FunctionsCloud Firestore 模擬器將會執行。
    我的影像
  5. 在 UI 中,從「Firestore」>資料分頁,按一下 啟動集合,然後按照提示在 messages 集合,欄位名稱 original 和值 test。這會觸發 Cloud 函式。您會發現 系統很快就會顯示 uppercase 欄位並填入字串 「TEST」。
    我的影像 我的影像
  6. Firestore >要求分頁,查看傳送至以下項目的要求: 模擬資料庫,包括已執行的所有 Firebase Security Rules 評估作業 做為執行要求的其中一環
  7. 查看「記錄檔」分頁,確認函式並未執行錯誤 立即更新資料庫

您可以輕鬆地在 Cloud 函式程式碼和互動式內容之間進行疊代 編輯直到顯示您需要的資料流程為止 應用程式內資料庫存取碼,重新編譯和重新執行測試套件。

將應用程式連結至模擬器

取得互動式原型設計、取得成功 設計時,您會使用 適當的 SDK您將繼續使用「資料庫」分頁。至於函式, Emulator Suite UI 中的「記錄」分頁,可確認應用程式行為 是正確的。

請注意,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"

深入探索個別模擬器

現在您已瞭解基本用戶端工作流程 繼續提供套件中個別模擬器的詳細資料,包括 以便用於伺服器端應用程式開發:

接下來呢?

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