콘텐츠 동기화가 있는 모바일 mobile-with-content-sync

기본 모바일 애플리케이션에서 사용할 수 있도록 컨텐츠 동기화를 사용하여 컨텐츠를 패키징합니다. AEM에서 작성된 페이지는 장치가 오프라인 상태인 경우에도 앱 콘텐츠로 사용할 수 있습니다. 또한 AEM 페이지는 웹 표준을 기반으로 하므로 플랫폼 간에 작동하므로 기본 래퍼에 포함할 수 있습니다. 이 전략을 사용하면 개발 노력을 줄이고 앱 콘텐츠를 쉽게 업데이트할 수 있습니다.

컨텐츠 동기화 프레임워크는 웹 컨텐츠를 포함하는 아카이브 파일을 만듭니다. 컨텐츠는 간단한 페이지, 이미지 및 PDF 파일 또는 전체 웹 애플리케이션에서 사용할 수 있습니다. 콘텐츠 동기화 API는 콘텐츠를 검색하고 앱에 포함할 수 있도록 모바일 앱 또는 빌드 프로세스에서 보관 파일에 대한 액세스를 제공합니다.

다음 단계는 Content Sync의 일반적인 사용 사례를 보여 줍니다.

컨텐츠 동기화 컨텐츠 구성 configuring-the-content-sync-content

콘텐츠 동기화 구성을 만들어 클라이언트에 제공되는 ZIP 파일의 콘텐츠를 지정합니다. 콘텐츠 동기화 구성을 원하는 수만큼 만들 수 있습니다. 각 구성에는 식별을 위한 이름이 있습니다.

콘텐츠 동기화 구성을 만들려면 sling:resourceType 속성이 contentsync/config(으)로 설정된 상태에서 cq:ContentSyncConfig 노드를 리포지토리에 추가하십시오. cq:ContentSyncConfig 노드는 저장소의 어느 곳에나 있을 수 있지만 AEM 게시 인스턴스의 사용자가 노드에 액세스할 수 있어야 합니다. 따라서 /content 아래에 노드를 추가해야 합니다.

콘텐츠 동기화 ZIP 파일의 콘텐츠를 지정하려면 cq:ContentSyncConfig 노드에 하위 노드를 추가합니다. 각 하위 노드의 다음 속성은 포함할 콘텐츠 항목과 이 항목을 추가할 때 처리되는 방법을 식별합니다.

콘텐츠 동기화 구성 예를 참조하십시오.

콘텐츠 동기화 구성을 만들면 콘텐츠 동기화 콘솔에 표시됩니다.

콘텐츠 동기화 다운로드에 대한 액세스 구성 configuring-access-to-content-sync-downloads

콘텐츠 동기화에서 다운로드할 수 있는 사용자 또는 그룹을 지정합니다. 모든 Content Sync 캐시에서 다운로드할 수 있는 기본 사용자 또는 그룹을 구성할 수 있으며, 기본값을 재정의하고 특정 Content Sync 구성에 대한 액세스를 구성할 수 있습니다.

AEM이 설치되면 기본적으로 관리자 그룹의 구성원은 Content Sync에서 다운로드할 수 있습니다.

콘텐츠 동기화 다운로드에 대한 기본 액세스 설정 setting-the-default-access-for-content-sync-downloads

Day CQ Content Sync Manager 서비스는 콘텐츠 동기화에 대한 액세스를 제어합니다. 기본적으로 Content Sync에서 다운로드할 수 있는 사용자 또는 그룹을 지정하도록 이 서비스를 구성합니다.

웹 콘솔을 사용하여 서비스를 구성하는 경우 사용자 또는 그룹의 이름을 대체 캐시 승인 가능 속성 값으로 입력하십시오.

리포지토리에서 구성하는 경우 서비스에 대한 다음 정보를 사용하십시오.

콘텐츠 동기화 캐시에 대한 다운로드 액세스 재정의 overriding-download-access-for-a-content-sync-cache

특정 Content Sync 구성에 대한 다운로드 액세스를 구성하려면 cq:ContentSyncConfig 노드에 다음 속성을 추가하십시오.

