Hello World avec Blazor - Teams

Blazor vous permet de créer des interfaces utilisateur web interactives à l’aide de C#, au lieu de JavaScript.

Vous pouvez créer une application d’onglet et une application bot avec Blazor et la dernière version de Visual Studio.

Capture d’écran de l’application Blazor affichant la sortie de l’onglet, du bot et de l’extension de message une fois que vous avez correctement effectué le guide pas à pas.

Remarque

Teams Toolkit ne prend pas en charge la fonctionnalité d’extension de message.

Conditions préalables

8 minutes restantes

Voici une liste des outils dont vous avez besoin pour créer et déployer votre application.

	Installer	Pour l’utilisation...
	Visual Studio 2022	Vous pouvez installer la version entreprise dans Visual Studio 2022 et installer les charges de travail de développement ASP.NET et web. Utilisez la dernière version.
	Microsoft Teams	Microsoft Teams vous permet de collaborer avec toutes les personnes avec lesquelles vous travaillez via des applications pour la conversation, les réunions et les appels au même endroit.
	Microsoft Edge (recommandé) ou Google Chrome	Un navigateur avec des outils de développement.
	Tunnel de développement	Les fonctionnalités de l’application Teams (bots conversationnels, extensions de message et webhooks entrants) ont besoin de connexions entrantes. Un tunnel connecte votre système de développement à Teams. Le tunnel de développement est un outil puissant pour ouvrir en toute sécurité votre localhost sur Internet et contrôler qui a accès. Le tunnel de développement est disponible dans Visual Studio 2022 version 17.7.0 ou ultérieure. ou Vous pouvez également utiliser ngrok comme tunnel pour connecter votre système de développement à Teams. Elle n’est pas obligatoire pour les applications qui incluent uniquement des onglets. Ce package est installé dans le répertoire du projet (à l’aide de npm `devDependencies`).

Une fois que vous avez installé les outils requis, configurez l’environnement de développement.

Installer microsoft Teams Toolkit

Le Kit de ressources Teams permet de simplifier le processus de développement avec des outils permettant de provisionner et de déployer des ressources cloud pour votre application, de publier sur le Microsoft Teams Store, etc.
Vous pouvez utiliser le kit de ressources avec Visual Studio ou l’interface CLI (interface de ligne de commande) appelée teamsfx.

Visual Studio
Ligne de commande

Téléchargez la dernière version de Visual Studio.
Ouvrez vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exe à partir de votre dossier de téléchargement.
Sélectionnez Continuer dans la page Visual Studio Installer pour configurer votre installation.
Sélectionnez ASP.NET et développement web sous Charges de travail.
Sélectionnez Outils de développement Microsoft Teams sous Détails de l’installation.
Sélectionnez Installer.

Votre Visual Studio est installé en quelques minutes.

Pour installer l’interface CLI TeamsFx, utilisez le gestionnaire de npm package :

npm install -g @microsoft/teamsfx-cli

Selon votre configuration, vous devrez peut-être utiliser sudo pour installer l’interface CLI :

sudo npm install -g --unsafe-perm @microsoft/teamsfx-cli

Cette condition est plus courante sur les systèmes Linux et macOS.

Veillez à ajouter le cache global npm à votre chemin d’accès. Cette étape est normalement effectuée dans le cadre du programme d’installation Node.js.

Vous pouvez utiliser l’interface CLI avec la teamsfx commande . Vérifiez que la commande fonctionne en exécutant teamsfx -h.

Attention

Avant de pouvoir exécuter TeamsFx dans les terminaux PowerShell, vous devez activer la stratégie d’exécution signée à distance pour PowerShell.

Configurer votre locataire de développement Teams

Un locataire est comme un espace ou un conteneur pour votre organisation dans Teams, où vous discutez, partagez des fichiers et exécutez des réunions. Cet espace est également l’endroit où vous chargez et testez votre application personnalisée. Vérifions si vous êtes prêt à développer avec le locataire.

