Componente da Web

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

Aplicativos de exemplo são uma ótima maneira de explorar as capacidades headless do Adobe Experience Manager (AEM). Este aplicativo Web Component demonstra como consultar conteúdo usando as APIs do GraphQL do AEM usando consultas persistentes e renderizar uma parte da interface do usuário, realizada usando código puro JavaScript.

Componente da Web com AEM Headless

Exibir o código-fonte no GitHub

Pré-requisitos prerequisites

As seguintes ferramentas devem ser instaladas localmente:

Requisitos do AEM

O componente da Web funciona com as seguintes opções de implantação de AEM.

Este aplicativo de exemplo depende da basic-tutorial-solution.content.zip para ser instalado e das configurações de implantação necessárias estão em vigor.

IMPORTANT
O componente da Web foi projetado para se conectar a um ambiente AEM Publish, no entanto, ele poderá obter conteúdo do autor do AEM se a autenticação for fornecida no arquivo person.js do componente da Web.

Como usar

  1. Clonar o repositório adobe/aem-guides-wknd-graphql:

    code language-shell
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. Navegue até o subdiretório web-component.

    code language-shell
    $ cd aem-guides-wknd-graphql/web-component
    
  3. Edite o arquivo .../src/person.js para incluir os detalhes da conexão AEM:

    No objeto aemHeadlessService, atualize o aemHost para apontar para o serviço AEM Publish.

    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 estiver se conectando a um serviço de Autor AEM, no objeto aemCredentials, forneça credenciais de usuário AEM local.

    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. Abra um terminal e execute os comandos de aem-guides-wknd-graphql/web-component:

    code language-shell
    $ npm install
    $ npm start
    
  5. Uma nova janela do navegador abre a página de HTML estática que incorpora o componente Web em http://localhost:8080.

  6. O componente Web Informações sobre a pessoa é exibido na página da Web.

O código

Abaixo está um resumo de como o componente da Web é criado, como ele se conecta ao AEM Headless para recuperar conteúdo usando consultas persistentes do GraphQL e como esses dados são apresentados. O código completo pode ser encontrado no GitHub.

Tag HTML do componente da Web

Um Componente Web reutilizável (também conhecido como elemento personalizado) <person-info> foi adicionado à página de HTML ../src/assets/aem-headless.html. Ele oferece suporte aos atributos host e query-param-value para direcionar o comportamento do componente. O valor do atributo host substitui o valor aemHost do objeto aemHeadlessService em person.js e query-param-value é usado para selecionar a pessoa a ser renderizada.

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

Implementação do componente da Web

O person.js define a funcionalidade do Componente Web e abaixo estão os principais destaques dele.

Implementação do elemento PersonInfo

O objeto de classe do elemento personalizado <person-info> define a funcionalidade usando os métodos de ciclo de vida connectedCallback(), anexando uma raiz de sombra, buscando consulta persistente do GraphQL e manipulação de DOM para criar a estrutura DOM de sombra interna do elemento personalizado.

// 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));
    }
}

Registrar o elemento <person-info>

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

Compartilhamento de recursos entre origens (CORS)

Este componente da Web depende de uma configuração do CORS com base em AEM em execução no ambiente AEM de destino e presume que a página de host é executada em http://localhost:8080 no modo de desenvolvimento e abaixo é uma amostra da configuração do CORS OSGi para o serviço de autor do AEM local.

Revise as configurações de implantação para o respectivo serviço AEM.

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