Créer une application Xamarin.Forms avec AzureCreate a Xamarin.Forms app with Azure

Notes

Visual Studio App Center investit dans des services nouveaux et intégrés, essentiels au développement d’applications mobiles.Visual Studio App Center is investing in new and integrated services central to mobile app development. Les développeurs peuvent utiliser les services Build, Test et Distribute pour configurer le pipeline de livraison et d’intégration continues.Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. Une fois l’application déployée, les développeurs peuvent surveiller l’état et l’utilisation de leur application à l’aide des services Analytics et Diagnostics et interagir avec des utilisateurs à l’aide du service Push.Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. Les développeurs peuvent également utiliser Auth pour authentifier leurs utilisateurs, ainsi que le service Data pour conserver et synchroniser les données d’application dans le cloud.Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud. Découvrez App Center dès aujourd’hui.Check out App Center today.

Vue d'ensembleOverview

Ce didacticiel vous montre comment ajouter un service principal cloud à une application Xamarin.Forms en utilisant la fonctionnalité Azure Mobile Apps d’Azure App Service en tant que 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. Vous allez créer un serveur principal d’applications mobiles et une simple application Xamarin.Forms de liste de tâches qui stocke les données d’application dans 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.

Vous devez suivre ce didacticiel avant de pouvoir suivre tous les autres didacticiels Mobile Apps pour les applications Xamarin.Forms.Completing this tutorial is a prerequisite for all other Mobile Apps tutorials for Xamarin.Forms.

PrérequisPrerequisites

Pour réaliser ce didacticiel, vous avez besoin des éléments suivants :To complete this tutorial, you need the following:

  • Un compte Azure actif.An active Azure account. Si vous n'avez pas de compte, vous pouvez vous inscrire pour une évaluation d'Azure et obtenir jusqu'à 10 applications mobiles gratuites que vous pourrez conserver après l'expiration de votre période d'évaluation.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. Pour plus d’informations, consultez la page Version d’évaluation gratuite d’Azure.For more information, see Azure Free Trial.

  • Visual Studio Tools pour Xamarin, dans Visual Studio 2017 ou version ultérieure, ou Visual Studio pour Mac.Visual Studio Tools for Xamarin, in Visual Studio 2017 or later, or Visual Studio for Mac. Consultez la page d’installation de Xamarin pour obtenir des instructions.See the Xamarin installation page for instructions.

  • (facultatif) Pour générer une application iOS, un Mac avec Xcode 9.0 ou une version ultérieure est requis.(optional) To build an iOS app, a Mac with Xcode 9.0 or later is required. Visual Studio pour Mac ou Visual Studio 2017 ou version ultérieure peuvent être utilisés pour développer des applications iOS (tant que le Mac est disponible sur le réseau).Visual Studio for Mac can be used to develop iOS apps, or Visual Studio 2017 or later can be used (so long as the Mac is available on the network).

Créer un back end Mobile AppsCreate a new Mobile Apps back end

  1. Connectez-vous au Portail Azure.Sign in to the Azure portal.

  2. Cliquez sur Créer une ressource.Click Create a resource.

  3. Dans la zone de recherche, tapez application web.In the search box, type Web App.

  4. Dans la liste des résultats, sélectionnez Application web à partir de la Place de marché.In the results list, select Web App from the Marketplace.

  5. Sélectionnez votre Abonnement et votre Groupe de ressources (sélectionnez un groupe de ressources existant ou créez-en un en utilisant le même nom que celui de votre application).Select your Subscription and Resource Group (select an existing resource group or create a new one (using the same name as your app)).

  6. Choisissez un Nom unique à votre application web.Choose a unique Name of your web app.

  7. Choisissez l’option par défaut Publier, comme Code.Choose the default Publish option as Code.

  8. Dans la Pile d’exécution, vous devez sélectionner une version sous ASP.NET ou Nœud.In the Runtime stack, you need to select a version under ASP.NET or Node. Si vous générez un serveur principal .NET, sélectionnez une version sous ASP.NET.If you are building a .NET backend, select a version under ASP.NET. Autrement, si vous ciblez une application basée sur des nœuds, sélectionnez-en une de la version à partir de Nœud.Otherwise if you are targeting a Node based application, select one of the version from Node.

  9. Sélectionnez le Système d’exploitation voulu : Linux ou Windows.Select the right Operating System, either Linux or Windows.

  10. Sélectionnez la Région où vous souhaitez que cette application soit déployée.Select the Region where you would like this app to be deployed.

  11. Sélectionnez le Plan App Service qui convient et appuyez sur Examiner et créer.Select the appropriate App Service Plan and hit Review and create.

  12. Dans Groupe de ressources, sélectionnez un groupe de ressources existant ou créez-en un (en utilisant le même nom que votre application).Under Resource Group, select an existing resource group or create a new one (using the same name as your app).

  13. Cliquez sur Créer.Click Create. Patientez quelques minutes jusqu’au déploiement du service, puis continuez.Wait a few minutes for the service to be deployed successfully before proceeding. Regardez l’icône de Notifications (cloche) dans l’en-tête de portail à la recherche de mises à jour de l’état.Watch the Notifications (bell) icon in the portal header for status updates.

  14. Une fois le déploiement terminé, cliquez sur la section Détails du déploiement, puis sur la Ressource de Type Microsoft.Web/sites.Once the deployment is completed, click on the Deployment details section and then click on the Resource of Type Microsoft.Web/sites. Vous accédez alors à l’application web App Service que vous venez de créer.It will navigate you to the App Service Web App that you just created.

  15. Cliquez dans le panneau Configuration sous Paramètres et dans Paramètres de l’application, cliquez sur le bouton Nouveau paramètre d’application.Click on the Configuration blade under Settings and in the Application settings, click on the New application setting button.

  16. Dans la page Ajouter/modifier le paramètre d’application, entrez MobileAppsManagement_EXTENSION_VERSION comme Nom, et La plus récente comme Valeur, puis appuyez sur OK.In the Add/Edit application setting page, enter Name as MobileAppsManagement_EXTENSION_VERSION and Value as latest and hit OK.

