Creare un'app Xamarin.Forms con AzureCreate a Xamarin.Forms app with Azure

Questa esercitazione illustra come aggiungere un servizio back-end basato sul cloud a un'app per dispositivi mobili Xamarin.Forms mediante la funzionalità App per dispositivi mobili del Servizio app di Azure come back-end.This tutorial shows you how to add a cloud-based back-end service to a Xamarin.Forms mobile app by using the Mobile Apps feature of Azure App Service as the back end. Vengono creati un nuovo back-end di app per dispositivi mobili e una semplice app Xamarin.Forms di tipo elenco attività che archivia dati delle app in Azure.You create both a new Mobile Apps back end and a simple to-do list Xamarin.Forms app that stores app data in Azure.

Il completamento di questa esercitazione è un prerequisito per tutte le altre esercitazioni relative alle app per dispositivi mobili per Xamarin.Forms.Completing this tutorial is a prerequisite for all other Mobile Apps tutorials for Xamarin.Forms.

prerequisitiPrerequisites

Per completare l'esercitazione, sono necessari gli elementi seguenti:To complete this tutorial, you need the following:

  • Un account Azure attivo.An active Azure account. Se non è disponibile un account, è possibile iscriversi per accedere a una versione di valutazione di Azure e ottenere un massimo di 10 app per dispositivi mobili gratuite che potranno essere usate anche dopo il termine del periodo di valutazione.If you don't have an account, you can sign up for an Azure trial and get up to 10 free mobile apps that you can keep using even after your trial ends. Per altre informazioni, vedere Versione di valutazione gratuita di Azure.For more information, see Azure Free Trial.

  • Strumenti di Visual Studio per Xamarin, in Visual Studio 2017 o Visual Studio per Mac.Visual Studio Tools for Xamarin, in Visual Studio 2017 or Visual Studio for Mac. Vedere la pagina di installazione di Xamarin per le istruzioni.See the Xamarin installation page for instructions.

  • (facoltativo) Per compilare un'app iOS, è necessario un Mac con Xcode 9.0 o versione successiva.(optional) To build an iOS app, a Mac with Xcode 9.0 or later is required. Per sviluppare app iOS è possibile usare Visual Studio per Mac oppure Visual Studio 2017 (purché il Mac sia disponibile nella rete).Visual Studio for Mac can be used to develop iOS apps, or Visual Studio 2017 can be used (so long as the Mac is available on the network).

Creare un nuovo back-end di App per dispositivi mobiliCreate a new Mobile Apps back end

Per creare un nuovo back-end di App per dispositivi mobili, seguire questa procedura:To create a new Mobile Apps back end, do the following:

  1. Accedere al portale di Azure.Sign in to the Azure portal.

  2. Fare clic su Crea una risorsa.Click Create a resource.

  3. Nella casella di ricerca digitare App per dispositivi mobili.In the search box, type Mobile Apps.

    Portale di Azure con Avvio rapido per le app per dispositivi mobili evidenziatoAzure portal with Mobile Apps Quickstart highlighted

  4. Nell'elenco dei risultati selezionare Avvio rapido per le app per dispositivi mobili e quindi Crea.In the results list, select Mobile Apps Quickstart, and then select Create.

  5. Scegliere un nome app univoco.Choose a unique App name. Questo nome farà anche parte del nome di dominio del servizio app.This will also be part of the domain name for your App Service.

  6. In Gruppo di risorse selezionare un gruppo di risorse esistente oppure crearne uno nuovo usando lo stesso nome dell'app.Under Resource Group, select an existing resource group or create a new one (using the same name as your app).

  7. Fare clic su Crea.Click Create. Prima di procedere, attendere il completamento della distribuzione del servizio.Wait a few minutes for the service to be deployed successfully before proceeding. Osservare l'icona di notifica (a forma di campana) nell'intestazione del portale per informazioni sugli aggiornamenti dello stato.Watch the Notifications (bell) icon in the portal header for status updates.

È stato configurato un back-end di App per dispositivi mobili che può essere usato dalle applicazioni per dispositivi mobili.You have now set up a Mobile App back-end that your mobile applications can use. Scaricare quindi in progetto server per un semplice back-end di tipo elenco attività e pubblicarlo in Azure.Next, you download a server project for a simple to-do list back end and then publish it to Azure.

Configurare il progetto serverConfigure the server project

