Introducción al complemento Power Pages para GitHub Copilot CLI y Claude Code

El complemento Power Pages para GitHub Copilot CLI y Claude Code proporciona un flujo de trabajo asistido por IA para crear, implementar y administrar sitios modernos de aplicaciones de una sola página (SPA) en Power Pages. En lugar de realizar el andamiaje manualmente para los proyectos, escribir código API reutilizable y configurar permisos, describe lo que desea en lenguaje natural y el complemento se encarga de la implementación.

El complemento admite el ciclo de vida completo de desarrollo de sitios a través de habilidades conversacionales, desde crear la estructura de un nuevo sitio hasta implementarlo, configurar modelos de datos de la plataforma Dataverse y configurar la autenticación.

Importante

  • Un agente de codificación de IA generativo, como GitHub Copilot CLI o Claude Code, usa las aptitudes y flujos de trabajo de este complemento para completar tareas específicas de Power Pages.
  • El código y la configuración generados por el agente de codificación de IA pueden ser inexactas. Revise, pruebe y valide todo el contenido generado antes de aprobarlo o implementarlo. Revise siempre las propuestas del agente antes de aprobarlas.

Prerequisites

Antes de comenzar, compruebe que tiene el software y los permisos necesarios.

Requisitos de software

Componente Versión mínima Información adicional
Node.js 18.0 o posterior Descargar Node.js
CLI de Power Platform (PAC CLI) 2.6.3 o posterior (necesario para la lógica del servidor) Instalación de la CLI de PAC
CLI de Azure Latest Instalación de la CLI de Azure
GitHub Copilot CLI o Claude Code Latest GitHub Copilot CLI o Claude Code
Extensión de Visual Studio Code y de Power Platform Tools (opcional) Latest Descarga de VS Code e instalación de Power Platform Tools

También necesita lo siguiente:

  • Un entorno de Power Platform con Power Pages habilitado.
  • Una sesión autenticada de la CLI de PAC conectada al entorno de destino. Ejecute pac auth create si aún no se ha conectado.
  • Una sesión de la CLI de Azure que inició sesión en el mismo inquilino. Ejecute az login --allow-no-subscriptions para autenticarse.

Verificar autenticación:

Compruebe que está autenticado mediante el pac auth list comando .

pac auth list           # Should show authenticated profile

Si no está autenticado, ejecute este comando:

pac auth create --environment <Instance url>        # Authenticate to Power Platform

Tip

Para obtener la dirección URL de la instancia, vaya a la página principal de Power Pages, seleccione el icono Settings en la esquina superior derecha y, a continuación, seleccione Detalles de la sesión.

Instalación del complemento

Instale el complemento Power Pages desde Marketplace. Si usa la CLI de Copilot de GitHub, consulte la documentación de extensiones de la CLI de Copilot para ver los pasos de instalación equivalentes. Los siguientes comandos usan la sintaxis de Claude Code.

Ejecute el instalador para configurar todos los complementos con la actualización automática habilitada:

Windows (PowerShell):

iwr https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js -OutFile install.js; node install.js; del install.js

macOS/Linux/Windows (cmd):

curl -fsSL https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js | node

El instalador automáticamente:

  • Instala la pac CLI si aún no está instalada.
  • Detecta herramientas disponibles, como Claude Code y GitHub Copilot CLI.
  • Registra el marketplace del complemento e instala todos los complementos enumerados.
  • Habilita la actualización automática para que los complementos permanezcan actualizados.

Después de la instalación, reinicie Claude Code o GitHub Copilot CLI para acceder a las funciones del complemento como comandos slash en la sesión del agente.

Instalación desde Marketplace

  1. Abra Claude Code en su terminal.

  2. Agregue el marketplace de Microsoft:

    /plugin marketplace add microsoft/power-platform-skills

  3. Instale el complemento Power Pages:

    /plugin install power-pages@power-platform-skills

Después instalar el complemento, reinicie Claude Code o GitHub Copilot CLI para acceder a las aptitudes del complemento, como comandos de barra diagonal en la sesión del agente.

Tip

Para recibir actualizaciones automáticamente en el mercado y capacidades, active las actualizaciones automáticas. Use el /plugin comando, vaya a Marketplaces, elija Marketplace y active la actualización automática.

Resumen de habilidades

El complemento proporciona aptitudes que cubren el ciclo de vida completo de un sitio de Power Pages. Invoque cada habilidad de forma conversacional, ya sea como un comando o describiendo lo que desea hacer.

