Oracle Mobile Hub용 Oracle JET 하이브리드 애플리케이션 개발

Oracle JET를 사용하여 하이브리드 모바일 애플리케이션을 생성하고 이를 Oracle Mobile Hub와 같은 Oracle PaaS 솔루션과 통합할 수 있습니다.

시작하기 전에

JET 애플리케이션 개발을 시작하기 전에 다음 필요 조건을 충족해야 합니다.

하이브리드 모바일 개발 환경을 구성했는지 확인하십시오.
Oracle Mobile Hub 인스턴스에 대한 액세스 권한이 있는지 확인합니다.

Oracle JET 하이브리드 모바일 애플리케이션의 아키텍처 정보

Oracle JET 하이브리드 모바일 애플리케이션은 단일 HTML 페이지 또는 뷰에서 제공되는 단일 페이지 애플리케이션(SPA)입니다. 즉, 여러 뷰가 개별 파일에 존재할 수 있지만 응용 프로그램은 항상 단일 웹 페이지로 렌더링합니다. 이 동작은 네이티브 애플리케이션(네이티브 OS API로 개발된 애플리케이션)과 매우 유사하므로 유동적인 사용자 경험을 제공합니다.

Apache Cordova는 플랫폼 간 개발을 위해 HTML5, CSS3, JavaScript와 같은 표준 웹 기술을 지원하는 오픈 소스 모바일 개발 프레임워크입니다. Oracle JET 하이브리드 모바일 애플리케이션은 iOS, Android 및 Windows와 같은 다양한 모바일 플랫폼을 대상으로 하는 Cordova 래퍼 내에서 실행됩니다.

다음 이미지는 Cordova 하이브리드 애플리케이션의 일반적인 아키텍처를 보여줍니다.

cordova_arch.png 그림 설명

cordova_arch-oracle.zip

Cordova Architecture에서는 애플리케이션 뷰(일반적으로 HTML, JS 및 CSS 파일로 구성됨)가 내부적으로 웹 브라우저로 작동하는 고유 운영 체제 래퍼에 표시됩니다. Cordova API는 Core OS API를 통해 모바일 운영체제와 통신할 수 있는 플러그인도 제공하며, 이러한 API를 통해 연락처, 주소 목록, 현지화, 알림 등과 같은 모바일 운영체제 구성요소에 액세스할 수 있습니다.

Oracle JET 하이브리드 모바일 애플리케이션 구성

하이브리드 모바일 애플리케이션에 대한 코드를 작성하기 전에 하이브리드 모바일 애플리케이션을 구성해야 합니다. 이를 위해 ojet create 명령을 사용하여 애플리케이션의 폴더 구조 및 전체 템플리트를 스캐폴딩합니다.

하이브리드 모바일 애플리케이션을 구성하려면 다음과 같이 하십시오.

Oracle JET 툴링 프레임워크를 설치했는지 확인하십시오.

Node.js 콘솔에서 ojet create [directory] --hybrid 명령을 실행하여 Android, iOS 및 Windows용 하이브리드 애플리케이션 템플리트를 생성함으로써 애플리케이션 비계:

ojet create [directory] --hybrid
            [--appid=<application-id>] [--appname=<application-name>]
            [--template={<template-name>:[web|hybrid]|<template-url>|<template-file>}]
            [--platforms=android,ios,windows|--platform=android|ios|windows]

이 예에서는 Android, iOS 및 Windows용 하이브리드 애플리케이션 템플리트를 생성하는 방법을 보여 줍니다.

ojet create myApp --hybrid
            --appid=org.oraclejet.MyApp --appname="mySampleApp"
            --template="C:\Users\SomeUser\app.zip"
            --platforms=android,ios,windows

