PhoneGap is a free open source framework that allows us to create mobile apps using standard web technologies such as HTML, CSS, and JavaScript (http://phonegap.com).
If you follow the steps in the web page, Install PhoneGap (http://phonegap.com/install/), most likely you would get stuck in the second or third step. This is because the documentation is horrible and gives us a lot of confusions.
Earlier versions of PhoneGap were tightly integrated into Eclipse and Xcode. But it is obvious that PhoneGap stops catching up new updates of various platform. It seems that they went back to command line tools with poor quality documentations.
It makes me think that the only reason why Adobe purchased this company was just to kill this product.
Anyway, let us get started. To install 3.3 version of PhoneGap, Node.JS is required.
1. Install Node.JS
Go to http://nodejs.org and find the INSTALL button. Click it to install. This step is very straightforward and easy thanks to the node.js install program.
2. Install PhoneGap
Open “Terminal” and run the following.
{!{code}!}czozMDpcIiQgc3VkbyBucG0gaW5zdGFsbCAtZyBwaG9uZWdhcFwiO3tbJiomXX0={!{/code}!}phonegap is a command line tool. You will be able to use “phone gap” command to create a project. But you will NOT be able to build or run the app in any platform.
3. Create a Project
{!{code}!}czozNjpcIiQgcGhvbmVnYXAgY3JlYXRlIG15LWFwcAokIGNkIG15LWFwcFwiO3tbJiomXX0={!{/code}!}This will create a phone gap project but it doesn’t include any platform dependent modules.
4. Install Cordova
There are buzzes regarding to PhoneGap, Cordova, and their relationship. Here is a clarification from PhoneGap Blog. http://phonegap.com/2012/03/19/phonegap-cordova-and-what’s-in-a-name/
To make the long story short,
PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari.
And,
If your goal is to build cross platform apps with HTML, JS and CSS then keep on using PhoneGap for everything you need. This isn’t to say the transition has been perfect. We messed up the last release by not correctly updating the documentation to reflect the name change which confused new users.
The conclusion is that we NEED cordova installation along with PhoneGap. Very weird. Right? Anyway use the following command.
{!{code}!}czoyOTpcIiQgc3VkbyBucG0gaW5zdGFsbCAtZyBjb3Jkb3ZhXCI7e1smKiZdfQ=={!{/code}!}
5. Add Platforms to a Project
The folder “platforms” inside “my-app” (the newly created project folder) has nothing from your creation. We have to add platforms (such as android and iOS). This is the moment where we have to use cordova. Let’s add the iOS platform that means cordova creates all necessary files to be a proper project for Xcode.
{!{code}!}czoyNjpcIiQgY29yZG92YSBwbGF0Zm9ybSBhZGQgaW9zXCI7e1smKiZdfQ=={!{/code}!}Next let’s add the android platform.
{!{code}!}czozMDpcIiQgY29yZG92YSBwbGF0Zm9ybSBhZGQgYW5kcm9pZFwiO3tbJiomXX0={!{/code}!}You will see an error saying that ‘ant’ is not installed if you have installed it already in your system. Also I assume that you do not have MacPorts as well just like me. Let’s use “homebrew” to install “ant.”
$ ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go/install)"
After homebrew is successfully installed, use followings.
$ brew install ant
Now you are suppose to be able to install “android” platform. Try this again.
$ cordova platform add android
Now you can find two folders (ios and android) in the “platforms” folder.
6. Build Projects
Finally you are ready to build projects.
$ phonegap run android
This will compile, build, and install the project onto the device. If no Android device is connected to the system, it will start the Android emulator.
In the same manner, use following to build and run the project for iOS.
$ phonegap run ios
You will see an error that says ios-sim was not found even though you have installed Xcode and by which your system has iOS Simulator already.
$ sudo npm install -g ios-sim
If you prefer using IDEs, you may import the android project from ADT and start the Xcode project file on Xcode.