Habilidad Comando Qué hace
Crear sitio /create-site Configura un sitio, aplica la dirección del diseño y crea páginas y componentes.
Desplegar sitio /deploy-site Compila el proyecto y lo carga en Power Pages mediante PAC CLI
Activar sitio /activate-site Aprovisiona un registro de sitio web y asigna una dirección URL pública
Configuración del modelo de datos /setup-datamodel Crea tablas, columnas y relaciones de Dataverse
Agregar datos de ejemplo (opcional) /add-sample-data Rellena tablas de Dataverse con registros de prueba realistas
Integración de la API web /integrate-webapi Genera código de cliente de API tipado, servicios y permisos de tabla
Adición de resúmenes de IA /add-ai-webapi Integra las API de resumen con IA generativa (resumen de búsqueda y resumen de datos) en tus páginas. Genera un servicio de resumen tipado con gestión de tokens anti falsificación, envoltorios específicos del marco, sitios de llamada conectados y la configuración del sitio correspondiente con Summarization
Configuración de la autenticación /setup-auth Agrega el inicio de sesión, el cierre de sesión y el control de acceso basado en rol. Admite Microsoft Entra ID, Id. externa de Microsoft Entra, OpenID Connect, SAML 2.0, WS-Federation, cuenta Microsoft, Facebook, Google y autenticación de nombre de usuario y contraseña local, incluidas las configuraciones de varios proveedores
Creación de roles web /create-webroles Genera archivos YAML de rol web para la administración de acceso de usuarios
Agregar lógica de servidor /add-server-logic Genera puntos de conexión de JavaScript seguros del lado servidor para la validación, las llamadas API externas, la administración de secretos y las operaciones de datos.
Adición de flujo de nube /add-cloud-flow Integra los flujos de nube de Power Automate existentes en el sitio para los flujos de trabajo de aprobación, las notificaciones y la automatización programada.
Integrar el backend /integrate-backend Analiza el prototipo, determina el enfoque adecuado (API web, lógica de servidor o flujo de nube) para cada característica y organiza la secuencia de compilación completa.
Optimizar para motores de búsqueda /add-seo Genera robots.txt, sitemap.xml y etiquetas meta
Ejecución de la revisión de seguridad /security-review Orquesta las capacidades de seguridad especializadas y consolida cada hallazgo en un único informe HTML. Abarca el código, las dependencias, el análisis del sitio desplegado, las cabeceras del navegador, el cortafuegos de aplicaciones web, los permisos de las tablas y la configuración de autenticación.
Examen del código fuente /scan-code Ejecuta análisis estáticos y análisis de dependencias en archivos de origen locales; muestra los resultados en los patrones de código, los paquetes vulnerables, los secretos codificados de forma rígida y los problemas de licencia.
Examen del sitio implementado /scan-site Inicia un examen de seguridad del lado servidor en el sitio activo, captura el informe más reciente y agrupa los resultados por gravedad.
Administrar encabezados de seguridad del explorador /manage-headers Inspecciona y configura los encabezados de seguridad HTTP que un sitio envía a los exploradores: directiva de seguridad de contenido, protección de fotogramas y clickjacking, uso compartido entre orígenes, comportamiento de cookies y configuración del sitio relacionada.
Administración del firewall de aplicaciones web /manage-firewall Inspecciona y configura el firewall de aplicaciones web (WAF) en un sitio de producción: habilita la protección, agrega o quita bloques ip, bloques de país, bloques de ruta de acceso y límites de velocidad.
Auditar permisos de tabla /audit-permissions Audita los permisos de tabla existentes en el código de sitio y los metadatos de Dataverse; genera un informe HTML agrupado por gravedad con correcciones sugeridas
Planificación del despliegue /plan-alm Detecta el estado del proyecto, recopila la estrategia de promoción, representa un plan visual y organiza las demás aptitudes de administración del ciclo de vida de la aplicación (ALM) en el orden correcto.
Crear solución /setup-solution Crea un publicador y una solución, agrega componentes de Power Pages, clasifica la configuración del sitio y propone variables de entorno y secretos de Azure Key Vault
Configuración del host de canalización /ensure-pipelines-host Aprovisiona o detecta un entorno host para Power Platform Pipelines
Configurar canalización /setup-pipeline Registra una definición de canalización en Dataverse y enlaza las fases de promoción a entornos de destino.
Implementación mediante canalización /deploy-pipeline Activa una implementación de una canalización para una fase de destino con anulaciones por fase de las variables de entorno
Entorno de vinculación forzada /force-link-environment Reasigna un entorno de destino a un nuevo host de Power Platform Pipelines cuando un conflicto del host bloquea la implementación
Exportar solución /export-solution Exporta la solución como un archivo ZIP administrado o no administrado, con una comprobación de integridad antes de la exportación
Importar solución /import-solution Importa un archivo ZIP de una solución en un entorno de destino, por fases o directamente
Sitio de prueba /test-site Comprueba un sitio implementado con una prueba basada en explorador: rastreo de páginas, comprobaciones de acceso basadas en roles y comprobación de api web
Diagnóstico de la implementación /diagnose-deployment Coincide con los errores de implementación en un catálogo de errores conocidos y propone una corrección.

Flujo de trabajo típico

Un flujo de trabajo de un extremo a otro común sigue esta secuencia:

  1. /create-site : Estructurar, diseñar y generar páginas
  2. /deploy-site : Cargar en el entorno de Power Pages
  3. /activate-site : configurar una dirección URL pública
  4. /setup-datamodel : Creación de tablas de Dataverse
  5. /add-sample-data : rellenar tablas con registros de prueba
  6. /integrate-webapi : generación de código de cliente de API y configuración de permisos
  7. /create-webroles : Definir roles de access
  8. /setup-auth : agregar inicio de sesión, cierre de sesión y interfaz de usuario basada en roles
  9. /add-server-logic : agregar puntos de conexión seguros del lado servidor
  10. /add-cloud-flow : Integración de flujos de Power Automate existentes
  11. /add-seo : optimización del motor de búsqueda
  12. /deploy-site : aplicar los cambios finales directamente
  13. /security-review : ejecute una revisión de seguridad de un extremo a otro antes de ir a producción.
  14. /plan-alm : Promocione su sitio a entornos de prueba y producción

