1. Acceso a datos REST desde una aplicación de Oracle Mobile Hub
  2. Desarrollo de una aplicación híbrida de Oracle JET para Oracle Mobile Hub

Desarrollo de una aplicación híbrida de Oracle JET para Oracle Mobile Hub

Puede crear aplicaciones móviles híbridas mediante Oracle JET e integrarlas con soluciones PaaS de Oracle como Oracle Mobile Hub.

Antes de empezar

Antes de empezar a desarrollar una aplicación JET, debe cumplir los siguientes requisitos:
  • Asegúrese de haber configurado el entorno de desarrollo móvil híbrido.
  • Asegúrese de tener acceso a una instancia de Oracle Mobile Hub.

Acerca de la arquitectura de las aplicaciones móviles híbridas de Oracle JET

Una aplicación móvil híbrida de Oracle JET es una aplicación de una sola página (SPA) que se sirve desde una única página o vista HTML. Esto significa que pueden existir varias vistas en archivos independientes, pero la aplicación siempre las representará como una sola página web. Este comportamiento es muy similar a una aplicación nativa (una aplicación desarrollada con API nativas del sistema operativo), proporcionando así una experiencia de usuario fluida.

Apache Cordova es un marco de desarrollo móvil de código abierto que admite tecnologías web estándar como HTML5, CSS3 y JavaScript para el desarrollo multiplataforma. Las aplicaciones móviles híbridas de Oracle JET se ejecutan en envoltorios Cordova dirigidos a diferentes plataformas móviles como iOS, Android y Windows.

En la siguiente imagen se muestra la arquitectura típica de una aplicación híbrida de Cordova:

A continuación se muestra la descripción de cordova_arch.png
Descripción de la ilustración cordova_arch.png

cordova_arch-oracle.zip

En una arquitectura Cordova, la vista de aplicación (generalmente compuesta por archivos HTML, JS y CSS) se muestra en un envoltorio nativo del sistema operativo que funciona internamente como un explorador web. La API de Cordova también proporciona plugins para comunicarse con los sistemas operativos móviles a través de las API del sistema operativo principal, estas API le permiten acceder a los componentes del sistema operativo móvil como contactos, lista de direcciones, localización, notificaciones y más.

Configuración de la aplicación móvil híbrida de Oracle JET

Antes de escribir el código para la aplicación móvil híbrida, debe configurar la aplicación móvil híbrida. Para ello, utilice el comando ojet create para andar la estructura de carpetas y la plantilla general de la aplicación.

Para configurar la aplicación móvil híbrida:
  1. Asegúrese de tener instalado el marco de herramientas de Oracle JET.
  2. Ancle la aplicación ejecutando el comando ojet create [directory] --hybrid en la consola Node.js para generar una plantilla de aplicación híbrida para Android, iOS y 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]

    En este ejemplo se muestra cómo generar una plantilla de aplicación híbrida para Android, iOS y Windows:

    ojet create myApp --hybrid
            --appid=org.oraclejet.MyApp --appname="mySampleApp"
            --template="C:\Users\SomeUser\app.zip"
            --platforms=android,ios,windows
  3. Agregue los plugins de Cordova:
    Para integrar la aplicación móvil híbrida con Oracle Mobile Hub, debe agregar los siguientes plugins:

    • oracle-mobile-cloud-cookies: plugin para autenticarse con Oracle Mobile Hub mediante SSO

    • cordova-plugin-inappbrowser: plugin para proporcionar una vista del explorador web, necesaria para mostrar la página de conexión SSO

    Para agregar estos plugins:

    1. Conéctese a Oracle Mobile Hub.
    2. Haga clic en Aplicaciones.
    3. Haga clic en Descargas de SDK. Esto le llevará a la página Descargas de SDK.
    4. Haga clic en Descargar SDK de Cordova.
    5. Descomprima el paquete.
    6. En el paquete extraído, busque oracle_mobile_js_sdk_cookies_cordova_plugin[VERSION].zip, donde puede encontrar el plugin oracle-mobile-cloud-cookies.
    7. Para instalar oracle-mobile-cloud-cookies plugin, descomprima oracle_mobile_js_sdk_cookies_cordova_plugin[VERSION].zip y ejecute el siguiente comando cordova: 
      cordova plugin add <PLUGIN_FOLDER>

      Donde <PLUGIN_FOLDER> es la ruta al plugin desempaquetado.

    8. Para instalar cordova-plugin-inappbrowser plugin, ejecute el siguiente comando cordova para agregarlo al proyecto:
      cordova plugin add cordova-plugin-inappbrowser –save
  4. Agregue el SDK de Cordova de Oracle Mobile Hub a la aplicación, copie msc.js, msc.min.js y oracle_mobile_cloud_config.js en un directorio donde conservará los archivos JavaScript.
  5. Actualice las asignaciones de ruta de acceso para mcs y mcs_cloud_config en la sección requirejs.config del archivo path_mappings.json de Oracle JET.
    
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. Actualice oracle_mobile_cloud_config.js con los detalles del backend móvil:
    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>"
        }
      }
    }
  }
};

