Zacznijmy naszą wspólną podróż do budowania pięknych natywnych aplikacji międzyplatformowych z .NET, Xamarin, i Visual Studio! W tym blogu zamierzam poprowadzić Cię przez cały proces i opisać wszystko, co jest w pliku -> New for Xamarin. Jeśli jesteś bardziej wizualnym uczniem, mam pełne wideo, które możesz obejrzeć:
Postawmy najpierw trochę podstaw, odpowiadając na kilka częstych pytań.
Co to jest .NET?
.NET jest wieloplatformowym, wysokowydajnym i otwartym runtime, który jest używany z wieloma językami, edytorami i bibliotekami, które umożliwiają tworzenie aplikacji internetowych, mobilnych, desktopowych, gier i innych. Jest to podstawa, która umożliwia uruchamianie kodu na różnych platformach, takich jak iOS, Android i Windows. Jeśli jesteś programistą internetowym, jest to jak V8 runtime, który wykonuje JavaScript lub jeśli jesteś programistą Java, JVM, który wykonuje Javę.
Co to jest Xamarin?
.NET ma serię frameworków, które są zbudowane dla niego, które umożliwiają unikalne scenariusze dla deweloperów dla konkretnych platform. Na przykład, ASP.NET Core i Blazor to frameworki zbudowane dla .NET do tworzenia stron internetowych. WPF i UWP to frameworki zbudowane dla .NET dla rozwoju desktopów. Xamarin to framework i narzędzia, które umożliwiają tworzenie aplikacji dla systemów iOS, Android i macOS. Zawiera również kilka bibliotek, które umożliwiają rozwój międzyplatformowy w systemach iOS, Android, macOS i Windows, w tym Xamarin.Forms dla międzyplatformowego interfejsu użytkownika i Xamarin.Essentials dla międzyplatformowego dostępu do funkcji platformy natywnej.
Jakich języków programowania mogę używać?
.NET obsługuje kilka języków, w tym C#, F# i Visual Basic. Możesz używać każdego z tych języków programowania do tworzenia aplikacji z Xamarin, jednak ja jestem programistą C# i jest to podstawowy język do tworzenia aplikacji. Jednakże, istnieje kilka fantastycznych frameworków dla F#, takich jak Fabulous dla rozwoju funkcjonalnego.
XAML jest kolejnym „językiem”, który będzie używany do budowania interfejsu użytkownika z Xamarin. XAML jest używany od dawna do budowania aplikacji Windows z WPF i UWP i ma kilka wspaniałych funkcji, w tym łatwy do odczytania znacznik, technologię Hot Reload i zaawansowane wiązanie danych, aby rozwój UI był prosty.
Jakich narzędzi mogę użyć?
.NET umożliwia programistom korzystanie z szerokiej gamy narzędzi, w tym wiersza poleceń, edytorów kodu, takich jak Visual Studio Code, i pełnych IDE (zintegrowane środowisko programistyczne) z Visual Studio 2019 i Visual Studio 2019 dla komputerów Mac. Aby tworzyć aplikacje mobilne z Xamarin, będziemy musieli użyć albo Visual Studio 2019 lub Visual Studio 2019 for Mac, ponieważ mają one pełne funkcje do budowania aplikacji.
Więc, zacznijmy budować nasze pierwsze aplikacje mobilne z Xamarin!
Instalacja Visual Studio for Mobile Development
Pierwszym krokiem w twojej międzyplatformowej podróży jest instalacja Visual Studio 2019 dla Windows lub Visual Studio 2019 dla Mac.
Przy instalacji Visual Studio 2019 na Windows wszystko, co musisz zrobić, to wybrać Mobile development with .NET:
W przypadku Visual Studio 2019 na Maca możesz wybrać instalację Androida i iOS.
Jeśli robisz rozwój iOS, będziesz musiał również zainstalować Xcode na swojej maszynie macOS.
Po tym jesteś ustawiony i gotowy do rozwoju mobilnego!
Gdy utworzysz i uruchomisz projekt Android, możesz zostać poproszony o zainstalowanie dodatkowych SDK Androida i utworzenie emulatorów Androida.
Tworzenie projektu
Teraz, gdy mamy zainstalowane Visual Studio 2019 i Xamarin, zabierzmy się do pracy! Po uruchomieniu Visual Studio 2019 pojawi się opcja stworzenia nowego projektu. W systemie Windows możemy wyszukać Xamarin.Forms lub skorzystać z filtra typów projektów i wybrać Mobile. My będziemy chcieli wybrać Mobile App (Xamarin.Forms).
Po wybraniu tego nowego projektu zobaczysz nowe okno dialogowe z pytaniem, jakiego typu szablonu dla aplikacji chciałbyś użyć:
Mamy kilka opcji do wyboru w oparciu o typ aplikacji, którą chcemy zbudować.
Flyout, Tabbed, & Blank
Szablony aplikacji Flyout & Tabbed oparte są na najnowszej technologii Xamarin.Forms o nazwie Shell. Umożliwia ona szybsze budowanie rusztowań aplikacji i oferuje unikalne funkcje, takie jak nawigacja oparta na adresach URL. Szablony te są podobne z główną różnicą, jeśli chcesz wysuwane menu lub dolne zakładki dla podstawy twojej aplikacji.
Blank app jest właśnie tym i oferuje dość prosty szablon z pojedynczą stroną i niczym więcej.
Pójdźmy z Flyout! Chcę, abyśmy zaczęli tutaj, ponieważ większość tutoriali nie przechodzi przez Shell, a dla mnie jest to przyszłość rozwoju aplikacji Xamarin. Ten szablon ma wiele w sobie, więc w przyszłych postach przejdziemy przez każdą sekcję, ale na dziś po prostu stworzymy projekt i przejdziemy przez to, czym jest Shell.
Jeśli jesteś na Visual Studio 2019 dla Mac, będziesz chciał wybrać Multiplatform > App > Flyout Forms App
Co jest w projekcie?
Teraz, gdy projekt aplikacji został utworzony, zobaczysz kilka projektów wewnątrz pojedynczego rozwiązania.
Przejrzyjmy, co znajduje się w naszym nowym rozwiązaniu:
Pierwszy projekt zawiera kilka folderów, plików kodu i plików interfejsu użytkownika. Ten projekt jest projektem .NET Standard, który umożliwia nam posiadanie jednego projektu, który może być współdzielony w różnych systemach operacyjnych. Ten projekt jest gdzie będziemy pisać większość naszego kodu.
iOS &Projekty Android są „głową” lub „rodzicem” projektu, który jest używany do przechowywania specyficznego dla platformy kodu, ustawień, aktywów i więcej. To tutaj będziesz chciał skonfigurować różne ustawienia, takie jak nazwa wyświetlania, ikona aplikacji, numery wersji i każdy kod, który jest potrzebny dla iOS lub Android specyficzne rzeczy, które nie są dostępne międzyplatformowe. W pewnym momencie będziesz musiał przejść do tych projektów i zmienić je, ale na razie zostaniemy w projekcie międzyplatformowym.
Xamarin.Forms Cross-Platform UI
Wewnątrz naszego międzyplatformowego projektu .NET Standard znajdziemy trochę kodu dla naszej aplikacji. Ten szablon pokazuje przykładową aplikację, która posiada listę przedmiotów i stronę o nich. Elementy są zorganizowane w foldery:
- Modele: Są to klasy, które reprezentują dane w twoich aplikacjach, takie jak Osoba, Samochód, Pies, Kot, itp. W tej aplikacji mamy pojedynczy model o nazwie Item.
- Usługi: Wewnątrz tego folderu znajduje się kod, który umożliwia dostęp do rzeczy niezwiązanych z interfejsem użytkownika, takich jak wywołania usług internetowych, bazy danych itp. W projekcie znajduje się prosty MockDataStore, który jest używany do przechowywania elementów w pamięci.
- Views: To właśnie tutaj będą mieszkać nasze pliki interfejsu użytkownika XAML!
- ViewModels: W tym folderze znajdziesz pliki, które mapują prawie 1:1 do folderu Views. Dzieje się tak dlatego, że każdy widok ma ViewModel, który jest związany z tym, że Xamarin.Forms może połączyć te dwa razem tak, że widok może wyświetlać informacje lub wywoływać metody w każdym ViewModel.
Spójrzmy na AboutPage.xaml, który jest pierwszą stroną, którą zobaczymy po uruchomieniu aplikacji. Widzimy tu kilka rzeczy, po pierwsze element najwyższego poziomu ContentPage:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyAwesomeApp.Views.AboutPage" xmlns:vm="clr-namespace:MyAwesomeApp.ViewModels" Title="{Binding Title}">Jest tu kilka znaczników xmlns, które reprezentują gdzie mieszka konkretny kod. Znaczniki default i x są zawarte w każdym pliku i służą do podstawowej funkcjonalności. Znacznik xmlns:vm pozwala nam na dostęp do naszego własnego kodu z poziomu XAML, co zobaczymy za chwilę. Znacznik x:Class jest odniesieniem do przestrzeni nazw i nazwy strony, co pasuje do kodu znajdującego się za nim. Wreszcie, istnieje właściwość Title, która jest związana danymi z właściwością Title w naszym ViewModel.
Możemy ustawić dodatkowe właściwości, takie jak BindingContext i Resources z zawartością XAML. Tutaj zamierzamy użyć znacznika xmlns:vm, aby ustawić BindingContext na nową instancję AboutViewModel:
<ContentPage.BindingContext> <vm:AboutViewModel /></ContentPage.BindingContext>Następnym elementem jest zasób Color, który może być użyty na stronie. Zasoby pozwalają nam na usunięcie zduplikowanego kodu i tworzenie par klucz/wartość wielokrotnego użytku. Jest to w pewnym sensie podobne do CSS w tworzeniu stron internetowych.
<ContentPage.Resources> <ResourceDictionary> <Color x:Key="Accent">#96d1ff</Color> </ResourceDictionary></ContentPage.Resources>Możemy dodać więcej rzeczy do zasobów, włączając w to łańcuchy, style i inne.
Na koniec, każda strona może mieć jeden element kontrolny root. Zazwyczaj jest to układ, taki jak StackLayout, ScrollView, lub siatka, którą mamy tutaj. Siatka jest wspaniałą kontrolką, która posiada wiersze i kolumny. Nie będziemy wchodzić w szczegóły układów, ale ten wyświetla obraz, trochę tekstu i przycisk, który może być kliknięty, aby otworzyć przeglądarkę internetową.
<Button Margin="0,10,0,0" Text="Learn more" Command="{Binding OpenWebCommand}" BackgroundColor="{StaticResource Primary}" TextColor="White" />Zauważ
{StaticResource Primary}, który jest odniesieniem do zasobu, który zdefiniowaliśmyAccentwcześniej, alePrimaryznajduje się w naszym App.xaml, które są zasobami dostępnymi w całej aplikacji.
Aby znaleźć więcej układów i kontrolek, możesz otworzyć Przybornik, aby zobaczyć, co jest dostępne:
Na koniec, jeśli wybierzesz kontrolkę lub układ, panel właściwości pokaże ci wszystkie różne właściwości, które są dostępne dla tej kontrolki.
Jedną z rzeczy, która jest bardzo ważna jest to, że każda z tych stron XAML ma kod, który jest ważny dla widoku XAML i ma specyficzne metody dla konstruktora i zdarzenia, takie jak kiedy strony są pokazywane lub znikają. Możesz użyć małej strzałki, aby zobaczyć plik .xaml.cs code behind.
Jeśli go otworzysz, zobaczysz, że jest bardzo prosty, ponieważ dla tego widoku nie ma żadnych specjalnych zdarzeń, które są potrzebne teraz.
public partial class AboutPage : ContentPage{ public AboutPage() { InitializeComponent(); }}Interakcja użytkownika i ViewModels
Teraz porozmawiajmy o ViewModel dla tej strony, która została utworzona w XAML. Otwórz plik ViewModels -> AboutViewModel.cs klikając na niego dwukrotnie.
public class AboutViewModel : BaseViewModel{ public AboutViewModel() { Title = "About"; OpenWebCommand = new Command(async () => await Browser.OpenAsync("https://aka.ms/xamarin-quickstart")); } public ICommand OpenWebCommand { get; }}To jest niesamowicie prosty ViewModel, ale jest godnym uwagi przykładem tego, jak działa wiązanie danych. Tutaj ViewModel ustawia Title na About, a następnie tworzy nowe polecenie, które wywołuje Browser.OpenAsync, aby otworzyć przeglądarkę internetową na stronie.
Ten Command jest czymś wyjątkowym. W przeciwieństwie do Title, który jest zwykłym string, który zostanie wyświetlony, Command jest specjalną klasą, której możemy użyć, aby powiedzieć naszemu interfejsowi użytkownika, aby coś zrobił, gdy użytkownik wejdzie z nim w interakcję. Na przykład na naszym Button widzieliśmy następujący kod:
Command="{Binding OpenWebCommand}"Ten kod mówi Xamarin.Forms, że istnieje public Command w naszym ViewModel, który ma kod do wykonania, gdy użytkownik kliknie na przycisk. W tym przypadku chcemy otworzyć przeglądarkę, która jest jedną z wielu natywnych funkcji dostępnych w Xamarin.Essentials. Wywołanie Browser.OpenAsync uruchomi przeglądarkę specyficzną dla iOS i Androida za pomocą jednej linii kodu.
Quick Changes with XAML Hot Reload
Teraz nadszedł czas na uruchomienie naszej aplikacji. Ja lubię zaczynać na Androidzie, ponieważ emulatory są dostępne lokalnie zarówno na Windowsie jak i macOS. W menu Visual Studio zobaczysz, że Android jest domyślnym projektem i będzie przycisk debugowania jest dostępny i pokaże dostępne emulatory Androida. Po kliknięciu przycisku debugowania, jeśli nie masz żadnych emulatorów, zostaniesz poproszony o utworzenie jednego.
Gdy aplikacja się uruchomi, wejdzie w tryb debugowania, który pozwala nam ustawić punkty przerwania na naszym kodzie, aby zobaczyć wartości, ale także umożliwia XAML Hot Reload, gdzie możemy dokonać zmian w UI bez konieczności zatrzymywania debugowania.
Otwórzmy AboutPage.xaml i zmieńmy kolor Accent na inny. Tutaj zaktualizuję go do Orange i nacisnę save, aby zobaczyć zmiany.
W tym momencie możemy dodać nowe kontrolki, zaktualizować interfejs użytkownika i kontynuować pracę nad naszą aplikacją na Androidzie.
Deploy to iOS with Hot Restart
Załatwmy wdrożenie iOS! Kliknij prawym przyciskiem myszy na projekt iOS i wybierz Set as Startup Project:
Na iOS sprawy mają się nieco inaczej dla deweloperów. Jeśli jesteś na macOS i zainstalujesz Xcode, będziesz miał dostępne Symulatory iOS. Jeśli to ty, możesz wybrać symulator, a następnie debugować swoją aplikację. W systemie Windows nie ma symulatorów iOS 🙁 więc są dwa sposoby, aby uzyskać swój
- iOS Remoted Simulator: Jeśli masz maszynę macOS, możesz zainstalować Visual Studio 2019 for Mac i Xcode i połączyć się z nią z maszyny Windows, aby użyć jej jako zdalnej maszyny do budowania. Symulator iOS może być następnie uruchomiony z wyświetlanego na maszynie Windows, co jest bardzo fajne!
- iOS Hot Restart: Jest to nowa technologia podglądu, która umożliwia wdrożenie kompilacji debugowania aplikacji bezpośrednio do urządzenia z systemem iOS, które jest podłączone do komputera z systemem Windows. Jest to świetne rozwiązanie, jeśli nie masz maca i chcesz debugować swoją aplikację i używać niesamowitych funkcji, takich jak XAML Hot Reload.
W oparciu o konfigurację i sprzęt dostępny jest świetna opcja dla Ciebie, aby rozpocząć debugowanie aplikacji iOS z systemu Windows. Przeczytaj dokumentację, do której się odwołałem, aby uzyskać pełny przewodnik konfiguracji.
Zrozumienie App i Shell
Ostatnią rzeczą, o której chcę porozmawiać jest to, co jest w naszej *App i co jest w naszej Shell:
Wewnątrz naszej App.xaml znajdziesz globalne zasoby, takie jak Primary, które użyliśmy wcześniej na przycisku, ale także style, takie jak globalny styl Button, którego używamy ze stanami, gdy jest włączony i wyłączony. Jeśli otworzysz kod App.xaml.cs za tobą będzie creationg z App, który ustawia MainPage do naszego AppShell, a także ma dodatkowe zdarzenia podobne do naszej strony, ale dla aplikacji, takich jak kiedy zaczął, poszedł do uśpienia (aka tło), i wznowione.
The AppShell.xaml mieści Shell naszej struktury aplikacji. Zawiera style i kolory dla naszej powłoki aplikacji, a następnie ma dodatkowe elementy dla zakładek, wysuwanych okien i stron, które są wyświetlane. Znajdziemy tutaj dwa elementy FlyoutItem, które reprezentują AboutPage oraz BrowsePage. Dodatkowo, posiada on element MenuItem do wyświetlania przycisku logowania/wylogowania. Element ShellContent ma powiązanie z naszą stroną, którą stworzyliśmy i automatycznie strony pojawią się i będą nawigować do każdej z nich po wybraniu.
Jest wiele więcej do Xamarin.Forms Shell i tworzenia aplikacji z Xamarin, ale mam nadzieję, że to stawia cię na ścieżce startowej do rozpoczęcia pracy z twoją aplikacją. Bądź pewny, aby śledzić .NET dev.to konto dla więcej wpisów w tej serii.