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

How to make mobile app with Firebase and React ...

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について - Firebaseの各種サービスとReact Native Firebaseについて

    このセッションで得られないもの - アプリを0から作る方法 - アプリを運用していく知見 - Reactの書き方
  2. React Native Firebase - サードパーティ製 React Native用 Firebase SDK -

    公式のWebSDKでは使えない サービスもJavaScriptで書ける
  3. Firebase Authentication - ユーザー認証を実装できるサービス - Twitter,Google,Facebook,GitHubに対応 - メール認証やSMS認証、匿名認証もサポート - LINEなどサポートされていないプロバイダの認証には

    カスタム認証で自前でトークンを作って認証もできる。 - カスタム認証はプレミアムユーザーとか管理者権限を付けるとかにも使う
  4. componentDidMount() { this.unsubscribe = firebase.auth().onAuthStateChanged((user) => { if (user) {

    // User is signed in. } }); } componentWillUnmount() { if (this.unsubscribe) { this.unsubscribe(); } }
  5. // 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()); }
  6. トークンの取得方法 firebase.messaging().getToken() .then((token) => { console.log('Device FCM Token: ', token);

    }); firebase.messaging().onTokenRefresh((token) => { console.log('Refreshed FCM token: ', token); });
  7. 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(); });
  8. 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);
  9. バナー広告 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> ) }
  10. Cloud Functions for Firebase - イベント駆動でNode.jsを実行できるサービス - RealtimeDatabseの書き込みやユーザーの作成、削除をトリガーに実行 - 今までできなかったことが可能になる

    - 不適切なメッセージの削除 - ユーザー削除時に関連データの削除 - アナリティクスのイベントを元に Push通知 - REST APIやWebHookの受取
  11. コレクションの取得 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(); }) })
  12. ドキュメントの追加 firebase.firestore() .collection('posts') .add({ title: 'Amazing post', }) .then(() =>

    { // Document added to collection and ID generated // Will have path: `posts/{generatedId}` })
  13. ドキュメントの更新 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); });
  14. 特定のフィールドの削除 var cityRef = firebase.firestore().collection('cities').doc('BJ'); // Remove the 'capital' field

    from the document var removeCapital = cityRef.update({ capital: firebase.firestore.FieldValue.delete() });
  15. FirestoreとRealtime Databaseの違い Firestore - ドキュメント指向 - 複合Indexで条件フィルタリング可能 - AtomicなBatch処置とTransaction -

    beta - 自動的にスケール - ストレージ月1GB $0.18 Realtime Databse - 1つのJSON Tree - 限定的な並べ替えとlimit - 基本的なTransaction - GA - シャーディングによるスケール - ストレージ月 1GB $5