Crear una pestaña de canal o grupo

Crear una pestaña de grupo o canal personalizado

Puede crear una pestaña de canal o grupo mediante Node.js Yeoman Generator, ASP.NETCore o ASP.NETCore MVC.

Crear un canal personalizado y una pestaña de grupo con Node.js y el generador de Yeoman

Nota

En este artículo se describen los pasos descritos en la compilación El primer wiki de Microsoft Teams aplicación que se encuentra en el repositorio GitHub Microsoft OfficeDev.

Puede crear una pestaña de canal o grupo personalizada mediante el generador Teams Yeoman.

Requisitos previos para aplicaciones

Debe comprender los siguientes requisitos previos:

  • Debes tener un inquilino Office 365 y un equipo configurado con Permitir la carga de aplicaciones personalizadas habilitada. Para obtener más información, vea prepare your Office 365 tenant.

    Nota

    Si actualmente no tiene una cuenta Office 365, puede registrarse para obtener una suscripción gratuita a través del programa Office 365 desarrolladores. La suscripción permanece activa siempre que la esté usando para el desarrollo continuo. Vea welcome to the Office 365 Developer Program.

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

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

  • Node.js/npm. Use la versión LTS más reciente. El nodo Administrador de paquetes (npm) se instala en el sistema con la instalación de Node.js.

  • Después de instalar correctamente Node.js, instale los paquetes Yeoman y gulp-cli especificando lo siguiente en el símbolo del sistema:

    npm install yo gulp-cli --global
    
  • Instale el generador Microsoft Teams aplicaciones mediante la introducción de lo siguiente en el símbolo del sistema:

    npm install generator-teams --global
    

Generar el proyecto

Para generar el proyecto

  1. En un símbolo del sistema, cree un nuevo directorio para el proyecto de pestaña.

  2. Para iniciar el generador, vaya al nuevo directorio y escriba el siguiente comando:

    yo teams
    
  3. A continuación, proporcione una serie de valores que se usan en el archivo manifest.json de la aplicación:

    captura de pantalla de apertura del generador

    ¿Cómo se llama su solución?

    Este es el nombre del proyecto. Puede aceptar el nombre sugerido seleccionando la tecla Entrar.

    ¿Dónde desea ubicar los archivos?

    Actualmente se encuentra en el directorio del proyecto. Seleccione Entrar.

    ¿Título de tu Microsoft Teams de aplicación?

    Este es el nombre del paquete de la aplicación y se usará en el manifiesto y la descripción de la aplicación. Escriba un título o seleccione Entrar para aceptar el nombre predeterminado.

    ¿Su nombre (empresa)? (máximo 32 caracteres)

    El nombre de la empresa se usará en el manifiesto de la aplicación. Escriba un nombre de empresa o seleccione Entrar para aceptar el nombre predeterminado.

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

    Seleccione el esquema predeterminado.

    ¿Scaffolding rápido? (Y/n)

    El valor predeterminado es sí; escriba n para escribir su Id. de partner de Microsoft.

    Escriba su id. de partner de Microsoft, si tiene uno. (Dejar en blanco para omitir)

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

    ¿Qué desea agregar al proyecto?

    Seleccione ( ) Una * pestaña.

    ¿La dirección URL donde hospedará esta solución?

    De forma predeterminada, el generador sugiere una dirección URL de Sitios web de Azure. Solo estás probando la aplicación localmente, por lo tanto, no es necesaria una dirección URL válida.

    ¿Desea mostrar un indicador de carga cuando se carga la aplicación o pestaña?

    Elige no incluir un indicador de carga cuando se cargue la aplicación o la pestaña. El valor predeterminado es no, escriba n.

    ¿Desea que las aplicaciones personales se representen sin una barra de encabezado de pestaña?

    Elige no incluir aplicaciones personales que se representarán sin una barra de encabezado de pestaña. El valor predeterminado es no, escriba n.

    ¿Desea incluir el marco de pruebas y las pruebas iniciales? (y/N)

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

    ¿Desea usar azure applications Ideas para telemetría? (y/N)

    Elija no incluir la aplicación de Azure Ideas. El valor predeterminado es no; escriba n.

    Nombre de tabulación predeterminado (máximo 16 caracteres)?

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

    ¿Qué tipo de tab le gustaría crear?

    Use las teclas de flecha para seleccionar Ficha Configurable.

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

    Puede seleccionar un equipo o un chat de grupo.

    ¿Necesita compatibilidad con el inicio de sesión único de Azure AD para la pestaña?

    Elija no incluir la Azure AD inicio de sesión único para la pestaña. El valor predeterminado es sí, escriba n.

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

    Escriba n.

    Importante

    El componente de ruta de acceso yourDefaultTabNameTab, es el valor que escribió en el generador para Default Tab Name y la palabra Tab.

    Por ejemplo: DefaultTabName: MyTab > /MyTabTab/

  4. En Visual Studio Code o cualquier editor de código, vaya al directorio del proyecto y abra el siguiente archivo:

    ./src/app/scripts/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.tsx
    
  5. Busque el render() método y agregue la siguiente etiqueta y contenido a la parte superior del código <div> <PanelBody> contenedor:

        <PanelBody>
            <div style={styles.section}>
                Hello World! Yo Teams rocks!
            </div>
        </PanelBody>
    
  6. Asegúrese de guardar el archivo actualizado.

