Apache Cordova: Overview and Introduction

OVERVIEW AND
INTRODUCTION
Gabriele Falasca - Università degli studi dell’Aquila

HELLO WORLD!!!
I’M GABRIELE FALASCA, STUDENT AT UNIVERSITÀ DEGLI
STUDI DELL’AQUILA, AND MOBILE APPLICATION
DEVELOPER FREELANCE

ROADMAP
INTRO
HOW TO INSTALL
CORDOVA CLI
EVENTS
APIs
PLUGIN
RIPPLE EMULATOR

SUPPORTED PLATFORMS
NOT ONLY ANDROID IOS AND WP8!!
● WINDOWS 8 - 8.1
● FIREFOX OS
● BLACKBERRY 10
● FIREOS
● UBUNTU PHONE
● TIZEN
AND SO ON...

HOW TO INSTALL
FIRST, INSTALL NPM, THEN OPEN YOUR COMMAND-LINE AND
TYPE
$ sudo npm install -g cordova
THEN TYPE YOUR SUDO PASSWORD AND PRESS ENTER
MORE INFORMATION ABOUT NPM HERE: https://www.npmjs.org/

HOW TO INSTALL
THEN, YOU HAVE TO ADD ANDROID SDK PATH ON ENVIRONMENT VARIABLES
$ export ANDROID_HOME = /yourAndroidSDKdirectory/sdk
$ export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
DOWNLOAD ANDROID SDK FROM: https://developer.android.com/sdk/

CORDOVA CLI
CREATE OUR FIRST APPLICATION
$ cordova create test com.gabrycaos.test Test
FIRST ARGUMENT “test” IS THE PROJECT DIRECTORY NAME
SECOND ARGUMENT “com.gabrycaos.test” IS THE APPLICATION PACKAGE NAME
THIRD ARGUMENT “Test” IS THE NAME OF THE APPLICATION

PROJECT STRUCTURE
DIRECTORIES:
hooks/ : it may contains the scripts used to customize cordova commands
platforms/ : it contains the projects directories of a specific platform
plugins/ : it contains the packages of the plugin
www/ : it contains the source code of the web applications
config.xml : is a global configuration file

CONFIG.XML
IS A GLOBAL CONFIGURATION FILE
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.pippo.test" version="0.0.1" xmlns="http://www.w3.
org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Test</name>
<description>
Simple test app created for the Apache Cordova talk
</description>
<author email="gabrycaos@yahoo.it" href="http://gabrielefalasca.com">
Gabriele Falasca
</author>
<content src="index.html" />
<access origin="*" />
</widget>

CONFIG.XML
OTHER CONFIGURATIONS
<preference name=”FullScreen” value=”true”>
<platform name=”android”>
<preference name=”Orientation” value=”landscape”>
</platform>

ADD AND REMOVE PLATFORMS
$ cordova platform add android
$ cordova platform remove android

BUILD AND RUN THE APP
$ cordova build android
$ cordova run android
FIRST COMMAND “cordova build” COMPILES THE SOURCE CODE
SECOND COMMAND “cordova run” COMPILES THE CODE AND RUN IT ON
EMULATOR OR DEVICE

ROADMAP
INTRO
HOW TO INSTALL
CORDOVA CLI
EVENTS
APIs
PLUGINS
RIPPLE EMULATOR

EVENTS
CORDOVA PROVIDES A RICH COLLECTION OF EVENTS FOR BETTER ACCESS TO
DEVICE CAPABILITIES

EVENTS
deviceready
pause
resume
backbutton
menubutton
searchbutton
startcallbutton
endcallbutton
volumedownbutton
volumeupbutton
EVENTS CAN BE LISTENED AND CAPTURED TROUGH W3C SPEC
document.addEventListener(eventName, callBack)

APIs
CORDOVA PROVIDES A LARGE SET OF APIs FOR ACCESSING DEVICE FEATURES

API: CAMERA

CAMERA
$ navigator.camera.getPicture(success, error, [options])
success: IS A CALLBACK WITH A imageURI PARAMETER OR imageData
PARAMETER (base64 encoding of image data);
error: IS A CALLBACK FIRED ON ERROR EVENT, IT PROVIDES AN ERROR
MESSAGE
options: OPTIONAL PARAMETERS TO CUSTOMIZE CAMERA SETTINGS
(ex. quality, destinationType, targetWidth, targetHeight, ecc…)

