Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap

4,213 views

Published on

My talk at Droidcon 2011 Bangalore on 19 November 2011

Published in: Technology
  • Be the first to comment

  • Be the first to like this

DroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap

  1. 1. Developing HTML5 and hybrid Android apps using Phonegap Ayushman Jain – Eclipse Java Development Tools
  2. 2.
  3. 3.
  4. 4. Agenda <ul><li>Why are we here? </li></ul><ul><li>What is Phonegap? </li></ul><ul><li>Demos </li></ul><ul><li>Useful tools </li></ul><ul><li>Get convinced that Phonegap rocks! </li></ul>
  5. 5. Different kinds of mobile applications
  6. 6. Why are we here? <ul><li>Native apps – too much time, money and effort. </li></ul><ul><li>Web apps – no access to native functionality. </li></ul><ul><li>Going hybrid is the best solution! </li></ul><ul><li>We want to see how hybrid Android apps are built. </li></ul>
  7. 7. Agenda <ul><li>Why are we here? </li></ul><ul><li>What is Phonegap? </li></ul><ul><li>Demos </li></ul><ul><li>Useful tools </li></ul><ul><li>Get convinced that Phonegap rocks! </li></ul>
  8. 8. What is Phonegap? <ul><li>Example - web-based movie ticket booking application that lets you invite friends from the phone contact book. Two problems: </li></ul><ul><ul><li>How can you query the platform's contact book from within your web app? </li></ul></ul><ul><ul><li>How can you do so in a platform agnostic way? </li></ul></ul><ul><li>Phonegap shows the way - provides javascript APIs which abstract the platform's native services. </li></ul><ul><li>Develop an app using HTML5, Dojo, javascript once. Package it for various platforms using Phonegap. </li></ul><ul><li>Use any UI toolkit – Dojox.mobile, Sencha touch, Titanium, etc. </li></ul><ul><li>Facebook connect plugin NEW </li></ul>
  9. 9. Supported features
  10. 10. Phonegap build <ul><li>Write your app using HTML, CSS or JavaScript. </li></ul><ul><li>Upload it to the PhoneGap Build service. </li></ul><ul><li>Get back app-store ready apps for Apple iOS, Google Android, Palm, Symbian, BlackBerry and more. </li></ul><ul><li>Outsource your build to the cloud! </li></ul>
  11. 11. What is dojox.mobile <ul><li>A dojo based widget set for creating mobile applications. </li></ul><ul><ul><li>Available since dojo 1.5. </li></ul></ul><ul><li>Aims to provide lightweight UI widgets. </li></ul><ul><ul><li>Cannot do native device functionality. </li></ul></ul><ul><li>Allows customization of app look and feel. </li></ul><ul><ul><li>Device-specific or device-neutral. </li></ul></ul><ul><ul><li>Comes with iOS, Android and Blackberry themes </li></ul></ul><ul><ul><li>currently. </li></ul></ul>
  12. 12. Sencha Touch <ul><li>HTML5 Mobile Web App framework. </li></ul><ul><li>Develop mobile apps that look and feel native on Android, iPhone and Blackberry touch. </li></ul><ul><li>Only touch based devices supported. </li></ul><ul><li>Apps can be designed in Sencha app designer. </li></ul>
  13. 13. Agenda <ul><li>Why are we here? </li></ul><ul><li>What is Phonegap? </li></ul><ul><li>Demos </li></ul><ul><li>Useful tools </li></ul><ul><li>Get convinced that Phonegap rocks! </li></ul>
  14. 14. Watch and learn! <ul><li>Basic Phonegap application. </li></ul><ul><li>Hybrid Phonegap app consisting of both native and web widgets. </li></ul><ul><li>Phonegap app using Dojo mobile. </li></ul>
  15. 15. Agenda <ul><li>Why are we here? </li></ul><ul><li>What is Phonegap? </li></ul><ul><li>Demos </li></ul><ul><li>Useful tools </li></ul><ul><li>Get convinced that Phonegap rocks! </li></ul>
  16. 16. Maqetta <ul><li>Open source project hosted by Dojo foundation. </li></ul><ul><li>Enables WYSIWYG visual authoring of HTML5 and dojo applications. </li></ul><ul><li>Easily modify the stylesheet. </li></ul><ul><li>View the same app for different platforms. </li></ul><ul><li>Test the app on the browser itself. </li></ul>
  17. 17. Ripple <ul><li>Extension for Google Chrome. </li></ul><ul><li>Used for testing web components in mobile apps on the browser. </li></ul><ul><li>Developed by TinyHippos, bought by RIM. </li></ul><ul><li>Phonegap support. </li></ul><ul><li>Test a Sencha Touch app -http://dev.sencha.com/deploy/touch/examples/oreilly/ </li></ul>
  18. 18. IBM Mobile Technology Preview <ul><li>  Provides sample code and documentation that demonstrate  capabilities such as notification and the ability to build hybrid application. </li></ul><ul><li>Includes </li></ul><ul><ul><li>an application server runtime that uses the  WebSphere Liberty Profile of the  WebSphere Application Server 8.5 Alpha  (runs on Linux, Mac, and Windows). </li></ul></ul><ul><ul><li>a notification framework. </li></ul></ul><ul><ul><li>a hybrid app development model using HTML, CSS, and JavaScript. </li></ul></ul><ul><ul><li>basic management functions. </li></ul></ul><ul><ul><li>location-based security. </li></ul></ul><ul><ul><li>several samples featuring notifications, Dojo, PhoneGap, and a starter insurance app for handling car accidents. </li></ul></ul>DOWNLOAD FREE!
  19. 19. IBM Rational Application Developer (RAD) <ul><li>RAD offers a Rich Page editor that uses browsers as rendering engines. </li></ul><ul><li>A visual editing experience with drag-and-drop and direct page manipulation. </li></ul>
  20. 20. <ul><li>RAD also offers browser-based test emulators – helps testing the mobile app on various platforms. </li></ul>
  21. 21. <ul><li>RAD integrates with Maqetta – open source WYSIWYG visual authoring of HTML5 user interfaces. </li></ul><ul><li>Only a few clicks to customize look and feel of the application. </li></ul>
  22. 22. Rational Team Concert
  23. 23. Jazzhub – http://jazz.net/hub <ul><li>Rational Team Concert – in the cloud. </li></ul><ul><li>Develop directly on the Jazz.net website. </li></ul><ul><li>No download or installation required. </li></ul><ul><li>Start a new project in under a minute! </li></ul><ul><li>All of the features of Rational Team Concert! </li></ul><ul><li>Currently a beta program for professors, students, and academic researchers. </li></ul>Project creation code: 6ER1OPGKIP Jazz.net
  24. 24. Further reading <ul><li>Jazz website </li></ul><ul><li>IBM Mobile Frontier Blog </li></ul><ul><li>Developing applications for Android™ using IBM Rational Team Concert in an agile way </li></ul><ul><li>Developing applications for Android™ using IBM Rational Team Concert and IBM Rational Rhapsody in an agile way </li></ul><ul><li>Agile Development of mobile applications using IBM Rational Team Concert and Phonegap for Android, iOS and others </li></ul><ul><li>Developing Java ME applications using Rational Team Concert in an agile way </li></ul><ul><li>Maqetta website </li></ul>
  25. 25. PHONEGAP ROCKS!

×