firebase-with-flutter

 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/

---

## 自己紹介

[![azihsoyn](img/twitter_icon.jpg)](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対応状況

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

---

## 大体揃ってる

ML Kitはまだない

---

## Pull Requests are most welcome!

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

![](img/PR_merged.png)

---

## 本題

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}

E48409e5c7d5b8919b03d3d3c4a40da7?s=128

azihsoyn

May 29, 2018
Tweet