Free Press

Să începem împreună călătoria noastră pentru a construi aplicații native cross-platform frumoase cu .NET, Xamarin și Visual Studio! În acest blog vă voi ghida prin întregul proces și vă voi descrie tot ceea ce este în File -> New for Xamarin. Dacă sunteți un cursant mai vizual, am un videoclip complet pe care îl puteți viziona:

Să punem mai întâi bazele răspunzând la câteva întrebări frecvente.

Ce este .NET?
.NET este un timp de execuție multi-platformă, foarte performant și open-source care este utilizat cu mai multe limbaje, editori și biblioteci care permite construirea de aplicații pentru web, mobile, desktop, jocuri și multe altele. Este fundația care permite rularea codului pe diferite platforme, cum ar fi iOS, Android și Windows. Dacă sunteți un dezvoltator web, aceasta este ca și timpul de execuție V8 care execută JavaScript sau, dacă sunteți un dezvoltator Java, JVM care execută Java.

Ce este Xamarin?
.NET are o serie de cadre care sunt construite pentru el și care permit scenarii unice pentru dezvoltator pentru anumite platforme. De exemplu, ASP.NET Core și Blazor sunt cadre construite pentru .NET pentru dezvoltarea web. WPF și UWP sunt cadre construite pentru .NET pentru dezvoltarea desktop. Xamarin este un cadru și un instrument care permite crearea de aplicații pentru iOS, Android și macOS. Acesta conține, de asemenea, mai multe biblioteci care permit dezvoltarea cross-platform pentru iOS, Android, macOS și Windows, inclusiv Xamarin.Forms pentru interfața utilizator cross-platform și Xamarin.Essentials pentru accesarea cross-platform a funcțiilor platformei native.

Ce limbaje de programare pot folosi?
.NET suportă mai multe limbaje, inclusiv C#, F# și Visual Basic. Puteți utiliza oricare dintre aceste limbaje de programare pentru a crea aplicații cu Xamarin, însă eu sunt un dezvoltator C#, iar acesta este limbajul principal pentru dezvoltarea aplicațiilor. Cu toate acestea, există câteva cadre fantastice pentru F#, cum ar fi Fabulous pentru dezvoltarea funcțională.

XAML este un alt „limbaj” care va fi folosit pentru a construi interfața cu utilizatorul cu Xamarin. XAML a fost folosit de mult timp pentru a construi aplicații Windows cu WPF și UWP și are câteva caracteristici grozave, inclusiv marcarea ușor de citit, tehnologia Hot Reload și legarea avansată a datelor pentru a face dezvoltarea interfeței utilizator o briză.

Ce instrumente pot folosi?
.NET permite dezvoltatorilor să folosească o gamă largă de instrumente, inclusiv linia de comandă, editori de cod, cum ar fi Visual Studio Code, și IDE-uri complete (Integrated Development Environment) cu Visual Studio 2019 și Visual Studio 2019 pentru Mac. Pentru a dezvolta aplicații mobile cu Xamarin va trebui să folosim fie Visual Studio 2019, fie Visual Studio 2019 pentru Mac, deoarece acestea dispun de caracteristici complete pentru a construi aplicații.

Așa că, să începem să construim primele noastre aplicații mobile cu Xamarin!

Instalarea Visual Studio pentru dezvoltare mobilă

Primul pas în călătoria dvs. cross-platform este să instalați Visual Studio 2019 pentru Windows sau Visual Studio 2019 pentru Mac.

Când instalați Visual Studio 2019 pe Windows, tot ce trebuie să faceți este să selectați opțiunea Mobile development with .NET workload:

Pe Visual Studio 2019 pentru Mac puteți selecta să instalați Android și iOS.

Dacă faceți dezvoltare iOS, va trebui, de asemenea, să instalați Xcode pe mașina dvs. macOS.

După aceasta sunteți gata și pregătit pentru dezvoltarea mobilă!

Când creați și rulați un proiect Android este posibil să vi se ceară să instalați SDK-uri Android suplimentare și să creați emulatoare Android.

Crearea proiectului

