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

improve this page | report issue

개요

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

MobileFirst Cordova SDK는 Cordova 플러그인 세트로 제공되며 NPM에 등록됩니다.
사용 가능한 플러그인은 다음과 같습니다.

  • cordova-plugin-mfp - 핵심 SDK 플러그인
  • cordova-plugin-mfp-push - 푸시 알림 지원 제공
  • cordova-plugin-mfp-jsonstore - JSONStore 지원 제공
  • cordova-plugin-mfp-fips - Android 전용. FIPS 지원 제공
  • cordova-plugin-mfp-encrypt-utils - iOS 전용. 암호화 및 복호화에 대한 지원 제공

지원 레벨

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

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

다음으로 이동:

참고: Xcode 8을 사용하는 경우 iOS 시뮬레이터에서 iOS 앱을 실행 중이면 키 체인 공유 기능은 필수입니다. 이 기능을 수동으로 사용하도록 설정한 후에 Xcode 프로젝트를 빌드해야 합니다.

Cordova 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 사용을 참조하십시오.

전제조건:

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

Mobile Foundation Cordova SDK 추가

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

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

참고: 기존 Cordova 애플리케이션에 SDK를 추가하는 경우 플러그인이 MainActivity.java 파일(Android) 및 Main.m 파일(iOS)을 겹쳐씁니다.

SDK 추가

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

새 애플리케이션

  1. 다음과 같이 Cordova 프로젝트를 작성하십시오. cordova create projectName applicationId applicationName --template cordova-template-mfp
    예:

    cordova create Hello com.example.helloworld HelloWorld --template cordova-template-mfp
    
    • “Hello”는 애플리케이션의 폴더 이름입니다.
    • “com.example.helloworld”는 애플리케이션의 ID입니다.
    • “HelloWorld”는 애플리케이션의 이름입니다.
    • –template는 MobileFirst 특정 추가로 애플리케이션을 수정합니다.

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

  2. Cordova 프로젝트의 루트인 cd hello로 디렉토리를 변경하십시오.

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

    cordova platform add ios
    

    참고: 애플리케이션이 MobileFirst 템플리트를 사용하여 구성되었으므로 3단계에서 플랫폼이 추가된 것과 같이 MobileFirst 핵심 Cordova 플러그인이 자동으로 추가됩니다.

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

    cordova prepare
    

기존 애플리케이션

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

    cordova plugin add cordova-plugin-mfp
    
  2. www\js 폴더로 이동하고 index.js 파일을 선택하십시오.

  3. 다음 기능을 추가하십시오.

    function wlCommonInit() {
    
    }
    

MobileFirst API 메소드는 MobileFirst 클라이언트 SDK가 로드된 후에 사용 가능합니다. 그런 다음 wlCommonInit 기능이 호출됩니다.
이 기능으로 여러 MobileFirst API 메소드를 호출하십시오.

애플리케이션 등록

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

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

    mfpdev app register
    

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

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

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

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

SDK 사용

MobileFirst API 메소드는 MobileFirst 클라이언트 SDK가 로드된 후에 사용 가능합니다. 그런 다음 wlCommonInit 기능이 호출됩니다.
이 기능으로 여러 MobileFirst API 메소드를 호출하십시오.

MobileFirst Cordova SDK 업데이트

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

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

생성된 MobileFirst Cordova SDK 아티팩트

config.xml

Cordova 구성 파일은 애플리케이션 메타데이터를 포함하고 앱의 루트 디렉토리에 저장되는 필수 XML 파일입니다.
프로젝트에 MobileFirst Cordova SDK가 추가되면 Cordova 생성 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 문서의 루트 요소입니다. 해당 요소에는 두 가지 필수 속성이 포함됩니다.
  • ID: Cordova 프로젝트가 작성될 때 지정된 애플리케이션 패키지 이름입니다. MobileFirst Server에 애플리케이션이 등록된 이후 이 값이 수동으로 변경되면 애플리케이션을 다시 등록해야 합니다.
  • xmlns:mfp: MobileFirst 플러그인 XML 네임스페이스입니다.
