دليل مستخدم BPA إنشاء MFE مخصص الإصدار 4.1.2

إنشاء MFE المخصص

MicroFrontEnd (MFE) هو نمط معماري حيث يتم تكوين أجزاء مختلفة من صفحات واجهة المستخدم (UI) في وقت الإنشاء أو وقت التشغيل. ويتم تطوير كل حاوية متعددة الخدمات بشكل مستقل.

إنشاء MFE

يمكن تحميل التطبيقات التي تم تطويرها باستخدام أي إطار عمل على هيئة MFE. القسم التالي هو مثال على إضافة تطبيق زاوي على هيئة MFE.

إنشاء تطبيقات زاوية

1. قم بتشغيل الأمر التالي لإنشاء تطبيق زاوي يسمى test-mfe.

ng new test-mfe — routing —style=scss

2. قم بتشغيل الأمر cd للتبديل إلى test-mfe.
3. قم بتشغيل الأمر التالي لإضافة منفذ SPA واحد في test-mfe:

ng add single-spa-angular@7 —project test-mfe

ملاحظة: يتم إستخدام إصدار متوافق من Angular 14 و single-spa-angular@7.

4. عينت الميناء للتنمية المحلية أثناء إستدعاء الأمر السابق. تتم إضافة نفس الإعداد ك deployUrl في "angular.json".

ملاحظة: إعداد deployUrl خاص بالتطوير المحلي فقط.

"deployUrl": "http://localhost:4201/"

إنشاء تطبيقات زاوية في NX Monorepo

1. قم بتشغيل الأمر التالي لإنشاء تطبيق زاوي داخل مساحة عمل امتدادات NRWL (NX):

npx create-nx-workspace@15.0.0 — إعداد مسبق=زاوي —npmScope=cisco-bpa-platform

2. قم بتوفير مدخلات المستخدم كما هو موضح في المثال التالي:

يتم إنشاء مساحة عمل BPA-test-mfe NX باستخدام التطبيق الزاوي BPA-test-mfe.

3. تطبيق المخططات "أحادية المنبع الزاوية" لتكوين التطبيق الزاوي الذي تم إنشاؤه حديثا. يتغير الإصدار حسب الإصدار الزاوي.
4. قم بتشغيل الأمر cd للتبديل إلى test-mfe.
5. قم بتشغيل الأمر التالي لإضافة مصدر واحد في bpa-test-mfe:

npm install single-spa-angular@7 \--legacy-peer-deps && npx nx g
single-spa-angular:ng-add \--project bpa-test-mfe

يتم إنشاء الملفات التالية وتحديثها:

6. عينت الميناء للتنمية المحلية أثناء إستدعاء الأمر السابق. تتم إضافة نفس الإعداد ك deployUrl في "project.json".

ملاحظة: إعداد deployUrl خاص بالتطوير المحلي فقط.

"deployUrl": "http://localhost:4201",

تغييرات شائعة للتطبيقات الزاوية و NX الزاوية

التحقق من إصدار WebPack

قم بتحديث الإصدار @angular-builders/custom-webpack" المقابل للإصدار الزاوي. يستخدم الإصدار الوارد في المثال التالي للتطبيقات الزاوية 14.

"@angular-builders/custom-webpack": "14.1.0",

تحديث المحدد

قم بتحديث القالب باستخدام محدد فريد "<app-test-mfe-root>" في ./src/main.single-spa.ts.

تحديث المحدد في المكون الجذر

قم بتحديث نفس اسم المحدد "<app-test-mfe-root>" في ./src/app/app.component.ts.

تثبيت نظام JS-Web-interop

يتم إستخدام حزمة "نظام NPM-Web-interop" لتعيين المسار العام للأصول بشكل ديناميكي.

systemjs-webpack-interop": "^2.3.7",

قم بتثبيت "systemsjs-web-interop" وأضف السطر أدناه كأول بيان إستيراد في الملف "main.single-spa.ts".

