Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Herzlich Willkommen!Gleich geht es los.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Cross Platform Apps mit Visual Studio
und Apache CordovaPeter Hecker
GFU Cyrus AG, Köln
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Peter Hecker
• Seit 1986: „Entwickler, Trainer“
• Seit 1995: „Web 1.0“
• Seit 2009: „Mobile Web“
• @phecker65
GFU Cyrus AG„Ihr Partner für IT-Schulungen“
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Cross Platform Apps mit Visual Studio
und Apache Cordova
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Cross Platform Apps
• Cross Device
• Smartphone, Tablet, Notebook, PC, TV, Car, Watch, Glasses etc.
• Cross Operating System
• Android, iOS, Windows, OS X, Linux etc.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Cross Platform Apps• „Platform/Runtime - Browser“
• „API/Framework - Web-Stack“
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Visual Studio 2015https://msdn.microsoft.com/en-us/library/
dn771545(v=vs.140).aspx
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
http://cordova.apache.org/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Von PhoneGap nach Apache Cordova
• 04/2009: Entwicklung durch Nitobi
• 10/2011: Kauf von Adobe
• 10/2011: Apache Cordova
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
http://phonegap.com/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Native, Web und Hybrid-Apps im Vergleich
Quelle: http://blog.meltmedia.com/2013/05/theres-more-than-one-way-to-build-mobile-apps/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
$ sudo npm install cordova -g
$ cordova create myapp
$ cd myapp
$ cordova platform add ios android
$ cordova emulate ios
https://nodejs.org/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
http://phonegap.com/about/feature/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Core Plugins
Persistenz
• LocalStorage • WebSQL • Indexed DB • FileSystem • File Transfer • Contacts
Sensorik
• Device • Device Motion
(Accelerometer) • Device
Orientation (Compass)
• Battery Status • Network
Information (Connection)
• Geolocation
Multimedia
• Media • Media Capture • Camera • InAppBrowser
Utilities
• Globalization • Splashscreen • Dialogs • Vibration
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
The Apache Cordova Plugins Registryhttp://plugins.cordova.io
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Working with PhoneGap Plugins
[ 238 ]
Since Version 3.0, all the PhoneGap APIs have been converted to plugins, which means having a deep understanding of the plugins is now even more important for a PhoneGap developer.
The user interface and the business logic are the app's main source code and are the parts on which most developers concentrate their development efforts. The custom plugins are strictly integrated in the framework and are exposed to the user through JavaScript. PhoneGap provides a callback architecture that allows a developer to design a custom plugin and extend its functionalities. You can imagine a plugin as an additional component of the framework that works like all the PhoneGap APIs: it acts as a bridge between the WebView and the native platform on which the app is running.
All the PhoneGap APIs that you have learned so far rely on the same architecture so you can safely consider them as native plugins.
When you plan to write a custom plugin, keep in mind that you have to write the native code from scratch for all the platforms you want to support. Before starting to write a plugin you should check if what you are searching for has been implemented already at https://github.com/phonegap/phonegap-plugins. This repository is not a comprehensive list but the community around PhoneGap is working hard to keep it up-to-date.
Architektur eines PluginPhoneGap / Cordova - API
Quelle: PhoneGap 3 Beginner’s Guide
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
https://www.visualstudio.com/en-us/features/cordova-vs.aspx
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
https://msdn.microsoft.com/en-us/library/dn757054(v=vs.140).aspx
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Projekt erstellen
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Cordova ist kein UI/UX-Framework
und auch kein App-Framework!
???
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
???
UI/UX-Framework
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
???
App-Framework
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
• „Everybody loves AngularJS“
• Ionic basiert auf AngularJS
• Alternativen:
• jQueryMobile
• Sencha Touch
• Kendo UI
• Onsen UI
• …
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
http://sworkit.com/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
https://angular-ui.github.io/bootstrap/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
http://mobileangularui.com/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
https://material.angularjs.org/#/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
http://ngcordova.com/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Microsoft und AngularJShttp://t3n.de/news/angularjs-20-typescript-597814/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Microsoft und Cross Platformhttp://news.microsoft.com/2014/11/12/microsoft-takes-net-open-source-and-cross-platform-adds-new-development-capabilities-with-visual-studio-2015-
net-2015-and-visual-studio-online/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
https://wiki.apache.org/cordova/who
AdobeBlackBerry
GoogleIBM
Intel CorporationMicrosoft Open Technologies Inc.
Mozilla
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Zusammenfassung
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
[email protected], @phecker65, 0221/828090
„Fragen, Anregungen, Wünsche“
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Das war’s!