Développement d'une application hybride Oracle JET pour Oracle Mobile Hub

Vous pouvez créer des applications mobiles hybrides à l'aide d'Oracle JET et les intégrer aux solutions Oracle PaaS telles qu'Oracle Mobile Hub.

Avant de commencer

Avant de commencer à développer une application JET, vous devez respecter les prérequis suivants :

• Assurez-vous d'avoir configuré votre environnement de développement mobile hybride.
• Assurez-vous que vous avez accès à une instance Oracle Mobile Hub.

A propos de l'architecture des applications mobiles hybrides Oracle JET

Une application mobile hybride Oracle JET est une application à page unique (SPA) fournie à partir d'une page ou d'une vue HTML unique. Cela signifie que plusieurs vues peuvent exister dans des fichiers distincts, mais l'application les affichera toujours sous la forme d'une seule page Web. Ce comportement est très similaire à une application native (une application développée avec des API de système d'exploitation natives), offrant ainsi une expérience utilisateur fluide.

Apache Cordova est un framework de développement mobile open source qui prend en charge les technologies Web standard telles que HTML5, CSS3 et JavaScript pour le développement multiplateforme. Les applications mobiles hybrides Oracle JET s'exécutent dans des wrappers Cordova destinés à différentes plates-formes mobiles comme iOS, Android et Windows.

L'image suivante illustre l'architecture typique d'une application hybride Cordova :

Description de l'image cordova_arch.png

cordova_arch-oracle.zip

Dans une architecture Cordova, la vue de l'application (généralement composée de fichiers HTML, JS et CSS) est affichée sur un wrapper de système d'exploitation natif qui fonctionne en interne comme un navigateur Web. L'API Cordova fournit également des plugins pour communiquer avec les systèmes d'exploitation mobiles via les API Core OS, ces API vous permettent d'accéder aux composants du système d'exploitation mobile tels que les contacts, la liste d'adresses, la localisation, les notifications, etc.

Configuration de l'application mobile hybride Oracle JET

Avant d'écrire le code de votre application mobile hybride, vous devez configurer votre application mobile hybride. A cette fin, utilisez la commande ojet create pour mettre à l'échelle la structure de dossiers et le modèle global de votre application.

Pour configurer votre application mobile hybride :

1. Assurez-vous que vous avez installé la structure d'outils Oracle JET.
2. Faites évoluer l'application en exécutant la commande ojet create [directory] --hybrid dans la console Node.js pour générer un modèle d'application hybride pour Android, iOS et 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]

   Cet exemple montre comment générer un modèle d'application hybride pour Android, iOS et Windows :

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

3. Ajoutez les modules d'extension Cordova :
   Pour intégrer votre application mobile hybride à Oracle Mobile Hub, vous devez ajouter les modules d'extension suivants :

   • oracle-mobile-cloud-cookies : module d'extension pour l'authentification auprès d'Oracle Mobile Hub via SSO

   • cordova-plugin-inappbrowser : Un plugin pour fournir une vue de navigateur Web, nécessaire pour afficher la page de connexion SSO

   Pour ajouter ces modules d'extension :

   1. Connectez-vous à Oracle Mobile Hub.
   2. Cliquez sur Applications.
   3. Cliquez sur Téléchargements de kit SDK. Cette action vous renvoie à la page Téléchargements de kit SDK.
   4. Cliquez sur Télécharger le kit SDK Cordova.
   5. Décompressez le package.
   6. Dans le package extrait, recherchez oracle_mobile_js_sdk_cookies_cordova_plugin[VERSION].zip, où vous pouvez trouver le module d'extension oracle-mobile-cloud-cookies.
   7. Pour installer le fichier oracle-mobile-cloud-cookies plugin, décompressez oracle_mobile_js_sdk_cookies_cordova_plugin[VERSION].zip et exécutez la commande cordova suivante :

      cordova plugin add <PLUGIN_FOLDER>

      Où <PLUGIN_FOLDER> est le chemin du module d'extension décompressé.

   8. Pour installer cordova-plugin-inappbrowser plugin, exécutez la commande cordova suivante pour l'ajouter à votre projet :

      cordova plugin add cordova-plugin-inappbrowser –save

