1. Angular 4
with Firebase
FAST TRACK YOUR DEV
Annie Bougie
Senior Developer, Concurrency, Inc
@bougiefever
anne.bougie@gmail.com
2. Why is Developing a New Site So Hard?
• Build a UI
• Make it Responsive
• Build an API
• Data Modeling
• Authentication
• Security
• Hosting
• Notifications
• How much will it cost?
15. Setting up Angular for Firebase
PREREQUISITES
Node.js 6.9.0 or higher
Npm 3 or higher
RECOMMENDED SOFTWARE
VSCode, WebStorm, Sublime
Yarn
16. Download and install node from nodejs.org
npm install –g @angular/cli
npm install –g typescript
npm install –g typings
ng new <project-name>
npm install firebase, angularfire2 --save
17. AngularFire2
Observable based - Use the power of RxJS, Angular, and Firebase.
Realtime bindings - Synchronize data in reatime.
Authentication - Log users in with a variety of providers and
monitor authentication state in realtime.
18. firebase SDK
◦ For when you need more functionality than what AngularFire2 offers
◦ Not an NgModule
23. Retrieving Firebase Data
◦ Get a reference to the node
◦ Add any query or limits to the data you want to retrieve
◦ Subscribe to the data
24. Getting Firebase Objects
The Code
constructor(private db: AngularFireDatabase) {
const pathToObject = '/events/1’;
this.event$ = this.db.object(pathToObject);
}
The HTML
<p>
{{ (event$ | async)?.name }}
</p>
25. Getting Firebase Lists
The Code
The HTML
constructor(private db: AngularFireDatabase) {
this.events$ = db.list("events");
}
<ul>
<li *ngFor="let event of (events$ | async)">{{event.name}}</li>
</ul>
26. Saving to Firebase
◦ Push to list – Firebase determines the key
◦ Update an object – Only updates properties you specify
◦ Set an object – Replaces the object
◦ Atomic saves using the firebaseSDK
◦ REST
27. Updating Objects in Firebase
REPLACING OBJECTS WITH SET UPDATING OBJECTS WITH UPDATE
this.db.object(this.pathToObject)
.set(event);
this.db.object(this.pathToObject)
.update(
{like: 'someone likes this’}
);
28. Pushing To A Firebase List
events$: FirebaseListObservable<any>;
constructor(private db: AngularFireDatabase) {
this.events$ = db.list("events");
}
addEvent(name) {
this.events$.push({name: name});
}
29. Firebase Push Keys
◦ Encoded time stamp
◦ Unique ID
◦ Accessed with the $key attribute
30. Atomic Saves with the Firebase SDK
constructor(
private db: AngularFireDatabase,
@Inject(FirebaseApp) firebaseApp: FirebaseApp) {
this.database = firebaseApp.database();
}
like() {
let likesRef = this.database.ref('likes’);
let likePushKey = likesRef.push().key;
/// omitted ///
let saveObjects = {};
saveObjects[`events/${eventKey}`] = likedEvent;
saveObjects[`likes/${likePushKey}/${eventKey}`] = true;
this.database.ref().update(saveObjects);
}
49. Cloud Function to Send Notifications
◦ Listen when a data event happens
◦ Send notification to users who have granted permission
◦ Cloud functions are Node apps
