Guide to build Ionic hybrid app using Cordova/Android

Screenshots

Introduction

This article will guide in developing a basic app Hybrid Mobile App using Ionic, Cordova, Android.

Background

There are lots of curiosity among developers regarding emerging ionic framework along with Cordova. Ioniclibrary is built by considering AngularJS as it's base. This framework provides mobile-optimized HTML components to create highly interactive hybrid apps.  

Ref: Ionic site for more details

Below steps/code will help in developing a basic Ionic-Cordova app and showcase a simple grouped list view.

Environment Setup and App Creation

NODEJS:

Before we start on any development NodeJS installation is important. Click here to download NodeJS. 

IONIC & CORDOVA:

Below command should install all related modules and dependencies for ionic and Cordova

$ C:\Program Files (x86)\nodejs>npm install -g cordova ionic

Verify ionic by typing below command

$ C:\Program Files (x86)\nodejs>ionic

 and result should show

 (_)           (_)
  _  ___  _ __  _  ___
 | |/ _ \| '_ \| |/ __|
 | | (_) | | | | | (__
 |_|\___/|_| |_|_|\___|  CLI v1.7.12

Usage: ionic task args

=======================

Available tasks: (use --help or -h for more info)

  -----------------------------------ETC.....

CREATE AN APP:

Use below command to create an ionic cordova app

C:\Program Files (x86)\nodejs>ionic start sampleApp blank

And the result will be as below

Creating Ionic app in folder C:\Program Files (x86)\nodejs\sampleApp based on blank project
Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip
[=============================]  100%  0.0s
Downloading: https://github.com/driftyco/ionic-starter-blank/archive/master.zip
[=============================]  100%  0.0s
Updated the hooks directory to have execute permissions
Update Config.xml
Initializing cordova project

Your Ionic project is ready to go! Some quick tips:

 * cd into your project: $ cd sampleApp

 * Setup this project to use Sass: ionic setup sass

 * Develop in the browser with live reload: ionic serve

 * Add a platform (ios or Android): ionic platform add ios [android]
   Note: iOS development requires OS X currently
   See the Android Platform Guide for full Android installation instructions:
   https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html

 * Build your app: ionic build <PLATFORM>

 * Simulate your app: ionic emulate <PLATFORM>

 * Run your app on a device: ionic run <PLATFORM>

 * Package an app using Ionic package service: ionic package <MODE> <PLATFORM>

For more help use ionic --help or ionic docs

Visit the Ionic docs: http://ionicframework.com/docs

GENERATE ANDROID CODE FOR THE ABOVE IONIC APP:

After creating blank ionic app, it is necessary to generate required platform [Android/iOS/Windows]. And it generates respective app code directories.

Generate Android app as below

C:\Program Files (x86)\nodejs>cd sampleApp

C:\Program Files (x86)\nodejs\sampleApp>ionic platform add android

And the result should be as below

Updated the hooks directory to have execute permissions
Downloading Default Ionic Resources
Downloading: https://github.com/driftyco/ionic-default-resources/archive/master.zip
[=============================]  100%  0.0s
Done adding default Ionic resources
Adding icons for platform: android
Adding android project...
Running command: cmd "/s /c "C:\Users\swparida\.cordova\lib\npm_cache\cordova-android\4.1.1\package\bin\create.bat "C:\Program Files (x86)\nodejs\sampleApp\platforms\android" com.ionicframework.sampleapp194116 sampleApp --cli""
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: com.ionicframework.sampleapp194116
        Name: sampleApp
        Activity: MainActivity
        Android target: android-22
Copying template files...
Android project created with cordova-android@4.1.1

Running command: "C:\Program Files (x86)\nodejs\node.exe" "C:\Program Files (x86)\nodejs\sampleApp\hooks\after_prepare\010_add_platform_class.js" "C:\Program Files (x86)\nodejs\sampleApp"
add to body class: platform-android
Installing "cordova-plugin-console" for android
Installing "cordova-plugin-device" for android
Installing "cordova-plugin-splashscreen" for android
Installing "cordova-plugin-statusbar" for android
Installing "cordova-plugin-whitelist" for android

This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.

Installing "ionic-plugin-keyboard" for android
Saving platform to package.json file

And its app creation is done!!

Import Into Android Studio

Lets dive into the folder structure of ionic app creation. Go to NodeJS directory abd below screenshot would help in understanding the structure 

In platforms there are three folders as I tried creating for all three OS platforms. Now, same path must be used to import the android app into Android Studio. 

Once it is imported, it would generate the Gradle scripts and app will have three modules

Create a sample Ionic list view

Lets start with designing our list view. Go toindex.html file to understand the js structures. app.js is the most important file which initializes the complete app. List view should look like below

<ion-header-bar class="bar-positive">
    <h1 class="title">Ionic Group List</h1>
  </ion-header-bar>

  <ion-content>

    <ion-list>
      <div ng-repeat="group in groups">
        <ion-item class="item-stable"
                  ng-click="toggleGroup(group)"
                  ng-class="{active: isGroupShown(group)}">
          <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
          &nbsp;
          Group Header {{group.name}}
        </ion-item>
        <ion-item class="item-accordion"
                  ng-repeat="item in group.items"
                  ng-show="isGroupShown(group)">
          {{item}}
        </ion-item>
      </div>
    </ion-list>

  </ion-content>

And controller should look like

Hide   Copy Code

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

.controller('MyCtrl', function($scope) {
  $scope.groups = [];
  for (var i=0; i<10; i++) {
    $scope.groups[i] = {
      name: i,
      items: []
    };
    for (var j=0; j<3; j++) {
      $scope.groups[i].items.push('Item--**' + i + '-' + j);
    }
  }

  $scope.toggleGroup = function(group) {
    if ($scope.isGroupShown(group)) {
      $scope.shownGroup = null;
    } else {
      $scope.shownGroup = group;
    }
  };
  $scope.isGroupShown = function(group) {
    return $scope.shownGroup === group;
  };

});

Complete code can be downloaded from

https://github.com/swagatblog/AndroidIonicCordova