Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

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

在開始使用 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.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啟動本地模擬器套件。 Cloud Functions 和數據庫模擬器啟動,自動配置為互操作。
  4. 在瀏覽器中的http://localhost:4000查看 UI。端口 4000 是 UI 的默認端口,但請檢查 Firebase CLI 輸出的終端消息。注意可用模擬器的狀態。在我們的例子中,雲函數和實時數據庫模擬器將運行。
    我的形象
  5. 在 UI 的Realtime Database選項卡上,使用數據庫內容編輯器控件創建一組節點,其中一個messages節點包含一個message1節點,而該節點又包含一個鍵設置為original且值設置為test的節點。這觸發了我們的雲功能。觀察很快就會出現一個新的uppercase屬性,其值為TEST
    我的形象我的形象
  6. 檢查日誌選項卡以確認您的函數在更新數據庫時沒有運行 inot 錯誤。

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

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

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

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

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

安卓
        // 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"

更深入地探索單個模擬器

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

接下來是什麼?

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