Tip

  • No es necesario seguir este orden exacto. Cada aptitud comprueba sus propios requisitos previos e indica si falta algo. Por ejemplo, puede ejecutar /setup-auth antes /integrate-webapi de si el sitio necesita primero la autenticación.
  • Si no está seguro de qué enfoque usar para cada característica, ejecute /integrate-backend en lugar de los pasos 4 a 10 individualmente. Analiza el prototipo, determina si cada característica necesita api web, lógica de servidor o un flujo de nube y organiza las aptitudes en el orden correcto.
  • Para añadir resúmenes de búsquedas y registros generados por IA, ejecute /add-ai-webapi después de /integrate-webapi. Reutiliza los permisos de la tabla y la configuración del sitio que configura /integrate-webapi, así que ejecútelo una vez que la integración de Web API esté implementada.

Construye tu sitio de Power Pages

En este tutorial se describe el ciclo de vida completo de la creación de un sitio de Power Pages con el plugin, desde la estructuración hasta la implementación. En cada paso se describe lo que se dice y lo que hace el complemento en respuesta.

Paso 1: Crear el sitio

Describa el sitio que desee en lenguaje natural: para qué son las páginas que necesita y las preferencias de diseño, como la combinación de colores, el estilo de diseño o las fuentes. Ejecute /create-site o simplemente describa el sitio y el complemento reconozca la intención.

Si no especifica un marco, el complemento le pide que elija uno (React, Vue, Angular o Astro), entonces:

  1. Genera la estructura del proyecto a partir de una plantilla y aplica el nombre, los colores y los tokens de diseño de tu sitio.
  2. Instala dependencias, inicia un servidor de desarrollo y abre una versión preliminar del explorador activo.
  3. Compila cada página, componente y ruta que solicitó con imágenes pertinentes.
  4. Crea confirmaciones de Git en hitos significativos para tener un historial de reversión integrado.

Paso 2: Implementar el sitio

Ejecute /deploy-site para cargar el sitio en Power Pages. El complemento:

  1. Comprueba que la CLI de PAC está instalada y la sesión de autenticación está activa.
  2. Confirma el entorno de destino con usted antes de continuar.
  3. Ejecuta una compilación de producción y carga la salida compilada.
  4. Crea un directorio de artefactos de implementación si aún no existe uno.

Nota:

Si el entorno bloquea determinados archivos adjuntos, el complemento detecta el problema y proporciona instrucciones para resolverlo.

Paso 3: Activar el sitio

Ejecute /activate-site para que el sitio sea accesible públicamente. El complemento:

  1. Sugiere un subdominio basado en el nombre del sitio y le permite personalizarlo.
  2. Provisiona un registro de sitio web a través de la API de Power Platform.
  3. Sondea hasta que el sitio está activo y devuelve la dirección URL pública.

En este momento, tiene un sitio de trabajo en una dirección URL pública. Los pasos restantes agregan datos, autenticación y SEO. Omita los pasos que no se apliquen al sitio.

Paso 4: Configuración del modelo de datos

Ejecute /setup-datamodel para crear las tablas de Dataverse que necesita el sitio. Si ya tiene un diagrama er o un esquema específico, proporciónelo directamente en lugar de hacer que el agente analice el código.

El complemento genera un agente de Data Model Architect que:

  1. Analiza el código del sitio para determinar qué datos requieren las páginas y los componentes.
  2. Consulta el entorno de Dataverse para las tablas existentes para evitar duplicados.
  3. Propone un modelo de datos con tablas, columnas, tipos de datos y relaciones, visualizados como diagrama de ER.

Revise y apruebe la propuesta. El complemento no crea nada hasta que confirme. Después de la aprobación, el complemento crea las tablas y columnas a través de llamadas API y guarda un archivo de manifiesto que usan los pasos 5 y 6.

Paso 5: Agregar datos de ejemplo (opcional)

Ejecute /add-sample-data para rellenar las tablas con registros de prueba. Este paso requiere el modelo de datos del paso 4.

El complemento realiza las siguientes acciones:

  1. Lea el manifiesto para comprender las tablas, columnas y relaciones.
  2. Genera valores contextualmente adecuados para cada tipo de columna, como correos electrónicos realistas, fechas viables y cantidades de moneda con formato.
  3. Inserta registros en orden de dependencia (tablas primarias antes de las tablas secundarias) y actualiza los tokens de autenticación automáticamente durante las inserciones masivas.

Paso 6: Integración con la API web de Dataverse

Ejecute /integrate-webapi para reemplazar los datos ficticios por consultas dinámicas de Dataverse. Este paso requiere el modelo de datos del paso 4.

El complemento realiza las siguientes acciones:

  1. Examina el código base para los componentes que usan datos ficticios, llamadas de captura de marcador de posición o matrices codificadas de forma rígida. Asigna estos componentes a las tablas de Dataverse.
  2. Genera un agente de integración de API web para cada tabla que genera:
    • Un cliente de API compartido con administración de tokens anti falsificación y lógica de reintento.
    • Tipos de entidad y mapeadores de dominio de TypeScript.
    • Una capa de servicio CRUD.
    • Patrones específicos de cada marco, como los hooks de React, los composables de Vue o los servicios de Angular.
  3. Genera un agente de Permissions Architect que propone permisos de tabla y configuraciones del sitio.

Revise y aprueba la propuesta de permisos. El complemento no crea ningún archivo de configuración hasta que confirme.

Adición de resúmenes generados por IA (opcional)

Ejecute /add-ai-webapi para superponer resúmenes de IA generativa sobre su integración de API web. La capacidad conecta dos API de resumen en vista previa con las páginas de detalle de registro y de lista:

  • API de resumen de búsqueda: devuelve un resumen condensado por IA de los resultados de búsqueda, con citas.
  • API de resumen de datos: devuelve un resumen por registro o información de nivel de lista para una tabla de Dataverse.

