Free Press

Vi börjar vår resa tillsammans för att bygga vackra plattformsoberoende appar med .NET, Xamarin och Visual Studio! I den här bloggen kommer jag att guida dig genom hela processen och beskriva allt som finns i File -> New for Xamarin. Om du är en mer visuell inlärare har jag en fullständig video som du kan titta på:

Låt oss först lägga en grund genom att svara på några vanliga frågor.

Vad är .NET?
.NET är en plattformsoberoende, högpresterande och öppen källkodskörningstid som används tillsammans med flera olika språk, redaktörer och bibliotek som gör det möjligt att bygga appar för webben, mobiler, datorer, skrivbord, spel och mycket mer. Det är grunden som gör det möjligt att köra kod på olika plattformar som iOS, Android och Windows. Om du är en webbutvecklare är detta som V8-körtiden som utför JavaScript eller om du är en Javautvecklare, JVM som utför Java.

Vad är Xamarin?
.NET har en rad ramverk som är byggda för det som möjliggör unika scenarier för utvecklare för specifika plattformar. ASP.NET Core och Blazor är till exempel ramverk som byggs för .NET för webbutveckling. WPF och UWP är ramverk som är byggda för .NET för skrivbordsutveckling. Xamarin är ett ramverk och verktyg som gör det möjligt att bygga appar för iOS, Android och macOS. Det innehåller också flera bibliotek som möjliggör plattformsoberoende utveckling för iOS, Android, macOS och Windows, inklusive Xamarin.Forms för plattformsoberoende användargränssnitt och Xamarin.Essentials för plattformsoberoende åtkomst till funktioner för den inhemska plattformen.

Vilka programmeringsspråk kan jag använda?
.NET har stöd för flera språk, inklusive C#, F# och Visual Basic. Du kan använda alla dessa programmeringsspråk för att bygga appar med Xamarin, men jag är en C#-utvecklare och det är det primära språket för apputveckling. Det finns dock några fantastiska ramverk för F# såsom Fabulous för funktionell utveckling.

XAML är ett annat ”språk” som kommer att användas för att bygga användargränssnitt med Xamarin. XAML har använts länge för att bygga Windows-applikationer med WPF och UWP och har några fantastiska funktioner som lättläst markering, Hot Reload-teknik och avancerad databindning för att göra utvecklingen av användargränssnittet till en barnlek.

Vilka verktyg kan jag använda?
.NET gör det möjligt för utvecklare att använda ett stort antal verktyg, bland annat kommandoraden, kodredigeringsprogram som Visual Studio Code och fullständiga IDE:er (Integrated Development Environment) med Visual Studio 2019 och Visual Studio 2019 för Mac. För att utveckla mobilappar med Xamarin måste vi använda antingen Visual Studio 2019 eller Visual Studio 2019 för Mac eftersom de har alla funktioner för att bygga appar.

Så, låt oss börja bygga våra första mobilappar med Xamarin!

Installation av Visual Studio för mobilutveckling

Det första steget i din plattformsoberoende resa är att installera Visual Studio 2019 för Windows eller Visual Studio 2019 för Mac.

När du installerar Visual Studio 2019 på Windows är allt du behöver göra att välja Mobile development with .NET:

På Visual Studio 2019 för Mac kan du välja att installera Android och iOS.

Om du gör iOS-utveckling måste du också installera Xcode på din macOS-maskin.

Efter det här är du redo för mobilutveckling!

När du skapar och kör ett Android-projekt kan du bli ombedd att installera ytterligare Android SDK:er och skapa Android-emulatorer.

Skapa ditt projekt

Nu när vi har installerat Visual Studio 2019 och Xamarin kan vi börja arbeta! När du startar Visual Studio 2019 får du möjlighet att skapa ett nytt projekt. På Windows kan du söka efter Xamarin.Forms eller använda filtret för projekttyper och välja Mobile. Vi vill välja Mobile App (Xamarin.Forms).

När du väljer det här nya projektet visas en ny dialogruta som frågar vilken typ av mall för appen du vill använda:

Vi har några alternativ att välja utifrån vilken typ av applikation vi vill bygga.

Flyout, Tabbed, & Blank

Flyout &Mallar för appar med flikar är baserade på den senaste Xamarin.Forms-tekniken som kallas Shell. Den gör det möjligt att snabbare bygga upp appar och erbjuder unika funktioner som URL-baserad navigering. Dessa mallar är likartade med en huvudsaklig skillnad om du vill ha en utflyttad meny eller nedre flikar för basen av din app.

Blank app är just det och erbjuder en ganska enkel mall med en enda sida och inget annat.

Låt oss gå vidare med Flyout! Jag vill att vi börjar här eftersom de flesta tutorials inte går igenom Shell och för mig är det framtiden för Xamarin apputveckling. Den här mallen har mycket i är så i framtida inlägg kommer vi att gå igenom varje avsnitt, men för idag kommer vi bara att skapa projektet och gå igenom vad en Shell är.