4. Ajoutez le kit SDK Cordova Oracle Mobile Hub à votre application, copiez msc.js, msc.min.js et oracle_mobile_cloud_config.js dans un répertoire dans lequel vous conserverez vos fichiers JavaScript.
5. Mettez à jour les correspondances de chemin pour mcs et mcs_cloud_config dans la section requirejs.config du fichier path_mappings.json 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. Mettez à jour oracle_mobile_cloud_config.js avec les détails du back-end 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>"
           }
         }
       }
     }
   };

Intégrez votre application mobile hybride Oracle JET à Oracle Mobile Hub

Vous pouvez intégrer votre application hybride Oracle JET à un service mobile back-end tel qu'Oracle Mobile Hub pour extraire des données REST à partir d'applications Oracle SaaS fédérées telles qu'Oracle Fusion Cloud Sales Automation.

Pour intégrer votre application mobile hybride Oracle JET à Oracle Mobile Hub, procédez comme suit :

1. Assurez-vous que 'mcs', 'mcsconf' sont configurés dans la configuration du fichier path_mappings.json. Par exemple, ces modules peuvent être chargés à partir d'une instruction require :

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

   Où mcs et mcsconf sont les noms de chemin déclarés sous l'objet requires.config dans votre fichier main.js.

2. Chargez la configuration d'Oracle Mobile Hub dans votre application :

   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
   }

   Où msc_config est l'objet de configuration que vous avez défini lors de la configuration de votre application mobile hybride Oracle JET.

3. S'authentifier à l'aide de l'objet Authorization. Par exemple, pour vous authentifier à l'aide de la variable "back-end" utilisée à l'étape précédente :

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

   La méthode Authorization.authenticate du back-end prend deux fonctions en tant que paramètres. La première fonction s'exécute si l'authentification réussit, tandis que la seconde s'exécute si l'authentification échoue.

4. Appelez l'API Oracle Mobile Hub en incluant l'en-tête d'autorisation. Vous devez inclure le jeton indiqué dans l'en-tête d'autorisation dans un objet de paramètres transmis à l'appel AJAX jQuery. Par exemple, si vous voulez extraire des données à partir d'une API REST personnalisée Oracle Fusion Cloud Sales Automation créée dans 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();
       });
   }

   Dans l'exemple précédent, la variable settings est transmise à l'appel REST AJAX jQuery. La variable de paramètres contient un paramètre d'en-tête dans lequel le paramètre d'autorisation contient le jeton d'accès. Notez également qu'un paramètre crossDomain est utilisé pour indiquer que la communication interdomaine se produira.

   À ce stade, vous avez fait un appel AJAX. Toutefois, vous pouvez également appeler des API personnalisées à partir de code personnalisé.

5. Affichez les données extraites de l'appel REST. Par exemple, vous pouvez utiliser un objet pellicule 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;
         };
     }

   Où <element id> est l'élément HTML où les données seront affichées.

Créez et testez votre application mobile hybride Oracle JET

Avant d'exécuter votre application mobile hybride Oracle JET pour la première fois, vous devez exécuter une build ciblée pour une plate-forme mobile.

Exécutez la commande ojet build os pour automatiser le processus de création et de test. Exécutez la commande suivante dans l'invite de commande 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"]

Où [android|ios|windows] est la plate-forme sur laquelle vous voulez tester votre application. Par exemple, si vous testez sur un émulateur Android, la commande est la suivante :

ojet build android

Une fois la compilation terminée, exécutez l'application à l'aide de la commande 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"]

Où [android|ios|windows] est la plate-forme sur laquelle vous voulez tester votre application. Par exemple, si vous testez sur un émulateur Android, la commande est la suivante :

ojet serve android