Creare un'app Xamarin.Forms con Azure

• Androide
• Cordova
• Ios
• Windows
• Xamarin.Android
• Xamarin.iOS
• Xamarin.Forms

Informazioni generali

Questa esercitazione illustra come aggiungere un servizio back-end basato sul cloud a un'app per dispositivi mobili Xamarin.Forms usando la funzionalità App per dispositivi mobili del servizio app di Azure come back-end. Puoi creare sia un back-end per app mobile sia una semplice lista to-do per l'app Xamarin.Forms che archivia i dati dell'app in Azure.

Il completamento di questa esercitazione è un prerequisito per tutte le altre esercitazioni sulle app per dispositivi mobili per Xamarin.Forms.

Prerequisiti

Per completare questa esercitazione, sono necessari gli elementi seguenti:

• Un account Azure attivo. Se non si ha un account, è possibile iscriversi per ottenere una versione di valutazione di Azure e ottenere fino a 10 app per dispositivi mobili gratuite che è possibile continuare a usare anche al termine della versione di valutazione. Per altre informazioni, vedere Versione di valutazione gratuita di Azure.

• Visual Studio Tools per Xamarin, in Visual Studio 2017 o successivo oppure Visual Studio per Mac. Per istruzioni, vedere la pagina di installazione di Xamarin .

• (facoltativo) Per compilare un'app iOS, è necessario un Mac con Xcode 9.0 o versione successiva. Visual Studio per Mac può essere usato per sviluppare app iOS o Visual Studio 2017 o versioni successive (purché il Mac sia disponibile in rete).

Creare un nuovo back-end di App per dispositivi mobili

1. Accedi al portale di Azure.

2. Fare clic su Crea una risorsa.

3. Nella casella di ricerca digitare 'app Web.

4. Nell'elenco dei risultati, selezionare Web App dal Marketplace.

