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

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 application de liste todo simple qui stocke des données d’application dans Azure.

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

Prérequis

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

• Visual Studio 2022 avec les charges de travail suivantes.
  • Développement web et ASP.NET
  • Développement Azure
  • Développement mobile en .NET
• Un compte Azure.
• Interface de ligne de commande Azure.
  • Connectez-vous avec az login et sélectionnez un abonnement approprié avant de commencer.
• Un appareil virtuel Android, avec les paramètres suivants :
  • Téléphone : n’importe quelle image de téléphone : nous utilisons le Pixel 5 pour le test.
  • 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 tous les composants supplémentaires requis.
• Une fois ouvert, sélectionnez Préférences XCode...>Composants et installez un simulateur iOS.
• Si vous terminez le tutoriel sur Windows, suivez le guide de Coupler à Mac.

• Visual Studio 2022 pour Mac
• Un compte Azure.
• Interface de ligne de commande Azure.
  • Connectez-vous avec az login et sélectionnez un abonnement approprié avant de commencer.
• Un appareil virtuel Android, avec les paramètres suivants :
  • Téléphone : n’importe quelle image de téléphone : nous utilisons le Pixel 5 pour le test.
  • Image système : Android 11 (API 30 avec les API Google)
• Installer XCode
  • Ouvrez Xcode après l’installation afin qu’il puisse ajouter tous les composants supplémentaires requis.
  • Une fois ouvert, sélectionnez Préférences XCode...>Composants et installez un simulateur iOS.

Télécharger l’exemple d’application

1. Ouvrez le référentiel azure-mobile-apps dans votre navigateur.

2. Ouvrez la liste déroulante Code , puis sélectionnez Télécharger le fichier ZIP.

   

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

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 le dossier d’exemples 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 TodoApp.sln fichier.

1. Ouvrez le référentiel azure-mobile-apps dans votre navigateur.

2. Ouvrez la liste déroulante Code , puis sélectionnez Télécharger le fichier ZIP.

   

3. Une fois le téléchargement terminé, ouvrez votre dossier Téléchargements .

4. Le package sera déjà décompressé dans le azure-mobile-apps-main dossier. Vous pouvez déplacer ce dossier vers un emplacement plus approprié si vous le souhaitez.

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

Lorsque vous ouvrez l’exemple pour la première fois, notez que certains projets ne sont pas disponibles. Par exemple, les projets spécifiques à Windows (tels que WPF et UWP) ne peuvent pas être compilés avec Visual Studio 2022 pour Mac.

Vous pouvez décharger n’importe quel projet avec lequel vous ne travaillez pas. Développez le windows dossier dans l’Explorateur de solutions.

Pour chaque projet désactivé, cliquez avec le bouton droit sur le projet, puis sélectionnez Décharger le projet.

Déployer le back-end dans Azure

Notes

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 back-end, nous allons :

• Utilisez Azure Resource Manager et Azure CLI pour déployer une Azure App Service et Azure SQL Database sur Azure.
• Utilisez Visual Studio pour publier le code de service sur le Azure App Service nouvellement créé.

Créez des ressources sur Azure.

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

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

3. Créez un autre groupe de ressources :

   az group create -l westus -g quickstart
   

   Cette commande crée le groupe de quickstart ressources dans la région USA Ouest. Vous pouvez sélectionner n’importe quelle région de votre choix, à condition que vous puissiez y créer des ressources. Veillez à utiliser le même nom et la même région partout où ils sont 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 aurez 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 elles contiennent des informations importantes dont vous aurez besoin plus tard :

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

   Voici un exemple de sortie :

   

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

Publiez le code du service.

Ouvrez l'TodoApp.sln dans Visual Studio.

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

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

3. Dans le menu supérieur, sélectionnez Générer Publier>TodoAppService.NET6.

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

   

5. Sélectionnez Cible spécifique : Azure App Service (Windows), puis appuyez sur Suivant.

   

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

7. Vérifiez que La vue est définie sur Groupe de ressources.

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

   

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 du service, sélectionnez les trois points en regard de la base de données SQL Server, puis sélectionnez Se connecter.

    

12. Sélectionnez Azure SQL base de données, puis suivant.

13. Sélectionnez la base de données de démarrage rapide, puis suivant.

    

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

    

15. Sélectionnez Terminer.

16. Sélectionnez Fermer lorsque vous avez terminé.

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

    

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

    

Pour déployer le service back-end, nous allons :

