Remote Config Remote Config Firebase Firebase with Flutter with Flutter azihsoyn 2018/05/28

いきなりですが Flutter 使ってますか？ Flutter 使ってますか？

Flutter とは Flutter とは iOS やAndroid の高品質なアプリ開発を手助けするた めのフレームワーク 特徴 hot reload material desgin friendly dart https://flutter.io/

趣味 釣り アニメ 今期は魔法少女サイト 業務ではサーバーサイドエンジニア Go Kotlin っていうポッドキャストやってます Flutter 歴3 ヶ月 Beta リリースから使い始めた 自己紹介 自己紹介 ふそやん@azihsoyn rehash.fm

Google I/O でiPhone なくしました ( その後無事回収しました) https://azihsoyn.hatenablog.com/entry/lost-and- found-iphone-in-america

今回話すこと 今回話すこと Google I/O のセッション のデモと同じです Add Firebase to your cross-platform React Native or Flutter app YouTube

Flutter のFirebase 対応状況 Flutter のFirebase 対応状況

大体揃ってる 大体揃ってる ML Kit はまだない

Pull Requests are most welcome! Pull Requests are most welcome! 自分もマージしてもらえた

本題 本題 Flutter でのFirebase の使い方

Firebase の設定ファイルをOS 毎に配置 iOS: GoogleService-Info.plist Android: google-services.json pubspec.yaml にパッケージ追加 ( 必要があれば)OS 毎にライブラリ追加 dependencies: firebase_remote_config: ^0.0.2 com.google.gms.google-services

ドキュメント通り

ローカルの値をサーバーで設定した値で上書き できる A/B テストとかに使える Remote Config Remote Config

Remote Config のFlutter のコード Remote Config のFlutter のコード import 'package:firebase_remote_config/firebase_remote_config.dart'; final RemoteConfig remoteConfig = await RemoteConfig.instance; final defaults = {'welcome': 'default welcome'}; await remoteConfig.setDefaults(defaults); await remoteConfig.fetch(expiration: const Duration(hours: 5)); await remoteConfig.activate(); print('welcome message: ' + remoteConfig.getString('welcome'));

Remote Config デモ Remote Config デモ (flutter gallery のテーマを変えるデモをやりました)

push 通知 特定の対象だけに送信とかできる Firebase Cloud Messaging Firebase Cloud Messaging

セットアップが大変 セットアップが大変 iOS, Android でそれぞれpush 通知を受け取れるよう にしておく必要がある 特にiOS はdeveloper 登録しないと実機で受け取れな い ( 今回セットアップ手順は省略)

Firebase Cloud Messaging の Firebase Cloud Messaging の Flutter コード Flutter コード 初期化 import 'package:firebase_messaging/firebase_messaging.dart'; final FirebaseMessaging _firebaseMessaging = new FirebaseMessaging();

プッシュ受信時の処理 _firebaseMessaging.configure( onMessage: (Map message) { print("onMessage: $message"); _showItemDialog(message); }, onLaunch: (Map message) { print("onLaunch: $message"); _navigateToItemDetail(message); }, onResume: (Map message) { print("onResume: $message"); _navigateToItemDetail(message); }, );

iOS のプッシュ通知許諾 _firebaseMessaging.requestNotificationPermissions( const IosNotificationSettings( sound: true, badge: true, alert: true ) ); _firebaseMessaging.onIosSettingsRegistered .listen((IosNotificationSettings settings) { print("Settings registered: $settings"); });

プッシュのトークン取得 _firebaseMessaging.getToken().then((String token) { assert(token != null); setState(() { _homeScreenText = "Push Messaging token: $token"; }); print(_homeScreenText); });

Firebase Cloud Messaging デモ Firebase Cloud Messaging デモ ( 無事デモで通知が届きました)

まとめ まとめ Flutter でもFirebase は普通に使える

Appendix Appendix

ML Kit for Flutter ML Kit for Flutter

作ってみた 作ってみた (※Android only) https://pub.dartlang.org/packages/mlkit

ML Kit デモ ML Kit デモ (1 回動きましたが2 回目のデモでエラーになりまし た)

Thanks! Thanks!

参考にしたコードたち 参考にしたコードたち https://github.com/flutter/flutter/tree/master/examples/flutter_gallery https://github.com/flutter/plugins/tree/master/packages/firebase_messaging https://github.com/flutter/plugins/tree/master/packages/firebase_remote_config