Introdu

1. Fake Your Way as a
Mobile Developer
Rockstar
Introducing the PhoneGap framework
with Glen Smith

2. Ancient Hacker Wisdom…
Where there are no oxen, the stall is clean.
Solomon, Proverbs 14:4

3. Why this talk?

4. “The only thing I’m
addicted to right now is
winning.”

5. Best Case Outcomes
• Learn what PhoneGap does
• See how it works in action
• Deploy it to a device
• Swap stories & have fun!

6. What is it?

7. Crossplatform, like Java?

8. Actually, no…

9. * for large values of once

11. Vendor Backing

12. So What Can I Target?

13. So I
Can?

14. <canvas id=“angry-bird”/>

15. What the client wanted...
• Simple promo/reference app
• Needed AppStore
• Wanted a Native Phone app
• Use platform services (phone)

16. Let’s Build it!
• Use PhoneGap for App Shell
• Add a UI Framework + CSS3
• Add Device Caps
• Deploy to the AppStore & Retire!

17. Choosing a UI framework

18. The Markup…
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...
<div data-role="footer">...</div>
</div>

19. 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;
}
}

20. 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
});
}

21. Plugins

23. PhoneGap Build

24. The Experience
• PhoneGap was a perfect fit
• Nearly* single source
• Emulators were close
• All platforms had their issues

25. On AppStores…

26. Useful Resources

27. Could be handy…
https://github.com/glenasmith/phonegap-talk

28. We’re headed…

29. Demo

30. <wrap/>

31. Thanks for Coming!
@glen_a_smith
http://blogs.bytecode.com.au/glen

32. 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/