Entwicklung einer Oracle JET-Hybridanwendung für Oracle Mobile Hub

Sie können hybride mobile Anwendungen mit Oracle JET erstellen und in Oracle PaaS-Lösungen wie Oracle Mobile Hub integrieren.

Bevor Sie beginnen

Bevor Sie mit der Entwicklung einer JET-Anwendung beginnen, müssen Sie die folgenden Voraussetzungen erfüllen:

• Stellen Sie sicher, dass Sie Ihre Hybrid Mobile Development-Umgebung konfiguriert haben.
• Stellen Sie sicher, dass Sie Zugriff auf eine Oracle Mobile Hub-Instanz haben.

Architektur von Oracle JET Hybrid Mobile Applications

Eine hybride mobile Oracle JET-Anwendung ist eine Single Page Application (SPA), die von einer einzelnen HTML-Seite oder -Ansicht bedient wird. Dies bedeutet, dass mehrere Ansichten in separaten Dateien vorhanden sein können, die Anwendung sie jedoch immer als eine einzelne Webseite wiedergibt. Dieses Verhalten ähnelt einer nativen Anwendung (eine Anwendung, die mit nativen BS-APIs entwickelt wurde) und bietet somit eine flüssige Benutzererfahrung.

Apache Cordova ist ein Open-Source-Framework für die mobile Entwicklung, das standardmäßige Webtechnologien wie HTML5, CSS3 und JavaScript für die plattformübergreifende Entwicklung unterstützt. Hybride mobile Oracle JET-Anwendungen werden in Cordova-Wrappern ausgeführt, die auf verschiedene mobile Plattformen wie iOS, Android und Windows ausgerichtet sind.

Das folgende Bild zeigt die typische Architektur einer Cordova-Hybridanwendung:

Beschreibung der Abbildung cordova_arch.png

cordova_arch-oracle.zip

In einer Cordova-Architektur wird die Anwendungsansicht (in der Regel aus HTML-, JS- und CSS-Dateien) auf einem nativen Betriebssystem-Wrapper angezeigt, der intern als Webbrowser funktioniert. Die Cordova-API bietet auch Plug-ins für die Kommunikation mit mobilen Betriebssystemen über Core-BS-APIs. Mit diesen APIs können Sie auf mobile Betriebssystemkomponenten wie Kontakte, Adressliste, Lokalisierung, Benachrichtigungen und mehr zugreifen.

Oracle JET Hybrid Mobile-Anwendung konfigurieren

Bevor Sie den Code für Ihre hybride mobile Anwendung schreiben, müssen Sie Ihre hybride mobile Anwendung konfigurieren. Verwenden Sie dazu den Befehl ojet create, um die Ordnerstruktur und die Gesamtvorlage für Ihre Anwendung zu scaffoldieren.

So konfigurieren Sie Ihre hybride mobile Anwendung:

1. Stellen Sie sicher, dass Sie das Oracle JET-Tooling Framework installiert haben.
2. Scaffold der Anwendung, indem Sie den Befehl ojet create [directory] --hybrid in der Node.js-Konsole ausführen, um eine Hybridanwendungsvorlage für Android, iOS und Windows zu generieren:

   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]

   Dieses Beispiel zeigt, wie eine hybride Anwendungsvorlage für Android, iOS und Windows generiert wird:

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

3. Fügen Sie die Cordova-Plug-ins hinzu:
   Um Ihre hybride mobile Anwendung in Oracle Mobile Hub zu integrieren, müssen Sie die folgenden Plug-ins hinzufügen:

   • oracle-mobile-cloud-cookies: Ein Plug-in zur Authentifizierung mit Oracle Mobile Hub über SSO

   • cordova-plugin-inappbrowser: Ein Plugin zur Bereitstellung einer Webbrowser-Ansicht, erforderlich für die Anzeige der SSO-Anmeldeseite

   So fügen Sie diese Plug-ins hinzu:

   1. Melden Sie sich bei Oracle Mobile Hub an.
   2. Klicken Sie auf Anwendungen.
   3. Klicken Sie auf SDK-Downloads. Dies führt Sie zur Seite SDK-Downloads.
   4. Klicken Sie auf "Cordova SDK herunterladen".
   5. Dekomprimieren Sie das Paket.
   6. Suchen Sie im extrahierten Package nach oracle_mobile_js_sdk_cookies_cordova_plugin[VERSION].zip. Dort finden Sie das Plug-in oracle-mobile-cloud-cookies.
   7. Zum Installieren von oracle-mobile-cloud-cookies plugin dekomprimieren Sie oracle_mobile_js_sdk_cookies_cordova_plugin[VERSION].zip, und führen Sie den folgenden cordova-Befehl aus:

      cordova plugin add <PLUGIN_FOLDER>

      Dabei ist <PLUGIN_FOLDER> der Pfad zum unverpackten Plug-in.

   8. Um die cordova-plugin-inappbrowser plugin zu installieren, führen Sie den folgenden cordova-Befehl aus, um sie Ihrem Projekt hinzuzufügen:

      cordova plugin add cordova-plugin-inappbrowser –save

