Plugin

Plugin adalah potongan kode mandiri yang menambahkan fungsi ke Blockly. Misalnya, plugin dapat menambahkan kolom kustom, menentukan tema baru, atau menyediakan perender kustom. Plugin biasanya dipaketkan dan didistribusikan melalui npm.

Catatan: Objek BlocklyOptions memiliki properti plugins untuk memasukkan class yang menyesuaikan perilaku Blockly. Meskipun class ini dapat diterapkan sebagai plugin, hal ini tidak diperlukan dan tidak terkait.

Untuk pengenalan singkat tentang plugin, lihat presentasi Ringkasan Plugin (2021).

Jika Anda ingin membuat plugin sendiri, lihat Menambahkan plugin.

Plugin pihak pertama dan pihak ketiga

Plugin pihak pertama didukung oleh tim Blockly dan dipublikasikan dalam cakupan @blockly di npm. Fungsi ini dirancang agar dapat digunakan di berbagai aplikasi Blockly.

Plugin pihak ketiga dikelola dan dipublikasikan secara independen. Aplikasi ini mungkin lebih kompleks, lebih eksperimental, atau ditargetkan ke rentang aplikasi Blockly yang lebih sempit.

Menemukan plugin

• Buka Plugin & Demo Blockly, yang memiliki demo langsung plugin pihak pertama.

• Telusuri npm untuk keyword:blockly-plugin. Plugin dengan cakupan @blockly dipublikasikan oleh tim Blockly. Untuk hasil yang lebih luas, telusuri keyword:blockly atau blockly.

• Lihat direktori blockly-samples/plugins di GitHub, yang merupakan repositori untuk plugin pihak pertama. Setiap plugin memiliki README yang menjelaskan perilaku dan penggunaan yang diinginkan.

Menginstal plugin

Sebaiknya instal plugin dengan pengelola paket seperti npm atau yarn. Hal ini memudahkan Anda menerima update.

• Menginstal plugin dengan pengelola paket

  npm

  npm install @blockly/field-angle
  

  benang

  yarn add @blockly/field-angle
  

• Menginstal plugin tanpa pengelola paket

  unpkg

  <script src="https://unpkg.com/@blockly/field-angle"></script>
  

  Anda juga dapat meng-clone repositori GitHub yang berisi plugin. Untuk plugin pihak pertama, nilainya adalah blockly-samples.

Periksa README plugin untuk melihat apakah ada petunjuk penginstalan tambahan.

Menggunakan plugin

Setiap plugin berbeda, jadi lihat README plugin untuk mengetahui informasi tentang cara menggunakan plugin tersebut. Contoh berikut menunjukkan cara menggunakan plugin @blockly/field-angle:

1. Mengimpor kode dari plugin. Cara melakukannya bergantung pada cara Anda menginstal plugin.

   npm atau yarn

   import Blockly from 'blockly';
   import {registerFieldAngle} from '@blockly/field-angle';
   

   unpkg

   Anda tidak perlu menggunakan pernyataan import.

   Repositori yang di-clone

   import {registerFieldAngle} from 'path/to/plugin';
   

2. Lakukan inisialisasi plugin sesuai kebutuhan. Plugin yang menyediakan kolom kustom sering kali memerlukan Anda untuk mendaftarkan kolom:

   registerFieldAngle();
   

3. Gunakan plugin.

   Blockly.common.defineBlocksWithJsonArray([
     {
       type: "my_angle_block",
       message0: "%1 degrees",
       args0: [
         {
           // Use @blockly/field-angle.
           type: "field_angle",
           name: "FIELDNAME",
           value: 45,
         },
       ],
       output: null,
       style: 'math_blocks'
     },
   ]);
   

   

Versi plugin

Plugin di blockly-samples menggunakan pembuatan versi semantik, yang memerlukan perubahan yang dapat menyebabkan gangguan untuk menggunakan versi utama baru. Setiap plugin baru yang melakukan monkey patch pada core akan memiliki versi utama 0 untuk menandakan pengembangan awal.

Sebagian besar plugin menyertakan paket blockly sebagai peerDependency, bukan dependency. Hal ini karena kami berasumsi bahwa Anda telah menginstal Blockly. (Tidak masuk akal untuk menggunakan plugin tanpa menggunakan Blockly.) Hal ini memungkinkan Anda mengelola versi Blockly sendiri, tetapi juga mengharuskan Anda memeriksa package.json plugin untuk menentukan versi minimum Blockly yang diperlukan. Jika plugin diupdate agar memerlukan Blockly versi yang lebih baru, hal ini dianggap sebagai perubahan yang dapat menyebabkan gangguan dan versi utamanya akan ditingkatkan.

Saat Anda menambahkan plugin ke package.json aplikasi, setelan defaultnya adalah menyertakan tanda kurung siku sebelum versi:

"dependencies": {
  "@blockly/field-angle": "^5.0.12"
}

Tindakan ini akan memungkinkan npm menginstal versi minor apa pun pada atau di atas versi yang tercantum, sehingga versi 5.0.20 atau 5.1.0 berfungsi, tetapi versi utama baru seperti 6.0.1 tidak berfungsi. Saat Anda mengupdate ke versi baru Blockly, sebaiknya periksa apakah plugin Anda juga dapat diupdate ke versi utama baru.