Einstieg in Xamarin und Xamarin.Forms, DDC 2018

Dipl. Inform. (FH) André Krämer, M. Sc.
Quality Bytes GmbH
EINSTIEG IN XAMARIN.FORMS, TEIL 1:
GRUNDLAGEN

https://qualitybytes.de2
ANDRÉ KRÄMER

ALTERNATIVEN ZUR CROSS PLATTFORM ENTWICKLUNG
ÜBERBLICK ÜBER DIE XAMARIN PLATTFORM
INTEGRATION IN VISUAL STUDIO
ÜBERBLICK ÜBER DIE NATIVE ENTWICKLUNG
ERSTE SCHRITTE MIT XAMARIN.FORMS

HERAUSFORDERUNGEN IN MODERNEN
GESCHÄFTSANWENDUNGEN

https://qualitybytes.de
GESCHÄFTSANWENDUNGEN
5
WIE WIR SIE KENNEN …
Screenshot des Open Source Tools Bulk Rename Utility. Screenshot erstellt von André Krämer

Foto: © anyaberkut |Fotolia.com

Foto: © Photographee.eu | Fotolia.com

Foto: © pannawat | Fotolia.com

TYPISCHE BUSINESS APPS
Mobile Zeiterfassung für
Unterwegs
Zeiterfassung
Kundendaten von überall
verwalten
Mobile Frontend für CRM
Urlaub direkt auf dem
Mobilgerät beantragen
Digitaler Urlaubsantrag
Produktfehler oder
Sicherheitsprobleme sofort
dokumentieren
Mängeldokumentation
ADD A HEADLINE HERE

HERAUSFORDERUNG
10
iOS
Objective-C /
Swift
Xcode
Android
Java / Kotlin
Android Studio
Windows
C# / VB.NET / C++ /
JavaScript
Visual Studio


NATIVE ENTWICKLUNG
● Mehrfaches entwickeln der App
○ Mehrere Teams
○ Mehrere Codezweige
○ Unterschiedliche Werkzeuge
Objective-C /
Swift
Xcode

Java / Kotlin
Android Studio

HYBRID MIT HTML UND JAVASCRIPT
● Einmalige Entwicklung mit HTML / JavaScript
○ Geteilter Code über mehrere Plattformen
○ Darstellung der App in einem rahmenlosen Browser
○ Zugriff auf native APIs über Plugins
Webview mit
Ihrer
JavaScript /
HTML App
13

CORDOVA ARCHITEKTUR
14

