Intro to PhoneGap - Adobe Groups

terrificrecordInternet και Εφαρμογές Web

24 Ιουν 2012 (πριν από 5 χρόνια και 4 μήνες)

394 εμφανίσεις

Who Am I?

Steve Gill

PhoneGap Community Champ

Black Belt in TaeKwonDo

Drinks Beer

Loves Hockey

@SteveSGill

steveng@adobe.com

What is PhoneGap?

Why Cross
-
platform?

Smartphone Platform Market Share

Source: comScore MobiLens, October 2011


90 million
people in the
US own
smartphones

The Trend: Smartphone Platform Market Share

Source: comScore MobiLens, October 2011

-
add cloud

-
add 3rd party services

-
add IDEs

-
add JS libs

-
add apis

-
add plugins

picture of traditional it dev
shop (java + web guys)


get rid of bullets

Convert from Desktop to Mobile

Benefits


One code base, multiple platforms


Reuse existing web developer skills


Shorter learning curve


Faster development


Mobile site and app with same code


Reusable web code and infrastructure


Code portable to other environments


Based on open standards


Active and growing community


Open source with multiple large stakeholders

Differentiators


Runs on more platforms


Open community & contributors


Web and App with same code


Framework and tool support

Supported Platforms


iOS
(iPad, iPod Touch, iPhone)


Android
(Everything)


BlackBerry
(Smartphones, PlayBook)


WebOS


Symbian


Windows Phone


Bada

Standards Based

W3C Device APIs and
Policies Working Group
(DAP)

+

APIs


Accelerometer


Camera


Capture


Compass


Connection


Contacts


Device


Events


File


Geolocation


Media


Network


Notification


Storage



Basics

Setup the Viewport

<meta

name="viewport"

content="
width=device
-
width,

initial
-
scale=1.0,

maximum
-
scale=1.0,

user
-
scalable=no;
"

/>

Basics

Listen for the Device Ready Event

document.addEventListener("
deviceready
", onDeviceReady,




false);


function onDeviceReady(){

//Do Stuff

}

Basics

function onSuccess(acceleration) {






alert('
Acceleration

X: ' + acceleration.x + '
\
n' +












'
Acceleration

Y: ' + acce
leration.y + '
\
n' +












'
Acceleration

Z: ' + acce
leration.z +

'
\
n' +












'Timestamp: '





+ acceleration.timestamp + '
\
n');

};


function onError() {






alert('onError!');

};



navigator.
accelerometer.getCurrentAcceleration
(onSuccess, onError);


Accelerometer Example

Plugins


Push Notifications (Urban Airship)


Child browser


Facebook


Native Controls



Many more, and more coming

Free & Open Source

Tools


Emulators


Ripple


Any platform emulator

(iOS Simulator, Android Virtual Devices, etc)


Debugging


Weinre (web inspector remote)


IDEs


Eclipse


Dreamweaver


Textmate

Javascript Libraries

xui

Perceived Risks & Concerns


Web tech not appropriate for everything


Many webkits


Many screens/pixel densities


There are bugs!



App store rejections


Not "native"


Performance


Security

26

http://build.phonegap.com

Basics


DEMO TIME

Resources


Source:
github.com/callback


Bugs:
issues.apache.org/jira/browse/CB


Docs:
docs.phonegap.com


Wiki:
wiki.phonegap.com


Support:
groups.google.com/group/phonegap


IRC:

irc.freenode.net #phonegap


Apps:

phonegap.com/apps

Thanks!

@phonegap

phonegap.com

facebook.com/phonegap