يجب أن يكون SystemJSmoduleName فريدا وأن يتم إستخدامه كاسم يعرف MFE كما هو موضح أعلاه. ويساعد التغيير المذكور أعلاه على حل مشكلة الأصول المحملة ببطء من المضيف الملائم لوزارة المالية.

تحديث المسار

قم بتضمين المسارات الخاصة بالتطبيق في ملف "app.route.ts" الخاص بالتطبيق الزاوي الجديد.

ملاحظة: يجب تضمين المسار التالي إلى "app.routes.ts".

{ path: '**',  component: EmptyRouteComponent }

تغييرات الخدمة بالغة الصغر لتطبيقات MFE المدمجة

تقترن معظم تطبيقات واجهة المستخدم بخدمة مصغرة حسب التصميم. يجب تنفيذ الخطوات التالية في الأقسام أدناه للخدمة الدقيقة المقترنة لتحميل تطبيق واجهة المستخدم المقترنة كMFE.

تعريف تفاصيل MFE

1. قم بإنشاء ملف "mfe.json" في microservice/src/config/mfe.json.

[
    {
        "layoutenabled" : true,
        "name" : "@cisco-bpa-platform/test-mfe-root",
        "type": "application", 
        "path": "ex/test-mfe", 
        "display_name": "Test MFE", 
        "menu_path": "Application", 
        "custom": true, 
        "default": false, 
        "distribution_path": "/assets/cisco-bpa-platform/mw-device-manager/test-mfe/main.js", 
        "version": "4.1.0-501"
    }
]

2. أضف تفاصيل ميزة MFE كما هو موضح أدناه:

• مخصص: الإشارة إلى ما إذا كان هذا التطبيق مخصصا
• Layout_enabled: تمكين هذه السمة إذا كان مطلوب رأس
• الاسم: الاسم الفريد لتطبيق MFE
• Display_name: الاسم المعروض كعنصر قائمة في التنقل الجانبي
• النوع: الإشارة إلى تطبيق MFE
• Menu_path: الإشارة إلى قائمة التنقل التي يتم بموجبها إضافة تطبيق MFE كعنصر قائمة؛ يعمل بالاقتران مع سمة مخصصة
• Distribution_Path: يشير إلى الملف الثابت الذي يحمل تطبيق MFE
• المسار: يشير إلى مسار URL المقترن به تطبيق MFE
• الافتراضي: في حالة التعيين إلى true، يجب ألا يكون المسار موجودا؛ إذا تم تعيينه إلى خطأ، يكون المسار موجودا

تسجيل MFE

إستدعاء نقطة نهاية API أساسية (على سبيل المثال، POST MFE/apps) لضم MFE (MFE) الخاصة. لتبسيط العملية، يتم إنشاء أسلوب أداة مساعدة AddMfeApps لقبول معلومات MFE. لتسجيل تفاصيل MFE المعرفة في ملف BPA "mfe.json".

1. قم باستيراد mfeHelper من التطبيق الشائع في الخدمة الدقيقة "app.js".

const { mfeHelper } = require('@cisco-bpa-platform/mw-util-common-app');

2. تسجيل تفاصيل MFE باستخدام الأسلوب addMfeApps(). وهذا يضيف إدخالا في مجموعة "mongo db core_db -> mfe_apps".

MFE جاهز للاختبار.

إختبار MFE المخصص

الإعداد المحلي

1. قم بإنشاء تطبيق MFE.
2. قم بتحميل توزيع التطبيقات الزاوي في مجلد الأصول الخاص بالحاوية التي تخدم الخدمة الدقيقة المقابلة (على سبيل المثال، MFE-app/dist/:/home/node/app/asset).
3. قم بإعادة تشغيل حاوية الخدمة الدقيقة.
4. قم بتحديث المستعرض.

تغييرات الإنشاء

