Créer une application Avalonia avec Azure Mobile Apps

  • Article

Avalonia vous permet de créer des applications gui .NET pour Windows, macOS, Linux, iOS, Android et Web Assembly à partir d’une base de code unique. Ce tutoriel vous montre comment ajouter un service back-end basé sur le cloud à une application de bureau Windows Avalonia à l’aide d’Azure Mobile Apps et d’un back-end d’application mobile Azure. Vous allez créer un back-end d’application mobile et une application Todo list simple qui stocke les données d’application dans Azure.

Vous devez suivre ce tutoriel avant tous les autres didacticiels Avalonia sur l’utilisation d’Azure Mobile Apps.

Prérequis

Pour terminer ce tutoriel, vous avez besoin de ce qui suit :

Bien que Avalonia prenne en charge la création sur Mac ou Windows, ce tutoriel suppose que vous utilisez Windows et Visual Studio 2022. Nous vous recommandons de suivre le tutoriel Avalonia pour vous familiariser avec le processus de développement d’Avalonia.

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.

    Screenshot of the Code menu on GitHub.

  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.

Screenshot of the file explorer for the solution.

Déployer le back-end dans Azure

Remarque

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 Azure Developer CLI.
  2. Ouvrez un terminal et remplacez le répertoire par le dossier contenant le TodoApp.sln fichier. Ce répertoire contient azure.yamlégalement .
  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 approprié Constants.cs pour vous.

Vous pouvez exécuter la azd env get-values commande 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 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 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. 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 SQL Administration istrator. 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 :

    Screenshot of command line results.

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

Publier le code du service

Ouvrez l'TodoApp.sln dans Visual Studio.

  1. Dans le volet de droite, 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 la publication>de TodoAppService.NET6.

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

    Screenshot of the target selection window.

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

    Screenshot of the specific target selection window.

  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 App Service créé précédemment.

    Screenshot of the app service selection window.

  9. Cliquez sur 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.

    Screenshot showing the S Q L server configuration selection.

  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.

    Screenshot of the database selection window.

  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.

    Screenshot of the database settings window.

  15. Cliquez sur 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.

    Screenshot showing the publish button.

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

    Screenshot showing the browser output after the service is published.

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 provisionner et déployer le service, le Constants.cs fichier a été créé pour vous et vous pouvez ignorer cette étape.

  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 le nom, puis sélectionnez Ajouter.

    Screenshot of adding the Constants.cs file to the project.

  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 . Vérifiez que vous utilisez 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 others dossier.

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

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

    Screenshot of the Visual Studio configuration bar.

  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 l’icône + pour ajouter l’élément.

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

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

    Screenshot of the Avalonia app running on Windows.

Étapes suivantes

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