More Related Content
What's hot (20)
Viewers also liked (8)
Similar to DroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap (20)
Recently uploaded (20)
DroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap
- 1. Developing HTML5 and hybrid Android apps using Phonegap Ayushman Jain – Eclipse Java Development Tools
- 4. Agenda Why are we here? What is Phonegap? Demos Useful tools Get convinced that Phonegap rocks!
- 5. Different kinds of mobile applications
- 6. Why are we here? Native apps – too much time, money and effort. Web apps – no access to native functionality. Going hybrid is the best solution! We want to see how hybrid Android apps are built.
- 7. Agenda Why are we here? What is Phonegap? Demos Useful tools Get convinced that Phonegap rocks!
- 8. What is Phonegap? Example - web-based movie ticket booking application that lets you invite friends from the phone contact book. Two problems: How can you query the platform's contact book from within your web app? How can you do so in a platform agnostic way? Phonegap shows the way - provides javascript APIs which abstract the platform's native services. Develop an app using HTML5, Dojo, javascript once. Package it for various platforms using Phonegap. Use any UI toolkit – Dojox.mobile, Sencha touch, Titanium, etc. Facebook connect plugin NEW
- 10. Phonegap build Write your app using HTML, CSS or JavaScript. Upload it to the PhoneGap Build service. Get back app-store ready apps for Apple iOS, Google Android, Palm, Symbian, BlackBerry and more. Outsource your build to the cloud!
- 11. What is dojox.mobile A dojo based widget set for creating mobile applications. Available since dojo 1.5. Aims to provide lightweight UI widgets. Cannot do native device functionality. Allows customization of app look and feel. Device-specific or device-neutral. Comes with iOS, Android and Blackberry themes currently.
- 12. Sencha Touch HTML5 Mobile Web App framework. Develop mobile apps that look and feel native on Android, iPhone and Blackberry touch. Only touch based devices supported. Apps can be designed in Sencha app designer.
- 13. Agenda Why are we here? What is Phonegap? Demos Useful tools Get convinced that Phonegap rocks!
- 14. Watch and learn! Basic Phonegap application. Hybrid Phonegap app consisting of both native and web widgets. Phonegap app using Dojo mobile.
- 15. Agenda Why are we here? What is Phonegap? Demos Useful tools Get convinced that Phonegap rocks!
- 16. Maqetta Open source project hosted by Dojo foundation. Enables WYSIWYG visual authoring of HTML5 and dojo applications. Easily modify the stylesheet. View the same app for different platforms. Test the app on the browser itself.
- 17. Ripple Extension for Google Chrome. Used for testing web components in mobile apps on the browser. Developed by TinyHippos, bought by RIM. Phonegap support. Test a Sencha Touch app -http://dev.sencha.com/deploy/touch/examples/oreilly/
- 18. IBM Mobile Technology Preview Provides sample code and documentation that demonstrate capabilities such as notification and the ability to build hybrid application. Includes an application server runtime that uses the WebSphere Liberty Profile of the WebSphere Application Server 8.5 Alpha (runs on Linux, Mac, and Windows). a notification framework. a hybrid app development model using HTML, CSS, and JavaScript. basic management functions. location-based security. several samples featuring notifications, Dojo, PhoneGap, and a starter insurance app for handling car accidents. DOWNLOAD FREE!
- 19. IBM Rational Application Developer (RAD) RAD offers a Rich Page editor that uses browsers as rendering engines. A visual editing experience with drag-and-drop and direct page manipulation.
- 20. RAD also offers browser-based test emulators – helps testing the mobile app on various platforms.
- 21. RAD integrates with Maqetta – open source WYSIWYG visual authoring of HTML5 user interfaces. Only a few clicks to customize look and feel of the application.
- 23. Jazzhub – http://jazz.net/hub Rational Team Concert – in the cloud. Develop directly on the Jazz.net website. No download or installation required. Start a new project in under a minute! All of the features of Rational Team Concert! Currently a beta program for professors, students, and academic researchers. Project creation code: 6ER1OPGKIP Jazz.net
- 24. Further reading Jazz website IBM Mobile Frontier Blog Developing applications for Android™ using IBM Rational Team Concert in an agile way Developing applications for Android™ using IBM Rational Team Concert and IBM Rational Rhapsody in an agile way Agile Development of mobile applications using IBM Rational Team Concert and Phonegap for Android, iOS and others Developing Java ME applications using Rational Team Concert in an agile way Maqetta website
- 25. PHONEGAP ROCKS!
Editor's Notes
- #6: Hybrid model advantages: Easy to migrate from web to hybrid using just a bridge such as Phonegap Reuse of web programming skills Easy development and testing (browser-based). Enables access to native functionality Wrapper can be done away with in the future when broswers get more capabilities. Revenue via purchase through app stores. Disadvantages: Apps are slower (run in web container). Disadvantages of native model: Have to redo the whole thing for each platform. Expensive (dev + maintenance) Platform specific skills needed.
- #12: dojox.mobile. dojox.mobile is a framework of controllers, CSS3-based themes, and device-like widgets that will allow you to effortlessly create intelligent, flexible, and cross-device-compatible mobile web applications. The Dojo Mobile package provides a number of widgets that can be used to build web-based applications for mobile devices such as iPhone, Android, or BlackBerry. These widgets work best with webkit-based browsers, such as Safari or Chrome, since webkit-specific CSS3 features are extensively used. However, the widgets should work in a "graceful degradation" manner even on non-CSS3 browsers, such as IE or (older) Firefox. In that case, fancy effects, such as animation, gradient color, or round corner rectangle, may not work, but you can still operate your application. Dojo Mobile is designed to be as lightweight as possible to achieve a better user experience on mobile. It has only a few dependencies on other dojo/dijit modules, so many of the base modules can be eliminated at build time. Also, it has its own very small parser that is a subset of the core dojo.parser, but has enough capability to bootstrap your application.
- #23: IBM Rational Team Concert is part of the Rational solution for Collaborative Lifecycle Management Rational Team Concert integrates work item tracking , source control management , continuous builds , iteration planning , and highly configurable process support to adapt to the way you want to work, enabling developers, architects, project managers, and project owners to work together effectively. Two clients