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, , 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, 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. 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“ - 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 SDK (VisualStudio) iOS SDK Other platforms are supported as well (e.g. BlackBerry 10, FireFox OS, Tizen, HP WebOS,…) Apache Cordova Installation On 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 [ID [NAME [CONFIG]]] e.g. cordova create ex cz.vsb.mor03.Ex Example cordova platform [{add|remove|update} | ls] e.g. cordova platform add android cordova plugin [{add|remove} | ls | search kw] e.g. cordova plugin add org.apache.cordova.device cordova build [PLATFORM] (alternative prepare → compile) cordova run [PLATFORM] cordova emulate [PLATFORM] cordova serve [PORT] Basic Project Structure

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: enforce screen orientation: Values: default (both orientations), landscape, portrait disable rubber-band scrolling bounce: be set to prevent overscrolling on iOS & Android: Some platform-specific preferences may be also included Executing native code Apache Cordova offers a system of Native Plugins There is a set of basic (core) plugins which should be available for all/most platforms. You can create a wrapper JavaScript class to provide missing/ additional API. The native calls are executed by cordova.exec() e.g. cordova.exec(function(winParam) {}, function(error) {}, "service", "action", ["firstArg", "secondArg", 42, false]); Plugin repository has a plugin.xml file in top directory, which describes the plugin platforms, their source files and configuration, … The native code differs platform-to-platform, e.g. Android extends CordovaPlugin overrides method: public boolean execute(String action, JSONArray args, CallbackContext cCont) throws JSONException You can publish your plugins for others via plugman You have to create an account first. Basic Plugins

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