1. Apache
Cordova
Vortrag

2. 23. Apr 2015
User Group allgemein
 Windows 10 Dev: wahrscheinlich Okt-Dez
 Mai: Big Data mit MS Tooling (Yvette, 28.5.)
 Wearables!!!
 Nachtrag für Perceptual Computing Vortrag
 Handpose von MS Research für Kinect zur Hand-
/Fingererkennung:
http://www.golem.de/news/handpose-microsoft-
entwickelt-kinect-fuer-die-hand-1504-113667.html

3. 23. Apr 2015
Tag des Bieres

4. 23. Apr 2015
Apache Cordova
 Vorstellung
 Entwicklung für mobile Endgeräte
 Was ist Cordova? - und was nicht?
 Entwicklungsumgebungen
 Hands-On: Cordova-App
 Weitergehende Themen: Hardware, Plugins,
Sicherheit, IndexedDB, REST, OAuth, …

5. 23. Apr 2015
erminas GmbH
 Standort: Oldenburg
 Gegründet: 2009
 Schwerpunkte
 Professionelle Softwareentwicklung
 .NET Entwicklung (Web, SharePoint, Server)
 Mobile (Cordova, Xamarin, Sitrion ONE)
 Open Text Web Site Management
 Atlassian Jira/Confluence

6. 23. Apr 2015
erminas GmbH – Was wir machen
 Beratung rund um mobile Apps
 Welche Technologien? Hybrid oder nativ, was anderes?
 Was gibt es zu beachten?
 Testing von Apps (insb. Usability, Performance)
 Entwicklung von hybriden Apps
 Cordova
 Xamarin
 Anbindung von Apps an Backend-Systeme
 Partner von Sitrion ONE

7. 23. Apr 2015
erminas GmbH
Hilmar Bunjes
Christopher
Wennhold

8. 23. Apr 2015
Entwicklung für mobile
Endgeräte

9. 23. Apr 2015
Möglichkeiten mobiler Entwicklung
 Wie kann man mobil entwickeln?
Quelle:
www.ibm.com

10. 23. Apr 2015
Native Application
 Nativ: Entwicklung direkt für eine Plattform
 Nutzung der vorgesehenen Sprache
 Android: Java Android
 iOS: Swift (früher Objective-C)
 Windows (Phone): .NET
 Blackberry: C++/Qt, HTML/JS, ActionScript/AIR, Android
 Volle Nutzung der Plattform
 Höchste Performance
 Kaum Wiederverwendung von Entwicklungen

11. 23. Apr 2015
Web Application
 Web: Webseite als App
 App-Symbol öffnet Webseite
 War mal recht beliebt, hat aber nachgelassen
 Alle Nachteile vereint
 nicht nativ
 kein offline
 langsam
 kein Systemzugriff

12. 23. Apr 2015
Hybrid Application
 Cordova
 Mischung aus Native und Web Application
 Native dort, wo notwendig
 Rest HTML/JS

13. 23. Apr 2015
Hybrid Application Sonderfall
 Xamarin
 Eher Hybrid Development
 Entwicklung der Apps in .NET (incl. Async, Generics, …)
 Umsetzung in Native Apps
 Nutzer merkt keinen Unterschied
 Große Teile der Applikation können wiederverwendet werden
 GUI Designer (Xamarin.Forms) vorhanden
 Sehr breite Nutzerbasis (Entwickler und Unternehmen)

14. 23. Apr 2015
„Container“ Application
 Sitrion ONE
 Hub für anfallende Aufgaben / Informationen
 Schnelles Entwickeln kleiner Apps / „Micro-App“
 Anbindung Backend:
SAP, Oracle, SQL Server, salesforce, Office365
 Nativ auf Endgeräten
 BYOD
 Keine Speicherung von Daten außerhalb
des Unternehmens
 Schnelles Ausrollen

15. 23. Apr 2015
Apache Cordova

16. 23. Apr 2015
Was ist Cordova?
 Apache Cordova is a platform for building native mobile
applications using HTML, CSS and JavaScript
 und
 Apache Cordova is a set of device APIs that allow a mobile
