firebase - cloud based real time database
TRANSCRIPT
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
me
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
Cloud based
real time database
Database
• Dokumentbasert database
(JSON)
Real time
Skybasert
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/
Other REAL
WORLD
examples
Twitch
http://www.twitch.tv/twitchplayspokemon
Atlassian Stash
https://www.youtube.com/watch?v=yOWTlFKoNV8#t=16
How to create a new Firebase
• Register at firebase.com
• Create a new firebase through the dashboard
• Create some data manually
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)…
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
Summary – write
• Push – creates a new Node with a constructed increasing id
• Set – writes data
• Push with implicit Set is common
• Update
• Transaction
Summary of read operations
Ref.on()
– Value
– Child_added
– Child_changed
– Child_removed
– Child_moved
• Ref.once()
• Ref.off()
Summary - Queries and search
Sorting combined with Selection give basic data retrieval
functionality
• orderByKey() - default
• orderByChild()
• orderByPriority()
• limittoFirst()
• limitToLast()
• startAt()
• endAt()
• equalTo()
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
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
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
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
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!
Architecture
considerations
Simple 2-tier Architecture
Server / Client share Firebase
Firebase handle Realtime, your server the
rest
*Twitch
Firebase with search engine
App-server
Read Real time updates
Writes
Query &Writes
Read Real time updates
Indexes
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