Este paso se basa en el modelo de datos del paso 4 y la integración de la API web del paso 6. El complemento realiza las siguientes acciones:

  1. Examina el código para ver los puntos de integración de resumen y confirma las páginas de destino, las tablas y las API que se van a usar.
  2. Delega los requisitos previos de la API web que faltan (permisos de tabla, listas de columnas y roles web) a /integrate-webapi y /create-webroles, por lo que hay una única fuente de verdad para los permisos.
  3. Genera un agente de integración de API web con IA que crea un servicio tipado de resumen (aiSummaryService.ts) con gestión de tokens anti falsificación, envoltorios específicos del marco (hooks de React, componibles de Vue o servicios de Angular) y sitios de llamada conectados en las páginas de destino.
  4. Genera un agente de arquitecto de configuración de API web de IA que crea la configuración del sitio Summarization para los avisos y los límites de contenido.

Revisa y aprueba las propuestas. El complemento no genera código ni crea configuraciones hasta que confirme.

Nota:

Las API de resumen están en versión preliminar y dependen de los controles administrativos y de nivel de sitio que se activan. Si los resúmenes no aparecen después de la implementación, confirme que la característica está habilitada a través de la configuración del sitio y los controles de administración pertinentes. Para obtener más información, consulte Introducción a la API de resumen de datos y Power Pages búsqueda con IA generativa.

Paso 7: Creación de roles web

Ejecute /create-webroles para definir roles de acceso de usuario. El complemento:

  1. Consulta el entorno para los roles web existentes para evitar duplicados.
  2. Genera definiciones de roles con identificadores únicos.
  3. Exige que cada sitio tenga como máximo un rol anónimo y un rol autenticado.

Paso 8: Configuración de la autenticación

Ejecute /setup-auth para agregar el inicio de sesión, el cierre de sesión y el control de acceso basado en rol al sitio. El complemento admite los siguientes proveedores de identidades y puede configurar un proveedor o varios al mismo tiempo.

Provider Más adecuado para
Id. externa de Microsoft Entra (recomendado para sitios orientados al cliente) Sitios públicos y portales de clientes con registro de autoservicio.
Microsoft Entra ID Portales internos de empleados o sitios de asociados de negocio a negocio (B2B). Power Pages configura automáticamente el inquilino primario del sitio, por lo que no es necesario escribir información de inquilino.
Microsoft, Facebook, Google Inicio de sesión social para audiencias de consumidores.
Autenticación local Inicio de sesión con nombre de usuario y contraseña. No se recomienda y solo se configura cuando se solicita explícitamente.

Para obtener más información sobre los proveedores admitidos, incluidos los protocolos y las consideraciones de configuración, consulte Información general de la autenticación en Power Pages.

El complemento:

  1. Analiza el sitio (propósito, páginas, audiencia) y propone un valor predeterminado razonable. Por ejemplo, el complemento propone Id. externa de Microsoft Entra con registro abierto para un sitio orientado al cliente o Microsoft Entra ID con registro de solo invitación para un portal interno. Acepta la recomendación o elige sus propios proveedores.
  2. Para cada proveedor, le guía por cada paso previo en el centro de administración del proveedor de identidades, como la creación de inquilinos, el registro de aplicaciones, la creación de flujos de usuario y la captura de identificadores de cliente y los URI de redirección. El complemento valida cada valor que pegue en la conversación y calcula el URI de redireccionamiento exacto para el sitio para que el valor pegado en el registro de la aplicación coincida con el valor escrito en la configuración del sitio.
  3. Pregunta cómo deben fluir los datos del perfil de usuario desde el proveedor de identidades al registro de contacto de Dataverse (asignación de notificaciones), si se sincronizarán en cada inicio de sesión o solo el primer inicio de sesión y si se deben vincular automáticamente inicios de sesión externos a contactos existentes por correo electrónico.
  4. Genera el servicio de autenticación, las declaraciones de tipos, las utilidades de autorización basadas en roles (hasRole, RequireAuth, RequireRole), un hook de mantenimiento de sesión que evita que las sesiones de SPA caduquen silenciosamente y un componente de interfaz de usuario para el inicio y cierre de sesión integrado en el diseño de tu sitio. El complemento usa los patrones de su marco en todo momento, como los hooks de React, los componibles de Vue, los servicios de Angular o los componentes de Astro.
  5. Cuando se configura más de un proveedor, genera una /login página representada en el diseño elegido: fila horizontal, pila vertical, foco principal o con pestañas.
  6. Escribe la configuración de sitio coincidente en .powerpages-site/site-settings/ para cada proveedor, modo de registro, asignación de notificaciones y característica opcional.

El complemento también configura las siguientes características opcionales al activarlas:

  • Términos y condiciones: los /terms usuarios de una página SPA deben aceptar antes de completar el inicio de sesión, además de la configuración de sitio coincidente y los fragmentos de código de contenido.
  • Página de perfil de usuario: página /user-profile SPA donde los usuarios que han iniciado sesión editan su información de contacto a través de la API web de Power Pages.
  • Cierre de sesión federado: también cierra la sesión del usuario en el proveedor de identidad cuando cierra sesión en el sitio, en escenarios de dispositivos compartidos o regulados.

Tip

Para añadir un segundo proveedor de identidades a un sitio existente, vuelva a ejecutar /setup-auth. El complemento detecta lo que ya está configurado y ofrece añadir un nuevo proveedor sin sobrescribir los ya existentes. Este enfoque es útil para escenarios incrementales, como comenzar con Id. externa de Microsoft Entra y agregar más adelante Google para el inicio de sesión social.

Nota:

