Skab Cross-Platform Apps med Xamarin i VS 2017

I en verden, hvor mobile enheder dominerer, er evnen til at udvikle applikationer, der fungerer på tværs af flere platforme, blevet en uvurderlig færdighed. Traditionelt har dette krævet separate kodebaser og udviklingsteams for hver platform – en dyr og tidskrævende proces. Men med fremkomsten af cross-platform udviklingsværktøjer er denne udfordring blevet betydeligt lettere.

Denne artikel vil dykke ned i, hvordan du kan udnytte Xamarin inden for Visual Studio 2017 til at skabe robuste og effektive cross-platform mobilapplikationer. Xamarin, som er en del af Microsofts .NET-økosystem, giver udviklere mulighed for at bygge native applikationer til Android, iOS og Universal Windows Platform (UWP) ved hjælp af C# og en enkelt, delt kodebase. Dette betyder, at du kan skrive din logik én gang og genbruge den på tværs af alle dine målplatforme, hvilket sparer betydelig udviklingstid og vedligeholdelsesindsats.

Vi vil guide dig gennem processen fra den indledende opsætning af Visual Studio 2017 til oprettelsen af din første simple, men fuldt funktionelle, cross-platform app. Uanset om du er en nybegynder inden for mobiludvikling eller ønsker at optimere din nuværende arbejdsproces, vil denne guide give dig de nødvendige værktøjer og trin til at komme i gang.

Hvad er Xamarin og hvorfor bruge det?

Xamarin er et open source-framework, der tillader udviklere at bygge native Android-, iOS- og Windows-apps med C# og .NET. Kernen i Xamarin er evnen til at kompilere C#-kode til native ydeevne på hver platform. Det betyder, at dine apps ikke blot er webvisninger, men ægte, native applikationer, der udnytter enhedens fulde potentiale og leverer en flydende brugeroplevelse.

Inden for Xamarin findes der to primære tilgange til udvikling:

• Xamarin.Forms: Dette er den mest populære metode til cross-platform udvikling med Xamarin. Xamarin.Forms tillader dig at definere din brugergrænseflade (UI) én gang ved hjælp af XAML (Extensible Application Markup Language) eller C# og derefter rendere den til de native UI-elementer på hver platform. Dette er ideelt for apps, der kræver en høj grad af kodegenbrug og en ensartet brugergrænseflade på tværs af platforme. Det er denne tilgang, vi vil fokusere på i denne guide.
• Xamarin.iOS og Xamarin.Android: Disse tilgange giver dig mulighed for at bygge platformspecifikke brugergrænseflader ved hjælp af C# og adgang til de native SDK'er for hver platform. Dette er velegnet til apps, der kræver en meget specifik og platform-idiomatisk brugeroplevelse, hvor UI'en er unik for hver platform, men den underliggende forretningslogik stadig kan deles.

Fordelene ved at vælge Xamarin er mange:

• Kodegenbrug: Den største fordel er muligheden for at dele op til 90% af din kode på tværs af Android, iOS og Windows. Dette reducerer udviklingstiden og omkostningerne betydeligt.
• Native Ydeevne: Xamarin-apps er kompilerede til native kode, hvilket sikrer optimal ydeevne og en flydende brugeroplevelse, der matcher traditionelle native apps.
• C# og .NET: Udviklere, der allerede er fortrolige med C# og .NET, kan hurtigt komme i gang med mobiludvikling uden at skulle lære nye sprog som Java/Kotlin (for Android) eller Swift/Objective-C (for iOS).
• Adgang til Native API'er: Xamarin giver fuld adgang til de underliggende platform-API'er, hvilket betyder, at du kan udnytte alle enhedens funktioner – fra kamera og GPS til sensorer og notifikationer.
• Stort Økosystem: Som en del af Microsofts økosystem drager Xamarin fordel af et bredt udvalg af værktøjer, biblioteker og en stor udviklerfællesskab.

Målgruppe og Forudsætninger

Denne guide er primært rettet mod begyndere med en grundlæggende forståelse for C# og XAML. Selvom vi vil gennemgå trinene omhyggeligt, er en vis fortrolighed med programmeringskoncepter en fordel.

Tekniske Krav

For at følge med i denne guide skal du have følgende:

