+ PhoneGap (tm)
Christian Grobmeierwww.grobmeier.de@grobmeierASF Hacker +VP Logging, Freelancer, Founder: www.timeandbill.de
PhoneGap?Cordova?
PhoneGap> Company aquired by Adobe> Packages Cordova> Provides Build-Services
Cordova> Home of code> Community> Apache Software FoundationApache
HTML5JavaScriptCSSPluginsWebview
PLATFORMS?+ BlackBerry+ WebOS+ Symbian+ Bada+ QT+ Tizen+ OS X+ Windows
> Accelerometer> Camera> Compass> Contacts> File> Geolocation> Media> Network> Notifications> StoragePlugins
1. Create a JavaScript function2. Develop a native pluginMore?extends CordovaPluginwindow.echo = function(str, callback) {...
Gettingstarted
IDE-SDKon buildpath
cd lib/android/bin./create ~/app de.app App
$> chrome--disable-web-security--allow-file-access-from-files
ApacheRIPPLE
FRIENDS 4 EVER?Roadcrew.js
zepto.js / jQuery+ Roadcrew.js+ Custom.js100% Performance
<html><body><div>Hey!</div><!-- include your js --><script type=“text/javascript“>$(document).on(deviceready, onDeviceRead...
<body><div id=“page1“>Page 1</div><div id=“page2“><a href=“#page1“>...</div><div id=“page3“>Page 3</div></body>SinglePageA...
<body><div id=“p1“class=“start page“><button id=“refresh“>Refresh</button><ul id=“list“></ul></div></body>2:30Refresh
2:30RefreshonDeviceReady() {$(#refresh).on(click,function() {app.refresh();});}
2:30Refreshvar app = {refresh: function() {$.get(,data.json‘,function (data) {$(,#list‘).html(list);});}}RippleWave...
var options = {quality: 50,destinationType:Camera.DestinationType.FILE_URI}function cb(uri) {$(#img).attr(src , uri);}func...
SHIP!
SHIP!$> ant release
SHIP!build.phonegap.comServiceby Adobe
Drawbacks?
Write once,debugeverywhere
SHIP!NeedAnimations?
SHIP!Design ityourself
JavaScript.Is it hard?
Christian Grobmeierwww.grobmeier.de@grobmeierThanks!:-)
Image CreditsOil platform: NOAA Photolib (Flickr)Plugs: Brad.K (stopbits@Flickr)Car: Juan Alvaro (Flickr)Zebra: flowcomm (F...
Apps with Apache Cordova and Phonegap
Upcoming SlideShare
Loading in...5
×

Apps with Apache Cordova and Phonegap

23,858

Published on

A few introductory slides on Apache Cordova / Phonegap. Presentation was held on 17.05.2013 at the Mobile Forum Stuttgart.

Published in: Technology, Business
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
23,858
On Slideshare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
126
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Apps with Apache Cordova and Phonegap

  1. 1. + PhoneGap (tm)
  2. 2. Christian Grobmeierwww.grobmeier.de@grobmeierASF Hacker +VP Logging, Freelancer, Founder: www.timeandbill.de
  3. 3. PhoneGap?Cordova?
  4. 4. PhoneGap> Company aquired by Adobe> Packages Cordova> Provides Build-Services
  5. 5. Cordova> Home of code> Community> Apache Software FoundationApache
  6. 6. HTML5JavaScriptCSSPluginsWebview
  7. 7. PLATFORMS?+ BlackBerry+ WebOS+ Symbian+ Bada+ QT+ Tizen+ OS X+ Windows
  8. 8. > Accelerometer> Camera> Compass> Contacts> File> Geolocation> Media> Network> Notifications> StoragePlugins
  9. 9. 1. Create a JavaScript function2. Develop a native pluginMore?extends CordovaPluginwindow.echo = function(str, callback) {cordova.exec(callback, function(err) {callback(Nothing to echo.);}, "Echo", "echo", [str]);};
  10. 10. Gettingstarted
  11. 11. IDE-SDKon buildpath
  12. 12. cd lib/android/bin./create ~/app de.app App
  13. 13. $> chrome--disable-web-security--allow-file-access-from-files
  14. 14. ApacheRIPPLE
  15. 15. FRIENDS 4 EVER?Roadcrew.js
  16. 16. zepto.js / jQuery+ Roadcrew.js+ Custom.js100% Performance
  17. 17. <html><body><div>Hey!</div><!-- include your js --><script type=“text/javascript“>$(document).on(deviceready, onDeviceReady );</script></body></html>
  18. 18. <body><div id=“page1“>Page 1</div><div id=“page2“><a href=“#page1“>...</div><div id=“page3“>Page 3</div></body>SinglePageApps
  19. 19. <body><div id=“p1“class=“start page“><button id=“refresh“>Refresh</button><ul id=“list“></ul></div></body>2:30Refresh
  20. 20. 2:30RefreshonDeviceReady() {$(#refresh).on(click,function() {app.refresh();});}
  21. 21. 2:30Refreshvar app = {refresh: function() {$.get(,data.json‘,function (data) {$(,#list‘).html(list);});}}RippleWave...
  22. 22. var options = {quality: 50,destinationType:Camera.DestinationType.FILE_URI}function cb(uri) {$(#img).attr(src , uri);}function fail(message) {alert(message);}navigator.camera.getPicture(cb, fail, options);Camera
  23. 23. SHIP!
  24. 24. SHIP!$> ant release
  25. 25. SHIP!build.phonegap.comServiceby Adobe
  26. 26. Drawbacks?
  27. 27. Write once,debugeverywhere
  28. 28. SHIP!NeedAnimations?
  29. 29. SHIP!Design ityourself
  30. 30. JavaScript.Is it hard?
  31. 31. Christian Grobmeierwww.grobmeier.de@grobmeierThanks!:-)
  32. 32. Image CreditsOil platform: NOAA Photolib (Flickr)Plugs: Brad.K (stopbits@Flickr)Car: Juan Alvaro (Flickr)Zebra: flowcomm (Flickr)Ship: eamoncurry123 (Flickr)Ant: sanchom (Flickr)Broken Tube: L. Marie (Flickr)
  1. A particular slide catching your eye?

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

×