Ionic Framework for Hybrid Mobile App Development

More about final beta at
http://ionicframework.com/blog/the-final-beta/

Along with Visual Studio for Hybrid Mobile App development, I'm exploring Ionic Framework. Being an AngularJS developer Ionic Framework is a natural choice. As I write this blog, today the final beta of Ionic Framework is released. That means Version 1.0 is pretty close.

What's Ionic Framework? 

It's a Phone Gap based Hybrid mobile app development framework. Phone Gap is great due to HTML/JS to code mobile apps. Ionic Framework adds AngularJS on top it. That means code is clean and can be sophisticated. 

Why not just add AngularJS reference on Phone Gap (instead of Ionic Framework)? That's certainly an option but following are somethings to take care of

1. Reference ngTouch AngularJS module - which handles 300 ms delay on touch. 
2. Routing / navigation on mobile phone can be complex. Angular-mobile-nav library is useful for small scale mobile apps.
3. Mobile User Interface and Controls - custom develop or use directives, web components and styling out there on Internet. This is needed to make your app user friendly on mobile phone.

Above are taken care in Ionic Framework and it offers more,

*image reference 
http://ionicframework.com/docs/api/service/$ionicActionSheet/

Ready made web components - These are AngularJS directives. Ionic came up with Tabs, Side Menu, Action Sheets etc. 

CSS - Styles that make the HTML code look very close to native application. Default CSS is developed using Sass.

Ease of development - Ionic wrapped multiple Cordova features and provided with additional ease. For example ionic serve launches app view in a browser. It live reloads code changes to the browser. Using Chrome Developer tools debugging and verifying functionality of most of the app (excluding native features) is pretty easy. By the way Chrome Dev Tools has in-built screen size emulation for various mobile devices.

Getting Started:

1. Install Ionic by using node package manager npm install corodova ionic -g
2. Start a project using pre existing templates, I prefer blank template ionic start my-project-name blank
3. CD into the new folder and run ionic serve for launching app with boilerplate code in a browser

Detailed getting started article.

Folder Structure

Application code should be under the folder www. Index.html bootstraps AngularJS with ng-app directive. Under www/js app.js creates AngularJS module used in Index.html

// Dependent "ionic" AngularJS module has all required services and directives.

angular.module('myMobileApp', ['ionic']);

.run function has certain boilerplate code for status bar and keyboard accessory bar

If it's a single view (or route) for the app ion-content embedded in ion-pane directive is sufficient get the job done. Below is a Hello World view.

<ion-pane>

   <ion-header-bar class="bar-dark">

     <h1 class="title">Hello World</h1>

   </ion-header-bar>

   <ion-content padding="true">

      <h3>Hello Ionic World</h3>

   </ion-content>

</ion-pane>

ng-controller can be tied up at any level in the markup (of course under ng-app)

Sample Tab View (view from tabs template
downloaded through ionic start myApp tabs)

When there are multiple views (or routes) use directive ion-nav-view. Routing in Ionic is based on UI-Router which works like a state machine. This is useful with mobile screens like Tabs and Side

Menu which have nested views. This works well with parallel views as well.

Define routes in app.js (preferably) in config function. Following are some sample routes.

.config(function($stateProvider, $urlRouterProvider){

  $stateProvider

  .state('list',{

    url:'/list',

    templateUrl: 'views/list.html',

    controller: 'listController'

  })

  .state('details', {

    url: '/details/:company',

    templateUrl: 'views/details.html',

    controller: 'detailsController'

  });

$urlRouterProvider.otherwise('/list');

ngCordova

ngCordova wraps PhoneGap Plug-Ins in AngularJS. In PhoneGap to access phone's native features PlugIns need to be used. They are also useful for code reusability across platforms. In an example to access Camera, a plug-ing need to be added using Cordova.

With ngCordova these plug-ins are encapsulated into AngularJS Services, so we could inject directly into app code and use native phone features easily.

At the time of this blog it's an Alpha release; So proceed with caution.

GitHub link || Website

Use ngCordova module as a dependency to access all services that come with it. Here is a sample controller function taking a picture and setting to a variable on $scope. This variable is tied to img element in the view (markup)

App using ngCordova at work
on my phone.

  $scope.captureAPic = function() {

    $cordovaCamera.getPicture({

        quality : 75,

        destinationType : Camera.DestinationType.DATA_URL,

        sourceType : Camera.PictureSourceType.CAMERA,

        encodingType: Camera.EncodingType.JPEG,

        targetWidth: 320,

        targetHeight: 480,

        popoverOptions: CameraPopoverOptions,

        saveToPhotoAlbum: true

    }).then(function(imageData) {

      $scope.myImage = "data:image/jpeg;base64," + imageData;

    }, function(err) {

      console.log(err);

    });

Template

<button class="button" ng-click="captureAPic()">Start Camera</button> 
<img src="{{myImage}}" width="320" height="480"/>

Limitations 

No Windows Phone support yet. This means one codebase for all major platforms is not quite true with Ionic framework (just yet). Having said that, some apps just work okay on Windows phone because of underlying Phone Gap support.

Ionic Framework point of view seems to be get major two platforms iOS and Android right at first.

In conclusion Ionic Framework is quite a promise. I developed two app for Android using the same. For me Beta turned out quite stable.

Break A Record - Play Store link bit.ly/break-a-record-android

Schedule and Feedback app for Google Developer Group - Hyderabad DevFest 2014 - bit.ly/dev-fest-hyd