Apps with Apache Cordova and Phonegap
•
11 gostaram•29,696 visualizações
PhoneGap is a framework for building mobile apps using HTML, CSS, and JavaScript. It allows developers to write native mobile applications using standard web technologies and wrap them to run on iOS, Android, BlackBerry and other platforms. PhoneGap was acquired by Adobe and is now used to package the open source Cordova framework. Cordova provides plugins that allow apps to access device capabilities like the camera, contacts, file system and more. Developers can create PhoneGap apps using an IDE or command line tools to package and deploy apps to app stores and mobile devices.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Apps with Apache Cordova and Phonegap
Semelhante a Apps with Apache Cordova and Phonegap (20)
Mais de Christian Grobmeier
Mais de Christian Grobmeier (6)
Último
Último (20)
Apps with Apache Cordova and Phonegap
- 2. Christian Grobmeier www.grobmeier.de @grobmeier ASF Hacker +VP Logging, Freelancer, Founder: www.timeandbill.de
- 4. PhoneGap > Company aquired by Adobe > Packages Cordova > Provides Build-Services
- 5. Cordova> Home of code > Community > Apache Software Foundation Apache
- 7. PLATFORMS? + BlackBerry + WebOS + Symbian + Bada + QT + Tizen + OS X + Windows
- 8. > Accelerometer > Camera > Compass > Contacts > File > Geolocation > Media > Network > Notifications > 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
- 12. cd lib/android/bin ./create ~/app de.app App
- 15. Apache RIPPLE
- 17. zepto.js / jQuery + Roadcrew.js + Custom.js 100% Performance
- 18. <html> <body> <div>Hey!</div> <!-- include your js --> <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
- 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!
- 27. Drawbacks?
- 33. Image Credits Oil 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)