• Utilisez Azure Resource Manager et Azure CLI pour déployer une Azure App Service et Azure SQL Database sur Azure.
• Utilisez Visual Studio 2022 pour Mac pour publier le code du service sur le Azure App Service nouvellement créé.

Créer des ressources sur Azure

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

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

3. Créez un autre groupe de ressources :

   az group create -l westus -g quickstart
   

   Cette commande crée le groupe de quickstart ressources dans la région USA Ouest. Vous pouvez sélectionner n’importe quelle région de votre choix, à condition que vous puissiez y créer des ressources. Veillez à utiliser le même nom et la même région partout où ils sont 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 aurez 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 elles contiennent des informations importantes dont vous aurez besoin plus tard :

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

   Voici un exemple de sortie :

   

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

Publier le code du service

Ouvrez dans TodoApp.sln Visual Studio 2022 pour Mac.

1. Cliquez avec le bouton droit sur la TodoApp solution, puis sélectionnez Restaurer les packages NuGet.

2. Attendez la fin de la restauration du package NuGet.

3. Cliquez avec le bouton droit sur le TodoAppService.NET6 projet, puis Publier>sur Azure....

4. Sélectionnez le service que vous avez créé ci-dessus (dans le quickstart groupe de ressources), puis sélectionnez Publier.

   

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

   

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.

1. Développez le TodoApp.Data projet.

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

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

   

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

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

6. Remplacez par https://APPSERVICENAME.azurewebsites.net 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).

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

1. Développez le TodoApp.Data projet.

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

3. Sélectionnez Classe vide, entrez Constants.cs comme nom, puis sélectionnez Créer.

   

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

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

6. Remplacez par https://APPSERVICENAME.azurewebsites.net 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";
       }
   }
   

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

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

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

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

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

   

4. Si vous voyez l’é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 Outils>Android>Gestionnaire de périphériques.
   • 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 Create (Créer).
   • Si nécessaire, acceptez le contrat de licence. L’image sera ensuite téléchargée.
   • Une fois le bouton Démarrer affiché, appuyez sur Démarrer.
   • Si vous êtes invité à vous renseigner sur l’accélération matérielle Hyper-V, 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.

   Conseil

   Démarrez votre émulateur Android avant de continuer. Pour ce faire, ouvrez le Gestionnaire de périphériques Android et appuyez sur Démarrer en regard de l’émulateur de votre choix.

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

Une fois l’application démarrée, une liste vide et une zone de texte s’affichent 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 Actualiser pour recharger les données à partir du service.

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

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

3. Dans la barre supérieure, sélectionnez un émulateur Android approprié :

   

4. Dans le menu supérieur, sélectionnez Déboguer>Démarrer le débogage.

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

• Appuyez sur le + bouton pour ajouter un é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.

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

Notes

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

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

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

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

   

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, une liste vide et une zone de texte s’affichent 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.

Dépannage

Le simulateur distant fourni avec Visual Studio 2022 n’est pas compatible avec XCode 13.3. Vous recevrez un message d’erreur similaire à celui-ci :

Pour contourner ce problème :

• Désactivez le simulateur distant (Outils / Options / Paramètres iOS / décochez Remote Simulator to Windows). Lorsque cette option est désactivée, le simulateur s’exécute sur le Mac plutôt que sur Windows. Vous pouvez ensuite interagir avec le simulateur directement sur votre Mac tout en utilisant le débogueur, etc. sur Windows.
• Désactivez le simulateur distant comme 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 le Gestionnaire Bureau à distance Devolutions (rapide et il existe une version gratuite disponible) 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.

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

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

3. Dans la barre supérieure, sélectionnez un simulateur iOS approprié :

   

4. Dans le menu supérieur, sélectionnez Déboguer>Démarrer le débogage.

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

• Appuyez sur le + bouton pour ajouter un é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.

Dépannage

Certaines versions de Visual Studio 2022 pour Mac ne fonctionnent pas avec certaines versions de XCode. Si vous recevez une erreur HE0042 lors de l’exécution de l’application sur un simulateur, il est probable que vous deviez mettre à jour votre version de Visual Studio 2022 pour Mac. Utilisez la dernière préversion et vérifiez que toutes les mises à jour disponibles sont appliquées. L’application est déployée sur le simulateur. Si vous rencontrez toujours des problèmes d’exécution via le débogueur, démarrez l’application à partir du simulateur à la place.

Étapes suivantes

Poursuivez le tutoriel en ajoutant l’authentification à l’application.