获取我们在 Firebase 峰会上发布的所有信息,了解 Firebase 可如何帮助您加快应用开发速度并满怀信心地运行应用。了解详情

連接您的應用並開始原型設計

在開始使用 Firebase Local Emulator Suite 之前,請確保您已經創建了一個 Firebase 項目,設置了您的開發環境,並根據適用於您的平台的Firebase 入門主題為您的平台選擇並安裝了 Firebase SDK: AppleAndroid網絡

原型和測試

Local Emulator Suite 包含多個產品模擬器,如Firebase Local Emulator Suite 簡介中所述。您可以根據您在生產中使用的 Firebase 產品,根據您認為合適的方式使用單個模擬器以及模擬器組合進行原型設計和測試。

Firebase 數據庫和函數模擬器之間的交互
數據庫和雲功能模擬器作為完整的本地模擬器套件的一部分。

對於本主題,為了介紹 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 安全規則定義文件、包含雲函數代碼的functions目錄以及其他支持文件。

交互式原型

Local Emulator Suite 旨在讓您快速製作新功能的原型,套件的內置用戶界面是其最有用的原型製作工具之一。這有點像讓 Firebase 控制台在本地運行。

使用 Emulator Suite UI,您可以迭代數據庫設計、嘗試涉及雲功能的不同數據流、評估安全規則更改、檢查日誌以確認後端服務的執行情況等等。然後,如果您想重新開始,只需清除數據庫並從新的設計理念重新開始。

當您啟動本地仿真器套件時,這一切都可用:

firebase emulators:start

為了對我們假設的應用程序進行原型設計,讓我們設置並測試一個基本的雲函數來修改數據庫中的文本條目,並在 Emulator Suite UI 中創建和填充該數據庫以觸發它。

  1. 通過編輯項目目錄中的functions/index.js文件來創建由數據庫寫入觸發的雲函數。將現有文件的內容替換為以下代碼段。此函數偵聽messages集合中文檔的更改,將文檔original字段的內容轉換為大寫,並將結果存儲在該文檔的uppercase字段中。
  2.   const functions = require('firebase-functions');
    
      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啟動本地模擬器套件。 Cloud Functions 和數據庫模擬器啟動,自動配置為互操作。
  4. 在瀏覽器中的http://localhost:4000查看 UI。端口 4000 是 UI 的默認端口,但請檢查 Firebase CLI 輸出的終端消息。注意可用模擬器的狀態。在我們的例子中,Cloud Functions 和 Cloud Firestore 模擬器將運行。
    我的形象
  5. 在 UI 中,在Firestore > Data選項卡上,單擊Start collection並按照提示在messages集合中創建一個新文檔,字段名original和 value test 。這觸發了我們的雲功能。觀察很快就會出現一個新的uppercase字段,其中填充了字符串“TEST”。
    我的形象我的形象
  6. Firestore > Requests選項卡上,檢查對模擬數據庫發出的請求,包括作為滿足這些請求的一部分執行的所有 Firebase 安全規則評估。
  7. 檢查日誌選項卡以確認您的函數在更新數據庫時沒有遇到錯誤。

您可以輕鬆地在雲函數代碼和交互式數據庫編輯之間進行迭代,直到獲得所需的數據流,而無需觸及應用內數據庫訪問代碼、重新編譯和重新運行測試套件。

將您的應用程序連接到模擬器

當您在交互式原型設計方面取得良好進展並確定設計時,您就可以使用適當的 SDK 將數據庫訪問代碼添加到您的應用程序中。您將繼續使用數據庫選項卡,對於函數,使用 Emulator Suite UI 中的日誌選項卡來確認您的應用程序的行為是否正確。

請記住,Local Emulator Suite 是一種本地開發工具。寫入生產數據庫不會觸發您在本地進行原型設計的功能。

要切換到讓您的應用寫入數據庫,您需要將測試類或應用內配置指向 Cloud Firestore 模擬器。

安卓
// 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);
迅速
let settings = Firestore.firestore().settings
settings.host = "localhost:8080"
settings.isPersistenceEnabled = false 
settings.isSSLEnabled = false
Firestore.firestore().settings = settings

Web version 9

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

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

Web version 8

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

使用自定義腳本自動化您的測試

現在是最後一個整體工作流程步驟。一旦您在應用程序中對您的功能進行了原型設計並且它在您的所有平台上看起來很有希望,您就可以轉向最終實施和測試。對於單元測試和 CI 工作流程,您可以使用exec命令在一次調用中啟動模擬器、運行腳本測試和關閉模擬器:

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

更深入地探索單個模擬器

現在您已經了解了基本客戶端工作流程的樣子,您可以繼續了解套件中各個模擬器的詳細信息,包括如何將它們用於服務器端應用程序開發:

接下來是什麼?

請務必閱讀與上面鏈接的特定模擬器相關的主題。然後: