More than 5 years have passed since last update.

Firebaseの基本：追加、更新、削除を捕捉する

Firebase

Last updated at 2017-10-22Posted at 2017-10-22

これは何？

Firebaseを使ったAuthenticationの方法の一連の作業です。

参考にしたサイト

参考というかほぼコピペ。

YouTunbe: Getting Started with the Firebase Realtime Database on the Web, Part 2

実装

FirebaseのDatabase

Screen Shot 2017-10-21 at 10.45.37 PM.png

HTMLとJavaScript

サンプルではユーザ固有のキー等は別ファイル key.js に書き込んでいます。よってこのコードには含まれていませんのでご注意ください。

hoge.on('[event-name]', (snap) => {})
で[event-name]のイベントを補足できます。snapには変更があった値が入ってきます。

<!DOCTYPE html>
<html>
  <head>
    <meat charset="utf-8" />
    <title>Getting Started with the Firebase Realtime Database on the Web, Part 2</title>
  </head>
  <body>
    <pre id="preObject"></pre>

    <ul id="ulList"></ul>

    <script src="./keys.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-messaging.js"></script>

    <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script>

    <script type="text/javascript">
     firebase.initializeApp(config);

     let preObject = document.querySelector('#preObject');
     let ulList = document.querySelector('#ulList');

     let dbRefObject = firebase.database().ref().child('object');
     let dbRefList = dbRefObject.child('hobbies');


     // Sync object changes
     dbRefObject.on('value', (snap) => {
         preObject.innerText = JSON.stringify(snap.val(), null, 3);
     });

     // Sync list changes
     dbRefList.on('child_added', (snap) => {
         const li = document.createElement('li');
         li.innerText = snap.val();
         li.id = snap.key;
         ulList.appendChild(li);
     });

     dbRefList.on('child_changed', (snap) => {
         const liChanged = document.querySelector('#'+snap.key);
         liChanged.innerText = snap.val();
     });

     dbRefList.on('child_removed', (snap) => {
         const liToRemove = document.querySelector('#'+snap.key);
         liToRemove.remove();
     });

    </script>
  </body>
</html>

動作させてみる

ここと同じなので割愛します😅

まとめ

本当にお手軽で、しかも簡単、という感想しかない。。。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up