Integre la aplicación móvil híbrida de Oracle JET con Oracle Mobile Hub

Puede integrar la aplicación híbrida de Oracle JET con un servicio móvil backend como Oracle Mobile Hub para recuperar datos REST de aplicaciones Oracle SaaS federadas como Oracle Fusion Cloud Sales Automation.

Para integrar la aplicación móvil híbrida de Oracle JET con Oracle Mobile Hub:
  1. Asegúrese de tener 'mcs', 'mcsconf' configurados en la configuración del archivo path_mappings.json. Por ejemplo, estos módulos se pueden cargar desde una sentencia require:
    require(['ojs/ojcore', 'knockout', 'jquery', 'mcs', 'mcsconf', 'ojs/ojknockout', 'ojs/ojfilmstrip', 'ojs/ojpagingcontrol', 'ojs/ojbutton']

    Donde mcs y mcsconf son los nombres de ruta que ha declarado en el objeto requires.config del archivo main.js.

  2. Cargue la configuración de Oracle Mobile Hub en la aplicación:
    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
}

    Donde msc_config es el objeto de configuración definido al configurar la aplicación móvil híbrida de Oracle JET.

  3. Autenticar mediante el objeto Authorization. Por ejemplo, para autenticarse mediante la variable "backend" utilizada en el paso anterior:
    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);
  });

    El método Authorization.authenticate del backend toma dos funciones como parámetros. La primera función se ejecuta si la autenticación es correcta, mientras que la segunda se ejecuta si la autenticación falla.

  4. Llame a la API de Oracle Mobile Hub incluyendo la cabecera de autorización. Debe incluir el token proporcionado en la cabecera de autorización dentro de un objeto de configuración transferido a la llamada AJAX jQuery. Por ejemplo, si desea recuperar datos de una API de REST personalizada de Oracle Fusion Cloud Sales Automation creada en Oracle Mobile Hub:
    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();
    });
}

    En el ejemplo anterior, la variable settings se transfiere a la llamada REST de AJAX jQuery. La variable de configuración contiene un parámetro de cabeceras en el que el parámetro de autorización contiene el token de acceso. Tenga en cuenta también que hay un parámetro crossDomain que se utiliza para indicar que se producirá la comunicación entre dominios.

    En este punto, ha realizado una llamada AJAX. Sin embargo, como opción alternativa, también puede llamar a API personalizadas desde código personalizado.

  5. Muestre los datos recuperados de la llamada de REST. Por ejemplo, puede utilizar un objeto de tira de imágenes de 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;
      };
  }

    Donde <element id> es el elemento HTML donde se mostrarán los datos.

Creación y prueba de la aplicación móvil híbrida de Oracle JET

Antes de ejecutar la aplicación móvil híbrida de Oracle JET por primera vez, debe ejecutar una compilación dirigida a una plataforma móvil.

Ejecute el comando ojet build os para automatizar el proceso de creación y prueba. Ejecute el siguiente comando en el símbolo del sistema 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"]

Donde [android|ios|windows] es la plataforma en la que desea probar la aplicación. Por ejemplo, si estás probando en un emulador de Android, el comando es: 

ojet build android

Una vez finalizada la creación, ejecute la aplicación mediante el comando 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"]
Donde [android|ios|windows] es la plataforma en la que desea probar la aplicación. Por ejemplo, si estás probando en un emulador de Android, el comando es:
ojet serve android