Vous êtes prêt à utiliser cette application web App Service nouvellement créée comme Application mobile.You are all set to use this newly created App Service Web app as a Mobile app.

Créer une connexion de base de données et configurer le projet client et de serveurCreate a database connection and configure the client and server project

  1. Télécharger les démarrages rapides du kit de développement logiciel (SDK) client pour les plateformes suivantes :Download the client SDK quickstarts for the following platforms:

    iOS (Objective-C)iOS (Objective-C)
    iOS (Swift)iOS (Swift)
    Android (Java)Android (Java)
    Xamarin.iOSXamarin.iOS
    Xamarin.AndroidXamarin.Android
    Xamarin.FormsXamarin.Forms
    CordovaCordova
    Windows (C#)Windows (C#)

    Notes

    Si vous utilisez le projet iOS, vous devez télécharger « azuresdk-iOS-*.zip » à partir de la toute dernière version de GitHub.If you use the iOS project you need to download "azuresdk-iOS-*.zip" from latest GitHub release. Décompressez et ajoutez le fichier MicrosoftAzureMobile.framework à la racine du projet.Unzip and add the MicrosoftAzureMobile.framework file to the project's root.

  2. Vous devrez ajouter une connexion de base de données ou vous connecter à une connexion existante.You will have to add a database connection or connect to an existing connection. Tout d’abord, déterminez si vous allez créer un magasin de données ou en utiliser un existant.First, determine whether you’ll create a data store or use an existing one.

    • Créer une nouveau magasin de données : Si vous créez un magasin de données, utilisez le démarrage rapide suivant :Create a new data store: If you’re going to create a data store, use the following quickstart:

      Démarrage rapide : Prise en main de bases de données uniques dans Azure SQL DatabaseQuickstart: Getting started with single databases in Azure SQL Database

    • Source de données existante : Suivez les instructions ci-dessous si vous souhaitez utiliser une connexion de base de données existanteExisting data source: Follow the instructions below if you want to use an existing database connection

      1. Format de chaîne de connexion à la base de données SQL - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}SQL Database Connection String format - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} Nom du serveur, vous le trouverez dans la page de vue d’ensemble de votre base de données. Il se présente généralement comme suit : « nom_serveur.database.windows.net ».{your_SQLServer} Name of the server, this can be found in the overview page for your database and is usually in the form of “server_name.database.windows.net”. {port} généralement 1433.{port} usually 1433. {your_catalogue} Nom de la base de données.{your_catalogue} Name of the database. {your_username} Nom d’utilisateur pour accéder à votre base de données.{your_username} User name to access your database. {your_password} Mot de passe pour accéder à votre base de données.{your_password} Password to access your database.

        En savoir plus sur le format de chaîne de connexion SQLLearn more about SQL Connection String format

      2. Ajoutez la chaîne de connexion à votre application mobile dans App Service, vous pouvez gérer les chaînes de connexion pour votre application à l’aide de l’option Configuration dans le menu.Add the connection string to your mobile app In App Service, you can manage connection strings for your application by using the Configuration option in the menu.

        Pour ajouter une chaîne de connexion :To add a connection string:

        1. Cliquez sur l’onglet Paramètres de l’application.Click on the Application settings tab.

        2. Cliquez sur [+] Nouveau chaîne de connexion.Click on [+] New connection string.

        3. Vous devrez fournir le Nom, la Valeur et le Type pour votre chaîne de connexion.You will need to provide Name, Value and Type for your connection string.

        4. Pour le Nom, saisissez MS_TableConnectionStringType Name as MS_TableConnectionString

        5. La valeur doit correspondre à la chaîne de connexion que vous avez formée à l’étape précédente.Value should be the connecting string you formed in the step before.

        6. Si vous ajoutez une chaîne de connexion à une base de données SQL Azure, choisissez SQLAzure sous Type.If you are adding a connection string to a SQL Azure database choose SQLAzure under type.

  3. Azure Mobile Apps a des kits de développement logiciel (SDK) pour les serveurs principaux .NET et Node.js.Azure Mobile Apps has SDKs for .NET and Node.js backends.

    • Backend Node.jsNode.js backend

      Si vous prévoyez d’utiliser l’application de démarrage rapide Node.js, suivez les instructions ci-dessous.If you’re going to use Node.js quickstart app, follow the instructions below.

      1. Dans le portail Azure, accédez à Tables faciles, vous verrez cet écran.In the Azure portal, go to Easy Tables, you will see this screen.

        Tables faciles Node

      2. Assurez-vous que la chaîne de connexion SQL a déjà été ajoutée dans l’onglet Configuration. Cochez ensuite la case Je reconnais que cette opération va remplacer tout le contenu du site, puis cliquez sur le bouton Créer une table TodoItem.Make sure the SQL connection string is already added in the Configuration tab. Then check the box of I acknowledge that this will overwrite all site contents and click the Create TodoItem table button.

        Tables faciles Node - Configuration

      3. Dans Tables faciles, cliquez sur le bouton + Ajouter.In Easy Tables, click the + Add button.

        Tables faciles Node - Bouton Ajouter

      4. Créez une table TodoItem avec l’accès anonyme.Create a TodoItem table with anonymous access.

        Tables faciles Node - Ajouter une table

    • Backend .NET.NET backend

      Si vous prévoyez d’utiliser l’application de démarrage rapide .NET, suivez les instructions ci-dessous.If you’re going to use .NET quickstart app, follow the instructions below.

      1. Téléchargez le projet de serveur .NET Azure Mobile Apps à partir du référentiel azure-mobile-apps-quickstarts.Download the Azure Mobile Apps .NET server project from the azure-mobile-apps-quickstarts repository.

      2. Générez le projet de serveur .NET localement dans Visual Studio.Build the .NET server project locally in Visual Studio.

      3. Dans Visual Studio, ouvrez l’Explorateur de solutions, cliquez avec le bouton droit sur le projet ZUMOAPPNAMEService, cliquez sur Publier, vous verrez une fenêtre Publish to App Service.In Visual Studio, open Solution Explorer, right-click on ZUMOAPPNAMEService project, click Publish, you will see a Publish to App Service window. Si vous travaillez sur Mac, découvrez d’autres façons de déployer l’application ici.If you are working on Mac, check out other ways to deploy the app here.

        Publication de Visual studio

      4. Sélectionnez App Service comme cible de publication, puis cliquez sur Sélectionner existant, puis sur le bouton Publier bouton au bas de la fenêtre.Select App Service as publish target, then click Select Existing, then click the Publish button at the bottom of the window.

      5. Vous devrez d’abord vous connecter à Visual Studio avec votre abonnement Azure.You will need to log into Visual Studio with your Azure subscription first. Sélectionnez Subscription, Resource Group, puis le nom de votre application.Select the Subscription, Resource Group, and then select the name of your app. Lorsque vous êtes prêt, cliquez sur OK, cette action déploie le projet serveur .NET que vous avez localement dans le serveur principal App Service.When you are ready, click OK, this will deploy the .NET server project that you have locally into the App Service backend. Lorsque le déploiement se termine, vous êtes redirigé vers http://{zumoappname}.azurewebsites.net/ dans le navigateur.When deployment finishes, you will be redirected to http://{zumoappname}.azurewebsites.net/ in the browser.

