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.
- 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]:
- 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.
- Now let us create a folder named ionic_apps for placing all our ionic projects i.e. C:\Users\<username>\ionic_apps
- 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
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.
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.
- download gradle from issued link (here is http://services.gradle.org/distributions/gradle-2.2.1-all.zip)
- paste it in somewhere like
- In build.js from
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';
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
>> 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.