apache cordova: overview and introduction
DESCRIPTION
Introduction to Apache Cordova, framework for mobile app development with cross platform technology and HTML5TRANSCRIPT
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="[email protected]" 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