이 자습서의 7장에서는 기본 Android 모바일 앱을 사용하여 AEM Content Services의 콘텐츠를 사용합니다.
이 자습서에서는 간단한 기본 Android 모바일 앱 AEM Content Services에 의해 노출된 이벤트 컨텐츠를 사용하고 표시할 수 있습니다.
의 사용 Android 은(는) 크게 중요하지 않으며, 소비되는 모바일 앱을 모바일 플랫폼용 프레임워크(예: iOS)에 쓸 수 있습니다.
Android는 Windows, macOs 및 Linux에서 Android 에뮬레이터를 실행하는 기능, 인기도, AEM 개발자가 잘 이해하는 언어인 Java로 쓸 수 있기 때문에 자습서에 사용됩니다.
이 자습서의 Android 모바일 앱은notAndroid 모바일 앱을 빌드하거나 Android 개발 우수 사례를 전달하는 방법을 지시하는 대신, 모바일 애플리케이션에서 AEM Content Services를 사용할 수 있는 방법을 보여 주기 위한 것입니다.
AEM 게시가 실행되고 있지 않은 경우 http://localhost:4503 호스트 및 포트는 모바일 앱의 Settings AEM 게시 호스트/포트를 가리킵니다.
이 섹션에서는 가장 상호 작용하며 AEM Content Services 및 JSON 출력에 따라 다른 Android 모바일 앱 코드를 강조 표시합니다.
로드 시 모바일 앱에서 다음을 수행합니다 HTTP GET
to /content/wknd-mobile/en/api/events.model.json
모바일 앱을 구동할 컨텐츠를 제공하도록 구성된 AEM Content Services 끝점입니다.
이벤트 API(/content/wknd-mobile/en/api/events.model.json
가 잠겨 있는 경우 모바일 앱을 코딩하여 JSON 응답의 특정 위치에서 특정 정보를 찾을 수 있습니다.
HTTP GET
의 AEM Publish에 요청 /content/wknd-mobile/en/api/events.model.json
콘텐츠를 수집하여 모바일 앱의 UI를 채우십시오.다음은 모바일 앱의 코드를 증류하는 것입니다 MainActivity
는 모바일 앱 경험을 구동하는 컨텐츠를 수집하기 위해 AEM Content Services를 호출해야 합니다.
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(..)
는 모바일 앱에 대한 초기화 후크이며 3개의 사용자 지정을 등록합니다 ViewBinders
json을 구문 분석하고 값을 View
요소를 생성하지 않습니다.
initApp(...)
그런 다음 이 호출됩니다. 이 호출되면 AEM Publish에서 AEM Content Services 종단점에 HTTP GET을 요청하여 컨텐츠를 수집합니다. 유효한 JSON 응답을 수신하면 JSON 응답이 각 JSON에 전달됩니다 ViewBinder
JSON을 구문 분석하고 모바일에 바인딩하는 책임이 있습니다 View
요소를 생성하지 않습니다.
다음으로, 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(...)
키를 통해 JSON 응답을 탐색합니다 항목→ 루트 →:항목 구성 요소가 추가된 AEM 레이아웃 컨테이너를 나타냅니다.
여기에서 이름이 인 키에 대해 확인이 수행됩니다 이미지이미지 구성 요소를 나타내는 : 이 노드 이름→ JSON 키가 안정해야 합니다. 이 개체가 있으면 읽기 및 매핑됩니다 사용자 지정 이미지 POJO 잭슨 ObjectMapper
라이브러리. 이미지 POJO는 아래에 탐색되었습니다.
마지막으로 로고는 src
를 사용하여 Android ImageView에 로드됩니다. Glide 도우미 라이브러리입니다.
Adobe에서는 AEM 스키마, 호스트 및 포트를( aemHost
)를 AEM Content Services로 AEM Publish 인스턴스에 추가하면 JCR 경로(예: /content/dam/wknd-mobile/images/wknd-logo.png
)를 참조한 컨텐츠에 추가할 수 있습니다.
선택 사항이지만 Jackson ObjectMapper Gson과 같은 다른 라이브러리에서 제공하는 유사한 기능을 사용하면 기본 JSON 개체 자체를 직접 처리하지 않고도 복잡한 JSON 구조를 Java POJO에 매핑할 수 있습니다. 이 간단한 경우에는 src
키 image
JSON 개체, 대상 src
를 통해 직접 이미지 POJO에 있는 속성 @JSONProperty
주석.
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의 다른 설명서 및 지원 자료를 참조하십시오.