How to make mobile app with Firebase and React Native

DevFest 2017
FirebaseとReact Nativeでのモバイルアプリの作り方 @k2wanko
https://tokyo.gdgjapan.org/

Transcript

1. FirebaseとReact Nativeでの モバイルアプリの作り方 DevFest Tokyo 2017 @k2wanko
2. コキチーズ @k2wanko セキュリティエンジニア GCPUG staff FirebaseとGoogle App Engineと 鮨と肉とドン勝が好き
3. 今日話すこと - Firebaseとは何か - React Nativeについて - Firebaseの各種サービスとReact Native Firebaseについて このセッションで得られないもの - アプリを０から作る方法 - アプリを運用していく知見 - Reactの書き方
4. Firebaseとは？
5. モバイルアプリ向けのmBaaS
6. 認証やオンラインでのデータの保存ができる。
7. Googleが買収してGCPに統合された
8. FirebaseはただのBaaSではない Develop Grow EARN
9. FirebaseはただのBaaSではない Develop Grow EARN Analytics
10. コキチーズの得意なこと Grow EARN Analytics Develop
11. なぜFirebaseを使うのか?
12. クライアントを作ることに集中したい - 作るものの本質に集中したい - MySQLを用意したりサーバー台数を考えたりしたくない
13. サーバーを管理する必要がない - SSHしたくない - apt-getもyumもしたくない
14. 料金が安い - Googleのインフラに乗ってる部分は安い - 個人開発ではとりあえず作って試して放置しててもお金がかからない - 試しに作ったサービスをスケールさせることも容易 (ベストプラクティスに従って作っていれば)
15. React Nativeとは？
16. React でモバイルアプリが作れるやつ
17. NativeのViewをJSXで書ける
18. WebViewではない JavaScriptCore
19. ブラウザの機能もいくつかサポートしてる - Fetch - WebSocket - setTimeout - setInterval - など
20. JavaScriptな部分はいつでもアップデートできる
21. 他にも - ネイティブモジュールでネイティブの機能にアクセスもできる - クロスプラットフォームでロジックやデザインの共通化 - ロジックをJSで書くことでテストもエミュレータを必要としない - 全てをReact Nativeで書かずに部分的にReact Nativeにすることも可能
22. React Nativeでよく使われるライブラリ
23. NativeBase - React Native用の デザインフレームワーク - Android/iOSで プラットフォームに 合わせたデザインが作れる
24. react-navigation - React Native用の ルーティングライブラリ - タブ、スタック、ドロワーに 対応している
25. MobX - Reactで データバインディングを 実現するライブラリ - Reactだとステート管理はRedux が主流だけど Vue.jsみたいに書きたいので MobX便利
26. React Native Firebase - サードパーティ製 React Native用 Firebase SDK - 公式のWebSDKでは使えない サービスもJavaScriptで書ける
27. Firebase x React Native
28. Firebase Authentication - ユーザー認証を実装できるサービス - Twitter,Google,Facebook,GitHubに対応 - メール認証やSMS認証、匿名認証もサポート - LINEなどサポートされていないプロバイダの認証には カスタム認証で自前でトークンを作って認証もできる。 - カスタム認証はプレミアムユーザーとか管理者権限を付けるとかにも使う
29. firebase.auth().signInWithEmailAndPassword('foo@bar.com', '123456') .then((user) => { console.log('User successfully logged in', user) }) .catch((err) => { console.error('User signin error', err); });
30. componentDidMount() { this.unsubscribe = firebase.auth().onAuthStateChanged((user) => { if (user) { // User is signed in. } }); } componentWillUnmount() { if (this.unsubscribe) { this.unsubscribe(); } }
31. Realtime Database - オンラインでもオフラインでもデータが保存できて リアルタイムに同期が可能なKVSのデータベース - クライアントからSDKを通して直接データベースに書き込める - ユーザーデータの保護にはセキュリティルールで読み書きに制限をつけれる
32. データの読み込み firebase.database() .ref('posts') .on('value', (snapshot) => { const value = snapshot.val(); });
33. データの書き込み firebase.database() .ref('posts/1234') .set({ title: 'My awesome post', content: 'Some awesome content', });
34. // On mount, subscribe to ref updates componentDidMount() { this.ref = firebase.database().ref('posts/1234'); this.ref.on('value', this.handlePostUpdate); } // On unmount, ensure we no longer listen for updates componentWillUnmount() { if (this.ref) { this.ref.off('value', this.handlePostUpdate); } } // Bind the method only once to keep the same reference handlePostUpdate = (snapshot) => { console.log('Post Content', snapshot.val()); }
35. Google Analytics for Firebase - モバイル版Google Analytics - ユーザーの行動をトラッキングできる
36. カスタムイベント firebase.analytics().logEvent('clicked_advert', { id: 1337 }); 任意のイベントを記録できる firebase.analytics().setCurrentScreen('user_profile'); 現在のスクリーンを指定できる
37. ユーザープロパティ firebase.analytics().setUserId(id); ユーザーIDの設定 firebase.analytics().setUserProperty('nickname', 'foobar'); その他のプロパティを設定
38. Firebase Cloud Messaging - Push通知を送るためのサービス - SDKを通してPush用のトークンを取得できる - トピック機能がありそのトピックを参照しているユーザのみに通知する こともできる
39. トークンの取得方法 firebase.messaging().getToken() .then((token) => { console.log('Device FCM Token: ', token); }); firebase.messaging().onTokenRefresh((token) => { console.log('Refreshed FCM token: ', token); });
40. Notificationをクリックして受け取る場合 firebase.messaging().getInitialNotification() .then((notification) => { console.log('notification:', notification); });
42. アプリが起動中に受け取る場合 firebase.messaging().onMessage((message) => { console.log('onMessage', message); });
44. 注意点 - getInitialNotificationとonMessageで受け取れる結果が違う(Android) - iOSではPermissionを求める必要がある。 - Notificationのカスタマイズはドキュメントにない - カスタマイズしようと思ったら頑張りが必要そう
45. Cloud Storage for Firebase - 画像や動画など大きめのファイルを保存するためのストレージ - SDKを通してクライアントから直接書き込める - データの保護にはセキュリティルールがあるので安心
46. const unsubscribe = firebase.storage() .ref('/files/1234') .putFile('/path/to/file/1234') .on('state_changed', snapshot => { //Current upload state }, err => { //Error unsubscribe(); }, uploadedFile => { //Success unsubscribe(); });
47. Firebase Remote Config - アプリケーションの設定ファイルを共有できるサービス - アナリティクスを元にユーザーごとに設定を切り替えられる
48. 開発者モード firebase.config().enableDeveloperMode();
49. firebase.config().fetch() .then(() => { return firebase.config().activateFetched(); }) .then((activated) => { if (!activated) console.log('Fetched data not activated'); return firebase.config().getValue('hasExperimentalFeature'); }) .then((snapshot) => { const hasExperimentalFeature = snapshot.val(); if(hasExperimentalFeature) { // enableSuperCoolFeature(); } // continue booting app }) .catch(console.error);
50. Firebase Crash Reporting - クラッシュした時のデータを集めてくれるサービス - もう少ししたらCrashlyticsがメインのクラッシュレポートサービスになる - React Native Fabric経由でCrashlyticsを使おう！ - https://github.com/corymsmith/react-native-fabric
51. AdMob - アプリに広告を載せるためのサービス - 収益はGoogle Analytics for Firebaseでも確認できる
52. バナー広告 const Banner = firebase.admob.Banner const ad = () => { return ( <Banner size={"MEDIUM_RECTANGLE"} onAdLoaded={() => { console.log('Advert loaded and is now visible'); }} onAdFailedToLoad={(err) => { console.warn('onAdFailedToLoad', err) }} ></Banner> ) }
53. Cloud Functions for Firebase - イベント駆動でNode.jsを実行できるサービス - RealtimeDatabseの書き込みやユーザーの作成、削除をトリガーに実行 - 今までできなかったことが可能になる - 不適切なメッセージの削除 - ユーザー削除時に関連データの削除 - アナリティクスのイベントを元に Push通知 - REST APIやWebHookの受取
54. ユーザー作成時にメールを送る関数 const functions = require('firebase-functions'); exports.sendWelcomeEmail = functions.auth .user().onCreate(event => { // ... });
55. Cloud Firestore (beta) - RealtimeDatabaseの後継データベース - ドキュメント指向のデータベース - Realtime Databaseより高度なQueryとTransaction処理が可能 - React Native Firebase v3.0.0から対応してる
56. Firestoreの概念
57. コレクションの取得 firebase.firestore() .collection('posts') .get() .then(querySnapshot => { // Access all the documents in the collection const docs = querySnapshot.docs; // Access the list of document changes for the collection const changes = querySnapshot.docChanges; // Loop through the documents querySnapshot.forEach((doc) => { const value = doc.data(); }) })
58. フィルターと並べ替え citiesRef.where("population", ">", 100000).orderBy("population") Realtime Databaseだとアプリ側でソートや降順処理が必要だったが Firestoreではクエリーで対応可能
59. ドキュメントの追加 firebase.firestore() .collection('posts') .add({ title: 'Amazing post', }) .then(() => { // Document added to collection and ID generated // Will have path: `posts/{generatedId}` })
60. ドキュメントの更新 var washingtonRef = firebase.firestore().collection("cities").doc("DC"); // Set the "capital" field of the city 'DC' return washingtonRef.update({ capital: true }) .then(function() { console.log("Document successfully updated!"); }) .catch(function(error) { // The document probably doesn't exist. console.error("Error updating document: ", error); });
61. ドキュメントの更新検知 var unsubscribe = firebase.firestore().collection("cities").doc("SF") .onSnapshot(function(doc) { console.log("Current data: ", doc && doc.data()); }); unsubscribe();
62. 特定のフィールドの削除 var cityRef = firebase.firestore().collection('cities').doc('BJ'); // Remove the 'capital' field from the document var removeCapital = cityRef.update({ capital: firebase.firestore.FieldValue.delete() });
63. FirestoreとRealtime Databaseの違い Firestore - ドキュメント指向 - 複合Indexで条件フィルタリング可能 - AtomicなBatch処置とTransaction - beta - 自動的にスケール - ストレージ月1GB $0.18 Realtime Databse - 1つのJSON Tree - 限定的な並べ替えとlimit - 基本的なTransaction - GA - シャーディングによるスケール - ストレージ月 1GB $5
64. 初心者がFirebaseについて見ておくと いい場所
65. https://gcpug.jp/join
66. まとめ Firebase が向いてる人 サーバの開発運用を最小限にしたい人 React Nativeが向いている人 JavaScriptが書けてネイティブも少し分かる人 Expo使えばJavaScript書ける人なら片手間でも行ける よくわからないことはGCPUGで聞くといいよ！
67. Q & A