Compartir a través de

Crear aplicaciones de reuniones en Microsoft Teams con SPFx

  • Artículo

La versión SharePoint Framework (SPFx) v1.8 introdujo la capacidad de usar elementos web SPFx para implementar pestañas de Microsoft Teams. El uso de SharePoint Framework puede simplificar el desarrollo de aplicaciones de Microsoft Teams, como se explica en Compilación para Microsoft Teams mediante SharePoint Framework.

Los desarrolladores pueden crear aplicaciones para reuniones de Microsoft Teams con las mismas técnicas que se usan para crear pestañas personalizadas. En este tutorial, aprenderá a implementar una aplicación de reunión personalizada de Microsoft Teams mediante un elemento web SPFx.

Las aplicaciones de reunión de Microsoft Teams deben admitir pestañas configurables en el ámbito de groupchat . Esto habilita los chats previos y posteriores a la reunión. Consulte la siguiente documentación para conocer los requisitos adicionales: Creación de aplicaciones para reuniones de Teams: Requisitos previos y consideraciones

Importante

Este tutorial requiere SPFx v1.11 o posterior.

Crear un proyecto de pestaña de Microsoft Teams

  1. Cree un directorio de proyecto nuevo en su ubicación favorita:

    md teams-meeting-app

  2. Vaya al directorio del proyecto:

    cd teams-meeting-app

  3. Ejecute el generador de Yeoman de SharePoint Framework para crear una nueva solución:

    yo @microsoft/sharepoint

  4. En el momento en que se le solicite, introduzca los siguientes valores (seleccione la opción predeterminada para todas las solicitudes que se omitan a continuación):

    • ¿Cuál es el nombre de la solución?: teams-meeting-app
    • ¿Quiere permitir que el administrador de espacios empresariales pueda implementar la solución en todos los sitios inmediatamente sin ejecutar ninguna implementación de características ni agregar aplicaciones en sitios?: Sí
    • ¿Cuál es el tipo de componente del lado cliente que se va a crear?: Elemento web
    • ¿Cuál es el nombre del elemento web?: MyFirstTeamsMeetingApp
    • ¿Cuál es la descripción del elemento web?: mi primera aplicación de reunión de Microsoft Teams
    • ¿Qué marco le gustaría usar?: Ningún marco web de JavaScript

    En este punto, Yeoman crea los archivos de carpetas & para el proyecto y, a continuación, instala las dependencias necesarias.

  5. Después, escriba lo siguiente para abrir el proyecto de elemento web en Visual Studio Code:

    code .

Actualizar el manifiesto del elemento web para que esté disponible para Microsoft Teams

Busque el archivo ./src/webparts/**/manifest.json del elemento web que usará como pestaña para la solución de la aplicación de reunión. Busque la supportedHosts propiedad para incluir "TeamsTab":

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "..",
  "alias": "MyFirstTeamsMeetingAppWebPart",
  "componentType": "WebPart",
  "version": "*",

  //...

  "supportedHosts": ["SharePointWebPart", "TeamsTab"],

  //...
}

Actualizar el código para estar al corriente del contexto de Microsoft Teams

  1. Abra ./src/webparts/helloWorld/MyFirstTeamsTabWebPart.ts para hacer las ediciones necesarias y hacer que la solución conozca el contexto de Microsoft Teams, si se usa como una pestaña.

  2. Actualice el método render() de la siguiente manera.

    Observe cómo representamos contenido diferente dependiendo de si el código se representa como una pestaña en Microsoft Teams o como un elemento web en SharePoint. Podemos detectar si la solución se hospeda en Microsoft Teams al comprobar la propiedad this.context.sdks.microsoftTeams.

    public render(): void {

  let title: string = 'ERR: not in Microsoft Teams';
  let subTitle: string = 'ERR: not in Microsoft Teams';

  if (this.context.sdks.microsoftTeams) {
    if (this.context.sdks.microsoftTeams.context.meetingId) {
      title = "Welcome to Microsoft Teams!";
      subTitle = "We are in the context of following meeting: " + this.context.sdks.microsoftTeams.context.meetingId;
    } else {
      title = "Welcome to Microsoft Teams!";
      subTitle = "We are in the context of following team: " + this.context.sdks.microsoftTeams.context.teamName;
    }
  }

  this.domElement.innerHTML = `
    <div class="${ styles.myFirstTeamsMeetingApp }">
      <div class="${ styles.container }">
        <div class="${ styles.row }">
          <div class="${ styles.column }">
            <span class="${ styles.title }">${title}</span>
            <p class="${ styles.subTitle }">${subTitle}</p>
          </div>
        </div>
      </div>
    </div>`;
}

