Créer une application Windows (WPF) avec Azure Mobile Apps

Ce tutoriel vous montre comment ajouter un service back-end basé sur le cloud à une application de bureau WPF (Presentation Framework) Windows à l’aide d’Azure Mobile Apps et d’un back-end d’application mobile Azure. Vous allez créer à la fois un back-end d’application mobile et une application de liste Todo simple qui stocke les données d’application dans Azure.

Vous devez suivre ce didacticiel avant tous les autres didacticiels Windows (WPF) sur l’utilisation de la fonctionnalité Mobile Apps dans Azure App Service.

Prérequis

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 .NET Desktop
• Un compte Azure.
• Interface de ligne de commande Azure.
  • Connectez-vous avec az login et sélectionnez un abonnement approprié avant de commencer.

Ce didacticiel ne peut être effectué que sur un système Windows.

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 des 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.

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 un 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 modifiez le répertoire dans 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 quickstart groupe de ressources 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. Assurez-vous d’utiliser le même nom et la même région où qu’ils soient mentionnés dans ce tutoriel.

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 plus tard lors de l’accès à la base de données.

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

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

   Un exemple de sortie sera :

   

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

Publiez le code du service.

Ouvrez l’Visual StudioTodoApp.sln.

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 en tant que Project 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.

   

5. Sélectionnez Une 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 l’affichage est défini sur groupe de ressources.

8. Développez le quickstart groupe de ressources, puis sélectionnez le App Service 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 de service et sélectionnez les points triples en regard de la base de données SQL Server, puis sélectionnez Connecter.

    

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

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

    

14. Renseignez 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 une fois terminé.

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

    

18. Une fois le service principal 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 projet, puis sélectionnez Ajouter> une TodoApp.Dataclasse....

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

   

4. Ouvrez le fichier et copiez le Constants.cs.example 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 l’URL https://APPSERVICENAME.azurewebsites.net 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 . Assurez-vous d’utiliser une URL https .

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

Générer et exécuter l’exemple d’application

1. Dans l’Explorateur de solutions, développez le windows dossier.

2. Cliquez avec le bouton droit sur le TodoApp.WPF projet, puis sélectionnez Définir en tant que Project de démarrage.

3. Dans la barre supérieure, sélectionnez la configuration de l’UC et la cible TodoApp.WPF :

   

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

Une fois l’application démarrée, vous verrez une liste vide avec une zone de texte. Vous pouvez :

• Entrez du texte, puis appuyez sur Entrée ou l’icône + pour ajouter l’élément.

• Définissez ou désactivez la case à cocher pour marquer n’importe quel élément comme terminé.

• Appuyez sur l’icône d’actualisation pour recharger les données à partir du service.

  

Étapes suivantes

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