APEX und Phonegap? Das kann APEX doch mit HTML5! APEX connect Düsseldorf, 10. Juni 2015 Daniel Horwedel. APEX und Phonegap?

Transkript

1 Das kann APEX doch mit HTML5! APEX connect Düsseldorf, 10. Juni 2015 Daniel Horwedel WGV-Horwedel,

2 Agenda Vorstellung Strategien zur Entwicklung mobiler Anwendungen HTML 5 Elemente APIs Kamera GPS Offline-Fähigkeiten & Caching Benachrichtigungen Fazit Seite 2

3 Württembergische GemeindeVersicherung a.g. Württembergische GemeindeWGVWGVVersicherung AG Lebensversicherung AG Versicherung WGV-Informatik und Media GmbH wgv Versicherungen wertvolles günstig versichert Leistungsstarker Schutz zu sehr günstigen Konditionen. Innovative Versicherungskonzepte als Antwort auf die Herausforderungen der Zukunft. Seite 3

4 Mobile Anwendungen entwickeln: Strategien Native Anwendungen Vorteile Nachteile Performance Plattformspezifisch Hardware & OS-Features komplett nutzbar hoher Entwicklungsaufwand Usability-Richtlinien der Betriebssysteme 100% umsetzbar verschiedene Programmiersprachen Seite 4

5 Mobile Anwendungen entwickeln: Strategien Hybride Anwendungen Vorteile Single Source hardware-spezifische Features nutzbar nur eine Entwicklungsumgebung Nachteile Zwischenschicht durch zusätzliches Framework Performance OS-spezifische UsabilityRichtlinien nicht immer umsetzbar Seite 5

6 Mobile Anwendungen entwickeln: Strategien Web-Anwendungen (HTML5 & JS) Vorteile Performance Features teilweise auch in Desktop-Browsern nutzbar kombinierbar mit Responsive Anwendungen Nachteile Unterschiedlicher Implementierungsstatus in verschiedenen Browsern teilweise PerformanceEinbußen Seite 6

7 HTML5 was ist das eigentlich? Kombination HTML, JS, CSS neue HTML-Elemente neue HTML-Attribute JS-APIs Fokus auf Mobile und Semantik Umsetzung nicht einheitlich Seite 7

8 HTML5 Mobile-Optimierte Elemente & Attribute INPUT-Element number <input type="number" name="quantity" min="1" max="5"> date <input type="date" name="bday"> <input type=" " name=" "> tel <input type="tel" name="usrtel"> url <input type="tel" name="usrtel"> Seite 8

9 HTML5 Mobile-Optimierte Elemente & Attribute DEMO (1) Seite 9

10 Kamera getusermedia Stream API direkter Zugriff auf Kamera-Schnittstelle vordere & hintere Kamera auswählbar je nach Implementierung Autofokus kontinuierlich oder nur initial Seite 10

11 Kamera Seite 11

12 Kamera DEMO (2) Seite 12

13 Kamera - Browserunterstützung Seite 13

14 Kamera HTML-Input-Element Bilder-Verzeichnis des Gerätes Kamera über System-Kamera-App App-Auswahl-Dialog schränkt Usability ein Seite 14

15 Kamera Seite 15

16 Kamera DEMO (3) Seite 16

17 Kamera - Barcodescanner Barcode-Scanner (EAN, Code 128, UPC, ) Umsetzung mittels getusermedia Stream API JS-Library quagga.js analysiert Video-Stream Erweiterung der zxing-library Rückgabewert in APEX-Element speichern Probleme Erkennung sehr ressourcenlastig Einsatz von Webworkern Alternative: statisches Bild kontinuierlicher Autofokus nur in wenigen Browsern Seite 17

18 Kamera - Barcodescanner App.init(); // (...) Quagga.onDetected(function(result) { var code = result.coderesult.code; if (App.lastResult!== code) { App.lastResult = code; var $node = null, canvas = Quagga.canvas.dom.image; alert("gefunden: " + code); $node.find("img").attr("src", canvas.todataurl()); $node.find("h4.code").html(code); $("#result_strip ul.thumbnails").prepend($node); } }); }); Seite 18

19 Kamera - Barcodescanner DEMO (4) Seite 19

20 Kamera - QR-Codescanner QR-Scanner (EAN, Code 128, UPC, ) Umsetzung analog Barcode-Scanner getusermedia / Stream API JS-Library html5-qrcode analysiert Video-Stream basiert auf zxing-library Rückgabewert in APEX-Element speichern Performance-Ansprüche geringer als Barcode-Scanner Seite 20

21 GPS & Geolocation navigator.geolocation PCs & Notebooks: Netzwerk Mobilgeräte: Netzwerk, WLAN & GPS einmalige oder dauerhafte Positionsermittlung ermittelbare Daten: Position Geschwindigkeit Höhe GPS Referenzzeit Genauigkeit Seite 21

22 GPS DEMO (5) Seite 22

23 GPS - Browserunterstützung Seite 23

24 Offline-Funktionalitäten IndexedDB Datenbank im Browser-Kontext Persistente Datenspeicherung Key-Value-DB B-Tree-Indexe über alle Datensätze einheitliche API unterschiedliche Implementierungen Seite 24

25 Offline-Funktionalitäten - Browserunterstützung Seite 25

26 Caching ApplicationCache Manifest-Datei legt zu cachende Dateien fest Manifest-Datei enthält Definitionen für Online- und OfflineVerhalten sowie Fallback für Fehler Zwei Haupt-Anwendungsfelder Offline-Verwendung der Anwendung Performance: geringeres Datenvolumen Aktualisierung gecacheter Dateien über JavaScript Seite 26

27 Caching - Browserunterstützung Seite 27

28 Benachrichtigungen Vibration Dauer einstellbar Akkubelastung Notification-API Nachrichten in Systemleiste auch im Hintergrund möglich, aber Browser muss aktiv sein Push-Message-API Unabhängig von aktivem Browser derzeit einzige Implementierung: GCM Seite 28

29 Benachrichtigungen DEMO (6) Seite 29

30 Benachrichtigungen - Browserunterstützung Seite 30

31 HTML5 statt Phonegap? Fazit und Ausblick Browser-Unterstützung ios: Safari unterstützt sehr wenig Features Android: Umfang unterschiedlich Performance durch Webworker parallele Bearbeitung Akku-Belastung teilweise höher als bei nativen Anwendungen Usability durch Sicherheitsfragen eingeschränkt Seite 31

32 Links & Ressourcen Weiterführende Quellen Übersicht über Browserunterstützung: HTML5-Showcase: Barcode-Scanner: QR-Scanner: Seite 32

33 Fragen & Antworten Q&A Seite 33

34 Ihr Ansprechpartner Vielen Dank für die Aufmerksamkeit WGV-Informatik und Media GmbH Daniel Horwedel Tübinger Str Stuttgart Tel: Seite 34