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