developing with phonegap - adobe refresh 2012

Developing with PhoneGap

Building mobile applications with HTML/JS

Saturday, March 31, 2012

e Power of PhoneGap


HTML/JS/CSS for Mobile Apps


What’s the bene!t of web standards for mobile

applications?


Marketshare Language

29%

53%

10%

3%

Objective C

Java

Java/ActionScript

C#


Mobile Web:Marketshare: 100%

Language: HTML/JS/CSS

Why not write apps that way?


e web is awesome:Using web technologies leaves you free

to target any device/os/platform you want


So how does it work?


Your Code


Native Web View

Your Code


Native APIsNative Web View

Your Code


Native App - .apk, .ipa, etcNative APIs

Native Web View

Your Code


PhoneGap provides a JavaScript Library that reaches out into the native APIs.

That means anything the device supports is doable.


PhoneGap is completely open source and has been submitted to the Apache Foundation.


The entire project is available on Githubhttps://github.com/cordova


https://github.com/cordova






There are multiple ways to “start” with PhoneGap.The project includes command line tools, IDE plugins, and Dreamweaver 5.5 ships with PhoneGap support.


Out of the box, PhoneGap provides support for a number of basic device APIs

- Accelerometer- Camera- Capture- Compass- Connection- Contacts- Device- Events- File- Geolocation- Media- Network- Notification- Storage


For added functionality PhoneGap provides a plug-in mechanism.Includes OS-specific code/libraries and the JS to use it in PhoneGapSome of the helpful ones: PayPal, Facebook, Push Notification


Camera API example


Demo:Using PhoneGap


Debugging


Debugging these kinds of apps is best done on device.


It’s all just HTML/JS, so you can use your browser!Take advantage of Chrome Developer tools/Firebug to test your app’s UI.


But what about Device APIs?Because we’re in the web view, there

is no way to do line-by-line debugging.


Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs.


Weinre can be configured as a server (there is a Mac application) and uses the developer tools from Chrome to provide hooks into the mobile app.


But, a much easier way:http://debug.phonegap.com/


http://debug.phonegap.com/

http://debug.phonegap.com/

Demo:debug.phonegap.com


Deployingbuild.phonegap.com


e Problem:

You’re building a cross-platform app, but dealing with a lot of native projects


e Solution:PhoneGap Build - a cloud service for

creating binary files for multiple platforms from a single codebase


Build for every platform at once

PhoneGap Build creates binaries for all of the major platforms at the same time and in one place.


Core part of PhoneGap Build:

Work how you want to work


Using Git/SVN repositories


Debugging and Testing


Build includes a debugging option that will inject the Weinre JavaScript into the app so it can be remotely debugged using debug.phonegap.com


Demo:PhoneGap Build


Demo:PhoneGap in Action


Ryan StewartWeb Developer Evangelist, Adobe

@ryanstewart

blog.digitalbackcountry.com

[email protected]

github.com/ryanstewart


mailto:[email protected]

mailto:[email protected]

developing with phonegap - adobe refresh 2012

Technology