Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Apache Cordova: Overview and Introduction

1,917 views

Published on

Introduction to Apache Cordova, framework for mobile app development with cross platform technology and HTML5

Published in: Technology
  • Be the first to comment

Apache Cordova: Overview and Introduction

  1. 1. OVERVIEW AND INTRODUCTION Gabriele Falasca - Università degli studi dell’Aquila
  2. 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. 3. ROADMAP INTRO HOW TO INSTALL CORDOVA CLI EVENTS APIs PLUGIN RIPPLE EMULATOR Gabriele Falasca - Università degli studi dell’Aquila
  4. 4. Gabriele Falasca - Università degli studi dell’Aquila
  5. 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. 6. ROADMAP INTRO HOW TO INSTALL CORDOVA CLI EVENTS APIs PLUGIN RIPPLE EMULATOR Gabriele Falasca - Università degli studi dell’Aquila
  7. 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. 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. 9. ROADMAP INTRO HOW TO INSTALL CORDOVA CLI EVENTS APIs PLUGIN RIPPLE EMULATOR Gabriele Falasca - Università degli studi dell’Aquila
  10. 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. 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. 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. 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. 14. ADD AND REMOVE PLATFORMS $ cordova platform add android $ cordova platform remove android Gabriele Falasca - Università degli studi dell’Aquila
  15. 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. 16. ROADMAP INTRO HOW TO INSTALL CORDOVA CLI EVENTS APIs PLUGINS RIPPLE EMULATOR Gabriele Falasca - Università degli studi dell’Aquila
  17. 17. EVENTS CORDOVA PROVIDES A RICH COLLECTION OF EVENTS FOR BETTER ACCESS TO DEVICE CAPABILITIES Gabriele Falasca - Università degli studi dell’Aquila
  18. 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. 19. ROADMAP INTRO HOW TO INSTALL CORDOVA CLI EVENTS APIs PLUGINS RIPPLE EMULATOR Gabriele Falasca - Università degli studi dell’Aquila
  20. 20. APIs CORDOVA PROVIDES A LARGE SET OF APIs FOR ACCESSING DEVICE FEATURES Gabriele Falasca - Università degli studi dell’Aquila
  21. 21. API: CAMERA Gabriele Falasca - Università degli studi dell’Aquila
  22. 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. 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
  24. 24. API: CONTACTS Gabriele Falasca - Università degli studi dell’Aquila
  25. 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. 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. 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. 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
  29. 29. API: GEOLOCATION Gabriele Falasca - Università degli studi dell’Aquila
  30. 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. 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. 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. 33. ROADMAP INTRO HOW TO INSTALL CORDOVA CLI EVENTS APIs PLUGINS RIPPLE EMULATOR Gabriele Falasca - Università degli studi dell’Aquila
  34. 34. PLUGINS Gabriele Falasca - Università degli studi dell’Aquila
  35. 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. 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. 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. 38. ROADMAP INTRO HOW TO INSTALL CORDOVA CLI EVENTS APIs PLUGINS RIPPLE EMULATOR Gabriele Falasca - Università degli studi dell’Aquila
  39. 39. RIPPLE EMULATOR http://ripple.incubator.apache.org/ Gabriele Falasca - Università degli studi dell’Aquila
  40. 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. 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. 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. 43. RIPPLE INTERFACE WE’LL SEE THIS ARGUMENT DIRECTLY WITH THE EMULATOR! :) Gabriele Falasca - Università degli studi dell’Aquila
  44. 44. MOST FAMOUS BRANDS USING CORDOVA Gabriele Falasca - Università degli studi dell’Aquila
  45. 45. QUESTIONS??? Gabriele Falasca - Università degli studi dell’Aquila
  46. 46. THANKS A LOT!!! facebook.com/gabrycaos plus.google.com/+GabrieleFalasca1989 it.linkedin.com/in/falascagabriele (SOON) http://gabrielefalasca.com gabrycaos@yahoo.it Gabriele Falasca - Università degli studi dell’Aquila

×