Preparación de la aplicación de Microsoft Teams para la implementación

Cuando se usa una solución SPFx en una aplicación de Microsoft Teams, debe implementarse en SharePoint Online y Microsoft Teams. Consulte Opciones de implementación para SharePoint Framework soluciones para Microsoft Teams para obtener más información sobre las opciones de implementación.

Las aplicaciones de reunión requieren detalles en el archivo de manifiesto de aplicación de Microsoft Teams que SharePoint Online no crea automáticamente. Por lo tanto, debe usar la opción de paquete de manifiesto & de aplicación de Microsoft Teams proporcionada por el desarrollador .

Esto significa que tendrá que crear el archivo de manifiesto de la aplicación y el archivo del paquete de la aplicación.

Creación del manifiesto de aplicación de Microsoft Teams

Cree un nuevo archivo ./teams/manifest.json.

Agregue el siguiente JSON al archivo:

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
  "manifestVersion": "1.8",
  "packageName": "{{SPFX_PACKAGE_NAME}}",
  "id": "{{SPFX_COMPONENT_ID}}",
  "version": "1.0",
  "developer": { .. },
  "name": {
    "short": "{{SPFX_COMPONENT_NAME}}"
  },
  "description": {
    "short": "{{SPFX_COMPONENT_SHORT_DESCRIPTION}}",
    "full": "{{SPFX_COMPONENT_LONG_DESCRIPTION}}"
  },
  "icons": {
    "outline": "{{SPFX_COMPONENT_ID}}_outline.png",
    "color": "{{SPFX_COMPONENT_ID}}_color.png"
  },
  "accentColor": "#004578",
  "configurableTabs": [
    {
      "configurationUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26componentId={{SPFX_COMPONENT_ID}}",
      "canUpdateConfiguration": false,
      "scopes": [
        "team",
        "groupchat"
      ],
      "context": [
        "channelTab",
        "privateChatTab",
        "meetingSidePanel",
        "meetingDetailsTab",
        "meetingChatTab"
      ]
    }
  ],
  "validDomains": [
    "*.login.microsoftonline.com",
    "*.sharepoint.com",
    "resourceseng.blob.core.windows.net"
  ],
  "webApplicationInfo": {
    "resource": "https://{teamSiteDomain}",
    "id": "00000003-0000-0ff1-ce00-000000000000"
  }
}

Con el manifiesto de aplicación básico de Teams creado, debe realizar los siguientes cambios en él:

  • Busque los valores {{SPFX_COMPONENT_*}} en json... estos valores deben actualizarse. Establezca las varias instancias de {{SPFX_COMPONENT_ID}} en el identificador del componente. Esto se encuentra en la id propiedad del archivo ./src/webparts/**/manifest.json .
  • Reemplace la packageName propiedad por el nombre de la aplicación de Teams.
  • Reemplace el developer objeto por el mismo objeto y valores establecidos en el archivo ./config/package-solution.json .
  • Reemplace los name&description objetos por valores reales que indican el nombre y la descripción de la aplicación.

Nota:

Para obtener información sobre las propiedades del manifiesto de aplicación de Microsoft Teams, consulte Esquema de manifiesto para Microsoft Teams.

Importante

No reemplace la {teamSiteDomain} cadena en el archivo de manifiesto de la aplicación. Microsoft Teams reemplaza este marcador de posición por la dirección URL de SharePoint Online del inquilino en tiempo de ejecución.

Creación del paquete de aplicaciones de Microsoft Teams

