Crear una pestaña personal

Crear una pestaña personal personalizada

Puede crear una pestaña personal con Node.js Yeoman Generator, ASP.NET Core o ASP.NET Core MVC.

Crear una pestaña personal personalizada con Node.js y el generador de Yeoman

Nota

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

Puede crear una pestaña personal personalizada mediante el generador Teams Yeoman. La aplicación también se carga en Teams.

Requisitos previos para Teams 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 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.

  • Una vez que haya instalado correctamente Node.js, instale los paquetes Yeoman y gulp-cli especificando el siguiente comando en el símbolo del sistema:

    npm install yo gulp-cli --global
    
  • Instale el generador Microsoft Teams aplicaciones mediante la introducción del siguiente comando 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?

    El nombre de la solución es el nombre del proyecto. Puede aceptar el nombre sugerido seleccionando Entrar.

    ¿Dónde desea ubicar los archivos?

    Actualmente está en el directorio del proyecto. Seleccione Entrar.

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

    El título es el nombre del paquete de la aplicación y se usa 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 debe usarse solo 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 que 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 no, escriba n.

    ¿Desea incluir la compatibilidad con ESLint? (y/N)

    Elija no incluir la compatibilidad con ESLint. El valor predeterminado es no, 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 usa 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 Personal (estático).

    ¿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.

    Importante

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

    Por ejemplo: DefaultTabName: MyTab > /MyTabTab/

Agregar una pestaña personal

Para agregar una pestaña personal a esta aplicación, cree una página de contenido y actualice los archivos existentes

  1. 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>
    
  2. Guarde personal.html en la carpeta web de la aplicación en la siguiente ubicación:

    ./src/app/web/<yourDefaultTabNameTab>/personal.html
    
  3. Abra manifest.json desde la siguiente ubicación en el editor de código:

    ./src/manifest/manifest.json/
    
  4. Agregue lo siguiente a la matriz staticTabs vacía ( ) y agregue el siguiente objeto staticTabs":[] JSON:

    {
        "entityId": "personalTab",
        "name": "Personal Tab ",
        "contentUrl": "https://{{HOSTNAME}}/<yourDefaultTabNameTab>/personal.html",
        "websiteUrl": "https://{{HOSTNAME}}",
        "scopes": ["personal"]
    }
    
  5. Actualice el componente de ruta de acceso contentURL yourDefaultTabNameTab con el nombre de pestaña real.

  6. Guarde el archivo manifest.json actualizado.

  7. Para proporcionar la página de contenido en un IFrame, abra Tab.ts en el editor de código desde la siguiente ruta de acceso:

    ./src/app/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts
    
  8. Agregue lo siguiente a la lista de decoradores de IFrame:

     @PreventIframe("/<yourDefaultAppName>TabNameTab>/personal.html")
    
  9. Guarde el archivo Tab.ts actualizado. El código de pestaña se ha completado.

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 el siguiente comando en el símbolo del sistema:

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

    captura de pantalla de la página principal

  3. Para ver la pestaña personal, vaya a http://localhost:3007/<yourDefaultAppNameTab>/personal.html .

    Captura de pantalla de pestaña personal

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. Publique la pestaña en una dirección URL pública o use 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. Ngrok crea un túnel para 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 se queda en reposo, el servicio ya no está disponible.

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

gulp ngrok-serve

Importante

Después de cargar la pestaña en Microsoft Teams a través de ngrok y guardarla correctamente, puede verlo en Teams hasta que finalice la sesión del túnel.

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 la esquina inferior izquierda, selecciona Aplicaciones.

  3. En la esquina inferior izquierda, elige Upload una aplicación personalizada.

  4. Vaya al directorio del proyecto, vaya a la carpeta ./package, seleccione la carpeta zip y elija Abrir.

    Agregar la pestaña personal

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

    Pestaña personal cargada

Ver la pestaña personal

En la barra de navegación de la parte Teams, selecciona puntos suspensivos ●●● y elige tu aplicación.

