5장 - 컨텐츠 서비스 페이지 작성

AEM Headless 자습서의 5장에서는 4장에 정의된 템플릿에서 페이지 작성을 다룹니다. 이 장에서 만드는 페이지는 모바일 앱에 대한 JSON HTTP 종료 지점 역할을 합니다.

노트

/content/wknd-mobile/en/api의 페이지 컨텐츠 아키텍처가 미리 빌드되었습니다. en 및 api의 기본 페이지는 아키텍처 및 조직 용도로 사용되지만, 엄격하게 필수는 아닙니다. API 컨텐츠를 현지화할 수 있는 경우 API 페이지를 AEM Sites 페이지처럼 현지화할 수 있으므로 일반적인 언어 사본 및 다중 사이트 관리자 페이지 조직 우수 사례를 따르는 것이 좋습니다.

이벤트 API 페이지 만들기

  1. AEM > 사이트 > WKND Mobile > English >API​로 이동합니다.
  2. API 페이지 레이블을 탭한 다음, 맨 ​​위 작업 표시줄에서 만들기 단추를 탭하고 API 페이지 아래에 새 이벤트 API 페이지를 만듭니다.
    1. 맨 위 작업 표시줄에서 만들기​를 누릅니다
    2. 이벤트 API 템플릿 선택
    3. 이름 필드에 events​를 입력합니다.
    4. 제목 필드에 이벤트 API​를 입력합니다
    5. 맨 위 작업 표시줄에서 만들기​를 탭하여 페이지를 만듭니다
    6. 완료​를 탭하여 AEM Sites 관리자로 돌아갑니다

이벤트 API 페이지 작성

노트

이 프로젝트는 작성 경험을 위한 몇 가지 기본 스타일을 제공하기 위해 CSS를 제공합니다.

  1. Events API 페이지를 편집합니다. AEM > Sites > WKND Mobile > English > API 로 이동하고, Events API 페이지를 선택하고, 맨 위 작업 표시줄에서 Edit​을 탭합니다.

  2. 자산 파인더에서 이미지 구성 요소 자리 표시자로 드래그 앤 드롭하여 앱에 표시할 로고 이미지​를 추가합니다.

    • /content/dam/wknd-mobile/images/wknd-logo.png에 있는 제공된 로고를 사용하십시오.

  3. 이벤트 위에 표시하려면 태그 줄​을 추가하십시오.

    1. Text 구성 요소를 편집합니다
    2. 텍스트를 입력합니다.
      • The WKND is here.

  4. 표시할 events​을 선택합니다.

    1. 속성 탭에서 다음 구성을 설정합니다.
      • 모델:Event
      • 상위 경로:/content/dam/wknd-mobile/en/events
      • 태그:<비워 두십시오>
    2. Elements 탭에서 다음 구성을 설정합니다.
      • 나열된 요소를 모두 제거하여 이벤트 컨텐츠 조각의 모든 요소가 표시되도록 합니다.

API 페이지의 JSON 출력을 검토하십시오

.model.json 선택기를 사용하여 페이지를 요청하여 JSON 출력 및 해당 형식을 검토할 수 있습니다.

이 API의 소비자가 이 JSON 구조(또는 스키마)를 잘 알고 있어야 합니다. 이는 중요한 API 소비자가 구조의 어떤 측면이 고정되어 있는지(예: 이벤트 API의 로고(이미지) 및 Tag Live(텍스트)이며 유동(예: 컨텐츠 조각 목록 구성 요소 아래에 나열된 이벤트.

게시된 API에서 이 계약을 중단하면 앱이 사용되는 경우 잘못된 동작이 발생할 수 있습니다.

  1. 새 브라우저 탭에서, AEM Content Services의 JSON Exporter를 호출하는 .model.json 선택기를 사용하여 이벤트 API 페이지를 요청하고, 페이지 및 구성 요소를 정규화된 잘 정의된 JSON 구조로 serialize합니다.

    이러한 페이지에서 만든 JSON 구조는 앱을 사용하는 구조가 충족해야 하는 구조입니다.

  2. 이벤트 API 페이지를 JSON​로 요청합니다.

    결과는 다음과 유사하게 표시됩니다.

AEM Content Services JSON 출력

노트

이 JSON은 .tidy 선택기를 사용하여 사람이 읽을 수 있도록 clean(형식이 지정된) 방식으로 출력할 수 있습니다.

다음 단계

원할 경우 com.adobe.aem.guides.wknd-mobile.content.chapter-5.zip 컨텐츠 패키지를 AEM Package Manager를 통해 AEM Author에 설치합니다. 이 패키지에는 자습서의 이전 장과 이 장에 설명된 구성 및 컨텐츠가 들어 있습니다.

이 페이지에서는