如何將實體裝置連線到您的 Firebase 模擬器:一個新手友好指南


摘要

本文專門介紹如何將實體裝置成功地連線到您的 Firebase 模擬器。此指南不僅有助於新手理解過程中涉及的關鍵步驟和技術細節,還能確保他們能夠有效地利用這些工具來提升其開發效率和產品質量。 歸納要點:

  • 遠端模擬與實體裝置測試的互補性:透過Firebase Emulator Suite,開發者可以在不部署真實硬體的情況下,進行故障排除和功能驗證,這與實體裝置測試相輔相成,提高了應用程式的整體穩定性和效能。
  • Flutter 應用與 Firebase 模擬器的無縫連結:詳細解釋如何配置Flutter應用程式以連接到Firebase Emulator Suite,使開發流程更加流暢,並允許即時測試與除錯。
  • 安全連結外部裝置至Firebase模擬器:強調了在連接外部裝置至模擬器時考量安全性的重要性,並分享了一些防止資料外洩和未經授權存取的最佳實踐技巧。
結合遠端模擬技術和實際硬體測試,在現代軟件開發中展示出極大的優勢。通過本文所述方法, 開發者不僅可以增強其開發流程、安全性也得到顯著提升, 從而推動更快速、更安全、更創新的應用程序開發。

每位 Flutter 開發者共同的目標是:推出一款既高效又無缺陷的應用程式。要達到這個目標,需要在一個與真實世界極為相似的環境中進行嚴格的測試,讓開發者能夠在問題影響使用者之前找到並解決它們。測試條件越接近實際使用情境,開發者就能越有效地對其應用進行微調,確保穩定性、可用性和流暢的效能。

雖然有時候直接在生產環境中進行測試,以便測試與客戶體驗完全匹配的誘惑很大,但這樣做風險非常高。不僅可能會干擾現有使用者的實時服務,還可能帶來大量意外成本。想像一下,如果雲功能中的一個錯誤迴圈無意中執行了數千次操作——每一次都會產生費用。如果你不想成為一則不幸新聞的主角,一個安全、隔離的測試環境至關重要。
我們在研究許多文章後,彙整重點如下
網路文章觀點與我們總結
  • 安裝及設定Android Studio,建立第一個專案並在裝置或模擬器上運行。
  • 開始設置FlutterFire前,確保當前的應用程式未在任何模擬器上執行。
  • 從Flutter專案中打開pubspec.yaml文件,加入Firebase Core Flutter SDK套件。
  • 使用Android模擬器時,需從Google Play程式庫建立Firebase所需的AVD映像檔。
  • 利用Firebase的Emulator Suite庫,在Android項目中連接到本地運行的Firebase函數。
  • 進行Flutter Firebase模擬器設置包括安裝Firebase CLI、初始化Firebase項目和調整firebase.json文件。

近年來,隨著移動開發技術的迅猛發展,越來越多開發者採用了如Android Studio和Flutter等工具來創建各種手機應用。本文主要介紹了如何配置和使用這些工具以及集成Firebase服務來增強應用功能。無論是初學者還是有經驗的開發者,都能夠找到實用的步驟和方法來提升自己的技術水平與產品質量。

觀點延伸比較:
步驟工具/技術操作說明目的
安裝及設定Android StudioAndroid Studio下載並安裝Android Studio,配置相應的開發環境設置。準備在真實裝置或模擬器上運行和測試應用。
建立第一個專案並在裝置或模擬器上運行Android Studio / Android 裝置或AVD模擬器創建新項目並進行基本配置,然後選擇連接到物理裝置或啟動AVD模擬器進行部署與測試。確保開發的App能正常在指定環境中執行。
開始設置FlutterFire前, 確保當前的應用程式未在任何模擬器上執行---
加入Firebase Core Flutter SDK套件pubspec.yaml 文件操作於Flutter專案的pubspec.yaml文件中添加firebase_core依賴。集成Firebase至Flutter項目,讓項目支持後續各種Firebase服務。
建立所需的AVD映像Google Play程式庫 / AVD Manager使用提供Google Play服務支援的AVD映像,以便更好地整合和測試Firebase功能。使得在Android模擬器上可以完整地使用Firebase服務,包括推送通知等功能。
連接到本地運行的Firebase函數Firebase Emulator Suite / Android 項目設定利用Emulator Suite進行本地伺服端功能測試。快速、私密地對開發中的函數進行初步測試和調整,而無需部署到實際生產環境中。
進行Flutter Firebase模擬器設置Firebase CLI、firebase.json文件安裝CLI工具、初始化項目及調整配置文件以配合本地開發需要。根据开发环境对应调整项目设置,在测试阶段更轻松管理和调试Firebase服务。