NATIV MIT XAMARIN
15
iOS App (C#)
UI und plattformspezifischer
Code
Android App (C#)
Code
UWP App (C#)
Code

Geteilte Datenzugriffsschicht (C#)
Geteilte Geschäftslogik (C#)

WAS IST DIE XAMARIN PLATTFORM?
17
2011 2014 2014 2016
Ursprünglich:
kommerzielles der Firma
Xamarin
Übernahme durch
Microsoft
ADD A HEADLINE HERE
• Entwicklung von Apps für
Android und iOS mit C# und
der .NET Klassenbibliothek
• Open Source
• Integriert in Visual Studio

ANDROID UND IOS MIT C#?
18

+

.NET + WINDOWS APIs
19 Bild: © Xamarin

.NET + IOS APIS | 100% COVERAGE
20 Bild: © Xamarin

.NET + ANDROID APIS | 100% COVERAGE
21 Bild: © Xamarin

"Alles was mit Objective-C, Swift, oder Java
gemacht werden kann, kann mit Xamarin auch
unter C# in Visual Studio gemacht werden“

NATIVE PERFORMANCE
23
Xamarin.iOS macht “Ahead Of Time
(AOT) compilation” um ein natives ARM
binary für Apple’s App Store zu erstellen.
Xamarin.Android nutzt “Just In Time
(JIT) compilation” auf dem Android
device.

AKTUELLER SUPPORT VON SDKS UND APIS
24
Support für:
• Google Glass
• Android Wear
• Amazon Fire TV
• Und weitere
iOS Support direkt bei der
Veröffentlichung für:
iOS 5, iOS 6, iOS 7, iOS 7.1, iOS 8, iOS 9, iOS10, iOS 11,
iOS 12

TECHNISCHE GRUNDLAGE
25

ECMA, .NET, MONO
26
Ecma Standards
(Plattformneutral)
.NET Framework
Windows
Mono
Linux, macOS, Windows
C# Language
(Ecma-334)
Microsoft C# Compiler
(Roslyn)
Mono C# Compiler
(MCS / Roslyn ab Mono 5)
CLI
(Ecma-335: Virtual Machine)
Common Language Runtime
(CLR)
Mono Runtime
CLI
(Ecma-335: Standardbibliothek)
.NET Framework Class Library Mono Class Library

.NET FRAMEWORK UND XAMARIN
.NET Framework
Windows
Xamarin
Android, iOS, macOS, Windows
Anwendungstypen WPF
Xamarin.
Android
Common Language Runtime
(CLR)
Mono Runtime
Framework
.NET Framework Class Library Mono Class Library
Xamarin.
iOS
...
27

.NET Framework, .NET Core und Xamarin
.NET Framework
Windows
Xamarin
Android, iOS, macOS,
Windows
Anwendungs-
typen
WPF
Xamarin.
Android
Common Language
Runtime
(CLR)
Mono Runtime
Framework
.NET Framework Class
Library
Mono Class Library
Xamarin.
iOS
...
.NET Core
Linux, macOS, Windows
ASP.NET
Core
Core CLR
CoreFX (.NET Core Class
Library)
UWP
.NET
Native
28

ARCHITEKTUR VON XAMARIN.ANDROID
.NET APIs
Android
Binding
Android.* Java.*
Linux Kernel
Mono ART
MCW
ACW
29

ANDROID LINKING
Bild © Xamarin
Debug Build
Release Build
30

ARCHITEKTUR VON XAMARIN.IOS
C#
Xamarin.iOS
App
IL Code
(Managed)
iOS
Binärpaket
(Nativ)
Mono C#
Compiler
(Roslyn ab
Mono 5)
Ahead of Time
Compiler
31

ÜBERSETZUNG VON XAMARIN.IOS
● Übersetzung muss auf einem Mac erfolgen!
● Unter Windows geschieht dies remote
Bild © Xamarin / Daniel Cazzulino http://www.cazzulino.com/how-vs-builds-on-mac-with-xamarin.html
32

ENTWICKLUNGSWERKZEUGE
34
Visual Studio for Mac Visual Studio

VISUAL STUDIO 2017
35

VISUAL STUDIO INTEGRATION
In einer Solution:
• iOS
• Android
• Universal Windows Platform
Apps (UWP)
Gewohnte Werkzeuge:
• ReSharper
• Team Foundation Server
• ..

36

VISUAL STUDIO INTEGRATION
Debugging unter:
• Emulatoren
• Geräten
Integriert in die Toolbar
• Status
• Logs
• Liste von verfügbaren Geräten
37

VISUAL STUDIO FOR MAC
• Entwicklungsumgebung für Mac
• Intellisense
• Debugger
• Designer
• NuGet Paketmanager
• Gleiches Format wie Visual Studio!
• Ersetzt Xamarin Studio
38

Android Hello World mit Visual Studio und Xamarin
DEMO

AUFBAU DER PROJEKTMAPPE
● Assets
○ Mitgelieferte Dateien (Text, Videos, Audio, ...)
● Resources
○ Drawable (Bilder)
○ Layout (Bildschirmmasken)
○ Values (Strings)
● MainActivity.cs
○ Quellcode der ersten Bildschirmmaske
41

ANDROID DEBUGGING
● Visual Studio bietet eine komfortable
Verwaltung für Emulatoren
● Google Android ARM Emulatoren
sind sehr langsam und sind deshalb
nicht zu empfehlen
● Hyper-V basierte Emulatoren sind ab
Windows 10 Version 1803 verfügbar
● Alternativ Intel HAXM
42

ANDROID DEBUGGING AUF EINEM ECHTEN GERÄT
● Developer Mode aktivieren
○ Einstellungen à Über das Telefon
à Build-Nummer mehrfach antippen
● Im Entwicklermodus USB Debugging
aktivieren
● PC und Mobiltelefon per USB Kabel
verbinden
● Sicherheitsabfrage auf dem Mobilgerät
bestätigen
43

Legen Sie ein neues Android Projekt in Visual Studio an und starten Sie es im Emulator
ÜBUNG

ANDROID VERSIONEN
● 14 Hauptversionen
● Namen von Süßigkeiten
○ ..
○ Nougat
○ Oreo
○ Pie
● Diverse Hersteller
○ Google
○ Samsung
○ Nokia
● Jeder Hersteller ist selbst für die Bereitstellung von Updates verantwortlich
45

VERSIONEN ENDE OKTOBER 2018
46

API LEVEL
● Zu jeder Android Version gibt es einen eindeutigen
Integerbezeichner à Das API Level
● Das API Level identifiziert somit die Versionen der
verfügbaren Bibliotheken eindeutig
● Zu jeder App können drei API Level konfiguriert werden
○ Target Framework à Gegen diese Version wird die App von
Xamarin kompiliert
○ Minimum Android Version à die niedrigste Version,
die von der App unterstütz wird (diese Information wird zur Laufzeit benötigt)
○ Target Android Version à Zielversion der App
47

ANDROID VERSIONEN ZU API LEVELN
ANDROID VERSIONEN ZU API LEVELN
Android Version Erschienen API Level Name
Android 9 August 2018 28 Pie
Android 8.1 Dezember 2017 27 Oreo
Android 8.0 August 2017 26 Oreo
Android 7.1 Oktober 2016 25 Nougat
Android 7.0 August 2016 24 Nougat
Android 6.0 Oktober 2015 23 Marshmallow

ANDROID SDK MANAGER
49

Activities
● Activities repräsentieren einen Bildschirm
● Es handelt sich dabei um C# Code Dateien
● Jeder Schirm hat eine Activity
● Eine Activity (typischerweise die MainActivity) ist der Einsprungspunkt in die App
(der MainLauncher)
50

Android Intents
● Intents sind “Nachrichtenobjekte“
● Sie werden genutzt um Acitivities oder Services zu starten
● Zwei Typen können unterschieden werden
○ Explizite Intents (Starten durch den Klassennamen, meist Activities in der eigenen App)
○ Implizite Intents (Starten von Aktionen in anderen Apps)
51

Beispiel: Expliziter Intent zur Navigation zu einer
internen Activity
var intent = new Intent(this, typeof (DetailsActivity));
intent.PutExtra("count", 1);
intent.PutExtra("hallo", "welt");
StartActivity(intent);
// In der Zielactivity ...
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
var hallo = Intent.GetStringExtra("hallo");
var count = Intent.GetIntExtra("count", -1);
52

BEISPIEL: IMPLIZITER INTENT „BROWSER
NAVIGATION“
var uri = Android.Net.Uri.Parse("https://qualitybytes.de");
var intent = new Intent(Intent.ActionView, uri);
StartActivity(intent);
Beispiel: Android / 03_AndroidActivityIntentDemo
53

iOS Hello World mit Visual Studio und Xamarin
DEMO


VORAUSSETZUNG ZUR ARBEIT IN VISUAL
STUDIO IST EINE VERBINDUNG ZUM MAC!
56

ALTERNATIVE ZUM „ECHTEN“ MAC
57

NOTWENDIGE FREIGABE IN MACOS
58

AUFBAU DER PROJEKTMAPPE
● AppDelegate.cs
○ Haupteinsprungspunkt der App
● Main.storyboard
○ UI Design für die App
● ViewController.cs
○ Quellcode der Bildschirmmaske
59

iOS DEBUGGING
● Für iOS gibt es keinen Emulator,
sondern nur einen Simulator
● Dieser kann mit Visual Studio
unter Windows ausgeführt werden
● Voraussetzung bleibt eine Verbindung
zu einem Mac
60

iOS DEBUGGING AUF EINEM ECHTEN GERÄT
● Mitgliedschaft im iOS Developer Programm
● Oder alternativ Free Provisioning
aktivieren
● Automatische Bereitstellung
● Oder manuelle Bereitstellung
61

iOS VERSIONEN
● 12 Hauptversionen
● Ein Hersteller
○ Apple
● Updates werden selbst für ältere Geräte
(aktuell bis iPhone 5s aus 2013) angeboten
62

VERSIONEN ENDE OKTOBER 2018
63

KLASSISCHES XAMARIN
65
iOS App (C#)
Code
Android App (C#)
Code
UWP App (C#)
Code


XAMARIN.FORMS
66
iOS App (C#)
Code
Android App (C#)
Code
UWP App (C#)
Code

Geteilte UI Schicht (C# XAML)

• 40+ Pages, Layouts, und Controls
• Via Code oder XAML
• Two-way Data Binding
• Navigation
• Animation API
• Dependency Service
XAMARIN.FORMS
67

Einheitliche API für native, plattform-
specifische Benutzeroberflächen
Zur Laufzeit wird jede Xamarin.Forms
Page inkl. Controls auf die
Platformspezifischen nativen User
Interface Elements gemapped
XAMARIN.FORMS BEISPIEL
68

Xamarin Forms
Plattformübergreifendes Projekt (.NET Standard, PCL oder freigegebenes Projekt)
Gemeinsamer Quellcode, zum Beispiel Oberflächencode, Geschäftslogik,
Datenzugriffscode
iOS App (C#)
plattformspezifischer Code
Android App (C#)
UWP App (C#)

iOS App Android App UWP App
verweist verweist verweist
erzeugt erzeugt erzeugt
70

Content MasterDetail Navigation Tabbed Carousel
PAGES
71

Übung Pages
XAMARIN.FORMS


Stack Absolute Relative Grid Content
View
ScrollView Frame
LAYOUTS
74

Demo Layouts
XAMARIN.FORMS


Übung Layouts
XAMARIN.FORMS


ActivityIndicator BoxView Button DatePicker Editor
Entry Image Label ListView Map
OpenGLView Picker ProgressBar SearchBar Slider
Stepper TableView TimePicker WebView EntryCell
ImageCell SwitchCell TextCell ViewCell
VIEWS (CONTROLS)
77

Übung Views: Bauen Sie einen Login Screen
XAMARIN.FORMS


XAMARIN.FORMS RENDERING / ARCHITECTURE
ViewRenderer
Xamarin.Forms.Platform.iOS
ViewRenderer
Xamarin.Forms.Platform.Android
ViewRenderer
Xamarin.Forms.Platform.UWP

UIView View FrameworkElement

View
Xamarin.Forms
80

Xamarin Forms Rendering / Architecture Bsp
Entry
EntryRenderer
Xamarin.Forms.Platform.iOS
EntryRenderer
Xamarin.Forms.Platform.Android
EntryRenderer
Xamarin.Forms.Platform.UWP

UITextField EditText TextBox

Entry
Xamarin.Forms
81

VIELEN DANK FÜR IHRE
AUFMERKSAMKEIT
André Krämer

UNSERE DIENSTLEISTUNGEN
84
Mit ASP.NET Core und Angular entwickeln
wir Web Applications für die Cloud oder
Inhouse Installationen
Dokumentenautomatisierung mit TX Text
Control
Business Apps für Android, iOS und die
UWP auf der Basis von Xamarin
WEB APPLICATIONS TX TEXT CONTROL MOBILE APPS MIT XAMARIN

CREDITS
Vectorial Shapes in this Template were created
by Free Google Slides Templates and
downloaded from FreePik.com.
Icons in this Template are part of Google®
Material Icons and flaticons.com.
Images were taken from Pexels and Pixabay (CC0
License)
SHAPES AND ICONS

Einstieg in Xamarin und Xamarin.Forms, DDC 2018

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Einstieg in Xamarin und Xamarin.Forms, DDC 2018

Ähnlich wie Einstieg in Xamarin und Xamarin.Forms, DDC 2018 (20)

Mehr von André Krämer

Mehr von André Krämer (13)

Einstieg in Xamarin und Xamarin.Forms, DDC 2018