Per configurare il progetto server per l'uso del back-end Node.js o .NET, seguire questa procedura:To configure the server project to use either the Node.js or .NET back end, do the following:

  1. Fare clic sul pulsante Servizi app e selezionare il back-end delle app per dispositivi mobili, quindi Avvio rapido e infine la piattaforma client (iOS, Android, Xamarin o Cordova).Click the App Services button, select your Mobile Apps back end, select Quickstart, and then select your client platform (iOS, Android, Xamarin, Cordova).

    Portale di Azure con Avvio rapido per le app per dispositivi mobili evidenziato

  2. Se non è configurata la connessione a un database, crearne una seguendo questa procedura:If a database connection is not configured, create one by doing the following:

    Portale di Azure con connessione a un database per le app per dispositivi mobili

    a.a. Creare un nuovo server e un nuovo database SQL.Create a new SQL database and server.

    Portale di Azure con creazione di un nuovo database e un nuovo server per le app per dispositivi mobili

    b.b. Attendere la creazione della connessione dati.Wait until the data connection is successfully created.

    Notifica del completamento della creazione della connessione dati nel portale di Azure

    c.c. La connessione dati deve avere esito positivo.Data connection must be successful.

    Notifica "Esiste già una connessione dati" nel portale di Azure

  3. In 2. Creare un'API di tabella selezionare Node.js per Linguaggio back-end.Under 2. Create a table API, select Node.js for Backend language.

  4. Accettare l'acknowledgment e quindi selezionare Crea tabella TodoItem.Accept the acknowledgment, and then select Create TodoItem table. Con questa azione viene creata una nuova tabella di attività nel database.This action creates a new to-do item table in your database.

    Importante

    Il passaggio di un back-end esistente a Node.js sovrascrive tutto il contenuto.Switching an existing back end to Node.js overwrites all contents. Per creare invece un back-end .NET, vedere Usare l'SDK del server back-end .NET per App per dispositivi mobili di Azure.To create a .NET back end instead, see Work with the .NET back-end server SDK for Mobile Apps.

Scaricare ed eseguire la soluzione Xamarin.FormsDownload and run the Xamarin.Forms solution

Per aprire la soluzione sono necessari gli Strumenti di Visual Studio per Xamarin. Vedere le istruzioni di installazione di Xamarin.The Visual Studio Tools for Xamarin are required to open the solution, see the Xamarin installation instructions. Se gli strumenti sono già installati, seguire questa procedura per scaricare e aprire la soluzione:If the tools are already installed, follow these steps to download and open the solution:

Visual StudioVisual Studio

  1. Accedere al portale di Azure.Go to the Azure portal.

  2. Nel pannello delle impostazioni dell'app per dispositivi mobili, fare clic su Avvio rapido (in Distribuzione) > Xamarin.Forms.On the settings blade for your Mobile App, click Quickstart (under Deployment) > Xamarin.Forms. Al passaggio 3 fare clic su Crea una nuova app, se l'opzione non è già selezionata.Under step 3, click Create a new app if it's not already selected. Fare quindi clic sul pulsante Download .Next click the Download button.

    Questa azione scarica un progetto che contiene un'applicazione client connessa all'app per dispositivi mobili.This action downloads a project that contains a client application that's connected to your mobile app. Salvare il file del progetto compresso nel computer locale e prendere nota del percorso.Save the compressed project file to your local computer, and make a note of where you save it.

  3. Estrarre il progetto scaricato e aprirlo in Visual Studio 2017.Extract the project that you downloaded, and then open it in Visual Studio 2017.

    Progetto estratto in Visual Studio

  4. Seguire le istruzioni riportate di seguito per eseguire i progetti Android o Windows e, se nella rete è disponibile un computer Mac, il progetto iOS.Follow the instructions below to run the Android or Windows projects; and if there is a networked Mac computer available, the iOS project.

