• Bahasa Indonesia

      • Ikhtisar

      Plugin client NocoBase dapat melakukan banyak hal: mendaftarkan halaman baru, menulis Component kustom, memanggil API backend, menambahkan Block dan Field, bahkan memperluas tombol Action. Semua kapabilitas ini diorganisir melalui satu entry point plugin yang terpadu.

      Jika Anda sudah memiliki pengalaman pengembangan React, Anda akan cepat memulai — sebagian besar skenario adalah menulis Component React biasa, dan menggunakan kapabilitas konteks yang disediakan NocoBase (seperti membuat request, internasionalisasi) untuk berinteraksi dengan NocoBase. Anda hanya perlu memahami FlowEngine ketika Anda perlu Component Anda muncul di antarmuka konfigurasi visual NocoBase.

      Perhatian

      NocoBase sedang bermigrasi dari client (v1) ke client-v2, saat ini client-v2 masih dalam pengembangan. Konten dalam dokumentasi ini disediakan untuk eksplorasi awal, tidak disarankan untuk langsung digunakan di environment production. Plugin yang baru dikembangkan harap menggunakan direktori src/client-v2/ dan API @nocobase/client-v2.

      Alur Pembelajaran

      Disarankan untuk memahami pengembangan plugin client dalam urutan berikut, dari sederhana ke kompleks:

      Plugin (entry) → Router (halaman) → Component → Context → FlowEngine (ekstensi UI)

      Di mana:

      1. Plugin: Class entry plugin, mendaftarkan route, model, dan resource lainnya dalam siklus hidup load(), dll.
      2. Router: Mendaftarkan route halaman melalui router.add(), mendaftarkan halaman pengaturan plugin melalui pluginSettingsManager.
      3. Component: Yang di-mount oleh route adalah Component React. Default menggunakan React + Antd, sama dengan pengembangan front-end biasa.
      4. Context: Dalam plugin dapat mengakses konteks melalui this.context, dalam Component melalui useFlowContext(), kemudian dapat menggunakan kapabilitas yang disediakan NocoBase — membuat request (ctx.api), internasionalisasi (ctx.t), log (ctx.logger), dll.
      5. FlowEngine: Jika Component Anda perlu muncul di menu "Tambah Block / Field / Action", mendukung konfigurasi visual oleh pengguna, perlu menggunakan FlowModel untuk membungkusnya.

      Empat langkah pertama mencakup sebagian besar skenario plugin. Hanya saat perlu integrasi mendalam dengan sistem konfigurasi UI NocoBase, baru perlu sampai ke langkah kelima. Tidak yakin cara mana yang harus digunakan, dapat melihat Component vs FlowModel.

      Index Cepat

      Saya ingin...Lihat di mana
      Memahami struktur dasar plugin clientPlugin
      Menambahkan halaman independenRouter
      Menambahkan halaman pengaturan pluginRouter
      Menulis Component React biasaPengembangan Component
      Memanggil API backend, menggunakan kapabilitas bawaan NocoBaseContext → Kapabilitas Umum
      Menyesuaikan style ComponentStyles & Themes
      Menambahkan Block baruFlowEngine → Ekstensi Block
      Menambahkan Component Field baruFlowEngine → Ekstensi Field
      Menambahkan tombol Action baruFlowEngine → Ekstensi Action
      Tidak yakin menggunakan Component atau FlowModelComponent vs FlowModel
      Melihat bagaimana plugin lengkap dibuatContoh Praktis Plugin

      Tautan Terkait