Firebase

Introduction to Firebase: web API and hosting

Transcript

1. Firebase Real Time JSON Storage ABECON 15.07.2016 Leszek Rybicki
2. What is Firebase?
3. How much?
4. Initialize <script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: "AIzaSyAxMx5ZJpxyS1Va4A-A1xhOwpiOZZzbopM", authDomain: "abecon-3c221.firebaseapp.com", databaseURL: "https://abecon-3c221.firebaseio.com", storageBucket: "abecon-3c221.appspot.com", }; firebase.initializeApp(config); </script>
5. Reference let db = new firebase.database() var usersRef = db.ref('users') usersRef.child(‘tetsuri’) usersRef.key() // users A reference identifies an address in the database.
6. Listing nodes let query = usersRef .orderByKey() .limitToLast(5) query.once('value', function(snapshot){}) query.off(‘value’) query.on(‘child_added’, function(child){}) query.on(‘child_removed’, function(child){}) query.on(‘child_moved’, function(child){}) query.on(‘child_changed’, function(child){}) A query sends events when its results change. We can listen to child CRUD events and an even on any value change.
7. Snapshot // Test for the existence of certain keys within a DataSnapshot var ref = firebase.database().ref("users/ada"); ref.once("value").then(function(snapshot) { var name = snapshot.child("name").val(); // { first: "Ada", last: "Lovelace"} var firstName = snapshot.child("name/first").val(); // "Ada" var lastName = snapshot.child("name").child("last").val(); // "Lovelace" var age = snapshot.child("age").val(); // null });
8. Snapshot’s children // Iterating over children in a snapshot var ref = firebase.database().ref("users"); ref.once("value").then(function(snapshot) { snapshot.forEach(function(childSnapshot) { var key = childSnapshot.key; // childData will be the actual contents of the child var childData = childSnapshot.val(); }); });
9. Creating nodes // create a child with key “ada” and set its value users.child(‘ada’).set({ first: 'Ada', last: 'Lovelace' })
10. Changing node values // change the value of “ada” child node. users.child(‘ada’).set({ first: 'Ada', last: 'Lovelace' }) // same as create!
11. Removing nodes // remove ada var removed = users.child(‘ada’).remove() // returns Promise removed.then(function() { console.log(‘remove succeeded’) }).catch(function() { console.log(‘problem removing’) })
12. Example let db = new firebase.database() var usersRef = db.ref('users') usersRef.set({ taro: “Taro Yoshida”, tetsuri: “Tetsuri Moriya” }) usersRef.on(‘child_removed’, child => alert(“Delete user” + child.val()) ) usersRef.child(“tetsuri”).remove() Trigger an event when a child node is removed from the referenced node.
13. Hosting [leszek:~/Documents/megakanban]$ firebase deploy === Deploying to 'megakanban'... i deploying database, hosting ✔ database: rules ready to deploy. i hosting: preparing public directory for upload... ✔ hosting: 2 files uploaded successfully i starting release process (may take several minutes)... ✔ Deploy complete! Hosting Site: https://megakanban.firebaseapp.com Dashboard: https://console.firebase.google.com/project/megakanban/overview Visit the URL above or run firebase open
14. DEMO