예를 들어 앱을 사용하면 사용자가 Content Sync에서 직접 업데이트를 설치할 수 있습니다. 모든 사용자가 업데이트를 다운로드할 수 있도록 하려면 Authorizable 속성 값을 everyone(으)로 설정합니다.

cq:ContentSyncConfig 노드에 승인 가능 속성이 없는 경우 Day CQ Content Sync Manager 서비스의 대체 캐시 승인 가능 속성에 대해 구성된 기본 사용자 또는 그룹이 다운로드 가능한 사용자를 결정합니다.

콘텐츠 동기화 캐시를 업데이트하기 위한 사용자 구성 configuring-the-user-for-updating-a-content-sync-cache

사용자가 Content Sync 캐시에 대한 업데이트를 수행할 때 특정 사용자 계정이 사용자를 대신하여 해당 작업을 수행합니다. 익명 사용자는 기본적으로 모든 Content Sync 캐시를 업데이트합니다.

기본 사용자를 재정의하고 특정 Content Sync 캐시를 업데이트하는 사용자 또는 그룹을 지정할 수 있습니다.

기본 사용자를 재정의하려면 cq:ContentSyncConfig 노드에 다음 속성을 추가하여 특정 Content Sync 구성에 대한 업데이트를 수행하는 사용자 또는 그룹을 지정합니다.

cq:ContentSyncConfig 노드에 updateuser 속성이 없으면 기본 익명 사용자가 캐시를 업데이트합니다.

구성 유형 configuration-types

처리는 간단한 JSON 렌더링부터 참조된 에셋을 포함한 페이지의 완전한 렌더링까지 다양할 수 있습니다. 이 섹션에는 사용 가능한 구성 유형 및 특정 매개 변수가 나열되어 있습니다.

복사 파일과 폴더를 복사하십시오.

content - 표준 Sling 요청 처리를 사용하여 콘텐츠를 렌더링합니다.

clientlib - JavaScript 또는 CSS 클라이언트 라이브러리를 패키징합니다.

자산 - 자산의 원본 렌디션을 수집합니다.

이미지 - 이미지를 수집합니다.

이미지 유형은 zip 파일에 We.Retail 로고를 포함하는 데 사용됩니다.

페이지 - AEM 페이지를 렌더링하고 참조된 자산을 수집합니다.

다시 작성 - 다시 작성 노드는 내보낸 페이지에서 링크가 다시 작성되는 방식을 정의합니다. 다시 작성된 링크는 zip 파일에 포함된 파일이나 서버의 리소스를 가리킬 수 있습니다.

rewrite 노드는 page 노드 아래에 있어야 합니다.

rewrite 노드에는 다음 속성 중 하나 이상이 있을 수 있습니다.

각 속성은 다음 값 중 하나를 가질 수 있습니다.

PathRewriterTransformerFactory ​라는 AEM 서비스를 사용하면 다시 작성할 특정 html 특성을 구성할 수 있습니다. 이 서비스는 웹 콘솔에서 구성할 수 있으며 rewrite 노드의 각 속성에 대한 구성이 있습니다. clientlibs, images 및 links.

이 기능은 AEM 5.5에 추가되었습니다.

콘텐츠 동기화 구성 예 example-content-sync-configuration

아래 목록은 콘텐츠 동기화에 대한 예제 구성을 보여 줍니다.

+ weretail_go [cq:ContentSyncConfig]
  - sling:resourceType = "contentsync/config"

  + etc.designs.default [nt:unstructured]
    - path = "/etc/designs/default"
    - type = "copy"

  + etc.designs.mobile [nt:unstructured]
    - path = "/etc/designs/mobile"
    - type = "copy"

  + events.plist [nt:unstructured]
    - path = "/content/weretail_mobile/en/events/jcr:content/par/events"
    - type = "content"
    - extension = "plist"

  + events.touch.html [nt:unstructured]
    - path = "/content/weretail_mobile/en/events"
    - type = "pages"
    - extension = "html"
    - selector = "touch"

  + logo [nt:unstructured]
    - path = "/etc/designs/mobile/jcr:content/mobilecontentpage/logo"
    - type = "logo"

  + manifest [nt:unstructured]
    - indexPage = "/content/weretail_mobile/en/events.touch.html"
    - metadataPlist = "/content/weretail_mobile/en/events/_jcr_content/par/events.plist"

  + ...

