Tworzenie cross-platformowych

aplikacji w Xamarin.FormsWprowadzenie

Tomasz GibulskiMicrosoft Certified Professional (MCP)Microsoft Certified Technology Specialist (MCTS)

tomasz@gibulski.comwww.gibulski.com

Agenda

• Xamarin.Forms – z czym to się je?

• Przygotowanie środowiska programistycznego

• Pierwsza aplikacja w Xamarin.Forms

• Architektura projektu

• Tworzenie interfejsu użytkownika UI

• Debugowanie i uruchamianie aplikacji

(emulator, symulator, urządzenia fizyczne)

• Przykładowa aplikacja mobilna stworzona w Xamarin.Forms

początkiurządzeń

mobilnychPalmtopy

Cel: Jeden kod – wszystkie platformy

Dlaczego Xamarin?

• Piszesz jeden kod na wszystkie platformy

(iOS, Android, UWP)

• Piszesz kod w przyjaznym języku C#

• Tworzysz natywne aplikacje iOS i Android

• Tworzysz aplikacje bezkosztowo - Xamarin jest darmowy

• Testujesz swoje aplikacje w emulatorach, symulatorach lub urządzeniach fizycznych

• Możesz testować swoje aplikacje na tysiącach urządzeń w chmurze

Xamarin

• Współdzielenie kodu C#

• 100% dostęp do natywnego API

• Wysoka wydajność

Xamarin

• Interfejs użytkownika tworzony na każdą platformę indywidualnie

• Współdzielenie logiki aplikacji

• Około 60% kodu może być współdzielonego

Xamarin.Forms

Tworzysz natywny interfejs użytkownika UI dla Android, iOS i Windows z jednego współdzielonego kodu.

Xamarin + Xamarin.Forms

Xamarin Native(Xamarin.IOS, Xamarin.Android, Xamarin.UWP)

Xamarin.FormsLogika biznesowa + Interfejs użytkownika

Xamarin.Forms

Nawet 95% wspólnego kodu

Xamarin.Forms vs Xamarin.Native

Xamarin.Forms:

• Aplikacja ma być stworzona szybko

• Zespół programistów bardziej doświadczony w .NET niż Android i iOS

• Nieduży budżet

• Łatwiejsze aktualizowanie aplikacji

• Wysoka wydajność

Xamarin.Native:

• Aplikacja ma mieć dużo animacji i rozbudowany interfejs użytkownika

• Niewielki rozmiar aplikacji

• Aplikacja ma korzystać z natywnych funkcji nie dostępnych na obu platformach

• Bardzo wysoka wydajność

Co zawiera Xamarin.FormsPonad 40 typów: stron, układów i kontrolektworzonych w XAML lub w kodzie.

Nawigacja pomiędzy stronami

Dwu kierunkowe wiązanie danych

API do tworzenia animacji

Łatwy do zastosowania wzorzec MVVM

Messaging Center

Dependency Service

Pages

Layouts

Pages (strony) i Layouts (układy)

Views (kontrolki)

StackLayout

Grid

ScrollView

Frame

Definiowanie interfejsu użytkownika XAML<StackLayout Spacing="10">

<Label HeightRequest="110" HorizontalOptions="FillAndExpand"

Text="LoginPage" TextColor="Blue" FontSize="30"

HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>

<Entry Margin="20,40,20,0" HeightRequest="50"

Placeholder="Email" BackgroundColor="LightBlue">

</Entry>

<Entry Margin="20,0,20,0"

HeightRequest="50" IsPassword="true"

Placeholder="Password" BackgroundColor="LightBlue">

</Entry>

<Button x:Name="LoginButton" Margin="20,0,20,0"

HeightRequest="50" TextColor="White"

Text="Login"

HorizontalOptions="FillAndExpand" BackgroundColor="Blue"/>

</StackLayout>

Renderers in Xamarin.Forms

Uruchamianie i testowanieaplikacji

Urządzenia fizyczne z Android i

iOS

Emulator Android

Symulator iOS

Emulatory i urządzenia dostępne

w chmurze

Włączanie opcji

developera w Android

Należy dotknąć 7 razy etykietę z numerem kompilacji (Build numer):

• Samsung Galaxy S7 and later: Settings > About phone > Software information > Build number

• Google Pixel: Settings > System > About phone > Build number

• LG G6 and later: Settings > About phone > Software info > Build number

• HTC U11 and later: Settings > About > Software information > More > Build number

• OnePlus 5T and later: Settings > About phone > Build number

Włączanie opcji developera w Android

Włączanie trybu debugowania

Przygotowanie środowiska

programistycznego

1. Upewnij się, czy Twój komputer jest gotowy na Visual Studio

2. Pobierz Visual Studio3. Uruchom Visual Installer4. Wybierz pakiety na zakładce Workloads do

zainstalowania 5. Wybierz indywidualnie komponenty

(opcjonalnie)6. Wybierz pakiety językowe (opcjonalnie)7. Uruchom Visual Studio i stwórz swoją

pierwszą aplikację!

1. Sprawdź wymagania

Visual Studio i parametry Twojego

komputera

2. Pobierz Visual Studio

3.a.Uruchom

Visual Installer

3.b.Uruchom

Visual Installer

4. Wybierzpakiet

„Mobile…”na zakładceWorkloads

5. Wybierzindywidualniekomponenty(opcjonalnie)

6. Wybierz pakiet

językowy

7. Uruchom Visual Studio i stwórz swoją

pierwszą aplikację!

Tworzymy nowy projekt

Wybieramy typ projektu

Wybieramy szablon

Struktura projektu

File -> New -> Project

Demo

Podsumowanie Xamarin.Forms

Obiecująca, intensywnie rozwijana technologia.

Nie dla każdego typu aplikacji.

Około 90% wspólnego kodu.

Tworzenie cross-platformowych

aplikacji w Xamarin.FormsWprowadzenie

Tomasz Gibulski

tomasz@gibulski.com

www.gibulski.com