• Windows 10 Operativsystem: Visual Studio 2017 kører optimalt på Windows 10.
• Visual Studio 2017: Den integrerede udviklingsmiljø (IDE), hvor al udvikling finder sted.
• Udviklertilstand Aktiveret: På dit Windows 10-operativsystem skal udviklertilstand være aktiveret for at kunne installere og teste UWP-applikationer. Du finder denne indstilling under 'Indstillinger' -> 'Opdatering og sikkerhed' -> 'For udviklere'.

Installation af Visual Studio 2017 med Xamarin

Det første skridt er at sikre, at din udviklingsmiljø er korrekt opsat. Hvis du allerede har Visual Studio 2017 installeret, skal du muligvis blot modificere din installation for at inkludere Xamarin-komponenterne. Hvis ikke, skal du downloade Visual Studio Installer.

1. Download Visual Studio Installer: Hvis du ikke allerede har Visual Studio 2017, skal du downloade installeren fra Microsofts officielle hjemmeside. Søg efter 'Visual Studio 2017 download' for at finde den korrekte version.
2. Kør Installeren: Når installeren er downloadet, skal du køre den. Den vil præsentere dig for en række workloads, som er foruddefinerede sæt af værktøjer og komponenter til specifikke typer af udvikling.
3. Vælg 'Mobile development with .NET': I Visual Studio Installer skal du rulle ned og sikre dig, at workloaden 'Mobile development with .NET' er markeret. Dette vil automatisk vælge alle de nødvendige komponenter til Xamarin-udvikling, herunder Xamarin SDK'er, Android SDK, emuleringsværktøjer og mere.
4. Start Installation: Klik på 'Installer' for at påbegynde installationen. Dette kan tage et stykke tid afhængigt af din internetforbindelse og de valgte komponenter. Sørg for at have en stabil forbindelse.

Når installationen er fuldført, er du klar til at begynde at oprette dit første Xamarin.Forms-projekt.

Oprettelse af et nyt Xamarin.Forms-projekt

Nu hvor Visual Studio 2017 er installeret og konfigureret med Xamarin, kan vi oprette et nyt projekt.

1. Start Visual Studio 2017: Kør Visual Studio 2017.
2. Opret Nyt Projekt: Klik på 'Filer' -> 'Ny' -> 'Projekt' i menulinjen.
3. Vælg Skabelon: I dialogboksen 'Nyt projekt' skal du navigere til 'Skabeloner' -> 'Visual C#' -> 'Cross-Platform'.
4. Vælg 'Cross Platform App (Xamarin.Forms or Native)': Vælg denne skabelon.
5. Navngiv Projektet: Indtast et passende navn til din applikation (f.eks. 'MinForsteXamarinApp').
6. Vælg Placering: Vælg en placering på din computer, hvor projektfilerne skal gemmes.
7. Klik 'OK': Klik på 'OK' for at fortsætte.
8. Vælg App-type: En ny dialogboks vises. Her skal du vælge 'Blank App' og sikre dig, at 'Xamarin.Forms' er valgt som UI-teknologi. For kode-delingsstrategi skal du vælge 'Portable Class Library (PCL)'. PCL er en ældre, men stadig funktionel, metode til kodegenbrug, som er relevant for VS 2017. Klik 'OK'.
9. Vælg Mål- og Minimumsversioner (Kun for UWP): Hvis du inkluderer en UWP (Universal Windows Platform) projekt, vil du blive bedt om at vælge en mål- og minimumsversion for Windows. Vælg de standardindstillinger, der passer bedst til dit behov, og klik 'OK'.

Vigtig Bemærkning om iOS-udvikling

For at udvikle og teste iOS-applikationer med Visual Studio på Windows, skal du have en Mac med Xamarin-værktøjerne installeret. Din Windows-maskine vil oprette forbindelse til denne Mac (kaldet en Xamarin Mac Build Host) for at kompilere og køre iOS-apps. Hvis du ikke har adgang til en Mac, kan du stadig udvikle og teste Android- og UWP-versionerne af din app.

Projektstruktur og Udvikling

Når dit projekt er oprettet, vil du se en løsning i Solution Explorer med flere underprojekter:

