Ionic 애플리케이션에 MobileFirst Foundation SDK 추가

개요

이 학습서에서는 Ionic GUI를 사용하여 신규 또는 기존 Ionic 애플리케이션에 MobileFirst SDK를 추가하는 방법에 대해 학습합니다. 또한 애플리케이션을 인식하도록 MobileFirst Server를 구성하는 방법 및 프로젝트에서 변경된 MobileFirst 구성 파일에 대한 정보를 찾는 방법에 대해서도 학습합니다.

MobileFirst Ionic SDK는 Cordova 플러그인과 함께 Typescript Wrapper 세트로 제공되며 NPM에 등록됩니다.

사용 가능한 플러그인은 다음과 같습니다.

• cordova-plugin-mfp - 핵심 SDK 플러그인
• cordova-plugin-mfp-push - 푸시 알림 지원 제공
• cordova-plugin-mfp-jsonstore - JSONStore 지원 제공

지원 레벨

MobileFirst 플러그인에서 지원되는 Ionic Cordova 플랫폼 버전은 다음과 같습니다.

• cordova-ios: >= 4.1.1 및 < 5.0
• cordova-android: >= 6.1.2 및 < 7.0
• cordova-windows: >= 4.3.2 및 < 6.0

다음으로 이동:

• Ionic SDK 컴포넌트
• MobileFirst Ionic SDK 추가
• MobileFirst Ionic SDK 업데이트
• 생성되는 MobileFirst Ionic SDK 아티팩트
• 다음 학습서

Ionic SDK 컴포넌트

cordova-plugin-mfp

cordova-plugin-mfp 플러그인은 Cordova의 핵심 MobileFirst 플러그인이며 필수입니다. 아직 설치되지 않은 경우 다른 MobileFirst 플러그인을 설치하면 cordova-plugin-mfp 플러그인도 자동으로 설치됩니다.

다음 Cordova 플러그인이 cordova-plugin-mfp의 종속 항목으로 설치됩니다.

• cordova-plugin-device
• cordova-plugin-dialogs
• cordova-plugin-globalization
• cordova-plugin-okhttp

cordova-plugin-mfp-jsonstore

cordova-plugin-mfp-jsonstore 플러그인은 앱에서 JSONstore를 사용할 수 있게 합니다. JSONstore에 대한 자세한 정보는 JSONStore 학습서를 참조하십시오.

cordova-plugin-mfp-push

cordova-plugin-mfp-push 플러그인은 Android 애플리케이션의 MobileFirst Server에서 푸시 알림을 사용하는 데 필요한 권한을 제공합니다. 푸시 알림을 사용하려면 추가 설정이 필요합니다. 푸시 알림에 대한 자세한 정보는 푸시 알림 학습서를 참조하십시오.

cordova-plugin-mfp-fips

cordova-plugin-mfp-fips 플러그인은 Android 플랫폼에 대한 FIPS 140-2 지원을 제공합니다. 자세한 정보는 FIPS 140-2 지원을 참조하십시오.

cordova-plugin-mfp-encrypt-utils

cordova-plugin-mfp-encrypt-utils 플러그인은 iOS 플랫폼에 Cordova 애플리케이션의 암호화에 필요한 iOS OpenSSL을 제공합니다. 자세한 정보는 Cordova iOS에 OpenSSL 사용을 참조하십시오.

전제조건:

• 개발자 워크스테이션에 Ionic CLI 및 MobileFirst CLI가 설치되어 있습니다.
• MobileFirst Server의 로컬 또는 원격 인스턴스가 실행 중입니다.
• MobileFirst 개발 환경 설정 및 Cordova 개발 환경 설정 학습서를 읽으십시오.
• cordova-windows의 경우 시스템에 설치된 Visual Studio 및 .NET 버전과 호환되는 C++ 버전을 설치해야 합니다.
• Visual Studio Tools for Universal Windows Apps의 경우 작성된 cordova-windows 애플리케이션에 필요한 지원 라이브러리가 모두 있는지 확인하십시오.

Mobile Foundation Ionic SDK 추가

아래 지시사항에 따라 신규 또는 기존 Ionic 프로젝트에 Mobile Foundation Ionic SDK를 추가하고 MobileFirst Server에 등록하십시오.

시작하기 전에 MobileFirst Server가 실행 중인지 확인하십시오.
로컬로 설치된 서버를 사용하는 경우, 명령행 창에서 서버의 폴더로 이동하고 ./run.sh 명령을 실행하십시오.

SDK 추가

MobileFirst Ionic 애플리케이션 템플리트를 사용하여 프로젝트를 작성할 것을 고려하십시오. 해당 템플리트는 필수 MobileFirst 특정 플러그인 항목을 Ionic 프로젝트의 config.xml 파일에 추가하고 MobileFirst 애플리케이션 개발에 대해 조정되었으며 바로 사용 가능한 MobileFirst 특정 index.js 파일을 제공합니다.

새 애플리케이션

1. ionic start projectName starter-template 명령을 사용하여 Ionic 프로젝트를 작성하십시오.
   예:

   ionic start Hello blank
   

   • “Hello”는 폴더 이름이자, 애플리케이션 이름입니다.
   • “blank”는 스타터 템플리트의 이름입니다.

   템플리트된 index.js를 통해 추가 MobileFirst 기능(예: 다국어 애플리케이션 변환 및 초기화 옵션)을 사용할 수 있습니다(자세한 정보는 사용자 문서 참조).

