Apps with Apache Cordova and Phonegap

1. + PhoneGap (tm)

2. Christian Grobmeier www.grobmeier.de @grobmeier ASF Hacker +VP Logging, Freelancer, Founder: www.timeandbill.de

3. PhoneGap? Cordova?

4. PhoneGap > Company aquired by Adobe > Packages Cordova > Provides Build-Services

5. Cordova> Home of code > Community > Apache Software Foundation Apache

6. HTML5 JavaScript CSS Plugins Webview

7. PLATFORMS? + BlackBerry + WebOS + Symbian + Bada + QT + Tizen + OS X + Windows

8. > Accelerometer > Camera > Compass > Contacts > File > Geolocation > Media > Network > Notiﬁcations > Storage Plugins

9. 1. Create a JavaScript function 2. Develop a native plugin More? extends CordovaPlugin window.echo = function(str, callback) { cordova.exec(callback, function(err) { callback('Nothing to echo.'); }, "Echo", "echo", [str]); };

10. Getting started

11. IDE -SDK on build path

12. cd lib/android/bin ./create ~/app de.app App

14. $> chrome --disable-web-security --allow-ﬁle-access-from- ﬁles

15. Apache RIPPLE

16. FRIENDS 4 EVER? Roadcrew.js

17. zepto.js / jQuery + Roadcrew.js + Custom.js 100% Performance

18. <html> <body> <div>Hey!</div>  <script type=“text/javascript“> $(document).on( 'deviceready', onDeviceReady ); </script> </body> </html>

19. <body> <div id=“page1“> Page 1 </div> <div id=“page2“> <a href=“#page1“>... </div> <div id=“page3“> Page 3 </div> </body> Single Page Apps

20. <body> <div id=“p1“ class=“start page“> <button id=“refresh“> Refresh </button> <ul id=“list“></ul> </div> </body> 2:30 Refresh

21. 2:30 Refresh onDeviceReady() { $('#refresh').on( 'click', function() { app.refresh(); }); }

22. 2:30 Refresh var app = { refresh: function() { $.get( ,data.json‘, function (data) { $(,#list‘).html(list); }); } } Ripple Wave ...

23. 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

24. SHIP!

25. SHIP!$> ant release

26. SHIP!build. phonegap. com Service by Adobe

27. Drawbacks?

28. Write once, debug everywhere

29. SHIP! Need Animations?

30. SHIP! Design it yourself

31. JavaScript. Is it hard?

32. Christian Grobmeier www.grobmeier.de @grobmeier Thanks! :-)

33. Image Credits Oil platform: NOAA Photolib (Flickr) Plugs: Brad.K (stopbits@Flickr) Car: Juan Alvaro (Flickr) Zebra: ﬂowcomm (Flickr) Ship: eamoncurry123 (Flickr) Ant: sanchom (Flickr) Broken Tube: L. Marie (Flickr)

Apps with Apache Cordova and Phonegap

Apps with Apache Cordova and Phonegap

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Destacado

Destacado(20)

Similar a Apps with Apache Cordova and Phonegap

Similar a Apps with Apache Cordova and Phonegap(20)

Más de Christian Grobmeier

Más de Christian Grobmeier(6)

Último

Último(20)

Apps with Apache Cordova and Phonegap