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.

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]

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

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

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

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

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.

  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';

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/

9. Now finally , to Run your app.

OR

 

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.