Partager via

Créer une application Xamarin.Forms avec Azure Mobile Apps

  • Article

Note

Ce produit est mis hors service. Pour un remplacement des projets utilisant .NET 8 ou version ultérieure, consultez la bibliothèque Datasync Community Toolkit.

Ce tutoriel vous montre comment ajouter un service principal basé sur le cloud à une application mobile multiplateforme à l’aide de Xamarin.Forms et d’un back-end d’application mobile Azure. Vous allez créer à la fois un serveur principal d’application mobile et une liste de tâches simple liste de tâches qui stocke les données d’application dans Azure.

Vous devez suivre ce didacticiel avant d’autres didacticiels Xamarin Forms à l’aide de la fonctionnalité Mobile Apps dans Azure App Service.

Conditions préalables

Vous pouvez suivre ce didacticiel sur Mac ou Windows. Pour suivre ce didacticiel, vous avez besoin des éléments suivants :

  • Visual Studio 2022 avec les charges de travail suivantes.
    • ASP.NET et développement web
    • Développement Azure
    • Développement mobile avec .NET
  • Un compte Azure .
  • Azure CLI.
    • Connectez-vous avec az login et sélectionnez un abonnement approprié avant de commencer.
  • (Facultatif) azure Developer CLI.
  • Un appareil virtuel Android, avec les paramètres suivants :
    • Téléphone : toute image de téléphone : nous utilisons le pixel 5 pour les tests.
    • Image système : Android 11 (API 30 avec les API Google)

Si vous compilez l’édition iOS de l’application, vous devez disposer d’un Mac disponible :

  • Installer XCode
  • Ouvrez Xcode après l’installation afin qu’il puisse ajouter des composants supplémentaires requis.
  • Une fois ouvert, sélectionnez Préférences XCode...>Composants, puis installez un simulateur iOS.
  • Si vous suivez le didacticiel sur Windows, suivez le guide pour Appairer sur Mac.

Télécharger l’exemple d’application

  1. Ouvrez le dépôt azure-mobile-apps dans votre navigateur.

  2. Ouvrez la liste déroulante code , puis sélectionnez Télécharger leZIP.

    Capture d’écran du menu Code sur GitHub.

  3. Une fois le téléchargement terminé, ouvrez votre dossier Téléchargements et recherchez le fichier azure-mobile-apps-main.zip.

  4. Cliquez avec le bouton droit sur le fichier téléchargé, puis sélectionnez Extraire tout....

    Si vous préférez, vous pouvez utiliser PowerShell pour développer l’archive :

    C:\Temp> Expand-Archive azure-mobile-apps-main.zip

Les exemples se trouvent dans les exemples dossier dans les fichiers extraits. L’exemple de démarrage rapide est nommé TodoApp. Vous pouvez ouvrir l’exemple dans Visual Studio en double-cliquant sur le fichier TodoApp.sln.

Capture d’écran de l’Explorateur de fichiers pour la solution.

Déployer le serveur principal sur Azure

Note

Si vous avez déjà déployé le back-end à partir d’un autre démarrage rapide, vous pouvez utiliser le même back-end et ignorer cette étape.

Pour déployer le service principal, nous allons :

  • Provisionnez azure App Service et Azure SQL Database sur Azure.
  • Utilisez Visual Studio pour déployer le code de service sur azure App Service nouvellement créé.

Utiliser Azure Developer CLI pour effectuer toutes les étapes

L’exemple TodoApp est configuré pour prendre en charge Azure Developer CLI. Pour effectuer toutes les étapes (approvisionnement et déploiement) :

  1. installez l’interface cli pour développeurs Azure.
  2. Ouvrez un terminal et remplacez le répertoire dans le dossier contenant le fichier TodoApp.sln. Ce répertoire contient également azure.yaml.
  3. Exécutez azd up.

Si vous n’êtes pas déjà connecté à Azure, le navigateur démarre pour vous demander de vous connecter. Vous êtes alors invité à utiliser un abonnement et une région Azure. Azure Developer CLI provisionne ensuite les ressources nécessaires et déploie le code de service dans la région Azure et l’abonnement de votre choix. Enfin, Azure Developer CLI écrit un fichier Constants.cs approprié pour vous.

Vous pouvez exécuter la commande azd env get-values pour afficher les informations d’authentification SQL si vous souhaitez accéder directement à la base de données.

Si vous avez effectué les étapes avec Azure Developer CLI, passez à l’étape suivante. Si vous ne souhaitez pas utiliser Azure Developer CLI, suivez les étapes manuelles.

