Developing with Phonegap - Adobe Refresh 2012

3,267 views

Published on

Presentation at Adobe Refresh 2012 on developing applications with PhoneGap.

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
3,267
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
78
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Developing with Phonegap - Adobe Refresh 2012

  1. 1. Developing with PhoneGap Building mobile applications with HTML/JSSaturday, March 31, 2012
  2. 2. e Power of PhoneGapSaturday, March 31, 2012
  3. 3. HTML/JS/CSS for Mobile AppsSaturday, March 31, 2012
  4. 4. What’s the benefit of web standards for mobile applications?Saturday, March 31, 2012
  5. 5. Marketshare Language 29% Objective C 53% Java 10% Java/ActionScript 3% C#Saturday, March 31, 2012
  6. 6. Mobile Web: Marketshare: 100% Language: HTML/JS/CSS Why not write apps that way?Saturday, March 31, 2012
  7. 7. e web is awesome: Using web technologies leaves you freeto target any device/os/platform you wantSaturday, March 31, 2012
  8. 8. So how does it work?Saturday, March 31, 2012
  9. 9. Your CodeSaturday, March 31, 2012
  10. 10. Your Code Native Web ViewSaturday, March 31, 2012
  11. 11. Your Code Native Web View Native APIsSaturday, March 31, 2012
  12. 12. Your Code Native Web View Native APIs Native App - .apk, .ipa, etcSaturday, March 31, 2012
  13. 13. PhoneGap provides a JavaScript Library that reaches out into the native APIs. That means anything the device supports is doable.Saturday, March 31, 2012
  14. 14. PhoneGap is completely open source and has been submitted to the Apache Foundation.Saturday, March 31, 2012
  15. 15. The entire project is available on Github https:// github.com/ cordovaSaturday, March 31, 2012
  16. 16. There are multiple ways to “start” with PhoneGap. The project includes command line tools, IDE plugins, and Dreamweaver 5.5 ships with PhoneGap support.Saturday, March 31, 2012
  17. 17. - Accelerometer - Camera - Capture - Compass Out of the box, - Connection PhoneGap - Contacts - Device provides support - Events for a number of - - File Geolocation basic device APIs - Media - Network - Notification - StorageSaturday, March 31, 2012
  18. 18. For added functionality PhoneGap provides a plug-in mechanism. Includes OS- specific code/ libraries and the JS to use it in PhoneGap Some of the helpful ones: PayPal, Facebook, Push NotificationSaturday, March 31, 2012
  19. 19. Camera API exampleSaturday, March 31, 2012
  20. 20. Demo: Using PhoneGapSaturday, March 31, 2012
  21. 21. DebuggingSaturday, March 31, 2012
  22. 22. Debugging these kinds of apps is best done on device.Saturday, March 31, 2012
  23. 23. 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.Saturday, March 31, 2012
  24. 24. But what about Device APIs? Because we’re in the web view, there is no way to do line-by-line debugging.Saturday, March 31, 2012
  25. 25. Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs.Saturday, March 31, 2012
  26. 26. 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.Saturday, March 31, 2012
  27. 27. But, a much easier way: http://debug.phonegap.com/Saturday, March 31, 2012
  28. 28. Demo: debug.phonegap.comSaturday, March 31, 2012
  29. 29. Deploying build.phonegap.comSaturday, March 31, 2012
  30. 30. e Problem: You’re building a cross-platform app, but dealing with a lot of native projectsSaturday, March 31, 2012
  31. 31. e Solution: PhoneGap Build - a cloud service forcreating binary files for multiple platforms from a single codebaseSaturday, March 31, 2012
  32. 32. Saturday, March 31, 2012
  33. 33. Build for every platform at once PhoneGap Build creates binaries for all of the major platforms at the same time and in one place.Saturday, March 31, 2012
  34. 34. Core part of PhoneGap Build: Work how you want to workSaturday, March 31, 2012
  35. 35. Using Git/SVN repositoriesSaturday, March 31, 2012
  36. 36. Debugging and TestingSaturday, March 31, 2012
  37. 37. Build includes a debugging option that will inject the Weinre JavaScript into the app so it can be remotely debugged using debug.phonegap.comSaturday, March 31, 2012
  38. 38. Demo: PhoneGap BuildSaturday, March 31, 2012
  39. 39. Demo: PhoneGap in ActionSaturday, March 31, 2012
  40. 40. Ryan Stewart Web Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewartSaturday, March 31, 2012

×