My journey into Angular 2, Angular-CLI, Firebase + AngularFire2

Fri, 29 Jul 2016 09:58:00 +0000

Having developed a project in Angular 1.5, I was naturally curious what Angular 2 has to offer. So after hearing much of the pitch from Google IO 2016. I decided to get my hands dirty.

Here is a simple tutorial on how to get setup using Angular2, Firebase, AngularFire 2 using angular cli. It’s aim is to target programmers who also wanted to dive into the cool new firebase and angular2. This tutorial assumes that you know how to setup a computer with node.js

Is Angular2 ready for prime time?

I still have a little doubt at the moment of my writing. While working on this, I had spend a good deal of hours, fighting with the angular2, firebase and angularfire2 to play nice to each other. Perhaps in a couple of weeks, things might settle down, fingers cross.

I am developing this on a windows machine just because I have send my MacBook Pro Retina to Apple for the stain gate issue. But on mac should be relatively simple to setup.

Requirements

If you are unsure what editor to use, I would recommend using vscode. Reason being that it is cross platform and it plays really well with typescript, which is used extensively on Angular2.

If you already have node.js installed (for window noobs), install the angular-cli and typings using command line with node package manager(npm):

    npm install -g angular-cli typings

Getting Started

Create a new project

 ng new <project_name>
 cd <project_name>

Install AngularFire2 and Firebase
```
 npm install angularfire2 firebase --save
```
what this does essentially is to install the angularfire2 and firebase library, and the changes will be reflected in the package.json and /node_modules folder

Adding angularfire2 and firebase into angular-cli-build.js

Any time that you have added a library from npm, you would need to include them in this file so that angular-cli will know how to bring them from /node_modules to the /dist folder

 //angular-cli-build.js
 /* global require, module */

 var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

 module.exports = function(defaults) {
 return new Angular2App(defaults, {
     vendorNpmFiles: [
     'systemjs/dist/system-polyfills.js',
     'systemjs/dist/system.src.js',
     'zone.js/dist/**/*.+(js|js.map)',
     'es6-shim/es6-shim.js',
     'reflect-metadata/**/*.+(ts|js|js.map)',
     'rxjs/**/*.+(js|js.map)',
     '@angular/**/*.+(js|js.map)',

     // add this 2 lines in
     'angularfire2/**/*.js',
     'firebase/*.js'
     ]
 });
 };

Build

Run ng build and check the /dist/vendor folder for the angularfire2 and firebase` folders.
```
 ng build 
```

Configure src/system-config.ts

Now we need to add angularfire2 and firebase into SystemJS (The dynamic module loader) Update the file with the followings

 //src/system-config.ts
 /** Map relative paths to URLs. */
 const map: any = {
 'firebase': 'vendor/firebase/firebase.js',
 'angularfire2': 'vendor/angularfire2'
 };

 /** User packages configuration. */
 const packages: any = {
 angularfire2: {
     defaultExtension: 'js',
     main: 'angularfire2.js'
 }
 };

Configure firebase typescript support

To get the firebase typescript support go to src/tsconfig.json and add the following line
```
 //src/tsconfig.ts
 "files": [
     "main.ts",
     "typings.d.ts",
     "node_modules/angularfire2/firebase3.d.ts"
 ]
```
Setup your firebase account

This is the part that gets change often and most tutorial seems to ignore. Hopefully the steps listed here are comprehensive enough. If not leave a comment and I will try updating this.

Go to firebase, once you are setup go create a new project

Locate your project-name

To locate the api-key: https://console.developers.google.com/apis/credentials?project=YOUR-PROJECT
Setup Firebase Database Auth Rules

Navigate to the rules of the firebase database, and set the read to true. I know it isn’t ideal but for the purpose of this tutorial the objective is to get you setup as simple as possible.
Seed Firebase Database

Seed the firebase database with the following content

Or just import the following json file

Inject AngularFire

Open src/app/main.ts and inject Firebase providers and specify your default Firebase:

 import { FIREBASE_PROVIDERS, 
 defaultFirebase } from 'angularfire2';

 bootstrap(AppComponent, [
     FIREBASE_PROVIDERS,
     defaultFirebase({
         apiKey: "api-key",
         authDomain: "<firebase_project_name>.firebaseapp.com",
         databaseURL: "https://<firebase_project_name>.firebaseio.com/",
         storageBucket: "gs://<firebase_project_name>.appspot.com"
     })
 ]);

Use AngularFire and bind to a items list

Open src/app/app.component.ts

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

 @Component({
 moduleId: module.id,
 selector: 'app-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css']
 })

 export class AppComponent {
 items: FirebaseListObservable<any[]>;

 constructor(af: AngularFire) {
     this.items = af.database.list('items')
 }

Update app.component.html

<ul>
    <li *ngFor="let item of items | async">
            
    </li>
</ul>

Start the server
```
ng server
```
And finally we have magic~

Conclusion

So far my journey with angular2 has taught me the following

Typescript that helps minimize ambiguity in javascript by introducing typed superset of javascript
Angular-cli is a command line tool that helps to build a scaffolding, inspired by ember-cli which in terms is inspired by rails.
Component first approach which was much inspired by react.js.
Firebase real time database.

I hope that you have fun going through with this tutorial. As the pace of development is fast, I am pretty certain this might not work within several months from date of this post.

Moving on next, you might want to check out the following

Happy hacking Angular2

How to batch move a calendar(ICS) dates and time

Thu, 26 May 2016 16:42:00 +0000

calendar-shifter script makes shifting ics calendar of dates and times a lot easier.

##Background

Sometimes you just got a calendar file off the internet in a .ics format filled with hundreds of events. Everything was great execpt for one major problem, the timezone or date was wrong. And you have to correct them manually one by one.

This has happen to me when I downloaded an old insanity calendar dated 5 years back. After moving a couple of events on the calendar, I thought to myself that there must be a better way to do this. To my amazement, there was such a tool on Mac’s calendar app or Google calendar.

##Solution

So I fired up my text editor and started to code a simple ruby script to do just that.

calendar-shifter script

I hope this script could solve someone’s problem as well.

Writing Writing Writing... I am not fond of it

Wed, 18 May 2016 01:35:31 +0000

Writing has always not been my forte. But I am here to change that starting from today. Even if no one reads this or my writing is so bad, I would start writing ideas and thoughts at least 1 time a week to begin.

So to begin I went to research on why I should start writing. Here are some of the list of reasons.

###1. Focus and reorganise your thoughts Before beginning any projects, it pays to start writing about it first. Writing helps me focus on what matters and organise your thoughts in a more coherent manner. Benjamin Franklin once said, “Either write something worth reading or do something worth writing”

###2. Build an audience and spread your ideas. When you write and share your writing, you are putting a piece of yourself out there. Writing actually create an opportunity for you to connect with a stranger.

###3. Absorb knowledge better “好记性不如烂笔头”, a chinese proverbs that translate to “the faintest ink is better than the best memory”. We all absorb knowledge better when we write notes. Writing makes you aware of your content.

###4. Its free We live in a age where publishing and distributing that article is free of charge. Unlike 20 years ago, publishing anything meant going to a publisher and it get distributed as an article in a magazine or newspaper.

Kenny Chan Zhi Yao