Introduction to Firebase

Firebase can power your app's backend, including data storage, user authentication, static hosting, and more. We provide these services so you can focus on creating extraordinary user experiences.

Firebase Realtime Database

Data in your Firebase database is stored as JSON and synchronized in realtime to every connected client. When you build cross-platform apps with our Android, iOS, and JavaScript SDKs, all of your clients share one Firebase database and automatically receive updates with the newest data.

Automatically scales with your app
When your app is a breakout hit, you don't have to worry about scaling your server code or provisioning extra capacity — Firebase handles that automatically for you. Our servers manage millions of concurrent connections and billions of operations per month.

First-class security features
All of your data is transferred over a secure SSL connection with a 2048-bit certificate. Database access and validation is controlled at a granular level using our flexible security rules language. All of your data security logic is centralized in one place making it easy to update and verify.

Works offline
Your Firebase app will remain responsive regardless of network latency or Internet connectivity. All writes to a Firebase database will trigger local events immediately, before any data has been written to the server. Once connectivity is re-established, the client will receive any changes it missed, synchronizing it with the current server state.

Firebase Authentication

With Firebase, you can easily authenticate users from our Android, iOS, and JavaScript SDKs in just a few lines of code. We have built-in functionality for authenticating users with email & password, Facebook, Twitter, GitHub, Google, and anonymous auth. Apps that use Firebase's built-in auth services can handle user login entirely with client-side code, saving you time and the headache of operating your own backend. You can also integrate authentication with your existing backend servers using our custom auth tokens.

Firebase Hosting

Deploy your web app in seconds with our production-grade static asset hosting. All of your content is delivered over SSL from our global CDN.

Deploy in seconds

Deploy using the Firebase command line tools and roll back to previous versions with one click. Every app gets its own firebaseapp.com domain, and paid apps can deploy to a custom domain.

SSL by default

Every app is served over a secure connection, and we take care of provisioning the SSL cert for you.

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.

Creating a List View in ionic framework

The List is a widely used interface element in most current mobile OS's, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
Using the ion-list and ion-item directives make it easy to support various interaction modes such as swipe to edit, drag to reorder, and removing items. However, if you need just a simple list you won't need to use the directives, but rather just use the classnames.

Usage
<ion-list>
  <ion-item ng-repeat="item in items" item="item">
  </ion-item>

</ion-list>

HTML file

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic List Directive</title>
   
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>

  <body ng-controller="MyCtrl">
    
    <ion-header-bar class="bar-positive">
      <div class="buttons">
        <button class="button button-icon icon ion-ios-minus-outline"
          ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>
      </div>
      <h1 class="title">Ionic Delete/Option Buttons</h1>
      <div class="buttons">
        <button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder">
            Reorder
        </button>
      </div>
    </ion-header-bar>

    <ion-content>

      <!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->
      
      <ion-list show-delete="data.showDelete" show-reorder="data.showReorder">

        <ion-item ng-repeat="item in items" 
                  item="item"
                  href="#/item/{{item.id}}" class="item-remove-animate">
          Item {{ item.id }}
          <ion-delete-button class="ion-minus-circled" 
                             ng-click="onItemDelete(item)">
          </ion-delete-button>
          <ion-option-button class="button-assertive"
                             ng-click="edit(item)">
            Edit
          </ion-option-button>
          <ion-option-button class="button-calm"
                             ng-click="share(item)">
            Share
          </ion-option-button>
          <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
        </ion-item>

      </ion-list>

    </ion-content>
      
  </body>

</html>


Javascript file

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  
  $scope.data = {
    showDelete: false
  };
  
  $scope.edit = function(item) {
    alert('Edit Item: ' + item.id);
  };
  $scope.share = function(item) {
    alert('Share Item: ' + item.id);
  };
  
  $scope.moveItem = function(item, fromIndex, toIndex) {
    $scope.items.splice(fromIndex, 1);
    $scope.items.splice(toIndex, 0, item);
  };
  
  $scope.onItemDelete = function(item) {
    $scope.items.splice($scope.items.indexOf(item), 1);
  };
  
  $scope.items = [
    { id: 0 },
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 8 },
    { id: 9 },
    { id: 10 }

  ];
  

});

Result Output

