Creación de un bot de flujo de trabajo de Teams
El bot de flujo de trabajo permite a los usuarios interactuar con una tarjeta adaptable habilitada por la característica de controlador de acciones tarjeta adaptable en la aplicación de bot de flujo de trabajo. Al responder a la acción de tarjeta adaptable desencadenada, se completa un flujo de trabajo secuencial. Cuando se obtiene una tarjeta adaptable, proporciona uno o varios botones en la tarjeta para la entrada. También puede llamar a una API y, a continuación, enviar otra tarjeta adaptable en la conversación en respuesta a la acción de la tarjeta. En este tutorial, aprenderá lo siguiente:
- Cómo crear un bot de flujo de trabajo con Teams Toolkit.
- Acerca de la estructura de directorios de la aplicación.
Puede ver la siguiente salida:
Requisitos previos
Esta es una lista de las herramientas que necesita 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 más reciente. | |
| 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 trabaja a través de aplicaciones para chat, reuniones, llamadas y todo 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. |
Nota:
La guía se prueba en la versión más reciente del kit de herramientas de Teams y en las versiones 18 y 20 de Nodejs. Los pasos de esta guía pueden funcionar con otras versiones, pero no se han probado.
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
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 o una interfaz de línea de comandos denominada CLI de TeamsFx.
Abra Visual Studio Code y seleccione Extensiones (Ctrl+Mayús+X o Ver>extensiones).
En el cuadro de búsqueda, escriba Kit de herramientas de Teams.
Seleccione Instalar.
El icono del kit de herramientas de
Teams aparece en la barra de actividad de Visual Studio Code.
También puede instalar Teams Toolkit desde Visual Studio Code Marketplace.
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 personalizada, debe cargarla en Teams con la opción Cargar una aplicación personalizada . Inicie sesión en su cuenta de Microsoft 365 para comprobar si esta opción está habilitada.
Los pasos siguientes le ayudan a comprobar 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, puede cargar aplicaciones personalizadas.
Nota:
Si no encuentra la opción de cargar una aplicación personalizada, póngase en contacto con el administrador de Teams.
Creación de un inquilino para desarrolladores de Teams gratuito (opcional)
Si no tiene una cuenta de desarrollador de Teams, únase 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. Una vez finalizada, aparece 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.
Compilación de un bot de flujo de trabajo
Para compilar un bot de flujo de trabajo mediante Visual Studio Code, siga estos pasos:
Abrir 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 Bot para crear un nuevo proyecto de bot.
Seleccione Flujo de trabajo secuencial en chat como la característica de aplicación que desea compilar en la aplicación.
Seleccione TypeScript como lenguaje de programación.
Seleccione Carpeta predeterminada para almacenar la carpeta raíz del proyecto en la ubicación predeterminada.
Nota:
También puede cambiar la ubicación predeterminada seleccionando Examinar...
Escriba un nombre adecuado para la aplicación.
Seleccione Introducir.
El bot de flujo de trabajo se crea en unos segundos y puede ver el scaffolding.
Seleccione el icono Ejecutar y depurar
en la barra de actividad de Visual Studio Code.Seleccione Depurar en Teams (Edge) o Depurar en Teams (Chrome) en la lista desplegable.
Seleccione Iniciar depuración.
Seleccione Agregar o use el menú desplegable para agregar la aplicación de bot de flujo de trabajo a un equipo, chat o reunión.
Realizar un recorrido por el código fuente
Teams Toolkit proporciona componentes para crear una aplicación. Después de crear el proyecto, puede ver las carpetas y los archivos del proyecto en el área Explorador de Visual Studio Code para JavaScript/TypeScript.
El bot creado es un proyecto de TeamsFx normal que contiene las siguientes carpetas:
| 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. |
env/ |
Los pares nombre/valor se almacenan en archivos de entorno y los usan teamsapp.yml para personalizar las reglas de aprovisionamiento e implementación. |
.vscode/ |
Archivos VSCode para la depuración. |
appPackage/ |
Plantillas para el manifiesto de aplicación de Teams. |
infra/ |
Plantillas para aprovisionar recursos de Azure. |
src/ |
Código fuente de la aplicación. |
src/index.js |
Punto de entrada de la aplicación y express controladores para el bot de flujo de trabajo. |
src/teamsBot.js |
Un controlador de actividad de teams vacío para la personalización de bots. |
src/commands/helloworldCommandHandler.js |
Implementación que controla la respuesta a un comando de chat. |
src/adaptiveCards/helloworldCommandResponse.json |
Define la tarjeta adaptable (UI) que se muestra en respuesta a un comando de chat. |
src/adaptiveCards/doStuffActionResponse.json |
Una tarjeta adaptable generada que se envía a Teams para la respuesta de la acción "doStuff". |
src/cardActions/doStuffActionHandler.js |
Implementa el controlador para el doStuff botón que se muestra en la tarjeta adaptable. |
Interacción con el bot de flujo de trabajo
Puede interactuar con el bot en Teams mediante el envío de un comando helloWorld.
Recibirá la siguiente respuesta de comando en la tarjeta adaptable:
A continuación, puede seleccionar el botón DoStuff para invocar la acción, que responde con la siguiente tarjeta adaptable actualizada:
Desafío completo
¿Se te ocurrió algo como esto?
¡Enhorabuena!
Ha completado el tutorial para empezar a trabajar con el bot de flujo de trabajo para Microsoft Teams.
¿Tiene algún problema con esta sección? Si es así, envíenos sus comentarios para que podamos mejorarla.