Creating mobile applications that work in real-time across multiple platforms: Demonstrations using Ionic Framework and Firebase

Building native applications for multiple platforms poses a significant challenge for companies due to the escalating costs. Although front-end developers have explored various hybrid platforms to tackle this issue, Ionic Framework and Firebase emerge as a powerful combination. Together, they offer remarkable flexibility for creating real-time smartphone applications using JavaScript and HTML5.

This tutorial delves into the capabilities of these cross-platform mobile development tools and provides practical Ionic and Firebase examples.

Combined, Ionic and Firebase are a great multiplatform development solution.

(Note: This article assumes a basic understanding of the AngularJS framework. For those new to AngularJS, this introductory post provides a great starting point.)

Introduction to the Ionic Framework

The Ionic Framework comprises three primary elements:

  1. A SASS-based UI framework optimized for mobile user interfaces.
  2. An AngularJS front-end JavaScript framework designed for rapid development of scalable and high-performance applications.
  3. A compiler (Cordova or PhoneGap) for creating native mobile applications using CSS, HTML, and JavaScript.

Ionic also comes equipped with a rich set of lots of useful CSS components ready to use.

Ionic deserves praise for its comprehensive documentation, examples, and starter videos, which streamline the learning process and enable developers to quickly get started.

Introduction to Firebase

Firebase is a backend-as-a-service, schema-less database that facilitates real-time data synchronization without requiring any manual coding. It simplifies backend development, significantly reducing multiplatform development time.

Here are some of its key features and advantages:

  1. Code-less data changes: Any data modification is instantly reflected on client devices without the need for backend code changes.
  2. Wide range of adapters: Firebase provides well-supported and documented adapters for all major JavaScript frameworks and mobile platform SDKs. (This article utilizes AngularFire, the AngularJS binding for Firebase.)
  3. Simplified authentication: Firebase authentication is incredibly easy, regardless of the method used. It supports email/password, Google, Facebook, Twitter, and GitHub logins.
  4. Offline capabilities: Firebase data is accessible offline, allowing applications to remain fully or partially operational even when disconnected. Synchronization occurs automatically upon reconnection.
  5. Intuitive configuration dashboard: Firebase offers a user-friendly dashboard for configuring various aspects, including security rules.
  6. JSON-centric approach: Firebase stores and retrieves data exclusively in JSON format.

Furthermore, Firebase provides cloud services for hosting front-end code, which can streamline deployment and maintenance processes.

It’s worth noting that Firebase’s acquisition by Firebase was acquired by Google in October has significantly boosted its prominence and awareness.

Illustrative Use Case: Expense Tracking

Roommates often share expenses and rely on each other financially. Let’s create an application that helps them track shared expenses and simplify monthly reconciliation.

To enhance this further, we’ll develop a cross-platform mobile application with real-time updates, enabling roommates to monitor expenses as they happen.

This Ionic and Firebase example demonstrates smooth multiplatform app development.

With a clear objective and the necessary tools at our disposal, let’s dive into building our application!

Getting Started with Ionic and Firebase

The first step is to install Ionic. Detailed installation instructions can be found on the Ionic Getting Started page. Keep in mind that Ionic depends on NodeJS; the instructions will guide you through its installation if it’s not already present on your system.

The AngularFire 5-minute tutorial provides an excellent starting point for familiarizing yourself with Firebase. If you prefer a hands-on approach, consider cloning my implementation from GitHub and experimenting with the code directly.

Building Our Cross-Platform Application

For this tutorial, we’ll leverage the sample tabs app included in the Ionic installation as the foundation for our roommate expense tracker. (Execute the command ionic start myApp tabs to run the sample app).

Open the tabs app in your preferred IDE (this tutorial uses Webstorm) and let’s tailor it to our needs.

Our Ionic and Firebase app requires three screens:

Ionic/Firebase screen 1
Ionic/Firebase screen 2
Ionic/Firebase screen 3

Before creating these screens, let’s remove the default “Friends detail screen” from the sample app:

  1. Delete the www/templates/friend-detail.html file.
  2. In www/js/app.js, remove or comment out the state associated with friend-detail.html.
  3. In www/js/controllers.js, delete the FriendDetailCtrl controller referenced in the state we just removed.

Now, let’s update the icons and labels for the tab selectors at the bottom of our screen:

Change the icons and tab text using this example code for Ionic framework.

This can be achieved by making the following changes in www/templates/tabs.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<ion-tabs class="tabs-icon-top">

  <!-- My Tab -->
  <ion-tab title="My Expense" icon="icon ion-log-in" href="#/tab/dash">

    <ion-nav-view name="tab-dash"></ion-nav-view>

  </ion-tab>

  <!-- Friends Tab -->
  <ion-tab title="Roomie's" icon="icon ion-log-out" href="#/tab/friends">
    <ion-nav-view name="tab-friends"></ion-nav-view>

  </ion-tab>

  <!-- Account -->
  <ion-tab title="Account" icon="icon ion-ios7-gear" href="#/tab/account">

    <ion-nav-view name="tab-account"></ion-nav-view>

  </ion-tab>

</ion-tabs>

Before integrating Firebase, let’s create a list and bind it to an array named expenses by adding the following code to www/templates/tab-dash.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<ion-view title="My Expenses">  
  <ion-content>
    <ion-list>               
      <ion-item ng-repeat="expense in expenses|filter:user.password.email"
                type="item-text-wrap">
{{expense.label}}
        <span class="badge badge-balanced">{{expense.cost}}</span>
      </ion-item>             
    </ion-list>            
    <div class="card assertive">                   
      <div class="item item-text-wrap">
        Total Spent <span class="badge badge-positive">{{getTotal()}}</span>
      </div>               
    </div>        
  </ion-content>     
  <ion-footer-bar>
    <input ng-model='label' type='text' id='labelInput'
           placeholder='Type a new expense...' />
    <input ng-model='cost' type="number" id="costInput" placeholder='

Next, we need to modify the `DashCtrl` in `www/js/controllers.js` to include the `expenses` array, along with `addExpense` and `getTotal` methods:

```javascript
.controller('DashCtrl', function($scope) {
    $scope.expenses = [{
        by: ‘email’,
        label: ’test’,
        cost: 10
    }];
    $scope.addExpense = function(e) {
        $scope.expenses.push({
            by: < some email > 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;
    };
})

The expenses array will store our expense items, addExpense() will add new expenses to this array, and getTotal() will calculate the total expenses.

We need to apply similar modifications to tab-friends.html. Try implementing this yourself. For reference or if you encounter difficulties, check out the code on my implementation on GitHub.

Integrating Firebase

You’ll need a Firebase account. Sign up here for a free “Hacker Plan”.

Upon signing up, you’ll receive your root URL, resembling https://<yourfirebase>.firebaseio.com.

Enabling Firebase in our app requires two minor adjustments.

First, include the Firebase scripts in your app’s www/index.html:

1
2
3

<script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
<script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script>
<script src="js/app.js"></script>

Second, add the Firebase module to your AngularJS ‘starter’ module:

1

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

Firebase is now integrated like any other AngularJS module.

The AngularFire 5 minute tutorial explains how to create data references within controllers. For our app, we’ll store these references in a separate service for easier maintenance, especially if the root URL changes. Create this service by adding the following code to www/js/services.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

.factory('fireBaseData', function($firebase) {
    var ref = new Firebase("https://luminous-fire-3429.firebaseio.com/"),
        refExpenses = new Firebase("https://luminous-fire-3429.firebaseio.com/expenses"),
        refRoomMates = new Firebase("https://luminous-fire-3429.firebaseio.com/room-mates");
    return {
        ref: function() {
            return ref;
        },
        refExpenses: function() {
            return refExpenses;
        },
        refRoomMates: function() {
            return refRoomMates;
        }
    }
});

This code defines three reference URLs: one for the root and two for collections named ’expenses’ and ‘room-mates’.

Adding new collections in Firebase is straightforward. Append the collection name to your root URL. For our ’expenses’ collection:

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

This creates the expenses collection, ready to store our expense objects.

Now, let’s connect the Firebase ’expenses’ collection, replacing our previous placeholder array. Modify the DashCtrl in www/js/controllers.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

.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;
    };
})

Similar modifications are required for FriendsCtrl. Again, attempt this independently, referring to my implementation on GitHub for assistance or verification.

To test the integration, run the app on two devices. Add a new expense and observe if it appears on both devices. Success! You’ve successfully linked your Ionic app with Firebase!

Test your multiplatform app on different devices by connecting them to your system and running ‘ionic run android’ or ‘ionic emulate ios’. Consult the Ionic documentation for more details on testing your app.

Account Management and Security with Firebase

While the core functionality is operational, our app lacks security. Anyone can access your expenses without logging in. Let’s address this.

Firebase offers a robust and user-friendly authentication framework based on “rules.” The Firebase Rules Language provides extensive control (refer to the Firebase security documentation for detailed information).

For our app, we’ll implement a basic rule to restrict unauthorized access. Navigate to your Firebase root URL, click “Security & Rules” in the left sidebar, paste the code below, and save:

1
2
3
4
5
6

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

Running your app now will show no data. Inspecting network requests reveals an authorization error in your console.

User Account Creation and Login Functionality

Firebase allows authentication via custom email/password combinations or existing Google, Facebook, Twitter, or GitHub credentials. For email/password authentication, Firebase provides comprehensive API methods for password changes, resets, etc. For more information on authentication using Firebase, consult the Firebase guide.

For our demo, we’ll create two user accounts via the Firebase interface:

  1. Go to your Firebase root URL.
  2. Click “Login & Auth” in the left sidebar.
  3. Enable “Email & Password Authentication.”
  4. Locate the “Add New Accounts Form.”
  5. Add your accounts using “Add New User.”
Enabling secure logins is essential when developing multiplatform applications with Ionic and Firebase.

To incorporate the login interface, first add the following to ‘www/templates/tab-account.html’:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<ion-view title="Account">
  <ion-content>           
    <div class="list" ng-show="showLoginForm">
      <label class="item item-input">
        <span class="input-label">Email</span><input type="text" ng-model="em"/>
      </label>
      <label class="item item-input">
        <span class="input-label">Password</span><input type="password" ng-model="pwd"/>
      </label>
      <button class="button button-block button-positive" ng-click="login(em, pwd)">Login</button>
    </div>            
    <div class="card" ng-hide="showLoginForm">      
      <div class="item item-text-wrap">You are logged in as {{user.password.email}}</div>                
    </div>
    <button class="button button-stable" ng-click="logout()" ng-hide="showLoginForm">Logout</button>
  </ion-content>  
</ion-view>

Then, add this to AccountCtrl in ‘www/controller.js’:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.controller('AccountCtrl', function($scope, fireBaseData) {
    $scope.showLoginForm = false; //Checking if user is logged in
    $scope.user = fireBaseData.ref().getAuth();
    if (!$scope.user) {
        $scope.showLoginForm = true;
    }
    //Login method
    $scope.login = function (em, pwd) {
        fireBaseData.ref().authWithPassword({
            email    : em,
            password : pwd
        },function(error, authData) {
            if (error === null) {
                console.log("User ID: " + authData.uid +
                            ", Provider: " + authData.provider);
                $scope.user = fireBaseData.ref().getAuth();
                $scope.showLoginForm = false;
                $scope.$apply();
            } else {
                console.log("Error authenticating user:", error);
            }
        });
    };

    // Logout method
    $scope.logout = function () {
        fireBaseData.ref().unauth();
        $scope.showLoginForm = true;
    };
});

For enhanced security, remember that Firebase logins persist by default. To require login on each app start, adjust the Firebase configuration. Once after successful login, execute:

1
2
3

var r = $firebase(fireBaseData.refRoomMates()).$asArray();
// NOTE: Substitute the email addresses of your two user accounts in the line below
r.$add(["user1@mail.com","user2@mail.com"]);

(You can include this in the account controller after login or run it in your console inspector after setting a breakpoint).

User-Specific Data Filtering

Our app still needs to differentiate your expenses from your roommate’s. We’ll use our newly created accounts to filter data in the views.

Modify ‘dashCtrl’ in ‘www/js/controllers.js’ to: (a) fetch the current user’s data into $scope and (b) save new expenses under the current user:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

.controller('DashCtrl', function($scope, fireBaseData, $firebase) {
    $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray();
    $scope.user = fireBaseData.ref().getAuth();
    // ADD MESSAGE METHOD
    $scope.addExpense = function(e) {
        $scope.expenses.$add({
            by: $scope.user.password.email,
            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;
    };
})

Next, add a filter to ‘www/templates/tab-dash.html’ to display only the current user’s expenses:

1

<ion-item ng-repeat="expense in expenses|filter:user.password.email" type="item-text-wrap">

Now, the Home screen is customized. Users see and add only their expenses.

Finally, enable sharing the entire expense list between roommates. Modify ‘www/templates/tab-friends.html’:

1

<ion-item ng-repeat="expense in expenses|filter:roomiesEmail" type="item-text-wrap">

And update FriendsCtrl in ‘www/controllers.js’:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

.controller('FriendsCtrl', function($scope, fireBaseData, $firebase) {
    $scope.user = fireBaseData.ref().getAuth();
    $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray();
    $scope.roomies = $firebase(fireBaseData.refRoomMates()).$asArray();
    $scope.roomies.$loaded().then(function(array) {
        //array = [[set1_rm1_email, set1_rm2_email], [set2_rm1_email, set2_rm2_email] ...]
        for (var i = 0; i < array.length; i++) {
            if (array[i][0] === $scope.user.password.email) {
                $scope.roomiesEmail = array[i][1];
            } else if (array[i][1] === $scope.user.password.email) {
                $scope.roomiesEmail = array[i][0];
            }
        }
        $scope.$apply();
        // NOTE: For simplicity, this demo only supports the 2-roommate use case
    });
    $scope.addExpense = function(e) {
        $scope.expenses.$add({
            by: $scope.roomiesEmail,
            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;
    };
})

That’s it! Install or update the app on both devices, and you’re good to go!

Conclusion

This simple example merely scratches the surface of what Ionic and Firebase can achieve. They offer a powerful synergy for creating real-time, cross-platform smartphone applications using JavaScript and HTML5.

Related: Angular 6 Tutorial: New Features with New Power (A full-stack example including a Firebase back end)

/> 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


Next, we need to modify the `DashCtrl` in `www/js/controllers.js` to include the `expenses` array, along with `addExpense` and `getTotal` methods:

```javascript
.controller('DashCtrl', function($scope) {
    $scope.expenses = [{
        by: ‘email’,
        label: ’test’,
        cost: 10
    }];
    $scope.addExpense = function(e) {
        $scope.expenses.push({
            by: < some email > 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;
    };
})

The expenses array will store our expense items, addExpense() will add new expenses to this array, and getTotal() will calculate the total expenses.

We need to apply similar modifications to tab-friends.html. Try implementing this yourself. For reference or if you encounter difficulties, check out the code on my implementation on GitHub.

Integrating Firebase

You’ll need a Firebase account. Sign up here for a free “Hacker Plan”.

Upon signing up, you’ll receive your root URL, resembling https://<yourfirebase>.firebaseio.com.

Enabling Firebase in our app requires two minor adjustments.

First, include the Firebase scripts in your app’s www/index.html:

1
2
3

<script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
<script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script>
<script src="js/app.js"></script>

Second, add the Firebase module to your AngularJS ‘starter’ module:

1

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

Firebase is now integrated like any other AngularJS module.

The AngularFire 5 minute tutorial explains how to create data references within controllers. For our app, we’ll store these references in a separate service for easier maintenance, especially if the root URL changes. Create this service by adding the following code to www/js/services.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

.factory('fireBaseData', function($firebase) {
    var ref = new Firebase("https://luminous-fire-3429.firebaseio.com/"),
        refExpenses = new Firebase("https://luminous-fire-3429.firebaseio.com/expenses"),
        refRoomMates = new Firebase("https://luminous-fire-3429.firebaseio.com/room-mates");
    return {
        ref: function() {
            return ref;
        },
        refExpenses: function() {
            return refExpenses;
        },
        refRoomMates: function() {
            return refRoomMates;
        }
    }
});

This code defines three reference URLs: one for the root and two for collections named ’expenses’ and ‘room-mates’.

Adding new collections in Firebase is straightforward. Append the collection name to your root URL. For our ’expenses’ collection:

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

This creates the expenses collection, ready to store our expense objects.

Now, let’s connect the Firebase ’expenses’ collection, replacing our previous placeholder array. Modify the DashCtrl in www/js/controllers.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

.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;
    };
})