CAMERA
AN EXAMPLE
var options = {quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: pictureSource.PHOTOLIBRARY
});
navigator.camera.getPicture(success, error, options);
function success(imageURI) {
var element = $(“#block”);
element.src(imageURI);
}
function error(message) {
console.log(message);
}

API: CONTACTS

CREATE CONTACT
navigator.contacts.create(properties)
properties: IS A MAP OF PROPERTIES OF THE CONTACT OBJECT, PROPERTIES
CAN BE:
● id: UNIQUE IDENTIFIER OF THE CONTACT
● displayName: NAME OF THE CONTACT
● name: AN OBJECT THAT CONTAINS INFORMATION OF THE
PERSON
● phoneNumbers: AN ARRAY WITH ALL PHONE NUMBERS OF
THE CONTACT
● and so on...

CREATE CONTACT
AN EXAMPLE
var contact = navigator.contacts.create({
"displayName": “Pablo“
});
var name = new ContactName();
name.firsName = “Gabriele“;
name.lastName = “Falasca“;
contact.name = name;
contact.birthday = new Date(“19 May 1989");
contact.save(success,error);
function success(contact) {
alert(“Contact saved!”);
};
function error(error) {
console.log("Error = " + error.code);
};

FIND CONTACT
navigator.contacts.find(fields, success, error, options)
● fields: ARE THE PARAMETERS OF THE CONTACT WILL BE RETURNED
TO success FUNCTION
● success: SUCCESS CALLBACK
● error: ERROR CALLBACK
● option: LIST OF SETTING FOR FILTER THE CONTACTS

FIND CONTACT
AN EXAMPLE
function onSuccess(contacts) {
alert('Found ' + contacts.length + ' contacts.');
};
function onError(contactError) {
alert('Error!');
};
// find all contacts with 'Gabriele' in any name field
var options = new ContactFindOptions();
options.filter="Gabriele";
options.multiple=true;
var fields = ["displayName", "name"];
navigator.contacts.find(fields, onSuccess, onError, options);

API: GEOLOCATION

GET USER POSITION
navigator.geolocation.getCurrentPosition(success, error, [options])
success: IS A CALLBACK WITH A Position OBJECT AS A PARAMETER
error: IS A CALLBACK FIRED ON ERROR EVENT, IT PROVIDES A PositionError
OBJECT AS A PARAMETER
options: OPTIONAL PARAMETERS TO CUSTOMIZE SETTINGS

GET USER POSITION
AN EXAMPLE
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + 'n' +
'Longitude: ' + position.coords.longitude + 'n' +
'Altitude: ' + position.coords.altitude + 'n' +
'Accuracy: ' + position.coords.accuracy + 'n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + 'n' +
'Speed: ' + position.coords.speed + 'n' +);
};
// onError Callback receives a PositionError object
function onError(error) {
alert('code: ' + error.code + 'n' +
'message: ' + error.message + 'n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);

WATCH USER POSITION
SIMILARLY AT LAST EXAMPLE WE CAN WATCH THE USER POSITION WITH THE METHOD wathPosition OF
THE navigator.geolocation OBJECT. IN THIS CASE WE HAVE TO PASS A timeOut ARGUMENT AT THE
OPTIONS OBJECT.
navigator.geolocation.watchPosition(success, error, [options])

PLUGINS

PLUGINS
THERE ARE TWO SIMPLE WAY TO ADD PLUGIN AT OUR CORDOVA APP:
FOR CORDOVA BUILT-IN PLUGINS:
cordova plugin add <plugin package name>
FOR THIRD PARTIES PLUGINS:
cordova plugin add <url of plugin repository>

PLUGINS
REMOVING PLUGINS:
cordova plugin rm <plugin package name>
FOR MORE INFORMATION ABOUT CORDOVA PLUGINS VISIT http://plugins.cordova.io/

PLUGINS
EXAMPLES
INSTALLING A CORDOVA BUILT-IN PLUGIN (InAppBrowser):
cordova plugin add org.apache.cordova.inappbrowser
FOR THIRD PARTIES PLUGINS (PushPlugin) * :
cordova plugin add https://github.com/phonegap-build/PushPlugin.git
* yes, Cordova supports Phonegap plugins

RIPPLE EMULATOR
http://ripple.incubator.apache.org/

RIPPLE EMULATOR
WHAT IS?
RIPPLE IS A WEB-BASED MOBILE SIMULATOR, IDEAL FOR RAPID DEVELOPMENT
OF MOBILE APPLICATION DEVELOPED WITH WEB BASED FRAMEWORK, SUCH
APACHE CORDOVA

HOW TO INSTALL
OPEN YOUR COMMAND LINE AND TYPE
$ sudo npm install -g ripple-emulator
THEN TYPE YOUR PASSWORD AND PRESS ENTER

HOW TO USE
FROM COMMAND-LINE GO IN YOUR PROJECT DIRECTORY AND TYPE:
$ ripple emulate --disable-web-security
ARGUMENT --disable-web-security IS USED FOR START YOUR
BROWSER WITH DISABLED CORS
(IT WORKS IN CHROME, I’M NOT SURE IN FIREFOX AND OTHER BROWSERS)

RIPPLE INTERFACE
WE’LL SEE THIS ARGUMENT DIRECTLY WITH THE EMULATOR! :)

MOST FAMOUS BRANDS USING
CORDOVA

QUESTIONS???

THANKS A LOT!!!
facebook.com/gabrycaos
plus.google.com/+GabrieleFalasca1989
it.linkedin.com/in/falascagabriele
(SOON) http://gabrielefalasca.com
gabrycaos@yahoo.it

Apache Cordova: Overview and Introduction

More Related Content

What's hot

Viewers also liked

Similar to Apache Cordova: Overview and Introduction

Recently uploaded

Apache Cordova: Overview and Introduction