SlideShare ist ein Scribd-Unternehmen logo
Apache
Cordova
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ßerhalb
des 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-On
Erste 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/breezejs
var 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.de
christopher.wennhold@erminas.de
Tel.:0441/249 287-0

Weitere ähnliche Inhalte

Was ist angesagt?

Ecm 5 13_djaafar_jas_forge
Ecm 5 13_djaafar_jas_forgeEcm 5 13_djaafar_jas_forge
Ecm 5 13_djaafar_jas_forge
Jasmine Conseil
 
Apache DeviceMap - Web-Dev-BBQ Stuttgart
Apache DeviceMap - Web-Dev-BBQ StuttgartApache DeviceMap - Web-Dev-BBQ Stuttgart
Apache DeviceMap - Web-Dev-BBQ Stuttgart
Werner Keil
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft AG
 
2011_Herbstcampus_Rapid_Cloud_Development_with_Spring_Roo
2011_Herbstcampus_Rapid_Cloud_Development_with_Spring_Roo2011_Herbstcampus_Rapid_Cloud_Development_with_Spring_Roo
2011_Herbstcampus_Rapid_Cloud_Development_with_Spring_Roo
Kai Wähner
 
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
LeanIX GmbH
 
Ionic 3
Ionic 3Ionic 3
DevOps der Triple-E Klasse - Eclipse DemoCamp
DevOps der Triple-E Klasse - Eclipse DemoCampDevOps der Triple-E Klasse - Eclipse DemoCamp
DevOps der Triple-E Klasse - Eclipse DemoCamp
Werner Keil
 
.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht
.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht
.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht
Jürgen Gutsch
 
Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009
greenrobot
 
Cloud Computing - PaaS
Cloud Computing - PaaSCloud Computing - PaaS
Cloud Computing - PaaS
Thomas Bachmann
 
Integration von Security-Checks in die CI-Pipeline
Integration von Security-Checks in die CI-PipelineIntegration von Security-Checks in die CI-Pipeline
Integration von Security-Checks in die CI-Pipeline
OPEN KNOWLEDGE GmbH
 
Windows Azure Platform Overview
Windows Azure Platform   OverviewWindows Azure Platform   Overview
Windows Azure Platform Overview
Oliver Michalski
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
Dominik Helleberg
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
kkramhoeft
 
Serverless: The Missing Manual
Serverless: The Missing ManualServerless: The Missing Manual
Serverless: The Missing Manual
OPEN KNOWLEDGE GmbH
 

Was ist angesagt? (15)

Ecm 5 13_djaafar_jas_forge
Ecm 5 13_djaafar_jas_forgeEcm 5 13_djaafar_jas_forge
Ecm 5 13_djaafar_jas_forge
 
Apache DeviceMap - Web-Dev-BBQ Stuttgart
Apache DeviceMap - Web-Dev-BBQ StuttgartApache DeviceMap - Web-Dev-BBQ Stuttgart
Apache DeviceMap - Web-Dev-BBQ Stuttgart
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
2011_Herbstcampus_Rapid_Cloud_Development_with_Spring_Roo
2011_Herbstcampus_Rapid_Cloud_Development_with_Spring_Roo2011_Herbstcampus_Rapid_Cloud_Development_with_Spring_Roo
2011_Herbstcampus_Rapid_Cloud_Development_with_Spring_Roo
 
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
 
Ionic 3
Ionic 3Ionic 3
Ionic 3
 
DevOps der Triple-E Klasse - Eclipse DemoCamp
DevOps der Triple-E Klasse - Eclipse DemoCampDevOps der Triple-E Klasse - Eclipse DemoCamp
DevOps der Triple-E Klasse - Eclipse DemoCamp
 
.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht
.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht
.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht
 
Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009
 
Cloud Computing - PaaS
Cloud Computing - PaaSCloud Computing - PaaS
Cloud Computing - PaaS
 
