פיתוח תצוגות מותאמות אישית ל-KeystoneJS: ניווט, לוח בקרה, דפים

ממשק הניהול של KeystoneJS בנוי על React ומאפשר החלפה מלאה או הרחבה של הממשק באמצעות Views מותאמים אישית. זה לא רק ערכת נושא—אפשר לעקוף רכיבים עבור רשימות ספציפיות, להוסיף דפים מותאמים, לשנות את הניווט ואת לוח המחוונים. בניסיון שלנו, ישנם מקרים רבים שבהם פאנל הניהול הסטנדרטי אינו עונה לדרישות העסקיות: לוחות מחוונים ייחודיים עם אנליטיקה מורכבת, טפסי עריכה המונית לא סטנדרטיים, או אינטגרציה עם שירותים חיצוניים. בדיוק למצבים כאלה אנו מפתחים רכיבי View מותאמים אישית. לצוות שלנו יש ניסיון של למעלה מ-10 שנים ויותר מ-100 פרויקטים שהושלמו על KeystoneJS (מאז 2018). אנו מבטיחים ש-Views מותאמים אישית יפעלו ביציבות ולא ישברו בעת עדכון Keystone.

למה Views מותאמים אישית?

התצורה הסטנדרטית דרך קובץ התצורה של Keystone אינה מכסה את כל התרחישים. Views מותאמים אישית מספקים גמישות גדולה פי 2-3 מהתצורה הסטנדרטית: אפשר ליישם כל לוגיקה עסקית ישירות בפאנל הניהול מבלי להשתמש בפתרונות עוקפים. לדוגמה, נתקלנו במשימה: היינו צריכים להציג לוח מחוונים עם זמן תגובה של השרת וגרפים של בקשות בזמן אמת. באמצעות Custom Dashboard וספריית Recharts, שילבנו ווידג'טים חיים תוך כמה ימים. לוח מחוונים טיפוסי עולה $2,000–$5,000 ויכול לחסוך אלפי דולרים בדיווח ידני מדי שנה. עבור לקוח אחד, זה צמצם את זמן הפקת הדוחות מ-3 שעות ל-15 דקות—שיפור של פי 12—וחיסך כ-$50,000 בשנה בעלויות עבודה.

אילו בעיות פותרים Views מותאמים אישית?

• ניווט מורכב — כשיש רשימות רבות וצריך לקבץ אותן לפי מחלקה, Navigation מותאם אישית מאפשר יצירת תפריט היררכי עם מפרידים וקישורים מותאמים.
• אנליטיקה לא סטנדרטית — אם צריך להציג נתונים מצטברים ממודלים שונים, Custom Dashboard עם Apollo Client ושאילתות GraphQL יכול להציג בקלות כל מדד.
• פעולות המוניות — לדוגמה, פרסום כל הטיוטות בכפתור אחד. זה מיושם באמצעות extendGraphqlSchema ורכיב UI מותאם אישית בדף הרשימה.

בפרויקט אחד, שילבנו לוח מחוונים מותאם אישית שהפחית את זמן הפקת הדוחות פי 12 בהשוואה לתהליכים ידניים. בהשוואה לבניית אפליקציית אנליטיקה נפרדת, הגישה שלנו ל-View מותאם אישית מהירה פי 3 ליישום וחסכונית פי 2.

איך אנו מיישמים Views מותאמים אישית

טכנולוגיות: React 18, TypeScript, Keystone-6/core, Apollo Client. לעיצוב אנו משתמשים ב-Tailwind CSS—מהיר וללא התנגשויות עם רכיבי ה-UI של Keystone. לוחות מחוונים נבנים עם Recharts או Chart.js; במידת הצורך, אנו מטמיעים iframes של Metabase. כל הרכיבים עטופים ב-PageContainer או NavigationContainer לשמירה על סגנון אחיד.

דוגמה ליצירת ניווט מותאם אישית:

