Condividi tramite

Introduzione al plugin Power Pages per GitHub Copilot CLI e Claude Code (anteprima)

Il plug-in Power Pages per GitHub Copilot CLI e Claude Code fornisce un flusso di lavoro assistito dall'intelligenza artificiale per la creazione, distribuzione e gestione di siti di applicazioni a pagina singola (SPA) su Power Pages. Invece di eseguire manualmente lo scaffolding dei progetti, scrivere codice API boilerplate e configurare le autorizzazioni, descrivere ciò che si vuole nel linguaggio naturale e il plug-in gestisce l'implementazione.

Il plug-in supporta il ciclo di vita completo dello sviluppo del sito tramite competenze conversazionali, dallo scaffolding di un nuovo sito alla distribuzione, alla configurazione di modelli di dati Dataverse e alla configurazione dell'autenticazione.

Importante

  • Questa funzionalità è in versione di anteprima.
  • Le funzionalità di anteprima non sono destinate ad essere utilizzate per la produzione e sono soggette a restrizioni. Queste funzionalità sono disponibili prima di una versione ufficiale, in modo che i clienti possano ricevere access anticipatamente e fornire commenti e suggerimenti.
  • Esaminare le proposte dell'agente prima di approvare

Prerequisiti

Prima di iniziare, verificare di disporre del software e delle autorizzazioni necessarie.

Requisiti software

Componente Versione minima Maggiori informazioni
Node.js 18.0 o versione successiva Scarica Node.js
Power Platform CLI (CLI PAC) Più recente Installare PAC CLI
Azure CLI Più recente Installare Azure CLI
GitHub Copilot CLI o Claude Code Più recente GitHub Copilot CLI o Claude Code
Estensione Visual Studio Code e Power Platform Tools (Facoltativo) Più recente Scaricare VS Code e Installare Power Platform Tools

Altri elementi necessari:

  • Un ambiente Power Platform con Power Pages abilitato.
  • Sessione autenticata di PAC CLI connessa all'ambiente di destinazione. Esegui se non ti sei ancora connesso.
  • Una sessione di Azure CLI connessa allo stesso tenant. Eseguire per l'autenticazione.

Verifica l'autenticazione:

Verificare di essere autenticati usando il comando .

pac auth list           # Should show authenticated profile

Se non si è autenticati, eseguire questo comando:

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

Suggerimento

Per ottenere l'URL dell'istanza, passare a Power Pages home, selezionare l'icona Impostazioni nell'angolo superiore destro e quindi selezionare Dettagli sessione.

Installare il plug-in

Installare il plug-in Power Pages dal marketplace. Se utilizzi la CLI di GitHub Copilot, consulta la documentazione estensioni CLI di Copilot per i passaggi di installazione equivalenti. I comandi seguenti usano la sintassi Claude Code.

Eseguire il programma di installazione per configurare tutti i plug-in con l'aggiornamento automatico abilitato:

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

Il programma di installazione viene eseguito automaticamente:

  • Installa CLI se non è già installata.
  • Rileva gli strumenti disponibili, come Claude Code e GitHub Copilot CLI.
  • Registra il marketplace dei plug-in e installa tutti i plug-in elencati.
  • Abilita l'aggiornamento automatico in modo che i plug-in rimangano aggiornati.

Dopo l'installazione, riavvia Claude Code o GitHub Copilot CLI per accedere alle capacità del plug-in come comandi barra obliqua nella sessione dell'agente virtuale.

Eseguire l'installazione dal marketplace

  1. Aprire Claude Code nel terminale.

  2. Aggiungere il marketplace Microsoft:

    /plugin marketplace add microsoft/power-platform-skills

  3. Installare il plug-in Power Pages:

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

Dopo aver installato il plug-in, riavvia Claude Code o GitHub Copilot CLI per accedere alle capacità del plug-in come comandi barra obliqua nella sessione dell'agente virtuale.

Suggerimento

