Downloaded 15 times
![More?
1. Create a JavaScript function
2. Develop a native plugin
extends CordovaPlugin
window.echo = function(str, callback) {
cordova.exec(callback, function(err) {
callback('Nothing to echo.');
}, "Echo", "echo", [str]);
};](https://image.slidesharecdn.com/2014-10-cordova-webcamp-zagreb-141006102257-conversion-gate01/75/Go-Mobile-with-Apache-Cordova-Zagreb-2014-7-2048.jpg)
Uploaded byChristian Grobmeier
Go Mobile with Apache Cordova, Zagreb 2014
The document discusses building mobile apps using PhoneGap or Apache Cordova. It describes how to create apps that can be deployed across multiple platforms like Android, iOS, BlackBerry and others. It covers using HTML, CSS and JavaScript to build the app interface and PhoneGap plugins to access device capabilities like the camera, geolocation and contacts. It also provides examples of integrating plugins and deploying the built app.
More Related Content
Similar to Go Mobile with Apache Cordova, Zagreb 2014
![[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova](https://cdn.slidesharecdn.com/ss_thumbnails/javascriptmoibleappsdevelopment-141106091920-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
Go Mobile with Apache Cordova, Zagreb 2014
- 1. Go Mobile! ! with
- 2. Christian Grobmeier www.grobmeier.de @grobmeier Freelancer and Entrepreneur Wears his own shirts Writes Books Tracks time Hires People!
- 3.
- 4. HTML5 JavaScript CSS Plugins Webview
- 5. PLATFORMS? + BlackBerry + WebOS + Symbian + Bada + QT + Tizen + OS X + Windows
- 6. Plugins Accelerometer Camera Compass Contacts File Geolocation Media Network Notifications Storage
- 7. More? 1. Createa JavaScript function 2. Develop a native plugin extends CordovaPlugin window.echo = function(str, callback) { cordova.exec(callback, function(err) { callback('Nothing to echo.'); }, "Echo", "echo", [str]); };
- 8.
- 9. Editor -SDK onbuild path
- 10. cordova Starting fromscratch create places com.opendi.places Places cordova platform add android cordova build android cordova emulate android
- 12. Testing in Chrome $> cordova serve ! Static file server running on port 8000 (i.e. http://localhost:8000) CTRL + C to shut down
- 14.
- 15. FRIENDS 4 EVER? Roadcrew.js
- 16. Your Code Plugins Webview
- 17. <html> <body> <divid="map"></div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/mapbox-2.1.2.js"></script> <script type="text/javascript" src="js/app.js"></script> </body> </html> Single Page Apps
- 18. Single Page Apps2:30 <body> <div id=“page1“> <a href=“#page2“>... </div> <div id=“page2“> <a href=“#page3“>... </div> <div id=“page3“> <a href=“#page1“>... </div> </body> 2:30 2:30 with Roadcrew.js
- 19. Anatomy of a ! Click
- 20. <body> <div id="p1" class="start page"> <button id="refresh"> Refresh </button> <ul id="list"></ul> </div> </body> 2:30 Refresh
- 21. var app ={ initialize: function() { document.addEventListener( 'deviceready', this.onDeviceReady, false); }, onDeviceReady: function() { // Your Code } }; app.initialize();
- 22. 2:30 In onDeviceReady Refresh $('#refresh').click( function() { app.refresh(); }); Consider Touch Events!
- 23. 2:30 Refresh varapp = { refresh: function() { $.get("data.json", function(d) { $("#list").html(d); }); } } Ripple Wave ... Still JS Beware: Caching!
- 24. Camera cordova pluginadd org.apache.cordova.camera
- 25. var options ={ Camera 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);
- 26. cordova plugin addorg.apache.cordova.geolocation navigator.geolocation.getCurrentPosition( function(pos) { view.html( pos.coords.latitude + ',' + pos.coords.longitude); }, function (error) { console.log(error.message); }); Geolocation Ey! That’s HTML5!!
- 27.
- 28. Icons <platform name="android"> <icon src="res/android/ldpi.png" density="ldpi" /> <icon src="res/android/mdpi.png" density="mdpi" /> <icon src="res/android/hdpi.png" density="hdpi" /> <icon src="res/android/xhdpi.png" density="xhdpi" /> </platform> config.xml:
- 29. $> ant reSlHeaIPs!e xcode
- 30. SHIP! build. phonegap. com Service by Adobe
- 31.
- 32. Write once, debugeverywhere. ! A billion browsers.
- 33.
- 34. SHIP! Design ityourself. ! It’s just a container.
- 35. JavaScript. ! Isit hard?
- 36. Building can behard.
- 37. Thanks! :-) ChristianGrobmeier ! www.grobmeier.de @grobmeier
- 38. 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)