앱 콘솔을 사용하여 앱 만들기 및 편집 creating-and-editing-apps-using-the-apps-console

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

주제:

작성 대상:

관리자

NOTE

Adobe 단일 페이지 애플리케이션 프레임워크 기반 클라이언트측 렌더링(예: React)이 필요한 프로젝트에는 SPA Editor를 사용하는 것이 좋습니다. 자세히 알아보기.

AEM 모바일 애플리케이션 개발 프로세스는 서로 다른 전문 지식을 가진 사용자가 모바일 애플리케이션 개발에 기여한다는 것을 인식합니다. 다음 프로세스 맵은 콘텐츠 작성자 및 애플리케이션 개발자가 작업을 수행하는 일반적인 순서를 보여 줍니다.

chlimage_1-10

마케터 작업을 수행하는 방법에 대한 정보가 이 페이지에 표시됩니다. 개발자 작업에 대한 자세한 내용은 PhoneGap 애플리케이션 구축 을 참조하십시오.

모바일 애플리케이션의 구조 the-structure-of-mobile-applications

AEM Mobile은 모바일 애플리케이션 생성을 위한 Phonegap 앱 블루프린트를 제공합니다. 블루프린트는 사용자가 만드는 애플리케이션의 구조를 정의합니다. 애플리케이션은 다음 항목으로 구성됩니다.

루트 페이지입니다.
애플리케이션의 언어 변형.
언어 변형의 홈 페이지입니다.

Phonegap 앱의 루트 the-root-of-a-phonegap-app

AEM에서 만드는 모바일 애플리케이션의 루트 페이지가 앱 콘솔에 표시됩니다.

루트 페이지는 응용 프로그램을 만들 때 지정된 응용 프로그램의 대상 경로 속성 아래에 저장됩니다(기본 경로는 /content/phonegap/apps임). 페이지 이름은 응용 프로그램의 Name 속성입니다. 예를 들어 이름이 myphonegapapp인 사이트의 루트 페이지의 기본 URL은 http://localhost:4502/content/phonegap/apps/myphonegapapp.html입니다.

chlimage_1-146

PhoneGap 앱의 언어 변형 the-language-variation-of-a-phonegap-app

루트 페이지의 첫 번째 하위 페이지는 애플리케이션의 언어 변형입니다. 각 페이지의 이름은 응용 프로그램이 만들어지는 언어입니다. 예를 들어, English 는 애플리케이션의 영어 변형 이름입니다.

참고: 기본 PhoneGap 블루프린트는 영어 응용 프로그램만 만듭니다. 개발자는 더 많은 언어 변형을 만들 수 있도록 블루프린트를 수정할 수 있습니다.

chlimage_1-147

언어 페이지는 두 가지 용도로 사용됩니다.

페이지 콘텐츠는 애플리케이션의 언어 변형에 대한 스패시 페이지입니다.
페이지 속성은 콘텐츠 업데이트 요청에 사용할 URL, 클라우드 빌드 및 Adobe Analytics 서비스 통합 연결에 대한 정보 등 애플리케이션의 여러 디자인 측면을 제어합니다.

chlimage_1-148

홈 페이지 the-home-page

응용 프로그램을 열면 홈 페이지 또는 응용 프로그램 언어 변형의 index.html 페이지가 나타납니다. 홈 페이지는 사용자에게 애플리케이션의 다양한 페이지에 대한 링크 메뉴를 제공합니다. 단락 시스템을 사용하면 콘텐츠를 만들기 위한 페이지에 구성 요소를 추가할 수 있습니다.

모바일 애플리케이션 만들기 creating-a-mobile-application

모바일 애플리케이션은 페이지 구조 및 속성을 정의하는 블루프린트를 기반으로 합니다. 다음 애플리케이션 속성을 구성할 수 있습니다.