app developer to access native device function
 PhoneGap
 Entwickelt von Nitobi
 2011 von Adobe aufgekauft
 Freigabe der Basis an Apache
 Kommerziell: PhoneGap Build zum App Bau

17. 23. Apr 2015
Also was ist Cordova?
 Native Container für Application
 Chromeless Browser – Webseite ohne Rahmen
 Zugriff auf die Plattform via Interfaces
 Sammlung von Plugins
 Erweiterungsmöglichkeiten durch Plugins

18. 23. Apr 2015
Zugriff auf System API
JavaScript Cordova System API

19. 23. Apr 2015
Unterstützte Plattformen
 Android 2.3+/API10 (bald ab 4+/API14+)
 BlackBerry 10
 iOS 5+
 Windows Phone 8+
 Windows 8+
 BB < 10 bis 3.2.0
 Firefox OS
 Amazon Fire OS
 Tizen
 Ubuntu

20. 23. Apr 2015
Plattform Zugriff (iOS, Android, Win, BB)
 Accelerometer
 Camera
 Compass (BB ab 10)
 Contacts
 File
 Geolocation
 Media (BB ab 10)
 Network
 Notification (alert, sound, vibration)
 Storage

21. 23. Apr 2015
Vorteile von Cordova
 Schneller Einstieg mit HTML/CSS/JS Wissen
 Viele Entwickler in dem Bereich
 Keine native Entwicklung für mehrere Plattformen
 Verwendung von Web-Frameworks (jQuery, AngularJS, …)
 Viel Wiederverwendung
 Open Source

22. 23. Apr 2015
Nachteile von Cordova
 Anwendung ist nicht nativ
 User Experience anders als nativ
 Anwendung fühlt sich langsamer an
 Keine Desktop-Applikation
 (Kein Zugriff auf System API, sondern nur über Plugins)
 Gewisse Einschränkungen
 App-Größe
 Abspielen von Videos (Android)

23. 23. Apr 2015
Entwicklungsumgebungen – CLI
 Konsole – Direkt von Apache Cordova
 Benötigt: Node.js, git
 Plattform-spezifische Projekte werden automatisch erstellt
 Anpassung über Merges / Hooks möglich
 Emulator und Debug Unterstützung
 Volle Unterstützung aller Plattformen
 Eventuell viel Handarbeit
 Freie Wahl der HTML/JS IDE

24. 23. Apr 2015
Entwicklungsumgebungen – Visual
Studio
 Visual Studio 2013 / 2015
 „Tools for Apache Cordova“
 Kostenlos (wenn VS vorhanden)
 Supported (Dev & Debug)
 Android 2.3.3+ (4.4+ bevorzugt)
 iOS 6, 7, und 8 (Mac benötigt)
 Windows 8 and 8.1
 Windows Phone 8 and 8.1
 Android Emulator integriert

25. 23. Apr 2015
Entwicklungsumgebungen – Visual
Studio
 Sehr einfache Unterstützung
 Es funktioniert einfach
 Direktes Debugging aus dem VS
 Auch für iOS!
 Tools wie ReSharper direkt integriert
 Plugin aus Git installieren noch etwas problematisch
 Starke Weiterentwicklung
 Tools: https://www.microsoft.com/en-
us/download/details.aspx?id=42675

26. 23. Apr 2015
Entwicklungsumgebungen – Eclipse
I
 PhoneGap Entwicklungsumgebung
 Eclipse-basierend
 Windows, Mac, Linux
 Android Emulator kann angeschlossen werden
 Debugging
 Jede Plattform hat ein eigenes Projekt
 Ende 2013 quasi eingestellt

27. 23. Apr 2015
Entwicklungsumgebungen – Eclipse
II
 Eclipse THyM (The Hybrid Mobile)
 0.1.0 im Jan 2015 vorgestellt
 Juni 2015: 1.0 geplant
 Ziel: Neue Eclipse Cordova Plattform
 Supported von RedHat

28. 23. Apr 2015
Entwicklungsumgebungen –
PhoneGap
 PhoneGap Desktop App
 0.1.1 Beta von Dez 2014
 Open Source von Adobe
 Windows / Mac
 Node.js benötigt
 Integration mit PhoneGap Build Tools