Per ricevere automaticamente gli aggiornamenti al marketplace e alle competenze, attivare l'aggiornamento automatico. Usare il comando, passare a Marketplace, scegliere il marketplace e attivare l'aggiornamento automatico.

Panoramica delle competenze

Il plug-in fornisce competenze che coprono il ciclo di vita completo di un sito di Power Pages. Richiama ogni competenza in modo conversazionale, come comando slash o descrivendo cosa vuoi fare.

Competenza Comando Funzione
Creare sito /create-site Esegue la strutturazione di un sito, applica le linee guida del design e costruisce pagine e componenti
Distribuire il sito /deploy-site Compila il progetto e lo carica in Power Pages usando l'interfaccia della riga di comando pac
Attivare il sito /activate-site Configura un record del sito web e assegna un URL pubblico
Configurare il modello di dati /setup-datamodel Crea tabelle, colonne e relazioni di Dataverse
Aggiungere dati di esempio (facoltativo) /add-sample-data Popola le tabelle di Dataverse con record di test realistici
Integrare l'API Web /integrate-webapi Genera codice client api tipizzato, servizi e autorizzazioni di tabella
Configurazione dell'autenticazione /setup-auth Aggiunge funzionalità di accesso e disconnessione e controllo degli accessi basato sui ruoli
Creare ruoli Web /create-webroles Genera file YAML dei ruoli web per la gestione di accesso utente
Aggiungere SEO /add-seo Genera robots.txt, sitemap.xml, e i meta tag

Flusso di lavoro tipico

Un flusso di lavoro end-to-end comune segue questa sequenza:

  1. /create-site : generare, progettare e sviluppare pagine
  2. /deploy-site : caricare nell'ambiente Power Pages
  3. /activate-site : Configurare un URL pubblico
  4. /setup-datamodel : Creare tabelle di Dataverse
  5. /add-sample-data : Popola tabelle con record di test
  6. /integrate-webapi : generare il codice client dell'API e configurare le autorizzazioni
  7. /create-webroles : Definire i ruoli di accesso
  8. /setup-auth : aggiungere l'accesso, la disconnessione e l'interfaccia utente basata su ruoli
  9. /add-seo : Ottimizzazione del motore di ricerca
  10. /deploy-site : eseguire il push delle modifiche finali in tempo reale

Suggerimento

Non è necessario seguire questo ordine esatto. Ogni competenza controlla i propri prerequisiti e indica se manca qualcosa. Ad esempio, è possibile eseguire prima se il sito necessita prima dell'autenticazione.

Creare il sito di Power Pages

Questa procedura dettagliata illustra il ciclo di vita completo della creazione di un sito Power Pages con il plug-in, dallo scaffolding alla distribuzione. Ogni passaggio descrive cosa si dice e cosa fa il plug-in in risposta.

Passaggio 1: Creare il sito

Descrivere il sito desiderato nel linguaggio naturale: cosa serve, quali pagine sono necessarie e qualsiasi preferenza di progettazione, ad esempio combinazione di colori, stile di layout o tipi di carattere. Eseguire o semplicemente descrivere il sito e il plug-in riconosce la finalità.

Il plug-in chiede di selezionare un framework (React, Vue, Angular o Astro) se non si specifica uno, quindi:

  1. Configura il progetto da un modello e applica il nome del sito, i colori e i token di progettazione.
  2. Installa le dipendenze, avvia un server di sviluppo e apre un'anteprima del browser live.
  3. Compila ogni pagina, componente e route richieste con le immagini pertinenti.
  4. Crea commit Git in tappe significative in modo da avere una cronologia di rollback integrata.

Passaggio 2: Distribuisci il sito

Eseguire /deploy-site per caricare il sito in Power Pages. Plug-in:

  1. Verifica che PAC CLI sia installato e che la sessione di autenticazione sia attiva.
  2. Conferma con te l'ambiente di destinazione prima di procedere.
  3. Esegue una compilazione di produzione e carica l'output compilato.
  4. Crea una directory di artefatti di distribuzione se non ne esiste già una.

