1 Introduction

1.1 What is Ionic?

1.2 What is Firebase ?

1.3 What are we building in this tutorial?

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

$ npm install -g ionic cordova

$ cordova -v
$ ionic -v

2.3 Setting up a Firebase Account

3 App Development

3.1 Scope of the App

• 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

3.2 Creating a Basic Ionic App

$ ionic start MyChat tabs

3.3 Configuring the router for our app

     // 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');

     });

     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

3.5 Integrating Firebase to Ionic App

      <!-- firebase & angularfire libraries -->
      <script src="lib/firebase/firebase.js"></script>
      <script src="lib/angular-fire/angularfire.min.js"></script>

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

3.5.1 Implementing SignUp & Login

    angular.module('mychat.services', ['firebase'])
         .factory("Auth", ["$firebaseAuth", "$rootScope",
         function ($firebaseAuth, $rootScope) {
            var ref = new Firebase(firebaseUrl);
            return $firebaseAuth(ref);
        }]);

resolve: {
        // controller will not be loaded until $waitForAuth resolves
        // Auth refers to our $firebaseAuth wrapper in the example above
        "currentAuth": ["Auth",
            function (Auth) {
            // $waitForAuth returns a promise so the resolve waits for it to complete
                return Auth.$waitForAuth();
    }] }

resolve: {
        // controller will not be loaded until $requireAuth resolves
        // Auth refers to our $firebaseAuth wrapper in the example above
        "currentAuth": ["Auth",
            function (Auth) {
         // $requireAuth returns a promise so the resolve waits for it to complete
         // If the promise is rejected, it will throw a $stateChangeError (see above)
                return Auth.$requireAuth();
  }]
    }

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

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

var ref = new Firebase($scope.firebaseUrl);
var auth = $firebaseAuth(ref);

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

$scope.createUser = function (user) {
    console.log("Create User Function called");
    if (user && user.email && user.password && user.displayname) {
        $ionicLoading.show({
            template: 'Signing Up...'
        });

        auth.$createUser({
            email: user.email,
            password: user.password
        }).then(function (userData) {
            alert("User created successfully!");
            ref.child("users").child(userData.uid).set({
                email: user.email,
                displayName: user.displayname
            });
            $ionicLoading.hide();
            $scope.modal.hide();
        }).catch(function (error) {
            alert("Error: " + error);
            $ionicLoading.hide();
        });
    } else
        alert("Please fill all details");
}

$scope.signIn = function (user) {

    if (user && user.email && user.pwdForLogin) {
        $ionicLoading.show({
            template: 'Signing In...'
        });
        auth.$authWithPassword({
            email: user.email,
            password: user.pwdForLogin
        }).then(function (authData) {
            console.log("Logged in as:" + authData.uid);
            ref.child("users").child(authData.uid).once('value', function (snapshot) {
                var val = snapshot.val();
                // To Update AngularJS $scope either use $apply or $timeout
                $scope.$apply(function () {
                    $rootScope.displayName = val;
                });
            });
            $ionicLoading.hide();
            $state.go('tab.rooms');
        }).catch(function (error) {
            alert("Authentication failed:" + error.message);
            $ionicLoading.hide();
        });
    } else
        alert("Please enter email and password both");
}
});

3.5.2 Showing Rooms List

  /**
   * Simple Service which returns Rooms collection as Array from Salesforce 
   * & binds to the Scope in Controller
   */
 .factory('Rooms', function ($firebase) {
     // Might use a resource here that returns a JSON array
  var ref = new Firebase(firebaseUrl);
  var rooms = $firebase(ref.child('rooms')).$asArray();

return {
    all: function () {
        return rooms;
    },
    get: function (roomId) {
        // Simple index lookup
        return rooms.$getRecord(roomId);
    }
}
});

.controller('RoomsCtrl', function ($scope, Rooms, Chats, $state) {
   console.log("Rooms Controller initialized");
   $scope.rooms = Rooms.all();

  $scope.openChatRoom = function (roomId) {
    $state.go('tab.chat', {
        roomId: roomId
    });
}
});

.factory('Chats', function ($firebase, Rooms) {

var selectedRoomId;

var ref = new Firebase(firebaseUrl);
var chats;

return {
    all: function () {
        return chats;
    },
    remove: function (chat) {
        chats.$remove(chat).then(function (ref) {
            ref.key() === chat.$id; // true item has been removed
        });
    },
    get: function (chatId) {
        for (var i = 0; i < chats.length; i++) {
            if (chats[i].id === parseInt(chatId)) {
                return chats[i];
            }
        }
        return null;
    },
    getSelectedRoomName: function () {
        var selectedRoom;
        if (selectedRoomId && selectedRoomId != null) {
            selectedRoom = Rooms.get(selectedRoomId);
            if (selectedRoom)
                return selectedRoom.name;
            else
                return null;
        } else
            return null;
    },
    selectRoom: function (roomId) {
        console.log("selecting the room with id: " + roomId);
        selectedRoomId = roomId;
        if (!isNaN(roomId)) {
            chats = $firebase(ref.child('rooms').child(selectedRoomId).child('chats')).$asArray();
        }
    },
    send: function (from, message) {
        console.log("sending message from :" + from.displayName + " & message is " + message);
        if (from && message) {
            var chatMessage = {
                from: from.displayName,
                message: message,
                createdAt: Firebase.ServerValue.TIMESTAMP
            };
            chats.$add(chatMessage).then(function (data) {
                console.log("message added");
            });
        }
    }
}
});

.controller('ChatCtrl', function ($scope, Chats, $state) {
  console.log("Chat Controller initialized");

$scope.IM = {
    textMessage: ""
};

Chats.selectRoom($state.params.roomId);

var roomName = Chats.getSelectedRoomName();

// Fetching Chat Records only if a Room is Selected
if (roomName) {
    $scope.roomName = " - " + roomName;
    $scope.chats = Chats.all();
}

$scope.sendMessage = function (msg) {
    console.log(msg);
    Chats.send($scope.displayName, msg);
    $scope.IM.textMessage = "";
}

$scope.remove = function (chat) {
    Chats.remove(chat);
}
});

$ ionic platform add ios android
$ cordova build
$ cordova run

5 Conclusion