Serverless architectures are so hot right now! Today on the show we dive into Firebase with Angular2 using the AngularFire2 library.

We’ll be a dynamic Quote of the Day application which updates from the server in real time. Get out of here! Real time!

You can grab the code for today’s episode on GitHub.

Real Time Quote Action

Don’t forget to Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts

Here’s the script so you can follow along at home:

[ ] Discuss the plan for today - use remote db to populate a list of quotes - with live update when server changes

[ ] Create a new app 

ng new qotd

[ ] I’ve added Semantic UI to the index.html in the root 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.js"></script>

[ ] I’ve also customised the index.html to use the Home Page layout from Semantic UI (scroll down that page to see it in action)

[ ] Install the firebase deps

npm install firebase angularfire2 --save

[ ] Sign up for a firebase account:

https://console.firebase.google.com

[ ] Create some data

[ ] Edit the read and write action on the your table (the rules tab) - so you can read without authenticating

{
    "rules": {
        ".read": "true",
        ".write": "auth != null"
    }
}

[ ] Configure your app.module.ts to use Firebase

Update your module definitions

    import * as firebase from 'firebase';
    import { AngularFireModule } from 'angularfire2';

    // Initialize Firebase
    export const firebaseConfig = {
      apiKey: "AIzaSyAtkDOebowUCsSF8efOL_0yup1DKCCan00",
      authDomain: "qotd-caac8.firebaseapp.com",
      databaseURL: "https://qotd-caac8.firebaseio.com",
      storageBucket: "qotd-caac8.appspot.com",
      messagingSenderId: "922026910241"
    };
    
    @NgModule({
      declarations: [
        AppComponent,
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        AngularFireModule.initializeApp(firebaseConfig)
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

[ ] Add your quote list component

import { Component, OnInit } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
  selector: 'app-quotelist',
  templateUrl: './quotelist.component.html',
  styleUrls: ['./quotelist.component.css']
})
export class QuotelistComponent implements OnInit {

  quotes: FirebaseListObservable<any>;

  constructor(private af: AngularFire) { }

  ngOnInit() {
    this.quotes = this.af.database.list('quotes', {
      query: {
        orderByChild: 'author'
      }
    });
  }

}

[ ] Add some markup

<table class="ui basic table" id="quoteTable">
  <thead>
    <tr><th>Id</th>
    <th>Author</th>
    <th>Quote</th>
  </tr></thead>
  <tbody>
    <tr *ngFor="let quote of quotes | async">
      <td>{{quote.$key}}</td>
      <td>{{quote.author}}</td>
      <td>{{quote.quote}}</td>
    </tr>
    
  </tbody>
</table>

[ ] Celebrate the awesome serverless realtime update action