Om du är på Visual Studio 2019 för Mac vill du välja Multiplatform > App > Flyout Forms App

Vad finns i projektet?

Nu när app-projektet har skapats ser du flera projekt inuti en enda lösning.

Låt oss gå igenom vad som finns här i vår nya lösning:

Det första projektet innehåller flera mappar, kodfiler och användargränssnittsfiler. Det här projektet är ett .NET Standard-projekt som gör att vi kan ha ett enda projekt som kan delas mellan olika operativsystem. Det är i det här projektet som vi kommer att skriva det mesta av vår kod.

iOS & Androidprojekt är ”huvud-” eller ”moderprojektet” som används för att hysa plattformsspecifik kod, inställningar, tillgångar med mera. Det är här du vill konfigurera olika inställningar som visningsnamn, app-ikon, versionsnummer och all kod som behövs för iOS- eller Android-specifika saker som inte är tillgängliga plattformsövergripande. Vid något tillfälle kommer du att behöva gå in i dessa projekt och justera saker och ting, men för tillfället kommer vi att stanna i det plattformsoberoende projektet.

Xamarin.Forms Cross-Platform UI

Inuti vårt plattformsoberoende .NET Standard-projekt kommer vi att hitta lite kod för vår app. Den här mallen visar upp en exempelapp som har en lista med objekt och en om-sida. Artiklarna är organiserade i mappar:

• Modeller: Det här är klasser som representerar data i dina appar, t.ex. person, bil, hund, katt osv. I den här appen har vi en enda modell som heter Item.
• Tjänster: I den här mappen lägger du kod som ger åtkomst till saker som inte är relaterade till användargränssnittet, t.ex. anrop av webbtjänster, databaser osv. I projektet i en enkel MockDataStore som används för att lagra objekt i minnet.
• Views:
• ViewModels: Här kommer våra XAML-filer för användargränssnittet att bo!
• ViewModels: I den här mappen hittar du filer som nästan 1:1 motsvarar mappen Views. Detta beror på att varje View har en ViewModel som är bunden att Xamarin.Forms kan brygga ihop de två så att View kan visa information eller anropa metoder i varje ViewModel.

Låt oss titta på AboutPage.xaml som är den första sidan vi kommer att se när vi startar appen. Här ser vi några saker, först är toppnivåelementet 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}">

Här finns några xmlns-taggar som representerar var specifik kod bor. Standard och x ingår i varje fil och är för basfunktionalitet. Taggen xmlns:vm gör det möjligt för oss att komma åt vår egen kod från XAML, vilket vi kommer att se om en stund. x:Class är en referens till sidans namnområde och namn, detta matchar koden bakom. Slutligen finns det en Title-egenskap som är databunden till en egenskap som heter Title i vår ViewModel.

Vi kan ställa in ytterligare egenskaper som BindingContext och Resources med XAML-innehåll. Här ska vi använda xmlns:vm-taggen för att ställa in BindingContext till en ny instans av AboutViewModel:

<ContentPage.BindingContext> <vm:AboutViewModel /></ContentPage.BindingContext>

Nästan är det en Color-resurs som kan användas på sidan. Resurser gör det möjligt för oss att ta bort dubblerad kod och skapa återanvändbara nyckel/värdepar. Detta liknar på ett sätt CSS inom webbutveckling.

<ContentPage.Resources> <ResourceDictionary> <Color x:Key="Accent">#96d1ff</Color> </ResourceDictionary></ContentPage.Resources>

Vi kan lägga till fler saker till resurserna, inklusive strängar, stilar med mera.

Slutligt kan varje sida ha en rotelementkontroll. Detta är normalt en Layout som StackLayout, ScrollView eller ett Grid som vi har här. Grid är en fantastisk kontroll som har rader och kolumner. Vi kommer inte att gå in i detalj på layouter, men den här visar en bild, lite text och en knapp som kan klickas på för att öppna en webbläsare.

<Button Margin="0,10,0,0" Text="Learn more" Command="{Binding OpenWebCommand}" BackgroundColor="{StaticResource Primary}" TextColor="White" />

Notera {StaticResource Primary}, som är en referens till en resurs som vi definierade Accent tidigare, men Primary är placerad i vår App.xaml, som är resurser som är tillgängliga i hela appen.

För att hitta fler layouter och kontroller kan du öppna verktygslådan för att se vad som finns tillgängligt:

Till sist, om du markerar en kontroll eller layout visar egenskapsfönstret alla de olika egenskaper som är tillgängliga för den kontrollen.

En sak som är mycket viktig är att var och en av dessa XAML-sidor har kod bakom sig som är viktig för XAML-vyn och har specifika metoder för konstruktören och händelsen som när sidorna visas eller försvinner. Du kan använda den lilla pilen drop down för att se .xaml.cs-koden bakom filen.

Om du öppnar den kommer du att se att den är mycket enkel eftersom det för den här vyn inte finns några speciella händelser som behövs just nu.

