Firebase & Angular

Demo: http://github.com/cironunes/quote-of-the-day

Transcript

2. @cironunesdev CIRO NUNES
4. Create and deploy TODAY WE WILL AN APP using Firebase & Angular 2
5. MINUTES ! 60
6. http://super-quote-of-the-day.firebaseapp.com
15. 1. Creating the app and uploading images 3. Deploying the app 2. Exploring the realtime database
16. CONSOLE
18. STORAGE
20. 1. Creating the app and uploading images 3. Deploying the app 2. Exploring the realtime database
21. REALTIME DATABASE
24. 1. Creating the app and uploading images 3. Deploying the app 2. Exploring the realtime database
25. CLI
26. ~ $ npm install -g firebase-tools CLI
27. ~ $ npm install -g firebase-tools CLI ~ $ firebase login
28. ~ $ npm install -g firebase-tools CLI ~ ~ $ firebase init # start a new project
29. ~ $ npm install -g firebase-tools CLI ~ ~ $ firebase init ~ $ firebase deploy
30. HOSTING
32. 2.0-RC6
33. 1. Overview of main features 3. Implementing authentication 2. Integrating with Firebase
34. DATA BINDING http://jsbin.com/hayiyuyeve/edit?html,js,output
35. DATA BINDING http://jsbin.com/hayiyuyeve/edit?html,js,output
36. DATA BINDING http://jsbin.com/hayiyuyeve/edit?html,js,output
37. <input type="text" id="message-field"> <h2>Hello, <span id="message-text"></span><h2> DATA BINDING http://jsbin.com/hayiyuyeve/edit?html,js,output
38. <input type="text" id="message-field"> <h2>Hello, <span id="message-text"></span><h2> var $messageField = document.querySelector('#message-field') var $messageText = document.querySelector('#message-text') $messageField.value = 'Ciro' $messageText.innerText = 'Ciro' $messageField.addEventListener('keyup', function(e) { $messageText.innerText = e.target.value }, false) DATA BINDING http://jsbin.com/hayiyuyeve/edit?html,js,output
39. DATA BINDING @Component({ selector: 'my-greeting', template: ` <input type="text" [(ngModel)]="hero.name"> <h2>Hello, {{hero.name}}</h2> `, }) export class Greeting { constructor() { this.hero = { name: 'Ciro' } } } http://plnkr.co/edit/MGnF3Ta5IOPYYAyXjFpl?p=preview
40. DATA BINDING DEPENDENCY INJECTION DIRECTIVES COMPONENTS ROUTER AHEAD OF TIME COMPILATION FORMS TESTABILITY {
41. 1. Overview of main features 3. Implementing authentication 2. Integrating with Firebase
44. ~ $ npm i -g angular-cli@webpack
45. ~ $ npm i -g angular-cli@webpack ~ $ ng new quote-day
46. ~ $ npm i -g angular-cli@webpack ~ ~ $ ng serve
47. ~ $ npm i -g angular-cli@webpack ~ ~ ~ $ ng test
48. ~ $ npm i -g angular-cli@webpack ~ ~ ~ ~ $ ng build --prod
49. "AngularFire2"
50. ~ $ npm i —-save angularfire2 firebase
51. import { AngularFireModule } from 'angularfire2';
52. import { AngularFireModule } from 'angularfire2'; ... @NgModule({ imports: [ AngularFireModule.initializeApp( firebaseConfig, firebaseAuthConfig ) ] })
53. const firebaseConfig = { apiKey: "...", authDomain: "...", databaseURL: "...", storageBucket: "..." };
54. const firebaseConfig = { apiKey: "...", authDomain: "...", databaseURL: "...", storageBucket: "..." }; const firebaseAuthConfig = { provider: AuthProviders.Facebook, method: AuthMethods.Popup };
55. quotes: FirebaseListObservable<any>; constructor(private af: AngularFire) { this.quotes = this.af.database() .list('quotes'); }
56. quotes: FirebaseListObservable<any>; constructor(private af: AngularFire) { this.quotes = this.af.database() .list('quotes'); } <ul> <li *ngFor="let quote of quotes | async"> {{quote.message}} </li> </ul>
57. 1. Overview of main features 3. Implementing authentication 2. Integrating with Firebase
58. AUTH
60. user = null; constructor(private af: AngularFire) { this.af.auth .subscribe(user => {...}); }
61. user = null; constructor(private af: AngularFire) { this.af.auth .subscribe(user => {...}); } login() { this.af.auth.login(); } logout() { this.af.auth.logout(); }
62. github.com/cironunes/quote-of-the-day GET THE CODE
63. DANKE SCHÖN @cironunesdev ✌