Similar modifications are required for FriendsCtrl. Again, attempt this independently, referring to my implementation on GitHub for assistance or verification.

To test the integration, run the app on two devices. Add a new expense and observe if it appears on both devices. Success! You’ve successfully linked your Ionic app with Firebase!

Test your multiplatform app on different devices by connecting them to your system and running ‘ionic run android’ or ‘ionic emulate ios’. Consult the Ionic documentation for more details on testing your app.

Account Management and Security with Firebase

While the core functionality is operational, our app lacks security. Anyone can access your expenses without logging in. Let’s address this.

Firebase offers a robust and user-friendly authentication framework based on “rules.” The Firebase Rules Language provides extensive control (refer to the Firebase security documentation for detailed information).

For our app, we’ll implement a basic rule to restrict unauthorized access. Navigate to your Firebase root URL, click “Security & Rules” in the left sidebar, paste the code below, and save:

1
2
3
4
5
6

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

Running your app now will show no data. Inspecting network requests reveals an authorization error in your console.

User Account Creation and Login Functionality

Firebase allows authentication via custom email/password combinations or existing Google, Facebook, Twitter, or GitHub credentials. For email/password authentication, Firebase provides comprehensive API methods for password changes, resets, etc. For more information on authentication using Firebase, consult the Firebase guide.

