자습서의 7장에서는 기본 Android 모바일 앱을 사용하여 AEM Content Services의 콘텐츠를 사용합니다.
이 튜토리얼에서는 간단한 기본 Android 모바일 앱 AEM Content Services에 의해 노출된 이벤트 컨텐츠를 사용하고 표시합니다.
사용 Android 는 대부분 중요하지 않으며, 소비하는 모바일 앱은 iOS과 같은 모든 모바일 플랫폼에 대한 프레임워크에서 작성할 수 있습니다.
Android는 Windows, macOs 및 Linux에서 Android 에뮬레이터를 실행할 수 있는 기능, 그 인기와 AEM 개발자가 잘 이해하는 언어인 Java로 작성할 수 있기 때문에 자습서에 사용됩니다.
자습서의 Android 모바일 앱은 다음과 같습니다아님는 Android 모바일 앱을 빌드하거나 Android 개발 모범 사례를 전달하는 방법을 지시하기 위한 것이지만, 모바일 애플리케이션에서 AEM Content Services를 사용하는 방법을 설명하기 위한 것입니다.
AEM 게시가에서 실행되지 않는 경우 http://localhost:4503 모바일 앱에서 호스트 및 포트를 업데이트할 수 있습니다. Settings 속성 AEM Publish 호스트/포트를 가리킵니다.
이 섹션에서는 대부분의 상호 작용하고 AEM Content Services 및 JSON 출력에 의존하는 Android 모바일 앱 코드를 중점적으로 다룹니다.
로드 시 모바일 앱은 HTTP GET
끝 /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 응답을 내보냅니다. :items → 루트 → :items 구성 요소가 추가된 AEM 레이아웃 컨테이너를 나타냅니다.
여기에서 이름이 인 키를 확인합니다. 이미지: 이미지 구성 요소를 나타냅니다(JSON 키가 안정적인 → 노드 이름이 중요함). 이 개체가 있으면 를 읽고 사용자 정의 이미지 POJO 잭슨을 통해서 ObjectMapper
라이브러리입니다. 이미지 POJO는 아래에서 살펴봅니다.
마지막으로, 로고는 src
를 사용하여 Android ImageView에 로드됩니다. Glide 도우미 라이브러리입니다.
AEM 스키마, 호스트 및 포트를 제공해야 합니다(다음을 통해). aemHost
AEM Content Services가 JCR 경로(예: )만 제공하므로 AEM 게시 인스턴스에 액세스할 수 있습니다. /content/dam/wknd-mobile/images/wknd-logo.png
참조 콘텐츠 참조).
선택 사항이지만 를 사용합니다. Jackson 개체 매퍼 또는 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의 다른 설명서 및 지원 자료를 참조하십시오.