Cordova 플러그인을 추가합니다.
하이브리드 모바일 애플리케이션을 Oracle Mobile Hub와 통합하려면 다음 플러그인을 추가해야 합니다.
- oracle-mobile-cloud-cookies: SSO를 통해 Oracle Mobile Hub에 인증하는 플러그인입니다.
- cordova-plugin-inappbrowser: SSO 로그인 페이지를 표시하는 데 필요한 웹 브라우저 보기를 제공하는 플러그인입니다.
이러한 플러그인을 추가하려면 다음과 같이 하십시오.
1. Oracle Mobile Hub에 로그인합니다.
2. 응용 프로그램을 누릅니다.
3. SDK 다운로드를 누릅니다. 그러면 SDK 다운로드 페이지로 이동합니다.
4. Download Cordova SDK를 누릅니다.
5. 패키지의 압축을 풉니다.
6. 추출된 패키지에서 oracle-mobile-cloud-cookies 플러그인을 찾을 수 있는 oracle_mobile_js_sdk_cookies_cordova_plugin[VERSION].zip을 찾습니다.
7. oracle-mobile-cloud-cookies plugin를 설치하려면 oracle_mobile_js_sdk_cookies_cordova_plugin[VERSION].zip의 압축을 풀고 다음 cordova 명령을 실행하십시오.
```
cordova plugin add <PLUGIN_FOLDER>
```
  여기서 <PLUGIN_FOLDER>는 압축이 풀린 플러그인에 대한 경로입니다.
8. cordova-plugin-inappbrowser plugin를 설치하려면 다음 cordova 명령을 실행하여 프로젝트에 추가하십시오.
```
cordova plugin add cordova-plugin-inappbrowser –save
```
Oracle Mobile Hub Cordova SDK를 애플리케이션에 추가하고 msc.js, msc.min.js 및 oracle_mobile_cloud_config.js를 JavaScript 파일을 보관할 디렉토리에 복사합니다.

Oracle JET path_mappings.json 파일의 requirejs.config 섹션에서 mcs 및 mcs_cloud_config에 대한 경로 매핑을 업데이트합니다.


requirejs.config({
    baseUrl: 'js',
    // Path mappings for the logical module names
    paths:
    //injector:mainReleasePaths
    {
        'knockout': 'libs/knockout/knockout-3.4.0.debug',
        'jquery': 'libs/jquery/jquery-2.1.3',
        'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.11.4',
        'promise': 'libs/es6-promise/promise-1.0.0',
        'hammerjs': 'libs/hammer/hammer-2.0.4',
        'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0',
        'ojs': 'libs/oj/v2.0.2/debug',
        'ojL10n': 'libs/oj/v2.0.2/ojL10n',
        'ojtranslations': 'libs/oj/v2.0.2/resources',
        'text': 'libs/require/text',
        'signals': 'libs/js-signals/signals',
           'mcs': 'libs/mcs/mcs',
           'mcsconf': 'libs/mcs/oracle_mobile_cloud_config'
    }
    //endinjector
    ,
    // Shim configurations for modules that do not expose AMD
    shim: {
        'jquery': {
            exports: ['jQuery', '$']
        }
    }
});

모바일 백엔드 세부 정보로 oracle_mobile_cloud_config.js 업데이트:

var mcs_config = {
  "logLevel": 3,
  "mobileBackends": {
    "RDXTESTSSO": {
      "default": true,
      "baseUrl": "<YOUR_BASE_URL>",
      "applicationKey": "<YOUR_BACKEND_APPLICATION_KEY>",
      "synchronization": {
        "periodicRefreshPolicy": "PERIODIC_REFRESH_POLICY_REFRESH_NONE",
        "policies": [{
          "path": '/mobile/custom/taskApi/*',
          "fetchPolicy": 'FETCH_FROM_SERVICE_ON_CACHE_MISS_OR_EXPIRY',
          "expiryPolicy": 'EXPIRE_ON_RESTART',
          "evictionPolicy": 'EVICT_ON_EXPIRY_AT_STARTUP',
          "updatePolicy": 'QUEUE_IF_OFFLINE',
          "noCache": false
        }, {
          "path": '/mobile/custom/firstApi/tasks',
          "fetchPolicy": 'FETCH_FROM_SERVICE_ON_CACHE_MISS'
        }, {
          "path": '/mobile/custom/secondApi/tasks',
        }],
        "default": {
          "fetchPolicy": 'FETCH_FROM_SERVICE_IF_ONLINE',
          "expiryPolicy": 'EXPIRE_ON_RESTART'
        }
      },
      "authorization": {
        "basicAuth": {
            "backendId": "<YOUR_BACKEND_ID>",
            "anonymousToken": "<YOUR_BACKEND_ANONYMOUS_TOKEN>"
        },
        "oAuth": {
           "clientId": "<YOUR_CLIENT_ID>",
              "clientSecret": "<YOUR_CLIENT_SECRET>",
              "tokenEndpoint": "<YOUR_TOKEN_ENDPOINT>"
        },
        "facebookAuth": {
           "facebookAppId": "<YOUR_FACEBOOK_APP_ID>",
              "backendId": "<YOUR_BACKEND_ID>",
              "anonymousToken": "<YOUR_BACKEND_ANONYMOUS_TOKEN>"
        },
        "ssoAuth": {
           "clientId": "<YOUR_CLIENT_ID>",
              "clientSecret": "<YOUR_ClIENT_SECRET>",
              "tokenEndpoint": "<YOUR_SSOAUTH_TOKEN_ENDPOINT>"
        }
      }
    }
  }
};

Oracle JET 하이브리드 모바일 애플리케이션과 Oracle Mobile Hub 통합

Oracle JET 하이브리드 애플리케이션을 백엔드 모바일 서비스(예: Oracle Mobile Hub)와 통합하여 Oracle Fusion Cloud Sales Automation과 같은 통합 Oracle SaaS 애플리케이션에서 REST 데이터를 인출할 수 있습니다.

Oracle JET 하이브리드 모바일 애플리케이션을 Oracle Mobile Hub와 통합하려면 다음을 수행합니다.

path_mappings.json 파일 구성에 'mcs', 'mcsconf'가 구성되어 있는지 확인합니다. 예를 들어, 다음 모듈은 require 문에서 로드할 수 있습니다.
```
require(['ojs/ojcore', 'knockout', 'jquery', 'mcs', 'mcsconf', 'ojs/ojknockout', 'ojs/ojfilmstrip', 'ojs/ojpagingcontrol', 'ojs/ojbutton']
```
여기서 mcs 및 mcsconf는 main.js 파일의 requires.config 객체에서 선언한 경로 이름입니다.

Oracle Mobile Hub 구성을 애플리케이션에 로드합니다.

mcs.MobileBackendManager.platform = new mcs.CordovaPlatform();
mcs.MobileBackendManager.setConfig(mcs_config);
backend = mcs.MobileBackendManager.getMobileBackend("[YOUR_MOBILE_HUB_BACKEND]");
if (backend != null) {
  backend.setAuthenticationType("ssoAuth");
  //other code to login to Mobile Hub or function call
}

여기서 msc_config는 Oracle JET 하이브리드 모바일 애플리케이션을 구성할 때 정의한 구성 객체입니다.

Authorization 객체를 사용하여 인증합니다. 예를 들어, 이전 단계에서 사용된 "백엔드" 변수를 사용하여 인증하려면 다음과 같이 하십시오.
```
backend.Authorization.authenticate(
  function(statusCode, data) {
    console.log(data);
    console.log(statusCode);
    alert("SSO Login success, status:" + statusCode);
    fetchSalesCloudData(data.access_token);
  },
  function(statusCode, data) {
    console.log(statusCode + " with message:  " + data);
    alert("SSO Login failed, statusCode" + statusCode);
  });
```
백엔드의 Authorization.authenticate 메소드는 두 가지 함수를 매개변수로 사용합니다. 첫번째 함수는 인증이 성공하면 실행되고 두번째 함수는 인증이 실패하면 실행됩니다.

