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 umumnya dipaketkan dan didistribusikan melalui npm.

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

Untuk pengenalan singkat tentang plugin, lihat Plugin Overview talk (2021) kami.

Jika Anda ingin membuat plugin sendiri, lihat Menambahkan plugin.

Plugin pihak pertama dan ketiga

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

Plugin pihak ketiga dikelola dan dipublikasikan secara independen. Blok ini mungkin lebih kompleks, lebih eksperimental, atau ditujukan untuk 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 dimaksudkan.

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 @blockly/field-angle plugin:

1. Impor 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. Inisialisasi plugin sesuai kebutuhan. Plugin yang menyediakan kolom kustom sering kali meminta 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 mengharuskan perubahan yang dapat menyebabkan gangguan menggunakan versi utama baru. Setiap plugin baru yang menggunakan patch monyet pada core akan memiliki versi utama 0 untuk menandakan pengembangan awal.

Sebagian besar plugin menyertakan paket blockly sebagai peerDependency daripada dependency. Hal ini karena kami mengasumsikan bahwa Anda telah menginstal Blockly. (Tidak masuk akal menggunakan plugin tanpa menggunakan Blockly.) Hal ini memungkinkan Anda mengelola sendiri versi Blockly, tetapi juga mengharuskan Anda memeriksa package.json plugin untuk menentukan versi minimum Blockly yang diperlukan. Jika plugin diupdate sehingga 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, secara default tanda sisipan akan disertakan sebelum versi:

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

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