Step by Step Guide to build Ionic Hybrid App using Cordova/Android

• Download the complete sample app and source code from Github

Screenshots

Introduction

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

Background

There is a lot of curiosity among developers regarding emerging ionic framework along with Cordova. Ionic library is built by considering AngularJS as its base. This framework provides mobile-optimized HTML components to create highly interactive hybrid apps.  

Reference: Ionic site for more details.

The 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

The 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 the below command:

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

 and the 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 the below command to create an ionic cordova app:

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

And the result will be as shown 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 the 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

Let's dive into the folder structure of ionic app creation. Go to NodeJS directory and the below screenshot would help in understanding the structure:

In platforms, there are three folders as I tried creating for all three OS platforms. Now, the 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

Let's start with designing our list view. Go to index.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:

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;
  };

});

The complete code can be downloaded from: https://github.com/swagatblog/AndroidIonicCordova. 

References

• https://nodejs.org/
• http://ionicframework.com/docs/guide/installation.html
• https://cordova.apache.org/docs/en/4.0.0/
• https://github.com/swagatblog/AndroidIonicCordova