mfp:platformVersion 필수입니다. 애플리케이션이 개발된 제품 버전입니다. 기본적으로 설정됩니다. 변경해서는 안 됩니다.
mfp:directUpdateAuthenticityPublicKey 선택사항입니다. 직접 업데이트 인증 기능을 사용으로 설정하면 배치 중에 직접 업데이트 패키지가 디지털로 서명됩니다. 클라이언트가 패키지를 다운로드하면 보안 검사가 실행되어 패키지 인증의 유효성을 검증합니다. 이 문자열 값은 직접 업데이트 .zip 파일을 인증하는 데 사용되는 공개 키입니다. mfpdev app config direct_update_authenticity_public_key key-value 명령으로 설정됩니다.
mfp:languagePreferences 선택사항입니다. 시스템 메시지를 표시하는 쉼표로 구분된 로케일 목록이 포함되어 있습니다. mfpdev app config language_preferences key-value 명령으로 설정됩니다.
mfp:clientCustomInit WL.Client.init 메소드가 호출되는 방식을 제어합니다. 기본적으로 이 값은 false로 설정되며 WL.Client.init 메소드는 MobileFirst 플러그인이 초기화된 후에 자동으로 호출됩니다. 이 값을 true로 설정하여 클라이언트 코드에서 WL.Client.init가 호출되는 시점을 명시적으로 제어하도록 하십시오. 수동으로 편집됩니다. 사용 속성 값을 true 또는 false로 설정할 수 있습니다.
mfp:server 클라이언트 애플리케이션이 MobileFirst Server와 통신하는 데 사용하는 기본 원격 서버 연결 정보입니다.
  • url: URL 값은 클라이언트에서 서버에 연결하는 데 기본적으로 사용하는 MobileFirst Server 프로토콜, 호스트 및 포트 값을 지정합니다.
  • runtime: 런타임 값은 애플리케이션이 등록된 MobileFirst Server 런타임을 지정합니다. MobileFirst 런타임에 대한 자세한 정보는 MobileFirst Server 개요를 참조하십시오.
  • 서버 URL 값은 the mfpdev app config server 명령으로 설정됩니다.
  • 서버 런타임 값은 mfpdev app config runtime 명령으로 설정됩니다.
mfp:ios 이 요소에는 iOS 플랫폼에 대한 MobileFirst 관련 클라이언트 애플리케이션 구성이 모두 포함되어 있습니다.
  • mfp:appChecksum
  • mfp:sdkChecksum
  • mfp:security
mfp:android 이 요소에는 Android 플랫폼에 대한 MobileFirst 관련 클라이언트 애플리케이션 구성이 모두 포함되어 있습니다.
  • mfp:appChecksum
  • mfp:sdkChecksum
  • mfp:security
mfp:windows 이 요소에는 Windows 플랫폼에 대한 MobileFirst 관련 클라이언트 애플리케이션 구성이 모두 포함되어 있습니다.
  • mfp:appChecksum
  • mfp:windowsphone8
  • mfp:windows8
  • mfp:windows10
mfp:windows8 이 요소에는 Windows 8.1 플랫폼에 대한 MobileFirst 관련 클라이언트 애플리케이션 구성이 모두 포함되어 있습니다.
  • mfp:sdkChecksum
  • mfp:security
mfp:windows10 이 요소에는 Windows 10 플랫폼에 대한 MobileFirst 관련 클라이언트 애플리케이션 구성이 모두 포함되어 있습니다.
  • mfp:sdkChecksum
  • mfp:security
mfp:windowsphone8 이 요소에는 Windows Phone 8.1 플랫폼에 대한 MobileFirst 관련 클라이언트 애플리케이션 구성이 모두 포함되어 있습니다.
  • mfp:sdkChecksum
  • mfp:security