這就是 Firebase Emulator Suite 發揮作用的地方。它在本地模擬 Firebase 服務,允許對應用功能如認證、資料庫操作及伺服器端邏輯進行徹底測試,而不必承擔將程式碼部署到實際後端時的風險。透過在物理裝置上結合使用這些本地模擬器進行測試,開發者可以觀察他們的應用程式在最終使用者將操作的實際裝置上的表現如何,這橋接了實驗室環境與現實生活使用之間的差距,且無需冒著在生產環境中測試的危險。


遠端模擬與實機測試的互補性


有許多關於設定 Firebase 模擬器套件的優秀文章,這些文章假設模擬器是在與待測軟體相同的裝置上執行。事實上,Google 自家的文件就非常出色。對於移動開發者來說,經常在實體裝置上進行測試極為重要,而不僅是在模擬的 iPhone 和 Android 裝置上。這是因為模擬器無法完美地復制移動裝置的硬體行為,如電池使用、相機功能和 GPS 精準度。在模擬器上完全理解一個應用程式的感覺也頗有難度。在真實裝置上進行測試有助於確保應用程式在實際使用情況下表現良好,捕捉到模擬器可能錯失的細節和互動。

**專案1:在遠端裝置上執行模擬器,提升測試效能**

開發人員透過遠端執行模擬器可以將模仿環境與測試裝置分開操作,釋放本地裝置資源;這種方式可以加速済速度並提升效能。

**專案2:模擬器與真實裝備測試的互補性**

同時進行模擬和真實裝置測試具體優缺點不同。透過模擬測試快速高效, 而透過真實裝置測試則能更準確評估應用程式效果。兩種方法相輔相成, 開發人員應根據特定需求選擇合適的測試策略。


連結 Flutter 應用程式至 Firebase Emulator Suite


關於如何將實體移動裝置連線到 Firebase Emulator Suite 的檔案資料異常缺乏,因此本文將詳細介紹這一過程。但在我們開始探討實體裝置之前,首先需要了解如何在同一開發機上連線 Flutter 應用程式至 Firebase Emulator Suite。要做到這點,你需要遵循數個步驟,這些步驟也已在其他地方有很好的檔案記載。

在您能夠將您的 Flutter 應用程式連結到 Firebase 模擬器之前,您必須先在本地機器上安裝 Firebase CLI 並設定 Firebase Emulator Suite。您可以使用 npm 來安裝 Firebase CLI:

```
npm install -g firebase-tools
```

安裝完成後,您可以使用以下命令啟動 Firebase Emulator Suite:

```
firebase emulators:start
```

在連線 Flutter 應用程式至 Firebase Emulator Suite 的過程中,還需注意幾個重要趨勢和深入要點:

* **使用 Firestore 模擬器:** Firestore 模擬器讓您能夠在本地模擬 Firestore 資料庫操作,使得測試及除錯 Firestore 功能更加便捷。若需更多詳情,可參考 Google Cloud 官方檔案。
* **使用認證模擬器:** Firebase 認證模擬器允許您在本地環境模擬認證服務,無需真實的電子郵件或電話號碼即可測試認證流程。
* **使用雲端儲存模擬器:** 雲端儲存模擬器能讓您在本地模仿與雲端儲存服務的互動方式,方便測試和除錯相關功能。

透過上述步驟與指南的協助下, 將物理移動裝置成功連線至Firebase Emulator Suite不再是困難事項。


npm install -g firebase-tools

如果您尚未在您的專案目錄中初始化 Firebase,請立即進行:

firebase init