Acum că avem Visual Studio 2019 și Xamarin instalate să trecem la treabă! Când lansați Visual Studio 2019, veți avea opțiunea de a crea un nou proiect. Pe Windows puteți căuta Xamarin.Forms sau puteți utiliza filtrul de tipuri de proiecte și să selectați Mobile. Vom dori să selectăm Mobile App (Xamarin.Forms).

Când selectați acest nou proiect, veți vedea o nouă fereastră de dialog care vă va întreba ce tip de șablon pentru aplicația pe care doriți să o utilizați:

Avem câteva opțiuni de selectat în funcție de tipul de aplicație pe care dorim să o construim.

Flyout, Tabbed, & Blank

Flyout & Șabloanele de aplicații Tabbed se bazează pe cea mai recentă tehnologie Xamarin.Forms numită Shell. Aceasta permite o eșafodajare mai rapidă a aplicațiilor și oferă caracteristici unice, cum ar fi navigarea bazată pe URL. Aceste șabloane sunt similare, cu o diferență principală dacă doriți un meniu flyout sau filele de jos pentru baza aplicației dvs.

Blank app este doar atât și oferă un șablon destul de simplu, cu o singură pagină și nimic altceva.

Să mergem cu Flyout! Vreau să începem de aici, deoarece majoritatea tutoriilor nu trec prin Shell și pentru mine este viitorul dezvoltării aplicațiilor Xamarin. Acest șablon are multe în este, așa că în postările viitoare vom trece prin fiecare secțiune, dar pentru astăzi vom crea doar proiectul și vom trece prin ceea ce este un Shell.

Dacă sunteți pe Visual Studio 2019 pentru Mac, veți dori să selectați Multiplatform > App > Flyout Forms App

Ce este în proiect?

Acum că proiectul de aplicație a fost creat, veți vedea mai multe proiecte în interiorul unei singure soluții.

Să trecem în revistă ce se află aici în noua noastră soluție:

Primul proiect conține mai multe foldere, fișiere de cod și fișiere de interfață utilizator. Acest proiect este un proiect .NET Standard care ne permite să avem un singur proiect care poate fi partajat pe diferite sisteme de operare. Acest proiect este cel în care vom scrie cea mai mare parte a codului nostru.

iOS & Proiectele Android sunt proiectul „cap” sau „părinte” care este utilizat pentru a găzdui codul specific platformei, setările, activele și multe altele. Acesta este locul în care veți dori să configurați diferite setări, cum ar fi numele de afișare, pictograma aplicației, numerele de versiune și orice cod care este necesar pentru lucruri specifice iOS sau Android care nu sunt disponibile pentru toate platformele. La un moment dat va trebui să intrați în aceste proiecte și să modificați lucrurile, dar deocamdată vom rămâne în proiectul cross-platform.

Xamarin.Forms Cross-Platform UI

În interiorul proiectului nostru cross-platform .NET Standard .NET vom găsi un pic de cod pentru aplicația noastră. Acest șablon prezintă un exemplu de aplicație care are o listă de articole și o pagină despre. Elementele sunt organizate în foldere:

• Modele: Acestea sunt clase care reprezintă date în aplicațiile dvs., cum ar fi Person, Car, Dog, Cat, etc. În această aplicație avem un singur model numit Item.
• Servicii: În interiorul acestui dosar este locul în care veți pune codul care accesează lucruri care nu au legătură cu UI, cum ar fi apelurile la servicii web, baze de date etc. În proiect, într-un simplu MockDataStore care este folosit pentru a stoca elemente în memorie.
• Views: Acesta este locul unde vor locui fișierele noastre XAML de interfață utilizator!
• ViewModels: În acest dosar veți găsi fișiere care se corelează aproape 1:1 cu dosarul Views. Acest lucru se datorează faptului că fiecare View are un ViewModel care este legat astfel încât Xamarin.Forms poate face legătura între cele două, astfel încât View să poată afișa informații sau să apeleze metodele din fiecare ViewModel.

Să ne uităm la AboutPage.xaml care este prima pagină pe care o vom vedea atunci când lansăm aplicația. Aici vedem câteva lucruri, în primul rând este elementul de nivel superior 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}">

