Mobile

Creating a Bucket List with the Ionic Framework and Firebase

Jay Raj
Share

‘Bucket lists’ (a list of things to experience before death) have always been a popular list for people to maintain.

In Part One of this tutorial, we’ll create the basis for a simple Bucket List application using the IONIC framework. This will create a home page that enables users to sign up to the Bucket list app and sign in. We’ll use Firebase as a back end for our Bucket List application.

IONIC is a HTML5 mobile application development framework which helps developers build native looking apps. It is mainly focused on creating an attractive UI using web technologies such as HTML5, CSS and JavaScript. It requires AngularJS to drive it’s many features like gestures and animations.

Part two will show how to create a platform for a wish list in the Bucket list app.

Source code from this tutorial is available on GitHub.

Getting Started

Start by installing Node.js if you don’t have it already, also install the node package manager npm.

Use npm to install IONIC.

npm install -g cordova ionic

We’ll be creating the app for the Android platform. So, make sure you have the required platform dependencies installed.

Once the installation is complete, create an IONIC project.

ionic start iBucketApp blank

The above command creates a blank IONIC project. Navigate to the project directory iBucketApp, add the required platform, build and emulate.

cd iBucketApp
ionic platform add android
ionic build android
ionic emulate android

If all goes well, you should be able to see the blank app running in the android emulator.

IONIC Blank Application

Project Structure

If you look at the project structure, you can see that inside the project directory iBucketApp, there is a folder called www, this is the folder where we’ll be working.

Folder Structure

Inside www/js is a file called app.js which is the root file of our app. We’ll define our application routes inside app.js. Inside index.html, we’ll define the ion-nav-view where we’ll render different templates.

Making edits and running the app on the emulator is a time consuming task. So we’ll use the browser to test our app and when it’s ready we’ll try it on the android emulator. To make it work with the browser we’ll need to install the required package.json dependencies using npm. Inside the iBucketApp directory, run the following command to install dependencies.

npm install

IONIC provides command line utilities to make app development and testing easier. Once such command is ionic serve. Once dependencies are installed, run ionic serve and you should able to view the app in the web browser.

Blank Starter

Creating the Home Screen

Let’s start by creating a home page for the iBucketList app. Inside the www directory create a folder called templates. Create a file called home.html.

We’ll be switching our view as per the url requested. So we’ll make use of the IONIC directive API ion-nav-view.

Remove all the code inside the index.html body tag. Add the ion-nav-view directive to the body of index.html.

<body ng-app="starter">
  <ion-nav-view></ion-nav-view>
</body>

As per the url requested, we’ll render different views inside the ion-nav-view in index.html. The ion-view directive is another IONIC directive API which is the child of ion-nav-view. It’s a container which holds the view content. Open templates/home.html and add a ion-view with a header tag.

<ion-view>
     <h1>This is Home Template</h1>
</ion-view>

The template and containers are ready. Now we need to define the routes and their respective views. We’ll make use of angular-ui-router. Open js/app.js and define the home state.

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'templates/home.html',
            controller: 'HomeCtrl'
        })

    $urlRouterProvider.otherwise('/home');
});

In the above code, we have defined the template and controller for the url /home. We have also set the default url to /home.

Create a file called js/controller.js and define the HomeCtrl inside it.

angular.module('starter.controllers', [])

.controller('HomeCtrl', ['$scope', function($scope) {

}]);

Include the js/controller.js file in index.html.

<script src="js/controller.js"></script>

Inject starter.controllers into the starter app in app.js.

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

Save the above changes and you should be able to see the changes in the browser.

Home page view

Next, let’s modify the home.html template. We’ll start by adding a header to our app. Adding a header requires us to add the ion-nav-bar to the index.html page. Add this code above the ion-nav-view tag.

<ion-nav-bar class="bar-positive">
</ion-nav-bar>

The title of the ion-view passed will display in the header in ion-nav-bar. In home.html add the title attribute to ion-view.

Let’s add a few elements for the user to sign in. We’ll start by adding the ion-content to home.html. Inside ion-content we’ll create input boxes and buttons. Here is the resulting code in home.html (Replace the current contents):

<ion-view title="iBucketList">
    <ion-content>
        <div class="list list-inset">
            <label class="item item-input">
                <input type="text" placeholder="Username">
            </label>
            <label class="item item-input">
                <input type="password" placeholder="password">
            </label>
        </div>
        <div>
            <button class="button button-block button-assertive">
                Sign In
            </button>
        </div>

    </ion-content>
</ion-view>

Save the changes and you should be able to view the sign in form on the home page.

Sign in Form

The Sign In button is stretched. Let’s add some padding to it’s container.

Inside css/style.css, add:

.padding {
    padding: 10px;
}

