Introducción al desarrollo de Microsoft Teams y SharePoint Framework

11 minutos

En esta unidad, aprenderá a usar sus aptitudes de SharePoint Framework para crear aplicaciones personalizadas de Microsoft Teams.

Opciones de extensibilidad de Microsoft Teams

Microsoft Teams ofrece a los desarrolladores varias opciones de extensibilidad.

Los desarrolladores pueden crear una aplicación personalizada de Microsoft Teams que puede constar de una pestaña personalizada en un equipo. La aplicación de equipos personalizados también puede incorporar bots existentes, extensiones de mensajería y conectores.

Otra opción para los desarrolladores es crear un bot personalizado que puede recibir y responder a mensajes de un usuario en chats directos, chats grupales y el canal Conversaciones. Los bots son una buena opción para implementar interacciones breves con los usuarios.

Información general: crear una pestaña de Microsoft Teams

En Microsoft Teams, un equipo consta de varios canales. Cada canal tiene una o varias pestañas. Una de las opciones de extensibilidad más populares en las aplicaciones personalizadas de Microsoft Teams es la creación de pestañas personalizadas. Echemos un vistazo a lo que implica crear una pestaña de Microsoft Teams.

Diseñar la pestaña personalizada

El primer paso es diseñar la pestaña. Para empezar, identifique la funcionalidad pertinente que desea hacer en la pestaña. Las pestañas funcionan mejor cuando se crean para abordar una necesidad específica. Atención a un conjunto pequeño de tareas o un subconjunto de datos que sea relevante para el canal en el que se encuentra la pestaña.

Una pestaña de Microsoft Teams es solo una página web representada en .<iframe> A diferencia de una página web normal, las páginas que se usan como pestañas deben tener un cromo reducido. Evite crear varios paneles en una pestaña, agregar capas de navegación o requerir que los usuarios se desplacen vertical y horizontalmente en una pestaña.

Piense en cómo integrar su pestaña en la experiencia de Microsoft Teams. Por ejemplo, notifique a los usuarios sobre la actividad de pestañas mediante la publicación de tarjetas en conversaciones. Piense en cómo puede ayudar a las conversaciones en torno a una pestaña. Esto garantiza que las conversaciones se centren en el contenido, datos o proceso en cuestión.

Desarrollar pestañas personalizadas

Las pestañas son simplemente páginas web cargadas en un <iframe> cliente de Microsoft Teams. No hay requisitos técnicos para una plataforma o tecnología web específica que los desarrolladores tengan que implementar o usar para crear pestañas personalizadas. En última instancia, la página usará HTML y JavaScript para implementar la interfaz y las interacciones.

Las páginas que implementan pestañas pueden llamar a servicios REST y vincular a otro contenido dentro de otros canales y equipos de Microsoft Teams.

Los desarrolladores pueden usar las herramientas que quieran, como Visual Studio, Visual Studio Code, Eclipse, WebStorm o incluso el Bloc de notas para desarrollar pestañas personalizadas.

Implementar la pestaña

Le interesará implementar la pestaña en Microsoft Teams una vez que la haya creado. Registrará la pestaña en una aplicación personalizada de Microsoft Teams. El siguiente paso es obtener la aplicación en Microsoft Teams.

Puede cargar la aplicación personalizada de Microsoft Teams directamente en Microsoft Teams, en la Galería de aplicaciones de su inquilino para que cualquier persona de su organización pueda instalarla o en la Tienda Office para que cualquier persona pueda instalarla y usarla.

Configuración y contenido de pestañas

La configuración de la pestaña se encuentra en el archivo de manifiesto de la aplicación personalizada de Microsoft Teams. El archivo de manifiesto define las distintas opciones de configuración que se muestran cuando se agrega la pestaña al canal.

Al usar elementos web del lado cliente de SharePoint Framework para crear pestañas para Microsoft Teams, verá que la configuración funciona principalmente de la misma manera. Hay algunas diferencias sutiles que exploraremos más adelante en el módulo.

Recuerdos que todo el contenido de una pestaña se representa en un <iframe>objeto . La pestaña y la página de configuración tendrán una dirección URL que usa Microsoft Teams para conocer la ubicación de la página que se va a cargar en <iframe>.

La pestaña y la página de configuración usarán el contexto de Microsoft Teams para inspeccionar los EntityId y SubEntityIdde la pestaña. Se trata de identificadores que identifican de forma única la pestaña. El SubEntityId se usa a veces para almacenar información de configuración simple.

Interactuar con Microsoft Teams desde pestañas

Las pestañas pueden interactuar con Microsoft Teams y Microsoft Teams se comunica con una pestaña de dos maneras diferentes: marcadores de posición de URL y un contexto.

