Crear una ficha de canal y de grupo personalizada con Node.js y el generador de Yeoman para Microsoft Teams

Nota

En este tutorial, se siguen los pasos descritos en el sitio de creación de la primera aplicación Microsoft Teams wiki que se encuentra en el repositorio de github de Microsoft.

En este tutorial rápido, vamos a crear una pestaña de canal y de grupo personalizados mediante el generador Yeoman de Teams.

Requisitos previos

  • Para completar este tutorial, necesitará un inquilino de Office 365 y un equipo configurado con la opción permitir la carga de aplicaciones personalizadas habilitada. Para obtener más información, vea preparar el inquilino de Office 365.

    • Si actualmente no tiene una cuenta de Office 365, puede registrarse para obtener una suscripción gratuita a través del programa de desarrolladores de Office 365. La suscripción permanecerá activa siempre que la use para el desarrollo continuado. Vea Bienvenido al programa de desarrolladores de Office 365.

Además, este proyecto requiere que tenga instalado lo siguiente en el entorno de desarrollo:

  • Cualquier editor de texto o IDE. Puede instalar y usar Visual Studio Code de forma gratuita.

  • Node. js/NPM. Debe usar la última versión de LTS. El administrador de paquetes de nodos (NPM) se instalará en el sistema con la instalación de node. js.

  • Después de instalar correctamente node. js, instale los paquetes Yeoman y Gulp-CLI escribiendo lo siguiente en el símbolo del sistema:

npm install yo gulp-cli --global
  • Para instalar el generador de aplicaciones de Microsoft Teams, escriba lo siguiente en el símbolo del sistema:
npm install generator-teams --global

Generar el proyecto

  • Abra un símbolo del sistema y cree un nuevo directorio para el proyecto de pestañas.

  • Para iniciar el generador, navegue hasta el nuevo directorio y escriba el siguiente comando:

yo teams
  • A continuación, deberá proporcionar una serie de valores que se usarán en el archivo manifest. JSON de la aplicación:

captura de pantalla de apertura del generador

¿Cuál es el nombre de la solución?

Este es el nombre del proyecto. Puede aceptar el nombre sugerido; para ello, presione Entrar.

¿Dónde desea ubicar los archivos?

Actualmente está en el directorio del proyecto. Presione entrar.

¿El título del proyecto de la aplicación de Microsoft Teams?

Este es el nombre del paquete de la aplicación y se usará en el manifiesto de la aplicación y la descripción.

El nombre de la (empresa)? (máximo 32 caracteres)

El nombre de la compañía se usará en el manifiesto de la aplicación.


¿Qué versión de manifiesto desearía usar?

Seleccione el esquema predeterminado.

Escriba su identificador de socio de Microsoft, si tiene uno? (Déjelo en blanco para omitir)

Este campo no es necesario y solo debe usarse si ya forma parte de la red de asociados de Microsoft.

¿Qué desea agregar al proyecto?

Seleccione ( * ) una tabulación.

La dirección URL en la que va a hospedar esta solución?

De forma predeterminada, el generador sugiere una dirección URL de sitios web de Azure. Solo va a probar la aplicación de forma local, por lo tanto, no es necesaria una dirección URL válida para completar este inicio rápido.

¿Le gustaría incluir el marco de pruebas y las pruebas iniciales? (s/N)

Elija no incluir un marco de pruebas para este proyecto. El valor predeterminado es sí; Escriba n.

¿Desea usar las aplicaciones de Azure Insights para telemetría? (s/N)

Elija no incluir Azure Application Insights. El valor predeterminado es no; Escriba n.

Nombre de pestaña predeterminado (16 caracteres como máximo)?

Asigne un nombre a la pestaña. Este nombre de la pestaña se usará en el proyecto como un componente de ruta de acceso de archivo o dirección URL.

¿Desea crear una pestaña configurable o una etiqueta estática?

Use las teclas de dirección para seleccionar la pestaña configurable.

¿Qué ámbitos desea usar para la pestaña?

Puede seleccionar un equipo o un chat en grupo

¿Desea que esta pestaña esté disponible en SharePoint Online? (S/n)

Seleccione n.

Importante

El componente de ruta de yourDefaultTabNameTab, al que se hace referencia en este tutorial rápido, es el valor que escribió en el generador para el nombre de la pestaña predeterminada más la pestañade Word.