제목: 응용 프로그램 제목입니다.
대상 경로: 응용 프로그램이 저장되어 있는 저장소의 위치입니다. 앱 이름을 기반으로 경로를 만들려면 기본값을 둡니다.
이름: 기본값은 공백 문자가 제거된 Title 속성의 값입니다. 이 이름은 CQ 내에서 응용 프로그램을 참조하는 데 사용됩니다(예: 응용 프로그램을 나타내는 저장소 노드).
설명: 응용 프로그램에 대한 설명입니다.
서버 URL: OTA(Over-the-Air) 콘텐츠를 응용 프로그램에 업데이트하는 URL입니다. 기본값은 응용 프로그램을 만드는 데 사용되는 인스턴스의 게시 서버 URL입니다(외부화 서비스에서 가져옴). 참고: 이는 인증이 필요한 작성자가 아닌 게시 서버 인스턴스여야 합니다.

애플리케이션 썸네일로 사용할 이미지 파일을 제공하고, 사용할 PhoneGap Build 구성을 선택하고, 사용할 Mobile App Analytics 구성을 선택할 수도 있습니다. 이 이미지는 Experience Manager의 모바일 앱 콘솔 내에서 모바일 애플리케이션을 나타내는 축소판으로만 사용됩니다.

Adobe 클라우드 서비스를 빌드하고 Mobile Services SDK 플러그인을 앱에 통합하기 위한 추가(및 선택 사항) 탭이 있습니다.

빌드: 구성 관리 를 클릭하고 여기에서 build.phonegap.com 빌드 서비스를 설정합니다. 그런 다음 드롭다운에서 새로 만든 PhoneGap Build 클라우드 서비스를 선택할 수 있습니다.
Analytics: 구성 관리를 클릭하고 Mobile Services SDK Adobe 클라우드 서비스를 설정합니다. 그런 다음 드롭다운에서 모바일 앱에 통합할 새로 만든 모바일 서비스를 선택할 수 있습니다.

NOTE

개발자는 AEM PhoneGap Starter Kit를 사용하여 앱을 만들고 콘솔에 추가할 수 있습니다.

다음 절차에서는 Touch UI를 사용하여 모바일 애플리케이션을 만듭니다.

레일에서 앱 을 클릭합니다.
만들기 아이콘을 클릭합니다.
(선택 사항) 고급 탭에서 응용 프로그램에 대한 설명을 입력하고 필요한 경우 서버 URL을 변경합니다.
(선택 사항) PhoneGap Build을 사용하여 응용 프로그램을 컴파일하는 경우 빌드 탭에서 사용할 구성을 선택합니다.

PhoneGap Build 구성을 만들려면 구성 관리를 클릭합니다.
(선택 사항) Analytics를 사용하여 SiteCatalyst 활동을 추적하는 경우, Analytics 탭에서 사용할 구성을 선택합니다.

모바일 앱 구성을 만들려면 구성 관리를 클릭합니다.
(선택 사항) 응용 프로그램 아이콘을 제공하려면 [찾아보기] 단추를 클릭하고 파일 시스템에서 이미지 파일을 선택한 다음 [열기]를 클릭합니다.
만들기 를 클릭합니다.

모바일 애플리케이션 속성 변경 changing-the-properties-of-a-mobile-application

모바일 애플리케이션을 만든 후 속성을 변경할 수 있습니다.

제목, 설명 및 아이콘 변경 change-the-title-description-and-icon

레일에서 앱 을 클릭합니다.
구성할 애플리케이션을 선택하고 페이지 속성 보기 아이콘을 클릭합니다.
등록 정보 값을 변경하려면 편집 아이콘을 클릭합니다.
기본 및 고급 속성을 구성한 다음 완료 아이콘을 클릭합니다.

응용 프로그램의 언어 변형 구성 configure-a-language-variation-of-the-application

레일에서 앱 을 클릭합니다.
을 클릭하여 앱 Admin Console 내에서 편집할 모바일 애플리케이션을 자세히 살펴봅니다. 구성할 응용 프로그램의 언어 버전을 선택하고 응용 프로그램 속성 보기 아이콘을 클릭합니다.
등록 정보 값을 변경하려면 편집 아이콘을 클릭합니다.
기본, 고급, 빌드 및 Analytics 탭에서 속성을 구성한 다음 완료 아이콘을 클릭합니다.

