Cross-Plattform Apps mit

efficiency. we set IT up. Cross-Plattform Apps mit // 25.01.2017 // Werner Steinbinder // doubleslash // // doubleslash 1

Über mich > Werner Steinbinder > Student für Angewandte Informatik im 7. Semester an der Hochschule Ravensburg-Weingarten > Seit September 2016 Praktikant bei doubleslash Net-Business GmbH > Werner.Steinbinder@doubleslash.de > Werner.Steinbinder@hs-weingarten.de // doubleslash 2

1. Was ist Xamarin? 2. Xamarin vs Cordova 3. Live Entwicklung einer Xamarin App 4. Fazit & Ausblick // doubleslash 3

Was ist? [1] > Entwickler von Mono gründeten 2011 Xamarin > Xamarin wurde im März 2016 von Microsoft übernommen > Anfangs kostenpflichtig nun aber kostenlos verfügbar // doubleslash 4

Was ist? > Framework zur Erstellung nativer Cross-Plattform Apps > Android, ios, Windows Phone > MacOS, UWP > Baut auf dem.net Framework auf > 60%-100% des Codes muss nur einmal geschrieben werden und läuft unter allen Plattformen > Implementierung des UI mit XAML > UI Entwicklung auch mit C# möglich entspricht aber nicht den Best practice Beispielen > Implementierung von Logik/Backend mit C# // doubleslash 5

Was ist? // doubleslash 6

Was ist? Setup > XCode > ios SDK > Xamarin > Windows 8/8.1/10 > Visual Studio > Xamarin > Windows Phone 8/8.1/10 SDK > Android SDK > Emulator // doubleslash 7

Was ist? Setup // doubleslash 8

Was ist? Xamarin.Forms > Plattformübergreifendes UI-Toolkit > Native Benutzeroberfläche [3] // doubleslash 9

Was ist? [3] > Verschiedene Pages > ContentPage, NavigationPage, // doubleslash 10

Was ist? [3] > Verschiedene Layouts > StackLayout, GridLayout, ScrollView,. // doubleslash 11

Was ist? [3] > Verschiedene Controls > Button, Entry, Label, Picker, // doubleslash 12

Was ist? <ContentPage> <StackLayout> <Entry/> <Entry/> <Button Text="LOGIN"/> </StackLayout> </ContentPage> // doubleslash 13

Was ist? Code Behind // doubleslash 14

Was ist? Backend // doubleslash 15

Was ist? Noch mehr Backend aufteilen [11] // doubleslash 16

Was ist? Backend // doubleslash 17

Was ist? Portable Class Librarys (PCL) vs Shared Projects // doubleslash 18

Was ist? Shared Projects > Compiler-Direktive nötig [3] // doubleslash 19

Was ist? Compiler-Direktive > var path = "unknown"; > > #if WINDOWS_PHONE > path = "windowsphone"; > #else > > #if ANDROID > path = "android"; > #else > > #if IOS > path = "ios"; > #else [3] // doubleslash 20

Was ist? Shared Projects > In kleineren Projekten brauchbar > In umfangreicheren Projekten zu unübersichtlich und kompliziert [3] // doubleslash 21

Was ist? Portable Class Library (PCL) > Keine Compiler-Direktiven nötig > Leichter zu pflegen und zu testen > Code lesbarer > Plattformspezifische Implementierungen direkt im nativen Projekt [8] // doubleslash 22

Was ist? UI Anpassung auf verschiedene Geräte > Drei Möglichkeiten > Layouts > Code Behind > OnPlatform // doubleslash 23

Was ist? Layouts > UI über XAML erstellen und Layout Container erledigen beim Skalieren den Rest > Nur feste Pixelwerte angeben, wenn es nötig ist, besser vorgefertigte Attribute verwenden > Layout Container werden dadurch nicht in ihrer Größe beschränkt > Abhängig von ihren Kindelementen können sich Layout Container automatisch anpassen // doubleslash 24

Was ist? Layouts <StackLayout HorizontalOptions="FillAndExpand" Orientation="Vertical"> <Entry/> <Entry/> <Button Text= "LOGIN"/> </StackLayout> // doubleslash 25

Was ist? Layouts > HorizontalOptions="FillAndExpand" > Die Elemente in diesem Layout werden über die ganze verfügbare Breite des Bildschirms skaliert > Orientation="Vertical" > Alle Elemente in diesem Layout vertikal zueinander anordnen > Skalierung erfolgt hier durch vorgefertigte Attribute von Xamarin.Forms nicht durch feste Pixelwerte Layout Feste Pixelwerte // doubleslash 26

Was ist? Code Behind > UI Elemente über C# Code an das Display anpassen > Werte können dabei aus dem Gerät ausgelesen werden > Brauchbare Methode, orientiert sich allerdings nicht an den Best Practice Beispielen > Eignet sich erst, sobald man per XAML an die Grenzen stößt und ein gewisses Feintuning benötigt // doubleslash 27

Was ist? OnPlatform > Sollte nur bewusst verwendet werden > OnPlatform lässt sich auf viele Attribute (Größe, Farbe, etc.) wie auch auf fast alle UI Elemente anwenden > Durch feste Pixelwerte wird die Größe für UI Elemente unter Android, Windows Phone und ios festgelegt > Feste Pixelwerte zu vergeben ist genau das, was man vermeiden sollte // doubleslash 28

Was ist? OnPlatform <Button.WidthRequest> <OnPlatform x:typearguments="x:double" Android="110" WinPhone="150" ios="110" /> </Button.WidthRequest> // doubleslash 29

1. Was ist Xamarin? 2. Xamarin vs Cordova 3. Live Entwicklung einer Xamarin App 4. Fazit & Ausblick // doubleslash 30

