Apache Cordova is a platform for building native mobile apps using common Web technologies (HTML, CSS and JavaScript). Apache Cordova offers a set of APIs that allow the mobile app developers to utilize mobile native functions such as (Audio, Camera, Contacts …etc) using JavaScript. jQuery mobile is one of the best mobile web application frameworks, which allows the web developers to develop neat mobile web applications. This session discusses why there is a need for Hybrid mobile development, the current challenges of mobile development, and how using Apache Cordova can help in overcoming many of these technical challenges. It also highlights the best practices of using Apache Cordova with jQuery mobile. Finally, it demonstrates a real Cordova mobile app for showing the audience the best practices of designing, developing, and deploying hybrid Android and iOS mobile apps.
2. #DevoxxMA @DevoxxMA
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,JavaLand, Devoxx …etc)
Advisory Software Engineer in IBM.
3. #DevoxxMA @DevoxxMA
Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
Memo Application Demo
Hello World Demo
Integration Tips with jQM and Ionic
General Performance Tips
6. #DevoxxMA @DevoxxMA
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
8. #DevoxxMA @DevoxxMA
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. #DevoxxMA @DevoxxMA
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. #DevoxxMA @DevoxxMA
Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
Memo Application Demo
Hello World Demo
Integration Tips with jQM and Ionic
General Performance Tips
11. #DevoxxMA @DevoxxMA
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. #DevoxxMA @DevoxxMA
Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
Memo Application Demo
Hello World Demo
Integration Tips with jQM and Ionic
General Performance Tips
13. #DevoxxMA @DevoxxMA
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. #DevoxxMA @DevoxxMA
Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
Memo Application Demo
Hello World Demo
Integration Tips with jQM and Ionic
General Performance Tips
16. #DevoxxMA @DevoxxMA
Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
Memo Application Demo
Hello World Demo
Integration Tips with jQM and Ionic
General Performance Tips
17. #DevoxxMA @DevoxxMA
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. #DevoxxMA @DevoxxMA
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. #DevoxxMA @DevoxxMA
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. #DevoxxMA @DevoxxMA
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. #DevoxxMA @DevoxxMA
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. #DevoxxMA @DevoxxMA
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. #DevoxxMA @DevoxxMA
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. #DevoxxMA @DevoxxMA
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. #DevoxxMA @DevoxxMA
Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
Memo Application Demo
Hello World Demo
Integration Tips with jQM and Ionic
General Performance Tips
26. #DevoxxMA @DevoxxMA
Integration Tips with jQM and Ionic
Ionic and jQuery Mobile are:
Two popular and powerful User Interface frameworks for building Mobile Web
applications.
Are based on HTML5, CSS3 and JavaScript.
Compatible with most of the mobile and tablet browsers.
Ionic has the following advantages:
• Powered by AngularJS which is a powerful MVVM framework for creating structured
JavaScript applications.
• Powered by command line tooling and UI templates.
27. #DevoxxMA @DevoxxMA
Integration Tips with jQM and Ionic
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:
Dojo mobile Sencha Touch Bootstrap
28. #DevoxxMA @DevoxxMA
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. #DevoxxMA @DevoxxMA
jQuery Mobile Integration
iOS 8 (and 9) 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. #DevoxxMA @DevoxxMA
jQuery Mobile Integration
iOS 9 Issues:
One of the possible workarounds:
Popups are suddenly closed after the first
opening time!
Use data-history="false” for the data-
role="popup” component
31. #DevoxxMA @DevoxxMA
jQuery Mobile Integration
iOS 9 Issues:
One of the possible workarounds:
Back buttons are broken due to UIWebView
bug in iOS 9:
https://openradar.appspot.com/22186109
if (device.platform === "iOS" &&
parseInt(device.version) === 9) {
$.mobile.hashListeningEnabled=false;
} /* when the device is ready */
32. #DevoxxMA @DevoxxMA
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';
33. #DevoxxMA @DevoxxMA
jQuery Mobile Integration
• Use cordova-jquery-npm module to speed up adding ready-made jQuery
mobile templates to your existing Cordova project. Available templates are:
• Multiple pages.
• Persistent Navigation bar for three pages.
• External Panel Template.
• Install it using npm as follows:
> npm install –g cordova-jquery
• All what you need to do is to run cordova-jquery command from your
project root and follow the template creation Wizard.
• cordova-jquery-npm module is an open source project that is available in:
• https://www.npmjs.com/package/cordova-jquery
34. #DevoxxMA @DevoxxMA
Ionic Integration
Use Native Scrolling instead of JavaScript scrolling for gaining the maximum
performance.
$ionicConfigProvider.scrolling.jsScrolling(false); (Enabling native
scrolling for all app views)
overflow-scroll=“true” (for a single ion-content)
35. #DevoxxMA @DevoxxMA
Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
Memo Application Demo
Hello World Demo
Integration Tips with jQM and Ionic
General Performance Tips
36. #DevoxxMA @DevoxxMA
General Performance Tips
Cache Application Data as much as possible to avoid the network access delay.
Possible ways to cache application data:
Web Storage (Local Storage), if data size is less than 5 MBs.
Database (IndexedDB / Web SQL), if data size is larger than 5 MBs.
File System.
Always cache static data, and define proper caching policies for dynamic data.
37. #DevoxxMA @DevoxxMA
General Performance Tips
Avoid the 300ms click event delay on mobile browsers:
Mobile browsers have to wait 300ms to determine if this is a click or a
double tap event.
Can make your user feel that your app is slow!
Possible Solutions:
If you do not use a specific framework that handles this delay, Use
FastClick:
https://github.com/ftlabs/fastclick
If you are using jQuery mobile, use “vClick” event:
https://api.jquerymobile.com/vclick/
If you are using Ionic, use “ngTouch” module:
https://docs.angularjs.org/api/ngTouch
38. #DevoxxMA @DevoxxMA
General Performance Tips
Minimize DOM Access and Insertions.
Do not do:
$("#myButton").on("click", someClickEventHandler);
$("#myButton").css("text-decoration", "underline");
$("#myButton").css("color", "blue");
$("#myButton").attr("href", "#");
Do not use JavaScript for layout creation.
Instead Do:
var myButton = $("#myButton”);
myButton.on("click", someClickEventHandler);
myButton.css("text-decoration", "underline");
myButton.css("color", "blue");
myButton.attr("href", "#");
39. #DevoxxMA @DevoxxMA
Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
Memo Application Demo
Hello World Demo
Integration Tips with jQM and Ionic
General Performance Tips
Make sure that mega app is running in an emulator before starting …
So, today, We will:
Have an introduction about Apache Cordova, we will know: What Apache Cordova is, The differences between mobile web vs Hybrid vs native mobile applications, the current challenges of today’s mobile development and how Apache Cordova can minimize these challenges.
We will know how to configure Apache Cordova.
We will see how to work with Cordova Command Line Interface in order to create and build a cordova project.
Then I will show you how to create and deploy an Apache Cordova application from scratch using CLI.
Then we will have an overview of Apache Cordova APIs.
And we will explore the jQuery mobile Integration tips with Apache Cordova.
Finally, I will show you a real application that supports three mobile platforms (iOS, Android and Windows Phone 8). This application utilizes the device’s audio and camera in order to create a memo utility.
So What is Apache Cordova is a set of APIs which allow accessing the device native functions using JavaScript. Apache Cordova is not only a set of APIs but it also a platform which allows creating mobile apps using common web technologies (HTML, CSS, JavaScript).
Device native function examples are:
Accessing the device audio to record and playback voice.
Capturing a photo using the device camera.
Searching and adding contacts to the device.
Accessing the device compass and file system.
Before going into the details of the current mobile apps development, it is important to realize the differences between mobile web apps, hybrid mobile apps, and native mobile apps. Mobile web apps:
Are mobile-friendly apps which are displayed correctly on the different resolutions of mobile devices and tablets.
Usually require you to be online in order to access it as they are not installed locally in your device.
Have limited access to the device native functions by utilizing the HTML 5 APIs such as Geolocation.
For Hybrid and native mobile apps:
They have the same physical format and they can be uploaded to the app store.
However, they uses two different technologies. For Hybrid mobile apps, they uses HTML, CSS and JavaScript while Native mobile apps use the native programming language of the mobile platform.
Hybrid mobile apps can work on the different mobile platforms while Native mobile apps work only on the platform they are developed for.
…
We have the following challenges in the current mobile application development:
We have many platforms. Every platform has many devices. This means that testing your application cross these devices is a real overhead.
In order to develop an application cross the different mobile platforms, we need to have different skills in the team. For Android, we need the development team to know Java, for …
Because every platform has its own philosophy, we can find different problem types on every mobile platform. For example, sending SMS in Android (and continue the example). Handling these problem types using different programming languages is not an easy task.
All of this leads to a huge development and testing effort to have a single application idea developed on these mobile platforms.
Apache Cordova could meet these challenges by providing a single programming language to develop cross-mobile platform apps which is JavaScript. This means that you will not have to have different skills in your development team and will have a neat and centralized way to handle the different problem type of every platform.
So, today, We will:
Have an introduction about Apache Cordova, we will know: What Apache Cordova is, The differences between mobile web vs Hybrid vs native mobile applications, the current challenges of today’s mobile development and how Apache Cordova can minimize these challenges.
We will know how to configure Apache Cordova.
We will see how to work with Cordova Command Line Interface in order to create and build a cordova project.
Then I will show you how to create and deploy an Apache Cordova application from scratch using CLI.
Then we will have an overview of Apache Cordova APIs.
And we will explore the jQuery mobile Integration tips with Apache Cordova.
Finally, I will show you a real application that supports three mobile platforms (iOS, Android and Windows Phone 8). This application utilizes the device’s audio and camera in order to create a memo utility.
So, today, We will:
Have an introduction about Apache Cordova, we will know: What Apache Cordova is, The differences between mobile web vs Hybrid vs native mobile applications, the current challenges of today’s mobile development and how Apache Cordova can minimize these challenges.
We will know how to configure Apache Cordova.
We will see how to work with Cordova Command Line Interface in order to create and build a cordova project.
Then I will show you how to create and deploy an Apache Cordova application from scratch using CLI.
Then we will have an overview of Apache Cordova APIs.
And we will explore the jQuery mobile Integration tips with Apache Cordova.
Finally, I will show you a real application that supports three mobile platforms (iOS, Android and Windows Phone 8). This application utilizes the device’s audio and camera in order to create a memo utility.
So, today, We will:
Have an introduction about Apache Cordova, we will know: What Apache Cordova is, The differences between mobile web vs Hybrid vs native mobile applications, the current challenges of today’s mobile development and how Apache Cordova can minimize these challenges.
We will know how to configure Apache Cordova.
We will see how to work with Cordova Command Line Interface in order to create and build a cordova project.
Then I will show you how to create and deploy an Apache Cordova application from scratch using CLI.
Then we will have an overview of Apache Cordova APIs.
And we will explore the jQuery mobile Integration tips with Apache Cordova.
Finally, I will show you a real application that supports three mobile platforms (iOS, Android and Windows Phone 8). This application utilizes the device’s audio and camera in order to create a memo utility.
Start from minute 15 and finish by minute 25 (10 minutes)
Explain an app in Android/iOS (and Do not forget to include the structure details)…
So, today, We will:
Have an introduction about Apache Cordova, we will know: What Apache Cordova is, The differences between mobile web vs Hybrid vs native mobile applications, the current challenges of today’s mobile development and how Apache Cordova can minimize these challenges.
We will know how to configure Apache Cordova.
We will see how to work with Cordova Command Line Interface in order to create and build a cordova project.
Then I will show you how to create and deploy an Apache Cordova application from scratch using CLI.
Then we will have an overview of Apache Cordova APIs.
And we will explore the jQuery mobile Integration tips with Apache Cordova.
Finally, I will show you a real application that supports three mobile platforms (iOS, Android and Windows Phone 8). This application utilizes the device’s audio and camera in order to create a memo utility.
IndexedDB is a sort of NoSQL databases …
Add more APIs here …
So, today, We will:
Have an introduction about Apache Cordova, we will know: What Apache Cordova is, The differences between mobile web vs Hybrid vs native mobile applications, the current challenges of today’s mobile development and how Apache Cordova can minimize these challenges.
We will know how to configure Apache Cordova.
We will see how to work with Cordova Command Line Interface in order to create and build a cordova project.
Then I will show you how to create and deploy an Apache Cordova application from scratch using CLI.
Then we will have an overview of Apache Cordova APIs.
And we will explore the jQuery mobile Integration tips with Apache Cordova.
Finally, I will show you a real application that supports three mobile platforms (iOS, Android and Windows Phone 8). This application utilizes the device’s audio and camera in order to create a memo utility.
Revise …
You should be here at minute 40.
So, today, We will:
Have an introduction about Apache Cordova, we will know: What Apache Cordova is, The differences between mobile web vs Hybrid vs native mobile applications, the current challenges of today’s mobile development and how Apache Cordova can minimize these challenges.
We will know how to configure Apache Cordova.
We will see how to work with Cordova Command Line Interface in order to create and build a cordova project.
Then I will show you how to create and deploy an Apache Cordova application from scratch using CLI.
Then we will have an overview of Apache Cordova APIs.
And we will explore the jQuery mobile Integration tips with Apache Cordova.
Finally, I will show you a real application that supports three mobile platforms (iOS, Android and Windows Phone 8). This application utilizes the device’s audio and camera in order to create a memo utility.
So, today, We will:
Have an introduction about Apache Cordova, we will know: What Apache Cordova is, The differences between mobile web vs Hybrid vs native mobile applications, the current challenges of today’s mobile development and how Apache Cordova can minimize these challenges.
We will know how to configure Apache Cordova.
We will see how to work with Cordova Command Line Interface in order to create and build a cordova project.
Then I will show you how to create and deploy an Apache Cordova application from scratch using CLI.
Then we will have an overview of Apache Cordova APIs.
And we will explore the jQuery mobile Integration tips with Apache Cordova.
Finally, I will show you a real application that supports three mobile platforms (iOS, Android and Windows Phone 8). This application utilizes the device’s audio and camera in order to create a memo utility.