Aici sunt câteva etichete xmlns care reprezintă locul unde locuiește codul specific. Default și x sunt incluse în fiecare fișier și sunt pentru funcționalitatea de bază. Eticheta xmlns:vm ne permite să accesăm propriul cod din XAML, pe care îl vom vedea în curând. Eticheta x:Class este o referință la spațiul de nume și la numele paginii, aceasta se potrivește cu codul din spate. În cele din urmă, există o proprietate Title care este legată prin date la o proprietate numită Title în modelul nostru ViewModel.

Potem seta proprietăți suplimentare, cum ar fi BindingContext și Resources cu conținut XAML. Aici vom folosi acea etichetă xmlns:vm pentru a seta BindingContext la o nouă instanță a AboutViewModel:

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

Următoarea este o resursă Color care poate fi folosită în pagină. Resursele ne permit să eliminăm codul duplicat și să creăm perechi cheie/valoare reutilizabile. Acest lucru este similar, într-un fel, cu CSS în dezvoltarea web.

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

Potem adăuga mai multe lucruri la resurse, inclusiv șiruri de caractere, stiluri și altele.

În cele din urmă, fiecare pagină poate avea un control al elementului rădăcină. Acesta este, în mod normal, un Layout, cum ar fi StackLayout, ScrollView, sau un Grid, așa cum avem aici. Grila este un control minunat care are rânduri și coloane. Nu vom intra prea mult în detalii despre layout-uri, dar acesta afișează o imagine, niște text și un buton care poate fi apăsat pentru a deschide un browser web.

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

Rețineți {StaticResource Primary}, care este o referință la o resursă pe care am definit-o Accent mai devreme, dar Primary este localizată în App.xaml al nostru, care sunt resurse disponibile în întreaga aplicație.

Pentru a găsi mai multe layout-uri și controale, puteți deschide Toolbox pentru a vedea ce este disponibil:

În cele din urmă, dacă selectați un control sau un layout, panoul Property vă va arăta toate proprietățile diferite care sunt disponibile pentru acel control.

Un lucru care este foarte important este că fiecare dintre aceste pagini XAML are în spate cod care este important pentru vizualizarea XAML și are metode specifice pentru constructor și eveniment, cum ar fi atunci când paginile sunt afișate sau dispar. Puteți folosi mica săgeată pentru a vedea codul din spatele fișierului .xaml.cs.

Dacă îl deschideți, veți vedea că este foarte simplu, deoarece pentru această vizualizare nu este nevoie de evenimente speciale în acest moment.

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

Interacțiunea cu utilizatorul și ViewModels

Acum, să vorbim despre ViewModel pentru această pagină care a fost creată în XAML. Deschideți fișierul ViewModels -> AboutViewModel.cs făcând dublu clic pe el.

public class AboutViewModel : BaseViewModel{ public AboutViewModel() { Title = "About"; OpenWebCommand = new Command(async () => await Browser.OpenAsync("https://aka.ms/xamarin-quickstart")); } public ICommand OpenWebCommand { get; }}

Acest ViewModel este un ViewModel uimitor de simplu, dar este un exemplu notabil al modului în care funcționează legarea datelor. Aici, ViewModel-ul setează titlul la About și apoi creează o nouă comandă care apelează Browser.OpenAsync pentru a deschide un browser web pe pagină.

Acest Command este ceva special. Spre deosebire de Title, care este un simplu string care va fi afișat, Command este o clasă specială pe care o putem folosi pentru a spune interfeței noastre utilizator să facă ceva atunci când utilizatorul interacționează cu ea. De exemplu, pe Button am văzut următorul cod:

Command="{Binding OpenWebCommand}"

Acest cod îi spune lui Xamarin.Forms că există o comandă public în ViewModel-ul nostru care are un cod de executat atunci când utilizatorul face clic pe buton. În acest caz, dorim să deschidem brower-ul, care este una dintre numeroasele caracteristici native disponibile din Xamarin.Essentials. Apelarea Browser.OpenAsync va lansa browserul specific pentru iOS și Android cu o singură linie de cod.

Modificări rapide cu XAML Hot Reload