Visual Studio per MacVisual Studio for Mac

  1. Accedere al portale di Azure.Go to the Azure portal.

  2. Nel pannello delle impostazioni dell'app per dispositivi mobili, fare clic su Avvio rapido (in Distribuzione) > Xamarin.Forms.On the settings blade for your Mobile App, click Quickstart (under Deployment) > Xamarin.Forms. Al passaggio 3 fare clic su Crea una nuova app, se l'opzione non è già selezionata.Under step 3, click Create a new app if it's not already selected. Fare quindi clic sul pulsante Download .Next click the Download button.

    Questa azione scarica un progetto che contiene un'applicazione client connessa all'app per dispositivi mobili.This action downloads a project that contains a client application that's connected to your mobile app. Salvare il file del progetto compresso nel computer locale e prendere nota del percorso.Save the compressed project file to your local computer, and make a note of where you save it.

  3. Estrarre il progetto scaricato e aprirlo in Visual Studio per Mac.Extract the project that you downloaded, and then open it in Visual Studio for Mac.

    Progetto estratto in Visual Studio per Mac

  4. Seguire le istruzioni riportate di seguito per eseguire i progetti Android o iOS.Follow the instructions below to run the Android or iOS projects.

(Facoltativo) Eseguire il progetto Android(Optional) Run the Android project

In questa sezione viene eseguito il progetto Xamarin.Android.In this section, you run the Xamarin.Android project. Se non si usano dispositivi Android, è possibile ignorare questa sezione.You can skip this section if you are not working with Android devices.

Visual StudioVisual Studio

  1. Fare clic con il pulsante destro del mouse sul progetto Android (Droid) e quindi scegliere Imposta come progetto di avvio.Right-click the Android (Droid) project, and then select Set as StartUp Project.

  2. Scegliere Configuration Manager dal menu Compila.On the Build menu, select Configuration Manager.

  3. Nella finestra di dialogo Configuration Manager selezionare le caselle di controllo Compila e Distribuisci accanto al progetto Android e verificare che la casella di controllo Compila sia selezionata per il progetto di codice condiviso.In the Configuration Manager dialog box, select the Build and Deploy check boxes next to the Android project, and ensure the shared code project has the Build box checked.

  4. Per compilare il progetto e avviare l'app in un emulatore Android, premere F5 o fare clic sul pulsante Avvia.To build the project and start the app in an Android emulator, press the F5 key or click the Start button.

Visual Studio per MacVisual Studio for Mac

  1. Fare clic con il pulsante destro del mouse sul progetto Android e quindi scegliere Imposta come progetto di avvio.Right-click the Android project, and then select Set As Startup Project.

  2. Per compilare il progetto e avviare l'app in un emulatore Android, scegliere Avvia debug dal menu Esegui.To build the project and start the app in an Android emulator, select the Run menu, then Start Debugging.

Nell'app digitare un testo significativo, ad esempio Learn Xamarin, e quindi selezionare il segno più (+).In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

App elenco attività Android

Questa azione invia una richiesta POST al nuovo back-end di App per dispositivi mobili ospitato in Azure.This action sends a post request to the new Mobile Apps back end that's hosted in Azure. I dati della richiesta vengono inseriti nella tabella TodoItem.Data from the request is inserted into the TodoItem table. Gli elementi archiviati nella tabella vengono restituiti dal back-end di App per dispositivi mobili e i dati vengono visualizzati nell'elenco.Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

Nota

Il codice che accede al back-end di App per dispositivi mobili è disponibile nel file C# TodoItemManager.cs del progetto di codice condiviso della soluzione.The code that accesses your Mobile Apps back end is in the TodoItemManager.cs C# file of the shared code project in the solution.

(Facoltativo) Eseguire il progetto iOS(Optional) Run the iOS project

In questa sezione viene eseguito il progetto Xamarin.iOS per dispositivi iOS.In this section, you run the Xamarin.iOS project for iOS devices. Se non si usano dispositivi iOS, è possibile ignorare questa sezione.You can skip this section if you are not working with iOS devices.

Visual StudioVisual Studio

  1. Fare clic con il pulsante destro del mouse sul progetto iOS e quindi scegliere Imposta come progetto di avvio.Right-click the iOS project, and then select Set as StartUp Project.

  2. Scegliere Configuration Manager dal menu Compila.On the Build menu, select Configuration Manager.

  3. Nella finestra di dialogo Configuration Manager selezionare le caselle di controllo Compila e Distribuisci accanto al progetto iOS e verificare che la casella di controllo Compila sia selezionata per il progetto di codice condiviso.In the Configuration Manager dialog box, select the Build and Deploy check boxes next to the iOS project, and ensure the shared code project has the Build box checked.

  4. Per compilare il progetto e avviare l'app nell'emulatore iPhone, premere il tasto F5.To build the project and start the app in the iPhone emulator, select the F5 key.

