Sviluppa un'applicazione ibrida Oracle JET per Oracle Mobile Hub

Puoi creare applicazioni mobile ibride utilizzando Oracle JET e integrarle con le soluzioni Oracle PaaS come Oracle Mobile Hub.

Operazioni preliminari

Prima di iniziare a sviluppare un'applicazione JET, è necessario soddisfare i prerequisiti riportati di seguito.

• Assicurarsi di aver configurato l'ambiente di sviluppo mobile ibrido.
• Assicurarsi di avere accesso a un'istanza di Oracle Mobile Hub.

Informazioni sull'architettura delle applicazioni Oracle JET Hybrid Mobile

Un'applicazione mobile ibrida Oracle JET è un'applicazione a pagina singola (SPA) servita da una singola pagina o vista HTML. Ciò significa che possono esistere più viste su file separati, ma l'applicazione le visualizzerà sempre come una singola pagina Web. Questo comportamento è molto simile a un'applicazione nativa (un'applicazione sviluppata con API OS native), fornendo così un'esperienza utente fluida.

Apache Cordova è un framework di sviluppo mobile open source che supporta tecnologie Web standard come HTML5, CSS3 e JavaScript per lo sviluppo multipiattaforma. Le applicazioni mobile ibride Oracle JET vengono eseguite all'interno di wrapper Cordova destinati a diverse piattaforme mobile come iOS, Android e Windows.

L'immagine seguente illustra l'architettura tipica di un'applicazione ibrida Cordova:

Descrizione dell'immagine cordova_arch.png

cordova_arch-oracle.zip

In un'architettura Cordova, la vista dell'applicazione (in genere composta da file HTML, JS e CSS) viene visualizzata in un wrapper del sistema operativo nativo che funziona internamente come browser Web. L'API Cordova fornisce anche plugin per comunicare con i sistemi operativi mobile tramite le API del sistema operativo core, queste API consentono di accedere ai componenti del sistema operativo mobile come contatti, elenco di indirizzi, localizzazione, notifiche e altro ancora.

Configurare l'applicazione mobile ibrida Oracle JET

Prima di scrivere il codice per l'applicazione mobile ibrida, è necessario configurare l'applicazione mobile ibrida. A tale scopo, utilizzare il comando ojet create per impiantare la struttura delle cartelle e il modello complessivo per l'applicazione.

Per configurare l'applicazione mobile ibrida:

1. Assicurarsi di aver installato la struttura degli strumenti Oracle JET.
2. Sviluppare l'applicazione eseguendo il comando ojet create [directory] --hybrid nella console Node.js per generare un modello di applicazione ibrida per Android, iOS e 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]

   Questo esempio mostra come generare un modello di applicazione ibrida per Android, iOS e Windows:

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

3. Aggiungere i plugin Cordova:
   Per integrare l'applicazione mobile ibrida con Oracle Mobile Hub, è necessario aggiungere i seguenti plugin:

   • oracle-mobile-cloud-cookies: un plugin per l'autenticazione con Oracle Mobile Hub tramite SSO

   • cordova-plugin-inappbrowser: un plugin per fornire una vista del browser Web, necessaria per visualizzare la pagina di login SSO

   Per aggiungere i seguenti plugin:

   1. Eseguire il login a Oracle Mobile Hub.
   2. Fare clic su Applicazioni.
   3. Fare clic su Download SDK. In questo modo, viene visualizzata la pagina Download dell'SDK.
   4. Fare clic su Scarica SDK Cordova.
   5. Estrarre il pacchetto.
   6. Nel package estratto, cercare oracle_mobile_js_sdk_cookies_cordova_plugin[VERSION].zip, dove trovare il plugin oracle-mobile-cloud-cookies.
   7. Per installare oracle-mobile-cloud-cookies plugin, decomprimere oracle_mobile_js_sdk_cookies_cordova_plugin[VERSION].zip ed eseguire il comando cordova seguente:

      cordova plugin add <PLUGIN_FOLDER>

      Dove <PLUGIN_FOLDER> è il percorso del plugin decompresso.

   8. Per installare cordova-plugin-inappbrowser plugin, eseguire il seguente comando cordova per aggiungerlo al progetto:

      cordova plugin add cordova-plugin-inappbrowser –save

4. Aggiungere il kit SDK Cordova Oracle Mobile Hub all'applicazione, copiare msc.js, msc.min.js e oracle_mobile_cloud_config.js in una directory in cui conservare i file JavaScript.
5. Aggiornare i mapping di percorso per mcs e mcs_cloud_config nella sezione requirejs.config del file Oracle JET path_mappings.json.

   
   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. Aggiornare oracle_mobile_cloud_config.js con i dettagli del backend mobile:

   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>"
           }
         }
       }
     }
   };

