Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Nächste SlideShare
An introduction to Apache Cordova
Weiter
Herunterladen, um offline zu lesen und im Vollbildmodus anzuzeigen.

32

Teilen

Introduction to Apache Cordova (Phonegap)

Herunterladen, um offline zu lesen

Introduction to Apache Cordova (Phonegap).

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Introduction to Apache Cordova (Phonegap)

  1. 1. Introduction to ejlp12@gmail.com
  2. 2. Apache Cordova Apache Cordova is a platform for building natively installed mobile applications using HTML, CSS and JavaScript
  3. 3. History Apache Cordova was originally called Phonegap build by Nitobi Open-source & free software from the beginning (MIT License), Apache License now Nitobi then aquired by Adobe and donated the PhoneGap codebase to the Apache 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 API Provides 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 plug-in docs.phonegap.com Cordova JavaScript API Cordova Application and Native API Cordova Native Library
  7. 7. Supported Platforms Accelerometer 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 connections Notification Access to vibration, beep and alerts. Storage Updated list: Persistent data store in WebStorage. http://wiki.apache.org/cordova/PlatformSupport
  8. 8. Development using Cordova Tools 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 Started Guides: • 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 http://docs.phonegap.com/en/2.2.0/guide_getting-started_index.md.html Use 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-in What if a native feature isn’t available in Core APIs? PhoneGap is extensible with a “native plugin” model that enables you to 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.xml PhoneGap.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 method public 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. Resources Apache Cordova Website http://cordova.apache.org/ Apache Cordova Documentation http://docs.phonegap.com/en/2.2.0/index.html PhoneGap Day 2011 – IBM, PhoneGap and the Enterprise by Bryce Curtis [Aug 10, 2011] http://www.slideshare.net/drbac/phonegap-day-ibm-phonegap-and-the-enterprise (video) Andrew Trice’s Blog http://www.tricedesigns.com/category/cordova/
  • MeenakshiSundaram62

    Feb. 14, 2019
  • mahditaherkhani

    Nov. 26, 2018
  • PradeepKumar3180

    Mar. 11, 2018
  • KarunaharanVijayarah

    Jun. 20, 2017
  • manikantavoonna

    Jun. 9, 2017
  • AmarModigunta

    May. 24, 2017
  • cfgoncalves

    Dec. 14, 2016
  • MphumziWalterMlotywa

    Nov. 4, 2016
  • skosta

    Sep. 4, 2016
  • DonnyIskandar3

    Mar. 1, 2016
  • ssuserfd68c8

    Jan. 4, 2016
  • freshmulberry

    Dec. 28, 2015
  • lynardmisa

    Oct. 20, 2015
  • qsilver7

    Oct. 7, 2015
  • ChetanSundarde

    Oct. 4, 2015
  • alan_717

    Aug. 25, 2015
  • prarthanapreethi

    Aug. 4, 2015
  • CindyRaissa

    May. 28, 2015
  • poojadombale

    Mar. 12, 2015
  • multiportales

    Mar. 9, 2015

Introduction to Apache Cordova (Phonegap).

Aufrufe

Aufrufe insgesamt

31.959

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

4.949

Befehle

Downloads

1.389

Geteilt

0

Kommentare

0

Likes

32

×