How to build HTLM5 app using Ionic Cordova: Part 3

This tutorial is in reference to my earlier tutorial on How to design html5 app using ionic cordova.

Also refer : Ionic HTML5 Basic concepts

Here we will basically build an android app using the html5 design made using ionic app creator.

NUTSHELL :-

  1. This tutorial will be basically dealing with the ionic/cordova commands used to build the android app.
ionic start <Projectname> <blank>   // creating a project with blank preset
cd <Projectname>  //move the project directory 
ionic serve   // to preview on localhost
ionic platform add android/ios  //adding platform tools
ionic build ios/android  //for building the apk
ionic run android  //for running the App on your phone/emulator

2. Make sure you have configured ionic, git, cordova, npm according to my article.

LEVEL 1 [BASICS]:

  1. From the last tutorial on How to design html5 app using ionic cordova you must have created the web design and you have exported the zip file.
  2. Now let us create a folder named ionic_apps for placing all our ionic projects  i.e. C:\Users\<username>\ionic_apps
  3. Now let us start by creating an ionic project for our Application. [Blank Preset is fine]
ionic start <ProjectName> blank

This will create a Project Folder here C:\Users\<username>\ionic_apps  with your <ProjectName>

4. Unzip the exported-ionic-file . Copy and Replace the contents of

C:\Users\<username>\ionic_apps\<ProjectName>\www

5. Now move to your project directory by typing

cd <ProjectName>

6. If you want to preview the Design in your local host you can type :

ionic serve

7. Now since we are exporting the design to Android Platform, we need to add the platform tools in our <ProjectName> directory.

ionic platform add android

This will download the android tools from git . It may take some time depending on the network.

8. To build the apk file for android we use this

ionic build android

NOTE : There are some times when your wont be able to download the git (Gradle Files ) due to sloppy networks or other issues.

In that case you might want to download the git files via browser and include it in the Project directory.

[color-box]

  1. download gradle from issued link (here is http://services.gradle.org/distributions/gradle-2.2.1-all.zip)
  2. paste it in somewhere like myApp\platforms\android\gradle\gradle-2.2.1-all.zip
  3. In build.js from myApp\platforms\android\cordova\lib\build.js find this:

var distributionUrl = 'distributionUrl=http\\://services.gradle.org/distributions/gradle-2.2.1-all.zip';

And replace it with your own file’s location:

var distributionUrl = 'distributionUrl=../gradle-2.2.1-all.zip';

[/color-box]

Reference: http://stackoverflow.com/questions/29874564/ionic-build-android-error-when-download-gradle

OR

you can force command line to use Ant build tools rather than gradle.

To know more about ant and gradle : http://technologyconversations.com/2014/06/18/build-tools/

cordova build android -- --ant

9. Now finally , to Run your app.

>> ionic emulate android      #to deploy the app on a default android emulator
>> ionic run android          #to deploy the app on a connected device

OR

 >> cordova emulate android           #to deploy the app on a default android emulator
 >> cordova run android --device     #to deploy the app on a connected device

 

If you have followed this Tutorial , you may proceed to my next article on how to integrate a functionalities and make a really good app.

 

 

 

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s