apache cordova: overview and introduction

Gabriele Falasca - Università degli studi dell’Aquila

OVERVIEW AND INTRODUCTION

Gabriele Falasca - Università degli studi dell’Aquila

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

HELLO WORLD!!!

Gabriele Falasca - Università degli studi dell’Aquila

ROADMAPINTRO

HOW TO INSTALL

CORDOVA CLI

EVENTS

APIs

PLUGIN

RIPPLE EMULATOR

Gabriele Falasca - Università degli studi dell’Aquila

Gabriele Falasca - Università degli studi dell’Aquila

SUPPORTED PLATFORMS

NOT ONLY ANDROID IOS AND WP8!!

● WINDOWS 8 - 8.1

● FIREFOX OS

● BLACKBERRY 10

● FIREOS

● UBUNTU PHONE

● TIZEN

AND SO ON...

Gabriele Falasca - Università degli studi dell’Aquila

ROADMAPINTRO

HOW TO INSTALL

CORDOVA CLI

EVENTS

APIs

PLUGIN

RIPPLE EMULATOR

Gabriele Falasca - Università degli studi dell’Aquila

HOW TO INSTALL

$ sudo npm install -g cordova

FIRST, INSTALL NPM, THEN OPEN YOUR COMMAND-LINE AND TYPE

THEN TYPE YOUR SUDO PASSWORD AND PRESS ENTER

MORE INFORMATION ABOUT NPM HERE: https://www.npmjs.org/

Gabriele Falasca - Università degli studi dell’Aquila

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/

Gabriele Falasca - Università degli studi dell’Aquila

ROADMAPINTRO

HOW TO INSTALL

CORDOVA CLI

EVENTS

APIs

PLUGIN

RIPPLE EMULATOR

Gabriele Falasca - Università degli studi dell’Aquila

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

Gabriele Falasca - Università degli studi dell’Aquila

PROJECT STRUCTURE

DIRECTORIES:hooks/ : it may contains the scripts used to customize cordova commands

platforms/ : it contains the projects directories of a specific platformplugins/ : it contains the packages of the pluginwww/ : it contains the source code of the web applicationsconfig.xml : is a global configuration file

Gabriele Falasca - Università degli studi dell’Aquila

CONFIG.XMLIS 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>

Gabriele Falasca - Università degli studi dell’Aquila

CONFIG.XMLOTHER CONFIGURATIONS

<preference name=”FullScreen” value=”true”>

<platform name=”android”><preference name=”Orientation” value=”landscape”>

</platform>

Gabriele Falasca - Università degli studi dell’Aquila

ADD AND REMOVE PLATFORMS

$ cordova platform add android

$ cordova platform remove android

Gabriele Falasca - Università degli studi dell’Aquila

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

Gabriele Falasca - Università degli studi dell’Aquila

ROADMAPINTRO

HOW TO INSTALL

CORDOVA CLI

EVENTS

APIs

PLUGINS

RIPPLE EMULATOR

Gabriele Falasca - Università degli studi dell’Aquila

EVENTSCORDOVA PROVIDES A RICH COLLECTION OF EVENTS FOR BETTER ACCESS TO

DEVICE CAPABILITIES

Gabriele Falasca - Università degli studi dell’Aquila

EVENTSdevicereadypauseresumebackbuttonmenubuttonsearchbuttonstartcallbuttonendcallbuttonvolumedownbuttonvolumeupbutton

EVENTS CAN BE LISTENED AND CAPTURED TROUGH W3C SPEC

document.addEventListener(eventName, callBack)

Gabriele Falasca - Università degli studi dell’Aquila

ROADMAPINTRO

HOW TO INSTALL

CORDOVA CLI

EVENTS

APIs

PLUGINS

RIPPLE EMULATOR

Gabriele Falasca - Università degli studi dell’Aquila

APIsCORDOVA PROVIDES A LARGE SET OF APIs FOR ACCESSING DEVICE FEATURES

Gabriele Falasca - Università degli studi dell’Aquila

API: CAMERA

Gabriele Falasca - Università degli studi dell’Aquila

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

