Compilación de un complemento de extensión de mensaje basado en bots para Copilot para Microsoft 365
Nota:
- El complemento de extensión de mensaje de búsqueda basado en bots está disponible en versión preliminar para desarrolladores públicos.
- Solo se puede ampliar la extensión de mensaje de búsqueda basada en bots como complemento en Microsoft Copilot para Microsoft 365.
- Los complementos para Microsoft Copilot para Microsoft 365 están en versión preliminar y solo funcionan en M365 Chat en Microsoft Teams.
Inicie el desarrollo de aplicaciones de Microsoft Teams con su primera aplicación de Teams. Puede crear un complemento de extensión de mensaje basado en bots con Teams mediante JavaScript.
En este tutorial, aprenderá lo siguiente:
- Cómo configurar un nuevo proyecto con Teams Toolkit.
- Cómo crear un complemento de extensión de mensaje basado en bots.
- Cómo implementar la aplicación.
- Desencadene el complemento de extensión de mensaje basado en bots en M365 Chat.
Esta guía paso a paso le ayuda a crear un complemento de extensión de mensajes basado en bots con Teams Toolkit. Verá la siguiente salida después de completar esta guía:
Requisitos previos
Asegúrese de instalar las siguientes herramientas para compilar e implementar las aplicaciones.
| Instalar | Para usar... | |
|---|---|---|
| Required | ||
| Visual Studio Code | JavaScript o TypeScript, entornos de compilación. Use la versión más reciente. | |
| Kit de herramientas de Teams | Extensión de Microsoft Visual Studio Code que crea un scaffolding de proyecto para la aplicación. Use la versión preliminar. | |
| Node.js | Entorno de tiempo de ejecución de JavaScript de back-end. Para obtener más información, vea Node.js tabla de compatibilidad de versiones para el tipo de proyecto. | |
| Microsoft Teams | Microsoft Teams para colaborar con todos los usuarios con los que trabaje a través de aplicaciones para chat, reuniones y llamadas a todos en un solo lugar. | |
| Microsoft Edge (recomendado) o Google Chrome | Un explorador con herramientas de desarrollo. | |
| Cuenta de desarrollador de Microsoft 365 | Acceso a la cuenta de Teams con los permisos adecuados para instalar una aplicación. | |
| Microsoft Copilot para Microsoft 365 | Copilot para Microsoft 365 está en versión preliminar pública. Asegúrese de que Copilot para Microsoft 365 está disponible para su organización. Tiene dos maneras de obtener un entorno de desarrollador para Copilot: - Un espacio aislado de Microsoft 365 inquilino con Copilot (disponible en versión preliminar limitada a través de la pertenencia a TAP). - Un entorno de producción de clientes empresariales con licencias de Microsoft Copilot para Microsoft 365. |
|
| Optional | ||
| Herramientas de Azure para Visual Studio Code y la CLI de Azure | Herramientas de Azure para acceder a datos almacenados o para implementar un back-end basado en la nube para la aplicación de Teams en Azure. | |
| Herramientas de desarrollo de React para Chrome O React Developer Tools para Microsoft Edge | Extensión DevTools del explorador para la biblioteca de JavaScript de React de código abierto. |
Preparación del entorno de desarrollo
Después de instalar las herramientas necesarias, configure el entorno de desarrollo.
Instalación del kit de herramientas de Teams
Nota:
La compatibilidad del kit de herramientas de Teams con la extensión de mensajes basada en bots solo está disponible en la versión preliminar del kit de herramientas de Teams. Antes de empezar, asegúrese de que ha instalado una versión preliminar del kit de herramientas de Teams.
Microsoft Teams Toolkit ayuda a simplificar el proceso de desarrollo con herramientas para aprovisionar e implementar recursos en la nube para la aplicación y publicarlos en la Tienda Teams.
Puede usar Teams Toolkit con Visual Studio Code. Para instalar Teams Toolkit, siga estos pasos:
Abra Visual Studio Code y seleccione Extensiones (Ctrl+Mayús+X / ⌘⇧-X o Ver > extensiones).
En el cuadro de búsqueda, escriba Kit de herramientas de Teams.
En la página Kit de herramientas de Teams, seleccione la flecha desplegable situada junto a Instalar.
Seleccione Instalar versión preliminar.
El icono del kit de herramientas de
Teams aparece en la barra de actividad de Visual Studio Code después de instalarlo.
Configuración del inquilino de desarrollo de Teams
Un inquilino es un espacio o un contenedor para su organización en Teams, donde chatea, comparte archivos y ejecuta reuniones. Este espacio también es donde carga y prueba la aplicación. Vamos a comprobar si está listo para desarrollar con el inquilino.
Comprobación de la opción cargar una aplicación
Después de crear la aplicación, debe cargarla en Teams sin distribuirla. Este proceso se conoce como carga de aplicaciones. Inicie sesión en su cuenta de Microsoft 365 para ver esta opción.
Nota:
Asegúrese de habilitar la carga de aplicaciones en la versión preliminar y las aplicaciones de prueba en el entorno local de Teams.
La carga de aplicaciones personalizadas está habilitada a través de un inquilino y el administrador debe conceder acceso para cargar una aplicación personalizada. ¿Ya tiene un inquilino y un acceso de administrador? ¡Vamos a comprobar si realmente lo haces!
Compruebe si puede cargar aplicaciones en Teams:
En el cliente de Teams, seleccione el icono Aplicaciones .
Seleccione Administrar las aplicaciones.
Seleccione Cargar una aplicación.
Busque la opción Cargar una aplicación personalizada. Si la opción está visible, ha habilitado la carga de aplicaciones personalizadas.
Nota:
Póngase en contacto con el administrador de Teams si no encuentra la opción de cargar una aplicación personalizada.
Creación de un inquilino para desarrolladores de Teams gratuito (opcional)
Si no tiene una cuenta de desarrollador de Teams, puede obtenerla de forma gratuita. ¡Únete al programa para desarrolladores de Microsoft 365!
Seleccione Unirse ahora y siga las instrucciones en pantalla.
En la pantalla de bienvenida, seleccione Configurar suscripción A5.
Configure su cuenta de administrador. Cuando haya terminado, aparecerá la siguiente pantalla.
Inicie sesión en Teams con la cuenta de administrador que acaba de configurar. Compruebe que tiene la opción Cargar una aplicación personalizada en Teams.
Obtener una cuenta gratuita de Azure
Si desea hospedar la aplicación o acceder a los recursos en Azure, debe tener una suscripción a Azure. Cree una cuenta gratuita antes de empezar.
Ahora tiene todas las herramientas para configurar su cuenta. A continuación, vamos a configurar el entorno de desarrollo y empezar a compilar. Seleccione primero la aplicación que desea crear.
Creación del área de trabajo del proyecto para la aplicación de extensión de mensajes
Ha creado la aplicación de bot. Ahora, vamos a crear la primera aplicación de extensión de mensaje.
La funcionalidad de extensión de mensaje le permite interactuar con un servicio web. Use el área de redacción, el cuadro de comandos o una mensajería en el cliente de Teams para buscar e iniciar acciones en un sistema externo.
Hay dos tipos de extensiones de mensaje de Teams:
- Comandos de búsqueda: puede buscar en sistemas externos. A continuación, puede insertar sus resultados en un mensaje en forma de tarjeta.
- Comandos de acción: puede presentar a los usuarios un elemento emergente modal para recopilar o mostrar información. A continuación, puede procesar su interacción y enviar información a Teams.
Vamos a crear una extensión de mensaje con un comando de búsqueda. Úselo para buscar datos externos e insertar los resultados en un mensaje dentro del cliente de Teams.
Como ya ha preparado para crear estas aplicaciones, puede configurar un nuevo proyecto de Teams para crear la aplicación de extensión de mensajes.
Nota:
- Las extensiones de mensaje se basan en bots para proporcionar un diálogo entre el usuario y el código.
- Solo se puede ampliar la extensión de mensaje de búsqueda basada en bots como complemento para Copilot para Microsoft 365.
En este tutorial, aprenderá lo siguiente:
- Cómo configurar un nuevo proyecto de extensión de mensaje con Teams Toolkit.
- Acerca de la estructura de directorios del proyecto de aplicación.
Creación del área de trabajo del proyecto de extensión de mensaje
Si se cumplen los requisitos previos, comencemos.
Para crear un complemento de extensión de mensaje basado en bots, siga estos pasos:
Abra Visual Studio Code.
Seleccione el icono Kit de herramientas de
Teams en la barra de actividad de Visual Studio Code.Seleccione Crear una nueva aplicación.
Seleccione Extensión de mensaje para crear una aplicación mediante el kit de herramientas de Teams.
Seleccione Resultados de búsqueda personalizados.
Seleccione Iniciar con un bot.
Seleccione JavaScript como lenguaje de programación.
Seleccione Carpeta predeterminada para almacenar la carpeta raíz del proyecto en la ubicación predeterminada.
También puede cambiar la ubicación predeterminada mediante los pasos siguientes:
Seleccione Examinar.
Seleccione la ubicación del área de trabajo del proyecto.
Seleccione seleccionar carpeta.
Escriba un nombre adecuado para la aplicación. Seleccione Introducir.
Teams Toolkit crea la aplicación en unos segundos.
Una vez creada la aplicación, el kit de herramientas de Teams muestra el siguiente mensaje:
Puede seleccionar Depuración local para obtener una vista previa del proyecto.
Resumen rápido de la creación de una aplicación de Teams.
Vea este breve resumen para crear una aplicación de Teams.
Realice un recorrido por el código fuente de la aplicación de extensión de mensajes.
Una extensión de mensaje usa Bot Framework. Se usa para interactuar con el servicio a través de una conversación. Una vez realizado el scaffolding, vea los directorios y archivos del proyecto en el área Explorador de Visual Studio Code.
| Carpeta o archivo | Contenido |
|---|---|
teamsapp.yml |
El archivo de proyecto principal describe la configuración de la aplicación y define el conjunto de acciones que se van a ejecutar en cada fase del ciclo de vida. |
teamsapp.local.yml |
Esto invalida teamsapp.yml con acciones que habilitan la ejecución y depuración locales. |
.vscode/ |
Archivos de VS Code para la depuración local. |
src/ |
Código fuente de la aplicación de búsqueda. |
appPackage/ |
Plantillas para el manifiesto de aplicación de Teams. |
infra/ |
Plantillas para aprovisionar recursos de Azure. |
src/searchApp.js |
Controla la lógica de negocios de esta plantilla de aplicación para consultar el registro npm y devolver la lista de resultados. Para obtener más información, vea Guía de Visual Studio Code v5 del kit de herramientas de Teams para comprender cómo funciona Teams Toolkit. |
src/index.js |
index.js se usa para configurar y configurar la extensión de mensaje. Para obtener más información, vea Guía de Visual Studio Code v5 del kit de herramientas de Teams para comprender cómo funciona Teams Toolkit. |
Sugerencia
Familiarícese con los bots y la extensión de mensajes fuera de Teams antes de integrar la aplicación en Teams.
Compilación y ejecución del primer complemento de extensión de mensaje basado en bots
Después de configurar el área de trabajo del proyecto con Teams Toolkit, compile el proyecto. Debe iniciar sesión en su cuenta de Microsoft 365.
Inicio de sesión en su cuenta de Microsoft 365
Use esta cuenta para iniciar sesión en Teams. Si usa un inquilino del programa para desarrolladores de Microsoft 365, la cuenta de administrador que configuró al registrarse es la cuenta de Microsoft 365.
Abra Visual Studio Code.
Seleccione el icono kit de herramientas de
Teams en la barra lateral.Seleccione Iniciar sesión en Microsoft 365 con sus credenciales.
Se abre el explorador web predeterminado para permitirle iniciar sesión en la cuenta.
Cierre el explorador cuando se le solicite y vuelva a Visual Studio Code.
Vuelva al kit de herramientas de Teams en Visual Studio Code.
En la sección CUENTAS de la barra lateral se muestra el nombre de la cuenta de Microsoft 365. El kit de herramientas de Teams muestra la instalación local habilitada si la carga de aplicaciones personalizada está habilitada para la cuenta de Microsoft 365.
Ahora ya está listo para compilar la aplicación y ejecutarla localmente.
Compilación y ejecución de la aplicación en el entorno local
Una extensión de mensaje le permite interactuar con un servicio web. Aprovecha la característica de mensajería y la comunicación segura de un bot. La aplicación de extensión de mensaje se agrega a un servicio web registrado como bot.
Compilación y ejecución de la aplicación localmente
En el panel izquierdo, seleccione Ejecutar y depurar (Ctrl+Mayús+D).
Seleccione Depurar en Teams (Edge) o Depurar en Teams (Chrome). Teams Toolkit inicia la aplicación en Teams mediante un explorador web.
Seleccione F5 para compilar y ejecutar la aplicación localmente.
Nota:
Si el kit de herramientas de Teams no puede comprobar un requisito previo determinado, se le pedirá que lo compruebe.
Obtenga información sobre lo que ocurre al ejecutar la aplicación localmente en el depurador.
Al seleccionar F5, el kit de herramientas de Teams:
- Comprueba todos los siguientes requisitos previos:
- Ha iniciado sesión con una cuenta de Microsoft 365.
- La carga de la aplicación personalizada está habilitada para su cuenta de Microsoft 365.
- Se instala la versión de Node.js compatible.
- El puerto requerido por la aplicación de bot está disponible.
- Instalar paquetes de npm
- Inicia Dev Tunnel para crear un túnel HTTP.
- Registra la aplicación en Microsoft Entra ID y configura la aplicación.
- Registra la aplicación bot en Bot Framework y configura la aplicación.
- Registra la aplicación en el Portal para desarrolladores de Teams y configura la aplicación.
- Inicia la aplicación de extensión de mensaje hospedada localmente.
- Inicia Teams en un explorador web y carga la aplicación teams.
Nota:
Al ejecutar la aplicación por primera vez, se descargan todas las dependencias y se compila la aplicación. Se abre una ventana del explorador cuando se completa la compilación. Este proceso puede tardar entre tres y cinco minutos en completarse.
Seleccione Agregar. La aplicación está instalada en Teams.
Como las extensiones de mensaje se basan en bots para habilitar la comunicación entre el usuario y el servicio web, la aplicación se carga en una característica de chat de un bot.
- Si ha creado una aplicación de bot antes de crear la aplicación de extensión de mensaje, puede ver que se carga en la misma aplicación de bot que ha creado. Los mensajes de chat anteriores son visibles.
- Si creó primero una extensión de mensaje, la aplicación se cargará en cualquier chat que esté abierto en Teams.
Nota:
Si desea ampliar la aplicación a Outlook y Microsoft 365, puede elegir depurar la aplicación con Outlook y Microsoft 365 en la lista desplegable EJECUTAR Y DEPURAR en Visual Studio Code.
Probar la aplicación
La primera vez que se carga la aplicación, la aplicación de extensión de mensaje está abierta para que la pruebe. Esta aplicación de ejemplo le permite buscar paquetes npm de código abierto desde el registro de software.
Para ejecutar una consulta de búsqueda
Vaya a un chat de Teams y seleccione Acciones y aplicaciones.
En el menú desplegable extensión de mensaje, escriba el nombre de la extensión de mensaje en el cuadro de búsqueda.
Seleccione la extensión de mensaje y escriba la consulta de búsqueda.
Seleccione un producto de la lista. Teams desplegó el producto en una tarjeta adaptable en el área redacción del mensaje.
Seleccione Enviar. Se envía la tarjeta adaptable.
Obtenga información sobre cómo solucionar problemas si la aplicación no se ejecuta localmente.
Para ejecutar la aplicación en Teams, debe tener una cuenta de desarrollo de Microsoft 365 que permita la carga de aplicaciones personalizadas. Puede obtener más información sobre la carga de aplicaciones personalizadas en la sección requisitos previos.
Desencadenar el complemento de extensión de mensaje basado en bots en M365 Chat
Para desencadenar la extensión de mensaje en M365 Chat, siga estos pasos:
En el panel izquierdo, seleccione Kit de herramientas de Teams.
En el panel izquierdo, seleccione Ejecutar y depurar (Ctrl+Mayús+D).
Seleccione Depurar en Copilot (Edge) o Depurar en Copilot (Chrome).
Seleccione F5 para compilar y ejecutar la aplicación en M365 Chat.
Vaya aAplicaciones de Microsoft Teams>.
Busque M365 Chat y abra la aplicación.
Seleccione Complementos.
En la lista de complementos, active el botón de alternancia de la aplicación.
Desde el área de redacción del mensaje, envíe un mensaje a M365 Chat para buscar información del paquete npm en Teams y Copilot. Por ejemplo, busque la información del paquete npm en teamsfx-react en npm-searchlocal.
Nota:
Es posible que este mensaje no siempre haga que M365 Chat incluya una respuesta de la extensión de mensaje. Si sucede, pruebe con otros mensajes o deje sus comentarios desanlando la respuesta de chat de M365 y deje un mensaje.
Implementación de la primera aplicación de Teams
Ha aprendido a crear, compilar y ejecutar aplicaciones de Teams con funcionalidades de extensión de mensajes. El último paso es implementar la aplicación en Azure.
Vamos a implementar la primera aplicación de extensión de mensaje en Azure mediante el kit de herramientas de Teams.
Inicio de sesión en su cuenta de Azure
Use esta cuenta para acceder a Microsoft Azure Portal y aprovisionar nuevos recursos en la nube para admitir la aplicación.
Abrir Visual Studio Code.
Abra la carpeta del proyecto en la que creó la aplicación de extensión de mensaje.
Seleccione el icono kit de herramientas de
Teams en la barra lateral.Seleccione Iniciar sesión en Azure con sus credenciales.
Sugerencia
Si tiene instalada la extensión AZURE ACCOUNT y usa la misma cuenta, puede omitir este paso. Use la misma cuenta que usa en otras extensiones.
Se abre el explorador web predeterminado para permitirle iniciar sesión en la cuenta.
Cierre el explorador cuando se le solicite y vuelva a Visual Studio Code.
La sección ACCOUNTS de la barra lateral muestra las dos cuentas por separado. También muestra el número de suscripciones de Azure utilizables disponibles. Asegúrese de que tiene al menos una suscripción de Azure utilizable disponible. Si no es así, cierre la sesión y use otra cuenta.
Enhorabuena, ha iniciado sesión en su cuenta de Azure. Ahora vamos a continuar y aprender a implementar una de las aplicaciones en Azure mediante el kit de herramientas de Teams.
Implementar la aplicación en Azure
La implementación consta de dos pasos. En primer lugar, se crean los recursos en la nube necesarios (también conocidos como aprovisionamiento). A continuación, el código de la aplicación se copia en los recursos en la nube creados. En este tutorial, implementará la aplicación de extensión de mensaje.
¿Cuál es la diferencia entre Aprovisionar e Implementar?
El paso Aprovisionar crea recursos en Azure y Microsoft 365 para la aplicación, pero no se copia ningún código (HTML, CSS, JavaScript etcetera). El paso Implementar copia el código de la aplicación en los recursos que creó durante el paso de aprovisionamiento. Es habitual implementar varias veces sin aprovisionar nuevos recursos. Dado que el paso de aprovisionamiento puede tardar algún tiempo en completarse, es independiente del paso de implementación.
Seleccione icono del Kit de herramientas de Teams en la barra lateral de Visual Studio Code.
Seleccione Aprovisionar.
Seleccione una suscripción que se usará para los recursos de Azure.
La aplicación se hospeda mediante recursos de Azure. Un cuadro de diálogo le advierte de que es posible que se produzcan costos al ejecutar recursos en Azure.
Seleccione Aprovisionar.
El proceso de aprovisionamiento crea recursos en la nube de Azure. Puede tardar algún tiempo. Para supervisar el progreso, vea los diálogos en la esquina inferior derecha. Después de unos minutos, verá el siguiente aviso:
Si lo desea, puede ver los recursos aprovisionados. En este tutorial, no es necesario ver los recursos.
El recurso aprovisionado aparece en la sección ENTORNO .
Seleccione Implementar en el panel CICLO DE VIDA una vez completado el aprovisionamiento.
Al igual que con el aprovisionamiento, la implementación tarda algún tiempo. Para supervisar el proceso, vea los diálogos en la esquina inferior derecha. Después de unos minutos, verá un aviso de finalización.
Ahora, puede usar el mismo proceso para implementar las aplicaciones Bot y Message Extension en Azure.
Ejecución de la aplicación implementada
Una vez completados los pasos de aprovisionamiento e implementación:
Abra el panel de depuración (Ctrl+Mayús+D / ⌘⇧-D o Ver > ejecución) desde Visual Studio Code.
Seleccione Iniciar remoto (Edge) en la lista desplegable de configuración de inicio.
Seleccione Iniciar depuración (F5) para iniciar la aplicación desde Azure.
Seleccione Agregar.
Obtenga información sobre lo que sucede cuando implementó la aplicación en Azure.
Antes de la implementación, la aplicación se ejecuta de forma local:
- El back-end se ejecuta con Azure Functions Core Tools.
- El punto de conexión HTTP de la aplicación, donde Microsoft Teams carga la aplicación, se ejecuta de forma local.
La implementación es un proceso de dos pasos. Aprovisione los recursos en una suscripción de Azure activa y, a continuación, implemente o cargue el código de back-end y front-end de la aplicación en Azure.
- El back-end, si está configurado, usa varios servicios de Azure, incluidos Azure App Service y Azure Storage.
- La aplicación de front-end se implementa en una cuenta de Azure Storage configurada para el hospedaje web estático.
Enhorabuena.
Ha creado una extensión de mensaje basada en bots y ha ampliado la extensión de mensaje como complemento en M365 Chat.
¿Tiene algún problema con esta sección? Si es así, envíenos sus comentarios para que podamos mejorarla.
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de