Integration von Security-Checks in die CI-Pipeline
Integration von Security-Checks in die CI-PipelineIntegration von Security-Checks in die CI-Pipeline
Integration von Security-Checks in die CI-Pipeline
 
Windows Azure Platform Overview
Windows Azure Platform   OverviewWindows Azure Platform   Overview
Windows Azure Platform Overview
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Serverless: The Missing Manual
Serverless: The Missing ManualServerless: The Missing Manual
Serverless: The Missing Manual
 

Ähnlich wie Mobile Anwendungen mit Apache Cordova

Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
Ralf Lütke
 
Top 10 Internet Trends 2007
Top 10 Internet Trends 2007Top 10 Internet Trends 2007
Top 10 Internet Trends 2007
Jürg Stuker
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellen
Michael Kühnel
 
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch SalzburgSlides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
DNUG e.V.
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
Markus Eiglsperger
 
B3 Lotus Expeditor Und Composite Applications
B3 Lotus Expeditor Und Composite ApplicationsB3 Lotus Expeditor Und Composite Applications
B3 Lotus Expeditor Und Composite Applications
Andreas Schulte
 
Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!
inovex GmbH
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
Marc Müller
 
Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4
Digicomp Academy AG
 
Webcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing ToolsWebcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing Tools
Patric Dahse
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
greenrobot
 
Die wichtigsten Technologien für die Entwicklung von Webanwendungen
Die wichtigsten Technologien für die Entwicklung von WebanwendungenDie wichtigsten Technologien für die Entwicklung von Webanwendungen
Die wichtigsten Technologien für die Entwicklung von Webanwendungen
YUHIRO
 
PHPblue LOS!NRW
PHPblue LOS!NRWPHPblue LOS!NRW
PHPblue LOS!NRW
Andreas Schulte
 
OSGi: Tools und Entwicklungsprozesse in OSGi Projekten
OSGi: Tools und Entwicklungsprozesse in OSGi ProjektenOSGi: Tools und Entwicklungsprozesse in OSGi Projekten
OSGi: Tools und Entwicklungsprozesse in OSGi Projekten
IKS Gesellschaft für Informations- und Kommunikationssysteme mbH
 
Einführung in die Android Applikationsentwicklung
Einführung in die Android ApplikationsentwicklungEinführung in die Android Applikationsentwicklung
Einführung in die Android Applikationsentwicklung
Thorsten Weiskopf
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
Torsten Fink
 
Rapid Application Development mit Openobject
Rapid Application Development mit OpenobjectRapid Application Development mit Openobject
Rapid Application Development mit Openobject
openbig
 
Deutsche Wolke Präsentation 100114
Deutsche Wolke Präsentation 100114Deutsche Wolke Präsentation 100114
Deutsche Wolke Präsentation 100114
Georg Klauser
 
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge UnternehmenGewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Bjoern Reinhold
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
DNUG e.V.
 

Ähnlich wie Mobile Anwendungen mit Apache Cordova (20)

Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
 
Top 10 Internet Trends 2007
Top 10 Internet Trends 2007Top 10 Internet Trends 2007
Top 10 Internet Trends 2007
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellen
 
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch SalzburgSlides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
 
B3 Lotus Expeditor Und Composite Applications
B3 Lotus Expeditor Und Composite ApplicationsB3 Lotus Expeditor Und Composite Applications
B3 Lotus Expeditor Und Composite Applications
 
Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
 
Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4
 
Webcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing ToolsWebcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing Tools
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
 
Die wichtigsten Technologien für die Entwicklung von Webanwendungen
Die wichtigsten Technologien für die Entwicklung von WebanwendungenDie wichtigsten Technologien für die Entwicklung von Webanwendungen
Die wichtigsten Technologien für die Entwicklung von Webanwendungen
 
PHPblue LOS!NRW
PHPblue LOS!NRWPHPblue LOS!NRW
PHPblue LOS!NRW
 
