PhoneGap allows you to develop cross-platform mobile applications using HTML, JavaScript, and CSS. This is a brief introduction to PhoneGap, with an overview of PhoneGap installation on Linux for Android development.

1. Android Development
with PhoneGap
for the discerning programmer

2. PhoneGap:
An Open Source framework for building
cross-platform mobile apps with
HTML / CSS / JavaScript

3. Why PhoneGap?
Mobile Platforms:
● iOS - Objective C
● Android - Java
● Windows Mobile 7 -
.NET
● Windows 8 - JS or
C++
● Blackberry 7 - Java
● BB10 - C++

4. Write Once Run Anywhere?
Not really... each platform:
● has separate PhoneGap documentation
● requires its native toolset to build the app
from the PhoneGap framework, e.g.:
○ Xcode for iOS
○ Eclipse with Android SDK for Android
○ Visual Studio for Windows
But... It's still just HTML / CSS / JavaScript for
each platform!

5. Quick Guide to Setting up PhoneGap
for Android (on Linux)
Reference (my notes on tumblr): http://bit.ly/WkB6cb
1. Install Java
○ set JAVA_HOME
○ add $JAVA_HOME/bin to PATH
2. Install Apache Ant
○ set ANT_HOME
○ add $ANT_HOME/bin to PATH

6. 3. Install PhoneGap
Download phonegap-phonegap-2.2.0-0-g8a3aa47.zip
$ unzip phonegap-phonegap-2.2.0-0-g8a3aa47.zip
$ mv phonegap-phonegap-8a3aa47 /usr/local/
4. Install the Eclipse IDE
Download eclipse-SDK-4.2.1-linux-gtk-x86_64.tar.gz
$ tar xzvf eclipse-SDK-4.2.1-linux-gtk-x86_64.tar.gz
$ mv eclipse /usr/local/
Add /usr/local/eclipse to your PATH

7. 5. Install Android SDK
Download ADT Bundle: adt-bundle-linux-x86_64.zip
$ unzip adt-bundle-linux-x86_64.zip
$ mv adt-bundle-linux-x86_64/ /usr/local/
Add to your PATH:
adt-bundle-linux-x86_64/sdk/platform-tools
adt-bundle-linux-x86_64/sdk/tools
Set ANDROID_HOME to:
adt-bundle-linux-x86_64/sdk/platforms/android-17

8. 6. Create your project
using PhoneGap's create command (example uses my
project, catHeadsOrTails)
In your PhoneGap android command directory, e.g.
/usr/local/phonegap-phonegap-8a3aa47/lib/android/bin/ :
create <project-root> <package-path> <project-name>
$ ./create
~/projects/catHeadsOrTails
net.edrake.catheadsortails
catHeadsOrTails

9. 7. Configure Eclipse
Help -> Install New Software
Click Add…
Name: ADT
Location: http://dl-ssl.google.com/android/eclipse/
Select (check) both items to install:
Developer Tools
NDK Plugins
Configure SDK location in Eclipse
Windows -> Preferences -> Android
SDK Location: /usr/local/adt-bundle-linux-x86_64/sdk

10. 8. Import project into Eclipse
In Eclipse, right click in Package Explorer
Select Import
Select Existing Android Code into Workspace
Choose ~projects/catHeadsOrTails
Problem:
When trying to open the project, I get:
catHeadsOrTails overlaps the location of another project:
‘catHeadsOrTails’
This is apparently a known bug in Eclipse. I found the
solution on StackOverflow. My take at http://bit.ly/WkB6cb

11. 9. Add cordova-2.2.0.jar to Eclipse project library
Right click on the project name in Package Explorer
Select Properties
Click on Java Build Path in Properties window
Select the Libraries tab
Click the “Add External JARs…” button
Select the file at: /usr/local/phonegap-phonegap-
8a3aa47/lib/android/cordova-2.2.0.jar

12. 10. Install CPU/ABIs and Android APIs
Window -> Android SDK Manager
You will see many API versions, e.g Android 2.2 (API 8)
Select everything that isn’t already installed (why not?)
○ SDK Platforms
○ Handset System Images
○ Google APIs
Takes hours to finish installing.
Take a break.
Make a sandwich.

13. 11. Write Code
In Eclipse project, look for assets/www/index.html
Edit that file, add CSS and JavaScript if you want.
12. Deploy on Phone Emulator
Run -> Run
Choose Android Application
Click Yes when asked "Do you wish to add new Android
Virtual Device?"
Select Launch a new Android Virtual Device
Click Manager… Click “New…”
From the device Drop Down, select a device
e.g. 5.1”WVGA (480 x 800)

14. Emulator booting up...

15. App is running!

16. ER MER GERD

17. End Notes
1. Can easily run on your Android phone
● Enable USB debugging in Android
Developer Options
● Connect USB cable Phone -> Computer
● Run app using your
device in Eclipse
○ App will be installed on
your phone after running!

18. 2. To use device features (e.g. camera,
screenshot, GPS, accelerometer), download or
write PhoneGap plugins
● Typically consist of two files:
1. JS interface - cordova.exec() to invoke native code
var Screenshot = {
saveScreenshot: function() {
return cordova.exec(
function() {alert('Success')}, // success handler
function() {alert('Failed')}, // failure handler
'Screenshot', // native class name
'saveScreenshot', // native function name
['image.png']); // array of parameters for native code
}
}

19. 2. Native class (Java) - performs operations in native code

20. Resources
Getting Started
● http://phonegap.com/developer/
● http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-
in-eclipse-for-android.html
Native Plugins
● http://www.adobe.com/devnet/html5/articles/extending-phonegap-with-
native-plugins-for-android.html
● https://github.com/phonegap/phonegap-plugins
By Me
● http://psydrake.tumblr.com/post/39908525042/quick-tutorial-android-
phonegap-development-on-linux
● https://github.com/psydrake/cat-heads-or-tails