Free Press

Iniziamo il nostro viaggio insieme per costruire belle app native multipiattaforma con .NET, Xamarin e Visual Studio! In questo blog ti guiderò attraverso l’intero processo e descriverò tutto ciò che c’è in File -> New for Xamarin. Se sei uno studente più visivo, ho un video completo che puoi guardare:

Prima gettiamo le basi rispondendo ad alcune domande frequenti.

Che cos’è .NET?
.NET è un runtime multipiattaforma, ad alte prestazioni e open-source che viene utilizzato con diversi linguaggi, editor e librerie che permette di costruire applicazioni per il web, mobile, desktop, giochi e altro. È la base che permette al codice di essere eseguito su diverse piattaforme come iOS, Android e Windows. Se sei uno sviluppatore web questo è come il runtime V8 che esegue JavaScript o se sei uno sviluppatore Java, la JVM che esegue Java.

Cos’è Xamarin?
.NET ha una serie di framework che sono costruiti per esso che consentono scenari unici per gli sviluppatori per piattaforme specifiche. Per esempio, ASP.NET Core e Blazor sono framework costruiti per .NET per lo sviluppo web. WPF e UWP sono framework costruiti per .NET per lo sviluppo desktop. Xamarin è un framework e uno strumento che permette di costruire app per iOS, Android e macOS. Contiene anche diverse librerie che consentono lo sviluppo multipiattaforma su iOS, Android, macOS e Windows, tra cui Xamarin.Forms per l’interfaccia utente multipiattaforma e Xamarin.Essentials per l’accesso alle funzioni della piattaforma nativa multipiattaforma.

Quali linguaggi di programmazione posso usare?
.NET supporta diversi linguaggi tra cui C#, F# e Visual Basic. È possibile utilizzare uno qualsiasi di questi linguaggi di programmazione per costruire applicazioni con Xamarin, tuttavia io sono uno sviluppatore C#, ed è il linguaggio principale per lo sviluppo di applicazioni. Tuttavia, ci sono alcuni fantastici framework per F# come Fabulous per lo sviluppo funzionale.

XAML è un altro “linguaggio” che verrà utilizzato per costruire l’interfaccia utente con Xamarin. XAML è stato usato per molto tempo per costruire applicazioni Windows con WPF e UWP e ha alcune grandi caratteristiche tra cui markup facile da leggere, tecnologia Hot Reload e data binding avanzato per rendere lo sviluppo UI un gioco da ragazzi.

Quali strumenti posso usare?
.NET consente agli sviluppatori di utilizzare una vasta gamma di strumenti tra cui la riga di comando, gli editor di codice come Visual Studio Code, e gli IDE (Integrated Development Environment) completi con Visual Studio 2019 e Visual Studio 2019 per Mac. Per sviluppare app mobili con Xamarin dovremo usare Visual Studio 2019 o Visual Studio 2019 per Mac, poiché hanno le caratteristiche complete per costruire app.

Quindi, iniziamo a costruire le nostre prime app mobili con Xamarin!

Installazione di Visual Studio per lo sviluppo mobile

Il primo passo nel tuo viaggio multipiattaforma è installare Visual Studio 2019 per Windows o Visual Studio 2019 per Mac.

Quando installi Visual Studio 2019 su Windows tutto quello che devi fare è selezionare lo sviluppo mobile con .NET:

Su Visual Studio 2019 per Mac puoi selezionare di installare Android e iOS.

Se stai facendo sviluppo iOS dovrai anche installare Xcode sulla tua macchina macOS.

Dopo questo sei a posto e pronto per lo sviluppo mobile!

Quando crei ed esegui un progetto Android ti potrebbe essere chiesto di installare ulteriori SDK Android e di creare emulatori Android.

Creazione del tuo progetto

Ora che abbiamo installato Visual Studio 2019 e Xamarin mettiamoci al lavoro! Quando lanci Visual Studio 2019 avrai un’opzione per creare un nuovo progetto. Su Windows puoi cercare Xamarin.Forms o usare il filtro dei tipi di progetto e selezionare Mobile. Vorremo selezionare Mobile App (Xamarin.Forms).

Quando selezioni questo nuovo progetto, vedrai una nuova finestra di dialogo che ti chiede quale tipo di modello per l’app che vorresti usare:

Abbiamo alcune opzioni da selezionare in base al tipo di applicazione che vogliamo costruire.

Flyout, Tabbed, & Blank

Flyout &I modelli di app Tabbed sono basati sull’ultima tecnologia Xamarin.Forms chiamata Shell. Consente un’impalcatura più rapida delle app e offre caratteristiche uniche come la navigazione basata su URL. Questi modelli sono simili con una differenza principale se si desidera un menu flyout o schede inferiori per la base della vostra app.

L’app bianca è proprio questo e offre un modello abbastanza semplice con una singola pagina e nient’altro.

