Xamarin Studio per App Multipiattaforma

Primo tutorial sullo sviluppo multipiattaforma

Come primo articolo della nostra rubrica Tutorial Pratici per quanto riguarda la creazione di applicazioni multipiattaforma (o cross-platform), andremo a vedere una cosa molto semplice: come creare un applicazione mobile. Per questa volta, la nostra prima app non farà altro che mostrare del testo nel display del dispositivo mobile iPhone, iPad, dispositivi Android o in alternativa su iPhone SimulatorXamarin Android Player Simulator.

Solo per questa volta, non ci cureremo particolarmente del codice da scrivere! Questo primo tutorial servirà per lo più ad acquisire dimestichezza con lo strumento di sviluppo Xamarin Studio, per la stesura del codice e la gestione dei vari file che andranno a comporre il nostro progetto.

Come nota personale vorrei consigliare a tutti voi che leggerete il post e vogliate riprodurre l’esercizio, di non copiare e incollare il codice, benché possiate tranquillamente farlo! É auspicabile, come buon esercizio, di riscriverlo completamente, in modo fare pratica con alcune delle funzionalità del software come, ad esempio, il completamento automatico.

Andiamo quindi a presentarvi il progetto, con il quale chiunque si affacci ad un nuovo strumento di programmazione e/o ad un nuovo linguaggio di programmazione, deve confrontarsi… l’ormai famigerato Hello, World!.

CREAZIONE DEL PROGETTO SU XAMARIN STUDIO

Creazione della solution

Per creare un nuovo progetto su Xamarin Studio, seguite i seguenti passaggi:

  • Avviate il programma Xamarin Studio
  • Andate quindi su File > Nuovo > Soluzione
  • Selezionate quindi Xamarin.Forms App sotto la voce Cross-platform > App, dopodiché fate click su Next

Creazione applicazione mobile cross-platform

Nella schermata successiva (che potete vedere qui sotto), vi verranno richieste alcune informazioni utili per il progetto, tra cui il nome di quest’ultimo. Andiamo ad analizzarle:

STEP 2 - Creazione applicazione mobile cross-platform

  • App Name: Il nome che assumerà il vostro progetto. Nel nostro caso in questo campo andremo a scrivere Hello World;
  • Organization Identifier: Questo è il bundle dell’applicazione, vale a dire il nome che assumerà il pacchetto generato da Xamarin Studio e che servirà in futuro quando vorremo andare a pubblicare un app sull’Apple Store. Essendo un dato che potrà sempre essere modificato, per ora possiamo lasciare il valore di default che ci suggerisce Xamarin;
  • Target Platforms: Le piattaforme per le quali vogliamo andare a sviluppare: iOS, Android o entrambe;
  • Shared Code: Qui andiamo a decidere se utilizzare delle librerie portabili oppure delle librerie condivise. In questo tip analizzeremo lo sviluppo tramite librerie portabili (e, come consiglio personale, suggerisco di restare in quest’ottica di sviluppo);
  • Completate le operazioni di cui sopra, possiamo cliccare su Next.

STEP 3 - Creazione applicazione mobile cross-platform

In quest’ultima schermata possiamo modificare ancora una volta il nome del progetto oppure definire un nome diverso solo per la solution, cambiare il percorso della solution ed abilitare e utilizzare (se lo abbiamo) il Version Control (SVN, Git, etc), oppure abilitare lo Xamarin Test Cloud.

Siccome stiamo solo prendendo dimestichezza, per il momento sorvoliamo su questi punti un po’ più evoluti (ma che comunque vedremo in seguito), e clicchiamo su Crea.

Analisi dei progetti e dei file della solution

Dopo la fase di caricamento ed installazione dei pacchetti Xamarin.Forms la nostra solution è pronta per essere utilizzata.

Analizziamo per un momento i progetti ed i file della nostra applicazione.

STEP 4 - Creazione applicazione mobile cross-platform

