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

Google DevFest Tokyo 2016

Google DevFest Tokyo 2016

Firebaseのススメ 入門編

Firebase Realtime DatabaseとFirebase Hostingの簡単な使い方をご紹介致します!

Daisuke Yamashita

October 09, 2016
Tweet

More Decks by Daisuke Yamashita

Other Decks in Technology

Transcript

  1. Firebase の使い方 詳細: https://firebase.google.com/docs/web/setup // TODO: Replace with your project's

    customized code snippet <script src="https://www.gstatic.com/firebasejs/3.0.2/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: '<your-api-key>', authDomain: '<your-auth-domain>', databaseURL: '<your-database-url>', storageBucket: '<your-storage-bucket>' }; firebase.initializeApp(config); </script>
  2. データの保存 Firebase Realtime Database にデータを書き込むメソッドは次の 4 種類 メソッド 処理内容 set()

    定義済みのパスへのデータの書き込みや、データの置換を行います。 push() データのリストに追加します。 update() データのすべてを置換することなく、定義済みのパスのキーの一部を更新しま す。 transaction() 同時更新によって破損する可能性がある複合データを更新します。
  3. データの取得 イベント 内容 value パスのコンテンツ全体に対する変更の読み取りとリッスンする child_added アイテムのリストを取得するか、アイテムのリストへの追加がないかリッスンす る child_changed リスト内のアイテムに対する変更がないかリッスンする

    child_removed リストから削除されるアイテムがないかリッスンする child_moved 並べ変えられたデータと併用して、アイテムの優先度に対する変更がないか リッスンする データは、非同期リスナーをアタッチして取得します。
  4. var userId = firebase.auth().currentUser.uid; firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) { var username

    = snapshot.val().username; // ... }); リアルタイムでなく、現在の値を1回だけ読み取る場合には、 once を使います。 データの取得
  5. Firebaseをガッツリ仕事にしたい人募集中 iOS / Android / Rails / フロントエンド / インフラエンジニアを積極採用

    中!!! 株式会社マナボでは、FirebaseをiOS/Android/ウェブにプロダクション 投入しています。 現在、Firebaseを使えなくてもかまいません。業務でガッツリ使ってみた い人を大募集しています!ご連絡お待ちしております!