SharePoint Embedded para Visual Studio Code

La extensión Visual Studio Code de SharePoint Embedded ayuda a los desarrolladores a empezar de forma gratuita con el desarrollo de aplicaciones de SharePoint Embedded.

Importante

Para empezar a compilar con SharePoint Embedded, necesitará acceso administrativo a un inquilino de Microsoft 365. Si aún no tiene un inquilino, puede obtener su propio inquilino con el Programa para desarrolladores de Microsoft 365, experiencia digital del cliente de Microsoft o crear una evaluación gratuita de una licencia de Microsoft 365 E3.

Instalación de SharePoint Embedded para Visual Studio Code

1. Abra una nueva ventana en Visual Studio Code y vaya a "Extensiones" en la barra de actividad.
2. Busque "SharePoint Embedded" en la vista Extensiones. También puede ver la extensión en Visual Studio Marketplace.
3. Seleccione "Instalar" y el icono de SharePoint Embedded aparecerá en la barra de actividad.
4. Si ya está instalado, actualice a la versión más reciente si hay una disponible.
5. Seleccione el icono para abrir la vista de SharePoint Embedded y crear un tipo de contenedor con configuración de prueba.

Inicio de sesión con credenciales de administrador

Para usar la extensión, debe iniciar sesión en un inquilino de Microsoft 365 con una cuenta de administrador.

• La autenticación abre una nueva pestaña en un explorador externo para conceder permisos

  

• Revise cuidadosamente los permisos solicitados y, a continuación, seleccione Aceptar en la ventana emergente que solicita el consentimiento del administrador.

  

Después de la autorización correcta, seleccione Abrir en el cuadro de diálogo para redirigirlo a VSCode:

Creación de un tipo de contenedor con una configuración de prueba

Una vez que haya iniciado sesión, se le pedirá que cree un tipo de contenedor con configuración de prueba. Un tipo de contenedor le permite empezar a llamar a las API de SharePoint Embedded y crear una aplicación de prueba de concepto mediante SharePoint Embedded. Más información sobre los tipos de contenedor.

• Seleccione Crear tipo de contenedor de prueba.
• Siga las indicaciones para asignar un nombre al tipo de contenedor. Puede cambiar el nombre del tipo de contenedor más adelante.

Nota:

SharePoint Embedded para Visual Studio Code solo admite tipos de contenedor con configuración de prueba en este momento. Se deben crear otros tipos de contenedor con configuraciones de facturación estándar o de paso a través mediante el módulo de PowerShell de SharePoint Online.

Creación de una aplicación de Microsoft Entra ID

Cada tipo de contenedor es propiedad de una aplicación Microsoft Entra ID. El primer paso al crear un tipo de contenedor de prueba gratuita es crear un nuevo o seleccionar una aplicación Microsoft Entra ID existente como aplicación propietaria. Puede especificar el nombre de la nueva aplicación o elegir una de las aplicaciones existentes. Más información sobre la arquitectura de aplicaciones de SharePoint Embedded

• Siga las indicaciones para asignar un nombre a la nueva aplicación Entra o seleccione un identificador de aplicación existente:

Nota:

Si elige una aplicación existente, la extensión actualizará la configuración de esa aplicación para que funcione con SharePoint Embedded y esta extensión. No se recomienda hacerlo en aplicaciones de producción.

Una vez creado el tipo de contenedor y configurada la aplicación, podrá ver el registro de inquilino local como un árbol en la barra de navegación izquierda.

Registro del tipo de contenedor

Después de crear el tipo de contenedor, deberá registrar ese tipo de contenedor en el inquilino local. Obtenga más información sobre el registro de tipos de contenedor.

• Siga las indicaciones y seleccione Registrarse en el inquilino local en la esquina inferior derecha de la ventana de VS Code.

  

• Si no ve el mensaje, puede hacer clic con el botón derecho en el <container-type-name> y seleccionar Registrar en el menú.

  