Visual Studio per MacVisual Studio for Mac

  1. Fare clic con il pulsante destro del mouse sul progetto iOS e quindi scegliere Imposta come progetto di avvio.Right-click the iOS project, and then select Set As Startup Project.

  2. Scegliere Start Debugging (Avvia debug) dal menu Run (Esegui) per compilare il progetto e avviare l'app nell'emulatore iPhone.On the Run menu, select Start Debugging to build the project and start the app in the iPhone emulator.

Nell'app digitare un testo significativo, ad esempio Learn Xamarin, e quindi selezionare il segno più (+).In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

App elenco attività iOS

Questa azione invia una richiesta POST al nuovo back-end di App per dispositivi mobili ospitato in Azure.This action sends a post request to the new Mobile Apps back end that's hosted in Azure. I dati della richiesta vengono inseriti nella tabella TodoItem.Data from the request is inserted into the TodoItem table. Gli elementi archiviati nella tabella vengono restituiti dal back-end di App per dispositivi mobili e i dati vengono visualizzati nell'elenco.Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

Nota

Il codice che accede al back-end di App per dispositivi mobili è disponibile nel file C# TodoItemManager.cs del progetto di codice condiviso della soluzione.You'll find the code that accesses your Mobile Apps back end in the TodoItemManager.cs C# file of the shared code project in the solution.

(Facoltativo) Eseguire il progetto Windows(Optional) Run the Windows project

In questa sezione viene eseguito il progetto Xamarin.Forms della piattaforma UWP (Universal Windows Platform) per dispositivi Windows.In this section, you run the Xamarin.Forms Universal Windows Platform (UWP) project for Windows devices. Se non si usano dispositivi Windows, è possibile ignorare questa sezione.You can skip this section if you are not working with Windows devices.

Visual StudioVisual Studio

  1. Fare clic con il pulsante destro del mouse su un progetto della piattaforma UWP e quindi scegliere Imposta come progetto di avvio.Right-click any the UWP project, and then select Set as StartUp Project.

  2. Scegliere Configuration Manager dal menu Compila.On the Build menu, select Configuration Manager.

  3. Nella finestra di dialogo Configuration Manager selezionare le caselle di controllo Compila e Distribuisci accanto al progetto Windows scelto e verificare che la casella di controllo Compila sia selezionata per il progetto di codice condiviso.In the Configuration Manager dialog box, select the Build and Deploy check boxes next to the Windows project that you chose, and ensure the shared code project has the Build box checked.

  4. Per compilare il progetto e avviare l'app in un emulatore Android, premere F5 o fare clic sul pulsante Avvia (che dovrebbe indicare Computer locale).To build the project and start the app in a Windows emulator, press the F5 key or click the Start button (which should read Local Machine).

Nota

Non è possibile eseguire il progetto Windows su macOS.The Windows project cannot be run on macOS.

Nell'app digitare un testo significativo, ad esempio Learn Xamarin, e quindi selezionare il segno più (+).In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

Questa azione invia una richiesta POST al nuovo back-end di App per dispositivi mobili ospitato in Azure.This action sends a post request to the new Mobile Apps back end that's hosted in Azure. I dati della richiesta vengono inseriti nella tabella TodoItem.Data from the request is inserted into the TodoItem table. Gli elementi archiviati nella tabella vengono restituiti dal back-end di App per dispositivi mobili e i dati vengono visualizzati nell'elenco.Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

App elenco attività UWP

Nota

Il codice che accede al back-end di App per dispositivi mobili è disponibile nel file C# TodoItemManager.cs del progetto di libreria di classi portabile della soluzione.You'll find the code that accesses your Mobile Apps back end in the TodoItemManager.cs C# file of the portable class library project of your solution.

risoluzione dei problemiTroubleshooting

In caso di problemi di compilazione della soluzione, eseguire Gestione pacchetti NuGet ed effettuare l'aggiornamento alla versione più recente di Xamarin.Forms e nel progetto Android aggiornare i pacchetti per il supporto Xamarin.Android.If you have problems building the solution, run the NuGet package manager and update to the latest version of Xamarin.Forms, and in the Android project, update the Xamarin.Android support packages. I progetti di avvio rapido potrebbero non includere sempre le versioni più recenti.Quickstart projects might not always include the latest versions.

Passaggi successiviNext steps