Wprowadzenie do tworzenia cross-platformowych aplikacji w Xamarin.Forms

1. Tworzenie
cross-platformowych
aplikacji w Xamarin.Forms
Wprowadzenie
Tomasz Gibulski
Microsoft Certified Professional (MCP)
Microsoft Certified Technology Specialist (MCTS)
tomasz@gibulski.com
www.gibulski.com

2. 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

3. początki
urządzeń
mobilnych
Palmtopy

4. Cel: Jeden kod – wszystkie platformy

5. 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

6. Xamarin
• Współdzielenie kodu C#
• 100% dostęp do natywnego API
• Wysoka wydajność

7. Xamarin
• Interfejs użytkownika
tworzony na każdą
platformę indywidualnie
• Współdzielenie logiki
aplikacji
• Około 60% kodu może być
współdzielonego

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

9. Xamarin + Xamarin.Forms
Xamarin Native
(Xamarin.IOS, Xamarin.Android, Xamarin.UWP)
Xamarin.Forms
Logika biznesowa + Interfejs użytkownika

10. Xamarin.Forms
Nawet 95% wspólnego kodu

11. 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ść

12. Co zawiera Xamarin.Forms
Ponad 40 typów: stron, układów i kontrolek
tworzonych 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

13. Pages
Layouts
Pages (strony) i Layouts (układy)

14. Views
(kontrolki)

15. StackLayout

16. Grid

17. ScrollView

18. Frame

19. 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>

20. Renderers in Xamarin.Forms

21. Uruchamianie
i testowanie
aplikacji
Urządzenia
fizyczne z
Android i
iOS
Emulator
Android
Symulator
iOS
Emulatory i
urządzenia
dostępne
w chmurze

22. 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

23. Włączanie opcji developera w Android

24. Włączanie trybu debugowania

25. Przygotowanie
środowiska
programistycznego
1. Upewnij się, czy Twój komputer jest gotowy
na Visual Studio
2. Pobierz Visual Studio
3. Uruchom Visual Installer
4. 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ę!

26. 1. Sprawdź
wymagania
Visual Studio i
parametry
Twojego
komputera

27. 2. Pobierz
Visual Studio

28. 3.a.
Uruchom
Visual
Installer

29. 3.b.
Uruchom
Visual
Installer

30. 4. Wybierz
pakiet
„Mobile…”
na zakładce
Workloads

31. 5. Wybierz
indywidualnie
komponenty
(opcjonalnie)

32. 6. Wybierz
pakiet
językowy

33. 7. Uruchom
Visual Studio i
stwórz swoją
pierwszą
aplikację!

34. Tworzymy nowy projekt

35. Wybieramy typ projektu

36. Wybieramy szablon

37. Struktura projektu

38. File -> New ->
Project
Demo

39. Podsumowanie
Xamarin.Forms
Obiecująca, intensywnie
rozwijana technologia.
Nie dla każdego typu aplikacji.
Około 90% wspólnego kodu.

40. Tworzenie
cross-platformowych
aplikacji w Xamarin.Forms
Wprowadzenie
Tomasz Gibulski
tomasz@gibulski.com
www.gibulski.com