Firebase - cloud based real time database
- 1. Firebase – cloud based real time database @glennbech (glenn.bech@inmeta.com) +glennbech
- 2. Inmeta • Consultancy company with “Senior profile” • 150 employees in Oslo and Trondheim • Strong focus on software development and services – Java – MS / .NET – SharePoint – Business Intelligence – Project management, test management & advisory – UX, interaction design, graphical design • Proud sponsors of “Baksia” Meetup / Oslo Solr community
- 3. me
- 4. After the presentation I hope you will • … Understand what Firebase is and what it can be used for • … Know how to get started with Angular and Firebase • … Be inspired to, hack and create cool real time apps
- 5. Cloud based real time database
- 6. Database • Dokumentbasert database (JSON)
- 7. Real time
- 9. Skybasert
- 10. Example – San Fransisco Parking • Firebase comes with a build in editor/dashboard for every firebase • It is just another client consuming data • It is updated live- as the data in your firebase change • Let us have a peek at a public dataset, and create our own firebase https://publicdata-parking.firebaseio.com/
- 11. Other REAL WORLD examples
- 15. How to create a new Firebase • Register at firebase.com • Create a new firebase through the dashboard • Create some data manually
- 16. Firebase Data • Up to 32 levels of nesting • 10mb limit on one node – base64 encode binary data • Can be read with client libraries or as JSON data over HTTP • No native Array support (AngularFire helps)…
- 17. Getting started with pure JS – what we will do • Create the simplest possible Firebase application using Javascript • Write data • Read real time data • Do basic Search with selection and sorting
- 19. Summary – write • Push – creates a new Node with a constructed increasing id • Set – writes data • Push with implicit Set is common • Update • Transaction
- 20. Summary of read operations Ref.on() – Value – Child_added – Child_changed – Child_removed – Child_moved • Ref.once() • Ref.off()
- 21. Summary - Queries and search Sorting combined with Selection give basic data retrieval functionality • orderByKey() - default • orderByChild() • orderByPriority() • limittoFirst() • limitToLast() • startAt() • endAt() • equalTo()
- 22. Getting started – Firebase hosting & AngularFire • Firebase will host your static web application for you • Included in the cost of the firebase • Command line tool • Bootstrap for popular languages like Angular, react, backbone etc • AngularFire is an Open Source Library maintained by the Firebase Team
- 23. Firebase hosting – what we will do • Create a brand new Firebase • Use the Firebase command line tool to create a new hosted application for our firebase • Bootstrap the app using an Angular.js template
- 25. Angularfire – the simplest possible app – What we will do • Import interesting data into our firebase • Use AngularFire to iterate over and filter a synchronized array
- 26. Data Import - Fetch json data from New York times news API - Pipe it to our Firebase curl http://api.nytimes.com/svc/news/v3/content/all/all.json?api-key= 944c7ada3d8a94c65f416f923f1037e5%3A16%3A70241427 | curl -X PUT -d @- https://thenewsdatabase.firebaseio.com/.json
- 28. Three way data binding with AngularFire • Firebase object references can be bound to the $scope • Data gets updated in the view- and on the server at the same time • Might NOT be what you actually want. Beware!
- 32. Server / Client share Firebase
- 33. Firebase handle Realtime, your server the rest *Twitch
- 34. Firebase with search engine Read Real time updates App-server Writes Query & Writes Read Real time updates Indexes
- 35. Interesting links • https://www.firebase.com/docs/web/libraries/angular/index.html • https://www.firebase.com/blog • https://chrome.google.com/webstore/detail/vulcan-by-firebase/ oippbnlmebalopjbkemajgfbglcjhnbl?utm_source=chrome -ntp-icon • https://www.firebase.com/blog/2014-10-03-major-updates-to-firebase- user-auth.html
Editor's Notes
- #6: History
- #16: Participants Delete data afterwards
- #17: https://angularmeetup2.firebaseio.com/arraytest
- #18: file:///Users/glennbech/dev/angularfiredemo/app/firebasepurejs.html
- #20: Write operations succeed even if you are off line Events not yet seen are sent from the server when you connect
- #21: var fb = new Firebase("https://simplefirebase.firebaseio.com/"); function addparticipant() { var messageRef = fb.push(); messageRef.set({name: document.getElementById("participant").value, age: parseInt(document.getElementById("age").value)}); } fb.on("child_added", function (snapshot) { console.log(snapshot.val()); });
- #24: Create news firebase firebase bootstrap
- #29: Open partifipants console
- #32: Dumbed down firebase to a document store.