mfp:appChecksum 이 값은 애플리케이션 웹 자원의 체크섬입니다. mfpdev app webupdate 실행 시에 계산됩니다. 사용자가 구성할 수 없습니다. 체크섬 값은 mfpdev app webupdate 명령 실행 시 업데이트됩니다. mfpdev app webupdate 명령에 대한 세부사항을 확인하려면 명령 창에 mfpdev help app webupdate를 입력하십시오.
mfp:sdkChecksum 이 값은 고유 MobileFirst SDK 레벨을 식별하는 데 사용되는 MobileFirst Operations Console SDK 체크섬입니다. 사용자가 구성할 수 없습니다. 이 값은 기본적으로 설정됩니다.
mfp:security 이 요소에는 MobileFirst 보안에 대한 클라이언트 애플리케이션의 플랫폼별 구성이 포함되어 있습니다. 다음을 포함합니다.
  • mfp:testWebResourcesChecksum
mfp:testWebResourcesChecksum 모바일 디바이스에서 애플리케이션이 실행을 시작할 때마다 해당 웹 자원의 무결성을 확인하는지 여부를 제어합니다. 속성:
  • enabled: 올바른 값은 truefalse입니다. 이 속성이 true로 설정되면 애플리케이션은 해당 웹 자원의 체크섬을 계산한 다음 애플리케이션이 처음 실행될 때 저장된 값과 비교합니다.
  • ignoreFileExtensions: 웹 자원의 크기에 따라 체크섬 계산에 몇 초 정도 걸릴 수 있습니다. 이 계산에서 무시할 파일 확장자 목록을 제공하여 시간을 줄일 수 있습니다. enabled 속성 값이 false로 설정되면 이 값이 무시됩니다.
  • enabled 속성은 mfpdev app config android_security_test_web_resources_checksum key-value 명령으로 설정됩니다.
  • ignoreFileExtensions 속성은 mfpdev app config android_security_ignore_file_extensions value 명령으로 설정됩니다.

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

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

mfpdev app config

Cordova 브라우저 플랫폼 지원

MobileFirst Platform에서는 이제 기타 Cordova Windows, Cordova Android 및 Cordova iOS의 지원되는 플랫폼과 함께 Cordova 브라우저 플랫폼을 지원합니다.

MFP(MobileFirst Platform)를 사용하는 Cordova 브라우저 플랫폼 사용은 기타 플랫폼과 함께 MFP를 사용하는 것과 유사합니다. 이 기능을 설명하는 샘플이 아래에 설명되어 있습니다.

다음 명령을 사용하여 cordova 애플리케이션을 작성하십시오.

cordova create <your-appFolder-name> <package-name>

이렇게 하면 vanilla cordova 앱이 작성됩니다.

다음 명령을 사용하여 MFP 플러그인을 추가하십시오.

   cordova plugin add cordova-plugin-mfp

MFP 서버(로컬에 호스팅된 서버 또는 IBM Cloud의 서버일 수 있음)에 ping을 실행하는 데 사용할 수 있는 단추를 추가하십시오. 단추를 클릭하여 MFP 서버에 ping을 실행하십시오. 다음과 같이 아래 샘플 코드를 사용할 수 있습니다.

index.html

<!DOCTYPE html>
<html>

<head>
   <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">


  <link rel="stylesheet" type="text/css" href="css/index.css" />

  <!-- load script with wlCommonInit defined before loading cordova.js -->
  <script type="text/javascript" src="js/index.js"></script>
  <script type="text/javascript" src="cordova.js"></script>

  <title>MFP 스타터 - Cordova</title>
</head>

<body>

  <div id="main">
    <div id="main_title">Hello MobileFirst</div>
    <div id="main_status"></div>
    <div id="main_info"></div>
  </div>

  <div id="button_content">
    <button id="ping_button" style="display:none">MobileFirst 서버에 Ping</button>
  </div>

</body>

</html>

index.js


   var Messages = {
  // Add here your messages for the default language.
  // Generate a similar file with a language suffix containing the translated messages.
  // key1 : message1,
};

   var wlInitOptions = {
  // Options to initialize with the WL.Client object.
  // For initialization options please refer to IBM MobileFirst Platform Foundation Knowledge Center.
   mfpContextRoot : '/mfp', // "mfp" is the default context root in the MobileFirst Development server
    applicationId : 'io.cordova.hellocordova' // Replace with your own app id/package name.
};

function wlCommonInit() {
  app.init();
}