Annotazioni

Se l'ambiente blocca determinati allegati di file, il plug-in rileva il problema e fornisce istruzioni per risolverlo.

Passaggio 3: Attivare il sito

Eseguire per rendere il sito accessibile pubblicamente. Plug-in:

  1. Suggerisce un sottodominio in base al nome del sito e consente di personalizzarlo.
  2. Effettua il provisioning di un record del sito Web tramite l'API Power Platform.
  3. Effettua il polling fino a quando il sito diventa attivo e restituisce l'URL pubblico.

A questo punto, si dispone di un sito di lavoro in un URL pubblico. I passaggi rimanenti aggiungono dati, autenticazione e SEO. Ignorare tutti i passaggi che non si applicano al sito.

Passaggio 4: Configurare il modello di dati

Eseguire per creare le tabelle di Dataverse necessarie per il sito. Se si dispone già di un diagramma ER o di uno schema specifico, specificarlo direttamente anziché fare in modo che l'agente analizzi il codice.

Il plug-in genera un agente di Data Model Architect che:

  1. Analizza il codice del sito per determinare quali dati sono necessari per le pagine e i componenti.
  2. Esegue una query nell'ambiente Dataverse per le tabelle esistenti per evitare duplicati.
  3. Propone un modello di dati con tabelle, colonne, tipi di dati e relazioni, visualizzati come diagramma ER.

Si esamina e approva la proposta. Non viene creato alcun elemento fino a quando non si conferma. Dopo l'approvazione, il plug-in crea le tabelle e le colonne tramite chiamate API e salva un file manifesto usato dai passaggi 5 e 6.

Passaggio 5: Aggiungere dati di esempio (facoltativo)

Eseguire per popolare le tabelle con i record di test. Questo passaggio richiede il modello di dati del passaggio 4.

Il plug-in esegue le azioni seguenti:

  1. Legge il manifesto per comprendere le tabelle, le colonne e le relazioni.
  2. Genera valori contestualmente appropriati per ogni tipo di colonna, ad esempio messaggi di posta elettronica realistici, date plausibili e importi di valuta formattati.
  3. Inserisce i record nell'ordine di dipendenza (tabelle padre prima delle tabelle figlio) e aggiorna automaticamente i token di autenticazione durante gli inserimenti bulk.

Passaggio 6: Integrare con l'API Web Dataverse

Eseguire per sostituire i dati fittizi con query live di Dataverse. Questo passaggio richiede il modello di dati del passaggio 4.

Il plug-in esegue le azioni seguenti:

  1. Analizza la codebase per individuare i componenti che usano dati fittizi, chiamate di recupero di segnaposto o matrici hardcoded. Esegue il mapping di questi componenti alle tabelle di Dataverse.
  2. Genera un agente di integrazione API Web per ogni tabella che genera:
    • Un client API condiviso con gestione dei token anti-contraffazione e logica di ritentativo.
    • Tipi di entità TypeScript e mapper di dominio.
    • Livello di servizio CRUD.
    • Modelli specifici dei framework, ad esempio hook React, composables Vue o servizi Angular.
  3. Genera un agente Permissions Architect che propone autorizzazioni di tabella e impostazioni del sito.

Esaminare e approvare la proposta di autorizzazioni. Il plug-in non crea file di configurazione fino a quando non si conferma.

Passaggio 7: Creare ruoli Web

Eseguire per definire i ruoli di accesso utente. Plug-in:

  1. Esegue una query nell'ambiente per individuare i ruoli Web esistenti per evitare duplicati.
  2. Genera definizioni di ruolo con identificatori univoci.
  3. Impone che ogni sito abbia al massimo un ruolo anonimo e un ruolo autenticato.

Passaggio 8: Configurare l'autenticazione