For our demo, we’ll create two user accounts via the Firebase interface:

  1. Go to your Firebase root URL.
  2. Click “Login & Auth” in the left sidebar.
  3. Enable “Email & Password Authentication.”
  4. Locate the “Add New Accounts Form.”
  5. Add your accounts using “Add New User.”
Enabling secure logins is essential when developing multiplatform applications with Ionic and Firebase.

To incorporate the login interface, first add the following to ‘www/templates/tab-account.html’:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<ion-view title="Account">
  <ion-content>           
    <div class="list" ng-show="showLoginForm">
      <label class="item item-input">
        <span class="input-label">Email</span><input type="text" ng-model="em"/>
      </label>
      <label class="item item-input">
        <span class="input-label">Password</span><input type="password" ng-model="pwd"/>
      </label>
      <button class="button button-block button-positive" ng-click="login(em, pwd)">Login</button>
    </div>            
    <div class="card" ng-hide="showLoginForm">      
      <div class="item item-text-wrap">You are logged in as {{user.password.email}}</div>                
    </div>
    <button class="button button-stable" ng-click="logout()" ng-hide="showLoginForm">Logout</button>
  </ion-content>  
</ion-view>

Then, add this to AccountCtrl in ‘www/controller.js’:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.controller('AccountCtrl', function($scope, fireBaseData) {
    $scope.showLoginForm = false; //Checking if user is logged in
    $scope.user = fireBaseData.ref().getAuth();
    if (!$scope.user) {
        $scope.showLoginForm = true;
    }
    //Login method
    $scope.login = function (em, pwd) {
        fireBaseData.ref().authWithPassword({
            email    : em,
            password : pwd
        },function(error, authData) {
            if (error === null) {
                console.log("User ID: " + authData.uid +
                            ", Provider: " + authData.provider);
                $scope.user = fireBaseData.ref().getAuth();
                $scope.showLoginForm = false;
                $scope.$apply();
            } else {
                console.log("Error authenticating user:", error);
            }
        });
    };

    // Logout method
    $scope.logout = function () {
        fireBaseData.ref().unauth();
        $scope.showLoginForm = true;
    };
});

