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

개요

이 학습서에서는 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 및 < 7.0
• cordova-android: >= 6.1.2 및 < 11.0
• cordova-windows: >= 5.0.0 및 < 8.0

참고: cordova-windows 최신 공개 버전에는 버그가 있으므로, 앱을 시작하는 동안 예외가 발생합니다. Apache Cordova는 개발 저장소에서 문제를 수정했지만 아직 공개되지 않았습니다. 수정사항이 있는 마스터 저장소의 cordova-windows 버전을 사용하도록 권장합니다. 다음은 수정사항을 포함하는 cordova-windows 플랫폼을 추가할 때 사용할 수 있는 명령입니다.

cordova platform add https://github.com/apache/cordova-windows

다음으로 이동:

• Cordova SDK 컴포넌트
• MobileFirst Cordova SDK 추가
• MobileFirst Cordova SDK 업데이트
• 생성되는 MobileFirst Cordova SDK 아티팩트
• Cordova 브라우저 플랫폼 지원
• 다음 학습서

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

전제조건:

• 개발자 워크스테이션에 MobileFirst CLI 및 Apache Cordova CLI(>=6.x and <11.0)가 설치되어 있습니다.
• 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 메소드를 호출하십시오.

수동으로 SDK 추가

로컬 경로에서 플러그인을 설치하기 위한 옵션도 있습니다. cordova-plugin-mfp는 MFP 콘솔에서 다운로드할 수 있으며 cordova 애플리케이션에서 설치할 수 있습니다.

1. MFP 서버 콘솔 대시보드에서 다운로드 센터를 클릭 => SDKs 탭을 클릭 => cordova SDK를 다운로드하십시오.

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

   cordova plugin add [path-to downloaded mfp cordova plugin]/mfp-cordova/plugins/cordova-plugin-mfp
   

애플리케이션 등록

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

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

   mfpdev app register
   

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

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 remove cordova-plugin-mfp 명령을 실행하여 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 파일에서 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에 있는 mfpContextRoot 및 applicationId를 언급하는 것이 중요합니다.

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.js의 wlInitOptions 함수에서 정의됨)를 제공하십시오.

중요: 애플리케이션의 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 경로로 브라우저에서 앱을 실행하여 테스트하십시오. 또한 sjcl 및 jssha 폴더를 상위 폴더에 추가하고 ibmmfpf.js 파일에서 해당 참조를 변경하십시오.

다음 학습서

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

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