Introduction to Mobile Development with PhoneGap

Yeah, it's pretty awesome.

What is PhoneGap?

An application container that allows you to build natively installed apps using HTML, CSS & JavaScript

How does PhoneGap work?

Build your UI with HTML, CSS & JavaScript

Access native functionality through PhoneGap

Package your app for distribution

Why use PhoneGap?

Have you ever tried to bulid an app that supports lots of platforms?

This

Is Now This

Write Once, Run Lots of Places

Why Else?

Lower barrier to entry
Reduced required developer skills
Reduced long term maintenance
Seamless integration with existing HTTP-based systems
Reusable assets between mobile and web properties

What does a PhoneGap app look like?

Anything, really

BBC Olympics

Zombie Jombie

Wikipedia

Untappd

Bit Timer

US Census Browser

Adobe SCInsight

Let's take a look at some apps...

Building PhoneGap Apps

Platform IDEs

Xcode

Eclipse

Visual Studio

build.phonegap.com

Dreamweaver

Debugging PhoneGap Apps

Web Developer Tools

open -a /Applications/Google\ Chrome.app --args --allow-file-access-from-files --disable-web-security

Safari, FireFox, and IE have similar developer tools

emulate.phonegap.com

iOS 6 On-Device Debugging

Leverages Safari Developer Tools - See details here

On-Device Remote

debug.phonegap.com

iWebinspector

(iOS 5 only)

You can reuse existing skills & frameworks!

(and many more)

Make your apps feel like apps!

Twitter Bootstrap
iUI
jQuery Mobile
jQuery UI
Sencha Touch
MobiScroll

Enyo
Kendo UI
app-UI
iScroll
Zurb Foundation
Moobile

Make your data come alive!

Highcharts

Sencha

Kendo

AM Charts

RGraph

Raphael

What if you want more?

PhoneGap is extensible!

PhoneGap's Native Plugin model allows you to write your own native components and expose them via JavaScript
Learn more:
- PhoneGap Wiki
- Github Plugins Repo

incubator.apache.org/cordova/

Who uses PhoneGap/Cordova?

Andrew Trice

Technical Evangelist
Adobe Systems

atrice@adobe.com
tricedesigns.com
@andytrice
github.com/triceam