Inicio rápido: crear una pestaña personal 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 personal personalizada mediante el generador Yeoman de Teams. También cargaremos la aplicación en el equipo.

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 estática.

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/

Crear una pestaña personal

Para agregar una pestaña personal a esta aplicación, deberá crear una página de contenido y actualizar los archivos existentes:

  • En el editor de código, cree un nuevo archivo HTML, personal.html y agregue el siguiente marcado:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            <!-- Todo: add your a title here -->
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- inject:css -->
        <!-- endinject -->
    </head>
        <body>
            <h1>Personal Tab</h1>
            <p><img src="/assets/icon.png"></p>
            <p>This is your personal tab!</p>
        </body>
</html>
  • Guarde personal.html en la carpeta Web de la aplicación:
./src/app/web/<yourDefaultTabNameTab>/personal.html
  • Abra manifest.js en el editor de código:
./src/manifest/manifest.json/

Agregue lo siguiente a la staticTabs matriz vacía ( staticTabs":[] ) y agregue el siguiente objeto JSON:

{
    "entityId": "personalTab",
    "name": "Personal Tab ",
    "contentUrl": "https://{{HOSTNAME}}/<yourDefaultTabNameTab>/personal.html",
    "websiteUrl": "https://{{HOSTNAME}}",
    "scopes": ["personal"]
}

Recuerde actualizar el componente de ruta "contentURL" yourDefaultTabNameTab con el nombre de la pestaña real.

  • Guarde el manifest.jsactualizado en.

  • La página de contenido debe atenderse en un IFrame. Abra la pestaña. ts en el editor de código:

./src/app/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts
  • Agregue lo siguiente a la lista de decoradores IFrame:
 @PreventIframe("/<yourDefaultAppName>TabNameTab>/personal.html")
  • Asegúrese de guardar el archivo Tab. ts actualizado. El código de pestaña está completo.

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 tu pestaña personal, ve a http://localhost:3007/<yourDefaultAppNameTab>/personal.html

captura de pantalla de pestaña personal

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 que se haya cargado la pestaña en Microsoft Teams, a través de ngrok, y se haya guardado correctamente, podrá verla en Teams hasta que finalice la sesión de túnel.

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, haga clic con el botón secundario y elija abrir. La pestaña se cargará en Teams.

Ver las pestañas personales

En la barra de exploración situada en el extremo izquierdo del cliente de Microsoft Teams, seleccione el ... menú y elija la aplicación en la lista.