Por ejemplo: DefaultTabName: MyTab => /MyTabTab/

En el directorio del proyecto, vaya a lo siguiente:

./src/app/scripts/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.tsx

Es aquí donde encontrará la lógica de la pestaña. Busque el render() método y agregue la siguiente <div> etiqueta y el contenido a la parte superior del <PanelBody> código de contenedor:

    <PanelBody>
        <div style={styles.section}>
            Hello World! Yo Teams rocks!
        </div>
    </PanelBody>

Asegúrese de guardar el archivo actualizado.

Compilar y ejecutar la aplicación

Abra un símbolo del sistema en el directorio del proyecto para completar las tareas siguientes.

Crear el paquete de la aplicación

Necesitará un paquete de la aplicación para probar la pestaña en Microsoft Teams. Se trata de una carpeta ZIP que contiene los siguientes archivos necesarios:

  • Un icono de color completo que mide 192 x 192 píxeles.
  • Un icono de contorno transparente que mide 32 x 32 píxeles.
  • Un archivo manifest. JSON que especifica los atributos de la aplicación.

El paquete se crea a través de una tarea de Gulp que valida el archivo manifest. JSON y genera la carpeta zip ./package directoryen el. En el símbolo del sistema, escriba:

gulp manifest

Compilar la aplicación

El comando de compilación transpilará la solución a la carpeta ./Dist. . A continuación, escriba:

gulp build

Ejecutar la aplicación en localhost

Escriba lo siguiente para iniciar un servidor Web local:

gulp serve

Escriba http://localhost:3007/<yourDefaultAppNameTab>/ en el explorador y vea la Página principal de la aplicación:

captura de pantalla de página principal

Para ver la página de configuración de pestañas, vaya a https://localhost:3007/<yourDefaultAppNameTab>/config.html . Debería ver lo siguiente:

captura de pantalla de la página de configuración

Establecer un túnel seguro a la pestaña

Microsoft Teams es un producto basado en la nube completamente y requiere que el contenido de la pestaña esté disponible en la nube con puntos de conexión HTTPS. Teams no permite el hospedaje local, por lo tanto, debe publicar su ficha en una dirección URL pública o usar un proxy que expondrá el puerto local a una dirección URL con conexión a Internet.

Para probar la extensión de pestañas, usará ngrok, que está integrado en esta aplicación. Ngrok es una herramienta de software de proxy inverso que creará un túnel a los puntos de conexión HTTPS disponibles públicamente del servidor Web que se ejecutan de forma local. Los puntos de conexión web del servidor estarán disponibles durante la sesión actual en el equipo local. Cuando el equipo se apaga o entra en suspensión, el servicio dejará de estar disponible.

En el símbolo del sistema, salga de localhost y escriba lo siguiente:

gulp ngrok-serve

Importante

Una vez cargada la pestaña en Microsoft Teams y guardada correctamente, puede verla en la galería de pestañas, agregarla a la barra de pestañas e interactuar con ella hasta que finalice la sesión de túnel ngrok. Si reinicia la sesión de ngrok, tendrá que actualizar la aplicación con la nueva dirección URL.

Cargar la aplicación en Teams

  • Abra el cliente de Microsoft Teams. Si usa la versión basada en Web , puede inspeccionar el código Front-end con las herramientas de desarrollode su explorador.
  • En el panel de YourTeams de la izquierda, seleccione el ... menú situado junto al equipo que está usando para probar la pestaña y elija administrar equipo.
  • En el panel principal, seleccione aplicaciones en la barra de pestañas y elija cargar una aplicación personalizada ubicada en la esquina inferior derecha de la página.
  • Abra el directorio del proyecto, vaya a la carpeta ./Package , seleccione la carpeta ZIP del paquete de la aplicación y elija abrir. La pestaña se cargará en Teams.
  • Vuelva a su equipo, elija el canal en el que desea mostrar la pestaña, seleccione ➕ de la barra de pestañas y elija la pestaña de la galería.
  • Siga las instrucciones para agregar una pestaña. Tenga en cuenta que hay un cuadro de diálogo de configuración personalizada para la ficha canal o grupo.
  • Seleccione Guardar y la pestaña se agregará a la barra de pestañas del canal.