Getting Started with Cordova

Owais Saturday, December 05, 2015

What is Cordova?

Cordova: a mobile development tool for every platform: Android, iOS, WP, Firefox, Browser, Tizen, BB...

Installation

To start installation of the Cordova
First Download and install NodeJS
To confirm installation the installation open command prompt and type

node –v

Then we have to download Cordova. Cordova CLI is built on JavaScript to download Cordova the best option is to get it using NPM (node package manager).
NPM is installed with Node os you won’t have to download it from somewhere.
Run this command to download Cordova

npm install –g cordova

To confirm the insllation of cordova run this command

cordova –version

or just

cordova

Now at this point you can make an application and test it on browser but For building and running it on Android devices you will have to install Android SDK which have dependencies

Download and install JDK (Java)
Download and install Android SDK
Download and install Apache Ant

After installation we have to add JDK, Android SDK and Apache Ant location to path variables.
Android SDK path are mostly %APPDATA%/Roaming/Android/sdk

%APPDATA%/Roaming/Android/sdk

%APPDATA%/Roaming/Android/sdk/tools

%APPDATA%/Roaming/Android/sdk/platform-tools

(PATH TO APACHE ANT)/bin

(PATH TO JDK)/bin

All these path will need to be set in system enviorment variables.

Setting Enviorment Path

To add these the PATH,
open the Control Panel
click System and Security
click System
click Change settings
click the Advanced tab
click Environment Variables button.
In the list User variables select PATH
Then click the Edit button.

At the end of the field Variable value, add a semicolon followed by the path for every location (SDK, ANT, JDK).

We will have to create some enviorment variable also, which are

ANDROID_HOME = %APPDATA%/Roaming/Android/sdk
JAVA_HOME = (PATH TO JDK)
ANT_HOME = (PATH TO APACHE ANT)

You can add them in Environment variables windows you open previously.
Now to test the working, open command prompt and type

adb

Now we have to install a android platform in Android SDK to do that type android in command prompt and a windows will open which select Android 5 (Level 22) and install.

Creating First Application

Open command prompt
Type

cd Desktop

Then type

cordova create HelloWorld

Then type

cd HelloWorld

cordova platform add browser

To test it on browser, type

cordova serve

To build and run it on Android Device

Running on Android Device

We will have to add platform code to cordova app, Type

cordova platform add android

Then build the application

cordova build android

To check for the connected Android device, Type

adb devices

You will get the list of all connected device.
Note: If It doesn’t work check whether Debugging mode is enable in Android and MTP is disabled or not in phone. Then kill adb server if you didn’t get the device in first attempt

adb kill-server
adb start-server
adb devices

If issue continues here can get help here.

Hopefully you will get the result.
To run on connect device

cordova run android

The application will automaticallty start on the phone and Enjoy!

Adding UI in Application

When writing application, We have JavaScript, HTML and CSS in hand for everything. By default you application will appear as classic html element to add beauty to you would have to CSS, to design every element of application.

There are multiple frameworks available which will handle all these UI related stuff for us.

Ionic Framework (Recommended)
Onsen Framework

Cordova Online

Everyone want quick start to start developing now there is an amazing codova online IDE available with Build option. Give it a try!

Monaca - IDE + Build (Free)
Build PhoneGap - Build your code online (Free)
Appery - IDE + Build (Paid)
ShoutEm

Using Visual Studio 2015

Instead of going through all these steps you can just get a copy of Visual Studio Community and check Cordova and Git in Custom options while installing and it will install all these stuff: Java, Android SDK, Apache Ant, Cordova and any dependecies needed to run.

However both these step needs 3-5 hour of your time, downloads 5+ GB of stuff from internet and It take about 30+ GB space in Harddrive.

Conclusion

I would personally suggest to use Visual Studio 2015 because of it simplicity. However I started working on Cordova through CLI in start of this year when there was no tools like these and best of luck with mobile app development.

Cordova Guide: https://cordova.apache.org/docs/en/5.0.0/

Presentation Link: http://www.slideshare.net/SyedChishti/apache-cordova-55657079

Comprehensive Guide on Cordova Installation: https://evothings.com/doc/build/cordova-install-windows.html

Dec 5, 2015