Cree su primera aplicación de extensión de mensajes con JavaScript
Inicie Microsoft desarrollo de aplicaciones de Teams con su primera aplicación de Teams. Puede crear una aplicación de Teams de extensión de mensaje.
La aplicación tendrá una funcionalidad, que incluye su propia interfaz de usuario y experiencia de usuario:
En este tutorial, puede aprender:
- Cómo configurar un nuevo proyecto con Teams Toolkit.
- Cómo crear una aplicación de extensión de mensaje.
- Cómo implementar la aplicación.
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 Microsoft Visual Studio Code que crea un scaffolding de proyecto para la aplicación. Use la versión 4.0.0. | |
| Node.js | Entorno de tiempo de ejecución de JavaScript de back-end. Use la versión 14 o 16. | |
| Microsoft Teams | Microsoft Teams para colaborar con todos los usuarios con los que trabaje 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. | |
| Microsoft cuenta de desarrollador de 365 | Acceso a la cuenta de Teams con los permisos adecuados para instalar una aplicación. | |
| 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. | |
| React Developer Tools for Chrome OR React Developer Tools for Microsoft Edge | Extensión DevTools del explorador para la biblioteca de Código abierto React JavaScript. | |
| Explorador de Microsoft Graph | Microsoft Graph Explorer, una herramienta basada en explorador que permite ejecutar una consulta desde Microsoft datos de Graph. | |
| Portal para desarrolladores de Teams | Portal basado en web para configurar, administrar y distribuir la aplicación de Teams, incluida su organización o la tienda de Teams. |
Sugerencia
Si trabaja con Microsoft datos de Graph, debe obtener información y marcar el Microsoft Explorador de Graph. Esta herramienta basada en explorador permite consultar Microsoft Graph fuera de una aplicación.
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
El kit de herramientas de Teams ayuda a simplificar el proceso de desarrollo con herramientas para aprovisionar e implementar recursos en la nube para la aplicación, publicar en la tienda de Teams y mucho más.
Puede usar el kit de herramientas con Visual Studio Code o la CLI (interfaz de línea de comandos), denominada TeamsFx.
- Abra Visual Studio Code y seleccione la vista Extensiones (Ctrl+Mayús+X / ⌘⇧-X o Ver > extensiones).
- En el cuadro de búsqueda, escriba Kit de herramientas de Teams.
- Seleccione Instalar junto al kit de herramientas de Teams.
El icono del kit de herramientas de Teams aparece en la barra de actividad de Visual Studio Code después de instalarlo.
También puede encontrar el kit de herramientas de Teams en Visual Studio Code Marketplace.
Nota:
La versión más reciente del kit de herramientas de Teams es la 4.2.0.
Configuración del inquilino de desarrollo de Teams
Un inquilino es como un espacio o un contenedor para su organización en Teams, donde chatea, comparte archivos y ejecuta reuniones. Este espacio también es donde la aplicación se carga localmente y prueba. Vamos a comprobar si está listo para desarrollar con el inquilino.
Comprobación de la opción de instalación local
Después de crear la aplicación, debe cargarla en Teams sin distribuirla. Este proceso se conoce como instalación de prueba. Inicie sesión en la cuenta de Microsoft 365 para ver esta opción.
Nota:
La instalación local es necesaria para obtener una vista previa y probar aplicaciones en el entorno local de Teams. Si no está habilitada, no podrá obtener una vista previa y probar la aplicación en Teams localmente.
¿Ya tiene un inquilino y tiene acceso de administrador? ¡Vamos a comprobar si realmente lo haces!
Compruebe si puede transferir localmente aplicaciones en Teams:
En el cliente de Teams, seleccione el icono De la Tienda .
Seleccione Administrar las aplicaciones.
Seleccione Publicar una aplicación.
Busque la opción Cargar una aplicación personalizada. Si ve la opción, la instalación de prueba de aplicaciones está habilitada.
Nota:
Si no tiene 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, 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 y configura su cuenta. A continuación, vamos a configurar el entorno de desarrollo y empezar a compilar. Seleccione la aplicación que desea hacer primero.
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 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 aplicación de 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.
En este tutorial, aprenderá:
- 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.
Nota:
La interfaz de usuario Visual Studio Code que se muestra es de Mac. Puede variar según el sistema operativo, la versión del kit de herramientas y el entorno.
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 Crear una nueva aplicación de Teams para crear una aplicación mediante el kit de herramientas de Teams.
Asegúrese de que la extensión de mensaje está seleccionada como la funcionalidad que desea compilar en la aplicación.
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.
| Nombre de la carpeta | Contenido |
|---|---|
.fx/configs |
Archivos de configuración que el usuario puede personalizar para la aplicación teams. |
.fx/configs/config.<envName>.json |
Archivo de configuración para cada entorno. |
.fx/configs/azure.parameters.<envName>.json |
Archivo de parámetros para el aprovisionamiento de Azure BICEP para cada entorno. |
.fx/configs/projectSettings.json |
Configuración global del proyecto que se aplica a todos los entornos. |
.fx/configs/ngrok.yml |
Configuración de Ngrok |
.fx/states |
Aprovisione la salida generada por el kit de herramientas. El kit de herramientas crea esta carpeta después de aprovisionar recursos para la aplicación. |
.fx/states/state.<envName>.json |
Aprovisione el archivo de salida para cada entorno. |
.fx/states/<env>.userdata |
Datos de usuario confidenciales para la salida de aprovisionamiento para cada entorno. |
bot |
Código para el bot necesario en tiempo de ejecución. |
bot/messageExtensionBot.js |
Punto de entrada principal de la aplicación de extensión de mensaje. |
templates/appPackage |
Archivos de plantilla de manifiesto de aplicación y los iconos de aplicación, color.png y outline.png. |
templates/appPackage/manifest.template.json |
Manifiesto de aplicación para ejecutar la aplicación en un entorno local y remoto. |
templates/azure |
Archivos de plantilla de BICEP |
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 de la primera aplicación de extensión de mensaje
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.
Inicie 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 Microsoft cuenta 365.
Abrir Visual Studio Code.
Seleccione el icono kit de herramientas de
Teams en la barra lateral.Seleccione Iniciar sesión en M365.
Se abre el explorador web predeterminado para permitirle iniciar sesión en la cuenta.
Inicie sesión en su cuenta de Microsoft 365.
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 Microsoft 365. El kit de herramientas de Teams muestra la instalación local habilitada si la instalación local está habilitada para la cuenta 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
Seleccione F5 en Visual Studio Code para ejecutar la aplicación en modo de depuración.
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 instalación local está habilitada para la cuenta de Microsoft 365.
- Se instala la versión de Node.js compatible.
- Ngrok está instalado.
- El puerto requerido por la aplicación de bot está disponible.
- Instalar paquetes de npm
- Inicia Ngrok para crear un túnel HTTP.
- Registra la aplicación en Azure AD 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 descarga localmente 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.
Teams ejecuta la aplicación en un explorador web.
Inicie sesión con su cuenta de Microsoft 365, si se le solicita.
Seleccione Agregar para agregar la aplicación a su cuenta.
El kit de herramientas muestra un mensaje para indicar que la aplicación se agrega a Teams.
- Si seleccionaSi lo tienes, puedes probar la aplicación más adelante en la lista de aplicaciones de prueba.
- Si selecciona Probar, Teams carga la aplicación.
Seleccione Probar.
La aplicación Extensión de mensaje se carga en una aplicación de bot de chat.
A medida que las aplicaciones de extensión de mensajes 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.
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
Vamos a escribir una cadena de búsqueda en el cuadro de búsqueda, como "cli". Obtendrá una lista de los elementos coincidentes:
Seleccione uno de los resultados de la búsqueda. Se mostrará en el área de redacción para que pueda enviar el resultado al canal.
Seleccione las instrucciones de envío .
Ahora, ha aprendido a compilar y ejecutar una aplicación de extensión de mensaje básica.
Escenarios opcionales
Ha probado la característica de búsqueda de una aplicación de extensión de mensaje básica. Ahora, puedes probar otras funcionalidades de esta aplicación. Estos son escenarios opcionales en esta aplicación.
Para crear una tarjeta
Seleccione Crear tarjeta.
Escriba los detalles de la tarjeta como se muestra y seleccione Enviar.
Los detalles de la tarjeta aparecen en el área de redacción.
Seleccione el icono Enviar en el área de redacción.
La aplicación envía la tarjeta en el chat del bot.
Para abrir la aplicación desde el área de redacción
Elija una de las siguientes maneras de abrir la aplicación.
- Mediante
@mention:
Escriba
@your-app-nameen el área de comandos de la aplicación.La aplicación abre el cuadro de búsqueda y puede usarlo para ejecutar una consulta.
Escriba una cadena de búsqueda y seleccione una en el resultado de la búsqueda.
Se muestra en el área de comandos como una tarjeta.
Copie la tarjeta para pegarla en el área de redacción.
Envíe la tarjeta mediante el área de redacción.
- Usar el icono de tres puntos:
Inicie la extensión del mensaje desde tres puntos en la parte inferior del área de composición.
Seleccione la aplicación de extensión de mensaje.
La aplicación de extensión de mensaje se carga con las opciones para ejecutar una búsqueda y crear tarjetas adaptables.
Ejecución de la aplicación desde aplicaciones de prueba
Puede abrir una aplicación de Teams transferida localmente desde la lista de aplicaciones de prueba.
Seleccione el icono De la Tienda en la barra lateral de Teams.
Seleccione Administrar aplicaciones.
Seleccione el icono de tres puntos de la aplicación y, a continuación, seleccione Ver detalles. También puede copiar el vínculo a la aplicación y usarlo para abrir la aplicación.
Seleccione Abrir para cargar la aplicación y, a continuación, seleccione Probarla.
La aplicación se carga en Teams.
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 transferencia local de aplicaciones. Puede obtener más información sobre la instalación local en la sección Requisitos previos.
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 mensaje. El último paso es implementar la aplicación en Azure.
Vamos a implementar la primera aplicación con la funcionalidad Tab en Azure mediante el kit de herramientas de Teams.
Inicio de sesión en su cuenta de Azure
Use esta cuenta para acceder a la 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 pestaña.
Seleccione el icono kit de herramientas de
Teams en la barra lateral.Seleccione Iniciar sesión en Azure.
Sugerencia
Si tiene instalada la extensión cuenta de Azure 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.
Inicie sesión en su cuenta de Azure con sus credenciales.
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.
Ahora está listo para implementar la aplicación en Azure.
Enhorabuena, ha creado una aplicación de Teams. 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 pestaña.
¿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, etc.) en los recursos. 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 en la nube.
Seleccione una suscripción que se usará para los recursos de Azure.
Nota:
La aplicación se hospeda mediante recursos de Azure.
Un cuadro de diálogo le advierte de que se pueden incurrir en costos al ejecutar recursos en Azure.
Seleccione Aprovisionar.
El proceso de aprovisionamiento crea recursos en la nube de Azure. Puede tardar algún tiempo. Puede supervisar el progreso observando 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 la nube en el panel Implementación 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 configuración de inicio.
Seleccione Iniciar depuración (F5) para iniciar la aplicación desde Azure.
Seleccione Agregar.
El kit de herramientas muestra un mensaje para indicar que la aplicación se agrega a Teams.
- Si seleccionaSi lo tienes, puedes probar la aplicación más adelante en la lista de aplicaciones de prueba.
- Si selecciona Probar, Teams carga la aplicación.
La aplicación se carga en el sitio de Azure.
Seleccione Probar.
La aplicación Extensión de mensaje se carga en una aplicación de bot de chat.
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 front-end se implementará en una cuenta de Azure Storage configurada para hospedaje web estático.
¡Enhorabuena!
¡Lo has hecho!
Ha creado una aplicación de extensión de mensaje.
Ahora que ha aprendido a crear una aplicación básica, puede pasar a crear aplicaciones más complejas. Para empezar, pruebe a agregar funcionalidades a las aplicaciones existentes.
Para agregar funcionalidades a la aplicación existente:
Seleccione Agregar característica en la sección Desarrollo de la barra lateral del kit de herramientas de Teams.
Seleccione la funcionalidad que desea agregar a la aplicación.
Y eso es todo. Teams Toolkit agrega el scaffolding para la nueva funcionalidad a la estructura de directorios de la aplicación. Siga los procedimientos para compilar e implementar la aplicación, y la aplicación tendrá varias funcionalidades.
Ha completado el tutorial para compilar la aplicación de extensión de mensajería con JavaScript.
¿Tiene algún problema con esta sección? Si es así, envíenos sus comentarios para que podamos mejorarla.
Comentarios
Enviar y ver comentarios de