Apache Cordova (PhoneGap 3)

Apache Cordova
(PhoneGap 3)
Nativní
aplikace pro
Android, iOS,
WP, …
TAMZ 1
Cvičení 10
Základy Apache Cordova
Vývoj „nativních“ mobilních aplikací v
HTML5+JS+CSS3
Vytvořená webová aplikace se zabalí pomocí Apache
Cordova jako nativní aplikace.
Interně se přes celou plochu načte WebView
komponenta.
Snadný vývoj pro více platforem (Android, IOS, WP,
Blackberry, Tizen, Ubuntu, Firefox OS,…)
Možnost publikovat aplikaci v App Store/Google
Play/WP Store
Umí do JavaScriptu zpřístupnit systémová API pomoci
pluginů (geolokaci, filesystém, fotoaparát atd.)
Instalace Apache Cordova
Platformě nezávislé
Je potřeba nainstalovat následující nástroje:
Java Platform (JDK) http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html v
proměnném prostředí přidat „JAVA_HOME“ a cestu k JDK
Node.js - http://nodejs.org/download/
Apache Cordova – pomoci Node.js package manageru: „npm install -g
cordova“
Apache Ant - http://ant.apache.org/bindownload.cgi
Git - http://git-scm.com/ v proměnném prostředí přidat „PATH“ k binárkám
V závislosti na platformách, na kterých chceme vyvíjet, je
potřeba nainstalovat vývojové SDK:
Android SDK - v proměnném prostředí přidat do „PATH“ a cestu k Android SDK
Windows Phone SDK (VisualStudio)
iOS SDK
Lze také přidat další podporované platformy (např.
BlackBerry 10, FireFox OS, Tizen, HP WebOS,…)
Použití Apache Cordova
Cordova je integrovaná v NetBeans
Založení nového projektu
HTML5 => Cordova Application
Můžeme také použít Cordova CLI
Založení nového projektu
cordova create <project_PATH> [ID [NAME [CONFIG]]]
např. cordova create ex cz.vsb.mor03.Ex Example
cordova platform [{add|remove|update} <PLATFORM> | ls]
např. cordova platform add android
cordova plugin [{add|remove} <PATH|URI> | ls | search kw]
např. cordova plugin add org.apache.cordova.device
cordova build [PLATFORM] (alternativa prepare → compile)
cordova run [PLATFORM]
cordova emulate [PLATFORM]
cordova serve [PORT]
Základní struktura projektu
Projekt obsahuje několik adresářů:
platforms
Obsahuje vytvořené projekty, pro každou instalovanou
platformu.
Jednotlivé projekty je následně potřeba kompilovat v
příslušných IDE (VisualStudio, Xcode, Android SDK).
Lze řešit i bez nich, pomocí cloudového Phonegap Build.
plugins
Obsahuje zdrojové kódy všech nainstalovaných
zásuvných modulů pro každou platformu.
www
Obsahuje HTML5+JS+CSS3 aplikaci a konfigurační XML
soubor, viz dále.
Apache Cordova config.xml
Konfigurační soubor je umístěn v hlavním adresáři
webového projektu nebo v podadresáři v závislosti na
platformě
Konfigurační soubor může obsahovat:
fullscreen nastavení:
<preference name="fullscreen" value="true"/>
vynutit orientaci obrazovky:
<preference name="Orientation" value="landscape" />
Hodnoty: default (zařízení), landscape (na šířku), portrait (na výšku)
zakázat rubber-band scrolování:
<preference name="webviewbounce" value="true"/>
nastavit, aby se zabránilo overscrolling na iOS a Android:
<preference name="DisallowOverscroll" value="true"/>
Některé nastavení mohou být specifické pro konkrétní
platformy.
Pluginy a nativní kód
Apache Cordova nabízí systém nativních pluginů:
K dispozici je sada základních (klíčových) pluginů, které by měly
být k dispozici pro všechny/většinu platforem.
Můžeme vytvořit wrapper JavaScript třídu, pro poskytnutí
chybějícího/nového API.
Nativní volání jsou prováděny cordova.exec()
e.g. cordova.exec(function(winParam) {}, function(error) {},
"service", "action", ["firstArg", "secondArg", 42, false]);
Plugin repositář obsahuje soubor plugin.xml v kořenovém adresáři,
který popisuje plugin
Platfromu, zdrojové soubory a nastavení
Nativní kód se liší platforma od platofrmy
Můžeme také publikovat své pluginy pro ostatní přes plugman
Nejprve je nutné vytvořit účet
www: http://plugins.cordova.io/#/
Základní pluginy
Battery Status
Camera
Console
Contacts
Device
Device Motion
Device Orientation
Dialogs
File (System)
File Transfer
Geolocation
Globalization
In-App Browser
Media
Media Capture
Network Information
Splashscreen
Vibration
Geolokace
Poskytuje informace o poloze zařízení, jako je
zeměpisná šířka a délka.
Přidáním navigator.geolocation
Metody:
getCurrentPosition(accSuccess, [accError], [Options]) –
accSuccess callback vrátí object position
id = watchPosition(accSuccess, [accError]) sleduje změny v
GPS poloze zařízení. AccSuccess callback vrátí object
position
clearWatch(id) zastaví sledování změn polohy na zařízení
předáním id parametru.
accSuccess : dostaneme objekt position s informacemi o
zeměpisné délce, zeměpisné šířce, nadmořské výšce, přesnosti
zeměpisné délky a šířky, přesnosti nadmořské výšky, směru
pohybu, rychlosti, aktuálnímu času.
Nastavení: {timeout: 30000} vyvolá error callback, pokud není
nová pozice získána každých 30 sekund. Nastavte také
{enableHighAccuracy: true } pro data z GPS, jinak je poloha
určena přibližně podle bezdrátových sítí (Android, popř. jiné platf.)
Akcelerometr, Kompas (Cordova)
V obou případech API kopíruje geolocation API:
Akcelerometr – přidáním navigator.accelerometer
Metody: getCurrentAcceleration(accSuccess, accError), id =
watchAcceleration(accSuccess, accError[, opts]), clearWatch(id)
Úspěch: dostaneme zrychlení objektu s x, y, z včetně účinku gravitace
(e.g. 0, 0, 9.81) a timestamp
Nastavení: můžeme určit freq. v [ms], e.g. { frequency: 3000 }
Kompas – Přes navigator.compass
Metody: getCurrentHeading(compassSuccess, compError),
id=watchHeading(compassSuccess, compassError[, opts]),
clearWatch(id)
Úspěch : Dostaneme číslo objektu s magneticHeading, trueHeading
(geografikcy k severnímu pólu, záporná – nelze určit),
headingAccuracy (odchylka ve [°] mezi udávanou a skutečnou
hodnotou) a timestamp
Error: dostaneme chybové objekty s kódem
CompassError.COMPASS_INTERNAL_ERR
CompassError.COMPASS_NOT_SUPPORTED
Nastavení: můžeme určit frekvenci (viz výše) a filter (iOS)
Úkol (1b) – Geolokace,
Orientace, Kompas
Zrealizujte jednu z následujících aplikací
Vytvořte aplikaci, která bude realizovat
dashboard s následujícími informacemi:
Datum a čas
Zeměpisná poloha (+ tolerance)
Nadmořská výška (je-li k dispozici)
Kurz (dle kompasu či GPS, je-li k dispozici)
+0.5b grafická podoba kompasu se
stupni (automatické natáčení obrázku)
Navádění ke zvolenému bodu (+1b)
Vzorce: http://www.movable-type.co.uk/scripts/latlong.html
Realizujte ovládání přehrávače médií nebo hry pomocí
akcelerometru (kalibrace v aplikaci +0.5b)
gesta opakovaným naklápěním, naklápění místo
směrových šipek
otočení telefonu vzhůru nohama – mute/pauza