Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Developing JavaScript
Mobile Apps Using
Apache Cordova
Hazem Saleh
About me
experience
More than ten years of experience in Java
enterprise and mobile solutions.
Apache Committer.
Author of...
Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
Memo Application Demo
Hello W...
Apache Cordova Introduction
Platform
HTML CSS
JS
Apache Cordova Introduction
Device native functions examples:
Apache Cordova Introduction
Hybrid Application
(Cordova)
Native Application
Can be uploaded to App
Store
Yes yes
Technolog...
Apache Cordova Introduction
Cordova is supported on the following platforms:
Apache Cordova Introduction
Challenges of the current mobile apps development:
Many platforms and
devices.
Different skill...
Apache Cordova Introduction
Who can use Cordova?
If you are a web developer and wants to develop a mobile
application that...
Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
Memo Application Demo
Hello W...
Configuration
1 2 3
Prerequisites:
Node JS.
Target SDK.
From command line:
> sudo npm install -g cordova
To know the
insta...
Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
Memo Application Demo
Hello W...
Cordova Command Line
To create an application:
> cordova create <<app_dir>> <<project_id>> <<app_title>>
To add a platform...
Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
Memo Application Demo
Hello W...
HELLO WOLRLD DEMO
Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
Memo Application Demo
Hello W...
Cordova APIs Overview
Native device functions are represented as plugins that can be
added and removed using the command l...
Cordova APIs Overview
Device
An object that holds information about the device
hardware and software.
Device information i...
Cordova APIs Overview
Camera
An object that provides an access to the device camera.
It can be used for:
 Capturing a pho...
