Lad os starte vores rejse sammen for at bygge smukke native apps på tværs af platforme med .NET, Xamarin og Visual Studio! I denne blog vil jeg guide dig gennem hele processen og beskrive alt, hvad der er i Fil -> Nyt for Xamarin. Hvis du er mere visuelt anlagt, har jeg en komplet video, som du kan se:
Lad os først lægge et grundarbejde ved at besvare nogle hyppige spørgsmål.
Hvad er .NET?
.NET er en cross-platform, højtydende og open-source runtime, der bruges med flere sprog, editorer og biblioteker, som gør det muligt at bygge apps til web, mobil, desktop, spil og meget mere. Det er det fundament, der gør det muligt at køre kode på forskellige platforme som f.eks. iOS, Android og Windows. Hvis du er webudvikler, er det ligesom V8-køringstidspunktet, der udfører JavaScript, eller hvis du er Java-udvikler, JVM’en, der udfører Java.
Hvad er Xamarin?
.NET har en række frameworks, der er bygget til det, som muliggør unikke scenarier for udvikleren til specifikke platforme. ASP.NET Core og Blazor er f.eks. frameworks, der er bygget til .NET til webudvikling. WPF og UWP er frameworks, der er bygget til .NET til desktopudvikling. Xamarin er en ramme og et værktøj, der gør det muligt at udvikle apps til iOS, Android og macOS. Det indeholder også flere biblioteker, der muliggør udvikling på tværs af platforme på tværs af iOS, Android, macOS og Windows, herunder Xamarin.Forms til brugergrænseflade på tværs af platforme og Xamarin.Essentials til adgang til funktioner på den native platform på tværs af platforme.
Hvilke programmeringssprog kan jeg bruge?
.NET understøtter flere sprog, herunder C#, F# og Visual Basic. Du kan bruge alle disse programmeringssprog til at bygge apps med Xamarin, men jeg er C#-udvikler, og det er det primære sprog til appudvikling. Der findes dog nogle fantastiske frameworks til F# såsom Fabulous til funktionel udvikling.
XAML er et andet “sprog”, der vil blive brugt til at bygge brugergrænseflader med Xamarin. XAML er blevet brugt i lang tid til at bygge Windows-applikationer med WPF og UWP og har nogle fantastiske funktioner, herunder letlæselig markup, Hot Reload-teknologi og avanceret databinding, der gør udviklingen af brugergrænseflader til en leg.
Hvilke værktøjer kan jeg bruge?
.NET giver udviklere mulighed for at bruge en lang række værktøjer, herunder kommandolinje, kodeeditorer som Visual Studio Code og komplette IDE’er (Integrated Development Environment) med Visual Studio 2019 og Visual Studio 2019 til Mac. For at udvikle mobilapps med Xamarin skal vi bruge enten Visual Studio 2019 eller Visual Studio 2019 for Mac, da de har de fulde funktioner til at bygge apps.
Så, lad os komme i gang med at bygge vores første mobilapps med Xamarin!
Installation af Visual Studio til mobiludvikling
Det første skridt på din rejse på tværs af platforme er at installere Visual Studio 2019 til Windows eller Visual Studio 2019 til Mac.
Når du installerer Visual Studio 2019 på Windows er det eneste, du skal gøre, at vælge Mobiludvikling med .NET-arbejdsbyrden:
På Visual Studio 2019 til Mac kan du vælge at installere Android og iOS.
Hvis du laver iOS-udvikling skal du også installere Xcode på din macOS-maskine.
Efter dette er du helt klar til mobiludvikling!
Når du opretter og kører et Android-projekt, kan du blive bedt om at installere yderligere Android SDK’er og oprette Android-emulatorer.
Skabelse af dit projekt
Nu har vi Visual Studio 2019 og Xamarin installeret, så lad os komme i gang med arbejdet! Når du starter Visual Studio 2019, vil du have mulighed for at oprette et nyt projekt. På Windows kan du søge efter Xamarin.Forms eller bruge filteret for projekttyper og vælge Mobile. Vi vil vælge Mobile App (Xamarin.Forms).
Når du vælger dette nye projekt, vil du se en ny dialogboks, hvor du bliver spurgt, hvilken type skabelon til appen du vil bruge:
Vi har et par muligheder at vælge baseret på den type applikation, vi vil bygge.
Flyout, Tabbed, & Blank
Flyout & Tabbed-appskabeloner er baseret på den nyeste Xamarin.Forms-teknologi kaldet Shell. Den muliggør hurtigere stilladsering af apps og tilbyder unikke funktioner som f.eks. URL-baseret navigation. Disse skabeloner ligner hinanden med en hovedforskel, hvis du ønsker en flyout-menu eller nederste faner til basen af din app.
Blank app er netop det og tilbyder en ganske enkel skabelon med en enkelt side og intet andet.
Lad os gå med Flyout! Jeg vil gerne have os til at starte her, da de fleste tutorials ikke gennemgår Shell, og for mig er det fremtiden for Xamarin-app-udvikling. Denne skabelon har en masse i er så i fremtidige indlæg vil vi gennemgå hvert afsnit, men i dag vil vi bare oprette projektet og gennemgå hvad en Shell er.
Hvis du er på Visual Studio 2019 til Mac vil du vælge Multiplatform > App > Flyout Forms App
Hvad er der i projektet?
Nu, hvor app-projektet er oprettet, vil du se flere projekter inde i en enkelt løsning.
Lad os gennemgå, hvad der er her i vores nye løsning:
Det første projekt indeholder flere mapper, kodefiler og brugergrænsefladefiler. Dette projekt er et .NET Standard-projekt, der gør det muligt for os at have et enkelt projekt, som kan deles på tværs af forskellige operativsystemer. Det er i dette projekt, vi vil skrive det meste af vores kode.
iOS & Android-projekter er “hoved”- eller “overordnet”-projektet, der bruges til at huse platformsspecifik kode, indstillinger, aktiver og meget mere. Det er her, du vil konfigurere forskellige indstillinger som f.eks. visningsnavn, app-ikon, versionsnumre og enhver kode, der er nødvendig for iOS- eller Android-specifikke ting, som ikke er tilgængelige på tværs af platforme. På et tidspunkt skal du gå ind i disse projekter og justere tingene, men indtil videre bliver vi i det cross-platform projekt.
Xamarin.Forms Cross-Platform UI
Inden for vores cross-platform .NET Standard projekt finder vi en smule kode til vores app. Denne skabelon viser en prøveapp, der har en liste over varer og en om-side. Elementer er organiseret i mapper:
- Modeller: Dette er klasser, der repræsenterer data i dine apps, f.eks. person, bil, hund, kat osv. I denne app har vi en enkelt model kaldet Item.
- Services: Inde i denne mappe er der kode, som giver adgang til ikke-UI-relaterede ting som f.eks. webservicekald, databaser osv. I projektet i en simpel MockDataStore, der bruges til at gemme elementer i hukommelsen.
- Views: Det er her vores XAML-brugergrænsefladefiler skal bo!
- ViewModels: I denne mappe finder du filer, der næsten 1:1 svarer til mappen Views. Dette skyldes, at hver View har en ViewModel, der er bundet, at Xamarin.Forms kan bygge bro mellem de to, så View kan vise oplysninger eller kalde metoder i hver ViewModel.
Lad os kigge på AboutPage.xaml, som er den første side, vi vil se, når vi starter appen. Her ser vi et par ting, først er topniveauelementet 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}">Her er et par xmlns-tags, der repræsenterer, hvor specifik kode bor. Standard og x er inkluderet i alle filer og er til basisfunktionalitet. Med xmlns:vm-tagget kan vi få adgang til vores egen kode fra XAML, hvilket vi vil se om lidt. x:Class er en reference til sidens namespace og navn, dette passer til den bagvedliggende kode. Endelig er der en Title-egenskab, som er databundet til en egenskab kaldet Title i vores ViewModel.
Vi kan indstille yderligere egenskaber som BindingContext og Resources med XAML-indhold. Her vil vi bruge det xmlns:vm-tag til at indstille BindingContext til en ny instans af AboutViewModel:
<ContentPage.BindingContext> <vm:AboutViewModel /></ContentPage.BindingContext>Næste punkt er en Color-ressource, der kan bruges på siden. Ressourcer giver os mulighed for at fjerne dobbeltkode og skabe genanvendelige nøgle/værdipar. Dette svarer på en måde til CSS i webudvikling.
<ContentPage.Resources> <ResourceDictionary> <Color x:Key="Accent">#96d1ff</Color> </ResourceDictionary></ContentPage.Resources>Vi kan tilføje flere ting til ressourcerne, herunder strenge, stilarter og meget mere.
Endeligt kan hver side have én rodelementkontrol. Dette er normalt et Layout som StackLayout, ScrollView eller et Grid, som vi har her. Gridet er en fantastisk kontrol, der har rækker og kolonner. Vi vil ikke gå meget i detaljer med layouts, men denne viser et billede, noget tekst og en knap, der kan klikkes på for at åbne en webbrowser.
<Button Margin="0,10,0,0" Text="Learn more" Command="{Binding OpenWebCommand}" BackgroundColor="{StaticResource Primary}" TextColor="White" />Bemærk
{StaticResource Primary}, som er en henvisning til en ressource, vi defineredeAccenttidligere, menPrimaryer placeret i vores App.xaml, som er ressourcer, der kan bruges i hele appen.
For at finde flere layouts og kontroller kan du åbne værktøjskassen for at se, hvad der er tilgængeligt:
Til sidst, hvis du vælger en kontrol eller et layout, viser egenskabsruden dig alle de forskellige egenskaber, der er tilgængelige for den pågældende kontrol.
En ting, der er meget vigtig, er, at hver af disse XAML-sider har kode bagved, der er vigtig for XAML-visningen og har specifikke metoder til konstruktøren og begivenheden, f.eks. når siderne vises eller forsvinder. Du kan bruge den lille pil nedad for at se .xaml.cs-koden bag filen.
Hvis du åbner den, vil du se, at den er meget enkel, da der for denne visning ikke er nogen specielle begivenheder, der er nødvendige lige nu.
public partial class AboutPage : ContentPage{ public AboutPage() { InitializeComponent(); }}Brugerinteraktion og ViewModeller
Nu skal vi tale om ViewModel for denne side, der blev oprettet i XAML. Åbn ViewModels -> AboutViewModel.cs-filen ved at dobbeltklikke på den.
public class AboutViewModel : BaseViewModel{ public AboutViewModel() { Title = "About"; OpenWebCommand = new Command(async () => await Browser.OpenAsync("https://aka.ms/xamarin-quickstart")); } public ICommand OpenWebCommand { get; }}Dette er en forbløffende simpel ViewModel, men er et bemærkelsesværdigt eksempel på, hvordan databinding fungerer. Her indstiller ViewModel titlen til About og opretter derefter en ny Command, der kalder Browser.OpenAsync for at åbne en webbrowser på siden.
Den Command er noget helt særligt. I modsætning til Title, som er en simpel string, der vil blive vist, er Command en særlig klasse, som vi kan bruge til at fortælle vores brugergrænseflade, at den skal gøre noget, når brugeren interagerer med den. På vores Button så vi f.eks. følgende kode:
Command="{Binding OpenWebCommand}"Denne kode fortæller Xamarin.Forms, at der er en public Command i vores ViewModel, som har kode, der skal udføres, når brugeren klikker på knappen. I dette tilfælde ønsker vi at åbne broweren, hvilket er en af de mange native funktioner, der er tilgængelige fra Xamarin.Essentials. Ved at kalde Browser.OpenAsync starter browseren specifikt for iOS og Android med en enkelt kodelinje.
Snakke ændringer med XAML Hot Reload
Nu er det tid til at starte vores applikation. Jeg kan godt lide at starte på Android, fordi emulatorer er tilgængelige lokalt på både Windows og macOS. I menuen i Visual Studio vil du se, at Android er standardprojektet, og vil debug-knappen er tilgængelig og vil vise dine Android-emulatorer tilgængelige. Når du klikker på debug-knappen, hvis du ikke har nogen emulatorer, vil du blive bedt om at oprette en.
Når appen starter, vil den gå ind i Debug-tilstand, som giver os mulighed for at sætte break points på vores kode for at se værdierne, men også aktiverer XAML Hot Reload, hvor vi kan foretage ændringer i brugergrænsefladen uden at skulle stoppe debugging.
Lad os åbne AboutPage.xaml og ændre Accentfarven til en anden farve. Her vil jeg opdatere den til orange, og jeg trykker på gem for at se ændringerne.
På dette tidspunkt kan vi tilføje nye kontroller, opdatere brugergrænsefladen og fortsætte arbejdet med vores app på Android.
Deploy til iOS med Hot Restart
Lad os få iOS deployet! Højreklik på iOS-projektet, og vælg Set as Startup Project (Indstil som startprojekt)
På iOS er tingene en smule anderledes for udviklere. Hvis du er på macOS og installerer Xcode, vil du have iOS-simulatorer til rådighed. Hvis det er dig, kan du vælge en simulator og derefter debugge din app. På Windows er der ingen iOS-simulatorer 🙁 så der er to måder at få din
- iOS Remoted Simulator på: Hvis du har en macOS-maskine, kan du installere Visual Studio 2019 for Mac og Xcode og oprette forbindelse til den fra din Windows-maskine for at bruge den som en fjernopbygningsmaskine. iOS-simulatoren kan derefter startes fra vist på din Windows-maskine, hvilket er meget cool!
- iOS Hot Restart: Dette er en ny preview-teknologi, der giver dig mulighed for at distribuere et debug-build af din app direkte til din iOS-enhed, der er tilsluttet din Windows-maskine. Dette er fantastisk, hvis du ikke har en mac og ønsker at debugge din applikation og bruge fantastiske funktioner som XAML Hot Reload.
Baseret på din opsætning og det udstyr, du har til rådighed, er der en god mulighed for dig til at begynde at debugge din iOS-app fra Windows. Læs dokumentationen, som jeg har linket til, igennem for at få en komplet opsætningsvejledning.
Forståelse af App og Shell
Den sidste ting, jeg vil tale om, er, hvad der er i vores *App og hvad der er i vores Shell:
Inden for vores App.xaml finder du globale ressourcer såsom Primary, som vi brugte tidligere på knappen, men også stilarter såsom en global Button-stil, som vi bruger med tilstande, når den er aktiveret og deaktiveret. Hvis du åbner koden App.xaml.cs bagved, vil du se oprettelsen af App, der indstiller MainPage til vores AppShell og også har yderligere begivenheder svarende til vores side, men for appen, f.eks. når den startede, gik i dvale (aka baggrund) og blev genoptaget.
AppShell.xaml indeholder Shell af vores applikationsstruktur. Den indeholder stilarter og farver til vores appskal og har derefter yderligere elementer til faner, flyouts og sider, der vises. Her finder vi to FlyoutItem-elementer, der repræsenterer AboutPage og BrowsePage. Derudover har den et MenuItem til at vise en login/logout-knap. ShellContent har en binding til vores side, som vi har oprettet, og automatisk vil siderne blive vist og navigere til hver af dem, når de vælges.
Der er meget mere om Xamarin.Forms Shell og om at skabe apps med Xamarin, men forhåbentlig sætter dette dig på startvejen til at komme i gang med din app. Husk at følge .NET dev.to-kontoen for at få flere indlæg i denne serie.