Angular2 + New Firebase in ActionAngular 2 +

in Action

@pekewake

@dvdchavarri

ANGULAR CAMP 2016

2

Software Engineer at PlainConceptsruchavarri@gmail.com@pekewakehttps://github.com/ruchavarri

Rubén Chavarri

Who are we:

Software Architect at Ciber Españadvdchavarri@gmail.com@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 PlainConceptsruchavarri@gmail.com@pekewakehttps://github.com/ruchavarri

Rubén Chavarri

Our dates:

Software Architect at Ciber Españadvdchavarri@gmail.com@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