![Page 1: Step by step guide to build ionic hybrid app using cordova android](https://reader036.vdocument.in/reader036/viewer/2022062503/58d1a9d41a28ab6f6b8b63f9/html5/thumbnails/1.jpg)
Step by Step Guide to build Ionic Hybrid App using
Cordova/Android
By Swagat Parida
![Page 2: Step by step guide to build ionic hybrid app using cordova android](https://reader036.vdocument.in/reader036/viewer/2022062503/58d1a9d41a28ab6f6b8b63f9/html5/thumbnails/2.jpg)
![Page 3: Step by step guide to build ionic hybrid app using cordova android](https://reader036.vdocument.in/reader036/viewer/2022062503/58d1a9d41a28ab6f6b8b63f9/html5/thumbnails/3.jpg)
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.
![Page 4: Step by step guide to build ionic hybrid app using cordova android](https://reader036.vdocument.in/reader036/viewer/2022062503/58d1a9d41a28ab6f6b8b63f9/html5/thumbnails/4.jpg)
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:
![Page 5: Step by step guide to build ionic hybrid app using cordova android](https://reader036.vdocument.in/reader036/viewer/2022062503/58d1a9d41a28ab6f6b8b63f9/html5/thumbnails/5.jpg)
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:
![Page 6: Step by step guide to build ionic hybrid app using cordova android](https://reader036.vdocument.in/reader036/viewer/2022062503/58d1a9d41a28ab6f6b8b63f9/html5/thumbnails/6.jpg)
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!!
![Page 7: Step by step guide to build ionic hybrid app using cordova android](https://reader036.vdocument.in/reader036/viewer/2022062503/58d1a9d41a28ab6f6b8b63f9/html5/thumbnails/7.jpg)
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:
![Page 8: Step by step guide to build ionic hybrid app using cordova android](https://reader036.vdocument.in/reader036/viewer/2022062503/58d1a9d41a28ab6f6b8b63f9/html5/thumbnails/8.jpg)
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.
![Page 9: Step by step guide to build ionic hybrid app using cordova android](https://reader036.vdocument.in/reader036/viewer/2022062503/58d1a9d41a28ab6f6b8b63f9/html5/thumbnails/9.jpg)
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:
![Page 10: Step by step guide to build ionic hybrid app using cordova android](https://reader036.vdocument.in/reader036/viewer/2022062503/58d1a9d41a28ab6f6b8b63f9/html5/thumbnails/10.jpg)
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
![Page 11: Step by step guide to build ionic hybrid app using cordova android](https://reader036.vdocument.in/reader036/viewer/2022062503/58d1a9d41a28ab6f6b8b63f9/html5/thumbnails/11.jpg)
???
??
?
? ??
??
???
? ??
??Please contact
Swagat Parida