Android development with PhoneGap

9,631 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,631
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
122
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Android development with PhoneGap

  1. 1. Android Development with PhoneGap for the discerning programmer
  2. 2. PhoneGap:An Open Source framework for building cross-platform mobile apps with HTML / CSS / JavaScript
  3. 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. 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 WindowsBut... Its still just HTML / CSS / JavaScript foreach platform!
  5. 5. Quick Guide to Setting up PhoneGap for Android (on Linux)Reference (my notes on tumblr): http://bit.ly/WkB6cb1. Install Java ○ set JAVA_HOME ○ add $JAVA_HOME/bin to PATH2. Install Apache Ant ○ set ANT_HOME ○ add $ANT_HOME/bin to PATH
  6. 6. 3. Install PhoneGapDownload 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 IDEDownload 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. 7. 5. Install Android SDKDownload 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/toolsSet ANDROID_HOME to:adt-bundle-linux-x86_64/sdk/platforms/android-17
  8. 8. 6. Create your projectusing PhoneGaps create command (example uses myproject, 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. 9. 7. Configure EclipseHelp -> Install New SoftwareClick Add… Name: ADT Location: http://dl-ssl.google.com/android/eclipse/Select (check) both items to install: Developer Tools NDK PluginsConfigure SDK location in Eclipse Windows -> Preferences -> Android SDK Location: /usr/local/adt-bundle-linux-x86_64/sdk
  10. 10. 8. Import project into EclipseIn Eclipse, right click in Package Explorer Select Import Select Existing Android Code into Workspace Choose ~projects/catHeadsOrTailsProblem: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 thesolution on StackOverflow. My take at http://bit.ly/WkB6cb
  11. 11. 9. Add cordova-2.2.0.jar to Eclipse project libraryRight click on the project name in Package Explorer Select PropertiesClick 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
  12. 12. 10. Install CPU/ABIs and Android APIsWindow -> 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 APIsTakes hours to finish installing.Take a break.Make a sandwich.
  13. 13. 11. Write CodeIn Eclipse project, look for assets/www/index.htmlEdit that file, add CSS and JavaScript if you want.12. Deploy on Phone EmulatorRun -> RunChoose Android ApplicationClick Yes when asked "Do you wish to add new AndroidVirtual 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)
  14. 14. Emulator booting up...
  15. 15. App is running!
  16. 16. ER MER GERD
  17. 17. 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!
  18. 18. 2. To use device features (e.g. camera,screenshot, GPS, accelerometer), download orwrite PhoneGap plugins● Typically consist of two files: 1. JS interface - cordova.exec() to invoke native codevar 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. 19. 2. Native class (Java) - performs operations in native code
  20. 20. ResourcesGetting Started● http://phonegap.com/developer/● http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap- in-eclipse-for-android.htmlNative Plugins● http://www.adobe.com/devnet/html5/articles/extending-phonegap-with- native-plugins-for-android.html● https://github.com/phonegap/phonegap-pluginsBy Me● http://psydrake.tumblr.com/post/39908525042/quick-tutorial-android- phonegap-development-on-linux● https://github.com/psydrake/cat-heads-or-tails

×