etc.designs.default 및 etc.designs.mobile - 구성의 처음 두 항목이 명확합니다. 여러 모바일 페이지를 포함하게 되므로 /etc/designs 아래에 관련 디자인 파일이 필요합니다. 또한 추가 처리가 필요하지 않으므로 복사가 충분합니다.

events.plist - 이 항목은 좀 특별합니다. 서론에서 언급했듯이 애플리케이션은 이벤트 위치의 마커가 포함된 맵 보기를 제공해야 합니다. 우리는 필요한 위치 정보를 PLIST 포맷의 별도의 파일로 제공할 것입니다. 이를 위해 인덱스 페이지에서 사용되는 이벤트 목록 구성 요소에 plist.jsp라는 스크립트가 있습니다. 이 스크립트는 .plist 확장으로 구성 요소의 리소스를 요청할 때 실행됩니다. 평소대로 구성 요소 경로는 경로 속성에 지정되며 유형은 Sling 요청 처리를 사용하려고 하므로 콘텐츠로 설정됩니다.

events.touch.html - 그 다음은 앱에 표시되는 실제 페이지입니다. path 속성은 이벤트의 루트 페이지로 설정됩니다. 딥 속성의 기본값이 true이므로, 해당 페이지 아래의 모든 이벤트 페이지도 포함됩니다. 페이지의 이미지 또는 다운로드 구성 요소에서 참조할 수 있는 모든 이미지 또는 기타 파일이 포함되도록 페이지를 구성 유형으로 사용합니다. 또한 터치 선택기를 설정하면 모바일 버전의 페이지가 제공됩니다. 기능 팩의 구성에는 이러한 종류의 항목이 더 포함되어 있지만 여기서는 간결성을 위해 생략되었습니다.

로고 - 로고 구성 유형은 지금까지 언급되지 않았으며 빌드 형식이 아닙니다. 그러나 Content Sync 프레임워크는 어느 정도 확장 가능하며 그 예는 다음 섹션에서 다룹니다.

매니페스트 - 예를 들어 콘텐츠의 시작 페이지와 같이 zip 파일에 일종의 메타데이터를 포함하는 것이 좋습니다. 그러나 이러한 정보를 하드코딩하면 나중에 쉽게 변경할 수 없습니다. Content Sync 프레임워크는 구성에서 이름으로 식별되고 구성 유형이 필요하지 않은 매니페스트 노드를 찾아 이 사용 사례를 지원합니다. 특정 노드에 정의된 모든 속성은 매니페스트라고도 하며 zip 파일의 루트에 있는 파일에 추가됩니다.

이 예제에서 이벤트 목록 페이지는 초기 페이지로 가정됩니다. 이 정보는 indexPage 속성에 제공되므로 언제든지 쉽게 변경할 수 있습니다. 두 번째 속성은 events.plist 파일의 경로를 정의합니다. 나중에 볼 수 있듯이 클라이언트 애플리케이션은 이제 매니페스트를 읽고 그에 따라 작동할 수 있습니다.

구성이 설정되면 콘텐츠는 브라우저나 다른 HTTP 클라이언트를 통해 다운로드할 수 있습니다. 또는 iOS용으로 개발하는 경우 전용 WAppKitSync 클라이언트 라이브러리를 사용할 수 있습니다. 다운로드 위치는 구성의 경로 및 .zip 확장으로 구성됩니다. 예를 들어, 로컬 AEM 인스턴스로 작업하는 경우: https://localhost:4502/content/weretail_go.zip

콘텐츠 동기화 콘솔 the-content-sync-console

콘텐츠 동기화 콘솔에는 저장소의 모든 콘텐츠 동기화 구성(cq:ContentSyncConfig 유형의 모든 노드)이 나열되며 각 구성에 대해 다음을 수행할 수 있습니다.