권한 부여 헤더를 포함하여 Oracle Mobile Hub API에 전화합니다. jQuery AJAX 호출로 전달된 설정 객체 내의 권한 부여 헤더에 제공된 토큰을 포함시켜야 합니다. 예를 들어 Oracle Mobile Hub 내에서 생성된 Oracle Fusion Cloud Sales Automation 사용자정의 REST API에서 데이터를 인출하려는 경우:

function fetchSalesCloudData(ssoToken) {
    var mcsbackendURL = mcs_config.mobileBackends.RDXTESTSSO.baseUrl + "/mobile/custom/RDHSalesApplAPI/opportunities"; //custom API URL
    console.log(mcsbackendURL);
    var token = "Bearer " + ssoToken;
    //console.log(token);
    var settings = {
        "async": true,
        "crossDomain": true,
        "url": mcsbackendURL,
        "method": "GET",
        "headers": {
            "authorization": token
        }
    };
    $.ajax(settings).done(function(response) {
        console.log(response);
        $.each(response, function() {
            self.data.push({
                Name: this.Name,
                OptyId: this.OptyId,
                OptyNumber: this.OptyNumber,
                SalesStage: this.SalesStage,
                Revenue: this.Revenue
            });
        });
        self.dataReady = true;
        displaySalesCloudData();
    });
}

이전 예에서 settings 변수는 jQuery AJAX REST 호출로 전달됩니다. 설정 변수는 권한 부여 매개변수가 액세스 토큰을 포함하는 헤더 매개변수를 포함합니다. 또한 도메인 간 통신이 발생할 것임을 나타내는 데 사용되는 crossDomain 매개변수가 있습니다.

이 시점에서 AJAX 호출을 수행했습니다. 그러나 다른 옵션으로 사용자정의 코드에서 사용자정의 API를 호출할 수도 있습니다.

REST 호출에서 인출된 데이터를 표시합니다. 예를 들어, Oracle JET filmstrip 객체를 사용할 수 있습니다.

    function displaySalesCloudData() {

      console.log("inside displayFilmStrip");
      self.pagingModel = null;
      getItemInitialDisplay = function(index) {
          return index < 1 ? '' : 'none';
      };
      getPagingModel = function() {
          if (!self.pagingModel) {
              var filmstrip = document.getElementById('<element id>');
              filmstrip.getPagingModel;              
              self.pagingModel = pagingModel;
          }
          return self.pagingModel;
      };
  }

여기서 <element id> 은 데이터가 표시될 HTML 요소입니다.

Oracle JET 하이브리드 모바일 애플리케이션 구축 및 테스트

Oracle JET 하이브리드 모바일 애플리케이션을 처음으로 실행하기 전에 모바일 플랫폼을 대상으로 하는 빌드를 실행해야 합니다.

ojet build os 명령을 실행하여 빌드 및 테스트 프로세스를 자동화합니다. Node.js 명령 프롬프트에서 다음 명령을 실행합니다.

ojet build [android|ios|windows]
           [--build-config=path/buildConfig.json --destination=device|emulator
            --theme=themename[:android|ios|web|windows] --themes=theme1,theme2,... 
            --sass
            --platform-options="string"]

여기서 [android|ios|windows]은 응용 프로그램을 테스트할 플랫폼입니다. 예를 들어 Android 에뮬레이터에서 테스트하는 경우 명령은 다음과 같습니다.

ojet build android

빌드가 완료되면 ojet serve os 명령을 사용하여 애플리케이션을 실행합니다.

ojet serve [android|ios|windows]
           [--build-config=path/buildConfig.json
            --server-port=server-port-number --livereload-port=live-reload-port-number
            --destination=emulator[:emulator-name]|browser[:browser-name]|device[:device-name]|server-only
            --livereload --build
            --theme=theme_name[:android|ios|windows|web]] --themes=theme1,theme2,... 
            --sass
            --platform-options="string"]

여기서 [android|ios|windows]은 응용 프로그램을 테스트할 플랫폼입니다. 예를 들어 Android 에뮬레이터에서 테스트하는 경우 명령은 다음과 같습니다.

ojet serve android