Creando la primera tab para Teams con Node.js en Visual Studio Code

En este post vamos a ver como crear una tab para Teams con una aplicación Node.js desde Visual Studio Code. Para ello vamos a utilizar vamos a utilizar la plantilla de Yeoman para apps de Teams, si aún no la tienes instalado en su página de GitHub explican los pasos que tienes que seguir para instalarla, https://github.com/OfficeDev/generator-teams

Lo primero que haremos es crear una carpeta donde crear nuestra solución, abrimos una ventana de comandos y ejecutamos

md teams-simpletab

cd teams-simpletab

Para ejecutar el generador de Yeoman, ejecutamos

yo teams

El asistente nos irá pidiendo una serie de datos para nuestra app:

  • El nombre de la solución
  • Si queremos utilizar la carpeta en la que nos encontramos o crear una nueva
  • Titulo de la app
  • El nombre de la compañia
  • Que es lo que quieres añadir en el proyecto, en este punto seleccionamos Tab.

image

  • La url donde alojaremos nuestra aplicación
  • El nombre de la ficha por defecto

Una vez hayamos cumplimentado todos estos datos, el generador comenzará a crear nuestra solución. Una vez terminado abrimos nuestra solución con nuestro editor favorito, por supuesto nosotros utilizaremos Visual Studio Code. Podemos abrirlo directamente ejecutando

code .

Una vez abierto veremos que nos ha creado una estructura de carpeta como la de la imagen

image

Dentro de esta estructura podemos ver la carpeta src\app que es donde se encuentra el código de nuestra applicación y la carpeta src\manifest que son los ficheros que se incluirán en el paquete de nuestra app de Teams.

Probando la aplicación

Ahora vamos a probar como quedaría nuestra aplicación dentro de Teams. Para probarla vamos a ejecutar nuestra aplicación en local y añadiremos el paquete en Teams.

Para que desde Teams podamos ver la aplicación que tenemos en local utilizaremos ngrok, en el post xxxxxxx puedes por qué lo utilizamos.

Para ello volvemos a la ventana de comandos y ejecutamos

ngrok http 3007

3007 es el puerto donde se está ejecutando nuestro servidor web de Express, es el puerto que se pone por defecto cuando creamos la aplicación con el generador de Teams de Yeoman, pero podemos cambiarlo en el fichero src\app\server.ts en la siguiente línea

const port = process.env.port || process.env.PORT || 3007;

Una vez lo ejecutamos se mostrará información en pantalla, por ahora necesitamos la url https que se muestra en Forwarding, tendrá el formato https://xxxxxxxxx.ngrok.io. La copiamos y dejamos el servicio ejecutándose.

Ahora tenemos que decir en nuestra app dónde se esta ejecutando la aplicación que vamos a mostrar en la ficha, para esto vamos a modificar el manifiesto de nuestra app para indicarlo.

Abrimos el fichero src\manifest\manifest.json y reemplazamos todas las urls de la aplicación que hayamos indicado por la url https que hemos copiado anteriormente. Tenemos que hacer este cambio en los siguientes nodos

  • developer/websiteUrl
  • developer/privacyUrl
  • developer/termsOfUseUrl
  • configurableTabs/configurationUrl

En mi ejemplo quedaría así:

«developer»: {

«name»: «Ruben»,

«websiteUrl»: «https://1cb22031.ngrok.io»,

«privacyUrl»: «https://1cb22031.ngrok.io/privacy.html»,

«termsOfUseUrl»: https://1cb22031.ngrok.io/tou.html

},

«configurableTabs»: [

{

«configurationUrl»: «https://1cb22031.ngrok.io/teamsSimpleTabConfig.html»,

«canUpdateConfiguration»: true,

«scopes»: [

«team»

]

}

],

Una vez que hayamos modificado el fichero, lo guardamos.

Ahora tenemos que generar el paquete de la app, para lo que ejecutaremos

gulp manifest

Esto creara un zip en la carpeta package con el contenido de la carpeta src\manifest. Este zip es el que tendremos que subir a Teams.

También tenemos que hacer un build de la solución y iniciar el servidor web Express ejecutando los siguientes comandos

gulp build

gulp serve

Para subir la aplicación a Teams, abrimos Teams y vamos al equipo donde vamos a probar la app. También podemos crear un team nuevo para hacer las pruebas.

Dentro de las opciones del team vamos a Administrar equipo

image

Dentro de la pestaña de Aplicaciones pulsamos el enlace Cargar una aplicación personalizada que se encuentra en la zona inferior derecha y seleccionamos el zip que hemos generado dentro de la carpeta package de nuestra solución

image

Con esto ya tendríamos disponible nuestra app, pero aún nos queda añadir la ficha en nuestro team, como si fuese cualquier otra ficha. Vamos al canal general –> Añadir ficha

image

Buscamos la ficha que hemos creado y la seleccionamos, si todo esta correcto nos mostrará la página de configuración que hayamos indicado en nuestro manifiesto

image

En este ejemplo nos solicita un valor que luego mostrará en la ficha

image

Las fichas personalizadas que creemos están disponibles tanto en web como en la aplicación de escritorio de Teams.

Please follow and like us: