Exercice - Créer une extension de message

Effectué

Dans cet exercice, vous créez une solution d’extension de message. Vous utilisez Teams Toolkit dans Visual Studio pour créer les ressources requises, puis démarrer une session de débogage et tester dans Microsoft Teams.

Créer un projet d’extension de message

Commencez par créer un projet d’application Microsoft Teams configuré avec une extension de message qui contient une commande de recherche. Bien que vous puissiez créer un projet à l’aide d’un modèle de projet Teams Toolkit pour Visual Studio, des modifications doivent être apportées au projet généré automatiquement pour pouvoir suivre ce module. Au lieu de cela, vous utilisez un modèle de projet personnalisé qui est disponible en tant que package NuGet. L’avantage de l’utilisation d’un modèle personnalisé est qu’il crée une solution avec les fichiers et les dépendances nécessaires, ce qui vous fait gagner du temps.

Dans une session PowerShell :

1. Commencez par installer le package de modèle à partir de NuGet en exécutant :

   dotnet new install M365Advocacy.Teams.Templates
   

2. Créez un projet en exécutant :

   dotnet new teams-msgext-search --name "ProductsPlugin" `
     --internal-name "msgext-products" `
     --display-name "Contoso products" `
     --short-description "Product look up tool." `
     --full-description "Get real-time product information and share them in a conversation." `
     --command-id "Search" `
     --command-description "Find products by name" `
     --command-title "Products" `
     --parameter-name "ProductName" `
     --parameter-title "Product name" `
     --parameter-description "The name of the product as a keyword" `
     --allow-scripts Yes
   

3. Attendez que le projet soit créé.

4. Accédez au répertoire du projet en exécutant cd ProductsPlugin.

5. Ouvrez la solution dans Visual Studio en exécutant .\ProductsPlugin.sln.

Créer un tunnel de développement

Lorsque l’utilisateur interagit avec votre extension de message, le service Bot envoie des requêtes au service web. Pendant le développement, votre service web s’exécute localement sur votre ordinateur. Pour permettre au service bot d’atteindre votre service web, vous devez l’exposer au-delà de votre machine à l’aide d’un tunnel de développement.

Continuez dans Visual Studio :

1. Dans la barre d’outils, sélectionnez la liste déroulante en regard du bouton Démarrer , développez le menu Dev Tunnels (aucun tunnel actif), puis sélectionnez Créer un tunnel...
2. Dans la boîte de dialogue, spécifiez les valeurs suivantes :
   1. Compte : sélectionnez un compte de votre choix
   2. Nom : msgext-products
   3. Type de tunnel : temporaire
   4. Accès : Public
3. Créez le tunnel en sélectionnant OK. Une invite s’affiche indiquant que le nouveau tunnel est maintenant le tunnel actif actuel
4. Fermez l’invite en sélectionnant OK

Préparer les ressources

Une fois tout ce qui est maintenant en place, à l’aide du Kit de ressources Teams, exécutez le processus Préparer les dépendances d’application Teams pour créer les ressources requises.

Le processus Préparer les dépendances d’application Teams met à jour les variables d’environnement BOT_ENDPOINT et BOT_DOMAIN dans le fichier TeamsApp\env\.env.local à l’aide de l’URL de tunnel dev active et exécute les actions décrites dans le fichier TeamsApp\teamsapp.local.yml .

Prenez un moment pour explorer les étapes du fichier teamsapp.local.yml .

Continuez dans Visual Studio :

1. Ouvrez le menu Projet (vous pouvez également sélectionner avec le bouton droit le projet TeamsApp dans le Explorateur de solutions), développez le menu Kit de ressources Teams et sélectionnez Préparer les dépendances de l’application Teams
2. Dans la boîte de dialogue Compte Microsoft 365 , connectez-vous ou sélectionnez un compte existant pour accéder à votre client Microsoft 365, puis sélectionnez Continuer
3. Dans la boîte de dialogue Provisionner , connectez-vous ou sélectionnez un compte existant à utiliser pour déployer des ressources sur Azure et spécifiez les valeurs suivantes :
   1. Nom de l’abonnement : utilisez la liste déroulante pour sélectionner un abonnement
   2. Groupe de ressources : sélectionnez Nouveau... pour ouvrir une boîte de dialogue, dans la zone de texte, entrez rg-msgext-products-local, puis sélectionnez OK.
   3. Région : utilisez la liste déroulante pour sélectionner la région la plus proche de vous
4. Créez les ressources dans Azure en sélectionnant Provisionner
5. Dans l’invite d’avertissement du Kit de ressources Teams, sélectionnez Provisionner
6. Dans l’invite d’informations du Kit de ressources Teams, sélectionnez Afficher les ressources approvisionnées pour ouvrir une nouvelle fenêtre de navigateur.

Prenez un moment pour explorer les ressources créées dans Azure et afficher également les variables d’environnement créées dans le fichier .env.local .

Remarque

Lorsque vous fermez et rouvrez Visual Studio, l’URL du tunnel de développement change et n’est plus sélectionnée comme tunnel actif. Si cela se produit, vous devez sélectionner à nouveau le tunnel et exécuter le processus Préparer les dépendances de l’application Teams pour refléter l’URL mise à jour dans le manifeste de l’application.

Exécuter et déboguer

Teams Toolkit utilise des profils de lancement à plusieurs projets. Pour exécuter le projet, vous devez activer une fonctionnalité en préversion dans Visual Studio.

Dans Visual Studio :

1. Ouvrez le menu Outils et sélectionnez Options...
2. Dans la zone de recherche, entrez plusieurs projets.
3. Sous Environnement, sélectionnez Fonctionnalités en préversion
4. Cochez la case en regard de Activer les profils de lancement multi-projets , puis sélectionnez OK pour enregistrer vos modifications.

Par défaut, Visual Studio ouvre une fenêtre de navigateur à l’aide de votre profil Microsoft Edge main. Si vous avez choisi d’utiliser un compte Microsoft 365 pendant le processus Préparer les dépendances d’application Teams qui est différent du compte que vous utilisez dans votre profil main, il est recommandé de configurer Visual Studio pour lancer une fenêtre de navigateur qui utilise un profil Microsoft Edge spécifique. Cela garantit que le compte et le locataire Microsoft 365 appropriés sont utilisés lors du test de votre application.

Pour configurer Visual Studio afin d’utiliser un profil Microsoft Edge spécifique :

Dans Microsoft Edge :

1. Basculez vers le profil que vous souhaitez utiliser ou créez-en un.
2. Accédez à edge://version et notez la valeur ProfilePath . Si le chemin du profil est C :\Users\user\AppData\Local\Microsoft\Edge\User Data\Profile1, profile 1 est le nom du répertoire du profil.
3. Copiez le nom du répertoire du profil, par exemple Profil 1.

Dans Visual Studio :

1. Dans la barre d’outils, sélectionnez la liste déroulante en regard du bouton Démarrer , sélectionnez Parcourir avec...

2. Sélectionnez Ajouter...

3. Dans la boîte de dialogue Ajouter un programme, spécifiez les valeurs suivantes :

   1. Programme : C :\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
   2. Arguments : --profile-directory="Profile 1 », en remplaçant Le profil 1 par le nom du répertoire du profil que vous souhaitez utiliser
   3. Nom convivial : Microsoft Edge (Nom du profil), en remplaçant Nom du profil par le nom du profil que vous souhaitez utiliser

4. Sélectionnez OK.

5. Sélectionnez Définir par défaut, puis Annuler.

Pour démarrer une session de débogage et installer l’application dans Microsoft Teams :

1. Appuyez sur F5 ou sélectionnez Démarrer dans la barre d’outils
2. Attendez qu’une fenêtre de navigateur s’ouvre et que la boîte de dialogue d’installation de l’application s’affiche dans le client web Microsoft Teams. Si vous y êtes invité, entrez les informations d’identification de votre compte Microsoft 365.
3. Dans la boîte de dialogue d’installation de l’application, sélectionnez Ajouter

Pour tester l’extension de message :

1. Ouvrir une conversation Microsoft Teams nouvelle ou existante
2. Dans la zone de composition des messages, sélectionnez + pour ouvrir le sélecteur d’application
3. Dans la liste des applications, sélectionnez Produits Contoso pour ouvrir l’extension de message
4. Dans la zone de texte, entrez hello
5. Attendez que les résultats de la recherche s’affichent
6. Dans la liste des résultats, sélectionnez hello pour incorporer un carte dans la zone de rédaction du message

Revenez à Visual Studio et sélectionnez Arrêter dans la barre d’outils ou appuyez sur Maj + F5 pour arrêter la session de débogage.