Exercice : Créer votre première application .NET MAUI

  • 5 minutes

Dans cet exercice, vous commencez à créer l’application .NET MAUI (Multi-platform Application User Interface) pour la chaîne d’épicerie. Vous utilisez le modèle pour générer l’application par défaut et l’exécuter sur Windows et dans l’émulateur Android. Dans un exercice ultérieur, modifiez cette application pour personnaliser l’interface utilisateur et ajouter la fonctionnalité requise par l’application de chaîne de magasins d’alimentation.

Créer un projet

  1. Ouvrez Visual Studio et créez une solution. Cette action ouvre l’Assistant Nouveau Project dans Visual Studio.

    Conseil

    Assurez-vous que la charge de travail .NET MAUI est installée avec Visual Studio 2022 v17.3 ou une version ultérieure (v17.8 avec .NET 8 de préférence). Vous trouverez davantage d’informations ici.

  2. Sélectionnez le type de projet MAUI, le modèle d’application MAUI .NET, puis Suivant.

    Capture d’écran de la boîte de dialogue Créer un projet. Le modèle .NET MAUI App est sélectionné.

  3. Dans la page Configurer votre nouveau projet, nommez le projet Phoneword et enregistrez-le dans l’emplacement de votre choix. Cliquez sur Suivant.

    Capture d’écran de la boîte de dialogue Configurer votre nouveau projet. L’utilisateur nomme le projet Phoneword, puis sélectionne un emplacement sur son disque dur pour le stocker.

  4. Sélectionnez .NET 8.0 (support à long terme) dans la liste déroulante Framework, puis Créer pour créer l’application.

Examiner la structure de la solution

  1. Dans la fenêtre de l’Explorateur de solutions, développez le projet Phoneword. Développez le dossier Resources et ses sous-dossiers,ainsi que les nœuds App.xaml, AppShell.xaml et MainPage.xaml.

    Capture d’écran du projet Phoneword dans la fenêtre Explorateur de solutions Visual Studio.

  2. Dans le projet, notez les éléments suivants :

    • Le dossier Resources contient des polices, images et ressources partagées utilisées par toutes les plateformes.

    • Le fichier MauiProgram.cs contient le code qui configure l’application et spécifie que la classe App doit être utilisée pour exécuter l’application.

    • Le fichier App.xaml.cs, le constructeur de la classe App, crée une instance de la classe AppShell qui s’affiche ensuite dans la fenêtre d’application.

    • Le fichier AppShell.xaml contient la disposition principale de l’application et la page de démarrage de MainPage.

    • Le fichier MainPage.xaml contient la disposition de la page. Cette disposition inclut le code XAML (Extensible Application Markup Language) d’un bouton avec la légende Cliquer ici et une image qui affiche le fichier dotnet_bot.png. Il existe également deux autres étiquettes.

    • Le fichier MainPage.xaml.cs contient la logique d’application de la page. Plus précisément, la classe MainPage inclut une méthode nommée OnCounterClicked qui s’exécute lorsque l’utilisateur appuie sur le bouton Cliquer ici.

