Installing and configuring PhoneGap for iOS, Android and Windows Mobile development projects

More recently I started using PhoneGap for Mobile application development. I decided to write this blog so that others can learn how to setup development environment for PhoneGap with ease for their project. This Blog will describe how to set up your development environment for PhoneGap for Android, Windows Phone and iOS then run a sample application .

OK let’s get started by knowing what PhoneGap is.

PhoneGap (also known as Apache Cordova) is an free cross platform application development framework developed by Nitobi, now acquired by Adobe Systems. It enables one to build applications for various devices using their HTML5, CSS3 and javascript knowledge, instead of using specific languages such as Java,c-sharp. This framework give us the ability to use services of the phone by using JavaScript.

PhoneGap currently supports 7 mobile platforms.Features supporting information for each devices can be obtained from here.

iOS

setup development environment for PhoneGap for iOS platform.

1. Requirements:

• Xcode 4.3 or advanced
• Xcode Command Line Tools
• Macnitosh OS X 10.7 or advanced
• Things necessary for installation on iOS device:
  • developer certificate from apple for ios Development

2. softwares required for installation

• You need Xcode which can be downloaded free of cost from Mac App Store
• Command Line Tools for Xcode are requires you can download them using the written steps Xcode Preferences -> Downloads -> Components -> Command Line Tools -> Install

3. Download PhoneGap and Unzip

• You have to download the current  version of PhoneGap from their website http://phonegap.com.
• Extract its contents  we will deal with the ios directory present in lib folder.

4. Setup New Project

• Open Terminal and locate the bin directory present in lib/ios folder.
• Type the ./create {project_folder_path} {package_name} {project_name} then press Enter.
• eg. ./create ~Desktop/myproject com.oodles oodles
• Locate and open the  newly created  project by double clicking the .xcodeproj file present there.

5.Deployment

on the Simulator

• Change the target to iPad or iPhone Simulator from the above toolbar.
• press Play button from above toolbar.

To Device

• You have to attach device to the machine.
• Change the target to attached iOS device.
• Press Play button from  above toolbar.

Android

setup development environment for PhoneGap for Android platform.

1. Installing the Prerequisite softwares.

Eclipse

• Download Eclipse Classic This will be ZIP file, extract the contents of it.

Java SDK

• If you don't have the java JDK installed on your system, install the Java SE Development Kit.

Android SDK

• Download and install the Android SDK package from here.

ADT plugin for eclipse

Note: If you have trouble acquiring the plugin, try using “http” in the Location URL, instead of “https”.

Note: While Installation if a warning appears displaying the authenticity or validity of the software cant’t be established, click OK

• Open Eclipse, then click on Help -> Install New Software.
• Click Add, present on the top-right corner.
• In the new dialog box that appears after clicking Add, enter “ADT Plugin” for the Name and the following URL for the Location: http://dl-ssl.google.com/android/eclipse/
• Press OK
• In the Available Software dialog, select the Developer Tools Checkboxthen Press Next.
• On Next Screen, you‘ll see a list of toolsthe you are going to download. Press Press.
• Read then accept the license agreements, then Press Finish.
• When the installation completes it will asks for Restart the eclipse,press restart.
• After You’ve installed ADT and restarted Eclipse, you must specify the location of your Android SDK directory:
  1. Select Window > Preferences. to open the Preferences panel (on Mac OS X, Select Eclipse preferences).
  2. Select Android from the left panel.You may see a dialog asking whether you want to send usage statistics to Google. If so, make your choice and click Proceed.
  3. For the SDK Location in the main panel click Browse... and locate your downloaded Android SDK directory(such as android-sdk-linux_x86).
  4. Click Apply,then OK.

2. Download PhoneGap and unzip

• Download latest build of PhoneGap from their website http://phonegap.com. and Extract the Contents of it we will deal with the android folder present in the lib directory.

3. Create New Project

• Open Terminal and move to the bin folder present in the android directory, using cd command of terminal.
• Type the ./create {project_folder_path} {package_name} {project_name} then press Enter.
• eg. ./create ~Desktop/myproject com.oodles oodles
• Open Eclipse then click on File -> New Project.
• Then a new popup menu will appear select Android -> Android Project From Existting Code.
• Then Select Folder where the new Project has been generated through the create command.
• Press Finish.

4. Deployment

To Simulator

• Right click on your current project then move to Run As -> Android Application
• Eclipse arises a dialog box which ask you to select an AVD. If there is no AVD Present, then you have create a new one.

To Device

• First Check USB debugging is not disabled on your device then plugyour device to the system. (Settings > Applications > Development)
• Right click on your current project and move to Run As -> Android Application

Windows Phone

setup development environment for PhoneGap for Windows Phone platform.

1. Requirements

• Windows 7 or Windows Vista with SP2
• Windows Phone SDK

2. Installing the Prerequisite softwares

• Download and Install Windows Phone SDK on Windows 7or Vista SP2 machine.

3. Download PhoneGap and unzip

• You can Download the latest version of PhoneGap from their website http://phonegap.com and extract its contens we will deal with windows-phone-7 directory present in libs folder.

4. Setup New Template

• Open CordovaSolution.sln with Visual studio Express for Phone present in windows-phone-7 -> templates -> standalone
• Now choose Export from the file Menu a new window will appear give name to new Template and fill other details Then Click Finish.
•  

5. Create New project

• Start Visual Studio for phone
• Select New Project then from Templates select the Template which you have created.
• Give it a name and click OK.

6. Deployment

To Emulator

• Make sure to have Windows Phone Emulator selected in the top drop-down menu.
• Hit the green play button beside the Windows Phone Emulator drop-down menu to start debugging or press F5.

To Device

• Your device must be registered in order to test your application.you can read the documentation for deploying and testing on Windows phone device by going through this link.
• You must check that phone is connected and screen must be unlocked.
• In the visual studio ,select the Windows Phone device from the drop down menu.
• Press F5 or click the play button near the drop-down menu.