Compartir a través de


Extensión de mensaje de compilación

Una extensión de mensaje permite a los usuarios interactuar con el servicio web a través de botones y formularios en el cliente de Microsoft Teams. Pueden buscar o iniciar acciones en un sistema externo del área de redactar mensajes, el cuadro de comandos o directamente desde un mensaje. Puede devolver los resultados de esa interacción al cliente de Teams en forma de una tarjeta con formato enriquecido.

Captura de pantalla que muestra la extensión de mensaje conceptual en el cliente de Teams.

En este tutorial, aprenderá a crear una aplicación de extensión de mensajes basada en búsqueda y la aplicación permite a los usuarios buscar paquetes npm desde el directorio del Administrador de paquetes de Node (npm).

Familiarícese con la aplicación de extensión de mensajes basada en búsqueda de una de las siguientes maneras:

  • GitHub Codespaces: la instancia de codespace permite experimentar una aplicación de Teams de forma instantánea. Se abre Visual Studio Code (VS Code), donde la extensión Teams Toolkit, el código fuente de la aplicación y todas las dependencias se empaquetan previamente automáticamente.
  • Guía paso a paso: permite configurar el entorno de desarrollo y compilar una aplicación de Teams desde el principio.

Antes de crear el espacio de código, asegúrese de que tiene los siguientes requisitos previos:

Sugerencia

GitHub Codespaces ofrece un plan gratuito de hasta una cantidad fija de uso al mes. Si necesita liberar más espacio, vaya a github.com/codespaces y elimine los espacios de código que ya no necesita.

Para crear una aplicación de extensión de mensaje basada en búsqueda con GitHub Codespaces, siga estos pasos:

  1. Seleccione el botón siguiente para abrir GitHub Codespaces.

    Abrir la extensión de mensaje en GitHub Codespaces

    Es posible que se le pida que inicie sesión en la cuenta de GitHub si aún no lo ha hecho.

  2. Seleccione Crear nuevo espacio de código.

    Captura de pantalla que muestra la página de GitHub para crear un espacio de código para la extensión de mensaje.

    Aparece la página Configuración del espacio de código .

    Captura de pantalla que muestra el espacio de código que crea la extensión de mensaje.

    Teams Toolkit prepara la extensión de mensaje automáticamente y la abre en VS Code en el explorador. El icono del kit de herramientas de Teams aparece en la barra de actividad de VS Code.

  3. Seleccione Iniciar sesión en Microsoft 365 e Iniciar sesión en Azure para iniciar sesión con su cuenta de Microsoft 365.

    Captura de pantalla que muestra la ventana Kit de herramientas de Teams en el explorador para iniciar sesión.

    Nota:

    Al compilar la aplicación, GitHub Codespaces la carga en el cliente de Teams en una nueva pestaña. Si el explorador bloquea las pestañas o ventanas emergentes, deberá permitir que se abran elementos emergentes para que la aplicación se abra.

  4. Seleccione Vista previa de la aplicación de Teams (F5) para compilar la extensión de mensaje.

    Captura de pantalla que muestra la ventana Kit de herramientas de Teams en el explorador con la extensión de mensaje.

    GitHub Codespaces compila la aplicación de extensión de mensajes, la carga en el cliente de Teams y se abre en una pestaña del explorador independiente.

    La aplicación de extensión de mensaje se carga en Teams.

  5. Una vez que aparezca el cuadro de diálogo de la aplicación en Teams, seleccione Agregar para instalar la extensión de mensaje en Teams.

    Captura de pantalla que muestra la extensión de mensaje cargada en el cliente de Teams.

    Ha creado correctamente la extensión de mensaje basada en búsqueda y se ha cargado en el cliente de Teams.

    Captura de pantalla que muestra la extensión de mensaje cargada en el cliente de Teams.

Para obtener más información sobre las extensiones de mensaje, vea Extensiones de mensaje.

Si un bot es lo que le interesa, seleccione lo siguiente:

Si desea crear una aplicación de pestaña básica, seleccione lo siguiente:

Paso siguiente

Vea también

directorio npm