Andiamo con Flyout! Voglio iniziare da qui perché la maggior parte dei tutorial non passa attraverso Shell e per me è il futuro dello sviluppo di app Xamarin. Questo modello ha un sacco di cose, quindi nei prossimi post passeremo attraverso ogni sezione, ma per oggi creeremo solo il progetto e passeremo attraverso ciò che è una Shell.

Se sei su Visual Studio 2019 per Mac vorrai selezionare Multipiattaforma > App > Flyout Forms App

Cosa c’è nel progetto?

Ora che il progetto app è stato creato, vedrai diversi progetti all’interno di una singola soluzione.

Passiamo attraverso quello che c’è nella nostra nuova soluzione:

Il primo progetto contiene diverse cartelle, file di codice e file di interfaccia utente. Questo progetto è un progetto .NET Standard che ci permette di avere un unico progetto che può essere condiviso su diversi sistemi operativi. Questo progetto è dove scriveremo la maggior parte del nostro codice.

iOS & I progetti Android sono la “testa” o il progetto “padre” che viene utilizzato per ospitare codice specifico della piattaforma, impostazioni, risorse e altro. Qui è dove vorrete configurare diverse impostazioni come il nome del display, l’icona dell’app, i numeri di versione, e qualsiasi codice che è necessario per iOS o Android cose specifiche che non sono disponibili multipiattaforma. Ad un certo punto avrete bisogno di andare in questi progetti e modificare le cose, ma per ora rimarremo nel progetto multipiattaforma.

Xamarin.Forms Cross-Platform UI

All’interno del nostro progetto multipiattaforma .NET Standard troveremo un po’ di codice per la nostra app. Questo modello mostra un’app di esempio che ha un elenco di articoli e una pagina di informazioni. Gli elementi sono organizzati in cartelle:

• Modelli: Queste sono classi che rappresentano i dati nelle vostre app come Persona, Auto, Cane, Gatto, ecc. In questa app abbiamo un singolo modello chiamato Item.
• Services: All’interno di questa cartella è dove mettereste il codice che accede a cose non legate all’interfaccia utente, come chiamate a servizi web, database, ecc. Nel progetto in un semplice MockDataStore che viene utilizzato per memorizzare gli elementi in memoria.
• Views: Questo è dove i nostri file di interfaccia utente XAML vivranno!
• ViewModels: In questa cartella troverai i file che corrispondono quasi 1:1 alla cartella Views. Questo perché ogni View ha un ViewModel che è legato che Xamarin.Forms può collegare i due insieme in modo che la View possa visualizzare informazioni o chiamare metodi in ogni ViewModel.

Guardiamo la AboutPage.xaml che è la prima pagina che vedremo quando lanciamo l’app. Qui vediamo alcune cose, in primo luogo l’elemento di primo livello 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}">

Qui ci sono alcuni tag xmlns che rappresentano dove risiede il codice specifico. Il default e x sono inclusi in ogni file e sono per la funzionalità di base. Il tag xmlns:vm ci permette di accedere al nostro codice da XAML, che vedremo tra poco. La x:Class è un riferimento allo spazio dei nomi e al nome della pagina, questo corrisponde al codice dietro. Infine, c’è una proprietà Title che è data bound a una proprietà chiamata Title nel nostro ViewModel.

Possiamo impostare ulteriori proprietà come il BindingContext e Resources con contenuti XAML. Qui useremo il tag xmlns:vm per impostare il BindingContext su una nuova istanza dell’AboutViewModel:

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

Prossimo è una risorsa Color che può essere usata nella pagina. Le risorse ci permettono di rimuovere il codice duplicato e creare coppie chiave/valore riutilizzabili. Questo è simile in un certo senso ai CSS nello sviluppo web.

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

Possiamo aggiungere altre cose alle risorse, incluse stringhe, stili e altro.

Infine, ogni pagina può avere un elemento di controllo radice. Questo è normalmente un Layout come StackLayout, ScrollView, o una Griglia come abbiamo qui. La griglia è un controllo fantastico che ha righe e colonne. Non andremo molto nel dettaglio dei layout, ma questo mostra un’immagine, del testo, e un pulsante che può essere cliccato per aprire un browser web.

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

Nota il {StaticResource Primary}, che è un riferimento a una risorsa che abbiamo definito Accent prima, ma Primary si trova nel nostro App.xaml, che sono risorse disponibili in tutta l’app.

Per trovare altri layout e controlli puoi aprire il Toolbox per vedere cosa è disponibile:

Infine, se selezioni un controllo o un layout il pannello delle proprietà ti mostrerà tutte le diverse proprietà che sono disponibili su quel controllo.

Una cosa molto importante è che ognuna di queste pagine XAML ha del codice dietro che è importante per la vista XAML e ha metodi specifici per il costruttore ed eventi come quando le pagine vengono mostrate o scompaiono. Potete usare la piccola freccia a discesa per vedere il codice .xaml.cs dietro il file.

Se lo aprite, vedrete che è molto semplice perché per questa vista non c’è nessun evento speciale che sia necessario in questo momento.

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

Interazione con l’utente e ViewModels