Eseguire per aggiungere funzionalità di accesso e disconnessione. Plug-in:

  1. Genera un servizio di autenticazione per il flusso di Microsoft Entra ID con la gestione dei token antifalsificazione.
  2. Crea un componente UI di accesso/disconnessione integrato nel layout del sito.
  3. Aggiunge utilità di access control basate sui ruoli che mostrano o nascondono gli elementi dell'interfaccia utente in base ai ruoli Web dell'utente.
  4. Usa i modelli del tuo framework in tutto (gli hook di React, i composabili di Vue o i servizi di Angular).

Passaggio 9: Aggiungere SEO

Eseguire per ottimizzare il sito per i motori di ricerca. Plug-in:

  1. Scopre gli itinerari dalla configurazione dei router del framework.
  2. Genera direttive del motore di ricerca e una mappa del sito per tutte le route individuate.
  3. Aggiunge i meta tag: viewport, charset, description, Open Graph, Twitter Card e i riferimenti favicon.

Passaggio 10: distribuire il sito finale

Se vengono eseguiti passaggi facoltativi, eseguilo di nuovo per applicare le modifiche in tempo reale. Il plug-in esegue una compilazione di produzione e carica il sito insieme a tutti gli artefatti di distribuzione (autorizzazioni di tabella, impostazioni del sito, ruoli Web) nell'ambiente di Power Pages.

Verificare il sito

Dopo aver completato le competenze, verificare che il sito Power Pages funzioni correttamente.

  1. Passare a Power Pages.
  2. Individuare il sito nell'elenco Siti attivi .
  3. Visualizzare in anteprima il sito sul desktop usando l'opzione Anteprima .
  4. Testare la funzionalità.

Suggerimenti e procedure consigliate

I suggerimenti seguenti consentono di sfruttare al meglio il plug-in e l'agente di codifica per intelligenza artificiale durante la creazione di siti Power Pages.

Verificare l'output del terminale per gli strumenti mancanti al primo avvio

Il plug-in fornisce le competenze e i flussi di lavoro, ma l'agente di codifica per intelligenza artificiale , GitHub Copilot cli o Claude Code, esegue i comandi effettivi nel computer. Quando si usano questi strumenti per la prima volta, osservare attentamente l'output del terminale. L'agente di codifica di intelligenza artificiale esegue comandi e script in background e alcuni di questi dipendono da strumenti che potrebbero non essere installati nel computer. Se un passaggio ha esito negativo, l'output del terminale mostra in genere quale strumento o comando non è stato trovato.

Se viene visualizzato un errore simile a o , installare lo strumento mancante e riattivare il flusso di lavoro. L'agente di codifica dell'intelligenza artificiale riprende dal punto in cui si era interrotto dopo che lo strumento è disponibile.

Esaminare le proposte dell'agente prima di approvare

Gli agenti dell'architetto delle autorizzazioni per l'API Web e l'architetto di modelli di dati presentano proposte prima di apportare modifiche. Dedicare il tempo necessario per esaminare attentamente queste proposte.

  • Proposte di modelli di dati: verificare che i nomi delle tabelle, i tipi di colonna e le relazioni corrispondano ai requisiti aziendali. È molto più semplice modificare una proposta rispetto alla ridenominazione delle colonne dopo l'inserimento dei dati.
  • Proposte di autorizzazioni: verifica che ogni ruolo abbia il livello di accesso corretto (creazione, lettura, aggiornamento, eliminazione) per ogni tabella. Le autorizzazioni di tabella eccessivamente permissive rappresentano un rischio comune per la sicurezza.

Incollare gli errori direttamente con il contesto

In caso di errore, se si tratta di un errore di compilazione, di un errore di distribuzione o di un'eccezione di runtime nel browser, copiare l'output completo degli errori. Incollarlo insieme a una breve descrizione delle operazioni eseguite. Maggiore è il contesto fornito, più veloce è la correzione.

Esempio: Errore di compilazione

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>

Suggerimento

Includere il nome del file, il comando eseguito e gli eventi previsti. Il plug-in usa questo contesto per individuare il problema e applicare una correzione mirata anziché indovinare.

Condividere gli errori dell'API Web con l'URL della richiesta completo

