20
Ph.P SOCIETY Philosophy in Programming Society Introduction to PhoneGap The Open Source Cross Platform Mobile Web App Development Framework

Mobile Web Dev

Embed Size (px)

DESCRIPTION

Mobile Web Apps with Cross Platform Development Framework - PhoneGap

Citation preview

Page 1: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Introduction to PhoneGap

The Open Source Cross Platform Mobile Web App Development Framework

Page 2: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Background• Evolution of Mobile Web.

• Formats: WAP, cHTML, mHTML.

• Limited by Phone’s web browser.

• Manufacturer dependent proprietary web browser.

• WAP: “Where Are the Phones?”

• Limited resources, capabilities & bandwidth.

• Inconsistent form factors (screen size, color depth, bitmap support, plugin?).

Page 3: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

WAP/cHTML Phones

Page 4: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Mobile Web Today• Powerful Smart Phones.

• Powerful full-featured mobile Operating Systems.

• Old Birds: Windows Mobile, Symbian OS, Blackberry

• Linux Based: iPhone OS, Android, WebOS, Maemo

• Powerful cross-platform web browsers.

• More bandwidth (3G, WiFi, WiMax).

• More consistent form-factors.

Page 5: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Smart Phones

Page 6: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Developing for Mobile Web• Inconsistency:

• Layout, screen resolution, form factors, capabilities, bandwidth, plug-in

• Proprietary APIs

• Caveat: Cross platform web browsers (Webkit, Mozilla, Opera)

• Limited in Scope

• Web browser “Silo”

• Self-contained & away from the rest of the OS

• Secure but quite useless

Page 7: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Native Phone App?• Learning Curve:

• New SDK, New Language, New Paradigmn

• OS Dependent quirks, limitations, conventions

• Weapon of Choice (which platform?):

• Significant investment in time & money

• Egg in one basket?

Page 8: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

What is PhoneGap?• Leverages on what we web developers knows best

- HTML & Javascript.

• Gives us access to the phone’s native APIs & features - Geo-location, Vibration, Accelerometer, Sound, Contacts, Camera, etc...

• “Wraps the web view with a container. This container gives the view access to APIs available on the device that may not be available on the Web view alone”.

http://www.phonegap.com

Page 9: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Developing in PhoneGap1. Create Web Views

• HTML, Javascript, Graphics, etc.

2. Store it in a folder.

3. Compile the Web view into a native app binary file.

• iPhone, Android, Blackberry

• Coming Soon: Nokia (WRT), Windows Mobile, WebOS

4. Install into device.

Page 10: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Video

Page 11: Mobile Web Dev
Page 12: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Some Sample Codes

Page 13: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Get a Contact

Page 14: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Geo-Location

Page 15: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Supported Features

- SQLite Support- Support for JS Frameworks

- iUI, xUI, Magic Framework, Dashcode, JQTouch, etc..

Page 16: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Sample Apps

Page 17: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Sample Apps

Page 18: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Sample Apps

Page 19: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Conclusion• Things will only get better.

• Active community (Google Groups)

• http://groups.google.com/group/phonegap

• Good wiki documentation

• http://phonegap.pbworks.com/

• Device agnostic

• Completely open source (FREE!)

Page 20: Mobile Web Dev

Ph.PSOCIETY

Philosophy in Programming Society

Upcoming• More platforms: Nokia (SymbianOS), Palm

WebOS, Windows Mobile, Nintendo DS?

• Support for OpenGL

• Support for Gecko / Mozilla

• Many more...