앱 구조

노트

단일 페이지 애플리케이션 프레임워크 기반 클라이언트측 렌더링(예: 응답)이 필요한 프로젝트에 SPA 편집기를 사용하는 것이 좋습니다. 추가 정보.

AEM Mobile 프로젝트에는 페이지, JavaScript 및 CSS 클라이언트 라이브러리, 재사용 가능한 AEM 구성 요소, 컨텐츠 동기화 구성 및 PhoneGap 앱 셸 컨텐츠를 비롯한 다양한 컨텐츠 유형 세트가 포함되어 있습니다. 스타터 키트를 기반으로 새로운 AEM Mobile 앱을 제작하면 이식성과 장기 유지 관리 기능을 모두 간소화할 수 있는 Adobe의 권장 구조로 다양한 유형의 콘텐츠를 가져올 수 있습니다.

페이지 컨텐츠

AEM Mobile 콘솔에서 응용 프로그램을 인식하려면 응용 프로그램 페이지가 모두 /content/mobileapps 아래에 있어야 합니다.

chlimage_1-52

AEM 규칙에서 앱의 첫 번째 페이지는 앱의 기본 언어('en', Geometrixx 및 Starter Kit 케이스 둘 다에서)로 사용되는 하위 페이지로 리디렉션되어야 합니다. 최상위 로케일 페이지는 일반적으로 기본 'splash-page' 구성 요소(/libs/mobileapps/components/splash-page?lang=ko)에서 상속됩니다. 이 구성 요소는 over-the-air Content Sync 업데이트(contentInit 코드는 /etc/clientlibs/mobile/content-sync/js/contentInit.js)의 설치를 지원하는 데 필요한 초기화를 처리합니다.

템플릿 및 구성 요소

앱에 대한 템플릿 및 구성 요소 코드는 /apps/<브랜드 이름>/<앱 이름>에 있어야 합니다. 규칙에 따라 /apps/<브랜드 이름>/<앱 이름>에 템플릿 및 구성 요소 코드를 삽입해야 합니다. AEM에서 이미 사이트에서 작업한 개발자에게는 이 패턴이 익숙해야 합니다. 일반적으로 게시 인스턴스에서 기본적으로 익명 액세스가 가능하도록 /apps/가 잠기면 그 뒤에 옵니다. 따라서 Raw JSP 코드는 잠재적 공격자로부터 숨겨집니다.

앱 특정 템플릿은 템플릿 자체의 allowedPaths 속성 노드를 사용하고 해당 값을 '/content/mobileapps(/)로 설정하여 제공할 수 있도록 구성할 수 있습니다.&ast;)?' - 또는 템플릿을 단일 앱에서만 사용할 수 있어야 하는 경우 더 구체적인 내용이 필요합니다. 또한 allowedParentsallowedChildren 속성을 활용하여 새 페이지를 만드는 위치를 기반으로 작성자가 사용할 수 있는 템플릿을 세부적으로 제어할 수 있습니다.

새 앱 페이지 구성 요소를 처음부터 만들 때는 'mobileapps/components/angular/ng-page'로 sling:resourceSuperType 속성을 설정하는 것이 좋습니다. 이렇게 하면 작성 및 렌더링이 단일 페이지 앱으로 설정되며 구성 요소가 변경해야 할 수 있는 모든 .jsp 파일을 오버레이할 수 있습니다. ng-page에는 UI 프레임워크가 전혀 포함되어 있지 않으므로 개발자는 일반적으로 'template.jsp'(/libs/mobileapps/components/angular/ng-page/template.jsp%EC%97%90%EC%84%9C%20%EC%98%A4%EB%B2%84%EB%A0%88%EC%9D%B4%EB%90%A9%EB%8B%88%EB%8B%A4.?lang=ko)

AngularJS를 활용하려는 작성 가능한 페이지 구성 요소는 /libs/mobileapps/components/angular/ng-component에 동일한 방식으로 오버레이하고 사용자 정의할 수 있는 동등한 sling:resourceSuperType 구성 요소가 있습니다.

JavaScript 및 CSS Clientlibs

클라이언트 라이브러리에 대해서는 개발자가 저장소에 배치할 수 있는 몇 가지 옵션이 있습니다. 다음 패턴은 안내를 위해 제공되지만, 어려운 조건은 아닙니다.

클라이언트 측 코드가 자체적으로 유지될 수 있고 응용 프로그램의 특정 구성 요소와 관련이 없는 경우(즉, 다른 응용 프로그램에서 다시 사용할 수 있음) /etc/clientlibs/<브랜드 이름>/<lib name>에 저장하는 것이 좋습니다. 반면 clientlib이 단일 앱에만 해당되는 경우 앱 디자인 노드의 자식으로 중첩할 수 있습니다./etc/designs/phonegap/<brand name>/<app name>/clientlibs. 이 clientlib의 범주는 다른 libs에서 사용할 수 없으며 필요에 따라 다른 libs를 포함하는 데 사용해야 합니다. 이 패턴을 따르면 개발자는 클라이언트 라이브러리가 앱에 추가될 때마다 새로운 컨텐츠 동기화 구성을 추가할 필요가 없으며, 대신 앱의 디자인 클라이언트 라이브러리의 'embed' 속성을 업데이트하면 됩니다. 예를 들어 /content/phonegap/geometrixx-outdoors/en/jcr:content/pge-app/app-config/clientlibs-all의 Geometrixx clientlibs-all Content Sync 구성 노드를 살펴보십시오.

클라이언트 측 코드가 특정 구성 요소와 긴밀하게 연결되어 있는 경우 해당 코드를 /apps/의 구성 요소 위치 아래에 중첩된 클라이언트 라이브러리에 배치하고, 앱의 'design' clientlib에 이 코드를 포함시킵니다.

PhoneGap 구성

각 AEM Mobile 앱에는 PhoneGap 명령줄 인터페이스 및 PhoneGap 빌드에서 웹 컨텐츠를 실행 가능한 애플리케이션으로 변환하는 구성 파일을 호스팅하는 디렉토리가 포함되어 있습니다. 예를 들어 Geometrixx 샘플에서 이 디렉토리(/content/phonegap/geometrixx-outdoors/shell/jcr:content/pge-app/app-content?lang=ko)는 셸의 일부로 위치합니다.장치 API와 관련된 플러그인 및 앱 자체의 구성과 같이 방송 중에 업데이트할 수 없는 컨텐츠만 포함되어 있기 때문에 디자인 결정을 내렸습니다.

또한 이 디렉토리에서는 플러그인을 설치하고, 리소스 파일을 해당 플랫폼별 위치에 배치하고, 빌드의 일부로 실행해야 하는 기타 작업에 사용할 수 있는 다양한 Cordova 후크를 찾을 수 있습니다. 참고:빌드의 일부로 각 플러그인을 다운로드하는 대신 Kitchen Sink 앱의 패턴을 따르고 나머지 앱 프로젝트에 플러그인 소스 코드를 포함할 수 있습니다.

다음 단계

앱의 구조에 대한 자세한 내용은 앱 콘솔을 사용하여 앱 제작 및 편집을 참조하십시오.

이 페이지에서는