Portate il vostro progetto EDS bring-your-own-eds

Usa questa guida quando disponi già di un progetto Edge Delivery Services (EDS) o quando hai creato un’app senza crearla automaticamente.

Se la piattaforma ha creato il widget automaticamente, segui Personalizzare un widget generato. Il progetto generato include già la configurazione di file, blocchi, contenuti e azioni SDK descritta qui.

Percorso: preparare il progetto EDS → installare la build di SDK → e pubblicare il blocco → configurare l’azione → distribuire e testare.

Prima di iniziare

Hai bisogno di:

Installare il SDK delle app LLM

Dalla directory principale del progetto EDS:

npm install @adobe/llmapps-sdk

Il pacchetto copia il punto di ingresso del widget e l’implementazione del bridge nel progetto:

scripts/
├── aem-embed.js
└── llmapps-sdk.js

L’URL dello script utilizzato dall’azione punta a scripts/aem-embed.js.

Creare il blocco widget

Crea un blocco per l’azione:

blocks/
└── search-products/
    ├── search-products.js
    └── search-products.css

Esporta la funzione EDS decorate standard con il bridge connesso come secondo argomento:

export default async function decorate(block, bridge) {
  if (bridge) {
    bridge.applyHostStyles();
  }

  const result = bridge ? await bridge.toolResult : null;
  const products = result?.structuredContent?.products ?? [];

  const list = document.createElement('ul');
  products.forEach((product) => {
    const item = document.createElement('li');
    item.textContent = String(product.name ?? 'Product');
    list.append(item);
  });

  block.replaceChildren(list);

  if (bridge) {
    bridge.autoResize(block);
  }
}

Utilizza le API DOM per la codifica di valori di testo. Non concatenare dati esterni in HTML.

Creare e pubblicare la pagina widget

Creare una pagina EDS per il widget e aggiungere il blocco a tale pagina. Pubblica la pagina.

L’URL della pagina live diventa l’URL del widget dell’azione:

https://main--<repo>--<owner>.aem.live/<widget-page>

Il percorso della pagina non deve necessariamente corrispondere al nome dell’azione, ma una convenzione coerente semplifica la gestione del progetto.

Configurare CORS

Il widget carica la pagina EDS, oltre a script, stili, blocchi e file multimediali di origini diverse. Configurare l’intestazione per il sito EDS:

{
  "/**": [
    {
      "key": "access-control-allow-origin",
      "value": "<allowed-host-origin>"
    }
  ]
}

Utilizza l’origine host specifica richiesta dalla piattaforma LLM supportata. Utilizza * solo quando il widget è intenzionalmente pubblico, non utilizza richieste di origini diverse con credenziali e i requisiti di sicurezza lo consentono.

Per informazioni dettagliate sulla configurazione EDS, vedere Servizio di configurazione.

Configurare l’azione

In LLM Apps, aprire l’azione e selezionare Metadati widget.

Inserisci:

Configura i domini CSP e le autorizzazioni del browser utilizzando i privilegi minimi. Aggiungi solo le origini e le funzionalità richieste dal widget.

Per le definizioni dei campi, vedere Campi azione e widget.

Testare l’integrazione

Se la pagina funziona direttamente ma non nella piattaforma LLM, selezionare CORS, CSP, URL HTTPS e la forma structuredContent. Consulta Risoluzione dei problemi.