Angular 2 - Time to jump in! (Firebase)

*** This blog was written with Angular2 RC-3, I will be updating to the latest release shortly.  Thanks! ***

From my previous posts we got the Splat Shot score keeping UI components created with just some basic static text.  This post will concentrate on setting up and storing data in Google's latest Firebase platform.  I stumbled upon Firebase a few years ago before they were acquired by Google. Back then the greatest selling point of Firebase is the ability to 'push' data changes from one client to another.  Let's say someone updates the score of a match, and another person is on the site reviewing the leaderboard, the score change will update the leaderboard automatically without the other using having to refresh.  At Google IO 2016, they announced a new and updated Firebase 'platform' and it is nothing short of awesome!  They still have the ability to push data changes to clients, but now they integrate other Google services like  authentication, manage and communicate with groups of customers they call 'audiences', ad management, analytics and much, much more.  This list of YouTube videos is a really great overview introducing all the capabilities of Firebase.

For the rest of this post, we are going to assume that you have created a Firebase account and started a new project.  In this example, I created a Firebase project called 'splatshot':



As noted in the screen shot above, database rules are not set, meaning anyone can update data.  Since this is just a test application I am not going to get into database rules, but there is a lot of great information on the Firebase site regarding security rules.  In order to use Firebase from our application, we are going to use the new AngularFire2 library.  Follow these instructions (starting at step 2) to install Firebase in the Splat Shot application running the commands from your root application directory.  From the install instructions we will cover the injection and binding with the player list (do not need to do steps 8 - 10).  Once complete, also make sure to stop your current 'ng serve' process (if running) and run a full 'ng build'.  (If you are using Cloud 9, make sure to start your ng serve with a specific livereload port:  ng serve --port 8080 --live-reload-port 8082).

Once we have Firebase setup, lets start by creating an interface for a player.  This follows the pattern from Debroah Kurata's Movie Hunter example.  From the root project directory type the following command, the player/player means place this player interface in the +player directory (ie: ng g interface [directory]/[interfaceName]):

1	ng g interface player/player

The 'g' is shorthand for 'generate'.  You should see a new interface in the src/app/+player directory.  Add the following fields to the code:

1 2 3 4 5 6

export interface Player { firstName: string; lastName: string; email: string; phone: string; }

Now that we have the player fields we want to track, next lets create a player service to interact with Firebase to read and write player information:

1	ng g service player/player