2. HELLO WORLD!!!
I’M GABRIELE FALASCA, STUDENT AT UNIVERSITÀ DEGLI
STUDI DELL’AQUILA, AND MOBILE APPLICATION
DEVELOPER FREELANCE
Gabriele Falasca - Università degli studi dell’Aquila
3. ROADMAP
INTRO
HOW TO INSTALL
CORDOVA CLI
EVENTS
APIs
PLUGIN
RIPPLE EMULATOR
Gabriele Falasca - Università degli studi dell’Aquila
5. 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
6. ROADMAP
INTRO
HOW TO INSTALL
CORDOVA CLI
EVENTS
APIs
PLUGIN
RIPPLE EMULATOR
Gabriele Falasca - Università degli studi dell’Aquila
7. 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/
Gabriele Falasca - Università degli studi dell’Aquila
8. 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
9. ROADMAP
INTRO
HOW TO INSTALL
CORDOVA CLI
EVENTS
APIs
PLUGIN
RIPPLE EMULATOR
Gabriele Falasca - Università degli studi dell’Aquila
10. 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
11. 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
Gabriele Falasca - Università degli studi dell’Aquila
12. 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="*" />
Gabriele Falasca - Università degli studi dell’Aquila
</widget>
13. CONFIG.XML
OTHER CONFIGURATIONS
<preference name=”FullScreen” value=”true”>
<platform name=”android”>
<preference name=”Orientation” value=”landscape”>
Gabriele Falasca - Università degli studi dell’Aquila
</platform>
14. ADD AND REMOVE PLATFORMS
$ cordova platform add android
$ cordova platform remove android
Gabriele Falasca - Università degli studi dell’Aquila
15. 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
16. ROADMAP
INTRO
HOW TO INSTALL
CORDOVA CLI
EVENTS
APIs
PLUGINS
RIPPLE EMULATOR
Gabriele Falasca - Università degli studi dell’Aquila
17. EVENTS
CORDOVA PROVIDES A RICH COLLECTION OF EVENTS FOR BETTER ACCESS TO
DEVICE CAPABILITIES
Gabriele Falasca - Università degli studi dell’Aquila
18. EVENTS
deviceready
pause
resume
backbutton
menubutton
searchbutton
startcallbutton
endcallbutton
volumedownbutton
volumeupbutton
EVENTS CAN BE LISTENED AND CAPTURED TROUGH W3C SPEC
document.addEventListener(eventName, callBack)
Gabriele Falasca - Università degli studi dell’Aquila
19. ROADMAP
INTRO
HOW TO INSTALL
CORDOVA CLI
EVENTS
APIs
PLUGINS
RIPPLE EMULATOR
Gabriele Falasca - Università degli studi dell’Aquila
20. APIs
CORDOVA PROVIDES A LARGE SET OF APIs FOR ACCESSING DEVICE FEATURES
Gabriele Falasca - Università degli studi dell’Aquila
22. 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
Gabriele Falasca - Università degli studi dell’Aquila
MESSAGE
options: OPTIONAL PARAMETERS TO CUSTOMIZE CAMERA SETTINGS
(ex. quality, destinationType, targetWidth, targetHeight, ecc…)
23. 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
25. 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
26. 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
27. 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
28. 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);
Gabriele Falasca - Università degli studi dell’Aquila
30. 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
31. 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);
Gabriele Falasca - Università degli studi dell’Aquila
32. 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
33. ROADMAP
INTRO
HOW TO INSTALL
CORDOVA CLI
EVENTS
APIs
PLUGINS
RIPPLE EMULATOR
Gabriele Falasca - Università degli studi dell’Aquila
35. 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>
Gabriele Falasca - Università degli studi dell’Aquila
36. PLUGINS
REMOVING PLUGINS:
cordova plugin rm <plugin package name>
FOR MORE INFORMATION ABOUT CORDOVA PLUGINS VISIT http://plugins.cordova.io/
Gabriele Falasca - Università degli studi dell’Aquila
37. 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
Gabriele Falasca - Università degli studi dell’Aquila
38. ROADMAP
INTRO
HOW TO INSTALL
CORDOVA CLI
EVENTS
APIs
PLUGINS
RIPPLE EMULATOR
Gabriele Falasca - Università degli studi dell’Aquila
40. 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
Gabriele Falasca - Università degli studi dell’Aquila
41. HOW TO INSTALL
OPEN YOUR COMMAND LINE AND TYPE
$ sudo npm install -g ripple-emulator
THEN TYPE YOUR PASSWORD AND PRESS ENTER
Gabriele Falasca - Università degli studi dell’Aquila
42. 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
43. RIPPLE INTERFACE
WE’LL SEE THIS ARGUMENT DIRECTLY WITH THE EMULATOR! :)
Gabriele Falasca - Università degli studi dell’Aquila
44. MOST FAMOUS BRANDS USING
CORDOVA
Gabriele Falasca - Università degli studi dell’Aquila