Componente da Web
- Aplica-se a:
- Experience Manager as a Cloud Service
- Tópicos:
- Fragmentos de conteúdo
Criado para:
- Iniciante
- Desenvolvedor
AEM Headless as a Cloud Service
Aplicativos de exemplo são uma ótima maneira de explorar os recursos headless do Adobe Experience Manager (AEM). Este aplicativo Web Component demonstra como consultar conteúdo usando as APIs GraphQL do AEM usando consultas persistentes e renderizar uma parte da interface do usuário, realizada usando código puro JavaScript.
Exibir o código-fonte no GitHub
Pré-requisitos
As seguintes ferramentas devem ser instaladas localmente:
Requisitos do AEM
O componente Web funciona com as seguintes opções de implantação do AEM.
- AEM as a Cloud Service
- Configuração local usando o AEM Cloud Service SDK
- Requer o JDK 11 (se estiver se conectando ao AEM 6.5 ou AEM SDK local)
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.
person.js
do componente da Web.Como usar
-
Clonar o repositório
adobe/aem-guides-wknd-graphql
:$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
-
Navegue até o subdiretório
web-component
.$ cd aem-guides-wknd-graphql/web-component
-
Edite o arquivo
.../src/person.js
para incluir os detalhes de conexão do AEM:No objeto
aemHeadlessService
, atualize oaemHost
para apontar para o serviço de Publicação do AEM.# 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 do AEM Author, no objeto
aemCredentials
, forneça credenciais de usuário locais do AEM.# For Basic auth, use AEM ['user','pass'] pair (for example, when connecting to local AEM Author instance) username=admin password=admin
-
Abra um terminal e execute os comandos de
aem-guides-wknd-graphql/web-component
:$ npm install $ npm start
-
Uma nova janela do navegador abre a página estática do HTML que incorpora o componente Web em http://localhost:8080.
-
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 do 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 executada no ambiente do AEM de destino e presume que a página de host é executada em http://localhost:8080
no modo de desenvolvimento e abaixo está um exemplo de configuração do CORS OSGi para o serviço de autor local do AEM.
Revise as configurações de implantação para os respectivos serviços da AEM.