Android development with PhoneGap

Android Development with PhoneGap

for the discerning programmer

PhoneGap:An Open Source framework for building

cross-platform mobile apps with HTML / CSS / JavaScript

Mobile Platforms:● iOS - Objective C● Android - Java● Windows Mobile 7 -

.NET● Windows 8 - JS or

C++● Blackberry 7 - Java● BB10 - C++

Why PhoneGap?

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!

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

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

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-toolsadt-bundle-linux-x86_64/sdk/tools

Set ANDROID_HOME to:adt-bundle-linux-x86_64/sdk/platforms/android-17

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

7. Configure Eclipse

Help -> Install New SoftwareClick Add…

Name: ADTLocation: http://dl-ssl.google.com/android/eclipse/

Select (check) both items to install: Developer ToolsNDK Plugins

Configure SDK location in EclipseWindows -> Preferences -> AndroidSDK Location: /usr/local/adt-bundle-linux-x86_64/sdk

8. Import project into Eclipse

In Eclipse, right click in Package ExplorerSelect ImportSelect Existing Android Code into WorkspaceChoose ~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

9. Add cordova-2.2.0.jar to Eclipse project library

Right click on the project name in Package ExplorerSelect Properties

Click on Java Build Path in Properties windowSelect the Libraries tabClick the “Add External JARs…” buttonSelect the file at: /usr/local/phonegap-phonegap-8a3aa47/lib/android/cordova-2.2.0.jar

10. Install CPU/ABIs and Android APIs

Window -> Android SDK ManagerYou 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.

11. Write Code In Eclipse project, look for assets/www/index.htmlEdit that file, add CSS and JavaScript if you want.

12. Deploy on Phone EmulatorRun -> RunChoose Android Application Click Yes when asked "Do you wish to add new Android Virtual Device?"Select Launch a new Android Virtual DeviceClick Manager… Click “New…”From the device Drop Down, select a device

e.g. 5.1”WVGA (480 x 800)

Emulator booting up...

App is running!

ER MER GERD

End Notes1. 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!

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 handlerfunction() {alert('Failed')}, // failure handler'Screenshot', // native class name'saveScreenshot', // native function name['image.png']); // array of parameters for native code

}}

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

ResourcesGetting 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