요구 사항

사전 지식

  • AEM Mobile 이해
  • 온디맨드 포털을 통한 콘텐츠 제작 및 게시 관련 지식
  • Apache Cordova에 대한 지식 (http://cordova.apache.org)

요구 제품

  • AEM Mobile

Cordova 확장 기능

Experience Manager Mobile Runtime은 사용자가 Apache Cordova 확장 기능 및 개발자 도구(Beta)를 사용하여 테스트를 위한 앱 환경을 조성할 수 있도록 합니다.

InDesign 기반 아티클의 HTML 아티클 및 웹 오버레이에서 사용할 수 있는 Cordova 확장 기능을 통해 다음과 같은 기능을 이용할 수 있습니다.

  • Core Cordova 플러그인 – 카메라, 접속, 지리적 위치, 파일 공유 등과 같은 Core Cordova 플러그인의 장점을 취할 수 있습니다.
  • 사용자 정의 Cordova 플러그인 – Cordova/Phonegap 커뮤니티에서 구할 수 있는 플러그인을 활용하거나 자신만의 고유한 플러그인을 제작할 수 있습니다. 예: 바코드 스캔 기능 및 모바일 데이터베이스
  • Cordova를 통해 활성화되는 AEM Mobile 전용 플러그인 – 로컬 애플리케이션 및 콘텐츠 메타데이터용 플러그인입니다.

 

Core Cordova 플러그인

Cordova 플러그인의 핵심 세트는 JavaScript를 사용하여 AEM Mobile 콘텐츠 보기에서 기본 디바이스 기능에 대한 액세스를 제공합니다. 플러그인은 앱을 빌드하는 동안 앱별로 활성화 또는 비활성화할 수 있습니다.

다음과 같은 Core Cordova 플러그인을 사용할 수 있습니다.

  • 카메라 – 사진을 찍고 시스템의 이미지 라이브러리에서 이미지를 선택합니다.
  • 접속 – 디바이스가 접속하는 데이터베이스에 대한 액세스를 제공합니다. Windows 앱의 경우 플러그인에 대해 유일하게 지원되는 API는 “pickContact”입니다.
  • 디바이스 정보 – 디바이스의 하드웨어 및 소프트웨어에 대해 설명합니다.
  • 디바이스 방향(가속도계) – x, y, z 축을 따라 3차원으로, 현재 디바이스 방향을 기준으로 동작의 변화를 감지하는 모션 센서에 대한 액세스를 제공합니다.
  • 디바이스 방향(나침반) – 일반적으로 디바이스의 상단에서 디바이스가 가리키는 방향 또는 진로를 감지하는 센서입니다.
  • 파일 액세스 – 디바이스에 있는 파일에 대한 읽기/쓰기 액세스를 허용합니다.
  • 파일 전송 – 파일 업로드 및 다운로드 액세스를 허용합니다.
  • 지리적 위치 – 위도 및 경도 등 디바이스의 위치에 대한 GPS 정보를 제공합니다.
  • 글로벌화 – 사용자의 로케일, 언어 및 시간대에 특화된 작업을 사용합니다.
  • 미디어(cordova-plugin-media) – 디바이스에서 오디오 파일을 녹음하고 재생하는 기능을 제공합니다.
  • 미디어 캡처 – 디바이스의 오디오, 이미지 및 비디오 캡처 기능에 대한 액세스를 제공합니다.
  • 네트워크 정보 – 디바이스의 셀룰러 및 WiFi 연결, 디바이스가 인터넷에 연결되어 있는지 여부에 대한 정보입니다.
  • 알림 대화 상자 – 경고 및 경고음 등 일부 기본 대화 상자의 UI 요소에 대한 액세스를 제공합니다.
  • 바이브레이션(iOS, Android만 해당) – 디바이스가 진동하는 방식입니다.
  • WKWebView (iOS만 해당) – HTML 파일을 Mobile Safari에서 렌더링되는 방식과 동일하게 렌더링하기 위해 WKWebView 플러그인을 활성화할 수 있습니다. 이 옵션은 iOS 9 디바이스에서 HTML 아티클 및 웹 오버레이에 대해 UIWebView 대신 WKWebView(WebKit)를 사용합니다. iOS 8 디바이스에서 실행 중인 앱은 여전히 UIWebView를 사용하여 콘텐츠를 렌더링합니다. (AEM Mobile용 iOS 앱 빌드를 참조하십시오.)

자세한 내용은 Cordova Core 플러그인을 참조하십시오.

예를 들어 Github에서 예제 다운로드를 참조하십시오.

사용자 정의 Cordova 플러그인

사용자 정의 Cordova 플러그인을 AEM Mobile 앱에 추가하는 기능을 통해 Cordova/PhoneGap 커뮤니티에서 구할 수 있는 다양한 플러그인을 활용하는 콘텐츠를 제작하거나 자신만의 고유한 사용자 정의 플러그인을 제작할 수 있습니다. 예를 들어 앱에서 모바일 바코드 스캔 기능을 활성화하고 지오펜스 기술을 이용하고 모바일 데이터베이스를 활용할 수 있습니다.

사용자 정의 Cordova 플러그인을 사용하는 앱을 빌드하는 작업 과정은 일반적으로 앱을 빌드하는 표준 방식과 차이가 있습니다. 업데이트된 AEM Mobile Developer Tool을 사용하여 어떤 Cordova 플러그인을 사용할지 지정해야 합니다. iOS 앱의 경우 개발자 도구를 사용하여 다운로드한 .ipa를 수정합니다. Android 앱의 경우 개발자 도구를 사용하여 .apk 파일을 만든 다음 Android 앱을 제작하거나 편집할 때 표시되는 새로운 맞춤형 앱 셸 탭을 통해 이를 업로드합니다.

https://cordova.apache.org/plugins/를 참조하십시오.

 

참고:

현재 Cordova 플러그인은 아티클 수준으로 제한됩니다. AEM Mobile 앱에서 플러그인을 사용하려면 아티클을 열어야 합니다. iOS 디바이스에서 아티클이 최상위 수준 컬렉션의 첫 번째 항목인 경우 앱을 실행하면 해당 아티클이 로드되며 메모리에 저장된다는 점을 참고하십시오. 사용자가 다른 콘텐츠를 검색한 후에도 해당 아티클은 계속 실행될 수 있으며 동일한 Cordova 플러그인 호출을 수행할 수 있습니다. 그러나 최상위 수준 아티클의 플러그인은 다른 아티클에 대해 참조로 사용할 수 없습니다.

 

AEM Mobile 전용 Cordova 플러그인

AEM Mobile 전용 Cordova 활성 플러그인은 아티클 콘텐츠 보기 내에서 AEM Mobile Runtime 애플리케이션과 그 콘텐츠에 관련된 특정 데이터에 대한 액세스를 제공하는 JavaScript API의 세트입니다. AEM Mobile Cordova 플러그인을 활용하려면 콘텐츠의 아티클 속성에서 “확장 기능 활성화” 옵션이 선택되어 확장 기능이 활성화되어 있어야 합니다. 이들 플러그인은 AEM Mobile 앱에서 자동으로 활성화됩니다.

AEM Mobile 전용 Cordova 활성 플러그인은 다음과 같은 API를 포함합니다.

  • 엔티티 메타데이터 액세스(콘텐츠 제목, 권한 부여)
  • 디바이스 정보(플랫폼, 버전, 식별자)
  • 푸시 알림 정보(푸시 토큰)
  • 썸네일(배경 및 소셜 공유 이미지)

자세한 설명을 보려면 AEM Mobile 전용 Cordova 활성 플러그인 사용을 참조하십시오.

Cordova 플러그인 예제

Cordova 플러그인의 예제는 다음에서 구할 수 있습니다.

https://github.com/Adobe-Marketing-Cloud/aemmobile-example-cordova-api/archive/master.zip

앱에서 확장 기능 활성화

  1. Cordova API를 참조하는 콘텐츠 보기 또는 웹 오버레이에 대한 원본 HTML 콘텐츠를 만듭니다.

    HTML 코드가 Core Cordova 플러그인 또는 AEM Mobile 전용 Cordova 활성 플러그인 참조하는 경우 다음 줄을 추가합니다.

    <script type="text/javascript" src="cordova.js"></script>

    cordova.js 파일은 앱에 자동으로 포함되며 런타임 시 불러오기만 하면 됩니다.

    Cordova 플러그인 및 AEM Mobile 전용 Cordova 활성 플러그인은 Cordova가 완전히 로드되어야 안전하게 사용할 수 있습니다. Cordova가 완전하게 로드되지 않으면 특정 Cordova API를 호출하는 스크립트에 오류가 발생할 수 있습니다.

    Cordova가 준비되면 코드 작업을 시작할 시기를 결정하는 데 사용할 수 있는 deviceready가 트리거됩니다.

    HTML 파일에 이 코드를 포함시키십시오.

    document.addEventListener("deviceready", function() {
        // Cordova is now ready,
        // start initializing the rest of the code
    }, false);

    자세한 내용은 Cordova 이벤트를 참조하십시오.

  2. 이러한 플러그인을 사용하는 각 콘텐츠의 콘텐츠 속성에서 “확장 기능 활성화”를 선택해야 합니다. (온디맨드 포털의 콘텐츠 및 레이아웃 섹션에서 콘텐츠 속성을 편집합니다.)

    On-Demand Services API를 통해 아티클에 대한 확장 기능을 활성화할 수도 있습니다. 아티클 엔티티 메타데이터를 제작하거나 업데이트할 때 isTrustedContent 매개 변수를 true(boolean)로 설정하십시오. 이 값은 기본적으로 false로 설정됩니다.

    “확장 기능 활성화”는 기본적으로 모든 아티클에 대해 비활성화되어 있습니다. 프로젝트 속성에서 이 기본값을 변경할 수 있습니다.

  3. 사용자 정의가 아닌 Core Cordova 플러그인을 사용하는 앱의 경우 Cordova 플러그인을 활성화하는 앱을 빌드하십시오. (사용자 정의 Cordova 플러그인의 경우에는 다음 섹션에 기재되어 있는 단계를 따르십시오.)

    앱을 빌드할 때 플러그인 탭을 사용하여 콘텐츠에 사용할 API를 활성화합니다.

    AEM Mobile 전용 Cordova 활성 플러그인은 플러그인 활성화가 필요하지 않습니다.

    iOS 앱용 플러그인

    참고:

    사용할 계획인 Cordova 플러그인만 선택하면 최상의 결과를 얻을 수 있습니다

  4. 앱을 테스트합니다.

사용자 정의 Cordova 플러그인을 사용하는 앱 빌드에 대한 워크플로

앱에서 사용자 정의 Cordova 플러그인을 사용하는 경우에는 AEM Mobile Developer Tool을 사용하여 어떤 Cordova 플러그인을 사용할지 지정해야 합니다. 그런 다음 개발자 도구를 사용하여 .ipa 파일을 수정(iOS)하거나 Android 앱을 빌드하는 동안 업로드할 수 있는 .apk 앱 셸을 제작(Android)해야 합니다.

이러한 단계는 앱에서 사용자 정의 Cordova 플러그인을 사용하려는 경우에만 필요합니다. 개발자 도구를 사용하여 사용자 정의, 코어 및 AEM Mobile 전용 등 앱에서 사용되는 모든 플러그인을 지정하십시오. 개발자 도구를 사용하여 앱을 수정하거나 빌드하는 경우 앱을 빌드할 때 “플러그인” 탭에서 지정한 모든 설정은 무시됩니다. 개발자 도구를 사용하여 모든 Cordova 플러그인 정보를 지정하십시오.

사용자 정의 Cordova 플러그인 비디오

사용자 정의 Cordova 플러그인 비디오

사용자 정의 Cordova 플러그인을 사용하는 앱에 대한 iOS 워크플로

  1. Cordova 플러그인을 사용하는 콘텐츠를 제작합니다. “앱에서 확장 기능 활성화”의 위 단계에 따라 Cordova 플러그인을 사용하는 각각의 앱에서 확장 기능을 허용합니다.

  2. 온디맨드 포털에서 iOS 앱을 빌드하고 .ipa 파일을 다운로드합니다. (AEM Mobile용 iOS 앱 빌드를 참조하십시오.)

  3. AEM Mobile Developer Tool을 사용하여 프로젝트를 설정하고, 콘텐츠를 테스트하고, 앱에서 어떤 Cordova 플러그인을 사용할지 지정합니다. 그런 다음 개발자 도구를 통해 다운로드한 .ipa 파일을 수정하여 지정한 Cordova 정보가 포함되도록 합니다.

    자세한 내용은 AEM Mobile Developer Tool 사용에 관한 아래 섹션을 참조하십시오.

  4. 수정한 .ipa 파일에 서명합니다.

사용자 정의 Cordova 플러그인을 사용하는 앱에 대한 Android 워크플로

  1. Cordova 플러그인을 사용하는 콘텐츠를 제작합니다. “앱에서 확장 기능 활성화”의 위 단계에 따라 Cordova 플러그인을 사용하는 각각의 앱에서 확장 기능을 허용합니다.

  2. AEM Mobile Developer Tool을 사용하여 프로젝트를 설정하고, 콘텐츠를 테스트하고, 앱에서 사용하려는 Cordova 플러그인을 지정합니다. 그런 다음 개발자 도구를 사용하여 지정한 Cordova 정보를 포함하는 앱 셸(.apk 파일)을 제작합니다.

    자세한 내용은 AEM Mobile Developer Tool 사용에 관한 아래 섹션을 참조하십시오.

  3. 온디맨드 포털에서 Android 앱을 빌드합니다. “맞춤형 앱 셸” 탭에서 개발자 도구를 사용하여 빌드한 .apk 파일을 지정합니다.

  4. 온디맨드 포털에서 .apk 파일을 다운로드하고 서명합니다.

AEM Mobile Developer Tool 사용

AEM Mobile Developer Tool은 원활한 개발자 워크플로를 지원하기 위한 명령줄 유틸리티입니다. 이 도구는 개발자의 로컬 데스크탑에 설치되며 다음과 같은 기능을 제공합니다.

  • 프로젝트 제작 – 로컬 개발에 활용할 AEM Mobile 프로젝트 폴더 구조를 생성합니다. 이 프로젝트 구조는 테스트용으로만 사용됩니다.
  • 콘텐츠 제작 – 이용 가능한 Cordova 및 Runtime API를 사용할 수 있도록 해 주는 AEM Mobile 콘텐츠 템플릿을 생성합니다.
  • Cordova 플러그인 추가 및 앱 빌드 – 앱에서 사용자 정의 Cordova 플러그인을 사용하는 경우 개발자 도구를 사용하여 해당 플러그인을 지정하고 앱 셸(Android)을 빌드하거나 지정한 Cordova 플러그인을 포함하는 .ipa 파일(iOS)을 수정해야 합니다.
  • 시뮬레이터에서 실행 – (1) 시뮬레이터 실행 (2) 시뮬레이터 빌드 설치 (3) 로컬 환경에서 로컬 콘텐츠를 표시하는 AEM Mobile Runtime 시뮬레이터 빌드를 시작합니다. 대상 시뮬레이터가 실행된 경우 1단계를 무시하고 시뮬레이터 빌드가 설치된 경우 2단계를 무시하십시오.
  • 도움말 – 명령줄 명령에 대한 도움말을 표시합니다.

AEM Mobile 명령 구조

다음 두 가지 주요 워크플로에 대해 AEM Mobile Developer Tool이 필요합니다.

  • Cordova 플러그인을 사용하는 콘텐츠 개발 및 테스트
  • 사용자 정의 Cordova 플러그인을 포함하는 앱 빌드

 

사용권 계약

참고:

아래에 나열된 소프트웨어를 설치함으로써 사용자는 Adobe.com 사용 약관을 읽었으며 이에 동의함을 인지합니다.

종속성 설치

해당 OS에 따라 아래의 필요한 종속성을 설치하시기 바랍니다.

  • Mac OS X:
    • Node JS (현재 권장 버전: v6.2.2 이상 필요)
    • iOS 개발의 경우 Xcode (v7.0 이상)
    • Android 개발의 경우 Java (OS X 버전에 따라 다름)
  • Windows:

 

AEM Mobile 명령줄 도구 설치 (Mac OS)

Windows에서 개발 작업을 진행 중인 경우에는 명령 프롬프트가 아닌 PowerShell에서 모든 명령을 실행해 주십시오.

  1. Terminal을 실행합니다.

  2. 다음을 실행하여 Node.js를 통해 AEM Mobile 명령줄 도구를 설치합니다.

    npm install -g aemm

    “사용자 권한 없음” 메시지가 표시되는 경우에는 “sudo”를 포함하는 위 스크립트를 실행해 보십시오.

    sudo npm install -g aemm

    완료하고 나면 심볼릭 링크가 생성되며, 이를 통해 Terminal의 모든 디렉터리에서 AEM Mobile 명령줄 도구(AEMM)를 실행할 수 있습니다.

개발자 도구 업데이트

AEM Mobile Developer Tool의 업데이트 버전이 출시될 때마다 npm install -g aemm(또는 sudo npm install -g aemm)을 다시 실행하십시오.

Android에 대한 환경 구성

Android 빌드를 에뮬레이션하려면 필수 Android SDK를 설치하고 Android 에뮬레이터를 실행하기 위한 환경을 구성해야 합니다.

  1. Terminal에서 다음 명령을 실행하여 필수 SDK 및 구성을 설치합니다.

    aemm platform install android
  2. Android SDK 사용권 계약에 대한 메시지가 표시될 수 있습니다. y를 입력하여 계약을 수락하거나 n을 입력하여 이를 거부합니다. 거부하는 경우에는 필수 SDK를 설치할 수 없으며 Android 에뮬레이터를 실행할 수 없습니다.

iOS에 대한 환경 구성(sudo aemm platform install ios)은 사용자 정의 Cordova 플러그인을 사용하는 앱을 빌드하는 경우에만 필요합니다.

시뮬레이터 빌드 설치

AEM Mobile 명령줄 도구는 프로젝트를 빌드할 때 설치하고 실행할 AEM Mobile Runtime 시뮬레이터 빌드를 필요로 합니다. 이 프로세스는 시뮬레이터를 사용하는 HTML 콘텐츠를 테스트하는 데 필요합니다. 사용자 정의 Cordova 플러그인을 사용하는 앱을 빌드하는 경우에는 필요하지 않습니다.

AEM Mobile Runtime 시뮬레이터 빌드를 설치하려면 다음 중 하나를 수행하십시오.

  1. Terminal에서 다음 명령을 실행하여 최신 버전의 시뮬레이터 빌드를 설치합니다.

    aemm app install <platform>

    사용 가능한 <platform> 값은 ios 또는 android입니다.

또는 시뮬레이터 빌드 버전을 지정할 수 있습니다. 이렇게 하면 사용 가능한 시뮬레이터 빌드의 목록에서 이전 버전을 설치할 수 있습니다.

  1. Terminal에서 사용 가능한 시뮬레이터 버전의 목록을 가져옵니다.

    aemm app install --list
  2. 설치 과정에서 시뮬레이터 버전을 지정합니다.

    aemm app install <platform> <simulator-version>

    예를 들어 iOS에서 시뮬레이터 버전 2016.4를 설치하려면:

    aemm app install ios 2016.4

    참고:

    시뮬레이터를 실행하려 할 때 오류 메시지가 표시되면 Xcode를 실행하고 적절한 경우 사용권 계약에 서명하십시오. Terminal에 sudo xcodebuild –license accept를 입력할 수도 있습니다.

     

프로젝트 제작

AEM Mobile 명령줄 도구는 프로젝트를 빌드하고 테스트하는 데 사용할 디렉터리 구조를 필요로 합니다. 이 프로젝트는 테스트용으로만 사용할 수 있습니다. 콘텐츠를 테스트한 후에는 온디맨드 포털에서 이를 내 프로젝트에 추가할 수 있습니다.

이 프로젝트 구조를 설정하려면 다음 작업을 수행하십시오.

  1. Terminal에서 신규 프로젝트를 관리하려는 디렉터리로 이동합니다.
  2. 디렉터리 구조를 만듭니다(“<project name>”을 내 프로젝트 이름으로 대체).
aemm project create <project-name>

이렇게 하면 호출된 “SampleArticle” 내에 <프로젝트-이름>으로 지정된 디렉터리와 샘플 콘텐츠 디렉터리가 생성됩니다.

시뮬레이터 실행

프로젝트 디렉터리가 생성되고 나면 앱 빌드를 시작할 수 있습니다. 이 프로세스는 시뮬레이터를 사용하는 HTML 콘텐츠를 테스트하는 데 필요합니다. 사용자 정의 Cordova 플러그인을 사용하는 앱을 빌드하는 경우에는 필요하지 않습니다.

시뮬레이터가 아직 열려 있지 않은 경우 이를 열려면 AEM Mobile Runtime 시뮬레이터 빌드를 설치(아직 설치되어 있지 않은 경우)하고 시뮬레이터를 실행한 후 다음 작업을 수행하십시오.

  1. Terminal에서 다음 명령을 사용하여 생성된 프로젝트 디렉터리로 이동합니다.

    cd <drag and drop the project-name directory>
  2. (선택 사항) 에뮬레이터/시뮬레이터가 실행될 기본 방향을 설정합니다. 가로 모드 또는 세로 모드 중 선택할 수 있습니다.

    aemm config --set screenOrientation <<orientation>>

    예를 들어 가로 모드로 방향을 지정하려면:

    aemm config --set screenOrientation landscape

    이 옵션을 사용하면 해당되는 경우 기존의 기본 방향 모드도 대체됩니다. 현재의 기본 방향 모드를 확인하려면:

    aemm config --get screenOrientation

    현재의 기본 방향 모드를 제거하려면:

    aemm config --unset screenOrientation
  3. 시뮬레이터 빌드를 열고, 설치하고, 실행합니다.

    aemm run <platform>

    사용 가능한 <platform> 값은 ios 또는 android입니다.

  4. 실행 명령은 터미널에서 지속적으로 수신됩니다. 이를 종료하려면 동일한 터미널 윈도우에 Ctrl + C 키 조합을 입력하십시오.

시뮬레이터 앱을 실행하고 나면 이전에 생성된 “SampleArticle”을 확인할 수 있습니다. “SampleArticle” 디렉터리 내의 파일을 변경하면 자동으로 시뮬레이터 앱이 새로 고쳐지고 업데이트된 콘텐츠가 표시됩니다.

시뮬레이터를 실행할 때 Command+Shift+H를 눌러 홈 화면으로 돌아옵니다.

디바이스 이름을 지정함으로써 어떤 시뮬레이터 디바이스를 사용할지 지정할 수 있습니다. 이는 다른 시뮬레이터 디바이스에서 테스트할 때 특히 편리합니다.

  1. 현재 시스템에 설치되어 있는 사용 가능한 시뮬레이터의 목록을 가져옵니다.

    aemm run <platform> --list
  2. <uuid><device-name> 목록에서 디바이스를 지정합니다.

    aemm run <platform> --target "<device-name>"

    예를 들어 iOS 9.2의 iPhone 6s에서 시뮬레이터를 실행하려면:

    aemm run ios --target "iPhone-6s, 9.2"

콘텐츠 제작

프로젝트가 기본적인 HTML 콘텐츠 템플릿을 생성하지만, 다음 작업을 수행함으로써 목록에 더 많은 템플릿을 추가할 수 있습니다.

  1. Terminal에서 생성된 프로젝트 디렉터리로 이동합니다.

     cd <drag and drop the project-name directory>
  2. 추가 HTML 콘텐츠를 제작합니다.

    aemm article create <article-name>

    이렇게 하면 프로젝트 디렉터리 내에 지정된 <article-name>을 갖는 다른 HTML 콘텐츠 디렉터리가 생성됩니다.

    HTML 콘텐츠 폴더 구조는 단지 index.html을 포함하는 디렉터리이며 모든 필수 리소스(CSS, JS, 이미지 등)는 index.html에 매핑됩니다. 따라서, <project-name directory>/www/<custom-folder> 내에 폴더를 만들고 위 스크립트를 실행하는 대신 index.html을 그 안에 포함시키기만 해도 됩니다. 이는 다른 곳에서 이미 선별된 HTML 콘텐츠를 보유하고 있고 Cordova 확장 기능을 테스트하려는 경우 유용합니다. HTML 콘텐츠를 <project-name directory>/www/ 폴더로 드래그 앤 드롭하면 시뮬레이터가 이를 인식하게 됩니다.

Cordova 플러그인을 프로젝트에 추가 (사용자 정의 Cordova 플러그인의 경우)

이러한 명령은 앱에서 사용자 정의 Cordova 플러그인을 사용하려는 경우에만 필요합니다. 사용자 정의 Cordova 플러그인을 사용하는 경우에는 AEM Mobile Developer Tool을 사용하여 앱에서 사용자 정의, 코어 및 AEM-Mobile 전용 중 어떤 Cordova 플러그인을 사용할지 지정해야 합니다.

  1. Node JS v6.2.2 이상 버전이 설치되어 있어야 합니다.

    이전에 LTE 버전을 설치한 경우에는 현재 버전을 다운로드하고 설치하는 것이 좋습니다.

  2. Terminal에서 생성된 프로젝트 디렉터리로 이동합니다.

    cd <drag and drop the project-name directory>
  3. 앱에 포함시키려는 Cordova 플러그인(코어 및 사용자 정의 모두)을 추가하려면:

    aemm plugin add [plugin_0] [plugin_1] [...]

    AEM Mobile 앱에서 사용되는 표준 Cordova 플러그인을 활성화하려면:

    aemm plugin add aemm-plugin-application aemm-plugin-user aemm-plugin-context aemm-plugin-device aemm-plugin-inappbrowser aemm-plugin-fullscreen-video aemm-plugin-navto aemm-plugin-html-contract

    UIWebView에서 WKWebView로 기본값을 변경하려면(플러그인 탭의 “WKWebView” 선택과 동일):

    aemm plugin add https://github.com/adobe-marketing-cloud-mobile/cordova-plugin-wkwebview-engine.git#2.0.0

    지금은 2.0.0 버전을 사용하지만 향후 업데이트될 예정입니다. https://github.com/adobe-marketing-cloud-mobile/cordova-plugin-wkwebview-engine/releases에서 최신 버전을 찾을 수 있습니다.

    AEM Mobile 앱에서 사용되는 모든 Core Cordova 플러그인을 활성화하려면(사용하지 않으려는 플러그인 제거):

    aemm plugin add cordova-plugin-camera cordova-plugin-compat cordova-plugin-contacts cordova-plugin-device cordova-plugin-device-motion cordova-plugin-device-orientation cordova-plugin-dialogs cordova-plugin-file cordova-plugin-file-transfer cordova-plugin-geolocation cordova-plugin-globalization cordova-plugin-media cordova-plugin-media-capture cordova-plugin-network-information cordova-plugin-vibration

    프로젝트에 추가된 플러그인의 목록을 확인하려면 다음 명령을 사용합니다.

    aemm plugin list

    이전에 추가된 플러그인을 제거하려면 다음 명령을 사용합니다.

    aemm plugin remove [plugin]

    추가 정보를 보려면 도움말 명령을 사용합니다.

    aemm plugin help

맞춤형 앱 빌드 (사용자 정의 Cordova 플러그인의 경우)

이러한 명령은 앱에서 사용자 정의 Cordova 플러그인을 사용하려는 경우에만 필요합니다.  

iOS 앱의 경우 온디맨드 포털의 Apps 섹션에서 다운로드한 .ipa 파일을 수정합니다.

Android 앱의 경우 온디맨드 포털에서 앱을 빌드할 때 업로드한 앱 셸 .apk 파일을 빌드합니다.

앱을 빌드하는 동안 “플러그인” 섹션에 추가한 모든 설정은 무시되며 AEM Mobile Developer Tool을 사용하여 지정한 설정으로 대체된다는 점을 참고하십시오.

참고:

“aemm” 명령은 “cordova” 명령에서 빌드되었으며 cordova-lib에 대한 많은 명령을 대표합니다. cordova 명령을 실행하려 할 때 오류가 발생할 수 있습니다. 대부분의 경우, 우선 aemm 으로 cordova를 대체한 다음 권장되는 조치를 취하십시오.

  1. (iOS) iOS 환경을 구성하여 Xcode가 서명되지 않은 프레임워크를 빌드할 수 있도록 허용합니다.

    sudo aemm platform install ios
    aemm platform add ios
  2. 생성된 프로젝트 디렉터리로 이동하여 이전 섹션에 설명된 단계에 따라 앱에 포함시키려는 Cordova 플러그인을 추가합니다.

  3. Cordova 구조를 빌드(iOS)하거나 앱 셸을 빌드(Android)합니다.

    aemm build [platform]

    iOS 예:

    aemm build ios --device --release

    --device를 추가하면 시뮬레이터 대신 iOS 디바이스용 앱이 빌드됩니다.

    --release를 추가하면 기본 디버그 버전 대신 릴리스 버전이 빌드됩니다.

    Android 예:

    aemm build android --release

    참고:

    앱을 빌드할 수 없는 경우에는 NodeJS를 제거하고 현재 버전의 NodeJS를 설치해 보십시오(자세한 내용은 NodeJS 사이트 참조). 아울러 sudo npm uninstall -g aemm을 실행한 다음 sudo npm install -g aemm을 실행해 보십시오.

    코드 서명 오류 메시지 문제 해결

    업데이트된 XCode를 보유하고 있는 경우 다음과 같은 오류 메시지가 표시될 수 있습니다. “Error: CODE_SIGNING_REQUIRED must be set to NO in order to build for device. You can resolve this by running 'aemm platform install ios'.”

    이 문제에 대한 해결 방법은 Terminal에서 다음 명령을 실행하는 것입니다.

     

    sudo /usr/libexec/PlistBuddy -c "Set DefaultProperties:CODE_SIGNING_REQUIRED NO" "$(xcode-select -p)/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS.sdk/SDKSettings.plist"

    Xcode가 업데이트될 때마다 이 해결 방법이 요구됩니다.

  4. (iOS) .ipa 파일을 패키징합니다.

    aemm package ios --device <drag and drop .ipa file>

    예:

    aemm package ios --device /Users/jdoe/Downloads/coffee_2062.ipa
  5. 다음 작업 중 하나를 수행합니다.

    • (iOS) 수정한 .ipa 파일에 서명합니다.
    • (Android) 온디맨드 포털에서 빌드한 .apk 앱 셸을 업로드합니다. .apk 파일을 빌드하고 다운로드하고 서명합니다.

    이러한 워크플로에 대한 자세한 내용은 이 문서의 이전 섹션에 설명되어 있는 “사용자 정의 Cordova 플러그인을 사용하는 앱 빌드”를 참조하십시오.

시뮬레이터에서 사용자 정의 Cordova 플러그인 테스트

다음 명령을 실행합니다.

aemm build ios
aemm package ios
aemm run ios

--device 매개 변수를 생략하여 시뮬레이터에 명령을 적용합니다. aemm package ios 실행은 사용자 정의 플러그인을 시뮬레이터 빌드에 패키징하기 위해 필요합니다. 원래의 시뮬레이터 빌드로 복원하려면 aemm app install ios 명령을 다시 실행합니다.

원격 디버깅

최신 브라우저에서와 같이 시뮬레이터에서 HTML 콘텐츠를 원격으로 검사할 수 있습니다. 이 기능을 통해 DOM 요소를 확인하고 조종하거나, 콘솔에서 발생한 모든 오류를 점검하거나, JavaScript/jQuery 명령을 직접 입력하는 등 다양한 작업을 할 수 있습니다. 자세한 내용은 다음 항목을 참조하시기 바랍니다.

콘텐츠 패키징

프로젝트 디렉터리 내의 HTML 콘텐츠는 AEM Mobile 온디맨드 서비스 포털용 콘텐츠 파일을 생성하기 위한 구조도 필요로 합니다. 프로젝트 디렉터리 내의 모든 HTML 콘텐츠를 선택하고 이들을 AEM Mobile Packager로 드래그 앤 드롭할 수 있습니다.

보다 자세한 내용은 AEM Mobile용 HTML 아티클 제작을 참조하십시오.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책