第 11 屆 iThome 鐵人賽

DAY 13

Mobile Development

30天手滑用Google Flutter解鎖Hybrid App成就系列第 13 篇

30天Flutter手滑系列 - Firebase 設定

11th鐵人賽 flutter

Raymond雷門

2019-09-20 18:20:23

6989 瀏覽

結束上一篇30天Flutter手滑系列 - JSON與序列化(JSON and serialization)，關於與後端溝通做資料交換的部分，接下來要把重要的Firebase補齊，基本上就擁有建置一個具有互動性的App能力了。

什麼是Firebase

Firebase是一個能同時支援iOS、Android和網頁的app雲端開發平台，是app開發者最愛的後端服務平臺(Backend as a Services，Baas)之一。
主要提供即時資料庫，雲端儲存，機器學習，驗證等功能，可以有效縮短app開發時間，並幫助開發者更專注在前端的優化。

更多介紹可以參考Firebase 是什麼 ? 集 APP 後端開發與分析於一身的強大工具！

環境建置

安裝Flutter SDK，可參考30天Flutter手滑系列(2)- SDK環境設定
安裝編輯器或IDE，可參考30天Flutter手滑系列(3)- 雙平台及IDE環境設定
開啟或創建一個新的Flutter專案
- iOS必須高於iOS 8 版本。
- Android必須高於API level 16(Jelly Bean)或更高。
設置模擬器與開發環境連動。
使用Google帳戶登入Firebase。

創建Firebase專案

首先到Firebase主控台，建立新的專案。
建立專案名稱，這邊以FlutterDemo示範。
啟動Google Analytics (選填)
設定數據分析位置，可選台灣
新專案就緒

配置應用程式以使用Firebase

Firebase可以根據你需要的平台，個別配置不同設定。

配置iOS app

點擊新增iOS，會跳出需要註冊應用程式，必須填入iOS軟體包ID。

如何找出iOS軟體包ID?
使用編輯器打開現有的flutter專案的/ios/Runner/Runner.xcodeproj/project.pbxproj -> 搜尋PRODUCT_BUNDLE_IDENTIFIER

找到後填入iOS軟體包ID，其他則是選填，填完下一步。
在這裏會要下載設定檔

下載下來的設定檔，請放到Flutter專案內的ios/Runner

繼續後續步驟，直到最後一步進行略過。
iOS設置完成

配置Android app

點擊新增Android，會跳出需要註冊應用程式，必須填入Android套件名稱。

如何找出Android套件名稱？
使用編輯器打開現有的flutter專案的android/app/build.gradle -> 搜尋applicationId

找到後填入Android套件名稱，其他則是選填，填完下一步。
在這裏會要下載設定檔

下載下來的設定檔，請放到Flutter專案內的android/app

繼續後續步驟，直到最後一步進行略過。
Android設置完成。
接下來要在Android啟用Firebase服務，需要手動添加設定到Gradle文件中。

打開android/build.gradle，找到dependencies。

buildscript {

  repositories {
    google()  
  }

  // ...
  dependencies {
    // ...

    // 加入以下這行
    classpath 'com.google.gms:google-services:3.2.1'  // Google Services plugin
  }
}
allprojects {
  // ...

  repositories {
    google()
    // ...
  }
}

注意：Flutter 目前与 Google 服务插件 3.2.1 版兼容。

打開`android/app/build.gradle，另外添加以下設定到文件底部。

dependencies {
  // ...
}

// ...

// 加入以下這行到文件底部
apply plugin: 'com.google.gms.google-services'  // Google Play services Gradle plugin

執行flutter pub get

添加FlutterFire套件

Firebase可透過不同的函式庫被存取，像是即時資料庫(Realtime Database)、身份驗證(Authentication)、分析(Analytics)和儲存(Storage)，Flutter提供的一整套函數庫，稱為FlutterFire。
由於Flutter是一個多平台SDK，每個FlutterFire套件同時適用於iOS和Android，因此，如果向Flutter的應用程式添加FlutterFire套件，則雙平台版的Firebase都可以使用該套件。

有需要了解FlutterFire包含哪些套件，可參閱。

開始設置FlutterFire

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

dependencies:
  flutter:
    sdk: flutter
  # 加入Firebase Core Flutter SDK
  firebase_core: ^0.4.0+1

添加分析(可選)

若有啟用分析功能：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.4.0+1

  # 加入 Google Analytics
  firebase_analytics: ^4.0.2

  # 加入其他相依的Firebase產品，像是Authentication和Cloud Firestore
  firebase_auth: ^0.11.1+3
  firebase_firestore: ^0.12.7+1

若無啟用分析功能：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.4.0+1

  # 加入其他相依的Firebase產品，像是Authentication和Cloud Firestore
  firebase_auth: ^0.11.1+3
  firebase_firestore: ^0.12.7+1

執行flutter package get
如果有添加分析功能，可以在運行App後，到Firebase控制台中，點擊左側的數據分析查看。

勘誤

依照官網範例添加firebase_firestore: ^0.12.7+1後，若執行flutter package get，會產生firebase_firestore ^0.12.7+1 which doesn't match any versions, version solving failed.的錯誤。
原因是firestore已經被棄用，依照這篇Stackoverflow的討論，建議改用cloud_firestore。