Compilar y ejecutar la aplicación

En un símbolo del sistema, abra el directorio del proyecto para completar las siguientes tareas.

Crear el paquete de la aplicación

Debes tener un paquete de aplicación para probar la pestaña en Teams. Es una carpeta zip que contiene los siguientes archivos necesarios:

  • Un icono de color completo que mide 192 x 192 píxeles.
  • Un icono de esquema 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 gulp que valida el archivo manifest.json y genera la carpeta zip en el directorio ./package. En el símbolo del sistema, escriba el siguiente comando:

gulp manifest

Compilar la aplicación

El comando build transpila la solución en la carpeta ./dist. Escriba el siguiente comando en el símbolo del sistema:

gulp build

Ejecutar la aplicación en localhost

  1. Para iniciar un servidor web local, escriba lo siguiente en el símbolo del sistema:

    gulp serve
    
  2. Escriba http://localhost:3007/<yourDefaultAppNameTab>/ en el explorador, reemplacedefaultAppNameTab por el nombre de la pestaña y vea la página principal de la aplicación como se muestra en la siguiente imagen:

    captura de pantalla de la página principal

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

    Captura de pantalla de página de configuración

Establecer un túnel seguro en la pestaña

Microsoft Teams es un producto basado en la nube y requiere que el contenido de la pestaña esté disponible desde la nube mediante puntos de conexión HTTPS. Teams no permite el hospedaje local. Debe publicar la pestaña en una dirección URL pública o usar un proxy que exponga el puerto local a una dirección URL orientada a Internet.

Para probar la extensión de pestaña, use ngrok, que está integrado en esta aplicación. Ngrok es una herramienta de software de proxy inverso que crea un túnel a los puntos de conexión HTTPS del servidor web que se ejecuta localmente. Los puntos de conexión web del servidor están disponibles durante la sesión actual en el equipo. Cuando el equipo se apaga o deja de estar en modo de suspensión, el servicio ya no está disponible.

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

gulp ngrok-serve

Importante

Después de cargar la pestaña en Microsoft Teams y guardarla correctamente, puede verlo en la galería de pestañas, agregarla a la barra de pestañas e interactuar con ella hasta que finalice la sesión del túnel ngrok. Si reinicias la sesión de ngrok, debes actualizar la aplicación con la nueva dirección URL.

Upload la aplicación a Teams

Para cargar la aplicación en Teams

  1. Vaya a Microsoft Teams. Si usa la versión basada en web, puede inspeccionar el código front-end con las herramientas para desarrolladores del explorador.

  2. En los equipos del panel izquierdo, seleccione los puntos suspensivos ●●● junto al equipo que está usando para probar la pestaña y elija Administrar equipo.

  3. En el panel principal, selecciona Aplicaciones en la barra de pestañas y Upload una aplicación personalizada ubicada en la esquina inferior derecha de la página.

  4. Vaya al directorio del proyecto, vaya a la carpeta ./package, seleccione la carpeta zip del paquete de la aplicación y elija Abrir.

    Pestaña Canal agregado

  5. Seleccione Agregar en el cuadro de diálogo emergente. La pestaña se carga en Teams.

  6. Vuelva a su equipo, elija el canal donde desea mostrar la pestaña, seleccione ➕ en la barra de pestañas y elija la pestaña en la galería.

  7. Siga las instrucciones para agregar una pestaña. Hay un cuadro de diálogo de configuración personalizado para la pestaña canal o grupo.

  8. Selecciona Guardar y la pestaña se agrega a la barra de pestañas del canal.

    Pestaña Canal cargada

Paso siguiente

Consulte también