久しぶりにFlutterFireを使ってみて、AnalyticsのDebugViewにデータが表示されるまで

半年ぶりにflutterfireでも使おうかと思ったらこんなメッセージが

firebase.google.comのドキュメントに統合されたみたいですね。

新しいプロジェクトを始めるときは、ドキュメントを見返すことから始めないといけませんね。

とりあえず、flutter upgrade

Flutter 3.0.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f1875d570e (13 days ago) • 2022-07-13 11:24:16 -0700
Engine • revision e85ea0e79c
Tools • Dart 2.17.6 • DevTools 2.12.2

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.69.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

新しいパソコンで Firebase CLI がインストールされてなかったので、自動インストール スクリプトでインストールしてみることに

https://firebase.google.com/docs/cli#install-cli-mac-linux

curl -sL https://firebase.tools | bash

$ curl -sL https://firebase.tools | bash
Password:
-- Checking for existing firebase-tools on PATH...
-- Checking your machine type...
-- Downloading binary from https://firebase.tools/bin/macos/latest
######################################################################## 100.0%#=#=#                                                                         
-- Setting permissions on binary...
-- Checking your PATH variable...
-- firebase-tools@11.3.0 is now installed
-- All Done!

さらにfirebase loginしてdart pub global activate flutterfire_cliを実行

そしてflutterfire configureするにはflutter projectが必要なので flutter create -t skeleton .を実行

firebaseのプロジェクトはflutterfire configureの過程でも作れるみたいですが、 一意のIDが必要なので、webのコンソールから作った方が手っ取り早い。

そしてやっとここでflutterfire configure実行。実行結果↓

この結果は、webのコンソールにも反映されている

そして嬉しいのが、androidiosの設定も追加してくれるところです。 https://github.com/na8esin/flutterfire_cli_sample/commit/c4d1e59fc4a09d3c83b73e78d0e6a0ce64cc78d4

firebase_coreを追加してみます。

flutterfire_cli_sample$ flutter pub add firebase_core
Resolving dependencies...
  async 2.8.2 (2.9.0 available)
  characters 1.2.0 (1.2.1 available)
  clock 1.1.0 (1.1.1 available)
  fake_async 1.3.0 (1.3.1 available)
+ firebase_core 1.20.0
+ firebase_core_platform_interface 4.5.0
+ firebase_core_web 1.7.1
+ flutter_web_plugins 0.0.0 from sdk flutter
+ js 0.6.4
  matcher 0.12.11 (0.12.12 available)
  material_color_utilities 0.1.4 (0.1.5 available)
  meta 1.7.0 (1.8.0 available)
  path 1.8.1 (1.8.2 available)
+ plugin_platform_interface 2.1.2
  source_span 1.8.2 (1.9.1 available)
  string_scanner 1.1.0 (1.1.1 available)
  term_glyph 1.2.0 (1.2.1 available)
  test_api 0.4.9 (0.4.12 available)
Changed 6 dependencies!

git checkoutしてみます。

flutterfire_cli_sample$ git checkout 
M   ios/Flutter/Debug.xcconfig
M   ios/Flutter/Release.xcconfig
M   macos/Flutter/Flutter-Debug.xcconfig
M   macos/Flutter/Flutter-Release.xcconfig
M   macos/Flutter/GeneratedPluginRegistrant.swift
M   pubspec.lock
M   pubspec.yaml

前から、ここまで自動で追加してくれましたっけ?
半年、離れただけで、かなり便利になっている気がする。

https://github.com/na8esin/flutterfire_cli_sample/commit/53b19113fd03b99da21b9c476ca0c4f92670e98e

https://firebase.google.com/docs/flutter/setup?platform=android#initialize-firebase では、flutterfire configureをやることになってますが、最初にやってるので特に変化はなし。

lib/main.dartに下記を追加していきます。

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);

ここでいつもならFirestoreを追加しますが、今までやったことがないanalyticsを追加していきます。
※サンプルに載ってるため

flutter pub add firebase_analytics

https://github.com/na8esin/flutterfire_cli_sample/commit/799afc6ba1ccbdcc5bfee79c374fdbadd954a69c

そして、skeletonで作ったのが意味無くなりますが、下記のコードを指示通りコピペ

https://github.com/firebase/flutterfire/tree/master/packages/firebase_analytics/firebase_analytics/example/lib

さらにこんなエラーが出ましたが、

Using `ARCHS` setting to build architectures of target `Pods-Runner`

Podfileの設定をとりあえず、こんな感じでplatform :ios, '10.0'

デバッグ有効化
Enabling Debug Mode for Firebase Analytics for Flutter - Stack Overflow

そして、Xcodeから起動すると下記のようにDebugViewに表示されます(vscodeからの起動だと何故かうまく行きませんでした)

簡単ですが、以上になります。