Native Applications with Apache Cordova
TAMZ 1 Lab 10 Apache Cordova basics
Web-oriented (HTML5+JS+CSS3) But it's used for building embedded applications (with installation packages instead of mobile web) Large scope of platforms (Android, IOS, WP, Blackberry, Tizen, Ubuntu, Firefox OS, …) Common JavaScript API over different platforms, frameworks programming languages & IDEs Uses features from HTML5 But you have to prepare the basic project for deployment to individual platforms Instead of building locally, it is possible to use cloud-based build (may require public-available sources on Github) How to use Apache Cordova
You add Cordova libraries into your project: the common platform-independent core the platform-dependent API adaptation code You use the native IDE for given platform Some IDEs, like NetBeans, offer support for seamless use of Apache Cordova You can sell the application using platform-dependent store (App Store, Google Play, Windows Marketplace, …) It is possible to use (3rd-party) plugins Plugin may be available only for some platforms, e.g. Android & iOS Examples: Calendar plugin, SMS plugin, … Apache Cordova Installation Platform independent Installation requires following tools and applications Java Platform (JDK) - http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html in environment properties define „JAVA_HOME“ with path to JDK Node.js - http://nodejs.org/download/ Apache Cordova – using Node.js package manager: „npm install -g cordova“ Apache Ant - http://ant.apache.org/bindownload.cgi Git - http://git-scm.com/ add environment „PATH“ to binaries Based on the target platforms, you need to install development SDKs Android SDK – add environment „PATH“ to Android SDK directory Windows Phone SDK (VisualStudio) iOS SDK Other platforms are supported as well (e.g. BlackBerry 10, FireFox OS, Tizen, HP WebOS,…) Apache Cordova Installation On Linux in the laboratory please enter the following commands: sudo su password : cisco npm -g remove cordova npm -g install [email protected] Check the installation cordova -v Should return 3.3.1-0.1.2
Running Android Emulator (using CLI) emulator -avd Telefon Using Apache Cordova Cordova is integrated in NetBeans Create a New Project HTML5 => Cordova Application You can also use Cordova CLI New project creation cordova create
Project contains several directories: platforms Contains project for each selected platform Each project must be compiled in appropriate IDE (VisualStudio, Xcode, Android SDK). It is possible to installing IDE by using Phonegap Build. plugins Contains source codes of all installed plugins for each platform. www Contains HTML5+JS+CSS3 application and configuration XML file, described later on. Apache Cordova config.xml The configuration file is placed in the main web project directory or in a subdirectory based on given platform Uses Widget specification mentioned earlier extra namespace xmlns:cdv="http://cordova.apache.org/ns/1.0" for widget tag The supplied configuration preference may also add fullscreen setting:
Battery Status File Transfer Camera Geolocation Console Globalization Contacts In-App Browser Device Media Device Motion Media Capture Device Orientation Network Information Dialogs Splashscreen File (System) Vibration Geolocation Provides information about the position of the device (e.g. latitude, longitude ...) Including navigator.geolocation Methods: getCurrentPosition(accSuccess, [accError], [Options]) – accSuccess callback returns object position. id = watchPosition(accSuccess, [accError]) monitors changes in GPS position of the device. AccSuccess callback returns object position. clearWatch(id) stops the monitoring of the location changes. id must be the same as returned by watchPosition. accSuccess : get the object position containing information with longitude, latitude, altitude, its precision, speed, azimuth and current time. Settings: {timeout: 30000} triggers error callback, if the position is not available for 30 seconds. Use enableHighAccuracy: true to get data from GPS receiver (otherwise, network-based location is used on Android and some other platforms). Accelerometer & Compass plugins In both cases, the API copies geolocation API approach: Acceleration – adds navigator.accelerometer Methods: getCurrentAcceleration(accSuccess, accError), id = watchAcceleration(accSuccess, accError[, opts]), clearWatch(id) Success: we get acceleration object with x, y, z including the effect of gravity (e.g. 0, 0, 9.81) and timestamp field Options: we can specify freq. in [ms], e.g. { frequency: 3000 } Compass – compass heading through navigator.compass Methods: getCurrentHeading(compassSuccess, compError), id=watchHeading(compassSuccess, compassError[, opts]), clearWatch(id) Success: we get heading object with magneticHeading, trueHeading (geographic to the North Pole, negative - can't be determined), headingAccuracy (deviation in [°] between reported and the true heading) and timestamp fields Error: we get error object with code being CompassError.COMPASS_INTERNAL_ERR CompassError.COMPASS_NOT_SUPPORTED Options: we can specify frequency (see above) and filter (iOS) Task (1b) Geolocation & Compass Create one of the following application Create a dashboard applications showing Date and Time GPS position (+ tolerance) Altitude (if available) Heading (based on compass or GPS) +0.5b graphics with angles (automatically rotating to north ) Navigation to selected point (+1b) Useful equations: http://www.movable-type.co.uk/scripts/latlong.html