Oracle Mobile Hub用のOracle JETハイブリッド・アプリケーションの開発

Oracle JETを使用してハイブリッド・モバイル・アプリケーションを作成し、Oracle Mobile HubなどのOracle PaaSソリューションと統合できます。

開始する前に

JETアプリケーションの開発を開始する前に、次の前提条件を満たす必要があります。

ハイブリッド・モバイル開発環境が構成されていることを確認します。
Oracle Mobile Hubインスタンスにアクセスできることを確認します。

Oracle JETハイブリッド・モバイル・アプリケーションのアーキテクチャについて

Oracle JETハイブリッド・モバイル・アプリケーションは、単一のHTMLページまたはビューから提供される単一ページ・アプリケーション(SPA)です。つまり、複数のビューが別々のファイルに存在することは可能ですが、アプリケーションはそれらを常に単一のWebページとしてレンダリングします。この動作はネイティブ・アプリケーション(ネイティブOS APIで開発されたアプリケーション)と非常によく似ているため、fluidユーザー・エクスペリエンスを提供します。

Apache Cordovaは、クロス・プラットフォーム開発用のHTML5、CSS3、JavaScriptなどの標準Webテクノロジをサポートするオープン・ソースのモバイル開発フレームワークです。Oracle JETハイブリッド・モバイル・アプリケーションは、iOS、Android、Windowsなどの様々なモバイル・プラットフォームを対象としたCordovaラッパー内で実行されます。

次の図は、Cordovaハイブリッド・アプリケーションの典型的なアーキテクチャを示しています。

図cordova_arch.pngの説明

cordova_arch-oracle.zip

Cordovaアーキテクチャでは、アプリケーション・ビュー(通常はHTML、JSおよびCSSファイルで構成)が、内部的にWebブラウザとして機能するネイティブのオペレーティング・システム・ラッパーに表示されます。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ログイン・ページの表示に必要な、Webブラウザ・ビューを提供するプラグイン
これらのプラグインを追加するには:
1. Oracle Mobile Hubにログインします。
2. 「アプリケーション」をクリックします。
3. 「SDK Downloads」をクリックします。これにより、「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をアプリケーションに追加し、JavaScriptファイルを保持するディレクトリにmsc.js、msc.min.jsおよびoracle_mobile_cloud_config.jsをコピーします。

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と統合するには:

'mcs'、'mcsconf'がpath_mappings.jsonファイル構成で構成されていることを確認します。たとえば、次のモジュールは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変数を使用して認証するには:
```
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メソッドは、パラメータとして2つの関数を取ります。1つ目のファンクションは認証が成功した場合に実行され、2つ目のファンクションは認証が失敗した場合に実行されます。

認可ヘッダーを含めて、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フィルムストリップ・オブジェクトを使用できます。

    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"]

ojet serve android