为 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 是一个开源移动开发框架，支持标准 Web 技术，如 HTML5、CSS3 和 JavaScript，用于跨平台开发。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 命令为应用程序构建文件夹结构和整体模板。

要配置混合移动应用程序，请执行以下操作：

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 插件：
   要将混合移动应用程序与 Oracle Mobile Hub 集成，您需要添加以下插件：

   • oracle-mobile-cloud-cookies：用于通过 SSO 通过 Oracle Mobile Hub 进行验证的插件

   • cordova-plugin-inappbrowser：用于提供 Web 浏览器视图的插件，用于显示 SSO 登录页

   要添加这些插件：

   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 插件。
   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

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 Fusion Cloud Sales Automation 等联合 Oracle SaaS 应用中提取 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 调用。设置变量包含一个 headers 参数，其中授权参数包含访问令牌。另请注意，有一个 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