7장 - 모바일 앱에서 AEM Content Services 사용

자습서의 7장에서는 기본 Android 모바일 앱을 사용하여 AEM Content Services의 콘텐츠를 사용합니다.

Android 모바일 앱

이 자습서에서는 간단한 기본 Android 모바일 앱 ​을 사용하여 AEM Content Services에서 노출하는 이벤트 콘텐츠를 사용하고 표시합니다.

Android을(를) 사용하는 것은 중요하지 않으며, 소비하는 모바일 앱은 모든 모바일 플랫폼(예: iOS)의 프레임워크에서 작성할 수 있습니다.

Android은 Windows, macOs 및 Linux에서 Android 에뮬레이터를 실행할 수 있는 기능, 그 인기 및 AEM 개발자가 잘 이해하는 언어인 Java로 작성할 수 있기 때문에 자습서에 사용됩니다.

자습서의 Android 모바일 앱은 Android 모바일 앱을 빌드하거나 Android 개발 모범 사례를 전달하는 방법을 지시하기 위한 것이 아니라 모바일 애플리케이션에서 AEM Content Services를 사용하는 방법을 설명하기 위한 것입니다.​

AEM Content Services가 모바일 앱 경험을 제공하는 방법

모바일 앱 데모

로컬이 아닌 호스트 사용을 위한 모바일 앱 구성

AEM Publish이 http://localhost:4503 ​에서 실행되지 않는 경우 모바일 앱의 Settings에서 AEM Publish 호스트/포트 속성을 가리키도록 호스트 및 포트를 업데이트할 수 있습니다.

로컬에서 모바일 앱 실행

모바일 앱 코드

이 섹션에서는 대부분의 상호 작용하고 AEM Content Services 및 해당 JSON 출력에 의존하는 Android Mobile 앱 코드를 중점적으로 다룹니다.

로드 시 모바일 앱은 모바일 앱을 실행할 콘텐츠를 제공하도록 구성된 AEM Content Services 끝점인 HTTP GET에서 /content/wknd-mobile/en/api/events.model.json까지 만듭니다.

이벤트 API(/content/wknd-mobile/en/api/events.model.json)의 편집 가능한 템플릿이 잠겨 있으므로 모바일 앱을 코딩하여 JSON 응답의 특정 위치에서 특정 정보를 찾을 수 있습니다.

높은 수준 코드 흐름

AEM Content Services 끝점 호출

다음은 모바일 앱 환경을 구현하는 콘텐츠를 수집하기 위해 AEM Content Services를 호출하는 모바일 앱 MainActivity의 코드 증류입니다.

protected void onCreate(Bundle savedInstanceState) {
    ...
    // Create the custom objects that will map the JSON -> POJO -> View elements
    final List<ViewBinder> viewBinders = new ArrayList<>();

    viewBinders.add(new LogoViewBinder(this, getAemHost(), (ImageView) findViewById(R.id.logo)));
    viewBinders.add(new TagLineViewBinder(this, (TextView) findViewById(R.id.tagLine)));
    viewBinders.add(new EventsViewBinder(this, getAemHost(), (RecyclerView) findViewById(R.id.eventsList)));
    ...
    initApp(viewBinders);
}

private void initApp(final List<ViewBinder> viewBinders) {
    final String aemUrl = getAemUrl(); // -> http://localhost:4503/content/wknd-mobile/en/api/events.mobile.json
    JsonObjectRequest request = new JsonObjectRequest(aemUrl, null,
        new Response.Listener<JSONObject>() {
            @Override
            public void onResponse(JSONObject response) {
                for (final ViewBinder viewBinder : viewBinders) {
                    viewBinder.bind(response);
                }
            }
        },
        ...
    );
}

onCreate(..)은(는) 모바일 앱의 초기화 후크이며 JSON을 구문 분석하고 값을 View 요소에 바인딩하는 역할을 하는 3개의 사용자 지정 ViewBinders을(를) 등록합니다.

그런 다음 initApp(...)을(를) 호출하여 AEM Publish의 AEM Content Services 끝점에 HTTP GET 요청을 수행하여 콘텐츠를 수집합니다. 유효한 JSON 응답을 받으면 JSON 응답을 JSON을 구문 분석하고 모바일 View 요소에 바인딩하는 각 ViewBinder에 JSON 응답이 전달됩니다.

JSON 응답 구문 분석

다음은 LogoViewBinder을(를) 살펴봅니다. 간단하지만 몇 가지 중요한 고려 사항을 강조합니다.

public class LogoViewBinder implements ViewBinder {
    ...
    public void bind(JSONObject jsonResponse) throws JSONException, IOException {
        final JSONObject components = jsonResponse.getJSONObject(":items").getJSONObject("root").getJSONObject(":items");

        if (components.has("image")) {
            final Image image = objectMapper.readValue(components.getJSONObject("image").toString(), Image.class);

            final String imageUrl = aemHost + image.getSrc();
            Glide.with(context).load(imageUrl).into(logo);
        } else {
            Log.d("WKND", "Missing Logo");
        }
    }
}

bind(...)의 첫 번째 줄은 구성 요소가 추가된 AEM 레이아웃 컨테이너를 나타내는 :items → 루트 →:items 키를 통해 JSON 응답을 탐색합니다.

여기에서는 이미지 구성 요소를 나타내는 image 키가 검사됩니다(즉, 이 노드 이름→ JSON 키가 안정적이어야 함). 이 개체가 있으면 Jackson ObjectMapper 라이브러리를 통해 사용자 지정 이미지 POJO를 읽고 매핑합니다. 이미지 POJO는 아래에서 살펴봅니다.

마지막으로 Glide 도우미 라이브러리를 사용하여 로고의 src이(가) Android ImageView에 로드됩니다.

AEM Content Services는 JCR 경로(예: )만 제공하므로 AEM Publish 인스턴스에 aemHost을(를) 통해 AEM 스키마, 호스트 및 포트를 제공해야 합니다. /content/dam/wknd-mobile/images/wknd-logo.png)을(를) 참조된 콘텐츠로 복사합니다.

이미지 POJO image-pojo

선택 사항이지만 Gson과 같은 다른 라이브러리에서 제공하는 Jackson ObjectMapper 또는 유사한 기능을 사용하면 기본 JSON 개체 자체를 직접 처리하는 테디움 없이 복잡한 JSON 구조를 Java POJO에 매핑하는 데 도움이 됩니다. 이 간단한 경우 @JSONProperty 주석을 통해 image JSON 개체의 src 키를 이미지 POJO의 src 특성에 직접 매핑합니다.

package com.adobe.aem.guides.wknd.mobile.android.models;

import com.fasterxml.jackson.annotation.JsonProperty;

public class Image {
    @JsonProperty(value = "src")
    private String src;

    public String getSrc() {
        return src;
    }
}

JSON 개체에서 더 많은 데이터 포인트를 선택해야 하는 이벤트 POJO는 간단한 이미지보다 이 기술의 이점을 더 많이 얻습니다. 원하는 것은 src입니다.

모바일 앱 경험 살펴보기

AEM Content Services를 통해 기본 모바일 경험을 제공하는 방법을 이해했으므로, 학습한 내용을 사용하여 다음 단계를 수행하고 모바일 앱에 반영된 변경 사항을 확인하십시오.

각 단계 후에 모바일 앱을 풀다운하여 새로 고친 다음 모바일 경험에 대한 업데이트를 확인합니다.

축하합니다.

AEM Headless 자습서를 완료했습니다!

AEM Content Services 및 AEM as a Headless CMS에 대한 자세한 내용은 Adobe의 다른 설명서 및 지원 자료를 참조하십시오.