Step by Step Guide to build Ionic Hybrid App using

Cordova/Android

By Swagat Parida

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 CreationNodeJSBefore we start on any development, NodeJS installation is important. Click here to download NodeJS. Ionic & CordovaThe 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:

Create An AppUse 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:

Generate Android Code for the Above Ionic AppAfter 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:

And, app creation is done!!

Import Into Android StudioLet'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 ViewLet'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:

And controller should look like:

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

 

???

??

?

? ??

??

???

? ??

??Please contact

Swagat Parida