Exécuter la solution Xamarin.FormsRun the Xamarin.Forms solution

Visual Studio Tools pour Xamarin est requis pour ouvrir la solution, consultez les instructions d’installation de Xamarin.The Visual Studio Tools for Xamarin are required to open the solution, see the Xamarin installation instructions. Si les outils sont déjà installés, suivez ces étapes pour télécharger et ouvrir la solution :If the tools are already installed, follow these steps to download and open the solution:

Visual Studio (Windows et Mac)Visual Studio (Windows and Mac)

  1. Ouvrez le Portail Microsoft Azure, puis accédez à l’application mobile que vous avez créée.Go to the Azure portal and navigate to the mobile app that you created. Sur le panneau Overview, recherchez l’URL qui correspond au point de terminaison public de votre application mobile.On the Overview blade, look for the URL which is the public endpoint for your mobile app. Exemple : la valeur sitename relative au nom de l’application « test123 » est https://test123.azurewebsites.net.Example - the sitename for my app name "test123" will be https://test123.azurewebsites.net.

  2. Ouvrez le fichier Constants.cs dans le dossier xamarin.forms/ZUMOAPPNAME.Open the file Constants.cs in this folder - xamarin.forms/ZUMOAPPNAME. Le nom de l’application est ZUMOAPPNAME.The application name is ZUMOAPPNAME.

  3. Dans la classe Constants.cs, remplacez la variable ZUMOAPPURL par le point de terminaison public ci-dessus.In Constants.cs class, replace ZUMOAPPURL variable with public endpoint above.

    public static string ApplicationURL = @"ZUMOAPPURL";

    devientbecomes

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

  4. Suivez les instructions ci-dessous pour exécuter les projets Android ou Windows, et, s’il existe un ordinateur Mac en réseau disponible, le projet iOS.Follow the instructions below to run the Android or Windows projects; and if there is a networked Mac computer available, the iOS project.