Créez des ressources sur Azure.

  1. Ouvrez un terminal et remplacez le répertoire dans le dossier contenant le fichier TodoApp.sln. Ce répertoire contient également azuredeploy.json.

  2. Vérifiez que vous avez connecté et sélectionné un abonnement à l’aide d’Azure CLI.

  3. Créez un groupe de ressources :

    az group create -l westus -g quickstart

    Cette commande crée le groupe de ressources quickstart dans la région USA Ouest. Vous pouvez sélectionner n’importe quelle région souhaitée, ce qui vous permet de créer des ressources. Veillez à utiliser le même nom et la même région où qu’ils soient mentionnés dans ce didacticiel.

  4. Créez les ressources à l’aide d’un déploiement de groupe :

    az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234

    Choisissez un mot de passe fort pour votre mot de passe administrateur SQL. Vous en avez besoin ultérieurement lors de l’accès à la base de données.

  5. Une fois le déploiement terminé, obtenez les variables de sortie, car celles-ci contiennent des informations importantes dont vous avez besoin ultérieurement :

    az deployment group show -g quickstart -n azuredeploy --query properties.outputs

    Voici un exemple de sortie :

    Capture d’écran des résultats de la ligne de commande.

  6. Notez chacune des valeurs des sorties pour une utilisation ultérieure.

Publier le code du service

Ouvrez le TodoApp.sln dans Visual Studio.

  1. Dans le volet de droite, sélectionnez l'de l’Explorateur de solutions .

  2. Cliquez avec le bouton droit sur le projet TodoAppService.NET6, puis sélectionnez Définir comme projet de démarrage.

  3. Dans le menu supérieur, sélectionnez Build>Publish TodoAppService.NET6.

  4. Dans la fenêtre Publier, sélectionnez Cible : Azure, puis appuyez sur suivant.

    Capture d’écran de la fenêtre de sélection cible.

  5. Sélectionnez une cible spécifique : Azure App Service (Windows), puis appuyez sur suivant.

    Capture d’écran de la fenêtre de sélection cible spécifique.

  6. Si nécessaire, connectez-vous et sélectionnez un nom d’abonnement approprié.

  7. Vérifiez que d’affichage est défini sur de groupe de ressources.

  8. Développez le groupe de ressources quickstart, puis sélectionnez l’App Service créé précédemment.

    Capture d’écran de la fenêtre de sélection d’App Service.

  9. Sélectionnez Terminer.

  10. Une fois le processus de création de profil de publication terminé, sélectionnez Fermer.

  11. Recherchez les dépendances de service et sélectionnez les points triples en regard de la base de données SQL Server, puis sélectionnez Se connecter.

    Capture d’écran montrant la sélection de la configuration du serveur S Q L.

  12. Sélectionnez Azure SQL Database, puis sélectionnez suivant.

  13. Sélectionnez le guide de démarrage rapide base de données, puis sélectionnez suivant.

    Capture d’écran de la fenêtre de sélection de base de données.

  14. Renseignez le formulaire à l’aide du nom d’utilisateur et du mot de passe SQL figurant dans les sorties du déploiement, puis sélectionnez Suivant.

    Capture d’écran de la fenêtre paramètres de base de données.

  15. Sélectionnez Terminer.

  16. Sélectionnez Fermer une fois terminé.

  17. Sélectionnez publier pour publier votre application sur Azure App Service que vous avez créé précédemment.

    Capture d’écran montrant le bouton Publier.

  18. Une fois le service principal publié, un navigateur est ouvert. Ajoutez /tables/todoitem?ZUMO-API-VERSION=3.0.0 à l’URL :

    Capture d’écran montrant la sortie du navigateur après la publication du service.

Configurer l’exemple d’application

Votre application cliente doit connaître l’URL de base de votre back-end afin qu’elle puisse communiquer avec elle.

Si vous avez utilisé azd up pour approvisionner et déployer le service, le fichier Constants.cs a été créé pour vous et vous pouvez ignorer cette étape.

  1. Développez le projet TodoApp.Data.

  2. Cliquez avec le bouton droit sur le projet TodoApp.Data, puis sélectionnez Ajouter>classe....

  3. Entrez Constants.cs comme nom, puis sélectionnez Ajouter.

    Capture d’écran de l’ajout du fichier Constants.cs au projet.

  4. Ouvrez le fichier Constants.cs.example et copiez le contenu (Ctrl-A, suivi de Ctrl-C).

  5. Basculez vers Constants.cs, mettez en surbrillance tout le texte (Ctrl-A), puis collez le contenu à partir de l’exemple de fichier (Ctrl-V).

  6. Remplacez le https://APPSERVICENAME.azurewebsites.net par l’URL principale de votre service.

    namespace TodoApp.Data
{
    public static class Constants
    {
        /// <summary>
        /// The base URI for the Datasync service.
        /// </summary>
        public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";
    }
}

    Vous pouvez obtenir l’URL principale de votre service à partir de l’onglet Publier. Veillez à utiliser une URL https.

  7. Enregistrez le fichier. (Ctrl-S).

