예제 애플리케이션은 AEM(Adobe Experience Manager)의 Headless 기능을 살펴볼 수 있는 좋은 방법입니다. 이 웹 구성 요소 애플리케이션은 지속 쿼리를 사용하여 AEM GraphQL API를 사용하여 콘텐츠를 쿼리하고 순수한 JavaScript 코드를 사용하여 UI의 일부를 렌더링하는 방법을 보여 줍니다.
다음 도구를 로컬에 설치해야 합니다.
웹 구성 요소는 다음 AEM 배포 옵션과 함께 작동합니다.
이 예제 앱은 basic-tutorial-solution.content.zip 설치 및 필수 배포 구성 제자리에 있습니다.
웹 구성 요소는 AEM 게시 그러나 웹 구성 요소의 인증에서 제공된 경우 AEM 작성자의 컨텐츠를 소싱할 수 있습니다. person.js
파일.
복제 adobe/aem-guides-wknd-graphql
저장소:
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
다음으로 이동 web-component
하위 디렉터리입니다.
$ cd aem-guides-wknd-graphql/web-component
편집 .../src/person.js
AEM 연결 세부 정보를 포함할 파일:
다음에서 aemHeadlessService
개체, 업데이트 aemHost
를 클릭하여 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
AEM Author 서비스에 연결하는 경우 aemCredentials
개체에서 로컬 AEM 사용자 자격 증명을 제공합니다.
# For Basic auth, use AEM ['user','pass'] pair (for example, when connecting to local AEM Author instance)
username=admin
password=admin
터미널을 열고 다음 명령 실행 aem-guides-wknd-graphql/web-component
:
$ npm install
$ npm start
웹 구성 요소를 임베드하는 정적 HTML 페이지가 새 브라우저 창에 열립니다. http://localhost:8080.
다음 개인 정보 웹 구성 요소가 웹 페이지에 표시됩니다.
다음은 웹 구성 요소를 빌드하는 방법, AEM Headless에 연결하여 GraphQL 지속 쿼리를 사용하여 콘텐츠를 검색하는 방법 및 이러한 데이터를 제공하는 방법에 대한 요약입니다. 전체 코드는에서 찾을 수 있습니다 GitHub.
재사용 가능한 웹 구성 요소(예: 맞춤형 요소) <person-info>
이(가)에 추가됩니다 ../src/assets/aem-headless.html
HTML 페이지입니다. 다음을 지원합니다. host
및 query-param-value
구성 요소 동작을 제어하는 속성입니다. 다음 host
속성 값 재정의 aemHost
값: 부터 aemHeadlessService
의 오브젝트 person.js
, 및 query-param-value
은 렌더링할 사용자를 선택하는 데 사용됩니다.
<person-info
host="https://publish-p123-e456.adobeaemcloud.com"
query-param-value="John Doe">
</person-info>
다음 person.js
은 웹 구성 요소 기능을 정의하며 그 주요 사항은 아래에 나와 있습니다.
다음 <person-info>
사용자 지정 요소의 클래스 개체는 다음을 사용하여 기능을 정의합니다 connectedCallback()
수명 주기 메서드, 섀도 루트 첨부, GraphQL 지속 쿼리 가져오기 및 DOM 조작을 통해 사용자 지정 요소의 내부 섀도 DOM 구조를 만듭니다.
// 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));
}
}
<person-info>
요소 // Define the person-info element
customElements.define("person-info", PersonInfo);
이 웹 구성 요소는 대상 AEM 환경에서 실행되는 AEM 기반 CORS 구성을 사용하며 호스트 페이지가에서 실행된다고 가정합니다. http://localhost:8080
개발 모드 및 아래는 로컬 AEM 작성자 서비스에 대한 샘플 CORS OSGi 구성입니다.
검토하십시오. 배포 구성 각 AEM 서비스용.