Componente Web

[AEM headless as a Cloud Service]{class="badge informative"}

Le applicazioni di esempio sono un ottimo modo per esplorare le funzionalità headless di Adobe Experience Manager (AEM). Questa applicazione per componenti web illustra come eseguire query sui contenuti che utilizzano le API GraphQL dell’AEM utilizzando query persistenti ed eseguire il rendering di una parte dell’interfaccia utente, utilizzando esclusivamente codice JavaScript.

Componente Web con AEM headless

Visualizza il codice sorgente in GitHub

Prerequisiti prerequisites

I seguenti strumenti devono essere installati localmente:

Requisiti AEM

Il componente Web funziona con le seguenti opzioni di distribuzione AEM.

  • AEM as a Cloud Service
  • Configurazione locale con SDK AEM Cloud Service
    • Richiede [JDK 11](https://experience.adobe.com/#/downloads/content/software-distribution/en/general.html?1_group.propertyvalues.property=.%2Fjcr%3Acontent%2Fmetadata%2Fdc%3AsoftwareType&1_group.propertyvalues.operation=equals&1_group.propertyvalues.0_values=tipo di software%3Atooling&fulltext=Oracle%7E+JDK%7E+11%7E&orderby=%40jcr%3Acontent%2Fjcr%3AlastModified&orderby.sort=desc&layout=list&p.offset=0&p.limit=14) (se ci si connette a AEM 6.5 o AEM SDK locale)

L'app di esempio si basa sull'installazione di basic-tutorial-solution.content.zip e sull'esistenza delle configurazioni di distribuzione richieste.

IMPORTANT
Il componente Web è progettato per connettersi a un ambiente AEM Publish, tuttavia può creare contenuto da AEM Author se viene fornita l'autenticazione nel file person.js del componente Web.

Come usare

  1. Clona l'archivio adobe/aem-guides-wknd-graphql:

    code language-shell
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. Passare alla sottodirectory web-component.

    code language-shell
    $ cd aem-guides-wknd-graphql/web-component
    
  3. Modificare il file .../src/person.js per includere i dettagli di connessione AEM:

    Nell'oggetto aemHeadlessService, aggiornare aemHost in modo che punti al servizio Publish AEM.

    code language-plain
    # AEM Server namespace
    aemHost=https://publish-p123-e456.adobeaemcloud.com
    
    # AEM GraphQL API and Persisted Query Details
    graphqlAPIEndpoint=graphql/execute.json
    projectName=my-project
    persistedQueryName=person-by-name
    queryParamName=name
    

    Se ci si connette a un servizio di creazione AEM, specificare le credenziali utente AEM locali nell'oggetto aemCredentials.

    code language-plain
    # For Basic auth, use AEM ['user','pass'] pair (for example, when connecting to local AEM Author instance)
    username=admin
    password=admin
    
  4. Aprire un terminale ed eseguire i comandi da aem-guides-wknd-graphql/web-component:

    code language-shell
    $ npm install
    $ npm start
    
  5. Una nuova finestra del browser apre la pagina HTML statica che incorpora il componente Web in http://localhost:8080.

  6. Il componente Web Informazioni persona viene visualizzato nella pagina Web.

Il codice

Di seguito è riportato un riepilogo della modalità di creazione del componente Web, della modalità di connessione a headless AEM per il recupero di contenuti tramite query persistenti GraphQL e della modalità di presentazione dei dati. Il codice completo si trova su GitHub.

Tag HTML del componente Web

Un componente Web riutilizzabile (o elemento personalizzato) <person-info> è stato aggiunto alla pagina HTML ../src/assets/aem-headless.html. Supporta gli attributi host e query-param-value per determinare il comportamento del componente. Il valore dell'attributo host sostituisce il valore aemHost dell'oggetto aemHeadlessService in person.js e query-param-value viene utilizzato per selezionare la persona di cui eseguire il rendering.

    <person-info
        host="https://publish-p123-e456.adobeaemcloud.com"
        query-param-value="John Doe">
    </person-info>

Implementazione del componente web

person.js definisce la funzionalità del componente Web e di seguito sono riportati gli elementi di rilievo di tale funzionalità.

Implementazione dell’elemento PersonInfo

L'oggetto classe dell'elemento personalizzato <person-info> definisce la funzionalità utilizzando i metodi del ciclo di vita connectedCallback(), allegando una radice dell'ombreggiatura, recuperando la query persistente di GraphQL e la manipolazione DOM per creare la struttura DOM dell'elemento personalizzato.

// Create a Class for our Custom Element (person-info)
class PersonInfo extends HTMLElement {

    constructor() {
        ...
        // Create a shadow root
        const shadowRoot = this.attachShadow({ mode: "open" });
        ...
    }

    ...

    // lifecycle callback :: When custom element is appended to document
    connectedCallback() {
        ...
        // Fetch GraphQL persisted query
        this.fetchPersonByNamePersistedQuery(headlessAPIURL, queryParamValue).then(
            ({ data, err }) => {
                if (err) {
                    console.log("Error while fetching data");
                } else if (data?.personList?.items.length === 1) {
                    // DOM manipulation
                    this.renderPersonInfoViaTemplate(data.personList.items[0], host);
                } else {
                    console.log(`Cannot find person with name: ${queryParamValue}`);
                }
            }
        );
    }

    ...

    //Fetch API makes HTTP GET to AEM GraphQL persisted query
    async fetchPersonByNamePersistedQuery(headlessAPIURL, queryParamValue) {
        ...
        const response = await fetch(
            `${headlessAPIURL}/${aemHeadlessService.persistedQueryName}${encodedParam}`,
            fetchOptions
        );
        ...
    }

    // DOM manipulation to create the custom element's internal shadow DOM structure
    renderPersonInfoViaTemplate(person, host){
        ...
        const personTemplateElement = document.getElementById('person-template');
        const templateContent = personTemplateElement.content;
        const personImgElement = templateContent.querySelector('.person_image');
        personImgElement.setAttribute('src',
            host + (person.profilePicture._dynamicUrl || person.profilePicture._path));
        personImgElement.setAttribute('alt', person.fullName);
        ...
        this.shadowRoot.appendChild(templateContent.cloneNode(true));
    }
}

Registra elemento <person-info>

    // Define the person-info element
    customElements.define("person-info", PersonInfo);

Condivisione delle risorse tra le origini (CORS)

Questo componente Web si basa su una configurazione CORS basata su AEM in esecuzione nell'ambiente AEM di destinazione e presuppone che la pagina host venga eseguita su http://localhost:8080 in modalità di sviluppo e di seguito è riportata una configurazione OSGi CORS di esempio per il servizio AEM Author locale.

Rivedi configurazioni di distribuzione per il rispettivo servizio AEM.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4