Activer le chargement d’applications personnalisées

Après avoir créé l’application, vous devez charger votre application dans Teams sans la distribuer. Ce processus est appelé chargement d’application personnalisée. Connectez-vous à votre compte Microsoft 365 pour afficher cette option.

Dans le client Teams, sélectionnez l’icône Applications .
Sélectionnez Gérer vos applications.
Sélectionnez Charger une application.
Recherchez l’option Charger une application personnalisée. Si vous voyez l’option , le chargement d’applications personnalisées est activé.

Remarque

Si vous n’avez pas la possibilité de charger une application personnalisée, contactez l’administrateur Teams.

Créer un locataire développeur Teams gratuit (facultatif)

Si vous n’avez pas de compte de développeur Teams, vous pouvez l’obtenir gratuitement. Rejoignez le programme des développeurs Microsoft 365 !

Accédez auProgramme pour les développeurs Microsoft 365.
Sélectionnez Rejoindre maintenant et suivez les instructions à l’écran.
Dans l’écran d’accueil, sélectionnez Configurer l’abonnement E5.
Configurez votre compte d’administrateur. Une fois que vous avez terminé, l’écran suivant s’affiche.
Connectez-vous à Teams à l’aide du compte d’administrateur que vous venez de configurer. Vérifiez que vous disposez de l’option Charger une application personnalisée dans Teams.

Obtenir un compte Azure gratuit

Si vous souhaitez héberger votre application ou accéder aux ressources dans Azure, vous devez disposer d’un abonnement Azure. Créez un compte gratuit avant de commencer.

Vous disposez maintenant de tous les outils pour configurer votre compte. Ensuite, nous allons configurer votre environnement de développement et commencer à créer ! Sélectionnez d’abord l’application que vous souhaitez créer.

Créer un espace de travail de projet pour votre application d’onglet

7 minutes restantes

Ouvrez Visual Studio.
Sélectionnez Créer un projet.

La page Créer un projet s’affiche.
Dans la zone de recherche, entrez Microsoft Teams. Dans les résultats de la recherche, sélectionnez Application Microsoft Teams.
Sélectionnez Suivant.
Entrez Nom du projet , puis sélectionnez Créer.
Sélectionnez Tab comme fonctionnalité pour votre application.
Sélectionnez Créer.

Votre application d’onglet Teams est créée en quelques secondes.

Récapitulatif rapide de la création d’une application d’onglet Teams.

Regardez ce bref récapitulatif pour la création d’une application d’onglet Teams.

La représentation graphique montre le processus de création de l’application d’onglet Teams.

Découvrez le code source de l’application d’onglet Teams

Après la création du projet, vous disposez des composants pour créer une application personnelle de base. Vous pouvez afficher la structure du répertoire du projet dans le volet Explorateur de solutions de Visual Studio.

Capture d’écran de l’Explorateur de solutions affichant les composants permettant de créer une application personnelle de base.

Teams Toolkit crée une structure pour votre projet en fonction des fonctionnalités que vous avez sélectionnées. Entre autres fichiers, Teams Toolkit gère les éléments suivants :

Nom du dossier	Sommaire
Icônes d’application	Les icônes d’application sont stockées sous forme de fichiers PNG dans `color.png` et `outline.png`.
`manifest.json`	Le manifeste d’application (précédemment appelé manifeste d’application Teams) pour la publication via le portail des développeurs pour Teams est stocké dans `Properties/manifest.json`.
`BackendController.cs`	Un contrôleur principal est fourni dans `Controllers/BackendController.cs` pour faciliter l’authentification.
`Pages/Tab.razor`	Le manifeste d’application pour la publication via le portail des développeurs pour Teams est stocké dans `Properties/manifest.json`.
`TeamsFx.cs` et `JS/src/index.js`	Le contenu est utilisé pour initialiser les communications avec l’hôte Teams.

Vous pouvez ajouter des fonctionnalités de back-end en ajoutant d’autres contrôleurs ASP.NET Core à votre application.

