Fake Your Way as a Mobile Developer Rockstar with PhoneGap

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’maddicted 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 ICan?

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 APIsfunction 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…

<wrap/>

Thanks for Coming! @glen_a_smithhttp://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/

http://blogs.bytecode.com.au	389
http://localhost	11
http://translate.googleusercontent.com	4
http://webcache.googleusercontent.com	2
http://www.onlydoo.com	1

Fake Your Way as a Mobile Developer Rockstar with PhoneGap

by glen_a_smith on Nov 15, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 407

Statistics

Fake Your Way as a Mobile Developer Rockstar with PhoneGap — Presentation Transcript