Para que la solución SPFx esté disponible para su uso en Microsoft Teams, debe empaquetarse implementada & en SharePoint Online.

  1. Cree el paquete de la aplicación Microsoft Teams denominado TeamsSPFxApp.zip comprimiendo el contenido de la carpeta ./teams.

    Importante

    No comprima la carpeta, en su lugar, comprima el contenido de la carpeta. Si zip la carpeta, creará una subcarpeta de nivel superior en el archivo ZIP resultante que no es un paquete de aplicación válido para Microsoft Teams.

  2. Guarde TeamsSPFxApp.zip en la carpeta ./src/teams de la solución SPFx.

Empaquetar e implementar en SharePoint Online

  1. Ejecute los comandos siguientes para compilar la solución. Se ejecutará una compilación de versión del proyecto con una etiqueta dinámica como la dirección URL de host para los activos.

    gulp bundle --ship

  2. Ejecute la siguiente tarea para empaquetar la solución. Esto crea un paquete ./sharepoint/solution/*.sppkg actualizado.

    gulp package-solution --ship

  3. A continuación, implemente el paquete que se generó en el catálogo de aplicaciones del inquilino.

    Vaya al Catálogo de aplicaciones del inquilino de SharePoint.

  4. Cargue o arrastre y coloque ./sharepoint/solution/*.sppkg en el catálogo de aplicaciones del inquilino.

    Cargar la solución en el Catálogo de aplicaciones

    Esto implementa el paquete de solución del lado cliente.

    Asegúrese de que la opción Hacer que esta solución esté disponible para todos los sitios de la organización esté seleccionada para que Microsoft Teams pueda usar el elemento web.

    Implementación de la solución del lado cliente de confianza

  5. Seleccione Implementar.

En este momento, la solución se implementa en SharePoint Online y está disponible para todos los sitios de SharePoint Online.

Publicación de la aplicación de reunión en la tienda de aplicaciones de Microsoft Teams

Para que la aplicación de reunión esté disponible en Microsoft Teams, tendrá que sincronizar la solución con los equipos.

Nota:

Durante la fase de prueba, puede transferir localmente la aplicación de reunión a Microsoft Teams en lugar de implementarla en la tienda de aplicaciones de su organización. Para ello, puede omitir esta sección y ir a la sección Probar la aplicación de reunión .

  1. Seleccione el paquete en el catálogo de aplicaciones del inquilino de SharePoint y seleccione el botón Sincronizar con Teams en la cinta de opciones de la pestaña Archivos .

    Botón sincronizar con Teams de la cinta de opciones

    SharePoint Online detectará el archivo TeamsSPFxApp.zip en el paquete *.sppkg e lo implementará en la tienda de aplicaciones de Microsoft Teams en lugar de crear automáticamente el manifiesto de la aplicación y el paquete de la aplicación.

  2. Confirme que puede ver el mensaje de estado en la esquina superior derecha.

    Botón Sincronizar con Teams en el mensaje de estado de la cinta

Prueba de la aplicación de reunión

El último paso es probar la aplicación de reunión en Microsoft Teams. Para ello, creará una reunión que no sea una reunión de canal y que tenga al menos una persona invitada a ella:

  1. Abra el cliente de escritorio de Microsoft Teams.

  2. Cree una nueva reunión con la aplicación Calendario en la barra de aplicaciones de la izquierda.

  3. Invitar a alguien a unirse a la reunión.

  4. Guarde la reunión.

  5. En la aplicación Calendario , abra la reunión de prueba que ha creado.

  6. Seleccione el + botón (más) situado a la derecha de las pestañas existentes.

    Pestaña Agregar reunión

  7. Selección de la aplicación de reunión personalizada

Una vez instalada la aplicación en la reunión, cuando vuelvas a la página de detalles de la reunión, verás la aplicación como una nueva pestaña. La pestaña se cargará en la experiencia previa o posterior a la reunión, como se muestra en la captura de pantalla siguiente:

Seleccionar aplicación de reunión

Importante

En el momento actual, la experiencia en la reunión de una aplicación de reunión de Teams basada en SPFx no funciona. Durante una reunión, si selecciona la aplicación, la aplicación de reunión se cargará en una pestaña, pero representará una página de error de SharePoint Online.

Esto se debe actualmente a una limitación en Microsoft Teams que se resolverá en el primer semestre de 2021.

Vea también