2. cd hello 명령을 사용하여 Ionic 프로젝트의 루트로 디렉토리를 변경하십시오.

3. Ionic CLI 명령 ionic cordova plugin add cordova-plugin-name을 사용하여 MobileFirst 플러그인을 추가하십시오. 예:

   ionic cordova plugin add cordova-plugin-mfp
   

   위 명령은 Ionic 프로젝트에 MobileFirst Core SDK 플러그인을 추가합니다.

4. Ionic CLI 명령 ionic cordova platform add ios|android|windows|browser를 사용하여 Cordova 프로젝트에 하나 이상의 지원되는 플랫폼을 추가하십시오. 예:

   cordova platform add ios
   

5. ionic cordova prepare command를 실행하여 애플리케이션 자원을 준비하십시오.

   ionic cordova prepare
   

기존 애플리케이션

기존 Ionic 프로젝트의 루트로 이동하고 MobileFirst 핵심 Ionic Cordova 플러그인을 추가하십시오.

   ionic cordova plugin add cordova-plugin-mfp

MobileFirst API 메소드는 MobileFirst 클라이언트 SDK가 로드된 후에 사용 가능합니다. 그런 다음 mfjsloaded 이벤트가 호출됩니다.

애플리케이션 등록

1. 명령행 창을 열고 Ionic 프로젝트의 루트로 이동하십시오.

2. MobileFirst Server에 애플리케이션을 등록하십시오.

   mfpdev app register
   

   • 원격 서버를 사용하는 경우 mfpdev server add 명령을 사용하여 이를 추가하십시오.

mfpdev app register CLI 명령은 먼저 MobileFirst Server에 연결하여 애플리케이션을 등록한 후에 MobileFirst Server를 식별하는 메타데이터를 사용하여 Ionic 프로젝트의 루트에 있는 config.xml 파일을 업데이트합니다.

각 플랫폼은 MobileFirst Server에 애플리케이션으로 등록됩니다.

팁: MobileFirst Operations Console에서 애플리케이션을 등록할 수도 있습니다.

1. MobileFirst Operations Console을 로드하십시오.
2. 애플리케이션 옆에 있는 새로 작성 단추를 클릭하여 새 애플리케이션을 등록하고 화면의 지시사항에 따르십시오.

SDK 사용

MobileFirst API 메소드는 MobileFirst 클라이언트 SDK가 로드된 후에 사용 가능합니다. 그런 다음 mfjsloaded 이벤트가 호출됩니다.
이벤트를 호출한 후에 다양한 MobileFirst API 메소드를 호출하십시오.

MobileFirst Ionic SDK 업데이트

최신 릴리스로 MobileFirst Ionic Cordova SDK를 업데이트하려면 ionic cordova plugin remove cordova-plugin-mfp 명령을 실행하여 cordova-plugin-mfp 플러그인을 제거한 후에 ionic cordova plugin add cordova-plugin-mfp 명령을 실행하여 이를 다시 추가하십시오.

SDK 릴리스는 SDK의 NPM 저장소에 있습니다.

생성되는 MobileFirst Ionic SDK 아티팩트

config.xml

Ionic 구성 파일은 애플리케이션 메타데이터를 포함하고 앱의 루트 디렉토리에 저장되는 필수 XML 파일입니다.
프로젝트에 MobileFirst Ionic SDK가 추가되면 Ionic 생성 config.xml 파일은 mfp: 네임스페이스로 식별되는 새 요소 세트를 수신합니다. 추가되는 요소에는 MobileFirst 기능 및 MobileFirst Server에 관련된 정보가 포함됩니다.

config.xml 파일에 추가되는 MobileFirst 설정 예제

<?xml version='1.0'encoding='utf-8'?>
<widget id="..." xmlns:mfp="http://www.ibm.com/mobilefirst/cordova-plugin-mfp">
    <mfp:android>
        <mfp:sdkChecksum>3563350808</mfp:sdkChecksum>
        <mfp:appChecksum>0</mfp:appChecksum>
        <mfp:security>
            <mfp:testWebResourcesChecksum enabled="false" ignoreFileExtensions="png, jpg, jpeg, gif, mp4, mp3" />
        </mfp:security>
    </mfp:android>
    <mfp:windows>
        <mfp:sdkChecksum>3563350808</mfp:sdkChecksum>
       <mfp:windows10>
          <mfp:sdkChecksum>...</mfp:sdkChecksum>          
          <mfp:security>
             <mfp:testWebResourcesChecksum/>
          </mfp:security>
    </mfp:windows>
    <mfp:platformVersion>8.0.0.00-20151214-1255</mfp:platformVersion>
    <mfp:clientCustomInit enabled="false" />
    <mfp:server runtime="mfp" url="http://10.0.0.1:9080" />
    <mfp:directUpdateAuthenticityPublicKey>the-key</mfp:directUpdateAuthenticityPublicKey>
    <mfp:languagePreferences>en</mfp:languagePreferences>
</widget>

config.xml 파일에서 MobileFirst 설정 편집

MobileFirst CLI에서 다음 명령을 실행하여 위 설정을 편집할 수 있습니다.

mfpdev app config

다음 학습서

이제 MobileFirst Ionic SDK가 통합되었으므로 다음을 수행할 수 있습니다.

• Mobile Foundation SDK 사용 학습서 검토
• 어댑터 개발 학습서 검토
• 인증 및 보안 학습서 검토
• 알림 학습서 검토
• 모든 학습서 검토