모바일 애플리케이션 콘텐츠 작성 authoring-the-content-of-a-mobile-application

모바일 애플리케이션을 만든 후 애플리케이션 UI로 사용되는 콘텐츠를 추가합니다.

레일에서 앱 을 클릭합니다.
응용 프로그램을 클릭한 다음 영어를 클릭합니다.
홈 페이지를 편집하거나 필요에 따라 하위 페이지를 추가합니다.

모바일 애플리케이션으로 컨텐츠 이동 moving-content-to-mobile-applications

AEM 게시 인스턴스의 컨텐츠 동기화 캐시는 모바일 애플리케이션용 컨텐츠의 저장소로 사용됩니다.

콘텐츠 동기화 캐시의 콘텐츠는 개발자가 애플리케이션을 컴파일할 때 애플리케이션에 포함됩니다.
캐시의 콘텐츠는 애플리케이션 콘텐츠를 업데이트하기 위해 설치된 모바일 애플리케이션에서 사용할 수 있습니다.

모바일 애플리케이션에는 업데이트된 애플리케이션 콘텐츠를 다운로드하고 설치하는 업데이트 명령이 포함됩니다. 애플리케이션 인스턴스가 업데이트 요청을 보내면 Content Sync는 애플리케이션이 마지막으로 업데이트되거나 설치된 이후 변경된 콘텐츠를 확인하고 새 콘텐츠를 제공합니다.

chlimage_1-149

업데이트된 콘텐츠를 애플리케이션에서 사용할 수 있도록 하려면 콘텐츠 동기화 캐시를 업데이트합니다. 캐시를 처음 업데이트하면 게시된 모든 콘텐츠가 추가됩니다. 후속 업데이트에서는 이전 업데이트 이후 변경된 게시된 콘텐츠만 추가합니다.

또한 콘텐츠 동기화는 업데이트가 발생하면 추적합니다. 이 정보를 사용하여 Content Sync는 모바일 애플리케이션에 전송할 캐시 업데이트를 결정할 수 있습니다.

캐시를 업데이트할 인스턴스에서 다음 절차를 수행합니다. 예를 들어 응용 프로그램에서 게시 인스턴스에서 업데이트를 요청하는 경우 게시 인스턴스에서 절차를 수행합니다.

레일에서 앱 을 클릭한 다음 애플리케이션을 클릭합니다.
시작 페이지를 선택한 다음 캐시 업데이트 아이콘을 클릭합니다.

앱 템플릿 사용 using-app-templates

이 기능은 앱 6.1 기능 팩 2에서 사용할 수 있으며, AEM 내에서 새 앱을 만들 때 기존 앱 템플릿을 쉽게 사용할 수 있는 방법을 제공합니다.

앱 템플릿이란 무엇입니까? 앱의 기준선이나 기반을 나타내는 페이지 템플릿과 구성 요소의 컬렉션으로 생각하십시오.
다른 앱의 템플릿을 기반으로 앱을 만들 때 앱이 만들어진 원본 앱을 나타내는 시작점이 있는 앱을 받게 됩니다.

이 기능을 사용하려면 기존 모바일 앱 템플릿(또는 앱 템플릿이 설치된 앱)이 있어야 합니다.

최신 AEM Apps 6.1 샘플 패키지에는 앱 템플릿과 함께 업데이트된 버전의 Geometrixx 앱이 포함되어 있습니다. 또는 템플릿을 제공하는 StarterKit를 설치할 수도 있습니다.

앱 템플릿을 기반으로 앱을 만드는 절차:

최신 AEM Apps 6.1 기능 팩 및 참조 샘플 패키지가 설치되어 있는지 확인합니다
왼쪽 레일에서 앱 을 클릭합니다.

chlimage_1-1

