02 - PhoneGap - Setup the Environment

Introduction

You need to setup the development environment on your computer, whether a Windows system or a Mac system, to build mobile apps using PhoneGap framework. Setting up the environment is a lengthy process that involves installation of a number of different software packages. One thing you need to know before setting up the PhoneGap environment is that you require a Mac to build iOS applications though a PC is enough to develop Android mobile applications.

Software and Operating System Requirements

As already mentioned, iOS application can be built only on Mac with OS X operating system and Android apps can be built on either a Mac or a PC. Moreover, the platform you need to develop mobile apps for iOS and Android is different (though the code is the same). That is, in addition to PhoneGap, you need Android Eclipse environment in order to develop Android mobile apps whereas XCode toolset is required to develop iOS mobile apps.

If you are a PC user, then you can either develop only Android mobile apps by installing PhoneGap and Android development environment or set up a Mac environment on your PC using virtualization techniques to develop iOS as well as Android applications by installing PhoneGap, Android development environment and XCode toolset. If you are a Mac user, then you can install PhoneGap, Android development environment and XCode toolset on your Mac and start development. In this tutorial, I am not explaining how to set up the virtual Mac machine as it is out of the scope of this tutorial. You can try softwares like VirtualBox (https://www.virtualbox.org/) or VMWare (http://www.vmware.com/products/desktop-virtualization) to setup a virtual machine.

I will show you how to setup whole PhoneGap environment, both for iOS and Android, using my Mac system. If you have a Mac or virtual Mac environment on your PC, the steps to be followed will be the same. Now if you plan to develop only Android applications (without a virtual Mac setup), there will be slight differences in some of the steps which I will explain in a separate section in this tutorial.

Setup PhoneGap Environment on Mac

Step 1: To download PhoneGap, visit the site http://phonegap.com/install/. If you scroll down, you could find a list of PhoneGap versions. Download the latest version. If you unzip the downloaded file, you could find a lib folder with a number of subfolders including android, ios, blackberry etc. These folders include toolkits to develop apps for the corresponding platform.

Step 2: To install PhoneGap, you first you need to install Node JS. Go to the site nodejs.org and click the green INSTALL button.

          

This will download the latest version of Node JS on to your computer.

Step 3: Once the download is complete, double click the installable to get a screen like this:

          NodeJS.png

Click the Continue button and install Node JS.

Step 4: Once the installation is over, open the terminal window on your Mac and enter the following command. The terminal window can be opened by entering “terminal” in the search box available in the task bar.

sudo npm - g phonegap

Enter the admin password when asked. Wait for a minute for the PhoneGap installation to be complete.

Step 5: To install Android development environment, visit the site http://developer.android.com/sdk/index.html. Get the Android SDK for Mac.

          

Once you download the .zip file, extract it to wherever you want (please note down the location where you have your ADT because we need it later). If you open the main adt folder you will find two subfolders Eclipse and Sdk. Both these folders contain many other folders as shown in the following images.

          sdk.png

          eclipse.png

You can launch the Android developer tools by double clicking the Eclipse icon in the Eclipse folder.

Step 6: You need to set the PATH environment variable so that you will not have to enter the full path to the executables every time you run an application. If you are a Windows user who know Java programming, you might have set the PATH environment variable with the help of Control Panel. In Mac, we will set the PATH variable in .bash_profile file.

If your Mac already has this file, you can directly open it and set the PATH variable. If .bass_profile is not already there, you will have to create a new .bash_profile file. To, check whether your Mac already has .bash_profile, open the terminal window and enter the following command:

open -e .bash_profile

Step 7: If a new file is opened, go to Step 8. If no file is opened, enter the following commands one by one to create a new .bash_profile file and to open it.

cd ~/

touch .bash_profile

open -e .bash_profile

Step 8: We need to set the path to the folders “tools” and “platform-tools” in the sdk folder. Now get the full path to these two folders. If you do not remember it, get it from where you have noted the location while unzipping the ADT bundle. Make sure that you have the full path starting from /Users and not from /Documents. For example, if your adt bundle named adt is in Documents/MobileAppDevelopment, then the full path to tools folder should be /Users/apple/Documents/MobileAppDevelopment/adt/sdk/tools (here apple is my user name). If you start the path from Documents, then you will get error while running the Android application.

Assuming that your adt main folder (with two sub folders adt and eclipse) is named “adt” and it is located in Documents/MobileAppDevelopment, copy the following line into the .bash_profile file.

export PATH=${PATH}:/Users/apple/Documents/ MobileAppDevelopment/adt/sdk/platform-tools: /Users/apple/Documents/ MobileAppDevelopment/adt/sdk/tools

NOTE: Make sure that instead of the path I specified, you specify your full path to the adt bundle. That is /Users/apple/Documents/ MobileAppDevelopment/adt/ this section will be different in your case based on the location where you have adt.

Step 9: Save and close the .bash_profile file. Type the following command in the terminal window to make the variable available from now itself.

source ~/.bash_profile

Step 10: To setup the iOS environment, you need to install XCode. You can get XCode for free from the App Store.

          XCode.png

Download the latest version of XCode and install it.

Now you have successfully setup the PhoneGap development environment on your Mac.

Setup PhoneGap Environment on PC

As already mentioned, you can setup only the Android development environment on a PC. You will have to do the steps from 1 to 9 explained in the previous section to setup Android development environment on your PC. Of course, there will be some differences in the whole process.

Difference 1: As you reach step 4, you should open your command prompt and the command you need to enter in the command prompt is npm -g phonegap.

Difference 2: As you reach step 5, make sure that you download and install the Android SDK for your operating system.

Difference 3: For setting the PATH variable as in steps 6, 7 and 8, go to Control Panel à System and Security à System à Advanced system settings.

          

This will open a new window like this:

          

Click the Environment Variables and select Path from the System variables section. Click the Edit button to add the full path to tools and platform-tools folder.

          

Summary

Now we are ready with the PhoneGap environment. Next we will see how to develop cool mobile apps using PhoneGap.

Like us on Facebook