Cordova APIs Overview
Media
An object that allows recording and playing back audio
files on the device.
var my_media = new...
Cordova APIs Overview
Notification
An object that displays visual, audible, and tactile
notification.
// Show a native loo...
Cordova APIs Overview
Storage
Provides an access to the W3C Web Storage interface:
window.localStorage.setItem("key", "val...
Cordova APIs Overview
Storage
Provides an access to the device Web SQL Database
(Full featured database). Cordova supports...
Cordova APIs Overview
Accelerometer (Capture device motion)
Compass (Get the device direction)
Connection (Get the device ...
Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
Memo Application Demo
Hello W...
jQuery Mobile Integration
jQuery Mobile is:
One of the most popular User Interface framework for building Mobile
Web appli...
jQuery Mobile Integration
Cordova does not restrict using any specific JavaScript library but using
a JavaScript library w...
jQuery Mobile Integration
Windows Phone 8 Issues:
Fixes:
Trimmed header title.
Footer is not aligned to bottom.
Set ui-hea...
jQuery Mobile Integration
iOS 7 (and 8) Issues:
One of the possible
workarounds:
Collision between jQM header title
and iO...
jQuery Mobile Integration
In order to boost the performance of jQuery mobile with
Cordova, it is recommended to disable tr...
Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
Memo Application Demo
Hello W...
GitHub URL:
https://github.com/hazems/cordova-mega-app
MEMO APPLICATION
JavaScript Quiz
<script>
var number = 50;
var obj = {
number: 60,
getNum: function () {
var number = 70;
return this.numbe...
Questions
Twitter: @hazems
Blog: http://www.technicaladvices.com
Email: hazems@apache.org
Upcoming SlideShare
Loading in …5
×

[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova

2,371 views

Published on

Apache Cordova is a platform for building mobile applications using common Web technologies (HTML, CSS and JavaScript). Apache Cordova offers a set of APIs that allow the mobile application developers to access mobile native functions such as (Audio, Camera, File, Battery, Contacts ...) using JavaScript. Although there are many JavaScript mobile application frameworks, jQuery mobile is one of the best mobile web application frameworks which allows the web developers to develop neat mobile web apps. This session illustrates how to use Apache Cordova with the combination of jQuery mobile in order to design, develop, and deploy a complete hybrid Android (and iOS) app. The demo app utilizes the device native functions (Audio and Camera) using pure JavaScript.

Published in: Mobile
  • Be the first to comment

[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova

  1. 1. Developing JavaScript Mobile Apps Using Apache Cordova Hazem Saleh
  2. 2. About me experience More than ten years of experience in Java enterprise and mobile solutions. Apache Committer. Author of four technical books. DeveloperWorks Contributing author. Technical Speaker (JavaOne, ApacheCon, Geecon …etc) Advisory Software Engineer in IBM.
  3. 3. Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview Memo Application Demo Hello World Demo jQuery Mobile Integration Tips
  4. 4. Apache Cordova Introduction Platform HTML CSS JS
  5. 5. Apache Cordova Introduction Device native functions examples:
  6. 6. Apache Cordova Introduction Hybrid Application (Cordova) Native Application Can be uploaded to App Store Yes yes Technology HTML + CSS + JavaScript Native platform Programming Language Cross-mobiles support Yes No Development Speed Faster Slower Uses Device Native Features Yes yes Hybrid vs Native Application
  7. 7. Apache Cordova Introduction Cordova is supported on the following platforms:
  8. 8. Apache Cordova Introduction Challenges of the current mobile apps development: Many platforms and devices. Different skills needed. Different problem types. Huge Development and Testing Effort to have a single application on these platforms. For Android: Java skills needed. For iOS: Objective-C (or SWIFT) skills needed. For Windows: C# skills needed.
  9. 9. Apache Cordova Introduction Who can use Cordova? If you are a web developer and wants to develop a mobile application that can be deployed on the different app store portals. If you are a mobile native developer and wants to develop a single application on the different mobile platforms without having to re-implement the application code on every platform.
  10. 10. Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview Memo Application Demo Hello World Demo jQuery Mobile Integration Tips
  11. 11. Configuration 1 2 3 Prerequisites: Node JS. Target SDK. From command line: > sudo npm install -g cordova To know the installed version of Cordova: > cordova -v GIT
  12. 12. Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview Memo Application Demo Hello World Demo jQuery Mobile Integration Tips
  13. 13. Cordova Command Line To create an application: > cordova create <<app_dir>> <<project_id>> <<app_title>> To add a platform (from the app folder): > cordova platform add <<platform_name>> To build Cordova project: > cordova build To deploy the app on emulator: > cordova emulate <<platform_name>>
  14. 14. Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview Memo Application Demo Hello World Demo jQuery Mobile Integration Tips
  15. 15. HELLO WOLRLD DEMO
  16. 16. Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview Memo Application Demo Hello World Demo jQuery Mobile Integration Tips
  17. 17. Cordova APIs Overview Native device functions are represented as plugins that can be added and removed using the command line. Adding camera plugin example: > cordova plugin add https://git-wip- us.apache.org/repos/asf/cordova-plugin-camera.git Removing Camera plugin example: > cordova plugin rm org.apache.cordova.core.camera
  18. 18. Cordova APIs Overview Device An object that holds information about the device hardware and software. Device information is mainly about:  Device name.  Device Platform.  Device Platform version.  Device model. “deviceready” event is an indicator that Cordova finishes loading and Cordova APIs are ready to be called.
  19. 19. Cordova APIs Overview Camera An object that provides an access to the device camera. It can be used for:  Capturing a photo using the device’s Camera.  Picking a photo from the device’s gallery. navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL }); function onSuccess(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; } function onFail(message) { alert('Failed because: ' + message); }
  20. 20. Cordova APIs Overview Media An object that allows recording and playing back audio files on the device. var my_media = new Media("someFile.mp3", onSuccess, onError); my_media.play(); function onSuccess() { console.log("playAudio():Audio Success"); } function onError(error) { alert('code: ' + error.code + 'n' + 'message: ' + error.message + 'n'); }
  21. 21. Cordova APIs Overview Notification An object that displays visual, audible, and tactile notification. // Show a native looking alert navigator.notification.alert( 'Cordova is great!', // message 'Cordova', // title 'Ok' // buttonName ); // Beep four times navigator.notification.beep(4); // Vibrate for 3 seconds navigator.notification.vibrate(3000);
  22. 22. Cordova APIs Overview Storage Provides an access to the W3C Web Storage interface: window.localStorage.setItem("key", "value"); var value = window.localStorage.getItem("key"); window.localStorage.removeItem("key"); window.localStorage.clear(); - Local Storage (window.localStorage). - Session Storage (window.sessionStorage).
  23. 23. Cordova APIs Overview Storage Provides an access to the device Web SQL Database (Full featured database). Cordova supports IndexedDB for WP8 and Blackberry 10. function populateDB(tx) { tx.executeSql('DROP TABLE IF EXISTS DEMO'); tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)'); tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")'); tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")'); } function errorCB(err) { alert("Error processing SQL: " + err.code); } function successCB() { alert("success!"); } var db = window.openDatabase("Demos", "1.0", "Cordova Demo", 200000); db.transaction(populateDB, errorCB, successCB);
  24. 24. Cordova APIs Overview Accelerometer (Capture device motion) Compass (Get the device direction) Connection (Get the device connection) Contacts (Access to device contacts database). File (Access to device File system based on W3C File API) Globalization (Access to user locale information) Events (Handle Apache Cordova life cycle events). Geolocation (Know your mobile location. API is W3C based) More APIs:
  25. 25. Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview Memo Application Demo Hello World Demo jQuery Mobile Integration Tips
  26. 26. jQuery Mobile Integration jQuery Mobile is: One of the most popular User Interface framework for building Mobile Web applications. Uses HTML5 + CSS3 for layout pages with minimal scripting. Compatible with most of the mobile and tablet browsers.
  27. 27. jQuery Mobile Integration Cordova does not restrict using any specific JavaScript library but using a JavaScript library will save you a lot of time creating your own widgets from scratch. jQuery Mobile is used in the demo application with Cordova to create the Memo utility. There are also many cool frameworks you can use in your Cordova mobile apps such as: Angular JS + lonic. Dojo mobile Sencha Touch.
  28. 28. jQuery Mobile Integration Windows Phone 8 Issues: Fixes: Trimmed header title. Footer is not aligned to bottom. Set ui-header and ui-title classes’ overflow to visible. Hide System Tray using app config (shell:SystemTray.isVisible = “False”).
  29. 29. jQuery Mobile Integration iOS 7 (and 8) Issues: One of the possible workarounds: Collision between jQM header title and iOS device status bar. Hide the status bar by adding and setting two properties in the app's .plist file: 1. The Status bar is initially hidden property set to the YES value. 2. The View controller-based status bar appearance property set to the NO value
  30. 30. jQuery Mobile Integration In order to boost the performance of jQuery mobile with Cordova, it is recommended to disable transition effects as follows: $.mobile.defaultDialogTransition = 'none’; $.mobile.defaultPageTransition = 'none';
  31. 31. Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview Memo Application Demo Hello World Demo jQuery Mobile Integration Tips
  32. 32. GitHub URL: https://github.com/hazems/cordova-mega-app MEMO APPLICATION
  33. 33. JavaScript Quiz <script> var number = 50; var obj = { number: 60, getNum: function () { var number = 70; return this.number; } }; alert(obj.getNum()); alert(obj.getNum.call()); alert(obj.getNum.call({number:20})); </script>
  34. 34. Questions Twitter: @hazems Blog: http://www.technicaladvices.com Email: hazems@apache.org

×