開發適用於 Oracle Mobile Hub 的 Oracle JET 混合式應用程式

您可以使用 Oracle JET 建立混合式行動應用程式，並將它們與 Oracle PaaS 解決方案 (例如 Oracle Mobile Hub) 整合。

Before You Begin - 開始之前

開始開發 JET 應用程式之前，您必須先符合下列先決條件：

• 請確定您已設定「混合行動開發環境」。
• 確定您可以存取 Oracle Mobile Hub 執行處理。

關於 Oracle JET 混合式行動應用程式的架構

Oracle JET 混合式行動應用程式是從單一 HTML 頁面或檢視提供的單一頁面應用程式 (SPA)。這表示多個檢視可以存在於個別檔案中，但應用程式一律會將它們呈現為單一網頁。此行為與原生應用程式 (使用原生作業系統 API 開發的應用程式) 非常類似，因此提供流暢的使用者體驗。

Apache Cordova 是一個開源的行動開發架構，支援標準 Web 技術，例如 HTML5、CSS3 以及 JavaScript，以進行跨平台開發。Oracle JET 混合式行動應用程式會在 Cordova 包裝程式內執行，目標是 iOS、Android 及 Windows 等不同行動平台。

下圖說明 Cordova 混合應用程式的一般架構：

cordova_arch.png 圖解說明

cordova_arch-oracle.zip

在 Cordova Architecture 中，應用程式檢視 (通常是由 HTML、JS 及 CSS 檔案所組成) 會顯示在原生作業系統包裝函式上，供內部作為 Web 瀏覽器使用。Cordova API 也提供可透過核心作業系統 API 與行動作業系統通訊的外掛程式，這些 API 可讓您存取行動作業系統元件，例如聯絡人、位址清單、本地化、通知等等。

設定您的 Oracle JET 混合式行動應用程式

您必須先設定混合式行動應用程式，才能撰寫混合式行動應用程式的程式碼。為此，請使用 ojet create 指令來鷹架資料夾結構和應用程式的整體範本。

設定您的混合行動應用程式：

1. 確定您已安裝 Oracle JET 工具架構。
2. 在 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

3. 新增 Cordova Plugin：
   若要將您的混合式行動應用程式與 Oracle Mobile Hub 整合，您需要新增下列外掛程式：

   • oracle-mobile-cloud-cookies：透過 SSO 與 Oracle Mobile Hub 進行認證的外掛程式

   • cordova-plugin-inappbrowser：提供 Web 瀏覽器檢視的外掛程式，用於顯示 SSO 登入頁面

   新增這些 Plugin：

   1. 登入 Oracle Mobile Hub 。
   2. 按一下應用程式。
   3. 按一下 SDK 下載。這樣就會將您帶到 SDK 下載項目頁面。
   4. 按一下「下載 Cordova SDK」。
   5. 解壓縮套件。
   6. 在擷取的套裝程式中，尋找 oracle_mobile_js_sdk_cookies_cordova_plugin[VERSION].zip ，您可以在其中找到 oracle-mobile-cloud-cookies Plugin。
   7. 若要安裝 oracle-mobile-cloud-cookies plugin，請解壓縮 oracle_mobile_js_sdk_cookies_cordova_plugin[VERSION].zip ，然後執行下列 cordova 命令：

      cordova plugin add <PLUGIN_FOLDER>

      其中 <PLUGIN_FOLDER> 是已解壓縮之 Plugin 的路徑。

   8. 若要安裝 cordova-plugin-inappbrowser plugin，請執行下列 cordova 命令，將它新增至您的專案：

      cordova plugin add cordova-plugin-inappbrowser –save

4. 將 Oracle Mobile Hub Cordova SDK 新增至您的應用程式，將 msc.js、msc.min.js 以及 oracle_mobile_cloud_config.js 複製到您要保留 JavaScript 檔案的目錄中。
5. 更新您 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', '$']
           }
       }
   });

6. 使用您的行動後端詳細資訊更新 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 SaaS 應用程式 (例如 Oracle Fusion Cloud Sales Automation) 擷取 REST 資料。

若要將您的 Oracle JET 混合式行動應用程式與 Oracle Mobile Hub 整合，請執行下列動作：

1. 確定您在 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 物件底下宣告的路徑名稱。

2. 將 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 混合式行動應用程式時所定義的組態物件。

3. 使用 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 方法接受兩個函數作為參數。第一個函數會在認證成功時執行，而第二個函數則會在認證失敗時執行。

4. 透過包含授權標頭來呼叫 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 作為替代選項。

5. 顯示從 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"]

其中 [android|ios|windows] 是您要測試應用程式的平台。例如，如果您在 Android 模擬器上進行測試，則命令為：

ojet serve android