5. Selezionare sottoscrizione e gruppo di risorse (selezionare un gruppo di risorse esistente o crearne uno nuovo usando lo stesso nome dell'app).

6. Scegliere un nome univoco per l'app Web.

7. Scegliere l'opzione predefinita Pubblica come Codice.

8. Nello stack di runtime è necessario selezionare una versione in ASP.NET o Node. Se stai creando un back-end .NET, seleziona una versione di ASP.NET. In caso contrario, se si ha come destinazione un'applicazione basata su Node, selezionare una della versione da Node.

9. Seleziona il sistema operativo, Linux o Windows.

10. Selezionare la area in cui si vuole distribuire l'app.

11. Selezionare il piano di servizio app appropriato e premere Rivedi e crea.

12. In gruppo di risorseselezionare un gruppo di risorse esistente o crearne uno nuovo (usando lo stesso nome dell'app).

13. Clicca su Crea. Attendere alcuni minuti affinché il servizio venga distribuito correttamente prima di procedere. Osservare l'icona Notifiche (campanello) nell'intestazione del portale per gli aggiornamenti dello stato.

14. Una volta completata la distribuzione, fare clic sulla sezione dei dettagli della distribuzione e quindi fare clic sulla risorsa di tipo Microsoft.Web/sites. Ti indirizzerà all'App Web di App Service che hai appena creato.

15. Fare clic sul pannello Configurazione sotto Impostazioni e nelle Impostazioni applicazione, fare clic sul pulsante Nuova impostazione applicazione.

16. Nella pagina impostazione dell'applicazione Aggiungi/Modifica, immettere Nome come MobileAppsManagement_EXTENSION_VERSION e Valore come più recente e premere OK.

Ora sei pronto per utilizzare questa app Web del servizio app appena creata come app per dispositivi mobili.

Creare una connessione al database e configurare il progetto client e server

1. Scaricare le guide introduttive dell'SDK client per le piattaforme seguenti:

   iOS (Objective-C)
   iOS (Swift)
   Android (Java)
   Xamarin.iOS
   Xamarin.Android
   Xamarin.Forms
   Cordova
   Windows (C#)

   Annotazioni

   Se si usa il progetto iOS è necessario scaricare "azuresdk-iOS-*.zip" da versione più recente di GitHub. Decomprimere e aggiungere il file MicrosoftAzureMobile.framework alla radice del progetto.

2. Sarà necessario aggiungere una connessione al database o connettersi a una connessione esistente. Prima di tutto, determinare se si creerà un archivio dati o se ne userà uno esistente.

   • Creare un nuovo archivio dati: se si intende creare un archivio dati, usare la guida introduttiva seguente:

     Avvio rapido: Introduzione ai database singoli in Azure SQL Database

   • fonte dati esistente: seguite le istruzioni riportate di seguito se desiderate utilizzare una connessione di database esistente

     1. Formato della stringa di connessione per il database SQL - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} Nome del server, è disponibile nella pagina di panoramica del database ed è in genere sotto forma di "server_name.database.windows.net". {port} in genere 1433. {your_catalogue} Nome del database. {your_username} Nome utente per accedere al database. {your_password} Password per accedere al database.

        Altre informazioni sul formato stringa di connessione SQL

     2. Aggiungere la stringa di connessione alla tua app per dispositivi mobili Nel servizio app è possibile gestire le stringhe di connessione per l'applicazione usando l'opzione Configurazione nel menu.

        Per aggiungere una stringa di connessione:

        1. Fare clic sulla scheda impostazioni applicazione.

        2. Fare clic su [+] Nuova stringa di connessione.

        3. È necessario specificare Nome, Valore e Tipo per la stringa di connessione.

        4. Digitare Nome come illustrato MS_TableConnectionString

        5. Il valore deve essere la stringa di connessione creata nel passaggio precedente.

        6. Se si aggiunge una stringa di connessione a un database SQL di Azure, scegliere SQLAzure in tipo.

3. Le App per dispositivi mobili di Azure includono gli SDK per i back-end .NET e Node.js.

   • Node.js backend

     Se hai intenzione di usare l'app Node.js di avvio rapido, segui le istruzioni riportate di seguito.

     1. Nel portale di Azure passare a Easy Tables, verrà visualizzata questa schermata.

        

     2. Assicurarsi che la stringa di connessione SQL sia già stata aggiunta nella scheda di configurazione . Selezionare quindi la casella di Riconosco che questo sovrascriverà tutto il contenuto del sito e fare clic sul pulsante Crea tabella TodoItem.

        

     3. In Easy Tablesfare clic sul pulsante + Aggiungi.

        

     4. Creare una tabella TodoItem con accesso anonimo.

        

   • backend .NET

     Se si intende usare l'app di avvio rapido .NET, seguire le istruzioni riportate di seguito.

     1. Scaricare il progetto server .NET di App per dispositivi mobili di Azure dal repository azure-mobile-apps-quickstarts.

     2. Compilare il progetto server .NET in locale in Visual Studio.

     3. In Visual Studio aprire Esplora soluzioni, fare clic con il pulsante destro del mouse su ZUMOAPPNAMEService progetto, scegliere Pubblica, verrà visualizzata una finestra Publish to App Service. Se utilizzi un Mac, scopri altri modi per distribuire l'app qui.

        

     4. Selezionare servizio app come destinazione di pubblicazione, quindi fare clic su Selezionaesistente, quindi fare clic sul pulsante Pubblica nella parte inferiore della finestra.

     5. È prima necessario accedere a Visual Studio con la sottoscrizione di Azure. Selezionare il Subscription, Resource Groupe quindi selezionare il nome dell'app. Quando si è pronti, fare clic su OK, verrà distribuito il progetto server .NET disponibile localmente nel back-end del servizio app. Al termine della distribuzione, si verrà reindirizzati a http://{zumoappname}.azurewebsites.net/ nel browser.

Eseguire la soluzione Xamarin.Forms

Sono necessari i Visual Studio Tools per Xamarin per aprire la soluzione; vedere le istruzioni di installazione di Xamarin. Se gli strumenti sono già installati, seguire questa procedura per scaricare e aprire la soluzione:

Visual Studio (Windows e Mac)

1. Passare al portale di Azure e passare all'app per dispositivi mobili creata. Nella scheda Overview cercare l'URL che rappresenta l'endpoint pubblico per la tua app mobile. Esempio: il nome del sito per il nome dell'app "test123" sarà https://test123.azurewebsites.net.

2. Aprire il file Constants.cs in questa cartella: xamarin.forms/ZUMOAPPNAME. Il nome dell'applicazione è ZUMOAPPNAME.

3. Nella classe Constants.cs, sostituire la variabile ZUMOAPPURL con l'endpoint pubblico sopra.

   public static string ApplicationURL = @"ZUMOAPPURL";

   diventa

   public static string ApplicationURL = @"https://test123.azurewebsites.net";

4. Seguire le istruzioni riportate di seguito per eseguire i progetti Android o Windows; e se è disponibile un computer Mac in rete, il progetto iOS.

(Facoltativo) Eseguire il progetto Android

In questa sezione viene eseguito il progetto Xamarin.Android. Se non si utilizzano dispositivi Android, è possibile ignorare questa sezione.

Visual Studio

1. Fare clic con il pulsante destro del mouse sul progetto Android (Droid) e quindi scegliere Imposta come progetto di avvio.

2. Scegliere Configuration Manager dal menu Compila.

3. Nella finestra di dialogo Configuration Manager selezionare le caselle di controllo Compila e distribuisci accanto al progetto Android e verificare che la casella Compilazione del progetto di codice condiviso sia selezionata.

4. Per compilare il progetto e avviare l'app in un emulatore Android, premere F5 o fare clic sul pulsante Start .

Visual Studio per Mac

1. Fare clic con il pulsante destro del mouse sul progetto Android e quindi scegliere Imposta come progetto di avvio.

2. Per compilare il progetto e avviare l'app in un emulatore Android, selezionare il menu Esegui e quindi Avvia debug.

Nell'app digitare testo significativo, ad esempio Learn Xamarin, e quindi selezionare il segno più (+).

Questa azione invia una richiesta POST al nuovo back-end delle applicazioni mobili ospitato in Azure. I dati della richiesta vengono inseriti nella tabella TodoItem. Gli elementi archiviati nella tabella vengono restituiti dal back-end di App per dispositivi mobili e i dati vengono visualizzati nell'elenco.

Annotazioni

Il codice che accede al back-end delle app per dispositivi mobili si trova nel file C# TodoItemManager.cs del progetto di codice condiviso nella soluzione.

(Facoltativo) Eseguire il progetto iOS

In questa sezione viene eseguito il progetto Xamarin.iOS per i dispositivi iOS. È possibile ignorare questa sezione se non si lavora con i dispositivi iOS.

Visual Studio

1. Fare clic con il pulsante destro del mouse sul progetto iOS e quindi scegliere Imposta come progetto di avvio.

2. Scegliere Configuration Manager dal menu Compila.

3. Nella finestra di dialogo Configuration Manager selezionare le caselle di controllo Compila e distribuisci accanto al progetto iOS e verificare che il progetto di codice condiviso abbia la casella di controllo Compila .

4. Per compilare il progetto e avviare l'app nell'emulatore iPhone, selezionare il tasto F5 .

Visual Studio per Mac

1. Fare clic con il pulsante destro del mouse sul progetto iOS e quindi scegliere Imposta come progetto di avvio.

2. Nel menu Esegui selezionare Avvia debug per compilare il progetto e avviare l'app nell'emulatore iPhone.

Nell'app digitare testo significativo, ad esempio Learn Xamarin, e quindi selezionare il segno più (+).

Questa azione invia una richiesta POST al nuovo back-end di App per dispositivi mobili ospitato in Azure. I dati della richiesta vengono inseriti nella tabella TodoItem. Gli elementi archiviati nella tabella vengono restituiti dal back-end di App per dispositivi mobili e i dati vengono visualizzati nell'elenco.

Annotazioni

Il codice che accede al back-end delle app per dispositivi mobili è disponibile nel file C# TodoItemManager.cs del progetto di codice condiviso nella soluzione.

(Facoltativo) Eseguire il progetto Windows

In questa sezione si esegue il progetto UWP (Universal Windows Platform) di Xamarin.Forms per i dispositivi Windows. Se non si utilizzano dispositivi Windows, è possibile ignorare questa sezione.

Visual Studio

1. Fare clic con il pulsante destro del mouse su qualsiasi progetto UWP e quindi scegliere Imposta come progetto di avvio.

2. Scegliere Configuration Manager dal menu Compila.

3. Nella finestra di dialogo Configuration Manager selezionare le caselle di controllo Compila e distribuisci accanto al progetto di Windows scelto e verificare che la casella Di compilazione del progetto di codice condiviso sia selezionata.

4. Per compilare il progetto e avviare l'app in un emulatore di Windows, premere F5 o fare clic sul pulsante Start (che dovrebbe leggere Computer locale).

Annotazioni

Impossibile eseguire il progetto Windows in macOS.

Nell'app digitare testo significativo, ad esempio Learn Xamarin, e quindi selezionare il segno più (+).

Questa azione invia una richiesta POST al nuovo back-end delle App per dispositivi mobili ospitato in Azure. I dati della richiesta vengono inseriti nella tabella TodoItem. Gli elementi archiviati nella tabella vengono restituiti dal back-end di App per dispositivi mobili e i dati vengono visualizzati nell'elenco.

Annotazioni

Il codice che accede al back-end delle app per dispositivi mobili è disponibile nel file C# TodoItemManager.cs del progetto di libreria di classi portabile della soluzione.

Risoluzione dei problemi

Se si verificano problemi durante la compilazione della soluzione, eseguire Gestione pacchetti NuGet e aggiornare alla versione più recente di Xamarin.Forms. Inoltre, nel progetto Android, aggiornare i pacchetti di supporto Xamarin.Android. I progetti di avvio rapido potrebbero non includere sempre le versioni più recenti.

Si noti che tutti i pacchetti di supporto a cui si fa riferimento nel progetto Android devono avere la stessa versione. Il pacchetto NuGet di App per dispositivi mobili di Azure ha Xamarin.Android.Support.CustomTabs dipendenza per la piattaforma Android, quindi se il progetto usa pacchetti di supporto più recenti è necessario installare questo pacchetto con la versione necessaria direttamente per evitare conflitti.