Integra la tua applicazione mobile ibrida Oracle JET con Oracle Mobile Hub

È possibile integrare l'applicazione ibrida Oracle JET con un servizio backend mobile come Oracle Mobile Hub per recuperare i dati REST dalle applicazioni Oracle SaaS federate come Oracle Fusion Cloud Sales Automation.

Per integrare la tua applicazione mobile ibrida Oracle JET con Oracle Mobile Hub:

1. Accertarsi di avere configurato 'mcs', 'mcsconf' nella configurazione del file path_mappings.json. Ad esempio, questi moduli possono essere caricati da un'istruzione require:

   require(['ojs/ojcore', 'knockout', 'jquery', 'mcs', 'mcsconf', 'ojs/ojknockout', 'ojs/ojfilmstrip', 'ojs/ojpagingcontrol', 'ojs/ojbutton']

   Dove mcs e mcsconf sono i nomi di percorso dichiarati nell'oggetto requires.config nel file main.js.

2. Caricare la configurazione di Oracle Mobile Hub nell'applicazione:

   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
   }

   Dove msc_config è l'oggetto di configurazione definito durante la configurazione dell'applicazione mobile ibrida Oracle JET.

3. Autenticare utilizzando l'oggetto Authorization. Ad esempio, per eseguire l'autenticazione utilizzando la variabile "backend" utilizzata nel passo precedente:

   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);
     });

   Il metodo Authorization.authenticate del backend utilizza due funzioni come parametri. La prima funzione viene eseguita se l'autenticazione riesce, mentre la seconda se l'autenticazione non riesce.

4. Chiamare l'API Oracle Mobile Hub includendo l'intestazione di autorizzazione. È necessario includere il token specificato nell'intestazione di autorizzazione all'interno di un oggetto impostazioni passato alla chiamata AJAX jQuery. Ad esempio, se si desidera recuperare i dati da un'API REST personalizzata di Oracle Fusion Cloud Sales Automation creata all'interno di 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();
       });
   }

   Nell'esempio precedente, la variabile Impostazioni viene passata alla chiamata REST AJAX jQuery. La variabile delle impostazioni contiene un parametro intestazioni in cui il parametro di autorizzazione contiene il token di accesso. Si noti inoltre che esiste un parametro crossDomain utilizzato per indicare che si verificherà una comunicazione tra domini.

   A questo punto, hai effettuato una chiamata AJAX. Tuttavia, come opzione alternativa, puoi anche chiamare le API personalizzate dal codice personalizzato.

5. Visualizza i dati recuperati dalla chiamata REST. Ad esempio, è possibile utilizzare un oggetto pellicola 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;
         };
     }

   Dove <element id> è l'elemento HTML in cui verranno visualizzati i dati.

Crea e testa la tua applicazione mobile ibrida Oracle JET

Prima di eseguire per la prima volta la tua applicazione mobile ibrida Oracle JET, devi eseguire una build destinata a una piattaforma mobile.

Eseguire il comando ojet build os per automatizzare il processo di creazione e test. Nel prompt dei comandi Node.js eseguire il comando:

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

Dove [android|ios|windows] è la piattaforma su cui si desidera eseguire il test dell'applicazione. Ad esempio, se stai testando su un emulatore Android, il comando è:

ojet build android

Una volta completata la build, eseguire l'applicazione utilizzando il 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"]

Dove [android|ios|windows] è la piattaforma su cui si desidera eseguire il test dell'applicazione. Ad esempio, se stai testando su un emulatore Android, il comando è:

ojet serve android