Catch up on everthing we announced at this year's Firebase Summit. Learn more

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

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

原型和測試

本地仿真套件包含多個產品仿真器,在描述介紹火力地堡本地模擬器套房。根據您在生產中使用的 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.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. 查看您的瀏覽器UI在http://localhost:4000 。端口 4000 是 UI 的默認端口,但請檢查 Firebase CLI 輸出的終端消息。請注意可用模擬器的狀態。在我們的例子中,Cloud Functions 和 Cloud Firestore 模擬器將運行。
    我的形象
  5. 在UI中,公司的FireStore選項卡上,數據子選項卡上,單擊開始收集,並按照提示在創建一個新的文檔messages的收集,使用字段名original和值test 。這會觸發我們的雲功能。觀察到一個新的uppercase字段出現不久,填充了字符串“TEST”。
    我的形象我的形象
  6. 公司的FireStore>請求選項卡,檢查你的模擬的數據庫,包括所有火力地堡安全規則的評估提出的請求為履行這些要求的一部分執行。
  7. 檢查日誌選項卡來確認你的函數沒有遇到錯誤,因為它更新的數據庫中。

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

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

當您在交互式原型設計方面取得良好進展並確定設計時,您就可以使用適當的 SDK 將數據庫訪問代碼添加到您的應用程序中。你會繼續使用該數據庫選項卡,並用於功能,在模擬器套房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

網頁版 9

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

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

網頁版 8

// Firebase previously initialized using firebase.initializeApp().
var db = firebase.firestore();
if (location.hostname === "localhost") {
  db.useEmulator("localhost", 8080);
}
網絡
// Initialize your Web app as described in the Get started for Web
// 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"

更深入地探索各個模擬器

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

接下來是什麼?

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