ApacheCordova

Vortrag

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

23. Apr 2015

Tag des Bieres

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, …

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

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

23. Apr 2015

erminas GmbH

Hilmar Bunjes

Christopher Wennhold

23. Apr 2015

Entwicklung für mobile Endgeräte

23. Apr 2015

Möglichkeiten mobiler Entwicklung Wie kann man mobil entwickeln?

Quelle: www.ibm.com

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

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

23. Apr 2015

Hybrid Application

Cordova

Mischung aus Native und Web Application

Native dort, wo notwendig

Rest HTML/JS

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)

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ßerhalbdes Unternehmens

Schnelles Ausrollen

23. Apr 2015

Apache Cordova

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

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

23. Apr 2015

Zugriff auf System API

JavaScript Cordova System API

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

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

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

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

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

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

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

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

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

23. Apr 2015

Entwicklungsumgebungen – Telerik Telerik AppBuilder

„Integrated Cloud Environment“

Device Simulator für iOS, Windows Phone und Android

Kostenpflichtig

IDE-Auswahl frei

23. Apr 2015

Entwicklungsumgebungen – weitere WebStorm (jetbrains)

NetBeans (Oracle)

23. Apr 2015

Aufbau Cordova App

App erstellen

cordova create test_app

23. Apr 2015

Aufbau Cordova App

Plattformen verwalten

cordova platform ls

Plattformen hinzufügen (nur wenn SDK auch vorhanden ist)

cordova platform add <platform>

23. Apr 2015

Aufbau Cordova App

Anwendung Info

cordova info

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:

23. Apr 2015

Aufbau Cordova App

Einstieg Entwicklung

Anwendung ist im Grunde HTML/CSS/JS

Wichtig: Initialisierung beim Event „deviceready“

23. Apr 2015

Hands-OnErste Cordova Anwendung mit Visual Studio und Tools for Apache Cordova

23. Apr 2015

Pause

23. Apr 2015

Tiefergehende Themen

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

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

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“

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

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

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

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

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

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

23. Apr 2015

Datenaustausch (REST, OData, …) Nutzung bestehender JavaScript Frameworks

Bspw. http://www.getbreezenow.com/breezejsvar query = breeze.EntityQuery .from("Customers") .where("CompanyName", "startsWith", "A") .orderBy("CompanyName");

Beispiel mit Angular JS folgt

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>

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

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/

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

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/

23. Apr 2015

Danke!

hilmar.bunjes@erminas.dechristopher.wennhold@erminas.de

Tel.:0441/249 287-0