Build a Real Time Hybrid App with Ionic & Firebase

1 Introduction

With mobile internet traffic rocketing every day, web developers are extremely interested in converting their Web App into a Mobile App. But which Mobile Platform to choose? iOS, Android, or Windows? Or one of the platforms invented more recently, like FirefoxOS, WebOS, or Tizen?
Developing native apps for all of these platforms is impossible, which is why Cordova/Phonegap was created: to enable web developers to build a single app codebase that can be deployed for all of these platforms.
In this tutorial, we will learn how to build a Hybrid Mobile app using the Ionic framework with Firebase as it's real time database. We will create a native application for iOS & Android using Cordova/Phonegap.

1.1 What is Ionic?

Ionic is the buzzing hybrid app development framework built using the popular AngularJS library. AngularJS is a javascript MV* library used for creating single page applications for web and mobile. Ionic is a product of Drifty, a silicon valley startup.

1.2 What is Firebase ?

Gone are the days when you were required to buy a server, spend time installing it and spend long hours programming to build a simple API. Firebase is a cloud based platform which can be integrated into real time apps on any web and mobile platform. It enables apps to write data, and get updates about changes to the database, instantly. Firebase also supports offline capability and your data is synchronized instantly as soon as the app regains network connectivity. Firebase stores your data as JSON documents so that you are free to choose the schema of your data.

1.3 What are we building in this tutorial?

We will be building a multi person chat app with pre-defined rooms for chatting. We will make final apps for iOS & Android using Phonegap/Cordova.

2 Setting Up Development Environment

2.1 Pre requisites

    Mac to build the iOS App
    If you don't have access to a mac, you can build the Android app on a Windows machine
    NodeJS installed on your machine as we require NPM - Node Package Manager for installing cordova and Ionic
    Local Dev environment for Android & iOS ) should be setup already

2.2 Installing Ionic & Cordova

In order to install Ionic & Cordova, you have to install NPM - Node Package Manager - as it's the default package manager for cordova. NPM is used to install a CLI for cordova which enables developers to create a new project, add/remove platforms and add/remove plugins. Ionic has built some extended functionality over Cordova CLI and provides a NPM package.

To install both, run this command in your Terminal/Command Prompt after installing NodeJS.

$ npm install -g ionic cordova
You can check the version of both to see if it has installed the latest version. The latest versions at the time of writing this article are: for Ionic - v1.0.0-beta.14 and for Cordova v4.0.0.

$ cordova -v
$ ionic -v

2.3 Setting up a Firebase Account

In order to user Firebase, you need to have an account with them. You can sign up on the Hacker Plan for 50 Max Connections, 5 GB Data Transfer, 100 MB Data Storage, 1 GB Hosting Storage and 100 GB Hosting Transfer from this url: https://www.firebase.com/signup/

After you signup, a new app will be created for you by default, shown on the dashboard. You can click on Manage Your App to go the Forge, which is a single dashboard to manage your app settings and the data. The link for your Firebase db will be https://your-app-name.firebaseio.com.

3 App Development

3.1 Scope of the App

In the interest of time, we will keep the scope of the app very simple. We will restrict it to just 3 screens.

    Login Screen to login/signup using simple Email Address & Firebase
    Chat Rooms List View to display the complete list of rooms available for chat
    Room Chat Window where multi person chat will be facilitated

We will be using Firebase Simple login to enable authentication with email and password. We will have a list of static rooms based on pre-defined categories where users can chat. The users can select a particular room and exchange text messages through the room specific chat window.

3.2 Creating a Basic Ionic App

Ionic CLI provides a method to create an app based on different starter templates to bootstrap your projects. We will be creating the app using 'tabs' starter template with tabs for Rooms, Chat & Logout.

$ ionic start MyChat tabs

A new ionic (underlying framework being Angularjs) app will be created with some pre-defined templates and code for a tab based app.

3.3 Configuring the router for our appIn Ionic apps, the router is different from the default AngularJS router. Ionic uses ui-router which helps in managing complex nested states in the application. Ionic has a built in navigation stack which intelligently controls the display of back button on the top bar.

We will update the router configuration with 4 states - one for login, another abstract state for tabs layout and nested views for which two more states need to be defined to show list of rooms & the chat window. The javascript code for router resides in app.js.

    

// MyChat App - Ionic & Firebase Demo

     // 'mychat.services' is found in services.js
      // 'mychat.controllers' is found in controllers.js
     angular.module('mychat', ['ionic', 'mychat.controllers', 'mychat.services'])

     .run(function ($ionicPlatform, $rootScope) {
     $ionicPlatform.ready(function () {
    // Hide the accessory bar by default (remove this to show the accessory bar          above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
             if(window.StatusBar) {
                    // org.apache.cordova.statusbar required
                    StatusBar.styleDefault();
             }

    $rootScope.logout = function () {
        console.log("Logging out from the app");
    }
}); }).config(function ($stateProvider, $urlRouterProvider) {

// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider

// State to represent Login View
.state('login', {
    url: "/login",
    templateUrl: "templates/login.html",
    controller: 'LoginCtrl'
})

// setup an abstract state for the tabs directive
.state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
})

// Each tab has its own nav history stack:

.state('tab.rooms', {
    url: '/rooms',
    views: {
        'tab-rooms': {
            templateUrl: 'templates/tab-rooms.html',
            controller: 'RoomsCtrl'
        }
    }
})

.state('tab.chat', {
    url: '/chat',
    views: {
        'tab-chat': {
            templateUrl: 'templates/tab-chat.html',
            controller: 'ChatCtrl'
        }
    }
})

       // if none of the above states are matched, use this as the fallback
       $urlRouterProvider.otherwise('/login');

     });

We have defined the different html templates associated with each state and the specific controller which will manage the state. In AngularJS, controllers are used to initialize the $scope for the view and adding any behavior to the $scope object.$scope acts as container for Models and is based on POJO i.e. plain old javascript objects.

We should strictly abstain from using controllers to write logic for DOM manipulation as it should be handled using AngularJS directives. For now, we will create empty controllers to work upon.

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

          .controller('LoginCtrl', function ($scope, $ionicModal, $state) {
console.log('Login Controller Initialized');

$ionicModal.fromTemplateUrl('templates/signup.html', {
    scope: $scope
}).then(function (modal) {
    $scope.modal = modal;
});

$scope.createUser = function (user) {

}

$scope.signIn = function () {
    $state.go('tab.rooms');
} })
.controller('ChatCtrl', function ($scope, Chats) {
   console.log("Chat Controller initialized");
   $scope.chats = Chats.all();
})  .controller('RoomsCtrl', function ($scope, Rooms) {
console.log("Rooms Controller initialized");
$scope.rooms = Rooms.all(); });

3.4 HTML Templates & Styling

Now we will code the views of the app. We should create static views with some dummy data so that the styling and html code are done completely. We will create the templates for Login, Sign Up, Tabs Layout, Chat Room & Rooms List.

Ionic has multiple UI components to help you create an app easily. There are many components that even imitate native UI features and give your app a native user experience. We have used Ion List, Ion Modals and Ion Tabs in our template views. Ionic provides CSS components as well as Javascript components which are actually AngularJS directives.

Screenshots for different static views are given below.