맨 위에 있는 + 만들기 단추를 클릭하고 앱 만들기를 선택합니다.
앱 템플릿 목록이 표시되면 다음 중 하나를 선택합니다.

chlimage_1-2

다음 을 클릭합니다.
앱 ID와 제목을 입력합니다. 그러나 이름과 설명도 포함할 수 있습니다.
1. 또한 AEM 에셋을 탐색하여 PNG(지원되는 PhoneGap 아이콘 형식)를 아이콘으로 제공할 수 있습니다.
2. 앱이 앱 관리 타일에서 만들어진 후 이러한 모든 필드를 편집할 수 있습니다. 앱 ID를 제외하고 앱 ID가 설정되면 이를 변경할 수 없습니다.

chlimage_1-150

만들기 버튼을 클릭하면 완료(앱 카탈로그 보기로 돌아가기) 또는 앱 관리(앱 대시보드 열기)의 두 가지 옵션이 표시됩니다.
앱이 만들어지면 앱 카탈로그에 새 앱이 표시됩니다.

chlimage_1-3

앱을 클릭하면 기존 앱의 템플릿을 기반으로 새 앱이 정상적으로 생성되었습니다.

NOTE

AEM에서 Geometrixx Outdoors 참조 앱 패키지를 제거하고 해당 템플릿을 기반으로 앱을 만든 경우 해당 앱은 더 이상 작동하지 않습니다. Geometrixx Outdoors 앱을 제거할 수 있지만 다른 모바일 애플리케이션에서 사용하는 경우 앱 템플릿이 유지되어야 합니다.

샘플 Geometrixx Outdoors 앱 살펴보기 exploring-the-sample-geometrixx-outdoors-app

Geometrixx Outdoors 앱은 기본 PhoneGap 애플리케이션 블루프린트 및 샘플 모바일 구성 요소의 기능을 보여 주는 샘플 PhoneGap 애플리케이션입니다.

애플리케이션을 열려면 레일에서 모바일 애플리케이션 을 클릭한 다음 Geometrixx Outdoors 앱 을 선택합니다.

일반 페이지 기능 - Geometrixx 모바일 앱 common-page-features-geometrixx-mobile-app

모바일 앱의 각 페이지에는 다음 기능이 포함되어 있습니다.

상위 페이지로 돌아가기 위한 뒤로 단추. [뒤로] 단추가 홈 페이지에 표시되지 않습니다.
명령 및 링크 메뉴를 제공하는 소모성 레일:
- 위치 페이지를 엽니다.
- 장바구니를 엽니다.
- 로그인합니다.
- 애플리케이션을 업데이트합니다.
구성 요소를 추가하고 콘텐츠를 만들기 위한 단락 시스템입니다.

홈 페이지 - Geometrixx 모바일 앱 the-home-page-geometrixx-mobile-app

홈 페이지의 콘텐츠는 다음 탐색 도구로 구성됩니다.

톱니바퀴, 리뷰, 뉴스 및 미국 정보 하위 페이지에 대한 링크를 제공하는 메뉴 목록 구성 요소입니다.
하위 페이지를 보여 주는 밀기 슬라이드 구성 요소.

톱니바퀴 페이지 - Geometrixx 모바일 앱 the-gear-page-geometrixx-mobile-app

톱니바퀴 페이지는 사용자에게 제품 페이지에 대한 액세스 권한을 제공합니다. 메뉴 목록 구성 요소는 톱니바퀴 페이지의 하위 페이지에 대한 액세스를 제공합니다. 하위 페이지는 웹 사이트에서 제공하는 제품 범주입니다.

시즌
의류
성별
활동

각 카테고리 페이지는 톱니바퀴 페이지와 동일한 콘텐츠 구조를 사용합니다. 캐러셀은 제품의 하위 카테고리인 하위 페이지에 대한 액세스를 제공합니다. 하위 범주 페이지에는 제품 페이지에 대한 링크를 제공하는 제품 목록이 포함되어 있습니다.

