आसानी से मास्टर NocoBase प्लगइन विकास और उन्नत अनुकूलन क्षमताएँ
मुख्य वास्तुकलाNocoBase आर्किटेक्चर डिज़ाइन में गहराई से उतरें
प्लगइन विकासप्लगइन विकास की पूरी प्रक्रिया
गहन अनुकूलनप्रणाली-स्तरीय अनुकूलन और विस्तार
प्लगइन विकास और अनुकूलन के लिए आधार तैयार करने हेतु NocoBase के आर्किटेक्चरल डिज़ाइन की गहन समझ प्राप्त करें।
NocoBase एक मॉड्यूलर आर्किटेक्चर डिज़ाइन का उपयोग करता है, जिसमें निम्नलिखित मुख्य घटक शामिल हैं:
NocoBase की विस्तारशीलता के केंद्र में स्थित प्लगइन सिस्टम में निम्नलिखित प्रमुख विशेषताएँ हैं:
प्लगइन विकास की पूरी प्रक्रिया, निर्माण से लेकर रिलीज़ तक
NocoBase द्वारा प्रदान की गई प्लगइन स्कैफ़ोल्डिंग का उपयोग करके एक नया प्लगइन बनाएँ।
# NocoBase प्रोजेक्ट की रूट डायरेक्टरी में, चलाएँ: npm run create-plugin my-plugin
प्लगइन्स की मूल संरचना और कॉन्फ़िगरेशन फ़ाइलों को समझना
my-plugin/ ├── package.json # प्लगइन कॉन्फ़िगरेशन ├── src/ │ ├── server/ # बैकएंड कोड │ ├── client/ # फ्रंटएंड कोड │ └── index.ts # प्लगइन एंट्री पॉइंट └── README.md # प्लगइन दस्तावेज़ीकरण
सर्वर निर्देशिका के भीतर बैकएंड लॉजिक लागू करना
// src/server/index.ts import { Plugin } from '@nocobase/server'; export class MyPlugin extends Plugin { async load() { // Register API route this.app.router.get('/api/my-plugin/hello', async (ctx) => {
ctx.body = { message: 'मेरे प्लगइन से हैलो!' }; }); // हुक रजिस्टर करें this.app.on('beforeLoad', async () => { // प्लगइन लोड होने से पहले का लॉजिक }); } } export default MyPlugin;
क्लाइंट निर्देशिका के भीतर फ्रंट-एंड कंपोनेंट्स लागू करें
// src/client/index.tsx
import React from 'react'; import { Plugin } from '@nocobase/client'; export class MyPluginClient extends Plugin { async load() { // फ्रंटएंड रूट रजिस्टर करें this.app.router.add('my-plugin', { path: '/my-plugin', component: () => My Plugin Page
}); // मेनू पंजीकृत करें this.app.menu.add('my-plugin', { name: 'My Plugin', icon: 'Settings', path: '/my-plugin' }); } } export default MyPluginClient;
package.json में प्लगइन जानकारी कॉन्फ़िगर करें
// package.json
{
"name": "my-plugin",
"version": "1.0.0",
"description": "My NocoBase plugin",
"main": "lib/index.js",
"nocobase": {
"type": "plugin",
"name": "my-plugin",
"title": "My Plugin",
"description": "This is my plugin",
"icon": "Settings"
},
"dependencies": {
"@nocobase/server": "^1.0.0",
"@nocobase/client": "^1.0.0"
}
}
प्लगइन बनाएं और इसे NocoBase में इंस्टॉल करें।
# प्लगइन बनाएं cd my-plugin npm install npm run build # NocoBase में इंस्टॉल करें cd .. npm install ./packages/plugins/my-plugin # NocoBase शुरू करें npm run dev
जटिल व्यावसायिक आवश्यकताओं को पूरा करने के लिए सिस्टम-स्तरीय अनुकूलन और विस्तार
कोर मॉड्यूलों को पुनः लिखकर या विस्तारित करके कार्यात्मक अनुकूलन प्राप्त करना
कार्यप्रवाह के विशिष्ट बिंदुओं पर कस्टम लॉजिक निष्पादित करने के लिए सिस्टम द्वारा प्रदान किए गए हुक्स का उपयोग करें।
कस्टम फ़ील्ड और संबंध जोड़कर डेटाबेस मॉडल का विस्तार करें।
डिफ़ॉल्ट घटकों को बदलने या उनका विस्तार करने के लिए कस्टम फ्रंट-एंड घटक विकसित करें।
सिस्टम थीम को अनुकूलित करें, जिसमें रंग, फ़ॉन्ट, लेआउट और अन्य शामिल हैं।
नए पेज और नेविगेशन जोड़ने के लिए फ्रंट-एंड राउटिंग को अनुकूलित करें।
// प्लगइन की server/index.ts फ़ाइल में import { Plugin } from '@nocobase/server'; export class MyPlugin extends Plugin { async load() { // कस्टम API रूट जोड़ें this.app.router.get('/api/custom/hello', async (ctx) => { // कस्टम लॉजिक लागू करें const { name } = ctx.query; ctx.body = { message: `Hello, ${name || 'world'}!`, timestamp: new Date().toISOString() }; } } }
const { name } = ctx.query; ctx.body = { message: `Hello, ${name || 'world'}!`, timestamp: new Date().toISOString() }; });
// प्रमाणीकरण की आवश्यकता वाला एक API जोड़ें this.app.router.post('/api/custom/protected', this.app.authMiddleware(), async (ctx) => { // केवल प्रमाणीकृत उपयोगकर्ता ही एक्सेस कर सकते हैं
const user = ctx.state.currentUser; ctx.body = { message: 'यह एक संरक्षित API है', user: { id: user.id, username: user.username } }; }); } } export default MyPlugin;
// प्लगइन के client/components/MyComponent.tsx में import React from 'react'; import { Button, Card, Typography } from 'antd'; const { Title, Paragraph } = Typography; export const MyComponent: React.FC = () => { const [count, setCount] = React.useState(0); return (
Counter
Current count: {count}
); }; // प्लगइन के client/index.tsx में रजिस्टर करें import { Plugin } from '@nocobase/client'; import { MyComponent } from './components/MyComponent'; export class MyPluginClient extends Plugin { async load() { // कंपोनेंट रजिस्टर करें this.app.components.register('MyComponent', MyComponent); // रूट जोड़ें this.app.router.add('my-plugin', { path: '/my-plugin', component: MyComponent }); } }
this.app.components.register('MyComponent', MyComponent); // रूट जोड़ें this.app.router.add('my-plugin', { path: '/my-plugin', component: MyComponent }); } } export default MyPluginClient;
प्लगइन विकास और अनुकूलन के लिए सर्वोत्तम प्रथाएँ, जो कोड की गुणवत्ता और रखरखाव क्षमता सुनिश्चित करती हैं।
A: NocoBase के डेवलपमेंट मोड का उपयोग करके, चलाएँnpm run devडेवलपमेंट सर्वर लॉन्च करें, जो हॉट रीलोडिंग का समर्थन करता है। फ्रंट-एंड डेवलपर्स डिबगिंग के लिए Chrome DevTools का उपयोग कर सकते हैं, जबकि बैक-एंड डेवलपर्स VS Code में डिबगिंग के लिए ब्रेकपॉइंट सेट कर सकते हैं।
A: plugin की package.json फ़ाइल में dependencies सेक्शन के माध्यम से निर्भरताएँ घोषित करने से NocoBase स्वचालित रूप से plugin लोडिंग अनुक्रम का प्रबंधन कर सकता है। वैकल्पिक रूप से, आप plugin के load मेथड में यह जाँच सकते हैं कि अन्य plugins लोड हुए हैं या नहीं।
A: उत्तीर्णthis.app.dbडेटाबेस इंस्टेंस तक पहुँचने के लिए, आप डेटाबेस संचालन के लिए Sequelize ORM का उपयोग कर सकते हैं। उदाहरण के लिए:const User = this.app.db.getModel('users');
A: सबसे पहले, सुनिश्चित करें कि प्लगइन रिलीज़ विनिर्देशों के अनुरूप है। फिर NocoBase प्लगइन मार्केटप्लेस पर एक खाता पंजीकृत करें और निर्देशों के अनुसार प्लगइन जमा करें। आपको प्लगइन का नाम, विवरण, संस्करण जानकारी और बिल्ड आर्टिफैक्ट्स प्रदान करने होंगे।