This document summarizes a presentation about using the PhoneGap framework to build mobile apps. PhoneGap allows developing apps using web technologies like HTML, CSS, and JavaScript that can be deployed across platforms. It introduces PhoneGap and demonstrates building a simple app with a UI framework and device APIs. The presentation suggests PhoneGap is a good option when clients want a native mobile app but don't have resources for platform-specific development. It provides resources for learning PhoneGap and deploying apps to app stores.

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/