1. أثناء عملية إنشاء الصورة، قم بتحديث Dockerfile لحزم توزيع التطبيق الزاوي في مجلد الأصول داخل الحاوية. يعرض التنقل الجانبي قائمة إختبار MFE.
2. انقر فوق قائمة إختبار MFE لتحميل MFE (عنوان URL https://<host>/ex/test-mfe).

ملاحظة: لا يتم عرض التنقل الجانبي عند تحميل MFE الجديد لأنه غير مدمج في MFE الجديد.

تمكين التنقل الجانبي

1. قم بإنشاء ملف جديد في مسار test-mfe/src/types/decl.d.ts.
2. إضافة سطر الإقرار التالي:

declare module '@cisco-bpa-platform/utility-state';

3. افتح "test-mfe/extra-webpack.config.js" وأضف config.externalals = ['@cisco-bpa-platform/utility-state'].

تحدد الخطوات أعلاه @cisco-bpa-platform/utility-state وتخطي خطأ الاستيراد.

4. تحقق من التبعيات التالية وقم بتثبيتها:
   • "@angular/cdk: "~14.2.7"
   • "@angular/material": "~14.2.5"
   • "@angular/localize: "^14.2.6"
   • "@cisco-bpa-platform/cxui-components": "4.0.1-1003 "
   • "@cisco-bpa-platform/data-access-services": "4.1.1-1003 "
   • "@cisco-bpa-platform/login": "4.0.3-1002 "
   • "@cisco-bpa-platform/shared-library": "4.0.1-1001 "
   • "@cisco-bpa-platform/spogui-components": "4.1.1-1005 "
   • "@cisco-bpa-platform/ui-shared-components": "4.1.1-1005 "
   • "@cisco-bpa-platform/util: "4.0.1-1002 "
   • "@ngrx/component-store: "~14.0.0"
   • "@ngrx/التأثيرات": "~14.0.0"
   • "@ngrx/entity": "~14.0.0"
   • "@ngrx/router-store: "~14.0.0"
   • "@ngrx/store: "~14.0.0"
   • "موفر الملفات": "^2.0.5"
   • تبعيات التطوير
   • "@types/file-saver: "^2.0.7"

ملاحظة: يجب إستخدام الإصدارات الصحيحة لجميع مكتبات أنظمة Cisco-BPA الأساسية.

5. قم بتحديث الملفات التالية على مستوى الجذر كما هو موضح أدناه:
   • "app.component.html"
   • "app.component.ts"

   import { Component, HostListener } from @angular/core';
   import { Router } from @angular/router';
   import { Observable } from 'rxjs';
   import { Loaderservice } from '@cisco-bpa-platform/data-access-services/auth'; 
   @Component({
       selector: 'app-test-mfe-root',
       templateUrl : '. /app. component. html',
       styleUrls: ['./app.component.scss'] 
   })
   export class AppComponent {
       title = 'test-mfe';
       showLoader = false;
       loadingSpinner$: Observable
         
         
           = this.loaderService.spinnerObsv$; leftNavWidth = ['50px', '250px']; isExpanded = false; innerWidth: any; innerHeight: any; constructor(public router: Router, public loaderservice: Loaderservice, ) { this.onResize(); } @HostListener('window:resize', ['$event']) onResize() { this.innerWidth = window.innerWidth; this.innerHeight = (window.innerHeight - 73); } shareExpandStatus (event: boolean) { this.isExpanded = event; } } 
         

   • "app.module.ts"

   import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
   import { NgModule } from '@angular/core' ;
   import { BrowserModule } from '@angular/platform-browser';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { LoaderModule } from '@cisco-bpa-platform/cxui-components/loader';
   import { AuthEffects, Authlnterceptor, authReducer } from '@cisco-bpa-platform/login/feature-login';
   import { SideNavModule } from '@cisco-bpa-platform/spogui-components/side-nav';
   import { EffectsModule } from '@ngrx/effects';
   import { StoreModule } from '@ngrx/store';
   import { environment } from '../environments/environment';
   import { AppComponent } from './app.component';
   import { AppRoutingModule } from './app-routing.module';
   
   @NgModule({ 
       declarations : [AppComponent], 
       imports: [BrowserModule, AppRoutingModule, HttpClientModule, 
           BrowserAnimationsModule, 
           HttpClientModule, 
           StoreModule. forRoot({ ['auth']: authReducer }, { 
               runtimechecks: {
                   strictStatelmmutability: false, 
                   strictActionlmmutability: false 
               }
           }),
           EffectsModule.forRoot([AuthEffects]), LoaderModule, SideNavModule], 
       providers: [
           { provide: ‘config’, useValue: { apiUrl: environment .apiUrl, mfa: environment .mfa } }, 
           {
               provide: HTTP_INTERCEPTORS, 
               useClass: Authlnterceptor, 
               multi: true,
           },
       ], 
       bootstrap: [AppComponent] 
   }) 
   export class AppModule { }

   • "Environment.prod.ts"

   const URL = `${i window.location.href.substring(0, window.location.href.lastIndexOf('ex'))}bpa` ;
   export const environment = { 
       production: true, 
       appTitle: "BPA | ”, 
       appName: "Business Process Automation”, 
       apiurl: `${URL}`, 
       assetsUrl: "./assets”, 
       packageUr1: "./assets/packages", 
       mfa: {
           enabled: false,
           o t p_u r 1 : 'https://ssologon-prd.sm.bankofamerica.com/ssoconnect/sendOTP.htm1' 
       }, 
       sync: {
           groups: false, 
           users: false 
       }, 
       autoRef reshlnterval : 60000, 
       showFormBuilderListltems: false, 
       deploymentType: "not_on_prem"
   };

   • "بيئة.ts"

   const HOSTNAME = window.location.hostname;
   const URL = `http ://${HOSTNAME}: 8000`;
   export const environment = { 
       production: false, 
       appTitle: "BPA | ", 
       appName: "Business Process Automation", 
       apiUrl: `${URL}`, 
       packageUrl: `http://${HOSTNAME}:9090/assets/packages`, 
       mfa : {
           enabled: false, 
           otp_url: 'https://ssologon-prd.sm.bankofamerica.com/ssoconnect/sendOTP.html' 
       }, 
       sync: {
           groups: false, 
           users: false   
       },
       autoRefreshinterval: 60000, 
       showFormBuilderListltems: false, 
       deploymentType: "not_on_prem"
   };

والتنقل الجانبي جاهز للاختبار.

إضافة مسار جديد في MFE

1. قم بإنشاء مكونات comp-one و comp-2.
2. قم باستيراد هذه المكونات في ملف التوجيه.

import { CompOneComponent } from './comp-one/comp-one.component'; 
import { CompTwoComponent } from './comp-two/comp-two. component';

3. قم بتعريف مسار البادئة.

const includePath = window.location.pathname.substring(1, window.location.pathname.lastIndexOf('/ex')); 
let prefixPath = 'ex';
if (includePath.length > 1) {
    prefixPath = `${includePath}/${prefixPath}`
}

4. تحديد المسارات. وضع المسار الافتراضي كالأخير.

const routes: Routes = [
    { path: `$iprefixPath}/test-mfe/compone`, component: CompOneComponent },
    { path: `${prefixPath}/test-mfe/comptwo`, component: CompTwoComponent }, 
    { path: '**', component: EmptyRouteComponent }
];

5. راجع الرمز الكامل.

تجسيد قائمة متداخلة لتطبيقات مخصصة

يمكن عرض قائمة متداخلة من تطبيق مخصص. يوضح هذا القسم الخطوات المطلوبة لإعداد مستند تسجيل MFE. وقد استحدثت الخصائص التالية لخدمة هذا الغرض:

• المستوى: يقبل الأرقام، بدءا من واحد؛ يزداد العدد طبقا لعدد القائمة وكلما زاد المستوى؛ يجب تسجيل المستويات الأدنى في BPA أولا
• الوالدون: يخزن قيمة خاصية show_name الأصلية التي يجب أن تعرض القائمة الحالية تحتها

مثال لقائمة متداخلة تم إنشائها لتطبيق إختبار MFE المخصص MFE:

لعرض قائمة متداخلة:

1. إضافة قيم صحيحة للمستوى، المسار، والخصائص الأصل.

"layout_enabled": true,
"name": "@cisco-bpa-platform/test-mfe-root", 
"type": "application", 
"display_name": "Test MFE", 
"menu_path": "Application", 
"custom": true, 
"default": false, 
"level": 1, 
"distribution_path": "/assets/cisco-bpa-platform/mw-device-manager/test-mfe/main.js", 
"version": "4.1.0-501"

يجب ألا تكون خاصية المسار موجودة إذا كانت القائمة تحتوي على قوائم فرعية. يشير المستوى 1 إلى أنه يجب تسجيل هذه القائمة أولا.

"layout_enabled": true,
"name": "@cisco-bpa-platform/test-mfe-root", 
"type": "application", 
"display_name": "Test MFE", 
"menu_path": "Application", 
"custom": true, 
"default": false, 
"level": 1, 
"distribution_path": "/assets/cisco-bpa-platform/mw-device-manager/test-mfe/main.js", 
"version": "4.1.0-501"

في الشكل أعلاه، تكون القيمة الأصلية هي إختبار MFE؛ لذلك، تتداخل قائمة إختبار MFE المستوى One تحت قائمة إختبار MFE.

المستوى 2

"layout_enabled": true,
"name": "@cisco-bpa-platform/test-mfe-root",
"type": "application",
"path": "ex/test-mfe/compone",
"display_name": "Test MFE One",
"menu_path": "Application",
"parents": "Test MFE",
"custom": true,
"default": false,
"level": 2,
"distribution_path": "/assets/cisco-bpa-platform/mw-device-manager/test-mfe/main.js", 
"version": "4.1.0-501"

المستوى 4

"layout_enabled": true,
"name": "@cisco-bpa-platform/test-mfe-root",
"type": "application",
"path": "ex/test-mfe/comptwo",
"display_name": "Test MFE Two",
"menu_path": "Application",
"parents": "Test MFE",
"custom": true,
"default": false,
"level": 4,
"distribution_path": "/assets/cisco-bpa-platform/mw-device-manager/test-mfe/main.js", 
"version": "4.1.0-501"

المستوى 5

"layout_enabled": true,
"name": "@cisco-bpa-platform/test-mfe-root",
"type": "application",
"path": "ex/test-mfe/compone",
"display_name": "Test MFE First one",
"menu_path": "Application",
"parents": "Test MFE Level One",
"custom": true,
"default": false,
"level": 5,
"distribution_path": "/assets/cisco-bpa-platform/mw-device-manager/test-mfe/main.js", 
"version": "4.1.0-501"

تتداخل قائمة إختبار MFE First One تحت قائمة إختبار MFE Level One.

المستوى 6

"layout_enabled": true,
"name": "@cisco-bpa-platform/test-mfe-root",
"type": "application",
"path": "ex/test-mfe/comptwo",
"display_name": "Test MFE First Two",
"menu_path": "Application",
"parents": "Test MFE Level One",
"custom": true,
"default": false,
"level": 6,
"distribution_path" : "/assets/cisco-bpa-platform/mw-device-manager/test-mfe/main.js", 
"version": "4.1.0-501"

تتداخل قائمة إختبار MFE First Two تحت قائمة إختبار MFE Level One.

بعد إعداد ملف "mfe.json" في الخطوة 1، قم بإعادة تشغيل حاوية الخدمة الدقيقة لتسجيل الإدخالات.