Installing PhoneGap and Cordova on Mac OS X Maverics

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about using the web technologies you know and love: HTML, CSS, and JavaScript.

Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript.

PhoneGap is an open source distribution of Cordova. In October 2011, PhoneGap was donated to the Apache Software Foundation (ASF) under the name Apache Cordova. You may think about Cordova’s relationship to PhoneGap like WebKit’s relationship to Safari or Chrome.

Prerequisites

1. Install node.js (source and binaries can be found here) and verify installation by running the npm command
2. verify that npm command is working...
$ npm

3. Install Android SDK and/or xcode for iOS (and any other SDK for your favorite platform). For Android SDK verify that PathToAndroidSDK/tools and PathToAndroidSDK/plattform-tools are in your $PATH. If not, use an editor to update $PATH and apply changes:

$ vi ~/.bash_profile 
$ . ~/.bash_profile 

$PATH needs these changes in order that to be accessible adb, android and other android SDK required commands.

***Verify that you have created an Android Virtual Device.

4. Install ant. I used homebrew that I had already installed:

$ sudo brew update
$ brew install ant
Warning: No developer tools installed.
You should install the Command Line Tools.
Run `xcode-select --install` to install them.
==> Downloading http://www.apache.org/dyn/closer.cgi?path=ant/binaries/apache-an
==> Best Mirror http://apache.cc.uoc.gr/ant/binaries/apache-ant-1.9.3-bin.tar.gz
######################################################################## 100,0%
  /usr/local/Cellar/ant/1.9.3: 1592 files, 39M, built in 8 seconds

5. Responding to these messages (as I have xcode installed) I run the command to install the command line tools:
$ xcode-select --install
xcode-select: note: install requested for command line developer tools

PhoneGap Installation

Here are the steps I used to install PhoneGap in a Mac:

6. Install phonegap:
$ sudo npm install -g phonegap
and verify that phonegap command is working...
$ phonegap
7. install cordova (maybe this is not necessary) and verify...
$ sudo npm install -g cordova

8. Now you are ready to navigate to your favorite development directory and try to create an multiplattform application... e.g. for Android and iOS:

$ cd Development/
$ cordova create hello com.example.hello HelloWorldPG
$ cd hello/
$ cordova platform add ios
$ cordova platform add android

9. Review the platforms installation in your Cordova project directory (as well as in a PhoneGap directory):

$ cordova platform ls

Installed platforms: android 3.3.0, ios 3.3.0

Available platforms: blackberry10, firefoxos

10. Build and run your application with Cordova:
$ cordova build          # cordova prepare
$ cordova emulate android
Generating config.xml from defaults for platform "android"
Preparing android project
Running on emulator for platform "android" via command "/Users/konstantinos/Development/hello/platforms/android/cordova/run" --emulator

Platform "android" deployed to emulator.

$ cordova run android

11. In order to build/run iOS applications using Cordova, you have to install ios-deploy:

$ sudo npm install -g ios-deploy

Password:

npm http GET https://registry.npmjs.org/ios-deploy

npm http 304 https://registry.npmjs.org/ios-deploy

> ios-deploy@1.0.4 preinstall /usr/local/lib/node_modules/ios-deploy

> make ios-deploy

rm -rf *.app demo ios-deploy

gcc -o ios-deploy -framework CoreFoundation -framework MobileDevice -F/System/Library/PrivateFrameworks ios-deploy.c

/usr/local/bin/ios-deploy -> /usr/local/lib/node_modules/ios-deploy/ios-deploy

ios-deploy@1.0.4 /usr/local/lib/node_modules/ios-deploy

12. Install ios-sim using npm tool to integrate iOS Simulator with Cordova and run (attention: this method is experimental and is not the recommended way of deploying and build). It works and starts the pre-installed xcode iOS Simulator but with some errors:
$ sudo npm install -g ios-sim
$ cordova run ios  

13. Recommended method for using xcode and iOS Simulator to build and run your application

14. Also you can create a phonegap Android application that easy, assuming that have created and Android Virtual Device using the Android tools:
$ phonegap create my-app
$ cd my-app
$ phonegap run android

[phonegap] detecting Android SDK environment...

[phonegap] using the local environment

[phonegap] compiling Android...

[phonegap] successfully compiled Android app

[phonegap] trying to install app onto device

[phonegap] no device was found

[phonegap] trying to install app onto emulator

Android simulator view of the hello application

15. Having your xcode SDK installed you may use the following command to just build and run your iOS application using PhoneGap:

$ phonegap run ios

[phonegap] detecting iOS SDK environment...

[phonegap] using the local environment

[phonegap] adding the iOS platform...

[phonegap] compiling iOS...

[phonegap] successfully compiled iOS app

[phonegap] trying to install app onto device

[phonegap] successfully installed onto device

iOS Simulator view of the my-app application

16. Once created (prepared/built) you may also open your iOS version of your application from within Xcode. For example, from inside Xcode, (using the Cordova example hello)double-click to open the hello/platforms/ios/hello.xcodeproj