Ejercicio: Implementación de soluciones de SharePoint Framework en Microsoft Teams
- 13 minutos
En este ejercicio, creará una solución de elemento web SharePoint Framework que funciona tanto en SharePoint Online como en una pestaña en Microsoft Teams.
Requisitos previos
Importante
En la mayoría de los casos, instalar la última versión de las siguientes herramientas es la mejor opción. Las versiones enumeradas aquí fueron usadas la última vez que se publicó y se probó este módulo.
- Node.js v18.*
- Gulp-cli v3.*
- Yeoman v5.*
- Generador de Yeoman para SharePoint v1.20.0
- Visual Studio Code
Crear un proyecto de SharePoint Framework
Abra un símbolo del sistema y cambie a la carpeta donde quiere crear el proyecto.
A continuación, ejecute el generador de Yeoman de SharePoint mediante el comando siguiente:
yo @microsoft/sharepoint
Use lo siguiente para completar el mensaje que se muestra (si se presentan más opciones, acepte la respuesta predeterminada):
- ¿Cómo se llama la solución?: spfxteams
- ¿Cuál es el tipo de componente del lado cliente que se va a crear?: Elemento web
- ¿Cómo se llama el elemento web?: SPFx Teams Together
- ¿Qué plantilla desea usar? Sin marco
Una vez llevado a cabo el aprovisionamiento de las carpetas necesarias para el proyecto, el generador instalará npm install automáticamente todos los paquetes de dependencias. Cuando NPM complete la descarga de todas las dependencias, abra el proyecto en Visual Studio Code.
Habilitar el elemento web que se va a usar en Microsoft Teams
Busque y abra el archivo ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.manifest.json:
En el archivo de manifiesto del elemento web, busque la propiedad supportedHosts. Asegúrese de que el valor de la propiedad incluye SharePointWebPart y TeamsTab. No pasa nada si el valor de la propiedad también incluye TeamsPersonalApp y/o SharePointFullPage:
"supportedHosts": ["SharePointWebPart", "TeamsTab"],
Crear e implementar el paquete de aplicación de Microsoft Teams
Observe que el proyecto contiene una carpeta Teams que incluye dos imágenes. Se usan en Microsoft Teams para mostrar la pestaña personalizada.
Nota:
Es posible que observe que no hay ningún archivo manifest.json presente. SharePoint puede generar automáticamente el archivo de manifiesto desde el sitio Catálogo de aplicaciones o puede crearlo usted manualmente. Para más información sobre la creación manual del archivo de manifiesto, vea la documentación Opciones de implementación de las soluciones de SharePoint Framework para Microsoft Teams.
En este ejercicio, creará manualmente el archivo de manifiesto de Microsoft Teams para que pueda familiarizarse con su contenido.
Crear manualmente el manifiesto de Microsoft Teams
Busque la carpeta ./teams en el proyecto.
Cree un archivo manifest.json en la carpeta teams y agréguele el código siguiente:
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.19/MicrosoftTeams.schema.json",
"manifestVersion": "1.19",
"id": "{{SPFX_COMPONENT_ID}}",
"version": "1.0.0",
"developer": {
"name": "Parker Porcupine",
"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",
"spoprod-a.akamaihd.net",
"resourceseng.blob.core.windows.net"
],
"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. Las propiedades del componente de SharePoint Framework se encuentran en el archivo de manifiesto del elemento web: ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.manifest.json
| cadena manifest.json | Propiedad en el manifiesto del componente de SharePoint Framework |
|---|---|
{{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}).
Crear manualmente el paquete de la aplicación de Microsoft Teams
Busque la carpeta ./teams en el proyecto.
Cree un archivo ZIP que contenga los tres archivos de la carpeta: las dos imágenes y el archivo manifest.json.
Importante
Comprima el contenido de la carpeta, no la propia carpeta.
Asigne un nombre al archivo ZIP TeamsSPFxApp.zip y guárdelo en la carpeta teams. La carpeta teams ahora debe contener cuatro archivos.
Crear e implementar el paquete de SharePoint
Para probar el elemento web en SharePoint y Microsoft Teams, primero debe implementarse en un catálogo de aplicaciones.
Abra un símbolo del sistema y cambie a la carpeta raíz del proyecto para compilarlo. Ejecute el comando siguiente:
gulp build
Después, ejecute el comando siguiente en la línea de comandos desde la raíz del proyecto para crear una agrupación de producción del proyecto:
gulp bundle --ship
Por último, cree un paquete de implementación del proyecto ejecutando el siguiente comando en la línea de comandos desde la raíz del proyecto:
gulp package-solution --ship
Arrastre el paquete creado en los pasos anteriores, ubicado en ./sharepoint/solution/deployment-demo.sppkg del proyecto, hasta la biblioteca de Aplicaciones para SharePoint.
En el panel Habilitar aplicación , asegúrese de que el botón de radio Habilitar esta aplicación y agregarla a todos los sitios está seleccionado y, a continuación, seleccione Habilitar aplicación. Esto hará que el elemento web esté disponible para todas las colecciones de sitios del inquilino, incluidas las que están detrás de un equipo de Microsoft Teams.
En el panel Esta aplicación se ha habilitado, seleccione Cerrar.
El último paso es publicar la aplicación de Microsoft Teams en la tienda de Microsoft Teams del espacio empresarial. Seleccione el paquete de SharePoint que cargó. Después, seleccione el botón Agregar a Teams en la barra de comandos.
Probar el elemento web de SharePoint Framework en SharePoint
En el navegador, vaya a una página moderna de SharePoint.
Seleccione el botón Editar en la parte superior derecha de la página.
En el explorador, seleccione el botón de icono del elemento web para abrir la lista de elementos web disponibles:
Busque el elemento web SPFx Teams Together y selecciónelo
El elemento web de SharePoint Framework aparecerá en la página tal como se muestra en la ilustración siguiente:
Probar el elemento web de SharePoint Framework en Microsoft Teams
Primero, cree un equipo de Microsoft Teams.
Con el mismo navegador en el que ha iniciado sesión en SharePoint Online, vaya a https://teams.microsoft.com. Cuando se le solicite, cargue el cliente web.
Seleccione el icono + en la parte superior de la lista de equipos en la parte izquierda del cliente de Teams y seleccione Crear equipo:
En el cuadro de diálogo Crear un equipo , establezca el nombre de equipo Mi primer equipo y seleccione Crear.
En el cuadro de diálogo Agregar miembros a mi primer equipo, seleccione Omitir.
Instalar la aplicación de Microsoft Teams como una nueva pestaña
Seleccione el equipo creado anteriormente Mi primer equipo.
Seleccione el canal General
Agregue una pestaña personalizada al equipo mediante el elemento web de SharePoint Framework.
En la parte superior de la página, seleccione el icono + en la navegación horizontal:
En el cuadro de diálogo Agregar una pestaña, seleccione Obtener más aplicaciones.
Seleccione Diseñadas para su organización.
Seleccione la aplicación SpFx Teams Together.
En el cuadro de diálogo SPFx Teams Together, seleccione el botón Agregar a un equipo.
En el cuadro de diálogo siguiente, seleccione el canal General en el equipo Mi primer equipo y seleccione Configurar una pestaña.
El siguiente cuadro de diálogo confirmará la instalación de la aplicación. Seleccione Guardar.
La aplicación ahora debe cargarse en Microsoft Teams en el canal General en la pestaña Teams juntos de SPFx.
Seleccione la X en la esquina superior derecha del panel de propiedades para cerrar la configuración inicial.
Resumen
En este ejercicio, creará una solución de elementos web de SharePoint Framework que funciona tanto en SharePoint Online como en una pestaña en Microsoft Teams.
Comprobar sus conocimientos
Comentarios
¿Le ha resultado útil esta página?
No
¿Necesita ayuda con este tema?
¿Desea intentar usar Ask Learn para aclarar o guiarle a través de este tema?