Apps with Apache Cordova and Phonegap
11 likes29,703 views
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.
![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]);
};](https://image.slidesharecdn.com/2013-05-cordova-mobile-forum-130518030913-phpapp02/85/Apps-with-Apache-Cordova-and-Phonegap-9-320.jpg)
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)