تطوير تطبيق Oracle JET Hybrid لـ Oracle Mobile Hub

تطوير تطبيق مختلط لـ Oracle JET لـ Oracle Mobile Hub

يمكنك تكوين تطبيقات أجهزة محمولة مختلطة باستخدام Oracle JET وتكاملها مع حلول Oracle PaaS مثل Oracle Mobile Hub.

قبل البدء

قبل البدء في تطوير تطبيق JET، يجب استيفاء المتطلبات الأساسية التالية:

تأكد من تكوين بيئة تطوير الأجهزة المحمولة الهجينة لديك.
تأكد من أن لديك حق الوصول إلى طبعة Oracle Mobile Hub.

حول بنية تطبيقات Oracle JET Hybrid Mobile

تطبيق Oracle JET المختلط للأجهزة المتنقلة هو تطبيق صفحة واحدة (SPA) يتم تقديمه من صفحة أو عرض HTML واحد. وهذا يعني أنه يمكن أن توجد طرق عرض متعددة في ملفات منفصلة، ولكن التطبيق سيعرضها دائمًا كصفحة ويب واحدة. يشبه هذا السلوك إلى حد كبير التطبيق الأصلي (تطبيق تم تطويره باستخدام واجهات برمجة تطبيقات نظام التشغيل الأصلية)، مما يوفر تجربة مستخدم سلسة.

Apache Cordova هو إطار تطوير متنقل مفتوح المصدر يدعم تقنيات الويب القياسية مثل HTML5 و CSS3 و JavaScript للتطوير عبر الأنظمة الأساسية. يتم تنفيذ تطبيقات الأجهزة المحمولة الهجينة من Oracle JET داخل مغلفات Cordova التي تستهدف منصات الأجهزة المحمولة المختلفة مثل iOS وAndroid وWindows.

توضح الصورة التالية البنية النموذجية لتطبيق Cordova الهجين:

وصف الشكل التوضيحي cordova_arch.png

cordova_arch-oracle.zip

في Cordova Architecture، يتم عرض طريقة عرض التطبيق (التي تتكون عادة من ملفات HTML وJS وCSS) على مغلف نظام تشغيل أصلي يعمل داخليًا كمتصفح ويب. توفر واجهة برمجة تطبيقات Cordova أيضًا برامج إضافية للتواصل مع أنظمة تشغيل الأجهزة المحمولة من خلال واجهات برمجة تطبيقات نظام التشغيل الأساسية، وتتيح لك واجهات برمجة التطبيقات هذه الوصول إلى مكونات نظام تشغيل الأجهزة المحمولة مثل جهات الاتصال وقائمة العناوين والترجمة والإشعارات والمزيد.

تكوين تطبيق الأجهزة المتنقلة المختلط لـ Oracle JET

قبل كتابة التعليمات البرمجية لتطبيق الأجهزة المتنقلة المختلط، يجب تكوين تطبيق الأجهزة المتنقلة المختلط. ولهذا الغرض، استخدم الأمر ojet create لتغيير هيكل المجلد والقالب العام للتطبيق.

لتكوين تطبيق الهاتف المحمول الهجين:

تأكد من تثبيت إطار أدوات Oracle JET.

سحب التطبيق عن طريق تشغيل الأمر ojet create [directory] --hybrid في وحدة تحكم Node.js لإنشاء قالب تطبيق مختلط لـ 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

إضافة برامج Cordova الإضافية:
لدمج تطبيق الأجهزة المتنقلة المختلط الخاص بك مع Oracle Mobile Hub، تحتاج إلى إضافة البرامج الإضافية التالية:
- ملفات تعريف الارتباط لسحابة oracle-mobile-cloud: برنامج إضافي للتصديق باستخدام Oracle Mobile Hub عبر SSO
- cordova-plugin-inappbrowser: برنامج إضافي لتوفير عرض متصفح ويب، مطلوب لعرض صفحة تسجيل الدخول الموحد
لإضافة هذه الملحقات:
1. سجل الدخول إلى Oracle Mobile Hub.
2. انقر فوق Applications.
3. انقر على تنزيلات SDK. ينتقل بك هذا إلى صفحة تنزيلات SDK.
4. انقر على Download 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
```
إضافة Oracle Mobile Hub Cordova SDK إلى التطبيق، ونسخ msc.js وmsc.min.js وoracle_mobile_cloud_config.js في دليل حيث ستحتفظ بملفات JavaScript.

تحديث تعيينات المسار لـ mcs وmcs_cloud_config في قسم requirejs.config بملف 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', '$']
        }
    }
});

تحديث 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 Hybrid Mobile مع Oracle Mobile Hub

يمكنك دمج تطبيق Oracle JET المختلط مع خدمة الأجهزة المتنقلة الخلفية مثل Oracle Mobile Hub لإحضار بيانات REST من تطبيقات Oracle SaaS الموحدة مثل Oracle Fusion Cloud Sales Automation.

لدمج تطبيق Oracle JET الهجين للأجهزة المحمولة مع Oracle Mobile Hub:

تأكد من تكوين 'mcs' و'mcsconf' في تكوين الملف path_mappings.json. على سبيل المثال، يمكن تحميل هذه الوحدات النمطية من جملة require:
```
require(['ojs/ojcore', 'knockout', 'jquery', 'mcs', 'mcsconf', 'ojs/ojknockout', 'ojs/ojfilmstrip', 'ojs/ojpagingcontrol', 'ojs/ojbutton']
```
حيث mcs وmcsconf هما اسما المسار اللذان قمت بتعريفهما ضمن كائن requires.config في ملف main.js.

تحميل تكوين 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.

التصديق باستخدام الكائن Authorization. على سبيل المثال، للتصديق باستخدام متغير "backend" المستخدم في الخطوة السابقة:
```
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 الخاص بالواجهة الخلفية دالتين كمعلمات. يتم تنفيذ الدالة الأولى في حالة نجاح التصديق، بينما يتم تنفيذ الدالة الثانية في حالة فشل التصديق.
استدعاء واجهة برمجة تطبيقات Oracle Mobile Hub من خلال تضمين رأس الاعتماد. يجب تضمين المقطع المحدد في رأس الاعتماد ضمن كائن الإعدادات الذي تم تمريره إلى استدعاء jQuery AJAX. على سبيل المثال، إذا كنت تريد إحضار بيانات من Oracle Fusion Cloud Sales Automation مخصص REST API تم تكوينه في 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();
    });
}
```
في المثال السابق، يتم تمرير متغير الإعدادات إلى استدعاء jQuery AJAX REST. يحتوي متغير الإعدادات على معلمة عناوين تحتوي فيها معلمة الاعتماد على الرمز المميز للوصول. لاحظ أيضًا وجود معلمة crossDomain تُستخدم للإشارة إلى حدوث اتصال عبر المجالات.

عند هذه النقطة، قمت بإجراء مكالمة AJAX. على أنه كخيار بديل، يمكنك أيضًا استدعاء واجهات برمجة التطبيقات المخصصة من تعليمات برمجية مخصصة.

عرض البيانات التي تم سحبها من استدعاء 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 Hybrid Mobile

قبل تنفيذ تطبيق 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"]

ojet serve android