Build Mobile Apps with PhoneGap
•
11 gefällt mir•29,696 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.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Build Mobile Apps with PhoneGap
Ähnlich wie Build Mobile Apps with PhoneGap (20)
Mehr von Christian Grobmeier
Mehr von Christian Grobmeier (6)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Build Mobile Apps with 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)