La autorización del lado cliente (RequireAuth, RequireRole, hasRole) es solo para la experiencia del usuario. Controla lo que ve el usuario. Los permisos de tabla del lado del servidor configurados por /integrate-webapi garantizan una seguridad real.

Paso 9: Agregar lógica de servidor

Ejecute /add-server-logic para agregar puntos de conexión seguros del lado servidor al sitio. Use La lógica del servidor cuando el sitio necesite lógica que no se pueda ejecutar en el explorador, como llamadas API externas, validación del lado servidor, administración de secretos o operaciones de datos entre entidades.

Importante

La compatibilidad con la lógica del servidor requiere la VERSIÓN 2.6.3 o posterior de la CLI de PAC. Use el script de instalación rápida para actualizar a la versión más reciente.

Describa lo que necesita en lenguaje sin formato y el complemento:

  1. Genera un agente de Server Logic Architect que analiza el caso de uso y clasifica su complejidad.
  2. Propone un diseño de punto de conexión, una configuración de seguridad y los permisos de tabla necesarios para su revisión.
  3. Después de aprobarlo, genera el punto de conexión de JavaScript del lado servidor en /_api/serverlogics/<name>.
  4. Crea un servicio cliente tipado para invocar el punto de conexión desde sus componentes.
  5. Actualiza los componentes para llamar al nuevo servicio.
  6. Configura asignaciones de roles web y permisos de tabla para el punto de conexión.

Revise y apruebe la propuesta. No se genera ningún código hasta que confirme.

Casos de uso comunes:

Nota:

Ejecute /add-server-logic una vez por caso de uso. Por ejemplo, si el sitio necesita un punto de conexión de validación de inventario y un punto de conexión de búsqueda global, ejecute la aptitud dos veces.

Paso 10: Integración de flujos en la nube

Ejecute /add-cloud-flow para integrar los flujos existentes en la nube de Power Automate en el sitio. Esta habilidad conecta tu sitio de Power Pages a los flujos que ya has creado en Power Automate. No crea nuevos flujos de nube.

El complemento:

  1. Registra el flujo de nube existente en el sitio.
  2. Genera código cliente para desencadenar el flujo desde sus páginas.
  3. Controla el estado asincrónico del flujo de trabajo y los patrones de devolución de llamada.
  4. Conectan el intercambio de datos entre la página y el flujo.

Use /add-cloud-flow para flujos de trabajo de aprobación, notificaciones por correo electrónico, trabajos programados y automatización controlada por eventos que se gestionan mejor con Power Automate en lugar de los puntos de conexión del lado del servidor.

Alternativa: utilizar /integrate-backend para poder planificar la capa completa de servicio.

Si no está seguro de qué características necesitan web API, lógica de servidor o un flujo de nube, ejecute en lugar de ejecutar /integrate-backend manualmente los pasos del 4 al 10. Esta habilidad actúa como un orquestador que:

  1. Analiza el prototipo para identificar todas las características que necesitan un nivel de servicio.
  2. Clasifica cada característica en el enfoque adecuado: API web para CRUD estándar, Lógica de servidor para la validación del lado servidor y API externas, o flujo de nube para flujos de trabajo de aprobación y automatización.
  3. Propone un plan de ejecución secuenciado con todas las aptitudes, dependencias y configuraciones.
  4. Después de que tú lo apruebes, organiza las habilidades en el orden correcto.

El plan es persistente, reanudable y editable. Deténgase tras cualquier paso para revisar el código generado o probar el sitio, y retómelo desde donde lo dejó ejecutando /integrate-backend de nuevo.

Paso 11: Agregar SEO

Ejecute /add-seo para optimizar el sitio para los motores de búsqueda. El complemento:

  1. Descubre rutas desde la configuración de enrutador de tu framework.
  2. Genera directivas del motor de búsqueda y un mapa del sitio para todas las rutas detectadas.
  3. Agrega etiquetas meta: viewport, charset, descripción, Open Graph, Twitter Card y referencias de favicon.

Paso 12: Implementar el sitio final

Si realiza alguno de los pasos opcionales, vuelva a ejecutar /deploy-site para que los cambios se apliquen. El complemento ejecuta una compilación de producción y carga el sitio junto con todos los artefactos de implementación (permisos de tabla, configuración del sitio, roles web, archivos lógicos de servidor) en el entorno de Power Pages.

Paso 13: Ejecución de una revisión de seguridad

Ejecute /security-review para realizar una revisión de seguridad de un extremo a otro del sitio antes de ir a producción. La habilidad orquesta las habilidades de seguridad especializadas y consolida cada hallazgo en un único informe HTML en docs/security-review-<timestamp>.html.

El complemento formula una pregunta en lenguaje simple sobre su objetivo y elige el conjunto coincidente de aptitudes centradas:

Objetivo Lo que comprueba
Código y configuración Código fuente, dependencias, permisos de tabla y configuración de autenticación. Solo funciona en archivos locales: no se requiere ninguna implementación.
Preparación para la publicación (recomendado) Revisión completa antes de publicar. Ejecuta todas las comprobaciones específicas: código y dependencias, análisis del sitio implementado, cabeceras de seguridad del navegador, firewall de aplicaciones web, permisos de tabla y autenticación.
Sitio implementado Solo análisis en vivo del sitio desplegado. Resulta útil para la supervisión continua de un sitio publicado.