Abbiamo, nell’ordine dell’immagine:

  • HelloWorld: è il progetto “cross-platform” dell’app ed il progetto in cui andremo a definire la “classe” di partenza dell’app ed il layout: il file HelloWorld.cs del progetto;
  • HelloWorld.Droid: questo è il nostro progetto Android e, con la sua classe principale MainActivity, è sostanzialmente quel progetto che compileremo ed avvieremo per vedere la nostra app funzionare sui dispositivi Android;
  • HelloWorld.iOS: questo invece è il progetto che riguarda la parte iOS. La sua classe principale è l’AppDelegate, perché detta le procedure all’avvio dell’app e quale debba essere la prima schermata (layout) ad essere visualizzato sull’applicazione.

Analizziamo un po’ più nel dettaglio il file che interesserà questo nostro primo articolo: il file HelloWorld.cs.

STEP 5 - Creazione applicazione mobile cross-platform

Questo è il file in cui è definita la classe di partenza dell’app, nella quale viene anche definito il layout della prima vista che l’applicazione mostrerà all’avvio. Di default, Xamarin Studio chiamerà questa class “App“.

Nel costruttore di questa pagina andiamo a definire il layout della schermata. In teoria, il codice è già pronto per mostrare del testo sullo schermo (ed è anche un buon codice!), anche se per alcuni potrebbe risultare poco leggibile. Per questo motivo… riscriviamolo!

Cominciamo col dire una cosa importante: MainPage è la proprietà alla quale dovrà essere assegnato il layout della pagina per essere visualizzato. Proviamo a fargli dire “Hello, World!”!

Scrittura del codice sorgente

Per iniziare, cancelliamo ciò che è già scritto nel costruttore della classe App e rimpiazziamolo col seguente codice:

ContentPage Page = new ContentPage ();
//dichiariamo una "ContentPage", in pratica una "vista" (pagina) dell'applicazione

StackLayout Layout = new StackLayout ();
//dichiariamo un oggetto contenitore di tipo StackLayout chiamato "Layout".
Layout.VerticalOptions = LayoutOptions.Center;
//definiamo come devono essere dispositi gli elementi nel layout, abbiamo deciso centralmente.

Label helloWorld = new Label ();
//dichiariamo una label, che andràd essere il testo "Hello, World!" nella schermata.
helloWorld.Text = "Hello, World!";
//assegnamo il testo alla label.
helloWorld.XAlign = TextAlignment.Center;
//definiamo che il testo deve essere centrato sull'asse delle X, quindi orizzontalmente.

Layout.Children.Add (helloWorld);
//aggiungiamo la Label "helloWorld" ai figli del contenitore "Layout".

Page.Content = Layout;
//assegnamo il "Layout" (StackLayout) come contenuto della "Page" (ContentPage)

MainPage = Page;
//assegniamo la "Page" (ContentPage) alla proprietàainPage
//questo farà si che la prima schermata dell'applicazione sarà appunto questa pagina

Otterremo questo:

STEP 6 - Creazione applicazione mobile cross-platform

Avvio dell’applicazione multipiattaforma IOS e Android

Ora che la nostra applicazione è pronta, avviamola! É sufficiente cliccare sulla “freccia” in alto a sinistra oppure, dalla voce di menù in alto Esegui, cliccare Start Debugging.

STEP 7 - Creazione applicazione mobile cross-platform

Se invece volete avviare la vostra applicazione su Android, semplicemente cliccate col tasto destro sul progetto HelloWorld.Droid e selezionate Imposta come progetto di avvio, dopodiché avviatelo come avete fatto per il progetto iOS.

(Per l’avvio su simulatore Android consiglio di scaricare ed utilizzare Xamarin Android Player disponibile sia per Mac che per Windows e scaricabile da questo link)

STEP 8 - Creazione applicazione mobile cross-platform

Congratulazioni! Avete appena creato la vostra prima applicazione cross-platform!

Il sorgente è scaricabile cliccando qui!

Alessandro Severa

Alessandro Severa

Web e Mobile Developer

Inizia a programmare prima della maggiore età, ora sviluppa progetti in 6+ linguaggi differenti. Ama gli street food, i Marvel e The Walking Dead. Ma non chiedetegli di parlare con i clienti.

Pin It on Pinterest

Share This