var app = {
  //initialize app
  "init": function init() {
    var buttonElement = document.getElementById("ping_button");
    buttonElement.style.display = "block";
    buttonElement.addEventListener('click', app.testServerConnection, false);
  },
  //test server connection
  "testServerConnection": function testServerConnection() {

    var titleText = document.getElementById("main_title");
    var statusText = document.getElementById("main_status");
    var infoText = document.getElementById("main_info");
    titleText.innerHTML = "Hello MobileFirst";
    statusText.innerHTML = "Connecting to Server...";
    infoText.innerHTML = "";

    WLAuthorizationManager.obtainAccessToken()
      .then(
        function (accessToken) {
          titleText.innerHTML = "Yay!";
          statusText.innerHTML = "Connected to MobileFirst Server";
        },
        function (error) {
          titleText.innerHTML = "Bummer...";
          statusText.innerHTML = "Failed to connect to MobileFirst Server";
        }
        );
    },
 }

참고: index.js 파일의 wlInitOptions에 있는 mfpContextRootapplicationId를 언급하는 것이 중요합니다.

index.css

body {
    position: static;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    margin: 0px;
	padding: 0px;
}

#button_content {
  position: absolute;
  bottom: 10%;
  width: 100%;
}

#ping_button {
  display: block;
  margin: 0 auto;
  height: 50px;
  width: 240px;
  font-size: 20px;
  color: white;
  background-color: #325c80;
}

#main {
  top: 10%;
  position: absolute;
  text-align: center;
  width: 100%
}

#main_title {
  font-size: 40px;
}

#main_status {
  font-size: 20px;
  margin-top: 10px;
}

#main_info {
  font-size: 14px;
  margin-top: 10px;
}

다음 명령을 사용하여 브라우저 플랫폼을 추가하십시오.

cordova platform add browser

수동으로 애플리케이션을 등록하려면 다음을 수행하십시오.

  • MFP 서버의 콘솔에 로그인하십시오.
  • *애플리케이션* 옵션 옆에 있는 새로 작성 단추를 클릭하십시오.
  • 애플리케이션에 이름을 제공하고 해당 플랫폼으로 을 선택하고 애플리케이션의 ID(index.jswlInitOptions 함수에서 정의됨)를 제공하십시오.

중요: 애플리케이션의 config.xml에 서버 세부사항을 추가하십시오.

참고: 브라우저 플랫폼 앱을 등록하는 mfpdev-cli가 곧 릴리스될 예정입니다.

그런 다음 다음 명령을 실행하십시오.

cordova prepare
cordova build
cordova run

그러면 프록시 서버(포트 9081)에서 실행되고 MFP 서버에 연결하는 브라우저가 시작됩니다. cordova 브라우저의 기본 프록시 서버(8000에서 실행됨)는 same-origin-policy로 인해 MFP 서버에 연결할 수 없어서 제외되었습니다.

실행할 기본 브라우저는 Chrome으로 설정됩니다. --target 옵션을 사용하여 다른 브라우저에서 실행할 수 있으며 다음 명령을 사용할 수 있습니다.

 cordova run --target=Firefox

다음 명령을 사용하여 앱을 미리 볼 수 있습니다.

    mfpdev app preview

지원되는 유일한 브라우저 옵션은 Simple Browser 렌더링입니다. 옵션 모바일 브라우저 지원은 브라우저 플랫폼에서 지원되지 않습니다.

WebSphere Liberty를 사용하여 브라우저 자원 제공

지시사항에 따라 학습서에서 WebSphere Liberty를 사용하고 아래 변경 사항을 작성하십시오.

이 학습서의 웹 애플리케이션 자원으로 Maven 웹 앱 빌드 섹션의 1단계에서 언급한 대로 브라우저 프로젝트의 www 폴더를 [MyWebApp] → src → 기본 → webapp 에 추가하십시오. 마지막으로 Liberty 서버에 앱을 등록하고 localhost:9080/MyWebApp 경로로 브라우저에서 앱을 실행하여 테스트하십시오. 또한 sjcljssha 폴더를 상위 폴더에 추가하고 ibmmfpf.js 파일에서 해당 참조를 변경하십시오.

다음 학습서

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

Last modified on July 17, 2018