29. 23. Apr 2015
Entwicklungsumgebungen – Telerik
 Telerik AppBuilder
 „Integrated Cloud Environment“
 Device Simulator für iOS, Windows Phone und Android
 Kostenpflichtig
 IDE-Auswahl frei

30. 23. Apr 2015
Entwicklungsumgebungen – weitere
 WebStorm (jetbrains)
 NetBeans (Oracle)

31. 23. Apr 2015
Aufbau Cordova App
 App erstellen
 cordova create test_app

32. 23. Apr 2015
Aufbau Cordova App
 Plattformen verwalten
 cordova platform ls
 Plattformen hinzufügen (nur wenn SDK auch vorhanden ist)
 cordova platform add <platform>

33. 23. Apr 2015
Aufbau Cordova App
 Anwendung Info
 cordova info

34. 23. Apr 2015
Aufbau Cordova App
 Anwendung erstellen (platform optional)
 cordova build <platform> (=>prepare + compile)
 Starten, emulieren oder testen
 cordova emulate <platform>
 cordova run <platform>
 cordova serve
Beispiel Android dir:

35. 23. Apr 2015
Aufbau Cordova App
 Einstieg Entwicklung
 Anwendung ist im Grunde HTML/CSS/JS
 Wichtig: Initialisierung beim Event „deviceready“

36. 23. Apr 2015
Hands-On
Erste Cordova Anwendung mit
Visual Studio und Tools for Apache Cordova

37. 23. Apr 2015
Pause

38. 23. Apr 2015
Tiefergehende Themen

39. 23. Apr 2015
Cordova Events
 deviceready: Cordova (Container + JS geladen)
 document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use device APIs
}
 pause/resume: Anwendung in den Hintergrund verlagert
 Bei Android nach Ausführung vorher möglich
 Bei iOS nur Reaktion nach Aktivierung möglich (+ resign/active für Lock
möglich)
 online / offline: Device „denkt“, wir sind online oder offline
 backbutton / menubutton / searchbutton
 Android / Windows Events

40. 23. Apr 2015
Push Notifications
 Push Plugin: https://github.com/phonegap-build/PushPlugin
 Plattform-spezifische Push Services werden unterstützt
 Die Nachrichten werden von einem Server aus geschickt
 Diverse Dienste zur Vereinfachung des Handlings
 Azure Mobile Services
 Amazon SNS
 Google Cloud

41. 23. Apr 2015
Bibliotheken
 jQuery Mobile
 Bekannt durch jQuery
 Einfacher Einstieg
 Sencha Touch
 Basiert auf ExtJS
 Bringt teilweise UI mit
 Einstieg komplex
 AngularJS / ngTouch
 Sehr einfache Entwicklung
 Einstieg „mittel-komplex“

42. 23. Apr 2015
GUI Elemente
 Je nach Anwendung selbst machen oder fertiges Framework
 Sehr abhängig vom Aufwand und gewünschter Einarbeitung
 Bootstrap: http://getbootstrap.com/
 Onsen UI (frei): http://onsen.io
 AngularJS und jQuery Mobile supported
 Supersonic UI (frei): http://www.appgyver.com/supersonic/ui
 AngularJS supported

43. 23. Apr 2015
Sicherheit
 Einsatz typischerweise wie Webseiten
 VPN als sicherer Kanal möglich
 HTTPS-Verschlüsselung immer notwendig, wenn
personalisierte und schützenswerte Informationen
 Wichtig: Echtes Zertifikat und TLS
 OAuth zur Autorisierung mit Hilfe von OAuth-Services

44. 23. Apr 2015
Plugin Entwicklung
 Zugriff auf die Hardware und das System mit Plugins
 Bereitstellung der nativen APIs als JS Schnittstelle
 Beispiel: https://github.com/wildabeast/BarcodeScanner

45. 23. Apr 2015
Speicher / WebStorage
 WebStorage
 Name/Value Pairs: Nur Zeichenketten (also serialisieren)
 localStorage: Spezifisch für die Origin
 sessionStorage: Spezifisch für die Session
 Ähnlich Cookies, aber nicht im HTTP Header
 Quasi überall unterstützt (IE8+)
 5-10 MB Speicherplatz typischerweise

