Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

之前在火力地堡本地模擬器套房跳,確保你已經創建了一個火力地堡項目,成立了自己的開發環境,並選擇您的平台安裝了火力地堡的SDK根據開始火力地堡主題為您的平台獲取iOS版Android版網頁

原型和測試

本地仿真套件包含多個產品仿真器,在描述介紹火力地堡本地模擬器套房。根據您在生產中使用的 Firebase 產品,您可以根據自己的需要,使用單獨的模擬器以及模擬器的組合進行原型設計和測試。

Firebase dstabase 和函數模擬器之間的交互
數據庫和雲功能仿真器作為的一部分完全本地模擬器套房

對於本主題,為了介紹 Local Emulator Suite 工作流程,假設您正在開發一個使用典型產品組合的應用:Firebase 數據庫和由對該數據庫的操作觸發的雲函數。

在本地初始化 Firebase 項目後,使用 Local Emulator Suite 的開發週期通常包含三個步驟:

  1. 原型功能與模擬器和模擬器套件 UI 交互。

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

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

在本地初始化 Firebase 項目

請確保您安裝CLI更新的最新版本

curl -sL firebase.tools | bash

如果你還沒有這樣做,初始化當前的工作目錄作為一個火力地堡項目,按照屏幕上的提示指定您正在使用雲計算的功能,要么雲公司的FireStore實時數據庫

firebase init

你的項目目錄現在將包含火力地堡配置文件,數據庫中的火力地堡安全規則定義文件, 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. 查看您的瀏覽器UI在http://localhost:4000 。端口 4000 是 UI 的默認端口,但請檢查 Firebase CLI 輸出的終端消息。請注意可用模擬器的狀態。在我們的例子中,雲函數和實時數據庫模擬器將運行。
    我的形象
  5. 在界面中,實時數據庫選項卡上,使用的數據庫內容編輯控件來創建一組節點有messages節點含有message1節點,依次包含具有鍵組的一個節點到original和值設置為test 。這會觸發我們的雲功能。觀察到一個新的uppercase屬性,將出現不久,隨著價值TEST
    我的形象我的形象
  6. 檢查日誌選項卡來確認你的函數沒有inot運行錯誤,因為它更新的數據庫中。

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

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

當您在交互式原型製作方面取得良好進展並確定設計時,您就可以使用適當的 SDK 將數據庫訪問代碼添加到您的應用程序中。你會繼續使用該數據庫選項卡,並用於功能,在模擬器套房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);
iOS - 斯威夫特
    // In almost all cases the ns (namespace) is your project ID.
let db = Database.database(url:"http://localhost:9000?ns=YOUR_DATABASE_NAMESPACE")

網頁版 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);
} 

網頁版 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"

更深入地探索各個模擬器

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

接下來是什麼?

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