Firebase

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

Firebase

By Chris Sevilleja

Firebase

  • 459
Loading comments...

More from Chris Sevilleja