4. Fügen Sie das Oracle Mobile Hub Cordova-SDK zu Ihrer Anwendung hinzu, kopieren Sie msc.js, msc.min.js und oracle_mobile_cloud_config.js in ein Verzeichnis, in dem Sie die JavaScript-Dateien speichern.
5. Aktualisieren Sie die Pfadzuordnungen für mcs und mcs_cloud_config im Abschnitt requirejs.config der Datei 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. Aktualisieren Sie oracle_mobile_cloud_config.js mit den Details Ihres mobilen Backends:

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

Integrieren Sie Ihre Oracle JET Hybrid-App mit Oracle Mobile Hub

Sie können Ihre Oracle JET-Hybridanwendung mit einem mobilen Backend-Service wie Oracle Mobile Hub integrieren, um REST-Daten aus föderierten Oracle SaaS-Anwendungen wie Oracle Fusion Cloud Sales Automation abzurufen.

So integrieren Sie Ihre Oracle JET-Hybridanwendung mit Oracle Mobile Hub:

1. Stellen Sie sicher, dass in der Dateikonfiguration path_mappings.json 'mcs', 'mcsconf' konfiguriert ist. Beispiel: Diese Module können aus einer require-Anweisung geladen werden:

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

   Dabei sind mcs und mcsconf die Pfadnamen, die Sie unter dem Objekt requires.config in der Datei main.js deklariert haben.

2. Laden Sie die Oracle Mobile Hub-Konfiguration in Ihre Anwendung:

   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
   }

   Dabei ist msc_config das Konfigurationsobjekt, das Sie bei der Konfiguration der hybriden Oracle JET-Mobilanwendung definiert haben.

3. Authentifizierung mit dem Objekt Authorization. Beispiel: So authentifizieren Sie sich mit der im vorherigen Schritt verwendeten "Backend"-Variablen:

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

   Die Methode Authorization.authenticate des Backends verwendet zwei Funktionen als Parameter. Die erste Funktion wird ausgeführt, wenn die Authentifizierung erfolgreich ist, die zweite, wenn die Authentifizierung nicht erfolgreich verläuft.

4. Rufen Sie die Oracle Mobile Hub-API auf, indem Sie den Autorisierungsheader aufnehmen. Sie müssen das angegebene Token in den Autorisierungsheader in ein Einstellungsobjekt aufnehmen, das an den AJAX-Aufruf jQuery übergeben wird. Beispiel: Wenn Sie Daten aus einer in Oracle Mobile Hub erstellten benutzerdefinierten REST-API von Oracle Fusion Cloud Sales Automation abrufen möchten:

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

   Im vorherigen Beispiel wird die Variable settings an den AJAX-REST-Aufruf jQuery übergeben. Die Einstellungsvariable enthält einen Headerparameter, in dem der Autorisierungsparameter das Zugriffstoken enthält. Beachten Sie außerdem, dass ein Parameter crossDomain vorhanden ist, der angibt, dass eine domainübergreifende Kommunikation stattfindet.

   An dieser Stelle haben Sie einen AJAX-Anruf getätigt. Alternativ können Sie jedoch auch benutzerdefinierte APIs aus benutzerdefiniertem Code aufrufen.

5. Zeigen Sie die vom REST-Aufruf abgerufenen Daten an. Beispiel: Sie können ein Oracle JET-Filmstreifenobjekt verwenden:

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

   Dabei ist <element id> das HTML-Element, in dem die Daten angezeigt werden.

Erstellen und testen Sie Ihre Oracle JET Hybrid-App

Bevor Sie Ihre Oracle JET-Hybrid-App zum ersten Mal ausführen, müssen Sie einen Build ausführen, der auf eine mobile Plattform ausgerichtet ist.

Führen Sie den Befehl ojet build os aus, um den Erstellungs- und Testprozess zu automatisieren. Führen Sie den folgenden Befehl in der Node.js-Befehlszeile aus:

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

Dabei ist [android|ios|windows] die Plattform, auf der Sie Ihre Anwendung testen möchten. Wenn Sie beispielsweise einen Android-Emulator testen, lautet der Befehl:

ojet build android

Nachdem der Build abgeschlossen ist, führen Sie die Anwendung mit dem Befehl ojet serve os aus:

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

Dabei ist [android|ios|windows] die Plattform, auf der Sie Ihre Anwendung testen möchten. Wenn Sie beispielsweise einen Android-Emulator testen, lautet der Befehl:

ojet serve android