إتقان تطوير إضافات Strapi: دليل شامل لإنشاء وتوسيع وتخصيص الإضافات للخادم ولوحة الإدارة

مرحباً بكم، عشاق Strapi! إذا كنت تتطلع إلى الارتقاء بتجربة Strapi v4 الخاصة بك وتوسيع وظائفها، فإن إنشاء الإضافات وتخصيصها هو الطريق الصحيح. في هذا الدليل الشامل، سنرشدك خلال الخطوات لإتقان تطوير إضافات Strapi، مما يضمن أنك تنشئ وتوسع وتصمم إضافات مناسبة تماماً لكل من الخادم ولوحة الإدارة. سواء كنت مطور Strapi ماهراً أو بدأت للتو، تابع القراءة لإطلاق الإمكانات الكاملة لإضافات Strapi.

المقدمة

Strapi هو نظام إدارة محتوى مفتوح المصدر بدون واجهة يكتسب شعبية سريعة. تتيح مرونته للمطورين إنشاء إضافات مخصصة، مما يعزز كلاً من منطق الخادم والجوانب المرئية للوحة الإدارة. هذا الدليل مثالي لأولئك الذين لديهم فهم متوسط لـ Strapi.

إنشاء إضافة

يبسط Strapi إنشاء الإضافات مع واجهة سطر الأوامر القوية الخاصة به. دعنا نتعمق في العملية خطوة بخطوة.

الخطوة 1: إنشاء الإضافة

أولاً، انتقل إلى جذر مشروعك وشغّل الأمر التالي:

yarn strapi generate
// OR
npm run strapi generate

اختر "plugin" من القائمة وقدم اسماً لإضافتك بصيغة kebab-case (مثال: my-plugin). اختر بين JavaScript أو TypeScript.

الخطوة 2: تهيئة الإضافة

أنشئ أو حدّث ملف تهيئة الإضافات الخاص بك:

JavaScript

// ./config/plugins.js
module.exports = {
  // ...
  'my-plugin': {
    enabled: true,
    resolve: './src/plugins/my-plugin' // path to plugin folder
  },
  // ...
}

TypeScript

// ./config/plugins.ts
export default {
  // ...
  'my-plugin': {
    enabled: true,
    resolve: './src/plugins/my-plugin' // path to plugin folder
  },
  // ...
}

شغّل npm install أو yarn داخل مجلد الإضافة الخاص بك، ثم ابنِ الإضافة:

yarn build
// OR
npm run build

أخيراً، ابنِ وشغّل مشروع Strapi:

yarn build && yarn develop
// OR
npm run build && npm run develop

توسيع وظائف الإضافة

الآن بعد أن أصبح هيكل الإضافة الأساسي جاهزاً، حان الوقت لإضافة وظائف مخصصة.

تخصيصات جانب الخادم

أنشئ ملف strapi-server.js في جذر مجلد حزمة الإضافة الخاص بك لاستخدام واجهة برمجة تطبيقات الخادم.

دالة دورة حياة التسجيل

module.exports = () => ({
  register({ strapi }) {
    // Custom registration logic here
    console.log("My Plugin has been registered.");
  },
});

تخصيصات لوحة الإدارة

تتيح واجهة برمجة تطبيقات لوحة الإدارة دمج واجهة مستخدم الإضافة المخصصة في لوحة إدارة Strapi القائمة على React. أنشئ ملف strapi-admin.js أو admin/src/index.js لواجهة برمجة تطبيقات لوحة الإدارة.

تسجيل الإضافة في لوحة الإدارة

import pluginId from './pluginId';
 
export default {
  register(app) {
    app.registerPlugin({
      id: pluginId,
      name: 'My Plugin',
      isReady: false,
      initializer: () => app.setPrefs(() => ({ app: 'my plugin' })),
    });
  },
};

إضافة ميزات

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

إضافة مسار

// ./server/routes/index.js
module.exports = [
  {
    method: 'GET',
    path: '/hello',
    handler: 'myController.sayHello',
    config: {
      policies: [],
    },
  },
];

إنشاء المتحكم

// ./server/controllers/myController.js
module.exports = {
  async sayHello(ctx) {
    ctx.body = 'Hello, World!';
  }
};

إضافة خدمة

// ./server/services/myService.js
module.exports = () => ({
  getGreeting() {
    return 'Hello from Service';
  },
});

التخصيصات المتقدمة

تتألق مرونة Strapi مع تخصيصات أكثر تعقيداً مثل الحقول المخصصة ومهام cron والتدخل في خطافات دورة الحياة.

إضافة مهمة Cron

// ./server/strapi-server.js
module.exports = () => ({
  bootstrap({ strapi }) {
    strapi.cron.add({
      // Runs every minute
      myJob: {
        task: async () => {
          console.log("Running cron job every minute");
        },
        options: {
          rule: '* * * * *',
        },
      },
    });
  },
});

مناطق حقن لوحة الإدارة

يمكنك حقن مكونات في عروض لوحة إدارة Strapi الموجودة.

import { InjectionZone } from '@strapi/helper-plugin';
 
export default {
  bootstrap(app) {
    app.injectContentManagerComponent('editView', 'right-links', {
      name: 'custom-component',
      Component: () => <div>Custom Component</div>,
    });
  },
};

الخلاصة

مبروك! لقد تعلمت كيفية إنشاء وتوسيع وتخصيص إضافات Strapi v4 لكل من الخادم ولوحة الإدارة. تتيح لك مرونة وقوة إضافات Strapi تصميم مشروع Strapi الخاص بك ليناسب أي احتياجات عمل.

تابع المزيد من الدروس المتقدمة واستكشف عالم تطوير Strapi الواسع. لمزيد من المعلومات والوثائق التفصيلية، قم بزيارة وثائق تطوير إضافات Strapi الرسمية.

المصدر: وثائق Strapi: تطوير الإضافات.