How to install ionic framework , create and deploy mobile application

IONIC-INSTALLATION-DEPLOYMENT

Hello friends ,

using Ionic framework its really easy and faster to develop mobile application for multiple platforms like ios and android. some performance issue is there with device feature access but if your application is not using much of device features and only database access than its really great to use Ionic framework for mobile application development.

from last week I stared making my hands dirty with ionic framework :).  I faced many problems during ionic installation , creation of application and deployment to android device. still ionic installation and application creation is easy but deployment to android device is tricky. I referred many YouTube videos, blogs and tips and tricks to make it possible to deploy my test application to android device.

————————————————————————————

NOTE : MY COMPUTER CONFIGURATION IS AS BELOW

OS – 32 BIT WIN 7

RAM – 2 GB

————————————————————————————

below are the steps you may perform in order to install Ionic framework , creating sample mobile application and deploy application to android device.

1.Install latest version of jdk

first is to install jdk. download latest version of jdk from  http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

fig 1- install jdk

as of now latest version of jdk is jdk-8u144

2.Install Android Studio

in step number two installation of android studio is required

the url to  download android studio is  https://developer.android.com/studio/index.html

fig 2-download link for android studio

after downloading the android studio install it.

3.Install node.js

next step is to install recent version of node.js from  https://nodejs.org/en/

fig 3-url for node.js installation

4.install ionic framework

after installation of node.js  open command prompt (form start->run->cmd) and type below commands to install ionic

npm install -g ionic cordova

5.create sample ionic application

now next step is to create application . for application creation you may use below command

fig 4-creating ionic application

ionic start ionic_helloworld sidemenu

here start will create new application

sidemenu allows application with swipable side menu ( other options are tabs,blank,super and tutorial)

6.debug/test with browser

now to test/open the created application  you need to cd into directory which contain the project  so here in our case you need to change cd to ionic_helloworld

fig 5- run ionic application using ionic-serve

cd ionic_helloworld

now next you need to type the command

ionic serve

so application will open in browser.

7.deploy on ios / android device

if its required to test the application in android device this step is for that.

now in this step will see how to generate .apk file  and deploy it in real android device. you need to use below listed commands in order to get .apk file

7.1 add android platform

fig 6-platform-add-android

ionic cordova platform add android    

7.2 build the application

ionic cordova build android    

during build operation I faced some issues. let me tell you the issues and how I fixed those issues

——————– COMMON ISSUES DURING BUILD OPERATION—————————————

  1. failed to find ANDROID_HOME
  2. JAVA_HOME is set for wrong version of jdk or not  yet created JAVA_HOME
  3. To fix error regading GRADLE
  4. not enough space error ( most common error if you are still using 32-bit operating system)
  5. not enough space error ( most common error if you are still using 32-bit operating system)

———————————————————————————————————-

  1. failed to find ANDROID_HOME

fig 7 – failed to find ANDROID_HOME

here error is ”

[ERROR] Cordova encountered an error.
You may get more insight by running the Cordova command above directly.

[ERROR] An error occurred while running cordova build android (exit code 1):

Error: Failed to find ‘ANDROID_HOME’ environment variable. Try setting
setting it manually.
Failed to find ‘android’ command in your ‘PATH’. Try update your ‘PATH’
to include path to valid SDK directory.

to fix this issue i have set ANDROID_HOME variable as below

fig 8 –  set ANDROID_HOME variable

for this you need to reach at Control Panel\System and Security\System > Advance system setting > Advanced > Environment Variable > System Variable

after this started new command prompt and again tried

ionic cordova build android  

2. JAVA_HOME is set for wrong version of jdk or not  yet created JAVA_HOME

fig 9 – ERROR OF JAVA_HOME

ERROR HERE IS ”

[ERROR] Cordova encountered an error.
You may get more insight by running the Cordova command above directly.

[ERROR] An error occurred while running cordova build android (exit code 1):

ANDROID_HOME=D:\Android\sdk
JAVA_HOME=C:\Program Files\java\jdk1.7.0_75
Error: Requirements check failed for JDK 1.8 or greater

to fix this issue I have set JAVA_HOME to latest version of jdk as below

fig 10 – set JAVA-HOME

after this started new command prompt and again tried

ionic cordova build android  

3. To fix error regading GRADLE

fig 11 – error regarding gradle

now next I got error regarding GRADLE as below

[ERROR] Cordova encountered an error.
You may get more insight by running the Cordova command above directly.

[ERROR] An error occurred while running cordova build android (exit code 1):

ANDROID_HOME=D:\Android\sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_144
Error: Could not find an installed version of Gradle either in Android
Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

now to fix this issue i have downloaded gradle  version 4.1 files from https://gradle.org/releases/

fig 12 –  gradle-download-page

i have placed gradle in D:\Gradle\gradle-4.1 then I have set for GRADLE_HOME AND PATH as below.

fig 13 – setting GRADLE_HOME

setting PATH D:\Gradle\gradle-4.1\bin1; as below

fig 14- setting gradle path

after this started new command prompt and again tried

ionic cordova build android  

4. not enough space error ( most common error if you are still using 32-bit operating system)

fig 15- no enough space error

error looks like as below.

[ERROR] Cordova encountered an error.
You may get more insight by running the Cordova command above directly.

[ERROR] An error occurred while running cordova build android (exit code 1):

ANDROID_HOME=D:\Android\sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_144
Starting a Gradle Daemon (subsequent builds will be faster)
:wrapper

BUILD SUCCESSFUL in 17s
1 actionable task: 1 executed
Subproject Path: CordovaLib
Starting a Gradle Daemon (subsequent builds will be faster)

FAILURE: Build failed with an exception.

* What went wrong:
Unable to start the daemon process.
This problem might be caused by incorrect configuration of the daemon.
For example, an unrecognized jvm option is used.
Please refer to the user guide chapter on the daemon at
https://docs.gradle.org/3.3/userguide/gradle_daemon.html
Please read the following process output to find out more:
———————–
Error occurred during initialization of VM
Could not reserve enough space for 2097152KB object heap

* Try:
Run with –stacktrace option to get the stack trace. Run with –info or
–debug option to get more log output.
Error: cmd: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.

* What went wrong:
Unable to start the daemon process.
This problem might be caused by incorrect configuration of the daemon.
For example, an unrecognized jvm option is used.
Please refer to the user guide chapter on the daemon at
https://docs.gradle.org/3.3/userguide/gradle_daemon.html
Please read the following process output to find out more:
———————–
Error occurred during initialization of VM
Could not reserve enough space for 2097152KB object heap

* Try:
Run with –stacktrace option to get the stack trace. Run with –info or
–debug option to get more log output.

to fix this error I have set

1) _JAVA_OPTIONS = -Xmx1024M

fig 16 – _JAVA_OPTIONS option setting

2)GRADLE_OPTS = -Xmx2048M

fig 17 – gradle-opt-setting

fter this started new command prompt and again tried

ionic cordova build android  

and now all errors gone and I have successfully generated the apk file as below

fig 18 – android apk generated

fig 19 –  apk in explorer

now you may transfer this .apk file and install there.

in mobile my ionic_helloworld mobile application looks like as below 🙂

fig 20 – ionic_helloworld-in-mobile-view

Conclusion 

so we have gone through all the steps in above tutorial from ionic framework installation to mobile application deployment.

if you still have any question you may feel free to contact me.

Thanks

Hiren

Hiren

I am developer , blogger , thinker.