Post on 07-Jan-2017
Firebase
For the Web
Jana Moudrá @Janamou +JanaMoudra
Co-Founder at
Organizer at GDG Prague
Google Developer Expert for
About me
Jana Moudrá @Janamou +JanaMoudra
#firebasehackprague
FIREBASE?
#firebasehackprague
#firebasehackprague
#firebasehackprague
#firebasehackprague
LET’S START
1. Login to Firebase console
2. Create a new project
3. Copy the code to your project
4. Use Firebase
#firebasehackprague
Firebase How To
$ npm install -g firebase-tools
$ firebase login
$ firebase serve
firebase.google.com/docs/cli/
Firebase Tools
#firebasehackprague
Firebase For the Web
You may include every component independently
#firebasehackprague
Firebase For the Web
<script src="firebase.js"></script>
or
<script src="firebase-app.js"></script><script src="firebase-auth.js"></script><script src="firebase-database.js"></script><script src="firebase-storage.js"></script>
#firebasehackprague
Firebase For the Web
var firebase = require('firebase/app');
require('firebase/auth');
require('firebase/database');
require('firebase/storage);
npmjs.com/package/firebase
Firebase For the Web
E-mail/PasswordProviders
Google, Facebook, Twitter, Github
AnonymousCustom auth system integrationNeeds to be enabled in Firebase console
#firebasehackprague
Auth
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// Get data from user
} else {
// User is signed out
}
});
#firebasehackprague
Auth
// User can be null
var user = firebase.auth().currentUser;
#firebasehackprague
Auth
// Create a new account
firebase.auth()
.createUserWithEmailAndPassword(email, password);
// Login
firebase.auth()
.signInWithEmailAndPassword(email, password);
#firebasehackprague
Auth
// Can be Google, Facebook, Twitter or Github
var provider =
new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider);
firebase.google.com/docs/auth/web/manage-users
Auth
Cloud hosted storageData is stored as JSONRealtime synchronization
Automatic updates
Offline support
#firebasehackprague
Database
Asynchronous listening to events:value
child_added
child_changed
child_removed
child_moved
#firebasehackprague
Database - Retrieve
firebase.database().ref('users')
.on('value', function(snapshot) {
doSomethingWithData(snapshot.val());
});
#firebasehackprague
Database - Retrieve
firebase.database().ref('users')
.once('value', function(snapshot) {
doSomethingWithData(snapshot.val());
});
#firebasehackprague
Database - Retrieve
// Orders by child
firebase.database().ref('users')
.orderByChild('age');
// Limits to first 5
firebase.database().ref('users')
.limitToFirst(5);
#firebasehackprague
Database - Sort, Filter
#firebasehackprague
Database - Save
Methods:set()
push()
update()
transaction()
firebase.database().ref('messages')
.push({text: 'Ahoj'});
firebase.google.com/docs/database/web/start
Database - Save
firebase.google.com/docs/database/security/
Rules
Read and write access to db/storageHow data are structuredWhat indexes existFrom Firebase console
firebase.google.com/docs/storage/web/start
Storage
Backed by Google Cloud StorageFiles stored in Firebase storage bucket
For Chrome and Chrome apps/extensions
firebase.google.com/docs/cloud-messaging/chrome/client
Cloud Messaging
#firebasehackprague
Hosting
Static hosting for web appsfirebaseapp.com subdomainFirebase CLI needed
$ firebase init
$ firebase deploy
#firebasehackprague
MORE INFO?
firebase.google.com/docs/reference/
codelabs.developers.google.com/codelabs/firebase-web/index.html
firebase.google.com/docs/samples/
firebase.google.com/docs/libraries/
#firebasehackprague
HAPPY CODING!
Firebase
For the Web
Jana Moudrá @Janamou +JanaMoudra