Compilación de la primera aplicación con Node.js
Inicie el desarrollo de aplicaciones de Microsoft Teams mediante la creación de la primera aplicación con una pestaña, un bot y una funcionalidad de extensión de mensaje.
Esta aplicación tiene todas las funcionalidades y cada una tiene su propia interfaz de usuario y experiencia de usuario:
En este tutorial, aprenderá lo siguiente:
- Cómo configurar un nuevo proyecto mediante herramientas de línea de comandos.
- Cómo crear tres aplicaciones con una funcionalidad diferente cada una: pestaña, bot y extensión de mensaje.
- Cómo implementar la aplicación desde el Portal para desarrolladores.
Requisitos previos
Esta es una lista de herramientas que necesitará instalar para compilar e implementar una aplicación de Teams.
| Instalar | Para usar... | |
|---|---|---|
| Required | ||
| Node.js y NPM | 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. | |
| ngrok | Las características de aplicaciones de Teams (bots conversacionales, extensiones de mensajes y webhooks entrantes) requieren conexiones entrantes. Un túnel conecta el sistema de desarrollo a Teams. No es necesario para las aplicaciones que solo incluyen pestañas. Este paquete se instala en el directorio del proyecto (mediante npm devDependencies). |
|
| Microsoft Edge (recomendado) o Google Chrome | Un explorador con herramientas de desarrollo. | |
| Visual Studio Code | Entornos de compilación de JavaScript, TypeScript o SharePoint Framework (SPFx). Use la versión 1.55 o posterior. | |
| Git | Git para usar el repositorio de aplicaciones de Node.js de ejemplo de GitHub. | |
| trago | Kit de herramientas de JavaScript de código abierto. Instale la versión 4.0.0 o posterior. | |
| 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. | |
| Optional | ||
| Herramientas de Azure para Visual Studio Code y la CLI de Microsoft 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 | Herramientas del explorador para el desarrollo de pestañas con JavaScript. | |
| Explorador de Microsoft Graph | Microsoft Graph Explorer, una herramienta basada en explorador que permite ejecutar una consulta desde datos de Microsoft Graph. | |
| Portal para desarrolladores de Teams | Portal basado en web para configurar, administrar y distribuir la aplicación de Teams, incluidos su organización o Microsoft Teams Store. | |
| Extensiones de Visual Studio Code | ||
| Azure Functions Core Tools | Componentes de back-end localmente durante una ejecución de depuración local, incluidos los asistentes de autenticación necesarios al ejecutar los servicios en Azure. Se instala en el directorio del proyecto (mediante npm devDependencies). |
|
| SDK de .NET | Enlaces personalizados para la depuración local y las implementaciones de aplicaciones de Azure Functions. Si no ha instalado el SDK de .NET 3.1 (o posterior) globalmente, se puede instalar la versión portátil. |
Comprobación de los números de versión de las herramientas instaladas
Use los siguientes comandos para comprobar que las versiones instaladas para las herramientas son las necesarias.
Nota:
Use la ventana de terminal con la que se sienta más cómodo en su plataforma. En estos ejemplos se usa Git Bash (que se incluye en la instalación de Git), pero estos scripts se pueden ejecutar en la mayoría de las plataformas.
Para comprobar los números de versión de las herramientas instaladas:
Abra una ventana de terminal.
Ejecute el siguiente comando para comprobar la versión instalada en el
gitequipo:$ git --versionEjemplo de salida:
git version 2.19.0.windows.1Ejecute el siguiente comando para comprobar la
node.jsversión:$ node -vEjemplo de salida:
v8.9.3Compruebe el número de versión de
npm:$ npm -vEjemplo de salida:
5.5.1Compruebe el número de versión de
gulp:$ gulp -vEjemplo de salida:
CLI version 2.3.0Local version 4.0.2Ejecute el siguiente comando para comprobar el número de versión de Visual Studio Code:
code --versionEjemplo de salida:
1.28.2929bacba01ef658b873545e26034d1a8067445e9
Puede usar una versión diferente de estas aplicaciones sin ningún problema.
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 carga y prueba la aplicación personalizada.
Vamos a comprobar si está listo para desarrollar con el inquilino.
Habilitar la opción de carga de aplicaciones personalizadas
Después de crear la aplicación, debe cargarla en Teams sin distribuirla. Este proceso se conoce como carga de aplicaciones personalizada. Inicie sesión en su cuenta de Microsoft 365 para ver esta opción.
Nota:
La carga de aplicaciones personalizada 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 cargar una aplicación personalizada en Teams:
En el cliente de Teams, seleccione El icono de la Tienda .
Seleccione Administrar las aplicaciones.
Busque la opción Cargar una aplicación personalizada. Si ve la opción , la carga de aplicaciones personalizada está habilitada.
Nota:
Si Teams no muestra 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
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 sus cuentas. A continuación, vamos a configurar el entorno de desarrollo y empezar a compilar.
Puede seguir usando esta ventana de terminal para ejecutar los comandos que se indican a continuación en este tutorial.
Descargar el ejemplo
Para este tutorial, use el ejemplo Hello, World! para empezar. Puede descargarlo y clonarlo desde GitHub.
Para usar Git Bash para clonar el repositorio de ejemplo:
Abra una ventana de terminal.
Ejecute el siguiente comando para clonar el repositorio de ejemplo en el equipo:
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
Sugerencia
Puede bifurcar este repositorio si desea modificar y comprobar los cambios en el repositorio de GitHub para obtener una referencia futura.
Compilación de la primera aplicación de Node.js
Después de clonar el repositorio para Node.js aplicación de ejemplo, puede compilar y probar la aplicación en el entorno local.
En esta página, aprenderá a:
Compilar y ejecutar el ejemplo
Una vez clonado el repositorio, puede compilar la aplicación de ejemplo.
Abra una ventana de terminal.
Ejecute el comando change directory en el terminal para cambiar al directorio de la aplicación de ejemplo:
cd Microsoft-Teams-Samples/samples/app-hello-world/nodejs/Instale todas las dependencias mediante el siguiente comando:
npm installDebería ver un montón de dependencias instaladas.
Ejecute la aplicación con el siguiente comando una vez completada la instalación:
npm startCuando se inicia la aplicación Hello World, se muestra
App started listening on port 3333en la ventana del terminal.Nota:
Si ve un número de puerto diferente en el mensaje anterior, se debe a que tiene establecida una variable de entorno PORT. Puede seguir usando ese puerto o cambiar la variable de entorno a 3333.
Abra una ventana del explorador y use las siguientes direcciones URL para comprobar que se cargan todas las direcciones URL de la aplicación Hello World:
http://localhost:3333
http://localhost:3333/hello
http://localhost:3333/first
http://localhost:3333/second
Prueba de la aplicación de ejemplo en el entorno local
Recuerde que las aplicaciones de Microsoft Teams son aplicaciones web que exponen una o varias funcionalidades. Haga que la aplicación esté disponible en Internet para que la plataforma teams pueda cargarla. Para que la aplicación sea accesible desde Internet, debe hospedarla .
Para las pruebas locales, puede ejecutar la aplicación en el equipo local y crear un túnel con un punto de conexión web.
ngrok es una herramienta gratuita que te permite hacer eso. Con ngrok, puede obtener una dirección web como https://d0ac14a5.ngrok.io (esta dirección URL es solo un ejemplo). Puede descargar e instalarngrok para su entorno. Asegúrese de agregarlo a una ubicación en .PATH
Creación de un túnel ngrok
Después de instalar ngrok, puede crear un túnel para implementar la aplicación localmente.
Abra una nueva ventana de terminal.
Ejecute el siguiente comando para crear un túnel. La aplicación de ejemplo usa el puerto 3333:
ngrok http 3333 --host-header=localhost:3333Se crea un túnel ngrok. Este es un ejemplo de túnel ngrok.
Ngrok escucha las solicitudes de Internet y las enruta a la aplicación que se ejecuta en el puerto 3333.
Para comprobar la implementación local de la aplicación:
Abra el explorador.
Cargue la aplicación con la siguiente dirección URL:
https://<forwarding address in ngrok console session>/Este es un ejemplo de la dirección URL:
Puede intentar agregar
hello,firstoseconda la dirección URL del túnel de ngrok para ver diferentes páginas de pestaña de la aplicación.Ngrok escucha las solicitudes de Internet y las enruta a la aplicación que se ejecuta en el puerto 3333.
Anote la dirección de reenvío en la consola de ngrok. Necesita esta dirección URL para implementar la aplicación en Teams.
Nota:
Si usó un puerto diferente durante la compilación y ejecución, asegúrese de usar el mismo número de puerto para configurar el túnel ngrok .
Sugerencia
Es una buena idea ejecutar ngrok en una ventana de terminal diferente para mantenerla en ejecución sin interferir con la aplicación de nodo, que es posible que más adelante tenga que detener, recompilar y volver a ejecutar. La sesión de ngrok devuelve información de depuración útil en esta ventana. La versión de pago de ngrok permite nombres persistentes.
Importante
Si usa la versión gratuita de ngrok, la aplicación solo estará disponible durante la sesión actual en el equipo de desarrollo. No está disponible si la máquina se apaga o deja de funcionar. Al reiniciar el servicio, devuelve una nueva dirección. A continuación, debe actualizar todas las ubicaciones que usen la dirección obsoleta. Recuerde este paso al compartir la aplicación para realizar pruebas.
Compilación Node.js paquete de la aplicación
Puede usar gulp CLI para compilar el paquete de la aplicación para Node.js.
Abra una ventana de terminal.
Asegúrese de que se encuentra en el directorio donde
node.jsse clona. Esta es la carpeta dondegulpfile.jsse coloca.Ejecute el siguiente comando para compilar el paquete de la aplicación Node.js.
$ gulpEste es un ejemplo de la salida del comando:
[13:39:27] Using gulpfile ~\documents\github\msteams-samples-hello-world-nodejs\gulpfile.js[13:39:27] Starting 'clean'...[13:39:27] Starting generate-manifest'...[13:39:27] Finished 'generate-manifest' after 11 ms[13:39:27] Finished 'clean after 21 ms[13:39:27] Starting 'default'... Build completed. Output in manifest folder[13:39:27] Finished 'default' after 62 μsSe crea el helloworldapp.zip del paquete de la aplicación. Puede encontrar el archivo de paquete en la siguiente ruta de acceso.
<path to the cloned repo>/Microsoft-Teams-Samples/samples/app-hello-world/nodejs/manifestNota:
Busque el archivo del paquete de la aplicación, helloworldapp.zip, si la ubicación no está clara en la herramienta que usa.
Configuración de la primera aplicación de Node.js mediante el Portal para desarrolladores
Puede usar el Portal para desarrolladores para cargar el paquete de la aplicación en Teams y configurar las funcionalidades de la aplicación. Portal para desarrolladores es una aplicación de Teams que simplifica la creación y el registro de una aplicación. ¡Instala desde la Tienda Teams!
Después de compilar y probar la aplicación de Teams, puede configurarla y obtener una vista previa de ella mediante el Portal para desarrolladores.
La actualización del paquete de la aplicación incluye:
- Importación del paquete de la aplicación en el Portal para desarrolladores
- Configuración de las funcionalidades de la aplicación
Importación del paquete de la aplicación en el Portal para desarrolladores
Para importar el paquete de la aplicación:
Abra Microsoft Teams.
Seleccione el icono De la Tienda
en la barra izquierda.Busque Portal para desarrolladores en la barra de búsqueda y seleccione Portal para desarrolladores*.
Seleccione Abrir.
Se abre el Portal para desarrolladores.
Seleccione la pestaña Aplicaciones .
Seleccione Importar aplicación.
Abra el paquete
helloworldapp.zipde la aplicación desde la siguiente ruta de acceso en la estructura de directorios del repositorio de ejemplo de C#:<path to cloned node.js sample repo>\Source\Repos\Microsoft-Teams-Samples\samples\app-hello-world\nodejs\manifestLa aplicación Hello World se importa en el Portal para desarrolladores.
Después de importar la aplicación al Portal para desarrolladores, puede ver sus detalles en el Portal para desarrolladores.
Realice un recorrido por la aplicación en el Portal para desarrolladores.
Después de importar la aplicación al Portal para desarrolladores, puede ver sus detalles, incluido el archivo de manifiesto.
Visualización de la información de la aplicación
Seleccione Información básica en el panel izquierdo del Portal para desarrolladores.
Tenga en cuenta la siguiente información de la información básica:
- Identificador de la aplicación
- Información para desarrolladores
- Direcciones URL de la aplicación
Seleccione Personalización de marca en el panel izquierdo para ver la información de personalización de marca.
Estos detalles son importantes si va a escribir una nueva aplicación para su distribución.
Visualización de las características de la aplicación
Seleccione Características de la aplicación en el panel izquierdo del Portal para desarrolladores.
Las características de la aplicación aparecen en el panel derecho. Puede ver tarjetas para la aplicación personal, el bot y la extensión de mensaje.
Visualización del manifiesto de la aplicación
El archivo de manifiesto se usa para configurar funcionalidades, recursos necesarios y otros atributos importantes para la aplicación.
Seleccione Publicar en el panel izquierdo para abrir la lista desplegable y, a continuación, seleccione Paquete de aplicación.
El manifiesto de la aplicación aparece en el panel derecho.
El archivo de manifiesto aparece en el panel derecho.
Configuración de las funcionalidades de la aplicación
Después de importar la aplicación en el Portal para desarrolladores, el siguiente paso es configurar las funcionalidades de la aplicación. El Portal para desarrolladores contiene toda la información de la aplicación en diferentes secciones. Facilita la configuración de las funcionalidades de la aplicación.
Con el Portal para desarrolladores, puede hacer lo siguiente:
- Configurar la aplicación de pestaña personal.
- Configuración del bot.
- Configure la extensión de mensaje.
Configuración de la aplicación de pestaña personal
Para configurar la aplicación de pestaña personal:
Seleccione el
icono de la tarjeta Aplicación personal en el panel Características de la aplicación y seleccione Editar.Aparecen los detalles de la pestaña Hola.
Seleccione el icono de la
pestaña Hola y seleccione Editar para abrir los detalles de la aplicación para actualizar.
Escriba los detalles de la aplicación para la pestaña Hola en Agregar una pestaña a la aplicación personal.
Escriba los detalles siguientes:
- Nombre: pestaña Hola.
- Dirección URL de contenido y dirección URL del sitio web: la dirección de reenvío en la sesión de consola de ngrok.
- Contexto: seleccione la pestaña Personal.
Seleccione Actualizar.
Los detalles de la pestaña Hola aparecen en el panel Aplicación personal .
Haga clic en Guardar.
El panel Aplicación personal ahora muestra la nueva pestaña y una pestaña Acerca de creada automáticamente.
Configuración del bot
Es fácil agregar la funcionalidad de bots a la aplicación. La aplicación de ejemplo Hello World ya tiene un bot como parte del ejemplo, pero debe registrarlo en Teams.
El bot que se importó desde el ejemplo no tiene un identificador de aplicación asociado. Tendrá que eliminarlo y crear un nuevo bot. El Portal para desarrolladores crea un nuevo identificador de aplicación y lo registra en Teams.
La adición y configuración de un bot implica lo siguiente:
Para agregar un nuevo bot
Seleccione el
icono de la tarjeta Bot en el panel Características de la aplicación y seleccione Eliminar.Seleccione Herramientas para agregar funcionalidad.
Seleccione Administración de bots en el panel Herramientas .
Seleccione + Nuevo bot en el panel Administración de bots .
Escriba un nombre adecuado para el bot y seleccione Agregar.
Aparece el panel Configurar que muestra los detalles del nuevo bot en el panel izquierdo.
Escriba la dirección URL de reenvío desde la
ngrokconsola y seleccione Guardar.
Seleccione Secretos de cliente y, a continuación, seleccione Agregar un secreto de cliente al bot para generar una contraseña para el bot.
El Portal para desarrolladores genera una contraseña para el bot.
Puede usar el
icono para copiar la contraseña. En este tutorial, no es necesario copiarlo.
Seleccione Aceptar.
Seleccione < Bots para volver al panel Administración de bots .
En el panel Administración de bots se muestra el nuevo bot agregado con un identificador de aplicación.
Asegúrese de guardar el identificador del bot junto con la contraseña de la sección Secreto de cliente .
Para agregar bot a la aplicación
Abra el panel Características de la aplicación y seleccione la tarjeta Bot .
Aparece el panel Bot .
Seleccione la aplicación de bot en Seleccionar un bot existente y seleccione Guardar.
El nuevo bot se agrega a la aplicación con su propio identificador de aplicación.
Para configurar el ámbito del bot
Seleccione el
icono en la nueva tarjeta Bot y seleccione Editar.Seleccione los tres ámbitos del comando en la página Bot .
Vaya al panel Bot para ver la sección Comandos y seleccione + Agregar un comando.
Escriba un nombre y una descripción adecuados, seleccione los tres ámbitos del comando y seleccione Agregar.
- Personal
- Team
- Chat en grupo
El nuevo comando se agrega a la sección Comandos del panel Bot .
Haga clic en Guardar.
Se guardan los detalles del comando.
Abra el panel Características de la aplicación y seleccione Tarjeta de aplicación personal para ver los detalles de la pestaña de la aplicación.
Verá que se agrega una pestaña para el nuevo bot de chat a la aplicación.
Configuración de la extensión de mensaje
Las extensiones de mensaje permiten a los usuarios solicitar información del servicio y publicar esa información. La información se publica en forma de tarjetas en la conversación del canal. Las extensiones de mensaje aparecen en la parte inferior del cuadro de redacción.
Para agregar una nueva extensión de mensaje:
Seleccione el
icono de la tarjeta Extensión de mensaje en el panel Características de la aplicación y seleccione Eliminar.Seleccione Extensión de mensaje en el panel Características de la aplicación .
Seleccione el nombre de la aplicación de bot en la lista desplegable Seleccionar un bot existente en el panel Extensión de mensaje.
Haga clic en Guardar.
La extensión de mensaje se guarda y la sección Comandos aparece en el panel Extensión de mensaje.
Seleccione + Agregar un comando para definir el ámbito de lo que puede hacer la aplicación de extensión de mensajes.
Cuadro de diálogo Agregar un comando .
Asegúrese de que La búsqueda está seleccionada como el tipo de comando que desea agregar en el cuadro de diálogo Agregar un comando .
Escriba la información adecuada para los detalles siguientes:
- Identificador de comando
- Título del comando
- Descripción del comando
Desplácese por el cuadro de diálogo para ver los detalles restantes.
Asegúrese de que la opción Make default (Establecer valor predeterminado ) esté seleccionada.
Seleccione los siguientes contextos para el comando de extensión de mensaje:
- Cuadro de comandos
- Cuadro Redactar
- Mensaje
Escriba la información adecuada para los detalles siguientes:
- Nombre del parámetro
- Título del parámetro
- Descripción del parámetro
Seleccione Texto como tipo de entrada.
Haga clic en Guardar.
El comando de extensión de mensaje se guarda y se muestra en la lista de comandos en el panel Extensión de mensaje.
Haga clic en Guardar.
Abra el panel Características de la aplicación .
Verá las tres funcionalidades (aplicación de pestaña personal, bot y extensión de mensaje) configuradas para la aplicación Hello World.
Vista previa y prueba de la aplicación de Node.js
Después de importar la aplicación y configurar las funcionalidades en el Portal para desarrolladores, puede obtener una vista previa y probar la aplicación de ejemplo.
Nota:
Los desarrolladores externos no pueden usar la opción Versión preliminar en Teams en la aplicación Portal para desarrolladores de Teams. No está disponible como aplicación en Teams, debido a una limitación de API. Si desea obtener una vista previa de la aplicación en Teams, use el sitio web del Portal para desarrolladores .
Después de configurar las funcionalidades de la aplicación, puede obtener una vista previa y probar la aplicación en Teams en el entorno local.
Para obtener una vista previa de la aplicación:
Seleccione Vista previa en Teams en la barra de herramientas del Portal para desarrolladores.
El Portal para desarrolladores le informa de que la aplicación personalizada se ha cargado correctamente.
Seleccione Administrar las aplicaciones. La aplicación aparece en las aplicaciones cargadas.
Busque la aplicación mediante el cuadro de búsqueda y seleccione los tres puntos de su fila.
Seleccione la opción Ver . Aparece la página Agregar de la aplicación.
Seleccione Agregar para cargar la aplicación en Teams.
La aplicación ya está disponible en Teams. Puede ver todas las pestañas y probar las funcionalidades:
Pestaña Hola:
Bot de chat:
Puede enviar un mensaje mediante el chat.
Extensión de mensaje:
Puede probar una búsqueda mediante la extensión de mensaje.
Pestaña Acerca de:
¿Tiene algún problema con esta sección? Si es así, envíenos sus comentarios para que podamos mejorarla.