Simple login page using ionic and AngularJS

Go to your command line and start a new ionic app:

ionic start simple-login tabs
cd simple-login
ionic serve --lab

View File

As we want to display our login page before the tabs you see right now, we must add a new file in the www/templates folder, named login.html with this content:

<ion-view view-title="Login" name="login-view">
  <ion-content class="padding">
      <div class="list list-inset">
          <label class="item item-input">
              <input type="text" placeholder="Username" ng-model="data.username">
          </label>
          <label class="item item-input">
              <input type="password" placeholder="Password" ng-model="data.password">
          </label>
      </div>
      <button class="button button-block button-calm" ng-click="login()">Login</button>
  </ion-content>
</ion-view>

So here we have a simple view, a small login form and a button. We will assign everything needed in the controller later, for now lets add our route so we can see our view the first time. Therefore, open up the app.js and add this state to the already existing states:

.state('login', {
      url: '/login',
      templateUrl: 'templates/login.html'
  })

You can run your app now, and you should see a view like this

Three Reasons Why Ionic is Great

Ionic is an Open Source framework with a dedicated community-driven spirit behind its development team. It is bridging the gap between web and native app development and it has rich, native-style UI components and interactions. The UI Elements are more than just a jQuery widget. Each UI element comes with a supporting delegate service.

Here are the major reasons to use ionic

• Ionic is best friends with AngularJS: Ionic and AngularJS go very well together for many reasons: The UI components used in Ionic are AngularJS Directives; the framework uses delegates to control the UI elements and a UI-Router with multiple histories. It uses UI-Router for route and state management. When using Ionic you can even manage multiple history streams, allowing you to build apps with non-linear navigation.

• You can achieve amazing style with Ionic: When using Ionic, all the CSS is generated using SASS and the CSS was designed to be easily overridden, making it easier for developers to update in an iterative workflow and customize their apps. The CSS is stand-alone, making it independent of Ionic's underlying JavaScript. The Gulp task to compile SASS comes included in the framework. One of the big differentiating factors about Ionic is that it uses Flexbox standard to achieve a responsive layout. This allows you to build grid layouts with any number of columns (there’s no restriction to a 12 column layout), and you can even vertically align content within each column.

• It’s performance oriented: We’ve found Ionic to be performance obsessed, with fast and consistent interface – even though it’s relatively new. It has hardware accelerated animations and minimal DOM manipulations. You need not include jQuery, although you can add it if you want. It will reliably work for complex apps both on iOS and on Android. Coming soon - We hear that Ionic will be releasing a useful tool to build apps with a graphical interface at http://ionicframework.com/creator/

Testing a your ionic based or web application framework application

You are developing mobile based application with ionic and you have to test your mobile application in a mobile phone. Apache Ripple™  is a web based mobile environment simulator designed to enable rapid development of mobile web applications for various web application frameworks, such as Apache Cordova™ and BlackBerry® WebWorks™. It can be paired with current web based mobile development workflows to decrease time spent developing and testing on real devices and/or simulators. There is one plugin also available for this Ripple Emulator in google chrome.

Let’s start by creating a fresh Apache Cordova Android and iOS project:

Let’s start by creating a fresh Apache Cordova Android and iOS project:

cordova create TestProject com.nraboy.testproject TestProject
cd TestProject
cordova platform add android
cordova platform add ios

you done.. you project is ready and you can start adding more into it. Like any framework.

Ionic mobile app development framework

Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps are essentially small websites running in a browser shell in an app that have access to the native platform layer. Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, speed of development, and access to 3rd party code.

Think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. Kind of like "Bootstrap for Native," but with support for a broad range of common native mobile components, slick animations, and beautiful design.

Unlike a responsive framework, Ionic comes with very native-styled mobile UI elements and layouts that you'd get with a native SDK on iOS or Android but didn't really exist before on the web. Ionic also gives you some opinionated but powerful ways to build mobile applications that eclipse existing HTML5 development frameworks.

Since Ionic is an HTML5 framework, it needs a native wrapper like Cordova or PhoneGap in order to run as a native app. We strongly recommend using Cordova proper for your apps, and the Ionic tools will use Cordova underneath.

Built with ionic

ionic framework developer

web development company jalandhar city