Getting Started With Ionic App - Android Application

Nowadays peoples get fascinated by using apps and even my friends review many apps from play store and share their experience with their besties :D . And recently i have attended a workshop on Mobile apps development and already working with ionic apps development.However there are lot of pitfalls in using html5 with phonegap while writing for native.The only thing is easy way to code and organize front end with backend.

Installation :  

installing ionic in your system is very easy if you have node.js installed already and integrate it with Eclipse or any other ADT supported studio with plugins.

C:\> npm install -g ionic

Learn here to install node.js and using Eclipse IDE For android development.

Configuring on Windows :

Well i don't want to write too much of configuring steps here.all is simple short list goes below

1. you must have installed Java and accessible Via commandline(javac and java)
2. You must have installed ANT and accessible via commandline i.e simply specify the path till ant folder create as variable ANT_HOME
3. You must have installed eclipse IDE(i had juno) with ADT updated with Android SDK and active emulators.
4. now once again create ENV variable ANDROID_HOME specify the path till sdk folder
5. Create three path variable with semicolon as terminator
   %ANT_HOME%\bin;
   %ANDROID_HOME%\tools;
   %ANDROID_HOME%\platform-tools;

Make sure everything works fine via CLI.However,this is common for both Windows/Linux.If you cant traces out wrong,similar doubts are answered in Stackoverflow forum.

Creating your first App : 

create a new directory and move into it using command prompt.here we are just creating a basic app and testing it locally on emulator installing the apk file into emulator from our ionic project.

• C:\>ionic start demoapp tabs
  this creates demoapp folder with tabs app (previously demo files from ionic)
  
• C:\>cd demoapp
• C:\demoapp> ionic platform add android
  here we just add necessary build files for specific platform,since we are doing for android add key word android.This adds necessary bin,src config source files.
• C:\demoapp>ionic build android
  just we are going to compile android application and create apk file from our source files.
• C:\demoapp>ionic emulate android
  and finally this is gonna create a AVD(emulators) installing the apk file and launching the current activity on screen.
• C:\demoapp>ionic run android
  and you can install it into android mobile if you have USB debuggin connected with internal/SD card storage under developer options in android os.

If all above steps consequently works ,then u may get compiled and ready to install the app.if any errors occurs in between,it may be fault in your path setting/installation.

Errors are going to be in Node.js exception format.you can track the errors and clear it with Stackoverflow website.

Screenshots :

Create a Demoapp folder.

Ionic start demoapp tabs command just download the starter template from github account and loads into the folder for you.

ionic platform add android : creates necessary build files for android project with java files and cardova plugins.

ionic build android : compiles the source and create necessary build files for android platform and dependencies

ionic emulate android : just creates avd for you and install apk file into the emulator and launches the main activity.

ionic run android : just deploy the android application directly into your android mobile while connecting with USB , With Unknown Source apps and USB debugging connected.look at screenshot below app on emulator.

Android Sample App running active device with installed app.

Download Demo files/install and work with project.However there are lot of disadvantages in hybrid app development.Your source codes are revealed when the apk file is decompiled :D in production.

For errors/bugs/suggestion comment below or mail me s.shivasurya@gmail.com or connect with me in Facebook/Twitter/Linkedin.Share is care.