Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

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

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

在開始使用 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. Prototype 功能與模擬器和 Emulator Suite UI 交互。

  2. 如果您使用的是數據庫模擬器或 Cloud Functions 模擬器,請執行一次性步驟將您的應用程序連接到模擬器。

  3. 使用模擬器和自定義腳本自動化您的測試。

在本地初始化一個 Firebase 項目

確保安裝 CLI更新到其最新版本

curl -sL firebase.tools | bash

如果您還沒有這樣做,請將當前工作目錄初始化為 Firebase 項目,按照屏幕上的提示指定您使用的是Cloud FunctionsCloud FirestoreRealtime Database

firebase init

您的項目目錄現在將包含 Firebase 配置文件、數據庫的 Firebase 安全規則定義文件、包含雲函數代碼的functions目錄以及其他支持文件。

交互式原型

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

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

當您啟動 Local Emulator Suite 時,這一切都可用:

firebase emulators:start

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

  1. 通過編輯項目目錄中的functions/index.js文件,創建由數據庫寫入觸發的雲函數。用以下代碼片段替換現有文件的內容。此函數偵聽messages層次結構中節點的更改,將節點的original屬性的內容轉換為大寫,並將結果存儲在該節點的uppercase屬性中。
  2.   const functions = require('firebase-functions');
    
      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);
          });
      
  3. 使用firebase emulators:start啟動 Local Emulator Suite。 Cloud Functions 和數據庫模擬器啟動,自動配置為互操作。
  4. 通過http://localhost:4000在瀏覽器中查看 UI。端口 4000 是 UI 的默認端口,但請檢查 Firebase CLI 輸出的終端消息。注意可用模擬器的狀態。在我們的例子中,雲函數和實時數據庫模擬器將運行。
    我的形象
  5. 在 UI 中,在“實時數據庫”選項卡上,使用數據庫內容編輯器控件創建一組節點,其中一個messages節點包含一個message1節點,該節點又包含一個鍵設置為original且值設置為test的節點。這會觸發我們的雲功能。觀察到一個新的uppercase屬性很快出現,其值為TEST
    我的形象我的形象
  6. 檢查日誌選項卡以確認您的函數在更新數據庫時沒有運行錯誤。

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

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

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

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

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

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 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);
迅速
    // In almost all cases the ns (namespace) is your project ID.
let db = Database.database(url:"http://localhost:9000?ns=YOUR_DATABASE_NAMESPACE")

Web version 9

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

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

Web version 8

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

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

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

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

更深入地探索各個模擬器

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

接下來是什麼?

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