Monday, November 30, 2015

Firebase - Two Salient Features.

Three way data binding with AngularFire:

Imagine user keys in lots of data into a form and had to navigate away from the page. Often I saw apps presenting a dialog box that says data is going to be lost. I don't think it's a good solution. How about allowing user start from where he/she left. Here is a Firebase feature to address the same,


Maintain state as you move away from the form:

Among many things AngularJS provides, two way data binding is salient. Firebase takes it further, add another dimension - data store. Three way data binding synchronizes, view (Html template), model (Scope) and Firebase data store.

Consider following code snippet

// Initialize Firebase object
// say user variable has user name of the logged in user.

     var firebaseObj = $firebaseObject(new Firebase("< Firebase Data Source Url >").child(user));
     // three way data bind email message field on scope to firebase object created above.
     firebaseObj.$bindTo($scope, "emailMessage");


Any changes to $scope.emailMessage are bound all the way to data source on Firebase. User can any time navigate away and yet data is not lost. As and when user comes back to this page, can start where he/she left off.


In the video, on the left is the form field and on the right is the Firebase data source. You can see it's updated as and when more characters are typed into the text area.

Sync as you go online: 

Firebase makes it that much more easier to continue to work as you get disconnected. In fact no additional code required. API automatically maintains data in disconnected state. It will sync as and when user goes online.


Knowing connection state:

Use /.info/connected on the data source's URL to know current connection status.

$scope.connectionStatus = $firebaseObject(new Firebase("https://Your Firebase App/.info/connected"));

Bind connection status to a green/red icon in the template. 

 <img ng-show="connectionStatus.$value" src="images/green.png" style="max-height:24px" />
 <img ng-show="!connectionStatus.$value" src="images/red.png" style="max-height:24px" />


Track connection status on server-side

JavaScript API onDisconnect will attach a server side event. You may set a value when disconnection occurs,

// The variable "user" holds user name of the logged in user
// If Kotaru is the user name, JSON will be {Kotaru:{conectionStatus:"disconnected"}}


firebaseReference.child(user).child("connectionStatus").onDisconnect().set("disconnected");

// You can override this object when user comes online

JavaScript API to get Offline or Online:

Finally you may chose to go offline or online with functions Firebase.goOffline() and Firebase.goOnline() . These are as good as disconnecting and connecting the application's connection with Firebase. You might allow user to perform multiple offline changes to dataset and at some point get online to sync. 

Wednesday, November 11, 2015

Firebase and those useful little things

In this blog, I'm attempting to write about useful features and tools that Firebase provides. These could make your job easy and some might even have a use case for you.

Open Data sets

Firebase provides open data sets that have read access to everyone. Live information is served for Airport delays across major cities in the US, crypto currencies like bit coins data, earthquake data, real time transit vehicle location data for many cities in the US, weather data and even parking fares and availability of parking slots in SFO city. 
One could see these as a demonstration of quality of Firebase service and validate real world scenarios. They also provide utility value for a Website or a mobile app. It's documented at this link 

Consider following code that reports airport delays at SFO using Firebase open data set and AngularJS



Vulcan - Chrome extension

Vulcan is a Google Chrome extension to view and edit Firebase data. (Link to the extension). Even though most of viewing and editing could be done by opening the Firebase application in a browser, Vulcan makes it easy to add and edit JSON node to your dataset.

Firebase Tools - Bootstrap

Bootstrap option in Firebase tools allow you to create a template or sample app on your machine. It provides all nuts and bolts for the app already. You could keep required features, enhance them and yank any unnecessary code. Follow below steps create a skeleton project

1. Install Firebase Tools
npm install -g firebase-tools

2. Run bootstrap
firebase bootstrap

3. It will ask couple of questions like, which Firebase app would you point to and chose from list of available template projects. Refer to the list below. After making the selection template project is created in a folder at the current directory.

Note: will ask you to authenticate using Firebase credentials if you are not already logged in.
----------------------------------------------------
Available Templates
----------------------------------------------------
angular     - The AngularFire seed template
backbone    - Example to-do app using BackFire
chat        - A realtime multi-person chat client with JavaScript, HTML, and CSS

drawing     - Share a canvas and collaboratively draw with other users
firechat    - A more fully-featured chat widget using Firechat
firepad     - Collaborative text editing with Firepad
ionic       - A small chatroom application written for Ionic
leaderboard - A leaderboard which keeps track of high scores in realtime
presence    - Show who is available, who is idle, and who is gone
react       - Example to-do app using ReactFire
tetris      - Play head-to-head Tetris in your browser

Firebase Hosting

If you have static content files that potentially retrieve and update data to Firebase can be deployed to Firebase Hosting service. (need not necessarily interface with Firebase)

To do so, CD into the directory with HTML pages and run, firebase init
It will prompt you to point to the Firebase app in your profile. Once done downloads firebase.json with details of configuration.

You could run firebase deploy anytime later. that will upload files to firebase hosting service. URL to access the static files is shown on the app card on Firebase dashboard. (refer to the screenshot here)

Note: will ask you to authenticate using Firebase credentials if you are not already logged in.

These are some of the many Firebase features and tools. Hope these provide value while developing with Firebase and make it more exciting. Happy coding.