Gabriele Falasca - Università degli studi dell’Aquila

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

Gabriele Falasca - Università degli studi dell’Aquila

API: CONTACTS

Gabriele Falasca - Università degli studi dell’Aquila

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

Gabriele Falasca - Università degli studi dell’Aquila

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

Gabriele Falasca - Università degli studi dell’Aquila

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

Gabriele Falasca - Università degli studi dell’Aquila

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 fieldvar options = new ContactFindOptions();options.filter="Gabriele";options.multiple=true; var fields = ["displayName", "name"];navigator.contacts.find(fields, onSuccess, onError, options);

Gabriele Falasca - Università degli studi dell’Aquila

API: GEOLOCATION

Gabriele Falasca - Università degli studi dell’Aquila

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

Gabriele Falasca - Università degli studi dell’Aquila

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 objectfunction onError(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');}navigator.geolocation.getCurrentPosition(onSuccess, onError);

Gabriele Falasca - Università degli studi dell’Aquila

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

Gabriele Falasca - Università degli studi dell’Aquila

ROADMAPINTRO

HOW TO INSTALL

CORDOVA CLI

EVENTS

APIs

PLUGINS

RIPPLE EMULATOR

Gabriele Falasca - Università degli studi dell’Aquila

PLUGINS

Gabriele Falasca - Università degli studi dell’Aquila

PLUGINS

THERE ARE TWO SIMPLE WAY TO ADD PLUGIN AT OUR CORDOVA APP:

cordova plugin add <plugin package name>

FOR CORDOVA BUILT-IN PLUGINS:

FOR THIRD PARTIES PLUGINS:

cordova plugin add <url of plugin repository>

Gabriele Falasca - Università degli studi dell’Aquila

PLUGINS

cordova plugin rm <plugin package name>

FOR MORE INFORMATION ABOUT CORDOVA PLUGINS VISIT http://plugins.cordova.io/

REMOVING PLUGINS:

Gabriele Falasca - Università degli studi dell’Aquila

PLUGINSEXAMPLES

cordova plugin add org.apache.cordova.inappbrowser

INSTALLING A CORDOVA BUILT-IN PLUGIN (InAppBrowser):

FOR THIRD PARTIES PLUGINS (PushPlugin) * :

cordova plugin add https://github.com/phonegap-build/PushPlugin.git

* yes, Cordova supports Phonegap plugins

Gabriele Falasca - Università degli studi dell’Aquila

ROADMAPINTRO

HOW TO INSTALL

CORDOVA CLI

EVENTS

APIs

PLUGINS

RIPPLE EMULATOR

Gabriele Falasca - Università degli studi dell’Aquila

RIPPLE EMULATOR

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

Gabriele Falasca - Università degli studi dell’Aquila

RIPPLE EMULATORWHAT IS?

RIPPLE IS A WEB-BASED MOBILE SIMULATOR, IDEAL FOR RAPID DEVELOPMENT OF MOBILE APPLICATION DEVELOPED WITH WEB BASED FRAMEWORK, SUCH

APACHE CORDOVA

Gabriele Falasca - Università degli studi dell’Aquila

HOW TO INSTALL

OPEN YOUR COMMAND LINE AND TYPE

$ sudo npm install -g ripple-emulator

THEN TYPE YOUR PASSWORD AND PRESS ENTERTHEN TYPE YOUR PASSWORD AND PRESS ENTER

Gabriele Falasca - Università degli studi dell’Aquila

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)

Gabriele Falasca - Università degli studi dell’Aquila

RIPPLE INTERFACE

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

Gabriele Falasca - Università degli studi dell’Aquila

MOST FAMOUS BRANDS USING CORDOVA

Gabriele Falasca - Università degli studi dell’Aquila

QUESTIONS???

Gabriele Falasca - Università degli studi dell’Aquila

THANKS A LOT!!!facebook.com/gabrycaos

plus.google.com/+GabrieleFalasca1989

it.linkedin.com/in/falascagabriele

(SOON) http://gabrielefalasca.com

gabrycaos@yahoo.it