Making an Ionic Hybrid Mobile Application with Angular.js and Firebase

Part 1

In this article I am going to walkthrough making a hybrid mobile application that can be used as a web app, ios app or an Android app. I am making it live so you can all download it on the Play Store(Unfortunately, I haven’t filed for my Iphone developer subscription as of 01/12/2014) . The application I am developing is so that roommates can track expenses and assign them to each other when they need to.

Firstly you want to download and install node.js then node package manager if you havent already.

Node : http://nodejs.org/

Npm: https://www.npmjs.com/

Afterwards you want to install ionic and cordova.

Type into your terminal:

npm install -g cordova ionic

This installs both ionic and Cordova at the same time. Cordova is a set of APIs that allow you to have control of a mobile devices Native device function, such as: camera, accelerometer, etc . Then you want to start your ionic app

ionic start Instxpense

Once you have done that open up your application in your chosen text editor and lets get started.

Setting things up

cd Rexpenses
ionic platform add android
ionic build android
ionic emulate android

If you run into an error saying “ ANDROID_HOME is not set and “android” command not in your PATH. You must fulfill at least one of these conditions.” Then afterwards you may need to download the SDK and then follow the instructions on Cordovas website.

Android SDK: http://developer.android.com/sdk/index.html

Cordova: https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html

You should see a nice emulation with some friends and chat interfaces.

Get Started

Now to get started , you may want to delete the friend-detail html file and then within the www/js/app.js file comment out the friend-detail html state.

then you want to delete the www/templates/tab-friends-detail.html file

afterwards go into the www/js/controller.js file and delete the “FriendDetailCtrl” controller.

Modifying the View and the Controller

Once you have done that you may want to change the tabs to include a three tab interface, that looks something like this..

Here is the code

Once you have done that we want to change the DashCtrl to grab grab expenses list them and their cost and also enable adding a new expense and getting the total expense.

After you want to edit the tab-dash.html file so you can see your expenses on the page.

Look into your controller.js file and then edit the DashCtrl so it looks like this:

So the expenses array is where we store the expenses, So we can See who the expense was by , what it was for , and also the cost of the array. The addExpense pushes new expenses into that array. Finally the getTotal finds the total of all the expenses.

You want to do a similar set up with tab-friends.html. :

Adding Firebase

So we have set up the Ionic views and now we are ready to add firebase to your application. Put this code into your public/index.html file

To add the firebase module to your app, add ‘firebase’ into your angular.module within app.js like so:

angular.module(‘starter’, [‘ionic’, ‘starter.controllers’, ‘starter.services’,’firebase’])

Firebase Data References Side-Note

If you want to learn how to create data references within controllers you can go to firebase’s website for a quick 5 min tutorial:

Tutorial - Firebase

However I am not doing it in this format, beacuse it is much easier to maintain should the root url be changed. So add this to your www/js/services.js:

This code adds three collections, one for the root and two for the collections Roommates and Expenses.

Adding a new collection to Firebase is simply done by adding its name to the end of your root url. So to create the expenses collection that we’ll need, all we need is the following:

https://<yourfirebase>.firebaseio.com/expenses

This will create the expenses collection, and we can then start adding objects to it.

Ok now that we can hook in the expenses collection from firebase to replace the fake expenses that were made in the Dash Ctrl earlier. This can be done by changing the DashCtrl as follows.

.controller('DashCtrl', function($scope, fireBaseData, $firebase) {
$scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray();
$scope.addExpense = function(e) {
$scope.expenses.$add({
by: < someemail > ,
label: $scope.label,
cost: $scope.cost
});
$scope.label = "";
$scope.cost = 0;
};
$scope.getTotal = function() {
var rtnTotal = 0;
for (var i = 0; i < $scope.expenses.length; i++) {
rtnTotal += $scope.expenses[i].cost;
}
return rtnTotal;
};
})

We need to make similar changes to the FriendsCtrl.

Now that the two required controllers have been made, you can verify it is working by running the app on multiple clients. You can do so by adding the ios or android cordova platforms, and then type in ionic platform add ios or ionic platform add android. Then build the app by typing in ionic build ios or ionic build android. Then you can test your app on different devices by connecting a device to your computer and running ionic run android or ionic emulate ios.

Authorization

So now we have a 2 person expenses application functioning, we need to apply some security features to the app, because it is completly insecure, anyone can add any expenses to anyone. Firebase uses an extremely easy to use yet poweful authentication framework. So go to your root firebase URL and change the “rules”, by clicking on “Security & Rules” in your left action bar, then paste this code in the rules and click save.

{
    "rules": {
        ".read": "auth != null",
        ".write": "auth != null"
    }
}

If you run your application now, you will notice there is no data. You can look inside to find out by using the browser tools and you should see a message in your console that you are not authorized to view data.

Great that means that the Authorization was a success.

Im going to be continuing how to add user accounts in the second part of this article.