Ora, parliamo del ViewModel per questa pagina che è stata creata in XAML. Aprite il file ViewModels -> AboutViewModel.cs facendo doppio clic su di esso.

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

Questo è un ViewModel incredibilmente semplice, ma è un notevole esempio di come funziona il data binding. Qui il ViewModel imposta il Title su About e poi crea un nuovo Command che chiama Browser.OpenAsync per aprire un browser web sulla pagina.

Quello Command è qualcosa di speciale. A differenza di Title che è un semplice string che verrà visualizzato, il Command è una classe speciale che possiamo usare per dire alla nostra interfaccia utente di fare qualcosa quando l’utente interagisce con essa. Per esempio sul nostro Button abbiamo visto il seguente codice:

Command="{Binding OpenWebCommand}"

Questo codice sta dicendo a Xamarin.Forms che c’è un public Command nel nostro ViewModel che ha del codice da eseguire quando l’utente clicca sul pulsante. In questo caso vogliamo aprire il brower, che è una delle tante funzioni native disponibili da Xamarin.Essentials. Chiamando Browser.OpenAsync avvieremo il browser specifico per iOS e Android con una sola riga di codice.

Modifiche rapide con XAML Hot Reload

Ora, è il momento di lanciare la nostra applicazione. Mi piace iniziare su Android perché gli emulatori sono disponibili localmente sia su Windows che su macOS. Nel menu di Visual Studio vedrete che Android è il progetto predefinito e il pulsante di debug è disponibile e mostrerà gli emulatori Android disponibili. Quando cliccate sul pulsante debug se non avete nessun emulatore vi verrà chiesto di crearne uno.

Quando l’app viene lanciata entrerà in modalità Debug che ci permette di impostare punti di interruzione sul nostro codice per vedere i valori, ma abilita anche XAML Hot Reload dove possiamo fare modifiche all’UI senza dover interrompere il debug.

Apriamo il file AboutPage.xaml e cambiamo il colore Accent in un colore diverso. Qui lo aggiornerò a Orange e premerò save per vedere le modifiche.

A questo punto possiamo aggiungere nuovi controlli, aggiornare l’interfaccia utente, e continuare a lavorare sulla nostra app su Android.

Deploy su iOS con Hot Restart

Deplichiamo iOS! Fai clic destro sul progetto iOS e seleziona Set as Startup Project:

Su iOS le cose sono un po’ diverse per gli sviluppatori. Se siete su macOS e installate Xcode avrete a disposizione i simulatori iOS. Se è così, potete selezionare un simulatore e poi eseguire il debug della vostra app. Su Windows, non ci sono simulatori iOS 🙁 quindi ci sono due modi per ottenere il tuo

• iOS Remoted Simulator: Se hai una macchina macOS puoi installare Visual Studio 2019 per Mac e Xcode e connetterti ad esso dalla tua macchina Windows per usarlo come macchina di compilazione remota. Il simulatore iOS può quindi essere lanciato da visualizzato sulla tua macchina Windows, che è molto cool!
• iOS Hot Restart: Questa è una nuova tecnologia di anteprima che ti permette di distribuire una build di debug della tua app direttamente sul tuo dispositivo iOS che è collegato alla tua macchina Windows. Questo è ottimo se non avete un mac e volete eseguire il debug della vostra applicazione e utilizzare caratteristiche impressionanti come XAML Hot Reload.

In base alla vostra configurazione e alle attrezzature disponibili c’è una grande opzione per voi per iniziare il debug della vostra app iOS da Windows. Leggete la documentazione che ho linkato per una guida completa alla configurazione.

Comprensione di App e Shell

L’ultima cosa di cui voglio parlare è cosa c’è nella nostra *App e cosa nella nostra Shell:

All’interno del nostro App.xaml troverete risorse globali come Primary che abbiamo usato prima sul pulsante, ma anche stili come uno stile globale Button che stiamo usando con gli stati quando sono abilitati e disabilitati. Se aprite il codice App.xaml.cs dietro di voi troverete la creazione del App che sta impostando il MainPage al nostro AppShell e ha anche ulteriori eventi simili alla nostra pagina, ma per l’app come quando è iniziata, è andata in sleep (aka background), e ripresa.

L’AppShell.xaml ospita la Shell della nostra struttura dell’applicazione. Include stili e colori per la nostra app shell, e poi ha elementi aggiuntivi per le schede, i flyout e le pagine che vengono visualizzate. Qui troveremo due elementi FlyoutItem che rappresentano il AboutPage e il BrowsePage. Inoltre, ha un MenuItem per visualizzare un pulsante di login/logout. Il ShellContent ha un collegamento alla nostra pagina che abbiamo creato e automaticamente le pagine appariranno e navigheranno verso ciascuna di esse quando selezionate.

C’è molto di più su Xamarin.Forms Shell e sulla creazione di applicazioni con Xamarin, ma si spera che questo vi metta sul percorso iniziale per andare avanti con la vostra applicazione. Assicuratevi di seguire l’account .NET dev.to per altre voci di questa serie.

Impara di più