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

Firebaseを使ったリアルタイム同期アプリケーション開発/firebase

 Firebaseを使ったリアルタイム同期アプリケーション開発/firebase

Firebaseを使ったリアルタイムアプリケーション開発

kiharu sasaki

March 19, 2016
Tweet

More Decks by kiharu sasaki

Other Decks in Technology

Transcript

  1. Overview FIREBASE リアルタイムなデータ同期が求められる、チャットサービスやゲームなどが得意領域 Chat System Online Game Mobile App Web

    Service リアルタイムデータ同期を必要としないシステムでも
 手軽にアプリケーションを構築したい場合に大変便利
  2. BaaS and Cross-platform クライアントサイドもマルチプラットフォームで利用可能 Server Database Auth API サーバーサイド(Firebaseが提供する機能) クライアントサイド

    各プラットフォーム
 の標準ライブラリ 1. BaaS 2. マルチプラットフォーム サーバーサイドの 管理は一切不要!
  3. Realtime Database アプリケーション全体で1つのJSONとして全データが格納される {   "users":  {   "uid001":  {

      "name":  "Fujiwara"   }   },   "messages":  {   "id-­‐001":  {                            "name":  "Fujiwara",                          "text":  "hello!"                },                "id-­‐002":  {                            "name":  "guest",                          "text":  "goodbye"                }          }   } ๏ No-SQL / KVS ๏ 全データを1つのJSONに格納 ๏ トランザクションも対応 ๏ データ構造がそのままREST API に ๏ データのアクセスルールを
 設定可能(Security & Rules) 3. リアルタイムDB (1)
  4. RESTful API データの階層構造により、それぞれのデータが一意のURLエンドポイントを持つ {   "users":  {   "uid001":  {

      "name":  "Fujiwara"   }   },   //  ......   } curl  'https://<YOUR-­‐FIREBASE-­‐APP>.firebaseio.com/users/uid001.json' {  "name":  "Fujiwara"  } 3. リアルタイムDB (2) 【GET例】
  5. 6TFSBVUIFOUJDBUJPO プロバイダーアカウントによる、ユーザー登録・ログイン認証を簡単に実装できる e-Mail & Password Facebook Twitter GitHub Google ΧελϜ

    !  # $ % ※カスタム認証機能により、自前サービスアカウントでのログインも実装可能 4. ユーザー認証(ログイン) &
  6. Deployment steps デプロイまでの操作はこれだけ。サーバーサイドを気にすることなく開発に集中できる 'JSFCBTF،ؕؐٝز׾⡲䧭 ٓ؎ـٓٔ؎ٝأز٦ٕ٥،فٔ⡲䧭 ؝٦ر؍ؚٝ ،فٔ؛٦ءّٝ׾رفٗ؎ 3 2 1

    4 ˟䗳銲ח䘔ׄגծSFCBTFKTPO SVMFTך鏣㹀׮遤ֲ $  npm  install  -­‐g  firebase-­‐tools   $  firebase  login   $  firebase  init $  firebase  deploy
  7. Data access データの変更検知は、各種イベントリスナーをトリガーにリアルタイムに反映する var  ref  =  new  Firebase("https://<YOUR-­‐APP>.firebaseio.com/message/");   ref.push({name:"Sasaki",

     text:"Hello  world"}); • データの追加・変更・削除用のメソッドを使用 • データの状態変化は各イベントリスナーで検知、リアルタイムに画面反映
 Callback / Promise(一部のAPIはPromiseを返す)
 https://www.firebase.com/blog/2016-01-21-keeping-our-promises.html 【データ追加例】
  8. Common Queries Firebase用の基本的な検索用クエリが用意されている var  ref  =  new  Firebase("https://<YOUR-­‐APP>.firebaseio.com/message/");   ref.orderByPriority()

           .limitToFirst(100)
      .once("value",  function()  {                //  do  something        }); • 並び順、取得件数、範囲指定を行うためのメソッドを利用 • メソッドチェーンで条件を複数繋げて指定可能 【クエリー例】
  9. User Authentication (ex. Facebook) Facebookログインを行う場合を想定 'BDFCPPL"QQ⡲䧭 'BDFCPPL%FWFMPQFST "QQ*%"QQ4FDSFUך涫ꐮ 'JSFCBTF%BTICPBSE "1*ㄎן⳿׃

    3 2 1 +4ַ׵ؚٗ؎ٝ钠鏾禸ך"1*׾ㄎן⳿ׅ 'BDFCPPL%FWFMPQFST؟؎زַ׵钠鏾欽،فٔ؛٦ءّٝ׾⡲䧭 ⡲䧭׃׋'#"QQך*%4FDSFU׾涫ꐮ 䗳銲ח䘔ׄגِ٦ؠر٦ةךإُؗٔذ؍ٕ٦ٕ׮鏣㹀
  10. Example API Calls : Authentication Firebaseオブジェクトを生成し、認証用APIをコールするだけ var  ref  =  new

     Firebase("https://<YOUR-­‐FIREBASE-­‐APP>.firebaseio.com");   ref.authWithOAuthPopup("facebook",  function(error,  authData)  {      if  (error)  {          //  Τϥʔॲཧ      }  else  {          //  ੒ޭ      }   }); ref.unauth(); ログイン ※ポップアップベースの認証フローの場合 ログアウト
  11. $BVUJPOQPJOUT フェイルオーバーの仕組みがないのは致命的かもしれない・・・? • フェイルオーバーの仕組みがない • RDBのような細かい検索は出来ない
 ( ex: % LIKE

    % ) • Firebaseのホスティングには
 Development / Staging / Production
 といった環境が用意されていない これらを踏まえた上で計画的なご利用を 利用時の注意点
  12. 3FGFSFODFNBUFSJBMT  利用前に目を通しておくべき参考資料 https://html5experts.jp/technohippy/18040/ FirebaseͰ࡞Δ؆୯ϦΞϧλΠϜ΢ΣϒΞϓϦέʔγϣϯʢલฤʣ http://sssslide.com/www.slideshare.net/fumihikoshiroyama/gdg-tokyo-firebase-android GDG Tokyo FirebaseΛ࢖ͬͨ AndroidΞϓϦ։ൃ

    http://sssslide.com/speakerdeck.com/dddaisuke/sahasaitokarali-yong-surufirebase αʔόʔαΠυ͔Βར༻͢ΔFirebase http://www.slideshare.net/tsimo/javascriptfirebase-59251680 JavaScript͔Βར༻͢ΔFirebase https://www.firebase.com/blog/2016-01-21-keeping-our-promises.html Keeping our Promises (and Callbacks) ※ӳޠ
  13. 3FGFSFODFNBUFSJBMT  当スライドで言及しなかったけど目を通しておいたほうが良い資料 http://qiita.com/laco0416/items/b068ab0cf19a26f0992d FirebaseͷRulesΛཧղ͢Δ http://sssslide.com/www.slideshare.net/likr/20150619ngkyoto AngularFireͰָʑόοΫΤϯυ https://www.firebase.com/blog/2013-10-01-queries-part-one.html Queries, Part

    1: Common SQL Queries Converted for Firebase ※ӳޠ https://www.infoscoop.org/blogjp/2015/01/24/realtime-app-firebase/ ϦΞϧλΠϜɾόοΫΤϯυαʔϏεʮFirebaseʯΛ࢖ͬͨWebΞϓϦ࡞੒ https://www.firebase.com/docs/ FirebaseެࣜυΩϡϝϯτ