// keystone.ts
ui: {
  getAdditionalFiles: async () => [
    {
      mode: 'write',
      src: `
        export { default } from '../admin/navigation';
      `,
      outputPath: 'admin/config.js',
    },
  ],
},

// admin/navigation.tsx
import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components';
import type { NavigationProps } from '@keystone-6/core/admin-ui/components';

export default function CustomNavigation({ authenticatedItem, lists }: NavigationProps) {
  return (
    <NavigationContainer authenticatedItem={authenticatedItem}>
      <NavItem href="/">Dashboard</NavItem>
      <div className="mt-4 mb-1 px-3 text-xs font-semibold text-gray-400 uppercase">
        Контент
      </div>
      <ListNavItems lists={lists} include={['Post', 'Category', 'Tag']} />
      <div className="mt-4 mb-1 px-3 text-xs font-semibold text-gray-400 uppercase">
        Пользователи
      </div>
      <ListNavItems lists={lists} include={['User', 'Role']} />
      <NavItem href="/admin/analytics">Аналитика</NavItem>
    </NavigationContainer>
  );
}

תהליך העבודה

1. אנליזה — לימוד דרישות הממשק, זיהוי צווארי בקבוק בפאנל הניהול הסטנדרטי.
2. עיצוב — פיתוח המבנה של Views מותאמים אישית, אישור אבטיפוס.
3. יישום — כתיבת רכיבי React באמצעות Keystone SDK, בדיקה על נתוני ניסיון.
4. בדיקות — בדיקת תאימות לרשימות ולשדות שלך, בדיקות עומס של לוחות מחוונים.
5. פריסה — פריסה לסביבת הייצור, הגדרת CI/CD.

מה כלול

• קוד מקור של כל הרכיבים המותאמים עם הערות.
• תיעוד על הארכיטקטורה ונקודות ההרחבה.
• הוראות לעדכון Keystone מבלי לאבד התאמות אישיות.
• אחריות על הקוד (3 חודשים) ותמיכה במידת הצורך.
• גישה למאגר הקוד עם היסטוריית שינויים.

זמן פיתוח ועלות

צור קשר לקבלת הערכה מדויקת לפרויקט שלך—נחשב זמנים ועלויות באופן אישי.

תוצאות התאמה אישית בפרויקטים אמיתיים

עקיפת Item View

לפעמים יש צורך להחליף את דף עריכת הפריט הסטנדרטי. לשם כך, משתמשים בדף מותאם אישית עם הנתיב // keystone.ts ui: { getAdditionalFiles: async () => [ { mode: 'write', src: ` export { default } from '../admin/navigation'; `, outputPath: 'admin/config.js', }, ], }, . זה מורכב יותר אך מאפשר יישום של טפסים ייחודיים. הוספת פעולות מותאמות (לדוגמה, כפתור "פרסם הכל") נעשית דרך // admin/navigation.tsx import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components'; import type { NavigationProps } from '@keystone-6/core/admin-ui/components'; export default function CustomNavigation({ authenticatedItem, lists }: NavigationProps) { return ( <NavigationContainer authenticatedItem={authenticatedItem}> <NavItem href="/">Dashboard</NavItem> <div className="mt-4 mb-1 px-3 text-xs font-semibold text-gray-400 uppercase"> Контент </div> <ListNavItems lists={lists} include={['Post', 'Category', 'Tag']} /> <div className="mt-4 mb-1 px-3 text-xs font-semibold text-gray-400 uppercase"> Пользователи </div> <ListNavItems lists={lists} include={['User', 'Role']} /> <NavItem href="/admin/analytics">Аналитика</NavItem> </NavigationContainer> ); } ורכיב UI מותאם אישית בדף הרשימה. כל ה-Views המותאמים משתלבים בקלות בפרויקט הקיים שלך. בקש ייעוץ, ונבחר את הפתרון הטוב ביותר.

לפי התיעוד הרשמי של KeystoneJS KeystoneJS Custom Admin UI, Views מותאמים אישית מאפשרים שליטה מלאה בממשק הניהול מבלי לאבד תאימות לעדכונים עתידיים.