(Facultatif) Exécuter le projet Android(Optional) Run the Android project

Dans cette section, vous exécutez le projet Xamarin.Android.In this section, you run the Xamarin.Android project. Vous pouvez ignorer cette section si vous n’utilisez pas d’appareils Android.You can skip this section if you are not working with Android devices.

Visual StudioVisual Studio

  1. Cliquez avec le bouton droit sur le projet Android (Droid), puis cliquez sur Définir comme projet de démarrage.Right-click the Android (Droid) project, and then select Set as StartUp Project.

  2. Dans le menu Générer, cliquez sur Gestionnaire de configuration.On the Build menu, select Configuration Manager.

  3. Dans la boîte de dialogue Gestionnaire de configuration, cochez les cases Générer et Déployer situées à côté du projet Android, et assurez-vous que la case Générer du projet de code partagé est cochée.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. Appuyez sur la touche F5 ou le bouton Démarrer pour générer le projet et démarrer l’application dans l’émulateur Android.To build the project and start the app in an Android emulator, press the F5 key or click the Start button.

Visual Studio pour MacVisual Studio for Mac

  1. Cliquez avec le bouton droit sur le projet Android, puis cliquez sur Définir comme projet de démarrage.Right-click the Android project, and then select Set As Startup Project.

  2. Pour générer le projet et démarrer l’application dans l’émulateur Android, cliquez sur le menu Exécuter, puis sur Démarrer le débogage.To build the project and start the app in an Android emulator, select the Run menu, then Start Debugging.

Dans l’application, tapez un texte explicite, tel que Découvrir Xamarin, puis cliquez sur le bouton « + » ( + ).In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

Application To-Do Android

Cette action envoie une demande post vers le back end Mobile Apps qui est hébergé dans Azure.This action sends a post request to the new Mobile Apps back end that's hosted in Azure. Les données de la requête sont insérées dans la table TodoItem.Data from the request is inserted into the TodoItem table. Les éléments stockés dans cette table sont renvoyés par le backend Mobile Apps et les données sont affichées dans la liste.Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

Notes

Le code qui vous permet d’accéder à votre back end Mobile Apps se trouve dans le fichier C# TodoItemManager.cs du projet de code partagé de la solution.The code that accesses your Mobile Apps back end is in the TodoItemManager.cs C# file of the shared code project in the solution.

(Facultatif) Exécuter le projet iOS(Optional) Run the iOS project

Dans cette section, vous exécutez le projet Xamarin.iOS pour les appareils iOS.In this section, you run the Xamarin.iOS project for iOS devices. Vous pouvez ignorer cette section si vous n’utilisez pas d’appareils iOS.You can skip this section if you are not working with iOS devices.

