firebase-with-flutter

## ~~Remote Config~~ Firebase
## with Flutter

azihsoyn

2018/05/28

---

いきなりですが

## Flutter使ってますか？

---

### Flutterとは
iOSやAndroidの高品質なアプリ開発を手助けするためのフレームワーク

特徴
* hot reload
* material desgin friendly
* dart

https://flutter.io/

---

## 自己紹介

[](https://twitter.com/azihsoyn)
{:.left-column}

* [ふそやん@azihsoyn](https://twitter.com/azihsoyn)
* 趣味
* 釣り
* アニメ
* 今期は魔法少女サイト
* 業務ではサーバーサイドエンジニア
* Go
* Kotlin
* [rehash.fm](http://rehash.fm)っていうポッドキャストやってます
* Flutter歴3ヶ月
* Betaリリースから使い始めた
{:.right-column .medium}
---

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](https://events.google.com/io/schedule/?section=may-8&sid=c8374ad6-94f3-47bb-99fd-164c0d0a81bc&livestream=true&topic=flutter)

のデモと同じです

[YouTube](https://www.youtube.com/watch?v=8wQ_MorYCEk)

---

## FlutterのFirebase対応状況

[](https://github.com/flutter/plugins/blob/master/FlutterFire.md)

---

## 大体揃ってる

ML Kitはまだない

---

## Pull Requests are most welcome!

自分もマージしてもらえた😊


---

## 本題

FlutterでのFirebaseの使い方

---

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

---

ドキュメント通り
---

## [Remote Config](https://pub.dartlang.org/packages/firebase_remote_config)

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

---

## Remote ConfigのFlutterのコード

```dart
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デモ
(flutter galleryのテーマを変えるデモをやりました)

---

## [Firebase Cloud Messaging](https://github.com/flutter/plugins/tree/master/packages/firebase_messaging)

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

---

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

(今回セットアップ手順は省略)

---

## Firebase Cloud MessagingのFlutterコード

初期化

```dart
import 'package:firebase_messaging/firebase_messaging.dart';

final FirebaseMessaging _firebaseMessaging =
new FirebaseMessaging();

```

---

プッシュ受信時の処理

```dart
_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のプッシュ通知許諾

```dart
_firebaseMessaging.requestNotificationPermissions(
const IosNotificationSettings(
sound: true, badge: true, alert: true
)
);
_firebaseMessaging.onIosSettingsRegistered
.listen((IosNotificationSettings settings) {
print("Settings registered: $settings");
});

```

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

```

---

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

---

## まとめ

FlutterでもFirebaseは普通に使える

---

## Appendix

---

## ML Kit for Flutter

---

## 作ってみた

[https://pub.dartlang.org/packages/mlkit](https://pub.dartlang.org/packages/mlkit)
(※Android only)

---

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

---

## Thanks!

---

## 参考にしたコードたち

- [https://github.com/flutter/flutter/tree/master/examples/flutter_gallery](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_messaging)
- [https://github.com/flutter/plugins/tree/master/packages/firebase_remote_config](https://github.com/flutter/plugins/tree/master/packages/firebase_remote_config)
{:.small}

Transcript

1. Remote Config Remote Config Firebase Firebase with Flutter with Flutter azihsoyn 2018/05/28
2. いきなりですが Flutter 使ってますか？ Flutter 使ってますか？
3. Flutter とは Flutter とは iOS やAndroid の高品質なアプリ開発を手助けするた めのフレームワーク 特徴 hot reload material desgin friendly dart https://flutter.io/
4. 趣味 釣り アニメ 今期は魔法少女サイト 業務ではサーバーサイドエンジニア Go Kotlin っていうポッドキャストやってます Flutter 歴3 ヶ月 Beta リリースから使い始めた 自己紹介 自己紹介 ふそやん@azihsoyn rehash.fm
5. Google I/O でiPhone なくしました ( その後無事回収しました) https://azihsoyn.hatenablog.com/entry/lost-and- found-iphone-in-america
6. 今回話すこと 今回話すこと Google I/O のセッション のデモと同じです Add Firebase to your cross-platform React Native or Flutter app YouTube
7. Flutter のFirebase 対応状況 Flutter のFirebase 対応状況
8. 大体揃ってる 大体揃ってる ML Kit はまだない
9. Pull Requests are most welcome! Pull Requests are most welcome! 自分もマージしてもらえた
10. 本題 本題 Flutter でのFirebase の使い方
11. 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
12. ドキュメント通り
13. ローカルの値をサーバーで設定した値で上書き できる A/B テストとかに使える Remote Config Remote Config
14. Remote Config のFlutter のコード Remote Config のFlutter のコード import 'package:firebase_remote_config/firebase_remote_config.dart'; final RemoteConfig remoteConfig = await RemoteConfig.instance; final defaults = <String, dynamic>{'welcome': 'default welcome'}; await remoteConfig.setDefaults(defaults); await remoteConfig.fetch(expiration: const Duration(hours: 5)); await remoteConfig.activate(); print('welcome message: ' + remoteConfig.getString('welcome'));
15. Remote Config デモ Remote Config デモ (flutter gallery のテーマを変えるデモをやりました)
16. push 通知 特定の対象だけに送信とかできる Firebase Cloud Messaging Firebase Cloud Messaging
17. セットアップが大変 セットアップが大変 iOS, Android でそれぞれpush 通知を受け取れるよう にしておく必要がある 特にiOS はdeveloper 登録しないと実機で受け取れな い ( 今回セットアップ手順は省略)
18. Firebase Cloud Messaging の Firebase Cloud Messaging の Flutter コード Flutter コード 初期化 import 'package:firebase_messaging/firebase_messaging.dart'; final FirebaseMessaging _firebaseMessaging = new FirebaseMessaging();
19. プッシュ受信時の処理 _firebaseMessaging.configure( onMessage: (Map<String, dynamic> message) { print("onMessage: $message"); _showItemDialog(message); }, onLaunch: (Map<String, dynamic> message) { print("onLaunch: $message"); _navigateToItemDetail(message); }, onResume: (Map<String, dynamic> message) { print("onResume: $message"); _navigateToItemDetail(message); }, );
20. iOS のプッシュ通知許諾 _firebaseMessaging.requestNotificationPermissions( const IosNotificationSettings( sound: true, badge: true, alert: true ) ); _firebaseMessaging.onIosSettingsRegistered .listen((IosNotificationSettings settings) { print("Settings registered: $settings"); });
21. プッシュのトークン取得 _firebaseMessaging.getToken().then((String token) { assert(token != null); setState(() { _homeScreenText = "Push Messaging token: $token"; }); print(_homeScreenText); });
22. Firebase Cloud Messaging デモ Firebase Cloud Messaging デモ ( 無事デモで通知が届きました)
23. まとめ まとめ Flutter でもFirebase は普通に使える
24. Appendix Appendix
25. ML Kit for Flutter ML Kit for Flutter
26. 作ってみた 作ってみた (※Android only) https://pub.dartlang.org/packages/mlkit
27. ML Kit デモ ML Kit デモ (1 回動きましたが2 回目のデモでエラーになりまし た)
28. Thanks! Thanks!
29. 参考にしたコードたち 参考にしたコードたち 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