Cross-Plattform Apps mit

Transkript

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

2 Ü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 > > // doubleslash 2

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

4 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

5 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

6 Was ist? // doubleslash 6

7 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

8 Was ist? Setup // doubleslash 8

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

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

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

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

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

14 Was ist? Code Behind // doubleslash 14

15 Was ist? Backend // doubleslash 15

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

17 Was ist? Backend // doubleslash 17

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

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

20 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

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

22 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

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

24 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

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

26 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

27 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

28 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

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

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

31 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

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

33 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/ versenden Menü mit diversen Einstellungen Synchronisieren performant, schnell // doubleslash 33

34 vs // doubleslash 34 [5]

35 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]

36 vs // doubleslash 36 [5]

37 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]

38 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

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

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

41 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

42 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

43 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

44 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

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

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

47 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

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

49 efficiency. we set IT up. Vielen Dank doubleslash Net-Business GmbH // doubleslash 49

50 Anhang > Link zum GitHub Repo für das Live Beispiel: // doubleslash 50

51 Quellen > [1] > [2] > [3] > [4] dotnetpro 11/2016 Seite 26 > [5] > [6] // doubleslash 51

52 Quellen > [7] Release-Candidate-von-Visual-Studio-2017-steht-bereit html?view=zoom;zoom=1 > [8] > [9] olve > [10] // doubleslash 52

53 Quellen > [11] // doubleslash 53