Acum, este timpul să lansăm aplicația noastră. Îmi place să încep cu Android, deoarece emulatorii sunt disponibili local atât pe Windows, cât și pe macOS. În meniul din Visual Studio veți vedea că Android este proiectul implicit și va butonul de depanare este disponibil și va arăta emulatoarele Android disponibile. Când faceți clic pe butonul de depanare, dacă nu aveți niciun emulator, vi se va cere să creați unul.

Când aplicația se lansează, aceasta va intra în modul de depanare care ne permite să stabilim puncte de întrerupere pe codul nostru pentru a vedea valorile, dar, de asemenea, permite XAML Hot Reload, unde putem face modificări la interfață fără a fi nevoie să oprim depanarea.

Să deschidem AboutPage.xaml și să schimbăm culoarea Accent cu o altă culoare. Aici o voi actualiza la Orange și voi apăsa save pentru a vedea modificările.

În acest moment putem adăuga noi controale, actualiza interfața cu utilizatorul și continua să lucrăm la aplicația noastră pe Android.

Deploy to iOS with Hot Restart

Să implementăm iOS! Faceți clic dreapta pe proiectul iOS și selectați Set as Startup Project:

Pe iOS lucrurile sunt un pic diferite pentru dezvoltatori. Dacă sunteți pe macOS și instalați Xcode, veți avea la dispoziție simulatoare iOS. Dacă este cazul dumneavoastră, puteți selecta un simulator și apoi să vă depanați aplicația. Pe Windows, nu există simulatoare iOS 🙁 așa că există două moduri de a obține simulatorul tău

• iOS Remoted Simulator: Dacă aveți o mașină macOS, puteți să instalați Visual Studio 2019 pentru Mac și Xcode și să vă conectați la ea de pe mașina Windows pentru a o folosi ca mașină de construcție la distanță. Simulatorul iOS poate fi apoi lansat de la afișat pe mașina dvs. Windows, ceea ce este foarte tare!
• iOS Hot Restart: Aceasta este o nouă tehnologie de previzualizare care vă permite să implementați o compilare de depanare a aplicației dvs. direct pe dispozitivul iOS care este conectat la mașina dvs. Windows. Acest lucru este grozav dacă nu aveți un Mac și doriți să vă depanați aplicația și să folosiți caracteristici grozave, cum ar fi XAML Hot Reload.

În funcție de configurația dvs. și de echipamentul disponibil, există o opțiune grozavă pentru a începe să vă depanați aplicația iOS din Windows. Citiți documentația la care am făcut legătura pentru un ghid complet de configurare.

Înțelegerea aplicației și a Shell-ului

Ultimul lucru despre care vreau să vorbesc este ce se află în *App-ul nostru și ce se află în Shell-ul nostru:

În interiorul aplicației noastre.xaml veți găsi resurse globale, cum ar fi Primary pe care am folosit-o mai devreme pe buton, dar și stiluri, cum ar fi un stil global Button pe care îl folosim cu stări atunci când este activat și dezactivat. Dacă deschideți codul App.xaml.cs din spate veți vedea creareag a App care setează MainPage la AppShell al nostru și are, de asemenea, evenimente suplimentare similare cu pagina noastră, dar pentru aplicație, cum ar fi când a început, când a intrat în sleep (aka background) și când a fost reluată.

AppShell.xaml găzduiește Shell-ul din structura aplicației noastre. Acesta include stiluri și culori pentru cochilia aplicației noastre, iar apoi are elemente suplimentare pentru file, flyout-uri și pagini care sunt afișate. Aici vom găsi două elemente FlyoutItem care reprezintă AboutPage și BrowsePage. În plus, are un MenuItem pentru a afișa un buton de conectare/ieșire. Elementul ShellContent are o legătură cu pagina noastră pe care am creat-o și în mod automat paginile vor apărea și vor naviga către fiecare dintre ele atunci când sunt selectate.

Există mult mai multe lucruri legate de Xamarin.Forms Shell și de crearea aplicațiilor cu Xamarin, dar sperăm că acest lucru vă pune pe calea de pornire pentru a începe cu aplicația dumneavoastră. Asigurați-vă că urmăriți contul .NET dev.to pentru mai multe intrări în această serie.

Învățați mai multe

.