Apache Cordova is a platform for building native 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 …etc) 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 web applications that are mobile friendly. This session illustrates how to use Apache Cordova with the combination of jQuery mobile in order to develop a native Android application and deploy on a real Android device. The demo application (“Memo” application) utilizes mobile native functions (Audio and Camera) using pure JavaScript.
2. About Me
• Ten years of experience in Java enterprise, portal, mobile
solutions.
• Apache Committer.
• Author of four books.
• DeveloperWorks Contributing author.
• Technical Speaker.
• Advisory Software Engineer in IBM.
3. Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Hello World Demo
Cordova APIs Overview
jQuery Mobile Integration
Memo Application Demo
6. Apache Cordova Introduction
Hybrid vs Native Application
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
Yes yes
Features
8. Apache Cordova Introduction
Challenges of the current mobile apps development:
Many platforms and
devices.
Different skills needed.
Different problem types.
For Android: Java skills needed.
For iOS: Objective-C (or SWIFT)
skills needed.
For Windows: C# skills needed.
Huge Development and Testing Effort to
have a single application on these platforms.
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. Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Hello World Demo
Cordova APIs Overview
jQuery Mobile Integration
Memo Application Demo
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
12. Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Hello World Demo
Cordova APIs Overview
jQuery Mobile Integration
Memo Application Demo
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. Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Hello World Demo
Cordova APIs Overview
jQuery Mobile Integration
Memo Application Demo
16. Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Hello World Demo
Cordova APIs Overview
jQuery Mobile Integration
Memo Application Demo
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. 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. 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. Cordova APIs Overview
Capture
An object allows you recording audio, image, and video
using the platform recording apps.
// capture callback
var captureSuccess = function(mediaFiles) {
// Do something with the captured Audio media files
};
var captureError = function(error) {
navigator.notification.alert('Error code: ' + error.code, null,
'Capture Error');
};
navigator.device.capture.captureAudio(captureSuccess,
captureError, {limit:2});
21. 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');
}
22. 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);
23. Cordova APIs Overview
Storage
Provides an access to the W3C Web Storage interface:
- Local Storage (window.localStorage).
- Session Storage (window.sessionStorage).
window.localStorage.setItem("key", "value");
var value = window.localStorage.getItem("key");
window.localStorage.removeItem("key");
window.localStorage.clear();
24. 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);
25. Cordova APIs Overview
Geolocation
Know your mobile location data (based on GPS sensor
or inferred from Network signal). It is based on the W3C
Geolocation API specification.
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + 'n' +
'Longitude: ' + position.coords.longitude + 'n');
};
function onError(error) {
alert('code: ' + error.code + 'n' +
'message: ' + error.message + 'n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);
26. Cordova APIs Overview
More APIs:
Events (In order to handle Apache Cordova life cycle
events).
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)
27. Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Hello World Demo
Cordova APIs Overview
jQuery Mobile Integration
Memo Application Demo
28. 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.
29. 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.
30. jQuery Mobile Integration
Windows Phone 8 Issues:
Trimmed header title.
Footer is not aligned to bottom.
Fixes:
Set ui-header and ui-title classes’
overflow to visible.
Hide System Tray using app config
(shell:SystemTray.isVisible = “False”).
31. jQuery Mobile Integration
In order to boost the performance of jQuery mobile with
Cordova, it is recommended to disable transition effects as
follows:
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none’;
32. Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Hello World Demo
Cordova APIs Overview
jQuery Mobile Integration
Memo Application Demo
34. 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>
Hello and Welcome everybody. I’m Hazem Saleh, an advisory engineer in IBM and an Apache Committer.
Today, I will talk about “Developing JavaScript Mobile Apps Using Apache Cordova”.
Before going into the details of this presentation.
I would like to introduce myself in more 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.
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.