angular2 + new firebase in action
TRANSCRIPT
Angular2 + New Firebase in ActionAngular 2 +
in Action
@pekewake
@dvdchavarri
ANGULAR CAMP 2016
2
Software Engineer at [email protected]@pekewakehttps://github.com/ruchavarri
Rubén Chavarri
Who are we:
Software Architect at Ciber Españ[email protected]@dvdchavarrihttps://github.com/dvdchavarri
David Chavarri
Index
@dvdchavarriANGULAR CAMP 2016
Introduction to FireBase Main Features Angular2 integration with
AngularFire2 Live demos Online publication
A powerful platform for building realtime apps
ANGULAR CAMP 2016@dvdchavarri
Firebase Introduction
@dvdchavarriANGULAR CAMP 2016
NoSQL Data-store Returns JSON from a
RESTful API Whenever data is
updated. It sends the update down to every listening client
Main Features
@dvdchavarriANGULAR CAMP 2016
Angular2 + New Firebase in ActionFirebase dashboard - https://console.firebase.google.com/
ANGULAR CAMP 2016@dvdchavarri
First steps
@dvdchavarriANGULAR CAMP 2016
// Create a Furebase database referencevar ref = new Firebase ("https://angular-camp.firebaseio.com/");
// Save dataref.set("Hello Angular Camp!");
// Sync dataref.on("value", function(snapshot) { console.log(snapshot.val());});
// Push dataref.push({ name : "WhatEver" });
@pekewakeANGULAR CAMP 2016
+ Angular
Angular 1.x & Firebase
ANGULAR CAMP 2016
$digest Array handling Authetication
@pekewake
Angular 2 & Firebase
ANGULAR CAMP 2016
Observables!!! Zones Pipes
@pekewake
Pipes + Firebase = ♥
ANGULAR CAMP 2016
Create a Firebase inside your pipe
Stream data from Firebase All in the template
@pekewake
Angular2 + New Firebase in ActionLive Demo – Login & Pipe & View
@pekewakeANGULAR CAMP 2016
Lets put Firebase in Action ; )
From “basic draw canvas” to “Interactive multiplayer board”
lets think in observables@pekewake
ANGULAR CAMP 2016
Angular2 + New Firebase in Action
@pekewakeANGULAR CAMP 2016
“basic draw canvas”
angular cli projectcanvas @ViewChildmouse observable eventsdraw lines (color + move)
@pekewake ANGULAR CAMP 2016
“Interactive multiplayer board” https://angular2-fireboard-demo.firebaseapp.com/
How it works:
ANGULAR CAMP 2016
Import firebase & AngularFire2 (last version)
Add Firebase connection Pipe into Template Adapt observers
@pekewake
With a little more work
We´ll build…an cool interactive multiplayer board
ANGULAR CAMP 2016@pekewake
Angular2 + New Firebase in Action
ANGULAR CAMP 2016
“Fireboard App” - https://angular2-fireboard.firebaseapp.com/
@pekewake
Improvements:
ANGULAR CAMP 2016
Observer optimization (child_add) Multiplatform (desktops & phones) Github Authentication Users connected list & counter Components organization Material design
@pekewake
Firebase Publication
ANGULAR CAMP 2016@pekewake
//build for production (concat, min…)ng build –prod
//Publish from consolefirebase deploy
Work in progress
ANGULAR CAMP 2016
Router / DI integration More Pipes Interactive querying Route-based security
@pekewake
Firebase extra features
@dvdchavarriANGULAR CAMP 2016
Develop Hosting Remote
Config Test Lab Crash
Analytics
Grow Notification Dynamic Liks
Earn AdMob
Thanks!@dvdchavarri@pekewake
25
Software Engineer at [email protected]@pekewakehttps://github.com/ruchavarri
Rubén Chavarri
Our dates:
Software Architect at Ciber Españ[email protected]@dvdchavarrihttps://github.com/dvdchavarri
David Chavarri
SourcesExample source code:Example App:https://github.com/Twiinlab/angular2-firebase-demoDemo App:https://github.com/Twiinlab/angular2-firebase
Resources & videos:https://github.com/angular/angularfire2
Learn More:Deep Dive on the Realtime Database:youtu.be/cYinms8LurATake one of Codelabs:Codelabs.developers.google.com/io2016
Angular2-fireboard in Firebase