Obtener contexto de Microsoft Teams a través de marcadores de posición de URL

Cuando se carga una pestaña, Microsoft Teams reemplazará las cadenas conocidas en la dirección URL antes de cargar la pestaña. Por ejemplo, el identificador de la configuración actual del equipo, el canal y el tema se agrega a la dirección URL cuando se incluyen {teamId}, {channelId} y {theme} respectivamente. Estos valores se resuelven en tiempo de ejecución y permiten a los desarrolladores personalizar la pestaña en función de esta información.

Por ejemplo, cuando se carga la pestaña, puede obtener el tema actual de Microsoft Teams establecido por el usuario y coincidir con el tema de la pestaña. Esto supone una gran experiencia para los usuarios, ya que la pestaña puede parecer parte de Microsoft Teams. Si el usuario cambia el tema seleccionado, se actualiza la dirección URL y la pestaña puede detectar el tema recién seleccionado.

Obtener el contexto de Microsoft Teams a través de la biblioteca de JavaScript

Otra opción que puede usar la pestaña personalizada para obtener el contexto de Microsoft Teams es a través del SDK de JavaScript de Microsoft Teams. Para obtener contexto, puede llamar al método microsoftTeams.getContext() y pasar una devolución de llamada correcta que devuelva el contexto actual de Microsoft Teams.

En la tabla siguiente se enumeran algunas de las propiedades destacadas a las que tiene acceso en el contexto de Microsoft Teams:

Propiedad	Descripción
`teamId`	El identificador del equipo actual.
`channelId`	El identificador del canal actual.
`locale`	La configuración regional actual establecida en Microsoft Teams tiene el formato de idioma y configuración regional en minúsculas.
`theme`	predeterminado, oscuro o contraste
`entityId`	El identificador de entidad que estableció en la página de configuración.
`subEntityId`	El identificador de subentidad que estableció en la página de configuración.
`upn`	El identificador de usuario en formato de correo electrónico.
`tid`	GUID que identifica el identificador de espacio empresarial actual.
`groupId`	GUID que identifica el Id. de grupo de Office 365 actual.

Ventajas de usar SharePoint Framework para ampliar Microsoft Teams

En 2019, Microsoft introdujo la capacidad de usar un elemento web del lado cliente de SharePoint Framework como una pestaña en Microsoft Teams. Como hemos tratado anteriormente, una pestaña de Microsoft Teams es simplemente una página web cargada en .<iframe>

Crear una pestaña de Microsoft Teams con un elemento web SharePoint Framework es casi lo mismo que crear un elemento web para un sitio de SharePoint. Técnicamente puede exponer cualquier elemento web como una pestaña en Microsoft Teams.

Para habilitar un elemento web del lado cliente que se usará como pestaña en Microsoft Teams, tendrá que actualizar una única propiedad en el manifiesto del componente.

Al usar un elemento web del lado del cliente como host de una pestaña de Microsoft Teams, la dirección URL de la pestaña es una página de SharePoint Online que contiene un único lienzo en la página. Los parámetros de dirección URL le dicen a la página de SharePoint qué elemento web cargar en el lienzo. Esta dirección URL se usa en el <iframe> elemento que implementa la pestaña.

La pestaña o el elemento web del lado cliente se ejecuta en el contexto del sitio de SharePoint detrás del equipo donde se agrega la pestaña. La implicación de hospedar la pestaña en SharePoint significa que los desarrolladores pueden usar la API de SharePoint Framework en sus pestañas personalizadas. Por ejemplo, dado que el elemento web del lado cliente se ejecuta en SharePoint Online, puede acceder a la API REST de SharePoint, Microsoft Graph y Microsoft Entra ID puntos de conexión protegidos desde la API de SharePoint Framework sin necesidad de forzar al usuario a autenticarse de nuevo.

Cómo mostrar elementos web de SharePoint Framework como pestañas de Microsoft Teams

El proceso de configuración de un elemento web del cliente de SharePoint Framework para que se pueda usar como pestaña de Microsoft Teams es sencillo. Suponiendo que haya creado y probado su elemento web del cliente de SharePoint Framework, hay tres acciones para realizar:

Especificar que el elemento web puede ser una pestaña: busque el archivo de manifiesto del elemento web. En el archivo de manifiesto, busque la matriz de propiedad supportedHosts. En supportedHosts de tabla se enumeran todos los lugares diferentes en los que se puede ejecutar el elemento web. De forma predeterminada, contiene una única entrada SharePointWebPart. Para configurar el elemento web que se usará como pestaña de Microsoft Teams, agregue un TeamsTab a la matriz.
Crear imágenes de pestañas de Microsoft Teams: Cuando se crea un nuevo proyecto de SharePoint Framework, se crea una carpeta ./teams en el proyecto de SharePoint con dos imágenes. Microsoft Teams usa las imágenes , denominadas {SP_COMPONENT_GUID}_color.pngy {SP_COMPONENT_GUID}_outline.png, al mostrar la pestaña. Puede reemplazar estas imágenes predeterminadas por sus propias imágenes personalizadas, pero asegúrese de no cambiar las dimensiones de tamaño ni los nombres de los archivos.
Crear manifiesto de aplicación de Microsoft Teams: todas las aplicaciones de Microsoft Teams necesitan un manifiesto de aplicación que describa la aplicación. Puede crear el manifiesto usted mismo o puede dejar que SharePoint lo cree.

Crear manifiesto de aplicación de Microsoft Teams e implementación en Microsoft Teams

El manifiesto de aplicación de Microsoft Teams informa a Microsoft Teams sobre su aplicación personalizada. Contiene el nombre y la ubicación de las imágenes, el nombre y la descripción de las pestañas, la ubicación de la aplicación y otra información sobre la aplicación.

Al usar un elemento web del lado cliente de SharePoint Framework como pestaña, puede crear el manifiesto de la aplicación usted mismo o dejar que SharePoint lo cree automáticamente.

Después de cargar e implementar el paquete de SharePoint en el catálogo de aplicaciones de SharePoint, observará un botón Agregar a Teams en la barra de comandos al seleccionar el paquete.

Captura de pantalla del botón Catálogo de aplicaciones con Sincronización con Teams.

Al seleccionar el botón Agregar a Teams, SharePoint buscará un paquete de aplicación de Teams personalizado denominado TeamsSPFxApp.zip en la carpeta ./teams del proyecto. Si SharePoint no encuentra este archivo, creará dinámicamente el manifiesto y el paquete de la aplicación de Teams. Después, SharePoint implementará el paquete de aplicaciones de Teams (personalizado o generado) en la tienda de aplicaciones de Teams del espacio empresarial. Para obtener más información, vea la documentación: Opciones de implementación de las soluciones de SharePoint Framework para Microsoft Teams.

El código siguiente contiene la plantilla predeterminada para el archivo manifest.json que puede usar como plantilla si crea su propio manifiesto:

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
  "manifestVersion": "1.16",
  "packageName": "{{SPFX_COMPONENT_ALIAS}}",
  "id": "{{SPFX_COMPONENT_ID}}",
  "version": "0.1",
  "developer": {
    "name": "Contoso Developer",
    "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
    "privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
    "termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
  },
  "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}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}",
      "canUpdateConfiguration": true,
      "scopes": [
        "team"
      ]
    }
  ],
  "validDomains": [
    "*.login.microsoftonline.com",
    "*.sharepoint.com",
    "*.sharepoint-df.com",
    "spoppe-a.akamaihd.net",
    "spoprod-a.akamaihd.net",
    "resourceseng.blob.core.windows.net",
    "msft.spoppe.com"
  ],
  "webApplicationInfo": {
    "resource": "https://{teamSiteDomain}",
    "id": "00000003-0000-0ff1-ce00-000000000000"
  }
}

Este archivo contiene varias cadenas que deben actualizarse para que coincidan con el componente de SharePoint Framework. Use la tabla siguiente para determinar los valores que se deben reemplazar.

cadena manifest.json	Propiedad en el manifiesto del componente de SharePoint Framework
`{{SPFX_COMPONENT_ALIAS}}`	`alias`
`{{SPFX_COMPONENT_NAME}}`	`preconfiguredEntries[0].title.default`
`{{SPFX_COMPONENT_SHORT_DESCRIPTION}}`	`preconfiguredEntries[0].description.default`
`{{SPFX_COMPONENT_LONG_DESCRIPTION}}`	`preconfiguredEntries[0].description.default`
`{{SPFX_COMPONENT_ID}}`	`id`

Importante

No se pierda el reemplazo de {{SPFX_COMPONENT_ID}} en configurableTabs[0].configurationUrl. Es probable que tenga que desplazar el editor hasta la derecha para verlo.

Importante

No es necesario reemplazar los tokens rodeados de llaves únicas (por ejemplo, {teamSiteDomain}).

Resumen

En esta unidad, aprendió cómo puede adquirir sus conocimientos de desarrollo de SharePoint Framework existentes y usarlos para crear aplicaciones personalizadas de Microsoft Teams.

Comentarios

¿Le ha resultado útil esta página?