Créer une application d’extension de message

Une extension de message permet aux utilisateurs d’interagir avec votre service web via des boutons et des formulaires dans le client Microsoft Teams. Les utilisateurs effectuer des recherches ou lancer des actions, dans un système externe à partir de la zone de rédaction de message, de la zone de commande ou directement d’un message. Vous pouvez renvoyer les résultats de cette interaction au client Teams sous la forme d’une carte enrichie.

Capture d’écran montrant l’extension de message conceptuel dans le client Teams.

Dans ce didacticiel, vous allez apprendre à créer une application d’extension de message basée sur la recherche, qui permet aux utilisateurs de rechercher des packages npm à partir du répertoire Node Gestionnaire de package (npm).

Familiarisez-vous avec l’application d’extension de message basée sur la recherche de l’une des manières suivantes :

  • Codespaces GitHub : l’instance codespace vous permet de faire l’expérience instantanée d’une application Teams. Il ouvre Visual Studio Code (VS Code), où l’extension Microsoft 365 Agents Toolkit (anciennement Teams Toolkit), le code source de l’application et toutes les dépendances sont pré-empaquetés pour vous.
  • Guide pas à pas : vous permet de configurer votre environnement de développement et de créer une application Teams à partir du début.

Avant de créer votre codespace, assurez-vous que vous disposez des prérequis suivants :

Conseil

GitHub Codespaces propose un plan gratuit jusqu’à une quantité fixe d’utilisation par mois. Si vous avez besoin de libérer de l’espace supplémentaire, accédez à github.com/codespaces et supprimez les codespaces dont vous n’avez plus besoin.

Pour créer une application d’extension de message basée sur la recherche avec GitHub Codespaces, procédez comme suit :

  1. Sélectionnez le bouton suivant pour ouvrir GitHub Codespaces.

    Ouvrir l’extension de message dans GitHub Codespaces

    Vous serez peut-être invité à vous connecter à un compte GitHub si ce n’est pas déjà fait.

  2. Sélectionnez Créer un codespace.

    La capture d’écran montre la page GitHub permettant de créer un codespace pour l’extension de message.

    La page Configuration de votre codespace s’affiche .

    Capture d’écran montrant l’espace de code qui crée votre extension de message.

    Agents Toolkit prépare l’extension de message pour vous et l’ouvre en VS Code dans le navigateur. L’icône Microsoft 365 Agents Toolkit s’affiche dans la barre d’activité de VS Code.

  3. Sélectionnez Connectez-vous à votre Microsoft 365 et Connectez-vous à Azure pour vous connecter avec votre compte Microsoft 365.

    La capture d’écran vous montre la fenêtre Agents Toolkit dans le navigateur pour vous connecter.

    Remarque

    Lorsque vous générez votre application, GitHub Codespaces la charge sur le client Teams dans un nouvel onglet. Si votre navigateur bloque les fenêtres ou onglets contextuels, vous devez autoriser les fenêtres contextuelles à s’ouvrir pour que votre application s’ouvre.

  4. Sélectionnez Aperçu de votre application Teams (F5) pour créer votre extension de message.

    La capture d’écran vous montre la fenêtre Agents Toolkit dans le navigateur avec votre extension de message.

    GitHub Codespaces crée votre application d’extension de message, la charge sur le client Teams et l’ouvre dans un onglet de navigateur distinct.

  5. Sélectionnez Ajouter pour installer votre extension de message dans Teams.

    Capture d’écran de la boîte de dialogue des détails de l’application pour ajouter l’application d’extension de message dans Teams.

  6. Sélectionnez Ouvrir pour ouvrir l’application dans l’étendue personnelle.

    Capture d’écran de la boîte de dialogue de sélection de l’étendue pour ouvrir l’application dans l’étendue personnelle.

    Vous avez créé l’extension de message basée sur la recherche et l’avez chargée dans le client Teams.

    Capture d’écran montrant votre extension de message chargée dans le client Teams.

Pour plus d’informations sur les extensions de message, consultez Extensions de message.

Si un bot vous intéresse, sélectionnez les éléments suivants :

Si vous souhaitez créer une application d’onglet de base, sélectionnez les éléments suivants :

Étape suivante

Voir aussi

Répertoire npm