vs Was ist Cordova? > Framework zur Erstellung hybrider mobiler Apps > Keine nativen Apps, da UI über Webtechnologien erstellt wird > Keine Web-App an sich, da sie in einem nativen Rahmen eingebettet wird > Implementierung mit HTML 5, CSS 3 und JavaScript > Frameworks wie Angular oder Bootstrap verwendbar > Plugins ermöglichen Zugriff auf Gerätefunktionen // doubleslash 31

vs vs [9] [10] // doubleslash 32

vs Anforderungen für Cloud App Anforderungen Cordova Xamarin Login Dateien uploaden (Zugriffsrechte für Dateien auf dem Device) Dateien downloaden (Tabellarische) Darstellung der hochgeladenen Dateien Dateien betrachten Dateien Löschen Link/E-Mail versenden Menü mit diversen Einstellungen Synchronisieren performant, schnell // doubleslash 33

vs // doubleslash 34 [5]

vs ios App Performance ipad Air 2 iphone 6 C++ ios 0,228 0,392 Swift ios 0,322 0,427 Xamarin ios 0,445 0,490 J2ObjC ios 0,650 0,691 Objective C-iOS 0,676 0,745 // doubleslash 35 [5]

vs // doubleslash 36 [5]

vs Android App Performance HTC Nexus 9 Moto X (2014) C++ Android 0,461 1,265 Xamarin Android 1,120 2,942 Java Android 1,169 2,948 // doubleslash 37 [5]

vs Cordova > Pro > Gute Dokumentation > JavaScript kann evtl. teilweise von Desktopversion übernommen werden > UI lässt sich einfacher nach eigenen Wünschen gestalten > Con > Kein natives UI > Schwierigkeiten bei ios Version <5.1.1 und Android Version <4.4 > Schwache Performance // doubleslash 38

1. Was ist Xamarin? 2. Xamarin vs Cordova 3. Live Entwicklung einer Xamarin App 4. Fazit & Ausblick // doubleslash 39

1. Was ist Xamarin? 2. Xamarin vs Cordova 3. Live Entwicklung einer Xamarin App 4. Fazit & Ausblick // doubleslash 40

Fazit & Ausblick > Pro > Es lässt sich mit Xamarin.Forms schnell ein brauchbarer Prototyp für alle 3 Plattformen entwickeln > Entwicklung mit XAML nicht besonders schwierig > UI sieht auf jeder Plattform nativ aus und läuft performant > Gute Community. Gute Hilfe im Xamarin Forum > Xamarin wird von Microsoft vorangetrieben // doubleslash 41

Fazit & Ausblick > Con > Einrichtung lang, aufwendig und speicherintensiv. > Setup an sich fehleranfällig bei Verwendung unterschiedlicher Versionen oder Updates. > Dokumentation der Xamarin API auf ihrer Homepage nicht immer hilfreich, da teilweise zu undetailliert > Bei aufwendigeren/individuelleren UIs wird ein Custom Renderer benötigt, der in C# geschrieben wird und eine extra Klasse benötigt. // doubleslash 42

Fazit & Ausblick > Eignet sich für > Apps, die wenig plattformspezifische Funktionen benötigen > Apps, bei denen ein custom UI unwichtiger ist als Code, der geteilt werden kann > Programmierer, die sich mit XAML und C# auskennen > Auch für Prototyping gut einsetzbar // doubleslash 43

Fazit & Ausblick > Eignet sich weniger gut für > (Apps, die viele spezifische APIs verwenden) > Xamarin Components > Apps, bei denen ein custom UI wichtiger ist als teilbarer Code // doubleslash 44

Fazit & Ausblick [3] [3] > Extensions > Chart > Kalender > ListView > SideDraw > DataForm > // doubleslash [6] 45

Fazit & Ausblick Visual Studio mobile Center [7] // doubleslash 46

Fazit & Ausblick > Ausblick > Visual Studio mobile Center ist die Weiterentwicklung von Xamarin Test Cloud > Cloud Anwendung > ios & Android Apps werden automatisch bei jedem Commit > übersetzt > auf echter Hardware getestet > erfolgreich getestete App-Pakete an Beta-Tester verteilt > Nutzungsanalyse und Laufzeitfehlerüberwachung > Unterstützung für UWP Apps und Cordova ist geplant // doubleslash 47

Fazit & Ausblick > Ausblick > XAML Previewer > Code Änderungen werden so angezeigt wie sie später zur Laufzeit aussehen // doubleslash 48

efficiency. we set IT up. Vielen Dank doubleslash Net-Business GmbH 07541-70078-0 www.doubleslash.de info@doubleslash.de // doubleslash 49

Anhang > Link zum GitHub Repo für das Live Beispiel: https://github.com/doubleslashde/gps_plugin // doubleslash 50

Quellen > [1] https://store.xamarin.com/ > [2] http://qode.pro/blog/mobile-app-development-with-xamarin/ > [3] https://www.xamarin.com/forms > [4] dotnetpro 11/2016 Seite 26 > [5] https://medium.com/@harrycheung/cross-platform-mobileperformance-testing-d0454f5cd4e9#.jp6r129y3 > [6] https://www.steema.com/product/forms#image-1 // doubleslash 51

Quellen > [7] https://www.heise.de/newsticker/meldung/microsoft-connect- Release-Candidate-von-Visual-Studio-2017-steht-bereit- 3488821.html?view=zoom;zoom=1 > [8] http://www.anecon.com/blog/xamarin-ein-erfahrungsbericht/ > [9] https://play.google.com/store/apps/details?id=com.xamarin.xamarinev olve > [10] https://play.google.com/store/apps/details?id=com.fanreact.app // doubleslash 52

Quellen > [11] https://github.com/xamarin/xamarincomponents // doubleslash 53