Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to make mobile app with Firebase and React Native

k2wanko
October 08, 2017

How to make mobile app with Firebase and React Native

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

k2wanko

October 08, 2017
Tweet

More Decks by k2wanko

Other Decks in Technology

Transcript

  1. FirebaseとReact Nativeでの
    モバイルアプリの作り方
    DevFest Tokyo 2017 @k2wanko

    View Slide

  2. コキチーズ
    @k2wanko
    セキュリティエンジニア
    GCPUG staff
    FirebaseとGoogle App Engineと
    鮨と肉とドン勝が好き

    View Slide

  3. 今日話すこと
    - Firebaseとは何か
    - React Nativeについて
    - Firebaseの各種サービスとReact Native Firebaseについて
    このセッションで得られないもの
    - アプリを0から作る方法
    - アプリを運用していく知見
    - Reactの書き方

    View Slide

  4. Firebaseとは?

    View Slide

  5. モバイルアプリ向けのmBaaS

    View Slide

  6. 認証やオンラインでのデータの保存ができる。

    View Slide

  7. Googleが買収してGCPに統合された

    View Slide

  8. FirebaseはただのBaaSではない
    Develop Grow
    EARN

    View Slide

  9. FirebaseはただのBaaSではない
    Develop Grow
    EARN
    Analytics

    View Slide

  10. コキチーズの得意なこと
    Grow
    EARN
    Analytics
    Develop

    View Slide

  11. なぜFirebaseを使うのか?

    View Slide

  12. クライアントを作ることに集中したい
    - 作るものの本質に集中したい
    - MySQLを用意したりサーバー台数を考えたりしたくない

    View Slide

  13. サーバーを管理する必要がない
    - SSHしたくない
    - apt-getもyumもしたくない

    View Slide

  14. 料金が安い
    - Googleのインフラに乗ってる部分は安い
    - 個人開発ではとりあえず作って試して放置しててもお金がかからない
    - 試しに作ったサービスをスケールさせることも容易
    (ベストプラクティスに従って作っていれば)

    View Slide

  15. React Nativeとは?

    View Slide

  16. React でモバイルアプリが作れるやつ

    View Slide

  17. NativeのViewをJSXで書ける

    View Slide

  18. WebViewではない
    JavaScriptCore

    View Slide

  19. ブラウザの機能もいくつかサポートしてる
    - Fetch
    - WebSocket
    - setTimeout
    - setInterval
    - など

    View Slide

  20. JavaScriptな部分はいつでもアップデートできる

    View Slide

  21. 他にも
    - ネイティブモジュールでネイティブの機能にアクセスもできる
    - クロスプラットフォームでロジックやデザインの共通化
    - ロジックをJSで書くことでテストもエミュレータを必要としない
    - 全てをReact Nativeで書かずに部分的にReact Nativeにすることも可能

    View Slide

  22. React Nativeでよく使われるライブラリ

    View Slide

  23. NativeBase
    - React Native用の
    デザインフレームワーク
    - Android/iOSで
    プラットフォームに
    合わせたデザインが作れる

    View Slide

  24. react-navigation
    - React Native用の
    ルーティングライブラリ
    - タブ、スタック、ドロワーに
    対応している

    View Slide

  25. MobX
    - Reactで
    データバインディングを
    実現するライブラリ
    - Reactだとステート管理はRedux
    が主流だけど
    Vue.jsみたいに書きたいので
    MobX便利

    View Slide

  26. React Native Firebase
    - サードパーティ製
    React Native用 Firebase SDK
    - 公式のWebSDKでは使えない
    サービスもJavaScriptで書ける

    View Slide

  27. Firebase x React Native

    View Slide

  28. Firebase Authentication
    - ユーザー認証を実装できるサービス
    - Twitter,Google,Facebook,GitHubに対応
    - メール認証やSMS認証、匿名認証もサポート
    - LINEなどサポートされていないプロバイダの認証には
    カスタム認証で自前でトークンを作って認証もできる。
    - カスタム認証はプレミアムユーザーとか管理者権限を付けるとかにも使う

    View Slide

  29. firebase.auth().signInWithEmailAndPassword('[email protected]', '123456')
    .then((user) => {
    console.log('User successfully logged in', user)
    })
    .catch((err) => {
    console.error('User signin error', err);
    });

    View Slide

  30. componentDidMount() {
    this.unsubscribe = firebase.auth().onAuthStateChanged((user) => {
    if (user) {
    // User is signed in.
    }
    });
    }
    componentWillUnmount() {
    if (this.unsubscribe) {
    this.unsubscribe();
    }
    }

    View Slide

  31. Realtime Database
    - オンラインでもオフラインでもデータが保存できて
    リアルタイムに同期が可能なKVSのデータベース
    - クライアントからSDKを通して直接データベースに書き込める
    - ユーザーデータの保護にはセキュリティルールで読み書きに制限をつけれる

    View Slide

  32. データの読み込み
    firebase.database()
    .ref('posts')
    .on('value', (snapshot) => {
    const value = snapshot.val();
    });

    View Slide

  33. データの書き込み
    firebase.database()
    .ref('posts/1234')
    .set({
    title: 'My awesome post',
    content: 'Some awesome content',
    });

    View Slide

  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());
    }

    View Slide

  35. Google Analytics for Firebase
    - モバイル版Google Analytics
    - ユーザーの行動をトラッキングできる

    View Slide

  36. カスタムイベント
    firebase.analytics().logEvent('clicked_advert', { id: 1337 });
    任意のイベントを記録できる
    firebase.analytics().setCurrentScreen('user_profile');
    現在のスクリーンを指定できる

    View Slide

  37. ユーザープロパティ
    firebase.analytics().setUserId(id);
    ユーザーIDの設定
    firebase.analytics().setUserProperty('nickname', 'foobar');
    その他のプロパティを設定

    View Slide

  38. Firebase Cloud Messaging
    - Push通知を送るためのサービス
    - SDKを通してPush用のトークンを取得できる
    - トピック機能がありそのトピックを参照しているユーザのみに通知する
    こともできる

    View Slide

  39. トークンの取得方法
    firebase.messaging().getToken()
    .then((token) => {
    console.log('Device FCM Token: ', token);
    });
    firebase.messaging().onTokenRefresh((token) => {
    console.log('Refreshed FCM token: ', token);
    });

    View Slide

  40. Notificationをクリックして受け取る場合
    firebase.messaging().getInitialNotification()
    .then((notification) => {
    console.log('notification:', notification);
    });

    View Slide

  41. View Slide

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

    View Slide

  43. View Slide

  44. 注意点
    - getInitialNotificationとonMessageで受け取れる結果が違う(Android)
    - iOSではPermissionを求める必要がある。
    - Notificationのカスタマイズはドキュメントにない
    - カスタマイズしようと思ったら頑張りが必要そう

    View Slide

  45. Cloud Storage for Firebase
    - 画像や動画など大きめのファイルを保存するためのストレージ
    - SDKを通してクライアントから直接書き込める
    - データの保護にはセキュリティルールがあるので安心

    View Slide

  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();
    });

    View Slide

  47. Firebase Remote Config
    - アプリケーションの設定ファイルを共有できるサービス
    - アナリティクスを元にユーザーごとに設定を切り替えられる

    View Slide

  48. 開発者モード
    firebase.config().enableDeveloperMode();

    View Slide

  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);

    View Slide

  50. Firebase Crash Reporting
    - クラッシュした時のデータを集めてくれるサービス
    - もう少ししたらCrashlyticsがメインのクラッシュレポートサービスになる
    - React Native Fabric経由でCrashlyticsを使おう!
    - https://github.com/corymsmith/react-native-fabric

    View Slide

  51. AdMob
    - アプリに広告を載せるためのサービス
    - 収益はGoogle Analytics for Firebaseでも確認できる

    View Slide

  52. バナー広告
    const Banner = firebase.admob.Banner
    const ad = () => {
    return (
    size={"MEDIUM_RECTANGLE"}
    onAdLoaded={() => {
    console.log('Advert loaded and is now visible');
    }}
    onAdFailedToLoad={(err) => {
    console.warn('onAdFailedToLoad', err)
    }}
    >
    )
    }

    View Slide

  53. Cloud Functions for Firebase
    - イベント駆動でNode.jsを実行できるサービス
    - RealtimeDatabseの書き込みやユーザーの作成、削除をトリガーに実行
    - 今までできなかったことが可能になる
    - 不適切なメッセージの削除
    - ユーザー削除時に関連データの削除
    - アナリティクスのイベントを元に Push通知
    - REST APIやWebHookの受取

    View Slide

  54. ユーザー作成時にメールを送る関数
    const functions = require('firebase-functions');
    exports.sendWelcomeEmail = functions.auth
    .user().onCreate(event => {
    // ...
    });

    View Slide

  55. Cloud Firestore (beta)
    - RealtimeDatabaseの後継データベース
    - ドキュメント指向のデータベース
    - Realtime Databaseより高度なQueryとTransaction処理が可能
    - React Native Firebase v3.0.0から対応してる

    View Slide

  56. Firestoreの概念

    View Slide

  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();
    })
    })

    View Slide

  58. フィルターと並べ替え
    citiesRef.where("population", ">", 100000).orderBy("population")
    Realtime Databaseだとアプリ側でソートや降順処理が必要だったが
    Firestoreではクエリーで対応可能

    View Slide

  59. ドキュメントの追加
    firebase.firestore()
    .collection('posts')
    .add({
    title: 'Amazing post',
    })
    .then(() => {
    // Document added to collection and ID generated
    // Will have path: `posts/{generatedId}`
    })

    View Slide

  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);
    });

    View Slide

  61. ドキュメントの更新検知
    var unsubscribe =
    firebase.firestore().collection("cities").doc("SF")
    .onSnapshot(function(doc) {
    console.log("Current data: ", doc && doc.data());
    });
    unsubscribe();

    View Slide

  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()
    });

    View Slide

  63. FirestoreとRealtime Databaseの違い
    Firestore
    - ドキュメント指向
    - 複合Indexで条件フィルタリング可能
    - AtomicなBatch処置とTransaction
    - beta
    - 自動的にスケール
    - ストレージ月1GB $0.18
    Realtime Databse
    - 1つのJSON Tree
    - 限定的な並べ替えとlimit
    - 基本的なTransaction
    - GA
    - シャーディングによるスケール
    - ストレージ月 1GB $5

    View Slide

  64. 初心者がFirebaseについて見ておくと
    いい場所

    View Slide

  65. https://gcpug.jp/join

    View Slide

  66. まとめ
    Firebase が向いてる人
    サーバの開発運用を最小限にしたい人
    React Nativeが向いている人
    JavaScriptが書けてネイティブも少し分かる人
    Expo使えばJavaScript書ける人なら片手間でも行ける
    よくわからないことはGCPUGで聞くといいよ!

    View Slide

  67. Q & A

    View Slide