PhoneGap is a mobile development framework, which enables developers to build applications using HTML5, CSS3 and JavaScript and then deploy them to mobile platforms like iOS and Android. For example, we can develop a browser-based game using HTML5 canvas and then port the game to an iPhone without coding in Objective-C. In addition, mobile-specific features such as touch inputs and accelerometers can also be accessed with the PhoneGap API.
In this first post about PhoneGap, I simply illustrate how to
- Install PhoneGap on a late 2013 Macbook Pro running OSX Mavericks.
- Run a simple “Hello World” application on an iOS device simulator from the command line.
I assume that you have downloaded the Xcode IDE but have never downloaded or installed PhoneGap before.
Lets get started!
STEP 1: Installing Node.js
This step is quick and easy. Simply go to the node website and click on the green INSTALL button below to get things going.
Once you have node installed, you may want to check where it is installed. Typically, this will be in
$ which node /usr/local/bin/node
STEP 2: Install PhoneGap
To install PhoneGap from the command-line, simply use
$ sudo npm install -g phonegap
Yep, that’s all there is to it. I’m not kidding. For reference, I have listed the PhoneGap version number below.
$ phonegap --version 3.4.0-0.19.8
STEP 3: Create a iOS application using PhoneGap
Once you have PhoneGap installed, you are ready to test drive a simple Hello World application. In case you do not have an actual iPhone or iPad (or are reluctant to pay the annual $99 developer fee), you can use what’s called an iOS simulator to run your application. But testing on an actual iOS device is highly recommended (especially for games).
To enable running the application from the command-line on an iOS simulator, use
$ sudo npm install -g ios-sim
If you wish to run your application from the command-line on a connected iOS device (iPhone, iPad) use
$ sudo npm install -g ios-deploy
The latest versions of PhoneGap enable us to develop and run applications from the command-line-interface (CLI). This is very convenient as we do not need to use the Xcode IDE at all (although we can use Xcode if we really want to).
To keep things organized, I first made a directory called PHONEGAP where I will create the application. Once inside this directory, use the following command to create a simple bare-bones iOS application:
$ phonegap create hello com.companyname.hello HelloWorld
This creates a sub-directory called “hello” where the application will live. Go inside this directory using
$ cd hello
and then build the iOS application using
$ phonegap build ios
This creates the executable file that you can run in the iOS simulator with
$ phonegap run ios
If all goes well, you will see the following application open on the iOS simulator (assuming you don’t have an actual device connected):
The source code (HTML, CSS, JS) and other resource files (like the image “icon.png” displayed above) used for the display above are located inside the “www” folder:
~/PHONEGAP/hello/www
—
In the next post, we will learn more about PhoneGap and about porting existing browser-based applications to iOS.
In particular, I am interested in porting the three browser-based games I wrote on to an iOS device. I anticipate that there will be some changes in the games to account for the absence of a keyboard. For example, the accelerometer can be used to move the paddle or the space-ship by tilting the phone. Releasing bombs might be implemented by using a “tap” on the touch-screen instead of pressing the arrow key.
Have you used PhoneGap for porting existing HTML5 games? If so, I would love to hear about your experience.