mobile web dev

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

Upload: singapore-php-user-group

Post on 28-Jan-2015

107 views

Category:

Technology


0 download

DESCRIPTION

Mobile Web Apps with Cross Platform Development Framework - PhoneGap

TRANSCRIPT

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