Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014

Developing Native JavaScript Mobile Apps
Using Apache Cordova
Hazem Saleh

About Me
•
Ten years of experience in Java enterprise, portal, mobile solutions.
•
Apache Committer and an open source fan.
•
Author of three books.
•
DeveloperWorks Contributing author.
•
Technical Speaker.
•
Advisory Software Engineer in IBM.

Agenda
Apache Cordova Introduction
Configurations
Cordova Command Line
Cordova APIs Overview
jQuery Mobile Integration
Memo Application Demo

Platform
HTML CSS
JS

Device native functions examples:

Hybrid Application (Cordova) Native Application
Can be uploaded to App Store Yes Yes
Technology HTML + CSS + JavaScript Native platform Programming Language
Cross-mobiles platform support Yes No
Development Speed Faster Slower
Uses Device Native Features Yes Yes
Hybrid vs Native Application

Cordova is supported on the following platforms:

Challenges of the current mobile 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 skills needed.
For Windows: .Net skills needed.

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.

Configuration
Prerequisites:
Node JS.
Target SDK.
From command line:
> sudo npm install -g cordova
To know the installed version of Cordova:
> cordova -v

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>>

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

An object that holds information about the device hardware and software.
Device
Device information is mainly about:
● Device name.
● Device Platform.
● Device Platform version.
● Device model.

Camera
An object that provides an access to the device camera.
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);
}

Capture
An object allows you recording audio, image, and video using audio
recording, camera and video recording applications
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:1});

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');
}

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);

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).

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);

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);

More APIs:
Accelerometer (Capture device motion)
Compass (Get the device direction)
Connection (Retrieve 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 (In order to handle Apache Cordova life cycle events).

jQuery Mobile is one of the most popular User Interface
framework for building Mobile Web applications.
jQuery Mobile uses HTML5 + CSS3 for layout pages with
minimal scripting.
It is compatible with most of the mobile and tablet
browsers.

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 application.

In order to boost the performance of jQuery mobile with
Cordova, it is recommended to disable transition effects
as follows (jQuery mobile 1.4):
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';

Memo Application
Live projects on App stores:
http://apps.opera.com/en_eg/memos_free_version.html
http://www.windowsphone.com/en-us/store/app/memo/a43c6ce4-029b-49b6-b7f9-d94778ab3597
GitHub Android and WP8 projects:
http://github.com/hazems/memo
https://github.com/hazems/memo-wp8

When: Tuesday
Where: McCourt room
What: Race to Apache Cordova Contribution & Hybrid Mobile App Challenge
Who: Everyone is invited. 8+ Apache Cordova Committers will be in the room answering
questions. Come stump the experts!
Why: See what it’s like to participate in the Apache Cordova community.
Cordova Hackathon
Sponsored by IBM and Redhat

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>

Twitter: @hazems
Blog: http://www.technicaladvices.com
Email: hazems@apache.org

Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014

Related slideshows

More Related Content

Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014