Fake Your Way as a Mobile Developer

Rockstar Introducing the PhoneGap framework

with Glen Smith

Ancient Hacker Wisdom…

Where there are no oxen, the stall is clean. Solomon, Proverbs 14:4

Why this talk?

“The only thing I’m addicted to right now is

winning.”

Best Case Outcomes • Learn what PhoneGap does

•See how it works in action

•Deploy it to a device

•Swap stories & have fun!

What is it?

Crossplatform, like Java?

Actually, no…

* for large values of once

Vendor Backing

So What Can I Target?

So I

Can?

<canvas id=“angry-bird”/>

What the client wanted... •Simple promo/reference app

•Needed AppStore

•Wanted a Native Phone app

•Use platform services (phone)

Let’s Build it! •Use PhoneGap for App Shell

•Add a UI Framework + CSS3

•Add Device Caps

•Deploy to the AppStore & Retire!

Choosing a UI framework

The Markup… <div data-role="page">

<div data-role="header">...</div>

<div data-role="content">...

<div data-role="footer">...</div>

</div>

Add Media Queries <link rel="stylesheet" type="text/css" media="only screen and

(min-device-width: 768px) and (max-device-width: 1024px)"

href=“layout-tablet.css" />

@media only screen and (min-device-width: 768px) {

#m-branding-pad {

min-height: 205px;

}

}

Calling Device APIs function fetchImage(ele) { navigator.camera.getPicture(function (imageData) { var image = document.getElementById(ele); image.src = "data:image/jpeg;base64," + imageData; }, function (message) { alert('Camera Failure: ' + message); }, { quality: 25 }); }

Plugins

PhoneGap Build

The Experience •PhoneGap was a perfect fit

•Nearly* single source

• Emulators were close

•All platforms had their issues

On AppStores…

Useful Resources

Could be handy…

https://github.com/glenasmith/phonegap-talk

We’re headed…

Demo

<wrap/>

Thanks for Coming!

@glen_a_smith

http://blogs.bytecode.com.au/glen

Image Credits • The Clock - http://www.flickr.com/photos/zoutedrop/2317065892

• Java Swing Ugliness - http://www.javalobby.org/java/forums/m92010274.html

• HTML5 Promo - http://www.w3.org/html/logo/

• Angry Birds - http://angrybirdsgamer.com/

• jQueryMobile Example- http://jquerymobiletutorial.com/jquery/jquery-mobile-examples/

• Lego Pieces - http://www.flickr.com/photos/wwworks/247223224

• Yak Shaving - http://www.flickr.com/photos/revcyborg/22883042/sizes/l/in/photostream/