What is Firebase?

Suite of products by Google to help build realtime and mobile apps.

Why Firebase?

Developers have limited time and resources.

Authentication

Realtime Database

Hosting

Much Much More

• Analytics
• Storage
• Cloud Messaging
• Cloud Functions
• Crash Reporting
• Even More

AngularFire2

The official Firebase library for Angular

Starting the App

# use the cli to create a new app
ng new firebase-chat

# go into the folder
cd firebase-chat

# install firebase and angularfire2
npm i --save firebase angularfire2

Setting Up

• Install firebase and angularfire2
• Inject and configure
• Use!

Firebase Credentials

// src/environments/environment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: "AIzaSyAsHTjeyFExidHgpd-hemMf2IJ8XdlNOG8",
    authDomain: "scheduling-fire-2.firebaseapp.com",
    databaseURL: "https://scheduling-fire-2.firebaseio.com",
    projectId: "scheduling-fire-2",
    storageBucket: "scheduling-fire-2.appspot.com",
    messagingSenderId: "914675520600"
  }
};

Adding to App

// src/app/app.module.ts

import { FormsModule } from '@angular/forms';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { environment } from '../environments/environment';


...
imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule
],

...

Getting Data

// src/app/app.component.ts
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

... 

export class AppComponent {
  messages$: FirebaseListObservable<Object[]>;
  messages: Object[];
  newMessage = { text: '' };

  constructor(private db: AngularFireDatabase) {
    this.messages$ = this.db.list('/messages');

    this.messages$.subscribe(messages => {
        this.messages = messages;
        console.log(messages);
    });
  }

}

Display in View

// src/app/app.component.html

<div *ngFor="let message of messages">
    {{ message.text }}
</div>

Create a Form

// src/app/app.component.html

<form (ngSubmit)="createMessage()">
    <input type="text" name="text" [(ngModel)]="newMessage.text">
    <button type="submit">Chat!</button>
</form>

Process the Form

// src/app/app.component.ts

createMessage() {
    this.messages.push(this.newMessage);
    this.newMessage = { text: '' };
}

Hosting On Firebase

Hosting Instructions

# install the firebase-cli
npm install -g firebase-tools

# login to firebase
firebase login

# start firebase repo
firebase init

# deploy!
firebase deploy