Apply the padding style to the button parent div.

<div class="padding">
    <button class="button button-block button-assertive">
        Sign In
    </button>
</div>

Save the changes and you should be able view the new sign in form.

Sign in Page

Implementing Sign In Functionality

We’ll be using Firebase as the back end for our Bucket list app. Register on Firebase if you don’t have an account already. Once registered you should have your own Firebase URL. For examples, here is my firebase URL:

https://burning-fire-1723.firebaseio.com

In order to use Firebase, we need to include the following script references in index.html.

<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>

Once the references have been added, inject the Firebase module into the application. Modify controller.js to inject the Firebase module:

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

Inject $firebaseAuth into the HomeCtrl.

.controller('HomeCtrl',['$scope','$firebaseAuth', function($scope,$firebaseAuth)

Next in the home.html page, add the ng-model directive to the username and password input elements.

<label class="item item-input">
    <input type="text" placeholder="Username" ng-model="login.username">
</label>
<label class="item item-input">
    <input type="password" placeholder="password" ng-model="login.password">
</label>

Add the ngClick directive to the sign in button.

<button ng-click="signin()"  class="button button-block button-assertive">
                Sign In
</button>

In HomeCtrl, define a function called signin which will be invoked when the user clicks the Sign In button.

$scope.login={};

$scope.signin = function() {
    var username = $scope.login.username;
    var password = $scope.login.password;

    console.log(username, password);
}

Save the changes and try to sign in after entering the username and password. If all goes well you should be able to see the username and password in the browser console.

Next, we’ll try to authenticate against a user in Firebase. In order to make this work, first we’ll create a Firebase object using the Firebase URL. Add the following into the function we just created, just after ‘$scope.login={}’.

var firebaseObj = new Firebase("https://burning-fire-1723.firebaseio.com");

Using the firebaseObj we’ll create a loginObj.

var loginObj = $firebaseAuth(firebaseObj);

Now when the user clicks the Sign In button, we’ll use the $authWithPassword API to authenticate against Firebase.

loginObj.$authWithPassword({
        email: username,
        password: password
    })
    .then(function(user) {
        //Success callback
        console.log('Authentication successful');

    }, function(error) {
        //Failure callback
        console.log('Authentication failure');
    });

Here is the modified HomeCtrl code:

.controller('HomeCtrl', ['$scope', '$firebaseAuth', function($scope, $firebaseAuth) {

    $scope.login = {};
    var firebaseObj = new Firebase("https://burning-fire-1723.firebaseio.com");
    var loginObj = $firebaseAuth(firebaseObj);

    $scope.signin = function() {
        var username = $scope.login.username;
        var password = $scope.login.password;

        loginObj.$authWithPassword({
                email: username,
                password: password
            })
            .then(function(user) {
                //Success callback
                console.log('Authentication successful');

            }, function(error) {
                //Failure callback
                console.log('Authentication failure');
            });

    }
}]);

Save the above changes and try to sign in using username, sam@sam.com and password sam. On successful authentication you should have a success message in your browser console.

Let’s create a user home page to redirect the user once successfully authenticated. In the templates folder add a page called userHome.html. Here is the code for userHome.html:

<ion-view title="iBucketList">
     <ion-content>
     <div class="userHomeMsg">
        <span>
            <h2>Succesfully Logged in !!</h2>
        </span>
      </div>
    </ion-content>
</ion-view>

Add a new state called userHome for the userHome.html page in app.js.

.state('userHome', {
    url:'/userHome',
    templateUrl:'templates/userHome.html',
    controller:'UserHomeCtrl'
  })

Create the controller UserHomeCtrl inside the controller.js file.

.controller('UserHomeCtrl', ['$scope', function($scope){

}])

Now on successful authentication, we’ll redirect the user to the user home page. Inject $state into HomeCtrl.

.controller('HomeCtrl',['$scope','$firebaseAuth','$state', function($scope,$firebaseAuth,$state)

On the success callback of the $authWithPassword API call, redirect to the userHome state, replace the current sign in function with the following:

loginObj.$authWithPassword({
        email: username,
        password: password
    })
    .then(function(user) {
        //Success callback
        console.log('Authentication successful');
        $state.go('userHome');

    }, function(error) {
        //Failure callback
        console.log('Authentication failure');
    });

Save the changes and try to sign in using username sam@sam.com and password sam. On successful authentication you will be redirected to the user home page.

App Screenshots

Wrapping Up

In this tutorial, we learnt how to get started with creating a simple Bucket List app using the IONIC framework and Firebase, developing the sign in and sign up forms and user home page.

In the next part of this tutorial, we’ll implement the sign up functionality for the bucket list app. Please let me know your thoughts, suggestions or any corrections in the comments below.


CSS Master, 3rd Edition