Firebase hands on in Matsuyama https://gdgshikoku.connpass.com/event/124264/

1. Firebase hands on
in Matsuyama
2019/04/06
GDG Shikoku
Kenichi Tatsuhama

2. Firebase とは？

3. Firebase とは？
• Introducing Firebase
• https://www.youtube.com/watch?v=iosNuIdQoy8

4. Firebase とは？
• https://firebase.google.com/

5. Firebase とは？

6. Firebase とは？

7. Firebase とは？

8. Firebase とは？

9. Firebase とは？

10. Firebase とは？

11. Firebase とは？

12. ハンズオンの内容

13. ハンズオンの内容
• Cloud Firestore Android Codelab
• https://codelabs.developers.google.com/codelabs/firestore-
android/index.html
• ゴール
• Android アプリから、Firestore へデータを読み書きする
• Firestore のデータ変更を受けとってリアルタイムに更新する
• Authentication を使ってセキュリティを担保する
• 複雑なクエリを使用する

14. つくるアプリ
• レストランの評価アプリ

15. 使う Firebase の機能の紹介
• Authentication
• https://youtu.be/8sGY55yxicA
• Firestore
• https://youtu.be/QcsAb2RR52c

16. Android Studio Tips
• ファイルを開く：Shift + command + O
• 実行： ← Android Studio のツールバー上にあります
• 自動 import
• 赤くなっている箇所をホバー or Option + Enter
• Import class を選択すれば自動で import 文が追加される

17. 1. Overview
• https://codelabs.developers.google.com/codelabs/firestore-
android/index.html
• Android Studio 2.3 以上が入っている？
• 実機 or Emulator がある？

18. 2. Create a Firebase project
• Firebase project を作る
• 無料枠で十分試すことができます

19. 3. Set up the sample project
• サンプルコードを clone する（git が入ってなければ zip DL）
• git clone https://github.com/firebase/friendlyeats-android
• そのままビルドするとエラーになるはず

20. 3. Set up the sample project
• google-services.json をプロジェクトに取り込む

21. 3. Set up the sample project
• こうなっていれば OK

22. 3. Set up the sample project
• Authentication でログイン方法を設定する

23. 3. Set up the sample project
• Authentication のログイン方法で「メール/パスワード」を有
効にする
• メールリンクは off でよい

24. 3. Set up the sample project
• つい先日（Mar. 28, 2019）
Microsoft と Yahoo! の signin に
対応
• https://firebase.googleblog.com
/2019/03/microsoft-and-
yahoo-identity-
auth.html?linkId=65404801

25. 3. Set up the sample project
• Cloud Firestore を有効にする

26. 3. Set up the sample project
• ひとまずテストモードで開始

27. 3. Set up the sample project
• Database > ルール タブを開いて認証状態ではないとアクセ
スできないように変更

28. 3. Set up the sample project
• 実行してみる
• ログイン画面が出るので、自分のメアドを登
録して進む
• ログインが完了すると右の画面になる

29. 3. Set up the sample project
• 確認してみよう！
• パスワードは見えない
• アカウント削除すると再ログインできない
• パスワードを忘れた時のフロー
• など…

30. 4. Write data to Firestore
• ダミーデータを追加する
• MainActivity.java を開いて次の関数を実装
• private void initFirestore()
• private void onAddItemsClicked()
• 右上のメニューから追加処理を実行
• Firebase のコンソールでデータの追加を確認

31. 5. Display data from Firestore
• MainActivity.java に private void initFirestore() を実装
• FirestoreAdapter.java も実装
• Query に対して SnapshotListener を張ると、Query 結果に変更が
あったら通知される
• Query の変更通知を受けて、FirestoreAdapter の更新が行われる
• どのような変更があったかは DocumentChange.Type でわかる
• ADDED, MODIFIED, REMOVED
• 変更種別に応じて、一覧の変更方法も呼び分ける
（notifyItemXXXed）

32. 5. Display data from Firestore
• 実行結果
• やってみよう
• Firebase コンソールを開いて
• レストラン名の編集
• レストランの削除
• 価格帯の変更
• これらはコンソールの変更直後、自動でアプリ
側にも反映される

33. 6. Sort and filter data
• MainActivity.java の onFilter を実装
• ダイアログの設定値を Query に反映させる
• Logcat にエラーが出てたら index を作成する
• 複数条件の場合は index が必要
• Logcat に出力されている URL から index を作成できる

34. 6. Sort and filter data

35. 7. Organize data in subcollections
• Rating データはレストランの子要素に複数属する
（subcollection）

36. 7. Organize data in subcollections
• レストランの評価を追加する
• RestaurantDetailActivity.java を開いて addRating 関数を実装
• 参考
• Cloud Functions でこの機能を実装する手もある
• https://codelabs.developers.google.com/codelabs/firebase-cloud-
firestore-workshop-swift/#11
• Cloud Functions の紹介
• https://youtu.be/vr0Gfvp5v1A

37. 8. Secure your data
• DB の読み書き権限を詳細に設定できる

38. 9. Conclusion
• Firestore の以下の機能を使ってアプリを作った
• Document と collections
• データの読み書き
• クエリを使ったソートとフィルタ
• サブコレクション
• トランザクション

39. End.

40. Google Codelabs
• https://codelabs.developers.google.com/ Document と
collections
• Firebase に限らず、Google のサービスの入門に最適