개발 및 문제 해결에 유용할 수 있습니다.

콘솔은 다음 위치에서 액세스할 수 있습니다.

https://localhost:4502/libs/cq/contentsync/content/console.html

이는 다음과 같습니다.

Content Sync 프레임워크 확장 extending-the-content-sync-framework

구성 옵션의 수는 이미 광범위하지만 특정 사용 사례의 모든 요구 사항을 다루지는 않을 수 있습니다. 이 섹션에서는 Content Sync 프레임워크의 확장 지점 및 사용자 지정 구성 유형을 만드는 방법에 대해 설명합니다.

각 구성 유형에 대해 해당 특정 유형에 등록된 OSGi 구성 요소 팩터리인 콘텐츠 업데이트 처리기 ​가 있습니다. 이러한 처리기는 콘텐츠를 수집하고 처리한 다음 Content Sync 프레임워크에서 유지 관리하는 캐시에 추가합니다. 다음 인터페이스 또는 추상 기본 클래스를 구현합니다.

클래스를 OSGi 구성 요소 팩토리로 등록하고 번들의 OSGi 컨테이너에 배포합니다. JavaDoc 태그 또는 주석을 사용하여 Maven SCR 플러그인을 사용하여 수행할 수 있습니다. 다음 예제는 JavaDoc 버전을 보여 줍니다.

/*
 * @scr.component metatype="no"
 * factory="com.day.cq.contentsync.handler.ContentUpdateHandler/customtype"
 */
public class CustomTypeUpdateHandler implements ContentUpdateHandler {
    // add your code here
}

/*
 * @scr.component metatype="no" inherit="true"
 * factory="com.day.cq.contentsync.handler.ContentUpdateHandler/othertype"
 */
public class OtherTypeUpdateHandler extends AbstractSlingResourceUpdateHandler {
    // add your code here
}

factory 정의에는 슬래시로 구분된 공용 인터페이스와 사용자 지정 형식이 포함되어 있습니다. 이 전략을 사용하면 콘텐츠 동기화 프레임워크는 구성 항목에서 사용자 지정 유형을 인식하므로 사용자 지정 클래스의 인스턴스를 찾고 만들 수 있습니다. 다음 섹션에서는 사용자 지정 업데이트 처리기의 구체적인 예를 제공합니다.

사용자 지정 업데이트 처리기 구현 implementing-a-custom-update-handler

모든 We.Retail 모바일 페이지에는 zip 파일에 포함할 왼쪽 상단 모서리에 로고가 있습니다. 그러나 캐시 최적화를 위해 AEM은 저장소의 이미지 파일 실제 위치를 참조하지 않으므로 복사 구성 유형을 사용하지 못합니다. 대신 AEM에서 요청한 위치에서 이미지를 사용할 수 있도록 하는 고유한 로고 구성 유형을 제공해야 합니다. 다음 코드 목록은 로고 업데이트 처리기의 전체 구현을 보여 줍니다.

LogoUpdateHandler.java logoupdatehandler-java

package com.day.cq.wcm.apps.weretail.impl;

import javax.jcr.Node;
import javax.jcr.RepositoryException;
import javax.jcr.Session;

import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.jcr.resource.JcrResourceResolverFactory;

import com.day.cq.commons.jcr.JcrUtil;
import com.day.cq.contentsync.config.ConfigEntry;
import com.day.cq.contentsync.handler.ContentUpdateHandler;
import com.day.cq.wcm.foundation.Image;
import com.day.text.Text;

/**
 * The <code>LogoUpdateHandler</code> is used to update the content sync cache
 * with a page logo added using a logo component.
 *
 * @scr.component metatype="no"
 * factory="com.day.cq.contentsync.handler.ContentUpdateHandler/logo"
 */
public class LogoUpdateHandler implements ContentUpdateHandler {

    private static final Logger log = LoggerFactory.getLogger(LogoUpdateHandler.class);

    /** @scr.reference policy="static" */
    protected JcrResourceResolverFactory resolverFactory;

