Developing with                             PhoneGap                    Building mobile applications with HTML/JSSaturday,...
e Power of PhoneGapSaturday, March 31, 2012
HTML/JS/CSS for Mobile AppsSaturday, March 31, 2012
What’s the benefit of web                            standards for mobile                                applications?Satu...
Marketshare       Language                              29%          Objective C                              53%         ...
Mobile Web:                               Marketshare: 100%                            Language: HTML/JS/CSS              ...
e web is awesome:  Using web technologies leaves you freeto target any device/os/platform you wantSaturday, March 31, 2012
So how does it work?Saturday, March 31, 2012
Your CodeSaturday, March 31, 2012
Your Code                           Native Web ViewSaturday, March 31, 2012
Your Code                           Native Web View                             Native APIsSaturday, March 31, 2012
Your Code                               Native Web View                                  Native APIs                      ...
PhoneGap                           provides a                           JavaScript Library                           that ...
PhoneGap is            completely open            source and has            been submitted to            the Apache       ...
The entire project            is available on            Github            https://            github.com/            cord...
There are multiple            ways to “start”            with PhoneGap.            The project            includes command...
-   Accelerometer                                -   Camera                                -   Capture                    ...
For added            functionality            PhoneGap            provides a plug-in            mechanism.            Incl...
Camera API            exampleSaturday, March 31, 2012
Demo:     Using PhoneGapSaturday, March 31, 2012
DebuggingSaturday, March 31, 2012
Debugging these       kinds of apps is       best done on       device.Saturday, March 31, 2012
It’s all just HTML/            JS, so you can use            your browser!            Take advantage of            Chrome ...
But what about Device APIs?           Because we’re in the web view, there               is no way to do line-by-line     ...
Luckily we have            Weinre, which lets            us debug and            manipulate the            DOM from our   ...
Weinre can be            configured as a            server (there is a            Mac application)            and uses the...
But, a much easier way:            http://debug.phonegap.com/Saturday, March 31, 2012
Demo:     debug.phonegap.comSaturday, March 31, 2012
Deploying                           build.phonegap.comSaturday, March 31, 2012
e Problem:   You’re building a cross-platform app, but     dealing with a lot of native projectsSaturday, March 31, 2012
e Solution:   PhoneGap Build - a cloud service forcreating binary files for multiple platforms         from a single code...
Saturday, March 31, 2012
Build for every platform at once  PhoneGap Build creates binaries for all of the  major platforms at the same time and in ...
Core part of PhoneGap Build:                           Work how you want to workSaturday, March 31, 2012
Using Git/SVN                           repositoriesSaturday, March 31, 2012
Debugging and TestingSaturday, March 31, 2012
Build includes a        debugging option that        will inject the Weinre        JavaScript into the        app so it ca...
Demo:           PhoneGap BuildSaturday, March 31, 2012
Demo:           PhoneGap in ActionSaturday, March 31, 2012
Ryan Stewart                           Web Developer Evangelist, Adobe                                    ryan@adobe.com  ...
Upcoming SlideShare
Loading in...5
×

Developing with Phonegap - Adobe Refresh 2012

2,814

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
2,814
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
76
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×