Générer et exécuter l’application sur Windows

  1. Dans la barre d’outils de Visual Studio, sélectionnez le profil Windows Machine. Sélectionnez .net8.0-windows à partir de la liste présentée dans la zone de liste déroulante des infrastructures.

    Capture d’écran de la liste déroulante de runtime cible dans Visual Studio. L’utilisateur définit le profil Machine Windows comme profil de démarrage pour la solution.

  2. Dans le menu Déboguer, sélectionnez Démarrer le débogage. Cette action génère, déploie et exécute l’application sur Windows :

    Capture d’écran du menu de débogage de Visual Studio. L’utilisateur débogue l’application en utilisant le profil Machine Windows.

  3. Vérifiez que la version Windows de l’application démarre. Sélectionnez le bouton Cliquer ici plusieurs fois. Le texte du bouton doit s’actualiser avec le nombre incrémenté à chaque appui.

    Capture d’écran de l’application d’interface utilisateur Windows en cours d’exécution. L’utilisateur a appuyé sur le bouton « Cliquer ici » quatre fois.

  4. Dans le menu Affichage, sélectionnez Explorateur de solutions. Dans la fenêtre Explorateur de solutions, développez le nœud MainPage.xaml et ouvrez le fichier code-behind MainPage.xaml.cs.

  5. Dans la méthode OnCounterClicked, modifiez l’instruction qui incrémente la variable count pour y ajouter plutôt 5 :

    private void OnCounterClicked(object sender, EventArgs e)
{
    count+=5; // update this

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

  6. Dans la barre d’outils de Visual Studio, sélectionnez le bouton Rechargement à chaud :

    Capture d’écran de la barre d’outils Visual Studio. Le bouton Rechargement à chaud est en surbrillance.

  7. Revenez à l’application et sélectionnez le bouton Cliquer ici. Vérifiez que le nombre est désormais incrémenté de 5.

    Remarque

    La fonctionnalité Rechargement à chaud de Visual Studio vous permet de modifier votre code pendant que l’application s’exécute en mode débogage. Vous n’avez pas besoin d’arrêter l’application pour voir les modifications. Outre la modification du code, vous pouvez apporter des modifications au balisage XAML pour une page. Ces modifications deviendront visibles dans l’application en cours d’exécution.

  8. Fermez l’application et revenez à Visual Studio.

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

  1. Dans la barre d’outils de Visual Studio, sélectionnez le projet Phoneword.

  2. Dans le menu Outils, sélectionnez Android, puis Gestionnaire d’appareils Android. Si vous êtes invité à laisser le gestionnaire d’appareils Android apporter des modifications à votre ordinateur, sélectionnez Oui.

    Capture d’écran du menu de Visual Studio. L’utilisateur a sélectionné l’option Gestionnaire d’appareils Android.

  3. Dans la fenêtre Gestionnaire d’appareils Android, sélectionnez + Nouveau. Dans la fenêtre Nouvel appareil, sélectionnez l’appareil de base Pixel 3a (+ Store), puis le système d’exploitation API 30, enfin Créer. Attendez que les diverses bibliothèques soient téléchargées et que l’appareil soit configuré.

    Remarque

    L’exemple de cet exercice utilise l’appareil de base Pixel 3a (+ Store), mais vous pouvez utiliser des appareils plus récents. Par exemple, le Pixel 5 - API 31 ou le Pixel 5 - API 34.

    Capture d’écran de la fenêtre Nouvel appareil à partir du kit Android SDK. L’utilisateur crée un appareil Pixel 3 avec une API 30 sélectionnée.

  4. Une fois l’appareil créé, revenez à Visual Studio.

  5. Dans la barre d’outils de Visual Studio, dans la zone de liste déroulante de configuration Débogage, sélectionnez le profil Émulateurs Android. Sélectionnez l’appareil pixel_3a-api_30 que vous avez créé.

    Capture d’écran de la barre d’outils de Visual Studio. L’utilisateur a spécifié le Pixel 3 avec le profil API 30 pour que l’émulateur Android commence à déboguer.

  6. Démarrez le débogage à l’aide du profil pixel_3a-api_30. Cette action génère, déploie et exécute l’application sur l’appareil Android.

    Capture d’écran de la barre d’outils de Visual Studio. Elle indique que le profil pixel 3 p i 30 a été sélectionné et qu’il est prêt à démarrer le débogage dès que l’utilisateur appuie sur le bouton de lecture.

  7. Lorsque l’application commence à s’exécuter sur l’émulateur (cela peut prendre plusieurs minutes), sélectionnez le bouton Cliquer ici et vérifiez que l’application s’exécute exactement de la même façon que sur Windows.

    Capture d’écran de la version Android de l’application Phoneword en cours d’exécution dans l’émulateur sélectionné.

  8. Revenez à Visual Studio et arrêtez le débogage.