Créer une application .NET MAUIBlazor Hybrid

Remarque

Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 8 de cet article.

Important

Ces informations portent sur la préversion du produit, qui est susceptible d’être en grande partie modifié avant sa commercialisation. Microsoft n’offre aucune garantie, expresse ou implicite, concernant les informations fournies ici.

Pour la version actuelle, consultez la version .NET 8 de cet article.

Ce tutoriel vous montre comment générer et exécuter une application .NET MAUIBlazor Hybrid. Vous allez apprendre à effectuer les actions suivantes :

• Créez un projet d’application .NET MAUIBlazor Hybrid dans Visual Studio
• Exécutez l’application sur Windows
• Exécutez l’application sur un appareil mobile émulé dans l’Émulateur Android

Prérequis

• Plateformes prises en charge (documentation .NET MAUI)
• Visual Studio avec la charge de travail de .NET Multi-platform App UIdéveloppement.
• Microsoft Edge WebView2: WebView2 est nécessaire sur Windows lors de l’exécution d’une application native. Lorsque vous développez des applications .NET MAUIBlazor Hybrid et que vous les exécutez uniquement dans les émulateurs de Visual Studio, WebView2 n’est pas nécessaire.
• Activez l’accélération matérielle pour améliorer le niveau de performance de l’émulateur Android.

Pour plus d’informations sur les prérequis et l’installation de logiciels pour ce tutoriel, consultez les ressources suivantes dans la documentation .NET MAUI :

• Plateformes prises en charge pour les applications .NET MAUI
• Installation (Visual Studio)

Créer une application .NET MAUIBlazor Hybrid

Lancez Visual Studio. Dans la fenêtre Démarrer, sélectionnez Créer un nouveau projet :

Dans la fenêtre Créer un nouveau projet, utilisez la liste déroulante Type de projet pour filtrer les modèles MAUI :

Sélectionnez le modèle.NET MAUIBlazor Hybrid Application, puis sélectionnez le bouton Suivant :

Remarque

Dans .NET 7 ou antérieur, le modèle est nommé .NET MAUIBlazorApplication.

Dans la boîte de dialogue Configurer votre nouveau projet :

• Définissez le Nom du projet sur MauiBlazor.
• Choisissez un emplacement approprié pour le projet.
• Cliquez sur le bouton Suivant.

Dans la boîte de dialogue Informations supplémentaires, sélectionnez la version du framework avec la liste déroulante Framework. Sélectionnez le bouton Créer :

Attendez que Visual Studio crée le projet et restaure les dépendances du projet. Surveillez la progression dans Explorateur de solutions en ouvrant l’entrée Dépendances.

Restauration des dépendances :

Dépendances restaurées :

Exécutez l’application sur Windows

Dans la barre d’outils Visual Studio, sélectionnez le bouton Ordinateur Windows pour générer et démarrer le projet :

Si le Mode Développeur n’est pas activé, vous êtes invité à l’activer dans Paramètres>Pour les développeurs>Mode Développeur (Windows 10) ou Paramètres>Privacy et sécurité>Pour les développeurs>Mode Développeur (Windows 11). Définissez le commutateur sur Activé.

L’application s’exécutant en tant qu’application de bureau Windows :

Exécutez l’application dans l’Émulateur Android

Si vous avez suivi les instructions de la section Exécuter l’application sur Windows, sélectionnez le bouton Arrêter le débogage dans la barre d’outils pour arrêter l’application Windows en cours d’exécution :

Dans la barre d’outils Visual Studio, sélectionnez le bouton déroulant Démarrer la configuration. Sélectionnez Émulateur Android>Émulateur Android :

Les kits de développement logiciel Android sont nécessaires pour générer des applications pour Android. Dans le panneau Liste d’erreurs, un message s’affiche vous demandant de double-cliquer sur le message pour installer les kits de développement logiciel Android requis :

La fenêtre Acceptation de licence du kit de développement logiciel Android s’affiche, puis sélectionnez le bouton Accepter pour chaque licence qui s’affiche. Une fenêtre supplémentaire s’affiche pour les licences Émulateur Android et Applicateur de correctifs du kit de développement logiciel. Cliquez sur le bouton Accepter.

Attendez que Visual Studio télécharge le kit de développement logiciel Android et l’Émulateur Android. Vous pouvez suivre la progression en sélectionnant l’indicateur des tâches en arrière-plan dans le coin inférieur gauche de l’interface utilisateur de Visual Studio :

L’indicateur affiche une coche lorsque les tâches en arrière-plan sont terminées :

Dans la barre d’outils, sélectionnez le bouton Émulateur Android :

Dans la fenêtre Créer un appareil Android par défaut, sélectionnez le bouton Créer :

Attendez que Visual Studio télécharge, décompresse et crée un Émulateur Android. Lorsque l’émulateur de téléphone Android est prêt, sélectionnez le bouton Démarrer.

Remarque

Activez l’accélération matérielle pour améliorer le niveau de performance de l’émulateur Android.

Fermez la fenêtre Gestionnaire d'appareils Android. Attendez que la fenêtre du téléphone émulé s’affiche, que le système d’exploitation Android se charge et que l’écran d’accueil s’affiche.

Important

Le téléphone émulé doit être sous tension avec le système d’exploitation Android chargé pour charger et exécuter l’application dans le débogueur. Si le téléphone émulé n’est pas en cours d’exécution, activez le téléphone à l’aide du raccourci clavier Ctrl+P ou en sélectionnant le bouton Marche/Arrêt dans l’interface utilisateur :

Dans la barre d’outils Visual Studio, sélectionnez le bouton Pixel 5 - {VERSION} pour générer et exécuter le projet, où l’espace réservé {VERSION} est la version Android. Dans l’exemple suivant, la version d’Android est API 30 (Android 11.0 - API 30), et une version ultérieure s’affiche en fonction du kit de développement logiciel Android installé :

Visual Studio génère le projet et déploie l’application sur l’émulateur.

Le démarrage de l’émulateur, le chargement du téléphone et du système d’exploitation émulés, ainsi que le déploiement et l’exécution de l’application peuvent prendre plusieurs minutes en fonction de la vitesse du système et de l’activation ou non de l’accélération matérielle. Vous pouvez surveiller la progression du déploiement en inspectant la barre d’état de Visual Studio en bas de l’interface utilisateur. L’indicateur Prêt est coché et les indicateurs de déploiement et de chargement de l’application de l’émulateur disparaissent lorsque l’application est en cours d’exécution :

Pendant le déploiement :

Au démarrage de l’application :

L’application s’exécutant dans l’Émulateur Android :

Étapes suivantes

Dans ce didacticiel, vous avez appris à :

• Créez un projet d’application .NET MAUIBlazor Hybrid dans Visual Studio
• Exécutez l’application sur Windows
• Exécutez l’application sur un appareil mobile émulé dans l’Émulateur Android

En savoir plus sur les applications Blazor Hybrid :

ASP.NET Core Blazor Hybrid