Créer et exécuter votre première application d’onglet Teams

6 minutes restantes

Après avoir configuré votre espace de travail de projet avec Teams Toolkit, générez votre projet d’onglet.

Pour générer et exécuter votre application :

Sélectionnez Project>Teams Toolkit>Préparer les dépendances d’application Teams.
Connectez-vous à votre compte Microsoft 365 , puis sélectionnez Continuer.
Sélectionnez Déboguer>Démarrer le débogage ou F5.
Si une boîte de dialogue Avertissement de sécurité s’affiche, sélectionnez Oui.
Sélectionnez Ajouter pour installer votre application dans Teams.

Félicitations, votre première application d’onglet s’exécute dans votre environnement local !
Pour permettre à votre application de récupérer les détails de l’utilisateur à l’aide de Microsoft Graph, sélectionnez Autoriser.
Sélectionnez Accepter.
Votre photo et vos détails s’affichent dans votre onglet Personnel.

Vous pouvez effectuer des activités de débogage normales, telles que la définition de points d’arrêt, comme s’il s’agissait d’une autre application web. L’application prend en charge le rechargement à chaud. Si vous modifiez un fichier dans le projet, la page se recharge.
Arrêtez le débogage dans Visual Studio.

Afficher un aperçu de votre première application d’onglet Teams

5 minutes restantes

Vous avez appris à créer, générer et exécuter une application Teams avec la fonctionnalité d’onglet. Les étapes finales suivantes sont de déployer votre application sur Azure et la préversion dans Teams :

Déployons la première application avec la fonctionnalité d’onglet sur Microsoft Azure à l’aide du Kit de ressources Teams.

Pour provisionner votre application d’onglet dans Azure

Sélectionnez Provisionner lekit de ressources> Project > Teamsdans le cloud.
Entrez les détails de l’abonnement et du groupe de ressources dans la boîte de dialogue Provisionner :
1. Sélectionnez votre nom d’abonnement dans la liste déroulante.
2. Sélectionnez votre groupe de ressources dans la liste déroulante.
3. Si vous n’avez pas de groupe de ressources existant, vous pouvez en créer un. Pour créer un groupe de ressources, sélectionnez Nouveau> entrez le nom > de la ressource, sélectionnez OK. Sélectionnez un emplacement dans la liste déroulante nouvel emplacement du groupe de ressources.
4. Sélectionnez Provisionner.
Une boîte de dialogue d’avertissement du Kit de ressources Teams s’affiche.
Sélectionnez Provisionner.

Le provisionnement de votre groupe de ressources dans le cloud prend quelques minutes.
Sélectionnez OK.
Sélectionnez Afficher les ressources approvisionnées pour afficher sur le portail Azure.
Connectez-vous à votre portail Azure.

Votre app-dev-rg s’affiche.

Vos ressources sont approvisionnées dans le portail Azure.

Pour déployer votre application d’onglet dans le cloud

Sélectionnez Project>Teams Toolkit>Deploy to the Cloud....
Sélectionnez OK.

Votre application d’onglet est correctement déployée dans le cloud !

Pour afficher un aperçu de votre application d’onglet dans Teams

Sélectionnez Project>Teams Toolkit Preview>dans Teams.
Sélectionnez Ajouter.

Félicitations, votre première application d’onglet s’exécute dans votre environnement Azure !
Sélectionnez Autoriser pour permettre à votre application de récupérer les détails de l’utilisateur à l’aide de Microsoft Graph.
Sélectionnez Accepter.

Votre photo et vos détails s’affichent dans votre onglet Personnel.

Créer un espace de travail de projet pour votre application bot

4 minutes restantes

Démarrez le développement d’applications Teams en créant votre première application. Cette application utilise la fonctionnalité bot.

Capture d’écran montrant l’espace de travail de votre application bot.

Créer votre projet de bot

Ouvrez Visual Studio.
Sélectionnez Créer un projet.

