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
1
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
1
npm install –g cordova
To confirm the insllation of cordova run this command
1
cordova –version
or just
1
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
1
2
3
4
5
6
7
8
9
%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
1
2
3
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
1
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
1
cd Desktop
Then type
1
cordova create HelloWorld
Then type
1
cd HelloWorld
1
cordova platform add browser
To test it on browser, type
1
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
1
cordova platform add android
Then build the application
1
cordova build android
To check for the connected Android device, Type
1
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
1
2
3
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
1
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