Apache Cordova (PhoneGap 3)

Transkript

1 Apache Cordova (PhoneGap 3) Nativní aplikace pro Android, ios, WP, TAMZ 1 Cvičení 10

2 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.)

3 Instalace Apache Cordova Platformě nezávislé Je potřeba nainstalovat následující nástroje: Java Platform (JDK) v proměnném prostředí přidat JAVA_HOME a cestu k JDK Node.js - Apache Cordova pomoci Node.js package manageru: npm install -g cordova Apache Ant - Git - 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, )

4 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]

5 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.

6 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.

7 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:

8 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

9 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.)

10 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)

11 Ú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: 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