DroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap

© 2011 IBM Corporation

Developing HTML5 and hybrid Android apps using Phonegap

Ayushman Jain – Eclipse Java Development Tools

© 2011 IBM Corporation2



Agenda

Why are we here? What is Phonegap?

Demos

Useful tools

Get convinced that Phonegap rocks!

4


Different kinds of mobile applications

5


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.

6


Agenda

Why are we here?

What is Phonegap? Demos

Useful tools


7


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

8


Supported features

9


Phonegap build

10

• 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!


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.

11


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.

12


Agenda

Why are we here?

What is Phonegap?

Demos Useful tools


13


Watch and learn!

Basic Phonegap application.

Hybrid Phonegap app consisting of both native and web widgets.

Phonegap app using Dojo mobile.

14


Agenda

Why are we here?

What is Phonegap?

Demos

Useful tools Get convinced that Phonegap rocks!

15


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.

16


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/

17


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.

18

DOWNLOAD FREE!


IBM Rational Application Developer (RAD)

19

• RAD offers a Rich Page editor that uses browsers as rendering engines.

• A visual editing experience with drag-and-drop and direct page manipulation.


• RAD also offers browser-based test emulators – helps testing the mobile app on various platforms.

20


• 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.


Rational Team Concert

22


Jazzhub – http://jazz.net/hub

23

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.

Jazz.net

Project creation code: 6ER1OPGKIP


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

24


PHONEGAP ROCKS!

25