Flutter 接入 firebase 快速構建應用

對於flutter 接入 firebase 所遇到的問題 以及解決方案

Why Firebase

Firebase 爲後臺開發提供如下幾個功能

• 實時數據庫（Realtime database）
• 用戶認證（Authentication）
• 自定義API（Cloud function）
• 消息推送（Cloud messaging）
• 靜態網頁Hosting
• 雲存儲（Cloud storage）
• 實時監控（Analytics）

爲了快速驗證flutter方案的可行性以及高效的落地方案，咱們採起了接入firebase的方式解決服務問題，目前flutter ui app已經接入了 Analytics（支持 IOS Android）而且實現了app的綜合統計監控

接入方式

點擊 console.firebase.google.com/u/0/

填上包名以及其餘相關信息 flutter Android 對修改包名不太友好 須要重命名 android/app/src/main/java 裏面的文件路徑爲包文件 而且須要更改 MainActivity.java 以及 android/app/src/AndroidManifest.xml 的包名

Android 接入

• 下載 google-services.json 到 android/app/google-services.json
• android/build.gradle 增長:

buildscript {
    ......
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
        classpath 'com.google.gms:google-services:4.2.0' //firebase 注意 Android studio 提示版本進行更新
    }
}
複製代碼

• android/app//build.gradle 增長:

dependencies {
    ......
    implementation 'com.google.firebase:firebase-core:16.0.7' //firebase 注意 Android studio 提示版本進行更新
}

apply plugin: 'com.google.gms.google-services' //firebase支持 加到最後一行
複製代碼

IOS 接入

• 下載 GoogleService-Info.plist 到 ios/Runner/GoogleService-Info.plist 若是xcode讀取不到文件 須要導入到項目
• 修改 ios/Runner/AppDelegate.m

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"

@import Firebase;//增長 firebase 支持

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    
    [FIRApp configure];//增長 firebase 支持
    
  [GeneratedPluginRegistrant registerWithRegistry:self];
  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end
複製代碼

完成以上步驟後 刪除app 從新 flutter run -v 能夠看到 firebase 相關日誌 最後ios 跟安卓都會出現 成功提示以下圖

firebase_analytics 庫引入

修改 pubspec.yaml 增長

dependencies:
  firebase_analytics: ^2.0.3
複製代碼

安裝包

flutter packages get
複製代碼

封裝工具包而且引入到項目

lib/utils/analytics.dart

import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_analytics/observer.dart';

//統計
FirebaseAnalytics analytics = FirebaseAnalytics();
FirebaseAnalyticsObserver observer =
    FirebaseAnalyticsObserver(analytics: analytics);
複製代碼

lib/main.dart

import 'package:efox_flutter/utils/analytics.dart' as Analytics;
......
class MainAppState extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    MaterialApp(
        ......
        navigatorObservers: <NavigatorObserver>[Analytics.observer],//加入路由統計
      );
  }
}
複製代碼

其餘調用

import 'package:efox_flutter/utils/analytics.dart' show analytics;
analytics.logEvent(name: 'component', parameters: {'name': itemInfo.title});
複製代碼

增長上面代碼後須要在firebase 管理後臺增長 name關鍵字統計

總結

完成以上步驟後 flutter 就能夠完美集成firebase 目前Analytics 幫助咱們找到不少程序上遇到的問題 後面篇幅咱們也會對firebase 其餘服務進行刨析 有興趣的同窗能夠一塊兒探討