Générer et exécuter l’application Android

  1. Dans l’Explorateur de solutions, développez le dossier xamarin-forms.

  2. Cliquez avec le bouton droit sur le projet TodoApp.Forms.Android, puis sélectionnez Définir comme projet de démarrage.

  3. Dans la barre supérieure, sélectionnez n’importe quelle configuration de processeur et la cible TodoApp.Forms.Android :

    Capture d’écran montrant comment définir la configuration d’exécution pour une application Xamarin Forms pour Android.

  4. Si vous voyez émulateur Android à la place, vous n’avez pas créé d’émulateur Android. Pour plus d’informations, consultez configuration de l’émulateur Android. Pour créer un émulateur Android :

    • Sélectionnez Tools>Android>Android Device Manager.
    • Sélectionnez + Nouveau.
    • Sélectionnez les options suivantes sur le côté gauche :
      • Nom : quickstart
      • Appareil de base : Pixel 5
      • Processeur : x86_64
      • Système d’exploitation : Android 11.0 - API 30
      • API Google : vérifié
    • Sélectionnez Créer.
    • Si nécessaire, acceptez le contrat de licence. L’image sera ensuite téléchargée.
    • Une fois que le bouton Démarrer s’affiche, appuyez sur Démarrer.
    • Si vous êtes invité à Hyper-V accélération matérielle, lisez la documentation pour activer l’accélération matérielle avant de continuer. L’émulateur sera lent sans activer l’accélération matérielle.

    Pourboire

    Démarrez votre émulateur Android avant de continuer. Pour ce faire, ouvrez android Device Manager et appuyez sur Démarrer en regard de votre émulateur choisi.

  5. Appuyez sur F5 pour générer et exécuter le projet.

Une fois l’application démarrée, vous verrez une liste vide et une zone de texte pour ajouter des éléments dans l’émulateur. Vous pouvez:

  • Entrez du texte dans la zone, puis appuyez sur Entrée pour insérer un nouvel élément.
  • Sélectionnez un élément pour définir ou effacer l’indicateur terminé.
  • Appuyez sur l’icône d’actualisation pour recharger les données à partir du service.

capture d’écran de l’application Android en cours d’exécution.

Générer et exécuter l’application iOS

Note

Vous DEVEZ suivre le guide de Appairer à Mac. Vous recevrez des erreurs lors de la compilation ou de l’exécution d’applications iOS sans Mac associé.

  1. Dans l’Explorateur de solutions, développez le dossier xamarin-forms.

  2. Cliquez avec le bouton droit sur le projet TodoApp.Forms.iOS, puis sélectionnez Définir comme projet de démarrage.

  3. Dans la barre supérieure, sélectionnez configuration simulateur iPhone et la cible TodoApp.Forms.iOS :

    Capture d’écran montrant comment définir la configuration d’exécution pour une application Xamarin Forms pour i O S.

  4. Sélectionner le simulateur iPhone

  5. Appuyez sur F5 pour générer et exécuter le projet.

Une fois l’application démarrée, vous verrez une liste vide et une zone de texte pour ajouter des éléments dans l’émulateur. Vous pouvez:

  • Entrez du texte dans la zone, puis appuyez sur Entrée pour insérer un nouvel élément.
  • Sélectionnez un élément pour définir ou effacer l’indicateur terminé.
  • Appuyez sur l’icône d’actualisation pour recharger les données à partir du service.

Capture d’écran de l’application i O S en cours d’exécution montrant la liste des tâches.

Dépannage

Le simulateur distant fourni avec Visual Studio 2022 est incompatible avec XCode 13.3. Vous recevrez le message d’erreur suivant :

Capture d’écran du message d’erreur lors du lancement du simulateur i O S.

Pour contourner ce problème :

  • Désactivez le simulateur distant (Outils / Options / Paramètres iOS / décochez Simulateur distant sur Windows). Lorsqu’il est désactivé, le simulateur s’exécute sur le Mac au lieu de Windows. Vous pouvez ensuite interagir avec le simulateur directement sur votre Mac lors de l’utilisation du débogueur, etc. sur Windows.
  • Désactivez le simulateur distant comme indiqué ci-dessus afin que le simulateur s’exécute sur le Mac. Utilisez ensuite une application bureau à distance pour vous connecter au Bureau Mac à partir de Windows. Les options bureau à distance incluent Gestionnaire de bureau à distance (rapide et disponible gratuitement) et les clients VNC (plus lents et gratuits).
  • Utilisez un appareil physique pour tester au lieu du simulateur. Vous pouvez obtenir un profil d’approvisionnement gratuit pour suivre le didacticiel d’authentification.

Étapes suivantes

Poursuivez le didacticiel en l’ajout de l’authentification à l’application.