0
Developing with                               Phonegap                           Building mobile applications with HTML/JS...
Ryan Stewart                           Web Developer Evangelist, Adobe                                    ryan@adobe.com  ...
Agenda                    • Why PhoneGap?                    • Who is PhoneGap...really?                    • Getting Star...
Why PhoneGap?Monday, January 23, 2012
The moral reason:                           The web is awesomeMonday, January 23, 2012
The realistic reason                           Cross platform applications                           with HTML/JS will be ...
What is PhoneGap?Monday, January 23, 2012
Monday, January 23, 2012
Your CodeMonday, January 23, 2012
Your Code                           Native Web ViewMonday, January 23, 2012
Your Code                           Native Web View                            Native APIsMonday, January 23, 2012
Your Code                                Native Web View                                 Native APIs                      ...
PhoneGap uses the native browser on the                device to render the HTML/CSS/JS             Keep in mind that can ...
PhoneGap uses the           native project format           for each platform.           Open, emulate, and           test...
Because it’s using the           native projects it’s fully           extendable.Monday, January 23, 2012
PhoneGap provides a                           JavaScript Library that                           reaches out into the      ...
PhoneGap is           completely open           source and has been           submitted to the           Apache Foundation...
It will be known as                           Cordova when it gets                           approved                     ...
The entire project is           available on Github           https://           github.com/           cordovaMonday, Janu...
Getting StartedMonday, January 23, 2012
There are multiple           ways to “start” with           PhoneGap.           The project includes           command lin...
bin/create ~/Sites/phonegap_preso/demo DemoMonday, January 23, 2012
Quick tour through the project structureMonday, January 23, 2012
Demo:           Hello WorldMonday, January 23, 2012
Quick segue: mobile web                             apps versus mobile                                 applicationsMonday,...
Very important to           keep in mind that           we’re building a mobile           app, not a mobile web           ...
You can use ANY           framework you want,           but try to design for an           app.           (I kind of like ...
Diving into the                      PhoneGap APIsMonday, January 23, 2012
-   Accelerometer                                    -   Camera                                    -   Capture           O...
Camera API           exampleMonday, January 23, 2012
Demo:           Using the device APIsMonday, January 23, 2012
DebuggingMonday, January 23, 2012
It’s all just HTML/JS, so           you can use your           browser!           Take advantage of           Chrome Devel...
But what about Device APIs?               Because we’re in the web view, there is no                   way to do line-by-l...
Luckily we have           Weinre, which lets us           debug and manipulate           the DOM from our           PCs.Mo...
Weinre can be           configured as a server           (there is a Mac           application) and uses           the deve...
Drop in a <script> tag           on a remote server           and Weinre will let you           use the Developer         ...
Demo:           Debugging with WeinreMonday, January 23, 2012
But, a much easier way:           http://           debug.phonegap.com/Monday, January 23, 2012
Demo:           debug.phonegapMonday, January 23, 2012
Extending PhonegapMonday, January 23, 2012
For added functionality           PhoneGap provides a           plug-in mechanism.           Includes OS-specific          ...
Plug-is are one of the           areas that show off the           power of a hybrid web/           native approach.      ...
Available at           https://github.com/phonegap/phonegap-pluginsMonday, January 23, 2012
This app can just use the           plugins.barcodeScanner.scan method to           call out to some native code that read...
Demo:           PhoneGap PluginsMonday, January 23, 2012
Final ConsiderationsMonday, January 23, 2012
Remember that we’re on different platformsMonday, January 23, 2012
Versus     http://developer.apple.com/library/IOs/#documentation/    UserExperience/Conceptual/MobileHIG/UIElementGuidelin...
Some important           performance           implications:           Currently only iOS           hardware accelerates  ...
Couple of tips:                  Always test features first (if !supported)                 For UI-specifics, you can use th...
Demo:           PhoneGap in ActionMonday, January 23, 2012
One more thing.                           build.phonegap.comMonday, January 23, 2012
The Problem:       You’re building a cross-platform app, but dealing                 with a lot of native projectsMonday, ...
The Solution:Monday, January 23, 2012
Monday, January 23, 2012
Build includes git           support so you can use           git and host projects           on PhoneGap or build        ...
Build lets you define           individuals as tester/           developer which           changes permissions           on...
You can use Build as your testing                           distribution as well by making the                            ...
Will (soon) support           popular plugins so that           you can build plugins           right into the build      ...
Supports multiple           PhoneGap versions so           you can target a wide           range of devices.Monday, Januar...
Demo:           PhoneGap BuildMonday, January 23, 2012
Recap                    • Why is PhoneGap?                    • Who is PhoneGap...really?                    • Getting St...
also, Beer:                           Q&A                            Ryan Stewart                            Web Developer...
Upcoming SlideShare
Loading in...5
×

PhoneGap: Building Mobile Applications with HTML/JS

29,856

Published on

An overview of PhoneGap. Covers the basics about what PhoneGap is, how to get started, how to use the device APIs, and how to debug it along with some other things to consider when building mobile applications with HTML/JS/CSS.

Published in: Technology, Education
3 Comments
24 Likes
Statistics
Notes
No Downloads
Views
Total Views
29,856
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
706
Comments
3
Likes
24
Embeds 0
No embeds

No notes for slide

Transcript of "PhoneGap: Building Mobile Applications with HTML/JS"

  1. 1. Developing with Phonegap Building mobile applications with HTML/JSMonday, January 23, 2012
  2. 2. Ryan Stewart Web Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart Based in Seattle Things I Like: Beer Mountaineering/Hiking/Backpacking Geolocation/Mapping stuffMonday, January 23, 2012
  3. 3. Agenda • Why PhoneGap? • Who is PhoneGap...really? • Getting Started with PhoneGap • PhoneGap APIs • Extending PhoneGap • Final ConsiderationsMonday, January 23, 2012
  4. 4. Why PhoneGap?Monday, January 23, 2012
  5. 5. The moral reason: The web is awesomeMonday, January 23, 2012
  6. 6. The realistic reason Cross platform applications with HTML/JS will be faster and easierMonday, January 23, 2012
  7. 7. What is PhoneGap?Monday, January 23, 2012
  8. 8. Monday, January 23, 2012
  9. 9. Your CodeMonday, January 23, 2012
  10. 10. Your Code Native Web ViewMonday, January 23, 2012
  11. 11. Your Code Native Web View Native APIsMonday, January 23, 2012
  12. 12. Your Code Native Web View Native APIs Native App - .apk, .ipa, etcMonday, January 23, 2012
  13. 13. PhoneGap uses the native browser on the device to render the HTML/CSS/JS Keep in mind that can affect the experience It also keeps apps nice and smallMonday, January 23, 2012
  14. 14. PhoneGap uses the native project format for each platform. Open, emulate, and test from within the native development environment!Monday, January 23, 2012
  15. 15. Because it’s using the native projects it’s fully extendable.Monday, January 23, 2012
  16. 16. PhoneGap provides a JavaScript Library that reaches out into the native APIs. That means anything the device supports is doable.Monday, January 23, 2012
  17. 17. PhoneGap is completely open source and has been submitted to the Apache Foundation.Monday, January 23, 2012
  18. 18. It will be known as Cordova when it gets approved http:// incubator.apache. org/callback/Monday, January 23, 2012
  19. 19. The entire project is available on Github https:// github.com/ cordovaMonday, January 23, 2012
  20. 20. Getting StartedMonday, January 23, 2012
  21. 21. There are multiple ways to “start” with PhoneGap. The project includes command line tools, IDE plugins, and Dreamweaver 5.5 ships with PhoneGap support.Monday, January 23, 2012
  22. 22. bin/create ~/Sites/phonegap_preso/demo DemoMonday, January 23, 2012
  23. 23. Quick tour through the project structureMonday, January 23, 2012
  24. 24. Demo: Hello WorldMonday, January 23, 2012
  25. 25. Quick segue: mobile web apps versus mobile applicationsMonday, January 23, 2012
  26. 26. Very important to keep in mind that we’re building a mobile app, not a mobile web app. Let’s look at jQuery MobileMonday, January 23, 2012
  27. 27. You can use ANY framework you want, but try to design for an app. (I kind of like Bootstrap)Monday, January 23, 2012
  28. 28. Diving into the PhoneGap APIsMonday, January 23, 2012
  29. 29. - Accelerometer - Camera - Capture Out of the box, - Compass - Connection PhoneGap - Contacts provides support for a - - Device Events number of basic device - - File Geolocation APIs - Media - Network - Notification - StorageMonday, January 23, 2012
  30. 30. Camera API exampleMonday, January 23, 2012
  31. 31. Demo: Using the device APIsMonday, January 23, 2012
  32. 32. DebuggingMonday, January 23, 2012
  33. 33. 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.Monday, January 23, 2012
  34. 34. But what about Device APIs? Because we’re in the web view, there is no way to do line-by-line debugging.Monday, January 23, 2012
  35. 35. Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs.Monday, January 23, 2012
  36. 36. 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.Monday, January 23, 2012
  37. 37. Drop in a <script> tag on a remote server and Weinre will let you use the Developer Tools on your apps. Requires internet access, so keep that in mind.Monday, January 23, 2012
  38. 38. Demo: Debugging with WeinreMonday, January 23, 2012
  39. 39. But, a much easier way: http:// debug.phonegap.com/Monday, January 23, 2012
  40. 40. Demo: debug.phonegapMonday, January 23, 2012
  41. 41. Extending PhonegapMonday, January 23, 2012
  42. 42. 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 NotificationMonday, January 23, 2012
  43. 43. Plug-is are one of the areas that show off the power of a hybrid web/ native approach. There are a ton of native-centric SDKs (like Facebook) that provide a great native experience. We can use those!Monday, January 23, 2012
  44. 44. Available at https://github.com/phonegap/phonegap-pluginsMonday, January 23, 2012
  45. 45. This app can just use the plugins.barcodeScanner.scan method to call out to some native code that reads and parses a barcode.Monday, January 23, 2012
  46. 46. Demo: PhoneGap PluginsMonday, January 23, 2012
  47. 47. Final ConsiderationsMonday, January 23, 2012
  48. 48. Remember that we’re on different platformsMonday, January 23, 2012
  49. 49. Versus http://developer.apple.com/library/IOs/#documentation/ UserExperience/Conceptual/MobileHIG/UIElementGuidelines/ http://developer.android.com/design/index.html UIElementGuidelines.htmlMonday, January 23, 2012
  50. 50. Some important performance implications: Currently only iOS hardware accelerates CSS3 transitions.Monday, January 23, 2012
  51. 51. Couple of tips: Always test features first (if !supported) For UI-specifics, you can use the device class to get device infoMonday, January 23, 2012
  52. 52. Demo: PhoneGap in ActionMonday, January 23, 2012
  53. 53. One more thing. build.phonegap.comMonday, January 23, 2012
  54. 54. The Problem: You’re building a cross-platform app, but dealing with a lot of native projectsMonday, January 23, 2012
  55. 55. The Solution:Monday, January 23, 2012
  56. 56. Monday, January 23, 2012
  57. 57. Build includes git support so you can use git and host projects on PhoneGap or build a project from Github.Monday, January 23, 2012
  58. 58. Build lets you define individuals as tester/ developer which changes permissions on the project accordingly.Monday, January 23, 2012
  59. 59. You can use Build as your testing distribution as well by making the download pages public.Monday, January 23, 2012
  60. 60. Will (soon) support popular plugins so that you can build plugins right into the build process.Monday, January 23, 2012
  61. 61. Supports multiple PhoneGap versions so you can target a wide range of devices.Monday, January 23, 2012
  62. 62. Demo: PhoneGap BuildMonday, January 23, 2012
  63. 63. Recap • Why is PhoneGap? • Who is PhoneGap...really? • Getting Started with PhoneGap • PhoneGap APIs • Extending PhoneGap • Final ConsiderationsMonday, January 23, 2012
  64. 64. also, Beer: Q&A Ryan Stewart Web Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewartMonday, January 23, 2012
  1. A particular slide catching your eye?

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

×