android development with phonegap
DESCRIPTION
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.TRANSCRIPT
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