מדריך התאמה אישית ופריסה של ממשק הניהול של Vendure

מדריך התאמה אישית ופריסה של ממשק הניהול של Vendure

כאשר תוספים לא מתחברים, תרגומים לא מיושמים, ולאחר הפריסה הממשק קורס עם שגיאות הידרציה — זהו כאב אופייני בעת התאמה אישית של פאנל הניהול של Vendure. ב-6 מתוך 10 פרויקטים אנו נתקלים בשגיאות הידרציה של Angular עקב אי-התאמה בין מצב השרת למצב הלקוח. זה נפתר על ידי בנייה סטטית עם קומפילציה מראש (ahead-of-time). פירקנו עשרות פרויקטים כאלה ואספנו תצורות ייצור מעשיות. להלן — פתרונות מוכנים לקומפילציה, מיתוג, והוספת טאבים מותאמים אישית.

מקרה בוחן: TTFB הופחת פי 2.5

לקוח — חנות מקוונת עם 15 תוספים ו-3 טאבים מותאמים אישית. ללא קומפילציה, פאנל הניהול נטען תוך 4 שניות. לאחר קומפילציה — 1.2 שניות. בנוסף, הגדרנו מטמון באמצעות Nginx עם תגי immutable לנכסים סטטיים. TTFB ירד מ-2.5 שניות ל-800 אלפיות השנייה, השימוש במעבד ירד ב-40%. Core Web Vitals (LCP, INP) נכנסו לאזור הירוק.

מדוע קומפילציה מראש (Ahead-of-Time) היא חובה

במצב פיתוח, פאנל הניהול של Angular מתקמפל תוך כדי תנועה — כל בקשה בונה מחדש את היישום. בייצור זה מייצר TTFB של מעל 2 שניות ועומס גבוה על השרת. קומפילציה מראש מאיצה את הטעינה פי 2–3 ומפחיתה את השימוש בזיכרון. בפרויקט בדיקה עם 5 תוספים, TTFB ירד מ-2.1 שניות ל-540 אלפיות השנייה, השימוש במעבד ב-40%. קומפילציית ייצור מהירה פי 2–3 ממצב פיתוח מבחינת זמן טעינה. כך עושים זאת:

// compile-admin-ui.ts
import { compileUiExtensions } from "@vendure/ui-devkit/compiler";
import path from "path";

compileUiExtensions({
  outputPath: path.join(__dirname, "../admin-ui"),
  extensions: [
    LoyaltyPlugin.uiExtensions,
    B2bPricingPlugin.uiExtensions,
  ],
  devMode: false,
}).compile?.();

לאחר מכן ציינו את הנתיב בקונפיגורציה והריצו קומפילציה באמצעות // compile-admin-ui.ts import { compileUiExtensions } from "@vendure/ui-devkit/compiler"; import path from "path"; compileUiExtensions({ outputPath: path.join(__dirname, "../admin-ui"), extensions: [ LoyaltyPlugin.uiExtensions, B2bPricingPlugin.uiExtensions, ], devMode: false, }).compile?.(); . התוצאה — תיקיית npx ts-node compile-admin-ui.ts עם קבצים סטטיים מוכנים להגשה דרך Nginx.

כיצד להוסיף טאב מותאם אישית לתפריט

כדי להוסיף טאב מותאם אישית מתוסף, צרו הרחבה עם נתיבים ורישום פריט תפריט. דוגמה להרחבה מלאה לתוכנית נאמנות:

// loyalty.plugin.ts
@VendurePlugin({
  /* ... */
})
export class LoyaltyPlugin {
  static uiExtensions: AdminUiExtension = {
    id: "loyalty-ui",
    extensionPath: path.join(__dirname, "loyalty-ui"),
    routes: [
      {
        route: "loyalty",
        filePath: "routes.ts",
      },
    ],
    providers: ["providers.ts"],
  };
}

// loyalty-ui/routes.ts
import { Route } from "@angular/router";
import { marker as _ } from "@biesbjerg/ngx-translate-extract-marker";

export default [
  {
    path: "",
    component: LoyaltyListComponent,
    data: {
      breadcrumb: _("Программа лояльности"),
    },
  },
  {
    path: ":id",
    component: LoyaltyDetailComponent,
    data: {
      breadcrumb: _("Аккаунт лояльности"),
    },
  },
] satisfies Route[];

// loyalty-ui/providers.ts
import { addNavMenuItem } from "@vendure/admin-ui/core";

export default [
  addNavMenuItem(
    {
      id: "loyalty",
      label: "Лояльность",
      routerLink: ["/extensions/loyalty"],
      icon: "star",
    },
    "customers"
  ),
];

לפי התיעוד הרשמי של Vendure, גישה זו מבטיחה תאימות לגרסאות עתידיות.

כיצד לשנות את המיתוג של פאנל הניהול

