Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Introduction to Apache Cordova (Phonegap)

Introduction to Apache Cordova (Phonegap).

  • Sé el primero en comentar

Introduction to Apache Cordova (Phonegap)

  1. 1. Introduction to
  2. 2. Apache CordovaApache Cordova is a platform for building natively installedmobile applications using HTML, CSS and JavaScript
  3. 3. HistoryApache Cordova was originally called Phonegap build by NitobiOpen-source & free software from the beginning (MIT License), ApacheLicense nowNitobi then aquired by Adobe and donated the PhoneGap codebase to theApache Software Foundation (ASF)PhoneGap is still a product of Adobe. It is a distribution of Apache Cordova.Think of Apache Cordova as the engine that powers PhoneGap.
  4. 4. Cordova Architecture
  5. 5. Apache Cordova Application’s User Interface The user interface for Apache Cordova applications is created using HTML, CSS, and JavaScript. The UI layer is a web browser view that takes up 100% of the device width and 100% of the device height. The web view used by application is the same web view used by the native operating system iOS: Objective-C UIWebView class Android: android.webkit.WebView WP7: WebBrowser WP8: WebBrowser control (Internet Explorer 10) BlackBerry: WebWorks framework
  6. 6. Apache Cordova APIProvides an application programming interface (API) enables you to access native operating system functionality using JavaScript. APIs for Accelerometer, Camera, Compass, Media, FileSystem, etc Extendable using native Cordova JavaScript API Cordova Application and Native API Cordova Native Library
  7. 7. Supported PlatformsAccelerometer Monitor the motion sensor on the device.Camera Take pictures with the device camera allow the user to select images from their photo library on the device.Capture Capture video and still images from the camera, and audio from the microphone.Compass Give users of your app some direction.Contacts Search and Create contacts in the user’s address book.File Low level read and write access to the file system. Upload and download files from a web server.GeoLocation Make your app location aware.Media Play and record audio files.Network Monitor the device connectionsNotification Access to vibration, beep and alerts.Storage Updated list: Persistent data store in WebStorage.
  8. 8. Development using CordovaTools for development Any HTML & JS editor Platform SDK e.g. Android SDT, Android SDK, BB SDK, Xcode, Visual Studio Mobile. Platform Emulator (usually provide along with SDK) JS/HTML GUI Mobile framework e.g. JQuery, Sencha Touch, dojo Mobile Browser e.g. Firefox with Bugzilla extension, Chrome Browser
  9. 9. Getting StartedGuides:• Getting Started with Android• Getting Started with Blackberry• Getting Started with iOS• Getting Started with Symbian• Getting Started with WebOS• Getting Started with Windows Phone• Getting Started with Windows 8• Getting Started with Bada• Getting Started with Tizen platform SDK to develop application for each target platform … Xcode Android SDK BB Java Eclipse Plug-in Visual Studio, Windows Eclipse ADT Plug-in Ripple Phone Dev Tools
  10. 10. Code Example<!DOCTYPE html><html> <head> <title>Device Properties Example</title> <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> <script type="text/javascript" charset="utf-8"> // Wait for Cordova to load document.addEventListener("deviceready", onDeviceReady, false); // Cordova is ready function onDeviceReady() { navigator.geolocation.getCurrentPosition(onSuccess, onError); } // onSuccess Geolocation function onSuccess(position) { var element = document.getElementById(geolocation); element.innerHTML = Latitude: + position.coords.latitude + <br /> + Longitude: + position.coords.longitude + <br /> + Altitude: + position.coords.altitude + <br /> + Accuracy: + position.coords.accuracy + <br /> + Altitude Accuracy: + position.coords.altitudeAccuracy + <br /> + } // onError Callback receives a PositionError object function onError(error) { alert(code: + error.code + n + message: + error.message + n); } </script> </head> <body> <p id="geolocation">Finding geolocation...</p> </body></html>
  11. 11. Apache Cordova Native Plug-inWhat if a native feature isn’t available in Core APIs?PhoneGap is extensible with a “native plugin” model that enables youto write your own native logic to access via JavaScript. You develop your JavaScript class to mirror the API of the native class Invoke the native function using PhoneGap.exec() Plug-in class mappings: Android: res/xml/plugins.xml iOS: www/Cordova.plist BlackBerry: www/plugins.xmlPhoneGap.exec(function(winParam){}, function(error){}, ”service”, ”action", [params]);
  12. 12. Plugin Example (Android Native Code)package sample.cordova.plugin;import org.apache.cordova.api.CordovaPlugin;import org.apache.cordova.api.PluginResult;import org.json.JSONArray;import org.json.JSONException;import org.json.JSONObject;/** * This class echoes a string called from JavaScript. Extend the Cordova Implement execute */ Plugin class methodpublic class Echo extends CordovaPlugin { @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { Define and handle if (action.equals("echo")) { action String message = args.getString(0); if (message != null && message.length() > 0) { callbackContext.success(message); } else { callbackContext.error("Expected one non-empty string argument."); } return true; } return false; }}
  13. 13. Plugin Example (HTML + JS Code)<!DOCTYPE html><html> <head> <title>Cordova Plugin Test</title> <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> <script type="text/javascript" charset="utf-8"> var EchoPlugin = { callNativeFunction: function (success, fail, resultType) { return Cordova.exec( success, fail, “sample.cordova.plugin.Echo", "echo", [resultType]); } }; function callNativePlugin( returnSuccess ) { HelloPlugin.callNativeFunction( nativePluginResultHandler, nativePluginErrorHandler, returnSuccess ); } function nativePluginResultHandler (result) { alert("SUCCESS: rn"+result ); } function nativePluginErrorHandler (error) { alert("ERROR: rn"+error ); } </script> </head> <body><body onload="onBodyLoad()"><h1>Cordova Plugin Test</h1><button onclick="callNativePlugin(success);">Click to invoke the Native Plugin!</button></body>
  14. 14. ResourcesApache Cordova Website Cordova Documentation Day 2011 – IBM, PhoneGap and the Enterprise by Bryce Curtis [Aug 10, 2011] (video)Andrew Trice’s Blog

    Sé el primero en comentar

    Inicia sesión para ver los comentarios

  • multiportales

    Mar. 9, 2015
  • poojadombale

    Mar. 12, 2015
  • CindyRaissa

    May. 28, 2015
  • prarthanapreethi

    Aug. 4, 2015
  • alan_717

    Aug. 25, 2015
  • ChetanSundarde

    Oct. 4, 2015
  • qsilver7

    Oct. 7, 2015
  • lynardmisa

    Oct. 20, 2015
  • freshmulberry

    Dec. 28, 2015
  • ssuserfd68c8

    Jan. 4, 2016
  • DonnyIskandar3

    Mar. 1, 2016
  • skosta

    Sep. 4, 2016
  • MphumziWalterMlotywa

    Nov. 4, 2016
  • cfgoncalves

    Dec. 14, 2016
  • AmarModigunta

    May. 24, 2017
  • manikantavoonna

    Jun. 9, 2017
  • KarunaharanVijayarah

    Jun. 20, 2017
  • PradeepKumar3180

    Mar. 11, 2018
  • mahditaherkhani

    Nov. 26, 2018
  • MeenakshiSundaram62

    Feb. 14, 2019

Introduction to Apache Cordova (Phonegap).


Total de vistas


En Slideshare


De embebidos


Número de embebidos









Me gusta