Una vez lo confirme, el complemento ejecuta en paralelo las capacidades orientadas a la coincidencia y recopila sus resultados en un único informe:

  • /scan-code: ejecuta el análisis estático (opengrep) y el análisis de dependencias (trivy) en los archivos de código fuente locales. Expone patrones de código, paquetes vulnerables, secretos codificados de forma rígida y problemas de licencia. Si cualquiera de las dos herramientas no está instalada, la función ofrece una revisión manual del código como alternativa.
  • /scan-site: inicia un examen de seguridad del lado servidor en el sitio activo y captura el informe más reciente. La duración del examen depende del tamaño del sitio: los sitios pequeños finalizan en minutos, los sitios grandes pueden tardar horas. Los resultados se agrupan por gravedad. Requiere un sitio implementado.
  • /manage-headers: inspecciona los encabezados de seguridad HTTP configurados en .powerpages-site/site-settings/: Directiva de seguridad de contenido, X-Frame-Options, CORS, cookie SameSite y configuración relacionada. Identifica valores no válidos o débiles y propone valores predeterminados recomendados.
  • /manage-firewall: Inspecciona el firewall de aplicaciones web (WAF) del sitio de producción, incluido el estado de las reglas gestionadas y las reglas personalizadas (bloqueos de IP, bloqueos por país, bloqueos por ruta, límites de tasa). Disponible solo en sitios de producción en regiones admitidas; la habilidad detecta y notifica problemas de elegibilidad.
  • /audit-permissions: Comprueba los permisos existentes de la tabla comparándolos con el código del sitio y los metadatos de Dataverse. Detecta permisos faltantes, roles excesivamente permisivos, permisos no utilizados y problemas de esquema YAML.

El informe consolidado agrupa los resultados por sección, se abre en el navegador predeterminado e incluye orientación para la corrección en lenguaje claro. Desde el chat, el complemento ofrece guiarle para aplicar correcciones: elija un hallazgo y el complemento invoca interactivamente la función especializada correspondiente para aplicar la corrección.

Nota:

La revisión de seguridad nunca aplica los cambios automáticamente. Cada habilidad específica se ejecuta en modo de revisión de solo lectura durante la ejecución consolidada. Para aplicar una corrección, el complemento invoca la aptitud coincidente de forma interactiva después de seleccionar la acción.

Tip

También puede ejecutar por separado cualquier función específica:

  • Se ejecuta /scan-code durante el desarrollo para detectar problemas de nivel de código al principio.
  • Ejecute /manage-headers para corregir un error específico de directiva de seguridad de contenido o configurar CORS.
  • Ejecute /manage-firewall para agregar un límite de velocidad en la página de inicio de sesión o bloquear el tráfico por país.
  • Ejecute /audit-permissions después de cambiar los permisos de tabla para comprobar que siguen coincidendo con el código de sitio.
  • Vuelva a ejecutar /security-review con el objetivo Sitio desplegado para supervisar un sitio de producción a lo largo del tiempo.

Verifica tu sitio

Después de completar las aptitudes, compruebe que el sitio de Power Pages funciona correctamente.

  1. Vaya a Power Pages.
  2. Busque el sitio en la lista Sitios activos .
  3. Obtenga una vista previa del sitio en el escritorio mediante la opción Vista previa .
  4. Pruebe la funcionalidad.

Promociona tu sitio en distintos entornos

Una vez que el sitio funcione en el entorno de desarrollo, utilice las capacidades de administración del ciclo de vida de la aplicación (ALM) para promoverlo a los entornos de pruebas y producción. El complemento empaqueta el sitio como solución de Power Platform, identifica los valores que varían entre entornos y despliega la solución mediante Power Platform Pipelines o mediante exportación e importación manuales.

Para usar las habilidades de ALM, también necesitas al menos un entorno de destino de Power Platform (prueba, producción o ambos). Para usar el flujo opcional de Azure Key Vault para los secretos, también necesita permiso para crear un almacén de claves en la suscripción de Azure.

Planear la implementación

Ejecute /plan-alm para iniciarse. /plan-alm es el punto de entrada de ALM y orquesta las demás habilidades de ALM, por lo que normalmente no se ejecutan directamente. El complemento:

  1. Detecta el estado actual del proyecto, la solución y los entornos de destino.
  2. Pregunta por la estrategia de promoción (canalizaciones de Power Platform o exportación e importación manual), las etapas de destino y las restricciones que deben aplicarse.
  3. Genera un plan visual en docs/alm-plan.html el que se muestra cada acción que pretende realizar.
  4. Espera tu aprobación antes de ejecutar cualquier habilidad posterior.

El plan se guarda en disco, por lo que cada capacidad posterior lee y escribe en el mismo plan guardado. Si falla una fase, vuelva a ejecutar /plan-alm y se reanudará desde donde se quedó.

Creación de la solución

Ejecute /setup-solution para empaquetar su sitio como una solución de Power Platform. El complemento:

  1. Crea un publicador y una solución y, a continuación, agrega los componentes de Power Pages: el sitio, los roles web, los puntos de conexión de lógica de servidor, los registros de flujo de nube y la configuración del proveedor de OAuth.
  2. Clasifica cada configuración de sitio por confidencialidad y propone variables de entorno para valores que varían entre entornos.
  3. Ofrece aprovisionar un Azure Key Vault y almacenar valores de tipo de credencial, como cadenas de conexión y claves de API, en él.
  4. Se ejecuta en modo de sincronización cuando ya existe una solución para el sitio, para conciliar los componentes sin crear una nueva solución.

Revise y apruebe la propuesta. El complemento no crea ninguna configuración hasta que confirme.

Tip

Si la solución es demasiado grande o entrelazada para implementar de forma confiable, el complemento recomienda una división y propone dónde dividirla. Confirme la división antes de aplicar los cambios.