public partial class AboutPage : ContentPage{ public AboutPage() { InitializeComponent(); }}

Användarinteraktion och ViewModels

Nu ska vi prata om ViewModellen för den här sidan som skapades i XAML. Öppna filen ViewModels -> AboutViewModel.cs genom att dubbelklicka 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; }}

Detta är en förvånansvärt enkel ViewModel, men är ett anmärkningsvärt exempel på hur databindning fungerar. Här ställer ViewModel in Title till About och skapar sedan ett nytt Command som anropar Browser.OpenAsync för att öppna en webbläsare på sidan.

Det där Command är något speciellt. Till skillnad från Title som är en enkel string som kommer att visas, är Command en speciell klass som vi kan använda för att tala om för vårt användargränssnitt att göra något när användaren interagerar med det. På vår Button såg vi till exempel följande kod:

Command="{Binding OpenWebCommand}"

Denna kod talar om för Xamarin.Forms att det finns ett public Command i vår ViewModel som har kod som ska exekveras när användaren klickar på knappen. I det här fallet vill vi öppna webbläsaren, vilket är en av de många infödda funktionerna som finns tillgängliga i Xamarin.Essentials. Genom att anropa Browser.OpenAsync startas webbläsaren som är specifik för iOS och Android med en enda kodrad.

Snabba ändringar med XAML Hot Reload

Nu är det dags att starta vår applikation. Jag gillar att börja på Android eftersom emulatorer finns tillgängliga lokalt på både Windows och macOS. I menyn i Visual Studio kommer du att se att Android är standardprojektet och kommer debug-knappen är tillgänglig och kommer att visa dina Android-emulatorer tillgängliga. När du klickar på debug-knappen om du inte har några emulatorer kommer du att bli ombedd att skapa en.

När appen startar kommer den att gå in i felsökningsläget vilket gör det möjligt för oss att ställa in brytpunkter på vår kod för att se värdena, men det aktiverar också XAML Hot Reload där vi kan göra ändringar i användargränssnittet utan att behöva stoppa felsökningen.

Låt oss öppna AboutPage.xaml och ändra Accentfärgen till en annan färg. Här uppdaterar jag den till orange och trycker på spara för att se ändringarna.

I det här läget kan vi lägga till nya kontroller, uppdatera användargränssnittet och fortsätta att arbeta med vår app på Android.

Deployera till iOS med Hot Restart

Låt oss få iOS deployat! Högerklicka på iOS-projektet och välj Ange som startprojekt:

På iOS är saker och ting lite annorlunda för utvecklare. Om du är på macOS och installerar Xcode har du iOS-simulatorer tillgängliga. Om det är du kan du välja en simulator och sedan felsöka din app. På Windows finns det inga iOS-simulatorer 🙁 så det finns två sätt att få din

• iOS Remoted Simulator: Om du har en macOS-maskin kan du installera Visual Studio 2019 för Mac och Xcode och ansluta till den från din Windows-maskin för att använda den som en fjärrbyggmaskin. iOS-simulatorn kan sedan startas från den som visas på din Windows-maskin, vilket är väldigt coolt!
• iOS Hot Restart: Detta är en ny förhandsvisningsteknik som gör att du kan distribuera en felsökningsbyggnad av din app direkt till din iOS-enhet som är ansluten till din Windows-maskin. Detta är bra om du inte har en Mac och vill felsöka din applikation och använda grymma funktioner som XAML Hot Reload.

Baserat på din inställning och tillgänglig utrustning finns det ett bra alternativ för dig att börja felsöka din iOS-app från Windows. Läs igenom dokumentationen som jag länkade till för en fullständig installationsguide.

Understanding App and Shell

Det sista jag vill prata om är vad som finns i vår *App och vad som finns i vårt Shell:

Inside of our App.xaml hittar du globala resurser som Primary som vi använde tidigare på knappen, men också stilar som en global Button stil som vi använder med tillstånd när den är aktiverad och inaktiverad. Om du öppnar koden App.xaml.cs bakom dig kommer du att se skapandet av App som ställer in MainPage till vår AppShell och har också ytterligare händelser som liknar vår sida, men för appen, t.ex. när den startade, gick i viloläge (aka bakgrund) och återupptogs.

I AppShell.xaml finns skalet i vår programstruktur. Den innehåller stilar och färger för vårt appskal och har sedan ytterligare objekt för flikar, flyouts och sidor som visas. Här hittar vi två FlyoutItem-element som representerar AboutPage och BrowsePage. Dessutom har den en MenuItem för att visa en inloggnings-/utloggningsknapp. ShellContent har en bindning till vår sida som vi skapade och automatiskt kommer sidorna att visas och navigera till var och en av dem när de väljs.

Det finns mycket mer om Xamarin.Forms Shell och skapande av appar med Xamarin, men förhoppningsvis sätter detta dig på startvägen för att komma igång med din app. Se till att följa .NET dev.to-kontot för fler poster i den här serien.

Lär dig mer