יישומי פלאגין

תוסף הוא קטע קוד עצמאי שמוסיף פונקציונליות ל-Blockly. לדוגמה, יכול להיות שהיא תוסיף שדה בהתאמה אישית, תגדיר נושא חדש או תספק רכיב עיבוד בהתאמה אישית. בדרך כלל, התוספים נארזים ומופצים דרך npm.

למבוא מהיר לפלאגינים, אפשר לצפות בסקירה הכללית על פלאגינים (2021).

אם רוצים ליצור תוסף משלכם, אפשר לעיין במאמר בנושא הוספת תוסף.

תוספים של צד ראשון וצד שלישי

תוספים מהדומיין הנוכחי נתמכים על ידי צוות Blockly ומפורסמים בהיקף @blockly ב-npm. הם נועדו לשימוש במגוון רחב של אפליקציות Blockly.

תוספים של צד שלישי מתוחזקים ומפורסמים באופן עצמאי. יכול להיות שהם מורכבים יותר, ניסיוניים יותר או מיועדים למגוון מצומצם יותר של אפליקציות Blockly.

חיפוש פלאגין

  • אפשר להיכנס אל Blockly Plugins & Demos כדי לראות הדגמות חיות של פלאגינים מאינטראקציה ישירה.

  • חיפוש ב-npm של keyword:blockly-plugin. תוספים עם ההיקף @blockly מתפרסמים על ידי צוות Blockly. כדי לקבל תוצאות רחבות יותר, אפשר לחפש את keyword:blockly או את blockly.

  • אפשר לעיין בספרייה blockly-samples/plugins ב-GitHub, שבה נמצא המאגר של תוספים של צד ראשון. לכל תוסף יש קובץ README שמתאר את ההתנהגות שלו ואת השימוש המיועד בו.

התקנת פלאגין

מומלץ להתקין תוספים באמצעות מנהל חבילות כמו npm או yarn. כך קל לקבל עדכונים.

  • התקנת פלאגין באמצעות מנהל חבילות

    npm

    npm install @blockly/field-angle

    חוטי סריגה

    yarn add @blockly/field-angle

  • התקנת פלאגין ללא מנהל חבילות

    unpkg

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

    אפשר גם לשכפל את מאגר GitHub שמכיל את הפלאגין. בפלאגינים של צד ראשון, הערך הוא blockly-samples.

כדאי לעיין בקובץ ה-README של הפלאגין כדי לראות אם יש הוראות התקנה נוספות.

שימוש בפלאגין

כל פלאגין הוא שונה, לכן כדאי לעיין בקובץ ה-README של הפלאגין כדי לקבל מידע על אופן השימוש בו. בדוגמה הבאה אפשר לראות איך משתמשים בתוסף @blockly/field-angle:

  1. מייבאים קוד מהתוסף. האופן שבו עושים את זה תלוי באופן ההתקנה של התוסף.

    ‫npm או yarn

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

    unpkg

    אין צורך להשתמש בהצהרת import.

    מאגר משוכפל

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

  2. מאתחלים את הפלאגין לפי הצורך. בדרך כלל צריך לרשום את השדה בתוספים שמספקים שדות בהתאמה אישית:

    registerFieldAngle();

  3. משתמשים בפלאגין.

    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'
  },
]);

    שדה לבחירת זווית מתוך חוגה של 360 מעלות.

גרסאות של תוספים

תוספים ב-blockly-samples משתמשים בניהול גרסאות סמנטי, שבו שינויים שוברים מחייבים שימוש בגרסה ראשית חדשה. לכל פלאגין חדש שמבצע תיקון זמני של ליבת התוכנה תהיה גרסה ראשית 0 כדי לציין פיתוח ראשוני.

רוב הפלאגינים כוללים את חבילת blockly כ-peerDependency ולא כ-dependency. הסיבה לכך היא שאנחנו מניחים שכבר התקנתם את Blockly. (אין טעם להשתמש בפלאגין בלי להשתמש ב-Blockly). כך תוכלו לנהל את גרסת Blockly בעצמכם, אבל תצטרכו גם לבדוק את package.json של הפלאגין כדי לקבוע את הגרסה המינימלית של Blockly שנדרשת. אם פלאגין מתעדכן ונדרשת גרסה חדשה יותר של Blockly, זה נחשב לשינוי שובר תאימות והגרסה הראשית שלו תעלה.

כשמוסיפים פלאגין לקובץ package.json של האפליקציה, ברירת המחדל היא לכלול סימן ^ לפני הגרסה:

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

ההגדרה הזו מאפשרת ל-npm להתקין כל גרסה משנית בגרסה הרשומה או מעליה, כך שגרסה 5.0.20 או 5.1.0 פועלות, אבל גרסה ראשית חדשה כמו 6.0.1 לא פועלת. כשמעדכנים לגרסה חדשה של Blockly, מומלץ לבדוק אם אפשר לעדכן גם את אחד מהתוספים לגרסה ראשית חדשה.