46. 23. Apr 2015
Speicher / Datenbank
 Web SQL Database
 Datenbank im Browser mit SQL-Dialekt
 FF/IE unterstützen es nicht, mobile Plattformen schon
 IndexedDB
 Ebenfalls DB-ähnliche Speicherung
 Breit unterstützt in neueren Versionen: Android 4.4+, IE10+, iOS
 Speicher
 Chrome: 20% von 50% des freien Speichers
 (wenn überschritten: Alles wird gelöscht)
 Firefox: Kein Limit, aber BLOBs > 50MB erfordern Erlaubnis

47. 23. Apr 2015
Speicher / Plugins – File API
 Zugriff auf lokales Dateisystem auf allen Plattformen
 Dateisysteme auf Geräten:
https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md
 Beispiel: cordova.file.dataDirectory für allg. Daten
 Auch temp und cache Verzeichnisse verfügbar
 Beispiel lesen:
window.resolveLocalFileSystemURL(cordova.file.dataDirectory,
function(dir) {
dir.getFile("log.txt", {create:true}, function(file) {…});
});
 Mehr Beispiele:
http://www.raymondcamden.com/2014/11/05/Cordova-Example-Writing-to-a-
file

48. 23. Apr 2015
Datenaustausch (REST, OData, …)
 Nutzung bestehender JavaScript Frameworks
 Bspw. http://www.getbreezenow.com/breezejs
var query = breeze.EntityQuery
.from("Customers")
.where("CompanyName", "startsWith", "A")
.orderBy("CompanyName");
 Beispiel mit Angular JS folgt

49. 23. Apr 2015
AngularJS
 MVC-Framework bei Google (weiter)entwickelt
 Ziel: Dynamische Web-Apps erstellen
 Auszeichnung des HTML Codes durch Angular-spezifische
Ausdrücke
 Zwei-Wege Data-Binding (Model / DOM)
 Beispiel:
<div ng-app ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div>Quantity: <input type="number" min="0" ng-model="qty"></div>
<div>Costs: <input type="number" min="0" ng-model="cost"></div>
<div><b>Total:</b> {{qty * cost | currency}}</div>
</div>

50. 23. Apr 2015
Best Practices
 Applikationen immer als Single Page Application (SPA)
 Neues Laden dauert lange und fühlt sich nicht gut an
 Touch Events statt Click Events
 Click Events werden mobil später gefeuert
 Nicht auf Netzwerk verlassen
 Netzwerk kann immer ausfallen
 Netzwerk kann immer langsam sein
 Nie die App darunter leiden lassen
 online/offline Events sind nicht zuverlässig – Ajax nutzen

51. 23. Apr 2015
Best Practices
 Auf Geräten testen
 Simulatoren / Emulatoren geben Hinweise auf das Gerät
 Es fühlt sich aber nie so an
 Mehrere verschiedene Geräte testen
 Design Guidelines beachten
 iOS:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html
 Android: https://developer.android.com/design/index.html
 WP:
https://msdn.microsoft.com/library/windows/apps/hh465424.aspx
 BB: http://developer.blackberry.com/design/bb10/

52. 23. Apr 2015
Best Practices
 Hooks für verschiedene Plattformen
 Keine Merges mehr verwenden
 Soviel wie möglich einheitlich machen (insb. JavaScript)
 Design sollte Plattform-spezifisch sein

53. 23. Apr 2015
Weitere Web Links
 cordova in einer Windows App
 Zertifikat: http://cordova.apache.org/news/2014/11/11/windows-
cert.html
 Platform spezifisch: winstore-jscompat:
https://github.com/MsopenTech/winstore-jscompat
 Plugins
 Phonegap Push Notifications: https://github.com/phonegap-
build/PushPlugin
 Barcode Scanner: https://github.com/wildabeast/BarcodeScanner
 JavaScript Frameworks
 Angular.js: https://angularjs.org/
 Mobile angular.js: http://mobileangularui.com/

54. 23. Apr 2015
Danke!
hilmar.bunjes@erminas.de
christopher.wennhold@erminas.de
Tel.:0441/249 287-0