在初始化過程中,選擇您要設定的模擬器(例如:Firestore、Authentication、Functions)。此設定將在您的專案目錄中建立一個 firebase.json 檔案,其中儲存了模擬器的設定。請記住這個 firebase.json 檔案,因為我們很快就會再次提到它。在您的 Flutter 應用程式中,您需要確保 Firebase 套件配置為連線到模擬器而不是實際執行的 Firebase 服務。修改 Flutter 應用程式中 Firebase 的初始化部分,使其連線到本地模擬器例項。這通常在 main.dart 檔案或您初始化 Firebase 的位置進行操作。

void main() async {   WidgetsFlutterBinding.ensureInitialized();      // Initialize Firebase.   await Firebase.initializeApp();    // In debug mode, use the Firebase local emulator.   if (kDebugMode) {     FirebaseFirestore.instance.useFirestoreEmulator('localhost', 8080);     await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);     FirebaseFunctions.instance.useFunctionsEmulator('localhost', 5001);      debugPrint('Using Firebase emulator suite');   }    runApp(MyApp()); }

The conditional statement,

if (kDebugMode) {...}

這是可選的,但我發現在除錯期間確保 Flutter 應用程式始終使用 Firebase Emulator Suite 非常有用。配置好您的 Firebase 模擬器並設定您的 Flutter 應用程式以連線到這些模擬器後,您現在可以啟動模擬器:

firebase emulators:start

此指令將啟動您設定的所有模擬器。在啟動您的 Flutter 應用程式之前,請確保它們已經執行。現在,您可以在除錯模式下執行您的 Flutter 應用程式,它將使用 Firebase Emulator Suite。命令列介面也會通知您這一點,但您可以透過導航到(通常是)http://localhost:4000/ 來訪問模擬器套件的使用者介面


在外部裝置上連線到 Firebase Emulator Suite

當您的應用程式開始執行時,嘗試執行與 Firebase 服務互動的操作(例如,使用 FirebaseAuth 登入、在 Firestore 中讀寫檔案)。您應該能在模擬器 UI 中看到這些操作反映出來,從而確認您的 Flutter 應用已正確連線到 Firebase 模擬器。

好的,現在您的 Flutter 應用能夠在同一台機器上連線到 Firebase Emulator Suite,若要將執行於外部移動裝置(如 Android 手機、iPhone 或 iPad)的 Flutter 應用連線到 Firebase Emulator Suite,則需要進行一些調整。

您需要確定開發機器的 IP 地址。此 IP 地址將取代 Flutter 應用中 Firebase 初始化程式碼中的 localhost 參考。以下是在常見作業系統上查詢 IP 地址的方法:

**專案 1 具體說明:**
請參考此指南來設定外部裝置以使用 Firebase Emulators:https://firebase.google.com/docs/emulator-suite/connect-external-devices?platform=flutter。本指南涵蓋瞭如何設定外部裝置連線、如何獲得開發機器 IP 位址以及如何修改 Flutter 應用程式初始化程式碼以反映外部連線。

**專案 2 具體說明:**
在 Flutter 應用程式初始化程式碼中針對每個需要外部連線的 Firebase 服務建立自訂 URL。例如:
```dart
Firebase.initializeApp(
name: ′My Flutter App′,
options: FirebaseOptions(
apiKey: ′...′,
appId: ′...′,
projectId: ′...′,
authDomain: ′...′,
databaseURL: ′http://<YOUR_DEV_MACHINE_IP_ADDRESS>:9000/?ns=...&emulator=true′,
storageBucket: ′...′,
messagingSenderId: ′...′,
),
);
```



Windows:
開啟命令提示字元並輸入 ipconfig。在您的網路連線下查詢「IPv4 地址」。

macOS:
開啟系統偏好設定,進入網路,選擇您的活動網路連線。IP 地址應該會在那裡顯示。

Linux:
開啟終端機並輸入 hostname -I,這將顯示出您機器的 IP 地址。

將您在 Flutter 應用程式中 Firebase 初始化程式碼中的 localhost 參考替換為您獲得的 IP 地址。這允許外部裝置正確地定位伺服器。以下是如何在 main.dart 中修改設定:



void main() async {   WidgetsFlutterBinding.ensureInitialized();      // Initialize Firebase.   await Firebase.initializeApp();    // In debug mode, use the Firebase local emulator.   if (kDebugMode) {     // The IP address of the machine running the Firebase emulator suite. Use "localhost" if running the emulator     // suite on the same machine as the app. Otherwise, use the IP address of the machine running the emulator suite.     const String devMachineIP = '192.168.x.x';  // Replace with your actual IP address      FirebaseFirestore.instance.useFirestoreEmulator(devMachineIP, 8080);     await FirebaseAuth.instance.useAuthEmulator(devMachineIP, 9099);     FirebaseFunctions.instance.useFunctionsEmulator(devMachineIP, 5001);   }    runApp(MyApp()); }

還記得我們在為這個專案初始化 Firebase 時建立的 firebase.json 檔案嗎?為了允許外部裝置連線,您需要配置 Firebase Emulator Suite 接受來自任何 IP 地址的請求,而不僅是 localhost。這可以透過在 firebase.json 檔案中將所有模擬器的主機設定為 0.0.0.0 來完成:

{   "emulators": {     "auth": {       "host": "0.0.0.0",       "port": "9099"     },     "firestore": {       "host": "0.0.0.0",       "port": "8080"     },     "functions": {       "host": "0.0.0.0",       "port": "5001"     },     // Include other services as needed   } }

安全使用 Firebase 模擬器連線外部裝置

配置 Firebase 模擬器以接受來自任何 IP 位址的連線,雖可讓您從外部裝置進行測試,但同時也使您的模擬器暴露於網路之中。因此,這種設定只應在安全、受控制的網路環境下使用,以防止未授權存取。絕對不要將您的 Firebase 模擬器套件暴露於網際網路或不安全的網路上。

雖然檔案記載不多,但連線外部移動裝置至 Firebase 模擬器套件僅需兩項主要更改:
1. 在 firebase.json 中將模擬器的主機設定為 0.0.0.0 ,使您的應用程式能從非本地計算機裝置連線。
2. 更新您的 Flutter 應用程式,使用開發機器的 IP 地址代替 localhost。

透過設定您的 Flutter 應用程式以連線到外部移動裝置上的 Firebase 模擬器套件,您就配備了在開發計算機之外進行徹底測試所需工具。這種能力確保了在向市場推出前,在真實世界裝置上驗證其功能性而無需冒著危害生產環境風險。


參考來源

Android 基本概念:使用Compose 和Firebase - Kotlin 程式設計簡介

設定Android Studio. 安裝及設定Android Studio,建立您的第一個專案,並在裝置或模擬器上執行。 2022 年4 月. 探索. 課程3. 建立基本版面配置. 建構具有簡單使用者介面的 ...

來源: Android Developers

30天Flutter手滑系列- Firebase 設定 - iT 邦幫忙

開始設置FlutterFire · 首先確保當前的應用程式並未在任何模擬器上執行。 · 從Flutter專案,打開 pubspec.yaml 。 · 加入Firebase Core Flutter SDK套件。

來源: iT 邦幫忙

Tweakr:使用Firebase + Android 設計綠野仙蹤原型並進行遠端控制

如果您使用的是Android 模擬器,請務必從Google Play 程式庫建立Firebase 所需的AVD 映像檔。 6f6d2c9539143a5a.png.

來源: Android Developers

Firebase模拟器函数和Android模拟器

模拟器将会在本地启动,并提供模拟的Firebase函数。 在Android中使用模拟的Firebase函数:在Android项目中,您可以使用Firebase的Emulator Suite库来连接到本地运行的 ...

來源: 火山引擎

Firebase | #4 設定手機號碼進行登入驗證. 前言| by 黃暉德Wade Huang

reCAPTCHA verification 運用在使用者取消手機App 的背景整理,就無法收到silent push notification 的token,或是運用在利用iOS 模擬器進行測試,就需要 ...

來源: Medium

How to use Firebase Emulator suite for Flutter

The Firebase provides an emulator suite for the local dev environment. The suite allows us to run the... Tagged with flutter, firebase, ...

來源: DEV Community

A local-first UI for Firebase Emulator Suite.

A local-first UI for Firebase Emulator Suite. Contribute to firebase/firebase-tools-ui development by creating an account on GitHub.

來源: GitHub

Flutter 的Firebase 模拟器设置原创

Flutter 的Firebase 模拟器设置 原创 · 安装Firebase CLI · 初始化Firebase 项目 · 选择服务 · 选择项目 · 到Flutter 方面 · 调整firebase.json 文件.

來源: CSDN博客

JDoe

專家

相關討論

❖ 相關專欄