Tuesday, November 4, 2014

Getting Started With Phonegap / Cordova

Before you Start your New Phonegap / Apache Cordova Project!

After about one and half year here's my new Blog Post, I need to blogged this out as I faced some Issues while setting up a new Phonegap OOps I should say a New Apache Cordova Project, and I will also write the reasons of facing these issues and I spent couple of hours understanding them and solving them, I hope I will help someone who is going through the same and might save couple of hours :)

Okay, So here it goes... I "used" to be a phonegap developer in 2010-2011 and did couple of projects back then, Even you will find some of my blog posts of those times, What was the usual way to start off the Phonegap Project back then, as In what way I use to follow learning from various other blogs and its documentation was a pretty simple and involved few basic steps:  Create a new Android Project In Eclipse, add phonegap jar in the Build path, and add Phonegap js to index.html in assets/www folder and there you go! It was enough to start with. Even the Phonegap jar and js were easily available for download from there site.

And Then when Phonegap became Apache Cordova, We need to follow the specific "steps", You will not find the Cordova jar and Cordova js easily available to download on there site. Also after 2011, I have hardly got the chance to work with phonegap (I worked on various CMS platforms), And recently when I started working with the Phonegap Project, I was thrilled that so much can changed in sometime, I realized that how important is to have in touch with the technologies which we are working!   

So, Now going ahead, Its been wonderfully documented on there site, I will be summarize the basic steps, which will be required to install phonegap, (Yes you heard it right! you will need to install phonegap you will no longer served with the ready-made download! ),

Yes! to install and use Phonegap / Cordova you will need to install Node.js, It is very easy to install,
Just go there site, http://nodejs.org/ Click on Install button, and it will do the rest for you.

2. To Install Phonegap on your system, Type in the following command In Terminal,

sudo npm install -g phonegap

(For windows, eliminate the sudo command).

For  Installing Cordova,

sudo npm install -g cordova
As you write sudo command in Linux and Mac System it will prompt you to enter root password before beginning the installation.

3. To create a new Cordova Project,

Now Navigate to the directory where you wish to create the new Cordova Project, and execute the following command in terminal,

$ cordova create hello com.example.hello HelloWorld

This will create the new Blank Cordova Project by the name 'HelloWorld' in Specified directory,  com.example.hello is the package name of the application and hello is the base directory name.

Following is the base directory structure,

4. Adding Platforms,

To Add Platform, we need to navigate inside the project directory, Type in the following command to do so,

$ cd hello 

In The above step, the blank project is being created, Now we need to add platforms which we intend to Target, As I was intending to target Android & iOS, I have added those two platforms, you can also add various platforms like windows, blackberry etc as per your requirements,

To Add iOS Platform, Type this command in terminal,

$ cordova platform add ios

Directory Structure of iOS Project will be as follows,

This will add the basic hello world iOS project inside platforms directory, The project created is XCode ready Project, you can directly import to Xcode and get started!

To Add Android Platform, Type this command in terminal,

$ cordova platform add android

Directory Structure of Android Project will be as follows,

This will be the basic Hello World Android Project inside platforms directory, The Project created is Eclipse Ready Project ready to be Imported to Eclipse, Remember after importing the project in Eclipse add the Reference of CordovaLib to the Project, This CordovaLib is present in the same directory.

Also one thing to be taken care of is to remember the ANDROID_HOME should be set to your path variable, If it is not set then above command will fail to execute, to set ANDROID_HOME in environment PATH, proceed with following commands,

export ANDROID_HOME = <Path to android sdk>

export PATH=$ANDROID_HOME/platform-tools:$PATH

So Now You are done with the Creating Basic Cordova Development to get you started with your desired Platform.

Following this structure and steps will be very helpful in you wish to plan to add various basic plugins like InAppBrowser, AdMob etc to your Cordova Projects.

I hope this Article will be helpful to People who want to get started with Apache Cordova.

That is all for now.

Will be back again with some useful stuff soon!

Happy Blogging :)


Best Car pool Android Application Best Car Pool Application Source Code Download Here

Best Social Network Cordova Ionic Application Best Social Networking Source Code Cordova Ioinc Application Download Here

Best Android Application, Android Restaurant System Best Android Restaurant Application Source code download here

Best Android Application Android Chat Source code download Android Chat Source code download

Best Android Quiz Source Code Download Best Android Quiz Source Code Download here

More and Lots of useful Android source codes here Best Android Source codes download here


Chinmay said...


Thanks a lot for posting this tutorial.
But I need to know more about this. Can you give me your E-Mail id please.

for ict 99 said...

Useful & Great Article for NodeJS Development

Node.js Training | Node js Online Course | Node.js Essential Training | Node.js Online Training | Node.js Training in Chennai

Animated Container in Flutter

Please check this flutter video tutorial for detailed example and implementation of Animated Container in Flutter.