Up and running with PhoneGap on Mac OSX

PhoneGap is a great tool for building cross-platform mobile apps using web technologies.

Getting started with it seems pretty easy according to their install guide:

  1. install phonegap
  2. create and run your app

In reality, there’s a few more steps to doing so if this is your first time creating a PhoneGap project. Here’s how to get it up and running on Mac OSX for Android and iOS app development.

PhoneGap seems easy to install, but in reality there are a few “undocumented” steps. Tweet:PhoneGap seems pretty easy to install, but in reality there are a few “undocumented

Node.js

PhoneGap is a Node.js application, so if you don’t already have a working install of Node we need to set that up first. I use Homebrew for package management, so this is as simple as:

brew update
brew install node 

Alternately, you can download an installer from http://nodejs.org/download/ and install it on your own.

Xcode and Command Line Tools

If you’re going to be working on any iOS apps, you’ll need to make sure XCode is set up properly. There isn’t a single way to do so properly and the “right” way will depend on your Mac’s configuration. If you’re not sure if you have the most recent version installed, I suggest starting with the article Xcode Command Line Tools for Mac OS X 10.9 Mavericks. Alternately, you can get it from Apple’s Developer site.

Bonus e-book: Soup to Nuts: Taking an Application Idea to Reality

Android SDK

In order to develop for Android, you need to install their SDK. With Homebrew:

brew install android-sdk
android

That second command will launch the Android SDK Manager window and should preselect all of the libraries you need.

Android SDK Manager

Click the Install packages... button, accept the licenses for all of the packages, and click Install.

Android SDK Manager Packages to Install

When it finishes, quit the Android SDK Manager application.

You can also manually download the SDK from http://developer.android.com/sdk/. Note that if you install it manually you’ll need to update your PATH variable to include the directory you installed the SDK into.

iOS Simulator

We want to be able to emulate iOS devices. Once Node is installed we can use the node package manager to install the ios-sim library:

npm install -g ios-sim 

Apache Ant

We need Ant in order to use the Android emulator. With Brew:

brew install ant 

or you can install it manually by following the instructions at http://ant.apache.org/manual/install.html#getting

Create an Android Device

In order to emulate an Android device, we need to first create a virtual device. In the terminal:

android avd 

This will launch the Android Virtual Device Manager. Click the Device Definitions tab, select a sample device (I used the “Nexus 4” profile), and click the Create AVD button.

Android Virtual Device Manager

Complete the device profile and click OK. You should see a new listing with a green checkmark.

Android Virtual Device Manager - Device Profile

Close the Android Virtual Device Manager window.

Install PhoneGap

Now that we’ve installed all of our dependencies, we can finally install PhoneGap using NPM:

sudo npm install -g phonegap

Hello World

We’re finally ready to create our sample app. From the command line:

phonegap create hello com.example.hello HelloWorld
cd hello 

To see it in action in Android:

phonegap run android --emulator 

phonegap run android emulator

And in iOS:

phonegap run ios --emulator 

phonegap run ios emulator

Bonus e-book: Soup to Nuts: Taking an Application Idea to Reality