    public boolean updateCacheEntry(ConfigEntry configEntry, Long lastUpdated, String configCacheRoot, Session admin, Session session) {
        ResourceResolver resolver = resolverFactory.getResourceResolver(admin);
        Resource resource = resolver.getResource(configEntry.getContentPath());

        Image img = new Image(resource);
        img.setItemName(Image.NN_FILE, "image");
        img.setItemName(Image.PN_REFERENCE, "imageReference");
        img.setSelector("img");

        try {
            if(img.getLastModified() == null || lastUpdated < img.getLastModified().getTime().getTime()) {
                String src = img.getSrc();
                String parentPath = configCacheRoot + Text.getRelativeParent(src, 1);

                Node parent = JcrUtil.createPath(parentPath, "sling:Folder", admin);
                Node image = resolver.getResource(resource.getPath() + "/image").adaptTo(Node.class);
                JcrUtil.copy(image, parent, Text.getName(src));

                admin.save();

                return true;
            }
        } catch (RepositoryException e) {
            log.error("Unexpected error while updating logo: ", e);
        }

        return false;
    }
}

LogoUpdateHandler 클래스는 여러 인수를 사용하는 ContentUpdateHandler 인터페이스의 updateCacheEntry(ConfigEntry, Long, String, Session, Session) 메서드를 구현합니다.

사용자 지정 처리기를 구현하려면 먼저 구성 항목에 지정된 리소스를 기반으로 Image 클래스의 인스턴스를 만듭니다. 이것은 기본적으로 페이지의 실제 로고 구성 요소와 동일한 절차입니다. 이미지의 대상 경로가 페이지에서 참조된 경로와 동일한지 확인합니다.

그런 다음 마지막 업데이트 이후 리소스가 수정되었는지 확인합니다. 사용자 지정 구현은 캐시의 불필요한 업데이트를 방지하고 아무것도 변경되지 않으면 false를 반환해야 합니다. 리소스가 수정된 경우 이미지를 캐시 루트에 상대적인 예상 대상 위치에 복사합니다. 마지막으로 true이(가) 반환되어 캐시가 업데이트되었음을 프레임워크에 표시합니다.

클라이언트에서 컨텐츠 사용 using-the-content-on-the-client

Content Sync에서 제공하는 모바일 앱에서 콘텐츠를 사용하려면 HTTP 또는 HTTPS 연결을 통해 콘텐츠를 요청해야 합니다. 그 결과, 검색된 콘텐츠(ZIP 파일에 압축됨)가 추출되어 모바일 디바이스에 로컬로 저장될 수 있습니다. 콘텐츠는 데이터뿐만 아니라 논리, 즉 완전한 웹 애플리케이션을 의미하므로 모바일 사용자는 네트워크 연결 없이도 검색된 웹 애플리케이션 및 해당 데이터를 실행할 수 있습니다.

Content Sync는 지능적인 방식으로 콘텐츠를 제공합니다. 마지막으로 성공한 데이터 동기화 이후의 데이터 변경 사항만 제공되므로 데이터 전송에 필요한 시간을 줄일 수 있습니다. 응용 프로그램 데이터를 처음 실행할 때는 1970년 1월 01일 이후에 변경이 요청되고, 마지막으로 성공한 동기화 이후에 변경된 데이터만 요청됩니다. AEM은 iOS용 클라이언트 통신 프레임워크를 사용하여 데이터 통신 및 전송을 단순화하므로 iOS 기반 웹 애플리케이션을 활성화하는 데 최소한의 기본 코드가 필요합니다.

전송된 모든 데이터를 동일한 디렉토리 구조로 추출할 수 있으므로 데이터를 추출할 때 추가 단계(예: 종속성 확인)가 필요하지 않습니다. iOS이 있는 경우 모든 데이터는 iOS 앱의 Documents 폴더 내에 있는 하위 폴더에 저장됩니다.

iOS 기반 AEM Mobile 앱의 일반적인 실행 경로:

연결을 설정할 수 없는 경우 이전에 다운로드한 데이터가 표시됩니다.

시작하기 getting-ahead

관리자 및 개발자의 역할과 책임에 대해 알아보려면 아래 리소스를 참조하십시오.