#ปลั๊กอิน (Plugin)

ใน NocoBase, ปลั๊กอินฝั่งไคลเอนต์ (Client Plugin) เป็นวิธีหลักในการขยายและปรับแต่งฟังก์ชันการทำงานของส่วนหน้า (frontend) ครับ/ค่ะ ด้วยการสืบทอด (extend) คลาสพื้นฐาน (base class) ของ Plugin ที่ @nocobase/client จัดเตรียมไว้ให้ นักพัฒนาสามารถลงทะเบียน (register) โลจิก, เพิ่มคอมโพเนนต์หน้าเว็บ, ขยายเมนู หรือผสานรวมฟังก์ชันจากภายนอกได้ในแต่ละช่วงชีวิต (lifecycle) ที่แตกต่างกันครับ/ค่ะ

#โครงสร้างคลาสของปลั๊กอิน

โครงสร้างปลั๊กอินฝั่งไคลเอนต์พื้นฐานที่สุดมีดังนี้ครับ/ค่ะ

import { Plugin } from '@nocobase/client';

export class PluginHelloClient extends Plugin {
  async afterAdd() {
    // ทำงานหลังจากเพิ่มปลั๊กอินแล้ว
    console.log('Plugin added');
  }

  async beforeLoad() {
    // ทำงานก่อนที่ปลั๊กอินจะโหลด
    console.log('Before plugin load');
  }

  async load() {
    // ทำงานเมื่อปลั๊กอินโหลด, ใช้สำหรับลงทะเบียนเราต์ (routes), คอมโพเนนต์ UI ฯลฯ
    console.log('Plugin loaded');
  }
}

export default PluginHelloClient;

#คำอธิบายช่วงชีวิต (Lifecycle)

ปลั๊กอินแต่ละตัวจะผ่านช่วงชีวิต (lifecycle) ต่อไปนี้ตามลำดับ เมื่อมีการรีเฟรชเบราว์เซอร์หรือเมื่อแอปพลิเคชันเริ่มต้นทำงานครับ/ค่ะ

#ลำดับการทำงาน

ทุกครั้งที่เบราว์เซอร์รีเฟรช เมธอด afterAdd() → beforeLoad() → load() จะถูกเรียกทำงานตามลำดับครับ/ค่ะ

#บริบทของปลั๊กอิน (Plugin Context) และ FlowEngine

ตั้งแต่ NocoBase 2.0 เป็นต้นไป API สำหรับการขยายฟังก์ชันการทำงานฝั่งไคลเอนต์จะเน้นอยู่ที่ FlowEngine เป็นหลักครับ/ค่ะ ในคลาสของปลั๊กอิน คุณสามารถเข้าถึงอินสแตนซ์ของเอนจินได้ผ่าน this.engine ครับ/ค่ะ

// เข้าถึงบริบทของเอนจินในเมธอด load()
async load() {
  const { app, router, apiClient } = this.engine.context;
  console.log('Current app:', app);
}

ดูรายละเอียดเพิ่มเติมได้ที่:

• FlowEngine
• บริบท (Context)