Your SlideShare is downloading. ×
0
Developing with  PhonegapBuilding mobile applications with HTML/JS
Ryan Stewart         Web Developer Advocate, Adobe                ryan@adobe.com                blog.digitalbackcountry.co...
Why PhoneGap?
The moral reason:The web is awesome
The realistic reason:     Cross platformapplications with HTML/CSS/JS will be faster and          easier
What is PhoneGap?
Your Code
Your CodeNative Web View
Your CodeNative Web View  Native APIs
Your Code     Native Web View       Native APIsNative App - .apk, .ipa, etc
PhoneGap uses the native browseron the device to render the HTML/              CSS/JS Keep in mind that can affect theexpe...
PhoneGap uses thenative projectformat for eachplatform.Open, emulate,and test fromwithin the nativedevelopmentenvironment!
Because it’s usingthe native projectsit’s fullyextendable.
PhoneGap providesa JavaScript Librarythat reaches outinto the nativeAPIs.That meansanything thedevice supports isdoable.
PhoneGap iscompletely opensource and is partof the Apachefoundation.
The entire projectis available onGithubhttps://github.com/cordova
Getting Started
bin/create /Developer/Sites/demoapp  com.digitalbackcountry DemoApp
Demo:Hello World
Quick segue: mobile web apps versusmobile applications
Very important tokeep in mind thatwe’re building amobile app, not amobile web app.Let’s look atjQuery Mobile
You can use ANYframework youwant, but try todesign for an app.
Diving into thePhoneGap APIs
-   Accelerometer                    -   Camera                    -   CaptureOut of the box,     -   Compass             ...
capturePhotoEdit: function() {               navigator.camera.getPicture(onPhotoDataSuccess, onFail, {                    ...
Demo:PhoneGap API Explorer
Debugging
It’s all just HTML/JS, so you can useyour browser!Take advantage ofChrome Developertools/Firebug totest your app’s UI.
But what about Device APIs?Because we’re in the web view, there is no   way to do line-by-line debugging.
Luckily we haveWeinre, which letsus debug andmanipulate theDOM from our PCs.
Weinre is built withnode.JS and acts asa server and usesthe developer toolsfrom Chrome toprovide hooks intothe mobile app.
Drop in a <script>tag on a remoteserver and Weinrewill let you use theDeveloper Tools onyour apps.Requires internetaccess,...
But, a much easier way:http://debug.phonegap.com/
Demo:debug.phonegap
Extending Phonegap
For addedfunctionalityPhoneGap providesa plug-inmechanism.Includes OS-specific code/libraries and the JSto use it inPhoneGa...
Plug-is are one ofthe areas thatshow off the powerof a hybrid web/native approach.There are a ton ofnative-centricSDKs (li...
Available athttps://github.com/phonegap/phonegap-plugins
FinalConsiderations
Remember that we’re on different          platforms
Versus  http://developer.apple.com/library/IOs/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/    ...
Demo:PhoneGap in Action
DeployingPhoneGap Apps
build.phonegap.com
The Problem:You’re building a cross-platform app, but   dealing with a lot of native projects
The Solution:   PhoneGap Build - create distributionbinaries for multiple platforms in one place
Build includes gitsupport so you canuse git and hostprojects onPhoneGap or builda project fromGithub.
Build lets youdefine individualsas tester/developerwhich changespermissions on theprojectaccordingly.
You can use Build as your testingdistribution as well by making the      download pages public.
Will (soon) supportpopular plugins sothat you can buildplugins right intothe build process.
Supports multiplePhoneGap versionsso you can target awide range ofdevices.
Demo:PhoneGap Build
Q&A Ryan Stewart Web Developer Advocate, Adobe        ryan@adobe.com        blog.digitalbackcountry.com        @ryanstewar...
Intro to PhoneGap
Intro to PhoneGap
Upcoming SlideShare
Loading in...5
×

Intro to PhoneGap

1,066

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,066
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • http://sarthony.deviantart.com/art/Two-worlds-76448188?q=boost%3Apopular%20two%20worlds&amp;qo=45\n
  • \n
  • \n
  • \n
  • \n
  • https://github.com/callback/phonegap\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • https://github.com/callback/phonegap\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • https://github.com/callback/phonegap\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • https://github.com/callback/phonegap\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • https://github.com/callback/phonegap\n\n
  • \n
  • Transcript of "Intro to PhoneGap"

    1. 1. Developing with PhonegapBuilding mobile applications with HTML/JS
    2. 2. Ryan Stewart Web Developer Advocate, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewartBased in SeattleThings I Like: Beer Mountaineering/Hiking/Backpacking Geolocation/Mapping stuff
    3. 3. Why PhoneGap?
    4. 4. The moral reason:The web is awesome
    5. 5. The realistic reason: Cross platformapplications with HTML/CSS/JS will be faster and easier
    6. 6. What is PhoneGap?
    7. 7. Your Code
    8. 8. Your CodeNative Web View
    9. 9. Your CodeNative Web View Native APIs
    10. 10. Your Code Native Web View Native APIsNative App - .apk, .ipa, etc
    11. 11. PhoneGap uses the native browseron the device to render the HTML/ CSS/JS Keep in mind that can affect theexperience. It also keeps apps nice and small
    12. 12. PhoneGap uses thenative projectformat for eachplatform.Open, emulate,and test fromwithin the nativedevelopmentenvironment!
    13. 13. Because it’s usingthe native projectsit’s fullyextendable.
    14. 14. PhoneGap providesa JavaScript Librarythat reaches outinto the nativeAPIs.That meansanything thedevice supports isdoable.
    15. 15. PhoneGap iscompletely opensource and is partof the Apachefoundation.
    16. 16. The entire projectis available onGithubhttps://github.com/cordova
    17. 17. Getting Started
    18. 18. bin/create /Developer/Sites/demoapp com.digitalbackcountry DemoApp
    19. 19. Demo:Hello World
    20. 20. Quick segue: mobile web apps versusmobile applications
    21. 21. Very important tokeep in mind thatwe’re building amobile app, not amobile web app.Let’s look atjQuery Mobile
    22. 22. You can use ANYframework youwant, but try todesign for an app.
    23. 23. Diving into thePhoneGap APIs
    24. 24. - Accelerometer - Camera - CaptureOut of the box, - Compass - ConnectionPhoneGap - Contacts - Deviceprovides support - Eventsfor a number of - - File Geolocationbasic device APIs - - Media Network - Notification - Storage
    25. 25. capturePhotoEdit: function() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true }); },Camera API onPhotoDataSucess: function(imageData) { var smallImage = document.getElementById(smallImage);example smallImage.style.display = block; smallImage.src = "data:image/jpeg;base64," + imageData; }, onFail: function(message) { alert(Failed because: + message); }
    26. 26. Demo:PhoneGap API Explorer
    27. 27. Debugging
    28. 28. It’s all just HTML/JS, so you can useyour browser!Take advantage ofChrome Developertools/Firebug totest your app’s UI.
    29. 29. But what about Device APIs?Because we’re in the web view, there is no way to do line-by-line debugging.
    30. 30. Luckily we haveWeinre, which letsus debug andmanipulate theDOM from our PCs.
    31. 31. Weinre is built withnode.JS and acts asa server and usesthe developer toolsfrom Chrome toprovide hooks intothe mobile app.
    32. 32. Drop in a <script>tag on a remoteserver and Weinrewill let you use theDeveloper Tools onyour apps.Requires internetaccess, so keepthat in mind.
    33. 33. But, a much easier way:http://debug.phonegap.com/
    34. 34. Demo:debug.phonegap
    35. 35. Extending Phonegap
    36. 36. For addedfunctionalityPhoneGap providesa plug-inmechanism.Includes OS-specific code/libraries and the JSto use it inPhoneGapSome of thehelpful ones:PayPal, Facebook,Push Notification
    37. 37. Plug-is are one ofthe areas thatshow off the powerof a hybrid web/native approach.There are a ton ofnative-centricSDKs (likeFacebook) thatprovide a greatnative experience.We can use those!
    38. 38. Available athttps://github.com/phonegap/phonegap-plugins
    39. 39. FinalConsiderations
    40. 40. Remember that we’re on different platforms
    41. 41. Versus http://developer.apple.com/library/IOs/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/ http://developer.android.com/design/index.html UIElementGuidelines.html
    42. 42. Demo:PhoneGap in Action
    43. 43. DeployingPhoneGap Apps
    44. 44. build.phonegap.com
    45. 45. The Problem:You’re building a cross-platform app, but dealing with a lot of native projects
    46. 46. The Solution: PhoneGap Build - create distributionbinaries for multiple platforms in one place
    47. 47. Build includes gitsupport so you canuse git and hostprojects onPhoneGap or builda project fromGithub.
    48. 48. Build lets youdefine individualsas tester/developerwhich changespermissions on theprojectaccordingly.
    49. 49. You can use Build as your testingdistribution as well by making the download pages public.
    50. 50. Will (soon) supportpopular plugins sothat you can buildplugins right intothe build process.
    51. 51. Supports multiplePhoneGap versionsso you can target awide range ofdevices.
    52. 52. Demo:PhoneGap Build
    53. 53. Q&A Ryan Stewart Web Developer Advocate, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart
    1. A particular slide catching your eye?

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

    ×