Reordenar pestañas personales estáticas

A partir de la versión 1.7 del manifiesto, los desarrolladores pueden reorganizar todas las pestañas de su aplicación personal. En concreto, un desarrollador puede mover la pestaña de chat del bot, que siempre se sitúa de forma predeterminada en la primera posición, en cualquier lugar del encabezado de pestaña de la aplicación personal. Se declaran entityId dos palabras clave de tabulación reservadas, conversaciones y acerca de.

Si creas un bot con un ámbito personal, aparece en la primera posición de pestaña de una aplicación personal de forma predeterminada. Si desea moverlo a otra posición, debe agregar un objeto tab estático al manifiesto con la palabra clave reservada, conversaciones. La pestaña de conversación aparece en la web o en el escritorio en función de dónde agregue la pestaña de conversación en la staticTabs matriz.

{
   "staticTabs":[
      {
         
      },
      {
         "entityId":"conversations",
         "scopes":[
            "personal"
         ]
      }
   ]
}

Agregar registerOnFocused API para pestañas o aplicaciones personales

La registerOnFocused API del SDK le permite usar un teclado en Teams. Puedes volver a una aplicación personal y mantener el foco en una pestaña o aplicación personal con la ayuda de las teclas Ctrl, Mayús y F6. Por ejemplo, puedes alejarte de la aplicación personal para buscar algo y luego volver a la aplicación personal o usar Ctrl+F6 para desplazarte por los lugares requeridos.

El código siguiente proporciona un ejemplo de definición de controlador en SDK cuando el foco registerFocusEnterHandler debe devolverse a la pestaña o a la aplicación personal:

export function registerFocusEnterHandler(handler: (navigateForward: boolean) => void): 
void {
  HandlersPrivate.focusEnterHandler = handler;
  handler && sendMessageToParent('registerHandler', ['focusEnter']);
}
function handleFocusEnter(navigateForward: boolean): void
 {
  if (HandlersPrivate.focusEnterHandler)
   {
    HandlersPrivate.focusEnterHandler(navigateForward);
  }
}

Después de que el controlador se desencadene con la palabra clave , el controlador se invoca con una función de devolución de llamada que focusEnter toma un parámetro denominado registerFocusEnterHandler focusEnterHandler navigateForward . El valor de navigateForward determina el tipo de eventos. Ctrl+F6 invoca el valor solo focusEnterHandler y no la tecla de tabulación.
Las claves útiles para mover eventos dentro Teams son las siguientes:

  • Forward event -> Ctrl+F6 keys
  • Evento Backward -> Ctrl+Mayús+F6
case 'focusEnter':     
this.registerFocusEnterHandler((navigateForward: boolean = true) => {
this.sdkWindowMessageHandler.sendRequestMessage(this.frame, this.constants.SdkMessageTypes.focusEnter, [navigateForward]);
// Set focus on iframe or webview
if (this.frame && this.frame.sourceElem) {
  this.frame.sourceElem.focus();
}
return true;
});
}

// callback function to be passed to the handler
private focusEnterHandler: (navigateForward: boolean) => boolean;

// function that gets invoked after handler is registered.
private registerFocusEnterHandler(focusEnterHandler: (navigateForward: boolean) => boolean): void {
this.focusEnterHandler = focusEnterHandler;
this.layoutService.registerAppFocusEnterCallback(this.focusEnterHandler);
}

Aplicación personal

En el ejemplo se muestran las opciones para agregar la API registerOnFocussed

Aplicación personal: evento Forward

En el ejemplo se muestran las opciones para agregar el movimiento hacia delante de la API registerOnFocussed

Aplicación personal: evento Backward

En el ejemplo se muestran las opciones para agregar el movimiento hacia atrás de la API registerOnFocussed

Tab

En el ejemplo se muestran las opciones para agregar la API registerOnFocussed para la pestaña

Paso siguiente

Consulte también