For enhanced security, remember that Firebase logins persist by default. To require login on each app start, adjust the Firebase configuration. Once after successful login, execute:

1
2
3

var r = $firebase(fireBaseData.refRoomMates()).$asArray();
// NOTE: Substitute the email addresses of your two user accounts in the line below
r.$add(["user1@mail.com","user2@mail.com"]);

(You can include this in the account controller after login or run it in your console inspector after setting a breakpoint).

User-Specific Data Filtering

Our app still needs to differentiate your expenses from your roommate’s. We’ll use our newly created accounts to filter data in the views.

Modify ‘dashCtrl’ in ‘www/js/controllers.js’ to: (a) fetch the current user’s data into $scope and (b) save new expenses under the current user:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

.controller('DashCtrl', function($scope, fireBaseData, $firebase) {
    $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray();
    $scope.user = fireBaseData.ref().getAuth();
    // ADD MESSAGE METHOD
    $scope.addExpense = function(e) {
        $scope.expenses.$add({
            by: $scope.user.password.email,
            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;
    };
})

Next, add a filter to ‘www/templates/tab-dash.html’ to display only the current user’s expenses:

1

<ion-item ng-repeat="expense in expenses|filter:user.password.email" type="item-text-wrap">

Now, the Home screen is customized. Users see and add only their expenses.

Finally, enable sharing the entire expense list between roommates. Modify ‘www/templates/tab-friends.html’:

1

<ion-item ng-repeat="expense in expenses|filter:roomiesEmail" type="item-text-wrap">

And update FriendsCtrl in ‘www/controllers.js’:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

.controller('FriendsCtrl', function($scope, fireBaseData, $firebase) {
    $scope.user = fireBaseData.ref().getAuth();
    $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray();
    $scope.roomies = $firebase(fireBaseData.refRoomMates()).$asArray();
    $scope.roomies.$loaded().then(function(array) {
        //array = [[set1_rm1_email, set1_rm2_email], [set2_rm1_email, set2_rm2_email] ...]
        for (var i = 0; i < array.length; i++) {
            if (array[i][0] === $scope.user.password.email) {
                $scope.roomiesEmail = array[i][1];
            } else if (array[i][1] === $scope.user.password.email) {
                $scope.roomiesEmail = array[i][0];
            }
        }
        $scope.$apply();
        // NOTE: For simplicity, this demo only supports the 2-roommate use case
    });
    $scope.addExpense = function(e) {
        $scope.expenses.$add({
            by: $scope.roomiesEmail,
            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;
    };
})

That’s it! Install or update the app on both devices, and you’re good to go!

Conclusion

This simple example merely scratches the surface of what Ionic and Firebase can achieve. They offer a powerful synergy for creating real-time, cross-platform smartphone applications using JavaScript and HTML5.

Related: Angular 6 Tutorial: New Features with New Power (A full-stack example including a Firebase back end)
Licensed under CC BY-NC-SA 4.0