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

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

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

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

יישומי פלאגין של צד ראשון ושל צד שלישי

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

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

חיפוש פלאגין

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

  • מחפשים את keyword:blockly-plugin ב-npm. הפלאגינים ברמת ההיקף @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, כדאי לבדוק אם אפשר לעדכן גם את הפלאגינים לגרסה ראשית חדשה.