בקונפיגורציית admin-ui/dist, הגדירו // loyalty.plugin.ts @VendurePlugin({ /* ... */ }) export class LoyaltyPlugin { static uiExtensions: AdminUiExtension = { id: "loyalty-ui", extensionPath: path.join(__dirname, "loyalty-ui"), routes: [{ route: "loyalty", filePath: "routes.ts" }], providers: ["providers.ts"], }; } // loyalty-ui/routes.ts import { Route } from "@angular/router"; import { marker as _ } from "@biesbjerg/ngx-translate-extract-marker"; export default [ { path: "", component: LoyaltyListComponent, data: { breadcrumb: _("Программа лояльности") } }, { path: ":id", component: LoyaltyDetailComponent, data: { breadcrumb: _("Аккаунт лояльности") } }, ] satisfies Route[]; // loyalty-ui/providers.ts import { addNavMenuItem } from "@vendure/admin-ui/core"; export default [ addNavMenuItem( { id: "loyalty", label: "Лояльность", routerLink: ["/extensions/loyalty"], icon: "star" }, "customers" ), ]; , AdminUiPlugin, adminUiConfig.brand. עבור לוגו וצבעים, השתמשו בערכת נושא של Angular: צרו קובץ hideVendureBranding עם defaultLanguage, theme.ts, ו-compileUiExtensions. העבירו אותו ל-// theme.ts export const theme = { primaryColor: "#1a73e8", accentColor: "#e8f0fe", logo: "/assets/logo.svg", }; . דוגמה:

// theme.ts
export const theme = {
  primaryColor: "#1a73e8",
  accentColor: "#e8f0fe",
  logo: "/assets/logo.svg",
};

לאחר מכן ייבאו את ערכת הנושא והעבירו אותה ל-compileUiExtensions({ theme }). מיתוג Vendure אורך 2 עד 4 שעות ואינו דורש ידע מעמיק ב-Angular.

כיצד להוסיף תרגומים לתוספים

השתמשו ב-VENDURE_UI_CONFIG בספקי ההרחבה. בשדה translations, ציינו אובייקט עם מפתחות מחרוזת לכל שפה. הגדירו את השפה באמצעות languageCode (לדוגמה, ru). ודאו שהמפתח תואם לסמן בתבנית. זה מאפשר פאנל ניהול רב-לשוני ללא שכפול רכיבים.

מדוע סנכרון גרסאות הוא קריטי

הגרסאות של @vendure/ui-devkit ו-@vendure/core חייבות להתאים: ה-UI Devkit מתקמפל עבור גרסת Vendure ספציפית. אי-תאימות מובילה לשגיאות קומפילציה של Angular או להתנהגות בלתי צפויה של הממשק. אנו מבטיחים סנכרון גרסאות — נוהג סטנדרטי בכל הפרויקטים שלנו.

שגיאות נפוצות ופתרונות

מה כלול בעבודה

• ביקורת תצורה נוכחית — ניתוח תוספים, גרסאות, תלויות.
• עיצוב הרחבות — הגדרת מבנה, נתיבים, רכיבים.
• יישום ובנייה — כתיבת קוד, הגדרת ערכת נושא, קומפילציית ממשק.
• בדיקות — אימות במצבי פיתוח וייצור, מדידת Core Web Vitals עבור פאנל הניהול של Vendure.
• תיעוד — תיאור כל ההרחבות המותאמות אישית והוראות פריסה.
• גישה ותמיכה — העברת מאגר, הגדרת CI/CD, ייעוץ.

תהליך ולוחות זמנים

1. ניתוח — אנו בוחנים את התצורה הנוכחית, רשימת התוספים, דרישות הממשק. בודקים גרסאות Vendure ו-ui-devkit.
2. עיצוב — פיתוח מבנה הרחבות, הגדרת רכיבים מותאמים אישית, נתיבים ונקודות כניסה.
3. יישום — כתיבת קוד, הגדרת ערכת נושא (צבעים, לוגו), הוספת תרגומים.
4. בדיקות — בדיקה בפיתוח וייצור, מדידת Core Web Vitals, תיקון בעיות.
5. פריסה — קומפילציית ממשק, הגדרת שרת (Nginx), השקה.
6. תמיכה — העברת מאגר, הגדרת CI/CD לבנייה אוטומטית בעדכוני תוספים.

לוחות זמנים — בין 2 ל-5 ימים תלוי במורכבות. המחיר נקבע באופן אישי. צרו קשר להערכה.

קבלו ייעוץ על הגדרת ממשק הניהול של Vendure — נראה לכם כיצד לחסוך עד 30% מזמן הפריסה ולהימנע ממלכודות נפוצות. הניסיון שלנו — מעל 50 פרויקטים של Vendure. צרו קשר כדי לדון בחנות שלכם.