• [DitAppNavn] (Portable): Dette er dit delte projekt (PCL). Det er her, du vil skrive det meste af din C#-logik og XAML-brugergrænseflade. Koden herfra genbruges på alle platforme.
• [DitAppNavn].Android: Dette projekt indeholder platformspecifik kode og ressourcer til Android-versionen af din app.
• [DitAppNavn].iOS: Dette projekt indeholder platformspecifik kode og ressourcer til iOS-versionen af din app.
• [DitAppNavn].UWP: Dette projekt indeholder platformspecifik kode og ressourcer til Universal Windows Platform-versionen af din app. Apps bygget med UWP kan køre på Windows 10-telefoner, tablets og desktops.

Vores primære fokus vil være på det delte (Portable) projekt, da det er her, magien ved cross-platform udvikling sker. Åbn 'MainPage.xaml' inde i dit Portable-projekt.

Ved standardopsætning vil 'MainPage.xaml' indeholde en simpel 'Label' med teksten "Welcome to Xamarin.Forms!". Vi vil nu erstatte denne standardindhold med en simpel login-formular for at demonstrere, hvordan UI-elementer defineres i XAML.

Erstat den eksisterende <Label> kode med følgende:

<StackLayout> <Label Text="Email" VerticalOptions="CenterAndExpand" HorizontalOptions="Center"></Label> <Entry Placeholder="Indtast din Email" Margin="20,0"></Entry> <Label Text="Adgangskode" VerticalOptions="CenterAndExpand" HorizontalOptions="Center"></Label> <Entry Placeholder="Indtast din Adgangskode" IsPassword="True" Margin="20,0"></Entry> <Button Text="Login" Margin="20,0"></Button> </StackLayout>

Denne XAML-kode definerer en simpel formular. StackLayout er en layout-container, der organiserer sine elementer lineært (enten vertikalt eller horisontalt). Vi har tilføjet to Label-kontroller (til tekst), to Entry-kontroller (til tekstinput, hvoraf den ene er en adgangskodefelt) og en Button. Bemærk Placeholder-attributterne, som giver en hintstekst, og Margin-attributten for at give elementerne lidt afstand.

Kørsel af applikationen på Android

For at se din app i aktion på en Android-emulator, skal du følge disse trin:

1. Vælg Android-projektet: I dropdown-menuen øverst i Visual Studio, ved siden af den grønne 'Afspil'-knap, skal du vælge dit Android-projekt (f.eks. 'MinForsteXamarinApp.Android').
2. Vælg Emulator: I den samme dropdown-menu, men nu for enheder, skal du vælge en Android-emulator, du har installeret, eller oprette en ny via 'Android Device Manager' (værktøjer -> Android -> Android Device Manager).
3. Start Applikationen: Klik på den grønne 'Afspil'-knap (Start Debugging). Visual Studio vil nu kompilere din Android-app og implementere den på den valgte emulator. Dette kan tage et par minutter, første gang du starter en emulator.

Du vil nu se din enkle login-formular vises på Android-emulatoren. Dette demonstrerer kraften i Xamarin.Forms, da den samme XAML-kode automatisk er blevet oversat til Androids native UI-elementer.

Kørsel af applikationen på UWP (Windows)

For at køre din applikation på din lokale Windows 10-maskine som en UWP-app, skal du foretage et par konfigurationsjusteringer:

1. Vælg UWP-projektet: I dropdown-menuen øverst i Visual Studio, vælg dit UWP-projekt (f.eks. 'MinForsteXamarinApp.UWP').
2. Konfigurer Løsningsegenskaber: Højreklik på din løsning i Solution Explorer (den øverste post) og vælg 'Egenskaber'.
3. Gå til Konfigurationsegenskaber: I vinduet med løsningsegenskaber skal du navigere til 'Konfigurationsegenskaber' -> 'Konfiguration'.
4. Marker 'Build' og 'Deploy': Sørg for at 'Build' og 'Deploy' er markeret for dit UWP-projekt i den række, der svarer til din nuværende løsningskonfiguration (f.eks. 'Debug' eller 'Release'). Klik på 'Anvend' og derefter 'OK'.
5. Start Applikationen: Klik på den grønne 'Afspil'-knap (Lokal maskine). Visual Studio vil nu kompilere og implementere din UWP-applikation direkte på din Windows 10-maskine.

Du vil se applikationen starte som en almindelig Windows-app, der viser den samme login-formular, som du så på Android-emulatoren. Dette bekræfter, at din cross-platform app fungerer som forventet på tværs af forskellige operativsystemer.