La page Créer un projet s’affiche.
Dans la zone de recherche, entrez Microsoft Teams. Dans les résultats de la recherche, sélectionnez Application Microsoft Teams.
Sélectionnez Suivant.

La fenêtre Configurer votre nouveau projet s’affiche.
Entrez Nom du projet , puis sélectionnez Créer.

La fenêtre Créer une application Teams s’affiche .
Sélectionnez la fonctionnalité d’application Teams.
Sélectionnez l’application Bot de commande comme fonctionnalité pour votre application.
Sélectionnez Créer.

Votre application bot Teams est créée en quelques secondes.

Récapitulatif rapide de la création d’une application de bot Teams.

Regardez ce bref récapitulatif pour la création d’une application de bot Teams.

La représentation graphique montre le processus de création de l’application bot jTeams.

Découvrez le code source de l’application bot Teams

Après la création du projet, vous disposez des composants pour créer une application personnelle de base. Vous pouvez afficher la structure des répertoires du projet dans la zone Explorateur de solutions de la dernière version de Visual Studio.

Capture d’écran de l’Explorateur de solutions avec BlazorApp mis en évidence.

Teams Toolkit crée une structure pour votre projet en fonction des fonctionnalités que vous avez sélectionnées. Entre autres fichiers, Teams Toolkit gère les éléments suivants :

Nom du dossier	Sommaire
Icônes d’application	Les icônes d’application sont stockées sous forme de fichiers PNG dans `color.png` et `outline.png`.
`manifest.json`	Le manifeste d’application pour la publication via le portail des développeurs pour Teams est stocké dans `Properties/manifest.json`.
`BackendController.cs`	Un contrôleur principal est fourni dans `Controllers/BackendController.cs` pour faciliter l’authentification.
`TeamsFx.cs` et `JS/src/index.js`	Le contenu est utilisé pour initialiser les communications avec l’hôte Teams.

Vous pouvez ajouter des fonctionnalités de back-end en ajoutant d’autres contrôleurs ASP.NET Core à votre application.

Générer et exécuter votre première application de bot

3 minutes restantes

Pour créer et exécuter votre application localement :

Créer un tunnel

tunnel de développement
ngrok

Ouvrez Visual Studio.
Sélectionnez Créer un projet.
Dans la zone de recherche, entrez ASP.NET. Dans les résultats de la recherche, sélectionnez ASP.NET Core Web App.
Sélectionnez Suivant.
Entrez Nom du projet , puis sélectionnez Suivant.
Sélectionnez Créer.

Une fenêtre de vue d’ensemble s’affiche.
Dans la liste déroulante de débogage, sélectionnez Dev Tunnels (aucun tunnel actif)>Créer un tunnel....

Une fenêtre contextuelle apparaît.
Mettez à jour les détails suivants dans la fenêtre contextuelle :
1. Compte : entrez un compte Microsoft ou GitHub.
2. Nom : entrez un nom pour votre tunnel.
3. Type de tunnel : dans la liste déroulante, sélectionnez Temporaire.
4. Accès : dans la liste déroulante, sélectionnez Public.
Sélectionnez OK.

Une fenêtre contextuelle s’affiche pour indiquer que le tunnel de développement a été créé avec succès.
Sélectionnez OK.

Vous trouverez le tunnel que vous avez créé dans la liste déroulante de débogage comme suit :
Sélectionnez F5 pour exécuter l’application en mode débogage.
Si une boîte de dialogue Avertissement de sécurité s’affiche, sélectionnez Oui.

Une fenêtre contextuelle apparaît.
Cliquez sur Continuer.

La page d’accueil du tunnel de développement s’ouvre dans une nouvelle fenêtre de navigateur et le tunnel de développement est maintenant actif.
Accédez à Visual Studio, puis sélectionnez Afficher la > sortie.
Dans le menu déroulant Console de sortie, sélectionnez Tunnels de développement.

La console de sortie affiche l’URL du tunnel de développement.

