Inicio rápido: Crear su primera aplicación con VS Code

Se aplica a: Desarrollador

Instalar la extensión SharePoint Embedded para Visual Studio Code Para crear un tipo de contenedor, configurar la aplicación propietaria y la facturación, registrar el tipo de contenedor, crear contenedores y cargar una aplicación de ejemplo desde una vista guiada en el editor:

Obtenga la extensión desde Visual Studio Marketplace

Use la extensión SharePoint Embedded Visual Studio Code para crear un tipo de contenedor estándar para la primera aplicación. La extensión también configura la aplicación propietaria, adjunta la facturación de Azure y registra el tipo de contenedor. A continuación, cree un contenedor y ejecute una aplicación de ejemplo local.

En este artículo se inicia el recorrido de compilación. Para obtener más instrucciones de facturación, consulte Creación y configuración de un tipo de contenedor.

Sugerencia

¿Prefiere compilar con un agente de codificación en lugar de una vista guiada? Use el servidor MCP de SharePoint Embedded para aprovisionar y administrar recursos mediante lenguaje natural.

Requisitos previos

Antes de empezar, asegúrate de que tienes:

• Visual Studio Code instalado.
• Acceso administrativo a un inquilino de Microsoft 365.
• Un espacio empresarial con SharePoint disponible.
• Una suscripción de Azure y un grupo de recursos al que puede acceder su cuenta.
• Permisos de propietario o colaborador en la suscripción de Azure.
• Node.js y NPM instalados para la aplicación de ejemplo.
• Permiso para conceder consentimiento de administrador en Microsoft Entra ID.

Importante

Necesita acceso administrativo a un inquilino de Microsoft 365. Si no tiene un inquilino, use el Programa de desarrollador de Microsoft 365, la experiencia digital del cliente de Microsoft o una versión de prueba de Microsoft 365 E3.

Instalación de la extensión

Instale la extensión con el botón en la parte superior de este artículo o desde el editor:

1. Abrir Visual Studio Code.
2. Abre Extensiones desde la barra de actividades.
3. Busque SharePoint Embedded.
4. Seleccione Instalar.
5. Si la extensión ya está instalada, actualícela.
6. Seleccione el icono de SharePoint Embedded en la barra de actividades.

Iniciar sesión

1. En la vista de SharePoint Embedded, seleccione la acción de inicio de sesión.
2. Use una cuenta de administrador de Microsoft 365.
3. Complete la autenticación en el explorador.
4. Revise los permisos solicitados.
5. Seleccione Aceptar para conceder el consentimiento del administrador.
6. Volver a Visual Studio Code cuando se le redirija.

Importante

Revise atentamente la solicitud de consentimiento. La extensión necesita permisos de inquilino para configurar los recursos de desarrollo.

Después de iniciar sesión, la extensión muestra la vista de inicio de SharePoint Embedded.

Crear un tipo de contenedor estándar

Un tipo de contenedor define la relación, los privilegios de acceso, la responsabilidad de facturación y los comportamientos seleccionados de un conjunto de contenedores de SharePoint Embedded.

1. Seleccione Crear tipo de contenedor.
2. Para el método de facturación, selecciona estándar.
3. Escriba un nombre de tipo de contenedor.
4. Siga las indicaciones hasta que se complete la creación.

Use un tipo de contenedor estándar cuando la organización propietaria de la aplicación pague por el uso de SharePoint Embedded. Para la evaluación, elija prueba. Para la facturación cliente-inquilino, elija la opción de transferencia, que usa la directToCustomer clasificación de facturación.

Crear o seleccionar la aplicación propietaria

Cada tipo de contenedor tiene una aplicación de Microsoft Entra ID propietaria.

1. Cree una nueva aplicación de Microsoft Entra ID o seleccione un identificador de aplicación existente.
2. Si crea una nueva aplicación, escriba su nombre.
3. Deje que la extensión configure las opciones de desarrollo.

Precaución

Si selecciona una aplicación existente, la extensión actualiza la configuración de esa aplicación. No use una aplicación de producción para este inicio rápido.

Para obtener el modelo, consulte Arquitectura de aplicaciones de SharePoint Embedded.