OSGi: Tools und Entwicklungsprozesse in OSGi Projekten
OSGi: Tools und Entwicklungsprozesse in OSGi ProjektenOSGi: Tools und Entwicklungsprozesse in OSGi Projekten
OSGi: Tools und Entwicklungsprozesse in OSGi Projekten
 
Einführung in die Android Applikationsentwicklung
Einführung in die Android ApplikationsentwicklungEinführung in die Android Applikationsentwicklung
Einführung in die Android Applikationsentwicklung
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
Rapid Application Development mit Openobject
Rapid Application Development mit OpenobjectRapid Application Development mit Openobject
Rapid Application Development mit Openobject
 
Deutsche Wolke Präsentation 100114
Deutsche Wolke Präsentation 100114Deutsche Wolke Präsentation 100114
Deutsche Wolke Präsentation 100114
 
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge UnternehmenGewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
 

Mehr von Yvette Teiken

Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
Yvette Teiken
 
BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...
BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...
BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...
Yvette Teiken
 
Datenanalyse in der Praxis
Datenanalyse in der PraxisDatenanalyse in der Praxis
Datenanalyse in der Praxis
Yvette Teiken
 
Praktisches Selbst- und Zeitmanagement in der Wissensgesellschaft
Praktisches Selbst- und Zeitmanagement in der WissensgesellschaftPraktisches Selbst- und Zeitmanagement in der Wissensgesellschaft
Praktisches Selbst- und Zeitmanagement in der Wissensgesellschaft
Yvette Teiken
 
A common meta model for data analysis based on DSM
A common meta model for data analysis based on DSMA common meta model for data analysis based on DSM
A common meta model for data analysis based on DSM
Yvette Teiken
 
Using SLE for creation of data warehouses
Using SLE for creation of data warehousesUsing SLE for creation of data warehouses
Using SLE for creation of data warehouses
Yvette Teiken
 
MIcrosoft Self Service BI
MIcrosoft Self Service BIMIcrosoft Self Service BI
MIcrosoft Self Service BI
Yvette Teiken
 
Microsoft on Big Data
Microsoft on Big DataMicrosoft on Big Data
Microsoft on Big Data
Yvette Teiken
 
Microsoft Azure in der Praxis
Microsoft Azure in der PraxisMicrosoft Azure in der Praxis
Microsoft Azure in der Praxis
Yvette Teiken
 
Net ug oldenburg_2015_03_intro
Net ug oldenburg_2015_03_introNet ug oldenburg_2015_03_intro
Net ug oldenburg_2015_03_intro
Yvette Teiken
 

Mehr von Yvette Teiken (10)

Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
 
BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...
BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...
BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...
 
Datenanalyse in der Praxis
Datenanalyse in der PraxisDatenanalyse in der Praxis
Datenanalyse in der Praxis
 
Praktisches Selbst- und Zeitmanagement in der Wissensgesellschaft
Praktisches Selbst- und Zeitmanagement in der WissensgesellschaftPraktisches Selbst- und Zeitmanagement in der Wissensgesellschaft
Praktisches Selbst- und Zeitmanagement in der Wissensgesellschaft
 
A common meta model for data analysis based on DSM
A common meta model for data analysis based on DSMA common meta model for data analysis based on DSM
A common meta model for data analysis based on DSM
 
Using SLE for creation of data warehouses
Using SLE for creation of data warehousesUsing SLE for creation of data warehouses
Using SLE for creation of data warehouses
 
MIcrosoft Self Service BI
MIcrosoft Self Service BIMIcrosoft Self Service BI
MIcrosoft Self Service BI
 
Microsoft on Big Data
Microsoft on Big DataMicrosoft on Big Data
Microsoft on Big Data
 
Microsoft Azure in der Praxis
Microsoft Azure in der PraxisMicrosoft Azure in der Praxis
Microsoft Azure in der Praxis
 
Net ug oldenburg_2015_03_intro
Net ug oldenburg_2015_03_introNet ug oldenburg_2015_03_intro
Net ug oldenburg_2015_03_intro
 

Mobile Anwendungen mit Apache Cordova

  • 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
  • 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
  • 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/