Forståelse af Code-Behind-filer

Ud over XAML-filerne, som definerer brugergrænsefladen, vil du bemærke, at hver .xaml-fil har en tilhørende .xaml.cs-fil (f.eks. 'MainPage.xaml.cs'). Disse kaldes 'code-behind'-filer. Det er her, du skriver al din C#-logik, der interagerer med UI-elementerne, håndterer begivenheder (som knapklik), udfører beregninger, kommunikerer med API'er og meget mere. Denne adskillelse af UI (XAML) og logik (C#) er en grundpille i XAML-baserede applikationer og letter vedligeholdelse og testning.

Sammenligning: Xamarin.Forms vs. Native Udvikling

For at give et klarere billede af fordelene ved Xamarin.Forms i forhold til traditionel native udvikling, lad os se på en hurtig sammenligning:

Ofte Stillede Spørgsmål (FAQ)

Q: Hvad hvis jeg ikke har en Mac til iOS-udvikling?

A: Du kan stadig udvikle og teste dine Android- og UWP-applikationer fuldt ud. For iOS er en Mac dog et krav for at kompilere og køre apps, selvom du skriver koden i Visual Studio på Windows. Du kan overveje cloud-baserede Mac-løsninger, men en fysisk Mac er den mest ligetil løsning.

Q: Kan jeg bruge en nyere version af Visual Studio?

A: Denne guide fokuserer på Visual Studio 2017, da den blev leveret i den oprindelige information. Dog er Xamarin.Forms fuldt understøttet i nyere versioner som Visual Studio 2019 og Visual Studio 2022. Processen vil være meget lignende, men menunavne og installationsmuligheder kan variere lidt. I nyere versioner er 'Portable Class Library (PCL)' ofte erstattet af '.NET Standard Library' som den foretrukne metode til kodegenbrug, hvilket er en mere moderne og fleksibel tilgang.

Q: Hvilke begrænsninger har Xamarin.Forms?

A: Selvom Xamarin.Forms er utrolig kraftfuld, er der situationer, hvor en fuld native app kan være at foretrække. Komplekse, platformspecifikke UI-animationer eller avancerede interaktioner, der ikke let kan abstraheres, kan være mere udfordrende i Xamarin.Forms. For de fleste forretningsapplikationer og standard-apps er Xamarin.Forms dog mere end tilstrækkelig.

Q: Hvordan debugger jeg min app?

A: Visual Studio tilbyder fremragende debugging-værktøjer. Du kan sætte breakpoints i din C#-kode i det delte projekt eller i de platformspecifikke projekter. Når appen kører i en emulator eller på en fysisk enhed, vil udførelsen stoppe ved dine breakpoints, så du kan inspicere variabler og gennemgå koden trin for trin.

Q: Hvor kan jeg lære mere om Xamarin.Forms?

A: Microsoft Learn-platformen tilbyder omfattende dokumentation og tutorials for Xamarin.Forms. Derudover er der et stort fællesskab af Xamarin-udviklere, og mange blogs og onlinekurser kan hjælpe dig med at dykke dybere ned i avancerede emner som databinding, navigation, MVVM (Model-View-ViewModel) mønsteret og integration af tredjepartsbiblioteker.

Konklusion

Du har nu taget de første skridt mod at udvikle cross-platform mobilapplikationer med Xamarin og Visual Studio 2017. Vi har dækket alt fra installation og projektopsætning til at oprette en simpel brugergrænseflade og køre den på både Android og Windows. Evnen til at genbruge kode på tværs af platforme er en game-changer inden for mobiludvikling, og Xamarin.Forms gør dette tilgængeligt for C#-udviklere.

Dette er blot begyndelsen. Xamarin.Forms er et dybt og alsidigt framework med et væld af funktioner og muligheder. Vi opfordrer dig til at fortsætte med at udforske de forskellige mapper og filer i dit projekt, eksperimentere med flere UI-kontroller, lære om databinding og begynde at skrive din egen forretningslogik i code-behind-filerne. Jo mere du udforsker, jo mere vil du opdage potentialet i cross-platform udvikling.

Bliv ved med at udforske, bliv ved med at lære!

Hvis du vil læse andre artikler, der ligner Skab Cross-Platform Apps med Xamarin i VS 2017, kan du besøge kategorien Mobiludvikling.