Configurar la facturación estándar

Los tipos de contenedor Standard requieren facturación de Azure. La extensión adjunta la facturación mediante una suscripción de Azure y un grupo de recursos al que su cuenta puede acceder.

1. Seleccione una suscripción de Azure.
2. Seleccione un grupo de recursos.
3. Espere a que la extensión registre el proveedor de recursos Microsoft.Syntex y adjunte la facturación.

Si omite la configuración de facturación o no tiene los permisos de Azure necesarios, el árbol muestra Facturación no configurada. Para finalizar la configuración más adelante, haga clic con el botón derecho en el tipo de contenedor. A continuación, selecciona Adjuntar facturación.

Registre el tipo de contenedor localmente

Debe registrar el tipo de contenedor en el inquilino consumidor para que la aplicación pueda crear contenedores o acceder al contenido.

1. Después de la creación, siga las indicaciones para registrar el tipo de contenedor en el inquilino local.
2. Si la indicación no está visible, haga clic con el botón derecho en el tipo de contenedor y seleccione Registrar.
3. Revise los permisos.
4. Otorgue el consentimiento del administrador en el explorador.
5. Vuelva a Visual Studio Code.

El registro configura los permisos que la aplicación propietaria puede usar en contenedores del tipo de contenedor.

Cree su primer contenedor

1. En el árbol de SharePoint Embedded, expanda el tipo de contenedor.
2. Haga clic con el botón derecho en Contenedores.
3. Seleccione Crear contenedor.
4. Escriba un nombre de contenedor.
5. Confirme que el contenedor aparece en el árbol.

Un contenedor es la unidad de almacenamiento básica y el límite de seguridad en SharePoint Embedded.

Cargar una aplicación de ejemplo

1. En la vista de SharePoint Embedded, seleccione Cargar aplicación de ejemplo.
2. Elija una muestra de SharePoint Embedded.

1. Revise la advertencia sobre los secretos locales de texto sin formato.
2. Si se le solicita que cree un secreto de cliente, seleccione Aceptar para el desarrollo local.
3. Deje que la extensión rellene el archivo de configuración en tiempo de ejecución.

Importante

La configuración de ejemplo es solo para desarrollo. Almacena los secretos de autenticación con texto sin formato en el equipo local.

Ejecutar la aplicación de ejemplo

Abra un terminal y ejecute la aplicación de ejemplo desde el directorio de ejemplo generado.

cd [your-path]\SharePoint-Embedded-Samples\Custom Apps\boilerplate-typescript-react
npm run start

Inicio del ejemplo:

• Una aplicación cliente de React.
• Un servidor de aplicaciones de Azure Functions.

Espera a que aparezcan ambas salidas de la consola.

Luego:

1. Abrir http://localhost:8080
2. Inicie sesión con la misma cuenta de administrador de Microsoft 365.
3. Seleccione Contenedores en la página principal.
4. Cree contenedores y cargue archivos desde la interfaz de usuario de ejemplo.

Nota:

El inicio inicial puede tardar varios minutos mientras se instalan las dependencias y se compilan ambas aplicaciones.

Solucionar problemas de inicio

Síntoma	Cheque
Conflicto de puertos	La aplicación prueba el siguiente puerto disponible cuando el puerto 8080 está en uso.
Error en las dependencias	Ejecutar npm instally, a continuación, volver a ejecutar npm run start .
Error de autenticación	Confirme que la aplicación Microsoft Entra ID tiene los URI de redireccionamiento esperados.
Acceso denegado	Confirmar que el registro y el consentimiento del administrador se han realizado correctamente.
Facturación no configurada	Confirme que tiene permisos de propietario o colaborador en la suscripción de Azure seleccionada y, a continuación, use la facturación adjunta.

Limpieza

Cuando haya terminado las pruebas:

1. Retire los recipientes de prueba que ya no necesite.
2. Revise los recursos de facturación de Azure que creó para este inicio rápido.
3. Quite los secretos de ejemplo locales que ya no sean necesarios.

Pasos siguientes

Obtenga más información sobre las opciones de tipo de contenedor en Crear y configurar un tipo de contenedor.