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.

peter@gfu.net, @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!