Save 37% off PRO during our Black Friday Sale! »

How to make mobile app with Firebase and React Native

1b177b37d966f573b1df5d7218a5f560?s=47 k2wanko
October 08, 2017

How to make mobile app with Firebase and React Native

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

1b177b37d966f573b1df5d7218a5f560?s=128

k2wanko

October 08, 2017
Tweet

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について

    このセッションで得られないもの - アプリを0から作る方法 - アプリを運用していく知見 - 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); });

  41. None
  42. アプリが起動中に受け取る場合 firebase.messaging().onMessage((message) => { console.log('onMessage', message); });

  43. None
  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