Laten we samen beginnen aan onze reis om prachtige native cross-platform apps te bouwen met .NET, Xamarin en Visual Studio! In deze blog zal ik je door het hele proces leiden en alles beschrijven wat er in File -> New for Xamarin staat. Als je een meer visuele leerling bent, heb ik een volledige video die je kunt bekijken:
Laten we eerst wat basiswerk doen door een aantal veelgestelde vragen te beantwoorden.
Wat is .NET?
.NET is een cross-platform, high-performant, en open-source runtime die wordt gebruikt met meerdere talen, editors, en bibliotheken die het mogelijk maken om apps te bouwen voor web, mobiel, desktop, games, en meer. Het is de basis die het mogelijk maakt om code te draaien op verschillende platformen zoals iOS, Android en Windows. Als u een webontwikkelaar bent, is dit als de V8 runtime die JavaScript uitvoert of als u een Java-ontwikkelaar bent, de JVM die Java uitvoert.
Wat is Xamarin?
.NET heeft een reeks frameworks die ervoor zijn gebouwd die unieke scenario’s voor ontwikkelaar voor specifieke platforms mogelijk maken. Bijvoorbeeld, ASP.NET Core en Blazor zijn frameworks gebouwd voor .NET voor web ontwikkeling. WPF en UWP zijn frameworks die zijn gebouwd voor .NET voor desktop ontwikkeling. Xamarin is een framework en tooling waarmee apps kunnen worden gebouwd voor iOS, Android, en macOS. Het bevat ook verschillende bibliotheken die cross-platform ontwikkeling mogelijk maken voor iOS, Android, macOS en Windows, waaronder Xamarin.Forms voor cross-platform gebruikersinterface en Xamarin.Essentials voor toegang tot native platform functies cross-platform.
Welke programmeertalen kan ik gebruiken?
.NET ondersteunt verschillende talen, waaronder C#, F#, en Visual Basic. Je kunt elk van deze programmeertalen gebruiken om apps te bouwen met Xamarin, maar ik ben een C# ontwikkelaar, en dat is de primaire taal voor app ontwikkeling. Er zijn echter een aantal fantastische frameworks voor F#, zoals Fabulous voor functionele ontwikkeling.
XAML is een andere “taal” die zal worden gebruikt om gebruikersinterface te bouwen met Xamarin. XAML wordt al lange tijd gebruikt om Windows-applicaties te bouwen met WPF en UWP en heeft een aantal geweldige functies, waaronder gemakkelijk te lezen markup, Hot Reload-technologie en geavanceerde gegevensbinding om UI-ontwikkeling een koud kunstje te maken.
Welke tools kan ik gebruiken?
.NET stelt ontwikkelaars in staat om een breed scala aan tools te gebruiken, waaronder opdrachtregel, code-editors zoals Visual Studio Code, en volledige IDE’s (Integrated Development Environment) met Visual Studio 2019 en Visual Studio 2019 voor Mac. Om mobiele apps te ontwikkelen met Xamarin zullen we Visual Studio 2019 of Visual Studio 2019 voor Mac moeten gebruiken, omdat deze de volledige functies hebben om apps te bouwen.
Dus, laten we aan de slag gaan met het bouwen van onze eerste mobiele apps met Xamarin!
Installeren van Visual Studio voor mobiele ontwikkeling
De eerste stap in uw cross-platform reis is het installeren van Visual Studio 2019 voor Windows of Visual Studio 2019 voor Mac.
Bij het installeren van Visual Studio 2019 op Windows hoeft u alleen maar de Mobile development with .NET workload:
Op Visual Studio 2019 voor Mac kun je selecteren om Android en iOS te installeren.
Als je iOS-ontwikkeling doet, moet je ook Xcode installeren op je macOS-machine.
Na dit alles ben je helemaal klaar en klaar voor mobiele ontwikkeling!
Wanneer u een Android-project maakt en uitvoert, kunt u de vraag krijgen om extra Android SDK’s te installeren en Android-emulators te maken.
Het maken van uw project
Nu we Visual Studio 2019 en Xamarin hebben geïnstalleerd, kunnen we aan de slag! Als je Visual Studio 2019 opstart krijg je een optie om een nieuw project te maken. Op Windows kun je zoeken naar Xamarin.Forms of gebruik de project types filter en selecteer Mobile. We zullen Mobile App (Xamarin.Forms) willen selecteren.
Wanneer u dit nieuwe project selecteert, ziet u een nieuw dialoogvenster waarin u wordt gevraagd welk type sjabloon voor de app u wilt gebruiken:
We hebben een paar opties om te selecteren op basis van het type applicatie dat we willen bouwen.
Flyout, Tabbed, & Blank
Flyout & Tabbed app templates zijn gebaseerd op de nieuwste Xamarin.Forms technologie genaamd Shell. Het maakt een snellere scaffolding van apps mogelijk en biedt unieke functies zoals URL-gebaseerde navigatie. Deze sjablonen zijn vergelijkbaar met een belangrijk verschil of je een flyout menu of onderste tabbladen wilt voor de basis van je app.
Blank app is precies dat en biedt een vrij eenvoudig sjabloon met een enkele pagina en niets anders.
Laten we gaan met Flyout! Ik wil dat we hier beginnen omdat de meeste tutorials niet door Shell gaan en voor mij is het de toekomst van Xamarin app ontwikkeling. Deze template heeft veel inhoud, dus in toekomstige posts zullen we elke sectie doornemen, maar voor vandaag zullen we alleen het project maken en doornemen wat een Shell is.
Als u Visual Studio 2019 voor Mac gebruikt, selecteert u Multiplatform > App > Flyout Forms App
Wat zit er in het project?
Nu het app-project is gemaakt, ziet u verschillende projecten binnen één oplossing.
Laten we eens doorlopen wat er in onze nieuwe oplossing staat:
Het eerste project bevat verschillende mappen, codebestanden en gebruikersinterfacebestanden. Dit project is een .NET Standard project dat ons in staat stelt om een enkel project te hebben dat kan worden gedeeld over verschillende besturingssystemen. Dit project is waar we het grootste deel van onze code zullen schrijven.
iOS & Android projecten zijn het “hoofd” of “ouder” project dat wordt gebruikt om platform-specifieke code, instellingen, activa, en nog veel meer te huisvesten. Dit is waar u verschillende instellingen zult willen configureren zoals schermnaam, app icoon, versienummers, en elke code die nodig is voor iOS of Android specifieke dingen die niet cross-platform beschikbaar zijn. Op een gegeven moment zult u in deze projecten moeten gaan om dingen aan te passen, maar voor nu blijven we in het cross-platform project.
Xamarin.Forms Cross-Platform UI
Binnenin ons cross-platform .NET Standard project vinden we een beetje code voor onze app. Dit sjabloon toont een voorbeeld app die een lijst van items en een over pagina heeft. Items zijn georganiseerd in mappen:
- Modellen: Dit zijn klassen die gegevens vertegenwoordigen in uw apps, zoals Persoon, Auto, Hond, Kat, enz. In deze app hebben we een enkel model genaamd Item.
- Services: In deze map zet je code die toegang geeft tot niet-UI gerelateerde zaken zoals webservice calls, databases, etc. In het project in een eenvoudige MockDataStore die wordt gebruikt om items op te slaan in het geheugen.
- Views: Dit is waar onze XAML user interface bestanden zullen wonen!
- ViewModels: In deze map vindt u bestanden die bijna 1:1 overeenkomen met de Views-map. Dit komt omdat elke View een ViewModel heeft dat gebonden is zodat Xamarin.Forms de twee kan overbruggen zodat de View informatie kan weergeven of methoden kan aanroepen in elk ViewModel.
Laten we eens kijken naar de AboutPage.xaml dat is de eerste pagina die we zullen zien als we de app starten. Hier zien we een paar dingen, ten eerste is er het top-level element 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}">Hier zijn een paar xmlns tags die aangeven waar specifieke code staat. De default en x zijn opgenomen in elk bestand en zijn voor basis functionaliteit. De xmlns:vm tag staat ons toe om onze eigen code te benaderen vanuit XAML, wat we zo meteen zullen zien. De x:Class is een verwijzing naar de namespace en naam van de pagina, deze komt overeen met de achterliggende code. Tenslotte is er een Title property die data bounded is aan een property genaamd Title in ons ViewModel.
We kunnen extra properties zoals de BindingContext en Resources instellen met XAML content. Hier gaan we die xmlns:vm tag gebruiken om de BindingContext in te stellen op een nieuwe instantie van het AboutViewModel:
<ContentPage.BindingContext> <vm:AboutViewModel /></ContentPage.BindingContext>Naast staat een Color resource die op de pagina kan worden gebruikt. Resources stellen ons in staat om dubbele code te verwijderen en herbruikbare sleutel/waarde paren te maken. Dit is vergelijkbaar met CSS in webontwikkeling.
<ContentPage.Resources> <ResourceDictionary> <Color x:Key="Accent">#96d1ff</Color> </ResourceDictionary></ContentPage.Resources>We kunnen meer dingen toevoegen aan de Resources, waaronder strings, stijlen, en meer.
Ten slotte kan elke Pagina één root element control hebben. Dit is normaal gesproken een Layout zoals StackLayout, ScrollView, of een Grid zoals we hier hebben. Het raster is een ontzagwekkende controle die rijen en kolommen heeft. We zullen niet veel in detail treden over lay-outs, maar deze toont een afbeelding, wat tekst en een knop waarop kan worden geklikt om een webbrowser te openen.
<Button Margin="0,10,0,0" Text="Learn more" Command="{Binding OpenWebCommand}" BackgroundColor="{StaticResource Primary}" TextColor="White" />Noteer de
{StaticResource Primary}, die een verwijzing is naar een resource die we eerder hebben gedefinieerdAccent, maarPrimarybevindt zich in onze App.xaml, die resources zijn die in de hele app beschikbaar zijn.
Om meer lay-outs en besturingselementen te vinden, kunt u de Toolbox openen om te zien wat er beschikbaar is:
Als u ten slotte een besturingselement of lay-out selecteert, krijgt u in het deelvenster Property alle verschillende eigenschappen te zien die voor dat besturingselement beschikbaar zijn.
Eén ding is erg belangrijk: elk van deze XAML-pagina’s heeft achterliggende code die belangrijk is voor de XAML-weergave en heeft specifieke methoden voor de constructor en gebeurtenis, zoals wanneer de pagina’s worden weergegeven of verdwijnen. U kunt de kleine pijl gebruiken om het .xaml.cs code behind bestand te zien.
Als u het opent, zult u zien dat het heel eenvoudig is, omdat er voor deze view geen speciale events nodig zijn.
public partial class AboutPage : ContentPage{ public AboutPage() { InitializeComponent(); }}User Interaction and ViewModels
Nu, laten we het eens hebben over het ViewModel voor deze pagina die in de XAML is gemaakt. Open het bestand ViewModels -> AboutViewModel.cs door erop te dubbelklikken.
public class AboutViewModel : BaseViewModel{ public AboutViewModel() { Title = "About"; OpenWebCommand = new Command(async () => await Browser.OpenAsync("https://aka.ms/xamarin-quickstart")); } public ICommand OpenWebCommand { get; }}Dit is een verbluffend eenvoudig ViewModel, maar het is een opmerkelijk voorbeeld van hoe gegevensbinding werkt. Hier stelt het ViewModel de Title in op About en maakt vervolgens een nieuwe Command aan die Browser.OpenAsync aanroept om een webbrowser op de pagina te openen.
Die Command is iets bijzonders. In tegenstelling tot Title, dat een eenvoudige string is die zal worden weergegeven, is de Command een speciale klasse die we kunnen gebruiken om onze gebruikersinterface te vertellen iets te doen wanneer de gebruiker ermee interageert. Bijvoorbeeld op onze Button zagen we de volgende code:
Command="{Binding OpenWebCommand}"Deze code vertelt Xamarin.Forms dat er een public Command in ons ViewModel zit die code heeft om uit te voeren wanneer de gebruiker op de knop klikt. In dit geval willen we de brower openen, wat een van de vele native functies is die beschikbaar zijn in Xamarin.Essentials. Het aanroepen van Browser.OpenAsync zal de browser specifiek voor iOS en Android starten met een enkele regel code.
Snelle veranderingen met XAML Hot Reload
Nu is het tijd om onze applicatie te starten. Ik begin graag op Android omdat emulators lokaal beschikbaar zijn op zowel Windows als macOS. In het menu van Visual Studio zal je zien dat Android het standaard project is en zal de debug knop beschikbaar zijn en zal je Android Emulators beschikbaar tonen. Als u op de debug-knop klikt en u hebt geen emulators, wordt u gevraagd er een aan te maken.
Wanneer de app wordt gestart, wordt de debug-modus geactiveerd, waarmee we breekpunten op onze code kunnen instellen om de waarden te zien, maar ook XAML Hot Reload kunnen inschakelen, waarmee we wijzigingen in de UI kunnen aanbrengen zonder het debuggen te hoeven stoppen.
Laten we de AboutPage.xaml openen en de kleur Accent in een andere kleur veranderen. Hier zal ik het updaten naar Oranje en ik zal op save drukken om de veranderingen te zien.
Op dit punt kunnen we nieuwe controls toevoegen, de gebruikersinterface updaten, en verder werken aan onze app op Android.
Deploy naar iOS met Hot Restart
Laten we iOS deployed krijgen! Klik met de rechtermuisknop op het iOS-project en selecteer Als opstartproject instellen:
Op iOS gaat het er voor ontwikkelaars een beetje anders aan toe. Als je op macOS zit en Xcode installeert, heb je iOS-simulatoren tot je beschikking. Als je dit bent, kun je een simulator selecteren en vervolgens je app debuggen. Op Windows zijn er geen iOS simulators 🙁 dus er zijn twee manieren om je
- iOS Remoted Simulator te krijgen: Als je een macOS-machine hebt, kun je Visual Studio 2019 voor Mac en Xcode installeren en er verbinding mee maken vanaf je Windows-machine om het als een remote build-machine te gebruiken. De iOS-simulator kan dan worden gestart vanaf weergegeven op je Windows-machine, wat erg cool is!
- iOS Hot Restart: Dit is een nieuwe preview-technologie die u in staat stelt om een debug build van uw app direct te implementeren op uw iOS-apparaat dat is aangesloten op uw Windows-machine. Dit is geweldig als je geen mac hebt en je wilt je applicatie debuggen en geweldige functies gebruiken zoals XAML Hot Reload.
Gebaseerd op je setup en beschikbare apparatuur is er een geweldige optie voor u om te beginnen met het debuggen van uw iOS-app vanuit Windows. Lees de documentatie waar ik naar gelinkt heb voor een volledige setup gids.
Uitleg App en Shell
Het laatste waar ik het over wil hebben is wat er in onze *App en wat er in onze Shell zit:
Binnenin onze App.xaml vindt u globale bronnen zoals Primary die we eerder op de knop hebben gebruikt, maar ook stijlen zoals een globale Button stijl die we gebruiken met toestanden wanneer ingeschakeld en uitgeschakeld. Als je de App.xaml.cs code achter je opent, zie je de creatieg van de App die de MainPage instelt op onze AppShell en ook aanvullende events heeft vergelijkbaar met onze pagina, maar dan voor de app, zoals wanneer deze is gestart, in slaap is gegaan (aka achtergrond), en weer is hervat.
De AppShell.xaml bevat de Shell van onze applicatie structuur. Het bevat stijlen en kleuren voor onze app shell, en dan heeft extra items voor tabbladen, flyouts, en pagina’s die worden weergegeven. Hier vinden we twee FlyoutItem elementen die de AboutPage en de BrowsePage vertegenwoordigen. Daarnaast heeft het een MenuItem om een login/logout knop weer te geven. De ShellContent heeft een binding met onze pagina die we hebben gemaakt en automatisch zullen de pagina’s verschijnen en naar elk van hen navigeren wanneer ze worden geselecteerd.
Er is nog veel meer over Xamarin.Forms Shell en het maken van apps met Xamarin, maar hopelijk zet dit u op het startpad om aan de slag te gaan met uw app. Zorg ervoor dat je de .NET dev.to account volgt voor meer bijdragen in deze serie.