Utilisez ngrok ou l’invite de commandes pour créer un tunnel vers les points de terminaison HTTPS de votre serveur web en cours d’exécution localement. Exécutez la commande suivante dans ngrok :

ngrok http --host-header=localhost 3978

Conseil

Si vous rencontrez ERR_NGROK_4018, suivez les étapes fournies dans l’invite de commandes pour vous inscrire et authentifier ngrok. Exécutez ensuite la commande ngrok http --host-header=localhost 3978.

La fenêtre affiche l’URL HTTPS.

Capture d’écran montrant l’URL HTTPS ngrok.

Sélectionnez Project>Teams Toolkit>Préparer les dépendances d’application Teams.
Connectez-vous à votre compte Microsoft 365 , puis sélectionnez Continuer.
Sélectionnez Déboguer>Démarrer le débogage ou F5 pour exécuter votre application en mode débogage.
Sélectionnez Ajouter.

Maintenant, le bot s’exécute correctement sur Teams ! Une fois l’application chargée, une session de conversation avec le bot s’ouvre.

Vous pouvez taper helloworld pour afficher une carte d’introduction pour une carte adaptative.

Vous pouvez effectuer des activités de débogage normales, telles que la définition de points d’arrêt, comme s’il s’agissait d’une autre application web. L’application prend en charge le rechargement à chaud. Si vous modifiez un fichier dans le projet, la page se recharge.

Découvrez comment résoudre les problèmes si votre application ne s’exécute pas localement.

Pour exécuter correctement votre application dans Teams, vérifiez que vous avez activé le chargement d’applications personnalisées dans votre compte Teams. Vous pouvez en savoir plus sur le chargement d’applications personnalisées dans la section Conditions préalables.

Afficher un aperçu de votre première application de bot

2 minutes restantes

Pour provisionner votre application de bot dans Azure

Sélectionnez Provisionner lekit de ressources> Project > Teamsdans le cloud.
Entrez les détails de l’abonnement et du groupe de ressources dans la boîte de dialogue Provisionner :
1. Sélectionnez votre nom d’abonnement dans la liste déroulante.
2. Sélectionnez votre groupe de ressources dans la liste déroulante.
3. Si vous n’avez pas de groupe de ressources existant, vous pouvez en créer un. Pour créer un groupe de ressources, sélectionnez Nouveau> entrez le nom > de la ressource, sélectionnez OK. Sélectionnez un emplacement dans la liste déroulante nouvel emplacement du groupe de ressources.
4. Sélectionnez Provisionner.
  
  Une boîte de dialogue d’avertissement du Kit de ressources Teams s’affiche.
Sélectionnez Provisionner.

Le provisionnement de votre groupe de ressources dans le cloud prend quelques minutes.
Une fois l’approvisionnement terminé, sélectionnez OK.
Sélectionnez Afficher les ressources approvisionnées pour afficher sur le portail Azure.
Connectez-vous à votre portail Azure.

Votre app-dev-rg s’affiche.

Vos ressources sont approvisionnées dans le portail Azure !

Pour déployer votre application bot dans le cloud

Sélectionnez Project>Teams Toolkit>Déployer dans le cloud.
Sélectionnez OK.

Votre application bot est correctement déployée dans le cloud !

Pour afficher un aperçu de votre application bot dans Teams

Sélectionnez Project>Teams Toolkit Preview>dans Teams.
Sélectionnez Ajouter.

Maintenant, le bot s’exécute correctement sur Teams ! Une fois l’application chargée, une session de conversation avec le bot s’ouvre.
Vous pouvez taper helloworld pour afficher une carte d’introduction pour une carte adaptative.

Félicitations !

Tout est terminé !

Tu l’as fait !

Vous avez créé deux applications, chacune avec une fonctionnalité différente : une application d’onglet et une application bot.

Vous avez terminé le tutoriel pour créer des applications avec Blazor.

Partager via

Créer votre première application à l’aide de Blazor