Conceder permisos

Revise los permisos y siga el símbolo del sistema para conceder el consentimiento del administrador.

Aparecerá una ventana del explorador externo para que pueda iniciar sesión y conceder el consentimiento del administrador.

Creación del primer contenedor

Con el tipo de contenedor registrado, ahora puede crear el primer contenedor. Solo se pueden crear cinco contenedores de tipo contenedor para cargar y administrar contenido.

• Haga clic con el botón derecho en la lista desplegable Contenedores del árbol de la barra de navegación izquierda y seleccione Crear contenedor.
• Escriba un nombre para el contenedor que desea crear.

contenedor

Reciclaje de contenedores

También puede reciclar y recuperar contenedores dentro de la extensión.

Cargar aplicación de ejemplo

Con el tipo de contenedor de prueba gratuita creado, puede usar la extensión para cargar una de las aplicaciones de ejemplo de SharePoint Embedded y rellenar automáticamente el archivo de configuración en tiempo de ejecución con los detalles de la aplicación Microsoft Entra ID y el tipo de contenedor.

Al cargar la aplicación de ejemplo, se le notificará que creará secretos de texto sin formato para autenticarse en el equipo local.

Si no se encuentra ningún secreto de cliente en la aplicación, se le preguntará si desea crear uno. Presione Aceptar para continuar.

Importante

Esto no está pensado para entornos de producción. Obtenga más información sobre cómo configurar el registro de aplicaciones para entornos de producción aquí.

Uso de la aplicación de ejemplo

En el terminal, ejecute el siguiente comando; esto iniciará la aplicación de ejemplo, que consta de dos partes:

1. React aplicación cliente: la interfaz de usuario de front-end que se ejecuta en el puerto 8080
2. Azure Function Application Server: el servidor de API back-end que controla las operaciones de SharePoint Embedded

# Navigate to your sample application directory
cd [your-path]\SharePoint-Embedded-Samples\Samples\spe-typescript-react-azurefunction

# Install dependencies and start the application
npm run start

Nota:

El inicio inicial puede tardar unos minutos a medida que se instalan las dependencias y se crean ambas aplicaciones. Espere a que aparezcan ambas salidas de consola antes de navegar a la aplicación.

Esto instalará las dependencias y ejecutará el servidor y la aplicación cliente, una vez que se ejecute, verá lo siguiente en el terminal, después de lo cual puede navegar hasta para acceder a http://localhost:8080 la aplicación.

Una vez que ambas aplicaciones se ejecutan correctamente:

1. Abra el explorador web y vaya a http://localhost:8080
2. Inicie sesión con su cuenta de administrador de Microsoft 365 (la misma cuenta usada en la extensión VS Code)
3. En la página principal, seleccione "Contenedores" para empezar a crear contenedores y cargar archivos.
4. Siga las indicaciones en pantalla para interactuar con los contenedores de SharePoint Embedded.

Importante

Esta aplicación de ejemplo almacena los secretos de autenticación en texto sin formato solo con fines de desarrollo. Nunca use esta configuración en un entorno de producción.

Solución de problemas

Si tiene problemas:

• Puerto ya en uso: si el puerto 8080 ya está en uso, la aplicación probará automáticamente el siguiente puerto disponible.
• Dependencias que no se instalan: intente ejecutar manualmente npm install antes npm run start
• Errores de autenticación: asegúrese de que la aplicación de Microsoft Entra ID está configurada correctamente con los URI de redireccionamiento correctos.

Exportación del entorno de Postman

La colección Postman de SharePoint Embedded le permite explorar y llamar a las API de SharePoint Embedded. La colección requiere un archivo de entorno con variables usadas para la autenticación y varios identificadores. Esta extensión automatiza la generación de este archivo de entorno rellenado para que pueda importarlo en Postman y llamar inmediatamente a las API de SharePoint Embedded.