Implementar con canalizaciones de Power Platform

Si eligió Power Platform Pipelines como estrategia de promoción, el complemento ejecuta estas habilidades:

  1. /ensure-pipelines-host aprovisiona o detecta un entorno host para canalizaciones de Power Platform. La capacidad elige la opción más económica disponible para su inquilino: un alojamiento de plataforma gratuito, la aplicación Pipelines en un entorno existente o un alojamiento personalizado.
  2. /setup-pipeline registra una definición de canalización en Dataverse, configura las fases elegidas y enlaza cada fase a un entorno de destino.
  3. /deploy-pipeline inicia un despliegue para una etapa, aplica anulaciones de variables de entorno por etapa a través de deploymentSettings.json y realiza un seguimiento del estado en un registro de despliegues.

Si una implementación falla porque el entorno de destino ya está vinculado a un host diferente de Power Platform Pipelines, el complemento puede ejecutar /force-link-environment para reasignarlo. La acción requiere su consentimiento explícito y es reversible.

Implementación con exportación e importación manual

Si elige la ruta de acceso manual, el complemento se ejecuta:

  1. /export-solution para exportar la solución como un ARCHIVO ZIP administrado o no administrado, con una comprobación de integridad antes de la exportación.
  2. /import-solution para importar el archivo ZIP en el entorno de destino, ya sea de forma escalonada para verificar primero las dependencias o directamente.

Activación y validación del sitio implementado

Después de una implementación correcta en el entorno de destino, el complemento:

  1. Se ejecuta /activate-site para aprovisionar la dirección URL pública en el entorno de destino.
  2. Se ejecuta /test-site para comprobar la implementación. El complemento utiliza un navegador para rastrear páginas representativas, ejecutar comprobaciones de acceso basadas en roles, verificar las llamadas a /_api/ y capturar estructuras de respuesta de los puntos de conexión de /_api/serverlogics/. La capacidad notifica el resultado como PASS, WARNINGS o FAIL, con detalles de cada comprobación enlazados desde el plan.

Si se produce un error en un paso, el complemento ejecuta /diagnose-deployment. La funcionalidad contrasta el fallo con un catálogo de errores de despliegue conocidos, como un manifiesto obsoleto, dependencias ausentes, conflictos de host, JavaScript bloqueado o autenticación expirada, y propone una solución concreta. El complemento nunca aplica una corrección sin su consentimiento.

Nota:

Cada aptitud de ALM lee y escribe en artefactos en disco: el manifiesto de la solución, los datos del plan, el libro de contabilidad de canalización, el libro de contabilidad de implementación y los resultados de las pruebas. La orquestación es reanudable y auditable. Para ver lo que sucedió en cualquier paso, inspeccione los artefactos.

Sugerencias y procedimientos recomendados

Las siguientes sugerencias le ayudarán a aprovechar al máximo el complemento y el agente de codificación de IA al desarrollar sitios Power Pages.

Vigilar la salida del terminal para detectar herramientas faltantes en la primera ejecución

El complemento proporciona las aptitudes y los flujos de trabajo, pero el agente de codificación de IA (GitHub Copilot CLI o Claude Code) ejecuta los comandos reales en la máquina. Cuando use estas herramientas por primera vez, observe detenidamente la salida del terminal. El agente de codificación de IA ejecuta comandos y scripts en segundo plano y algunos de estos comandos dependen de herramientas que podrían no instalarse en la máquina. Si se produce un error en un paso, la salida del terminal suele mostrar qué herramienta o comando no pudo encontrar.

Si ve un error como command not found o is not recognized, instale la herramienta que falta y vuelva a desencadenar el flujo de trabajo. El agente de codificación de IA reanuda su trabajo donde lo dejó tan pronto como la herramienta está disponible.

Revisar las propuestas del agente antes de aprobar

El agente de codificación de IA presenta propuestas, como las del arquitecto de modelos de datos y el arquitecto de permisos, antes de realizar cambios. El código y la configuración generados por el agente de codificación de IA pueden ser inexactos, por lo que revisar, probar y validar todas las propuestas y todo el código generado antes de aprobarlo o implementarlo.

  • Propuestas del modelo de datos: compruebe que los nombres de tabla, los tipos de columna y las relaciones coinciden con los requisitos empresariales. Es más fácil ajustar una propuesta que cambiar el nombre de las columnas después de insertar los datos.
  • Propuestas de permisos: compruebe que cada rol tiene el nivel de acceso correcto (crear, leer, actualizar, eliminar) para cada tabla. Los permisos de tabla demasiado permisivos son un riesgo de seguridad común.
  • Código generado: lea el código generado y pruebe el sitio localmente antes de implementarlo. El código generado por ia puede contener errores o problemas de seguridad.

Pegar errores directamente con el contexto

Cuando se produce un error en algo, ya sea un error de compilación, un error de implementación o una excepción en tiempo de ejecución en el explorador, copie la salida de error completa. Péguelo junto con una breve descripción de lo que estaba haciendo. Cuanto más contexto proporcione, más rápido será la corrección.

Ejemplo: Error de compilación

I ran npm run build and got this error. Fix it.

error TS2339: Property 'jobTitle' does not exist on type 'JobPosting'.

  src/components/JobCard.tsx:24:31
    24   <Text>{posting.jobTitle}</Text>

Tip

Incluya el nombre de archivo, el comando que ejecutó y lo que esperaba que suceda. El complemento usa este contexto para localizar el problema y aplicar una corrección dirigida en lugar de adivinar.