Visual StudioVisual Studio

  1. Cliquez avec le bouton droit sur le projet iOS, puis cliquez sur Définir comme projet de démarrage.Right-click the iOS project, and then select Set as StartUp Project.

  2. Dans le menu Générer, cliquez sur Gestionnaire de configuration.On the Build menu, select Configuration Manager.

  3. Dans la boîte de dialogue Gestionnaire de configuration, cochez les cases Générer et Déployer situées à côté du projet iOS, et assurez-vous que la case Générer du projet de code partagé est cochée.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. Pour générer le projet et démarrer l’application dans l’émulateur iPhone, appuyez sur la touche F5.To build the project and start the app in the iPhone emulator, select the F5 key.

Visual Studio pour MacVisual Studio for Mac

  1. Cliquez avec le bouton droit sur le projet iOS, puis cliquez sur Définir comme projet de démarrage.Right-click the iOS project, and then select Set As Startup Project.

  2. Dans le menu Exécuter, cliquez sur Démarrer le débogage pour créer le projet et démarrer l’application dans l’émulateur iPhone.On the Run menu, select Start Debugging to build the project and start the app in the iPhone emulator.

Dans l’application, tapez un texte explicite, tel que Découvrir Xamarin, puis cliquez sur le bouton « + » ( + ).In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

application To-Do iOS

Cette action envoie une demande post vers le back end Mobile Apps qui est hébergé dans Azure.This action sends a post request to the new Mobile Apps back end that's hosted in Azure. Les données de la requête sont insérées dans la table TodoItem.Data from the request is inserted into the TodoItem table. Les éléments stockés dans cette table sont renvoyés par le backend Mobile Apps et les données sont affichées dans la liste.Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

Notes

Vous trouverez le code qui vous permet d’accéder à votre back end Mobile Apps dans le fichier C# TodoItemManager.cs du projet de code partagé de la solution.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.

(Facultatif) Exécuter le projet Windows(Optional) Run the Windows project

Dans cette section, vous exécutez le projet UWP (plateforme Windows universelle) Xamarin.Forms pour les appareils Windows.In this section, you run the Xamarin.Forms Universal Windows Platform (UWP) project for Windows devices. Vous pouvez ignorer cette section si vous n’utilisez pas d’appareils Windows.You can skip this section if you are not working with Windows devices.

Visual StudioVisual Studio

  1. Cliquez avec le bouton droit un projet UWP, puis cliquez sur Définir comme projet de démarrage.Right-click any the UWP project, and then select Set as StartUp Project.

  2. Dans le menu Générer, cliquez sur Gestionnaire de configuration.On the Build menu, select Configuration Manager.

  3. Dans la boîte de dialogue Gestionnaire de configuration, cochez les cases Générer et Déployer situées à côté du projet Windows que vous avez choisi, et assurez-vous que la case Générer du projet de code partagé est cochée.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. Appuyez sur la touche F5 ou le bouton Démarrer (qui doit indiquer Ordinateur local) pour générer le projet et démarrer l’application dans l’émulateur Android.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).

Notes

Le projet Windows ne peut pas être exécuté sur macOS.The Windows project cannot be run on macOS.

Dans l’application, tapez un texte explicite, tel que Découvrir Xamarin, puis cliquez sur le bouton « + » ( + ).In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

Cette action envoie une demande post vers le back end Mobile Apps qui est hébergé dans Azure.This action sends a post request to the new Mobile Apps back end that's hosted in Azure. Les données de la requête sont insérées dans la table TodoItem.Data from the request is inserted into the TodoItem table. Les éléments stockés dans cette table sont renvoyés par le backend Mobile Apps et les données sont affichées dans la liste.Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

application To-Do UWP

Notes

Vous trouverez le code qui vous permet d’accéder à votre back end Mobile Apps dans le fichier C# TodoItemManager.cs du projet de bibliothèque de classes portables de votre solution.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.

Résolution de problèmesTroubleshooting

Si vous avez des problèmes pour générer la solution, exécutez le gestionnaire de package NuGet et mettez à jour vers la dernière version de Xamarin.Forms, et dans le projet Android, mettez à jour les packages de support 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. Les projets de démarrage rapide n’incluent pas toujours les dernières versions.Quickstart projects might not always include the latest versions.

Notez que tous les packages de support référencés dans votre projet Android doivent avoir la même version.Please note that all the support packages referenced in your Android project must have the same version. Le package NuGet Azure Mobile Apps a une dépendance Xamarin.Android.Support.CustomTabs pour la plateforme Android, donc si votre projet utilise des packages de support plus récents vous devez installer ce package avec la version requise directement pour éviter les conflits.The Azure Mobile Apps NuGet package has Xamarin.Android.Support.CustomTabs dependency for Android platform, so if your project uses newer support packages you need to install this package with required version directly to avoid conflicts.