Un problema comune dopo la distribuzione è un errore 403 dall'API Web Power Pages quando una colonna non è abilitata per l'accesso all'API. Quando si verifica questo errore, incollare l'URL dell'API completo e la risposta di errore JSON completa. Il messaggio di errore indica esattamente quale tabella e colonna devono essere corrette e il plug-in può aggiornare il file YAML di autorizzazione della tabella e le impostazioni del sito per te.

Esempio: colonna non abilitata per l'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"
    }
  }
}

Questo errore () indica che la colonna di ricerca esiste nella tabella Dataverse, ma non è elencata nella configurazione delle autorizzazioni della tabella per l'API Web. Il plug-in risolve questo errore aggiungendo la colonna mancante all'autorizzazione YAML della tabella in e ridistribuendo.

Annotazioni

Power Pages'API Web richiede che ogni colonna restituita da una chiamata API sia elencata in modo esplicito nell'autorizzazione della tabella. Le proprietà di ricerca (con prefisso e suffisso) sono facili da trascurare perché il nome dell'API differisce dal nome logico della colonna in Dataverse. Quando viene visualizzato , aggiungere sempre tale colonna ai permessi della tabella. Non modificare la query API.

Essere specifici di ciò che vuoi

Le richieste vaghe producono risultati vaghi. Indicare al plug-in esattamente ciò che serve, incluse le preferenze di layout, i campi dati e il comportamento.

Anziché Prova
Creare una pagina per i lavori Creare una pagina di annunci di lavoro con una barra di ricerca nella parte superiore, filtri per posizione e reparto e una griglia di schede con titolo, società, fascia salariale e una data di pubblicazione per ciascun annuncio.
"Correzione dello stile" Le schede di lavoro si impilano verticalmente sul desktop. Farli visualizzare in una griglia a tre colonne con una distanza di 16 px su schermi più ampi di 768 px"
"Aggiungere alcuni dati" "Aggiungere 20 registrazioni di lavoro di esempio in quattro reparti (Engineering, Marketing, Sales, HR) con titoli realistici, intervalli di stipendi tra $60k-$180k e date registrate negli ultimi 30 giorni"
"Configurare l'API" "Connettere il componente JobListings alla tabella cr_jobposting Dataverse. Sostituire la matrice codificata in modo rigido con una chiamata API effettiva che recupera titolo, reparto, stipendio e data di pubblicazione.

Usare screenshot per i problemi visivi

Quando il sito non viene visualizzato correttamente nel browser, scatta uno screenshot e incollalo direttamente nella conversazione o fornisci un percorso di file. Il contesto visivo consente di identificare i problemi di layout, spaziatura e stili difficili da descrivere nel testo.

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.

Eseguire l'iterazione in piccoli passi

Invece di descrivere un intero sito in un prompt, compilare in modo incrementale. Iniziare con la struttura e il layout, quindi aggiungere funzionalità una alla volta. Questo approccio offre la possibilità di esaminare e correggere i corsi in ogni passaggio.

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

Suggerimento

Dopo ogni passaggio, controllare l'anteprima del browser. Se qualcosa non è corretto, correggerlo prima di procedere. È più facile risolvere i problemi in un solo componente rispetto a risolvere i problemi in un intero sito.

Chiedere una spiegazione prima dell'approvazione

Quando non sei certo di una modifica proposta, in particolare riguardo alle autorizzazioni, alle modifiche del modello di dati o alla configurazione dell'autenticazione, chiedi al plug-in di spiegare che cosa intende fare e perché, prima di approvare.

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

Eseguire le competenze in modo indipendente per ripristinare il sistema in caso di problemi

Se un'abilità fallisce a metà strada, non è necessario ricominciare. Ogni abilità viene eseguita in modo indipendente e può riprendere da dove è stata interrotta. Ad esempio, se si verifica un errore nella terza tabella, puoi rieseguirlo e rilevare il lavoro già completato.

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

Contenuti correlati

  • Last updated on