Compartir errores de la API web con la URL completa de la solicitud

Un problema común después de la implementación es un 403 error de la API web de Power Pages cuando una columna no está habilitada para el acceso a la API. Cuando encuentre este error, pegue la dirección URL completa de la API y la respuesta de error JSON completa. El mensaje de error indica exactamente qué tabla y columna deben corregirse, y el complemento puede actualizar por usted el archivo YAML de permisos de tabla y la configuración del sitio.

Ejemplo: Columna no habilitada para la API web (403)

I'm getting a 403 error when the documents page loads. Here's the API call and the response. Fix the issue so this API works.

URL:
https://my-site.powerappsportals.com/_api/crd50_documents?$select=crd50_documentid,crd50_name,crd50_documentcategory,crd50_filetype,crd50_filesize,crd50_updateddate,crd50_description,_crd50_propertyid_value

Response:
{
  "error": {
    "code": "90040101",
    "message": "Attribute _crd50_propertyid_value in table crd50_document is not enabled for Web Api.",
    "innererror": {
      "code": "90040101",
      "message": "Attribute _crd50_propertyid_value in table crd50_document is not enabled for Web Api.",
      "type": "AttributePermissionIsMissing"
    }
  }
}

Este error (AttributePermissionIsMissing) significa que la columna _crd50_propertyid_value de búsqueda existe en la tabla Dataverse, pero no aparece en la configuración de permisos de tabla para la API web. El complemento resuelve este error mediante la adición de la columna que falta al permiso de tabla YAML en .powerpages-site/table-permissions/ y la reimplementación.

Nota:

Power Pages Web API requiere que todas las columnas devueltas por una llamada API se muestren explícitamente en el permiso de tabla. Las propiedades de búsqueda (precedidas con _ y seguidas con _value) son fáciles de pasar por alto porque su nombre en la API difiere del nombre lógico de la columna en Dataverse. Cuando vea AttributePermissionIsMissing, agregue siempre esa columna a los permisos de la tabla. No cambie la consulta de API.

Sé específico sobre lo que quieras

Las solicitudes vagas producen resultados imprecisos. Indique al complemento exactamente lo que necesita, incluidas las preferencias de diseño, los campos de datos y el comportamiento.

En lugar de Probar
Crear una página de empleos "Crear una página de listados de trabajos con una barra de búsqueda en la parte superior, filtrar chips para ubicación y departamento, y una cuadrícula de tarjetas que muestra título, empresa, rango de salarios y una fecha publicada para cada trabajo"
"Corregir el estilo" "Las tarjetas de trabajo se apilan verticalmente en el escritorio. Haz que se muestren en una cuadrícula de tres columnas con un espacio de 16 píxeles en pantallas más anchas que 768px"
"Agregar algunos datos" "Agregar 20 publicaciones de trabajo de ejemplo en cuatro departamentos (Ingeniería, Marketing, Ventas, RR. HH.) con títulos realistas, rangos de salario entre $60k-$180k y fechas publicadas en los últimos 30 días"
"Configurar la API" "Conecte el componente JobListings a la tabla cr_jobposting Dataverse. Reemplace la matriz codificada por una llamada API real que obtenga el título, el departamento, el salario y la fecha de publicación.
Añadir inicio de sesión Configura el inicio de sesión con Id. externa de Microsoft Entra con registro abierto y Google como segundo proveedor. Mostrarlos como una fila horizontal en la página de inicio de sesión".

Uso de capturas de pantalla para problemas visuales

Cuando el sitio no se ve bien en el explorador, realice una captura de pantalla y péguela directamente en la conversación o proporcione una ruta de acceso de archivo. El contexto visual ayuda a identificar problemas de diseño, espaciado y estilo difíciles de describir en el texto.

The header overlaps the hero section on mobile. Here's a screenshot:

[paste screenshot or provide path to screenshot file]

Fix the header so it doesn't overlap. It should be a fixed header with the content starting below it.

Itera en pasos pequeños

En lugar de describir todo un sitio en una sola instrucción, construya de manera incremental. Comience con la estructura y el diseño y agregue características de una en una. Este enfoque le ofrece la oportunidad de revisar y corregir el curso en cada paso.

Step 1: /create-site → Get the basic scaffold and layout right
Step 2: "Add a hero section to the home page with a search bar"
Step 3: "Add a job listings page with filter and sort"
Step 4: "Add a job detail page that shows full description"
Step 5: /setup-datamodel → Create tables now that you know the data shape
Step 6: /integrate-webapi → Wire up real data

Tip

Después de cada paso, compruebe la vista previa del explorador. Si algo no es correcto, corrijalo antes de continuar. Es más fácil corregir problemas en un componente que desenredar problemas en todo un sitio.

Pedir una explicación antes de aprobar

Cuando no esté seguro de un cambio propuesto, especialmente en lo que respecta a permisos, modificaciones del modelo de datos o configuración de autenticación, pida al complemento que explique lo que planea hacer y por qué antes de aprobarlo.

Before you create the table permissions, explain what access each role will have and why. I want to understand the security implications.

Ejecutar habilidades de forma independiente para recuperarse de problemas

Si una habilidad falla a mitad de camino, no es necesario empezar de nuevo. Cada habilidad se ejecuta de forma independiente y puede continuar desde donde se quedó. Por ejemplo, si /integrate-webapi falla en la tercera tabla, puede volver a ejecutarlo y reconoce el trabajo ya completado.

/integrate-webapi failed while processing the cr_applications table. Here's the error: [paste error]. Resume the integration from where it stopped.

Contenido relacionado

  • Last updated on