.NET Usergroup Oldenburg 23. April 2015 - von Christopher Wennhold und Hilmar Bunjes -Mobile Anwendungen mit Apache Cordova. Apache Cordova (früher Phonegap) ist eine Plattform für Apps auf mobilen Geräten (Windows Phone, Windows 8+, iOS, Android, Blackberry, WebOS, Bada, Symbian). Mittels HTML/JS können Apps gebaut werden, die mit minimalen Anpassungen auf allen Plattformen laufen können. Wir zeigen die Idee hinter Cordova und Möglichkeiten, mit Cordova Apps zu entwickeln. Dabei wird Visual Studio als IDE verwendet, welches durch die "Visual Studio Tools for Apache Cordova" eine herausragende Plattform für hierfür geworden ist. Ebenfalls gibt es eine kurze Einführung in das Debugging und den Aufbau von Plugins für Cordova. Über die Sprecher: Christopher Wennhold leitet die mobile Entwicklung bei erminas in Oldenburg. Cordova ist dabei die erste Wahl, wenn es um plattformübergreifende Apps geht. Zusätzlich ist er .NET und Open Text WSM Entwickler, insbesondere im Web-Bereich. Hilmar Bunjes ist Gründer und Geschäftsführer von erminas. Ein Schwerpunkt sind mobile Apps im B2B-Bereich (u.a. mit Cordova). Daneben entwickeln wir Web-Applikationen mit .NET und Open Text WSM.

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