---
tags: Flutter
---

# Flutter 導入 Firebase Analytic 以及 Crashlytics

為了可以更好掌控上架APP的使用者使用情況以及錯誤訊息，因此在評估後決定先使用Firebase提供的Analytics以及Crashlytics這兩大服務，目前這兩個服務皆為免費使用，但因為免費，所以資料的保存期限就無法持久，而資料保存目前並不是我們需求的重點，故而決定先使用Firebase。Analytic可以用來收集以及分析使用者行為，而Crashlytics則可以收集APP錯誤或是崩潰時的訊息。

在這份筆記中，會紀錄一個新開的Flutter專案導入Firebase的過程。

### Firebase建立專案

第一步就是需要在Firebase上面建立一個專案，在建立專案完成後，就可以直接在專案上面新增應用程式。因為我的目標是在既有的專案中加入Firebase套件，雖然在文件中有說最簡單的方式是可以透過FlutterFire CLI來完成，但我本人其實對於這種可以一鍵完成的東西會比較警慎一點，畢竟他做了什麼我也不曉得，萬一完成後專案跑不起來也會增加自己要除bug的風險。所以我選擇另一種比較麻煩的方式，就是自己手動處理。

### Android 專案設置

首先，先來新增Android專案，


接下來填上AppId以及專案暱稱。


然後下載設定檔到Android專案中。


接下來就是按造說明在root層gradle中新增設定：

dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.google.gms:google-services:4.3.13'
        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.9.2'
    }

於app層級的gradle中新增以下設定：

dependencies {
        implementation platform('com.google.firebase:firebase-bom:31.0.2')
        implementation 'com.google.firebase:firebase-analytics'
        implementation 'com.google.firebase:firebase-crashlytics'
    }

apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.google.firebase.crashlytics'

以上就完成了Android的設定。

### iOS 設置
如同Android 在平台上面選擇iOS。


填上必要資訊。


下載google設定擋到專案之中。


再來是調整一下Deployment Target版本：


以上iOS就設置完成了，不用再另外對其進行Firebase的SDK導入。如果在pubspec.yaml中有引用firebase的東西的話，Flutter在build ios的時候時，就會自動透過cocoapod直接下載相關的SDK專案中。

**Firbase iOS Crash Report相關設定**
Firebase Crashlytics解析報告會需要用到dSYM檔，不然報告會無法解析，根據以下設定可以在build專案的時候自動將dSYM檔上傳到firebase上。

1. 建立Run Script Phase


2. 填入以下script

${PODS_ROOT}/FirebaseCrashlytics/run


3. Input Files設定

${DWARF_DSYM_FOLDER_PATH}/${DWARF_DSYM_FILE_NAME}/Contents/Resources/DWARF/${TARGET_NAME}

$(SRCROOT)/$(BUILT_PRODUCTS_DIR)/$(INFOPLIST_PATH)


4. 調整Dedug Information Fromat
都調整成DWARF with dSYM File。


最後再AppDelegate中加入初始化Firebase的程式碼。

import UIKit
import Flutter
import FirebaseCore

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,flutt
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    FirebaseApp.configure() //初始化Firebase
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

### Flutter 設置
完成了兩個平台的設置後，最後在Flutter中新增Plugin就差不多已經全部設置完成。

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.1.1
  firebase_analytics: ^10.0.3
  firebase_crashlytics: ^3.0.3

### Crash Test

可以透過以下程式碼觸發程式崩潰，而crash的資訊則會在下次APP開啟後才會傳送至firebase。

FirebaseCrashlytics.instance.crash();

以下是crash收到後的結果：



可以透過紀錄檔分頁查看使用者的操作情況。


資料的部分則可以提供使用者的設備型號等資訊。


### Debug測試

因為分析的數據可能需要數個小時才會真的在控制面板中顯示出來，所以Google就在控制頁面中提供DebugView，供我們在測試時可以及時的知道資訊是否有發送出去並被接收。


#### Android

但是要使用這種模式的話，Android需要透過已經command才能執行：

adb shell setprop debug.firebase.analytics.app com.your.applicationid

如果要停止測試模式，可輸入以下command:

adb shell setprop debug.firebase.analytics.app .none.

#### iOS

iOS則要在以下設定頁面中新增參數：

Product -> Scheme -> Edit Scheme...


在左邊的選單中選擇Run，並在Arguments這頁中的Arguments Passed On Launch 加上

-FIRDebugEnabled

專案run起來後狀態就會維持Debug模式。


如果要關閉Debug模式，則在相同的地方新增一下參數：

-FIRDebugDisabled

並且將啟動的參數勾選取消，再重新執行專案即可。


關於iOS的設定，也可以參考以下網頁資訊：
https://medium.com/@eason2019tw/ios-swift-%E5%95%9F%E7%94%A8ios-google-analytics-%E7%9A%84debugview-%E6%A8%A1%E5%BC%8F-28f235e2f120

## 在Flutter中的起手式

Firebase的初始化：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp().whenComplete((){
    runApp(const MyApp());
  });
}

使用Analytics觸發events:

var firebaseAnalytics = FirebaseAnalytics.instance;
firebaseAnalytics.logAppOpen(); //觸發App開啟Event

除了AppOpen這種預設的Event以外，還有許多其他的預設Event可供使用：

如果這些預設的Event都不符合使用，也可以自定義Event:

var firebaseAnalytics = FirebaseAnalytics.instance;
firebaseAnalytics.logEvent(
        name: "button_click",
        parameters: {
          "button_name" : "increment button"
        });