제품 페이지 - Geometrixx 모바일 앱 the-products-page-geometrixx-mobile-app

제품 페이지와 하위 페이지의 계층은 제품 페이지에 대한 분류 시스템을 구현합니다. 계층의 각 분기에서 가장 낮은 페이지는 ng 제품 구성 요소를 포함하는 제품 페이지입니다.

애플리케이션 사용자는 제품 페이지를 사용할 수 없습니다. 톱니바퀴 페이지에서는 각 제품 페이지에 액세스할 수 있습니다.

리뷰 페이지 - Geometrixx 모바일 앱 the-reviews-page-geometrixx-mobile-app

뒤로 단추를 포함합니다. 단락 시스템에서 구성 요소를 추가할 수 있습니다.

애플리케이션을 사용하는 경우 영어 페이지의 캐러셀에서 검토 페이지를 사용할 수 있습니다.

뉴스 페이지 - Geometrixx 모바일 앱 the-news-page-geometrixx-mobile-app

뒤로 단추를 포함합니다. 단락 시스템에서 구성 요소를 추가할 수 있습니다.

애플리케이션을 사용하는 경우 영어 페이지의 캐러셀에서 뉴스 페이지를 사용할 수 있습니다.

미국 정보 페이지 - Geometrixx 모바일 앱 the-about-us-page-geometrixx-mobile-app

정보 페이지에는 몇 가지 두 개의 열 행 구성 요소가 포함되어 있습니다. 각 열에는 이미지 또는 텍스트 구성 요소가 포함됩니다. 구성 요소는 편집할 수 있으며 단락 시스템에서 구성 요소를 추가할 수 있습니다.

응용 프로그램을 사용하는 경우 영어 페이지의 캐러셀에서 미국 정보 페이지를 사용할 수 있습니다.

위치 페이지 - Geometrixx 모바일 앱 the-locations-page-geometrixx-mobile-app

위치 페이지에는 위치 구성 요소가 포함되어 있습니다.

애플리케이션을 사용하는 경우 영어 페이지의 메뉴 목록에서 위치 페이지를 사용할 수 있습니다.

샘플 모바일 구성 요소 sample-mobile-components

모바일 애플리케이션의 페이지를 작성할 때 Sidekick에서 여러 구성 요소를 즉시 사용할 수 있습니다. 구성 요소는 PhoneGap 구성 요소 그룹에 속합니다.

회전판 밀기 swipe-carousel

슬라이드 밀기 구성 요소는 사이트 페이지를 표시하고 탐색하는 도구입니다. 구성 요소에는 페이지 링크 목록 위에 있는 페이지에 대한 이미지를 순환하는 회전 메뉴가 포함되어 있습니다. 구성 요소를 편집하여 노출할 페이지와 캐러셀의 동작을 지정합니다.

이미지가 특정 방식으로 이미지와 연결된 페이지의 회전판에 나타납니다. 페이지가 이미지와 연결되어 있지 않으면 링크 목록만 표시됩니다.

chlimage_1-151

회전 메뉴 속성 탭

캐러셀의 비헤이비어를 구성합니다.

재생 속도: 다음 이미지를 표시하기 전에 각 이미지가 표시되는 시간(밀리초)
전환 시간: 이미지 전환에 대한 애니메이션의 기간(밀리초)입니다.
컨트롤 스타일: 이미지 간 이동을 위해 제공되는 컨트롤 유형입니다.

목록 속성 탭

페이지 목록이 생성되는 방법을 지정합니다.

목록 작성 방법: 슬라이드에 포함할 페이지를 지정하는 데 사용할 방법입니다. 페이지 목록 작성 을 참조하십시오.
정렬 기준: 페이지 목록을 정렬하는 데 사용할 페이지 속성을 선택합니다. 예를 들어, 제목으로 페이지를 알파벳순으로 정렬하려면 jcr:title 을 선택합니다.
제한: 포함할 최대 페이지 수. 이 속성은 페이지 목록을 작성하는 검색 기반 메서드에 적합합니다.