עיצוב אפליקציות

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

הגדרה

הרבה אפליקציות של Blockly משמשות לתיאור הגדרות, ולא לתוכניות שניתנות להרצה. אפליקציות להגדרה מתחילות בדרך כלל באתחול של בלוק אחד ברמת הבסיס בסביבת העבודה. דוגמה טובה לכך היא הכרטיסייה Block Factory (מפעל הבלוקים) בכלי הפיתוח של Blockly:

Blockly.Blocks['factory_base'] = {
  init: function() {
    this.setDeletable(false);
    this.setMovable(false);
    this.setEditable(false);
    // etc...
  }
}

Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);

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

יכול להיות שאפליקציות כאלה ישביתו אוטומטית כל חסימה שלא קשורה לחסימת השורש. אפשר לעשות זאת בשורה אחת:

workspace.addChangeListener(Blockly.Events.disableOrphans);

תוכנית סדרתית

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

כל בלוק (שלא הושבת) במרחב העבודה יהיה חלק מהתוכנית. אם יש כמה ערימות של בלוקים, הבלוקים בערימות הגבוהות יותר מופעלים קודם. (אם לשתי ערימות יש בערך אותו גובה, הערימה שמשמאל (מימין במצב RTL) מקבלת עדיפות).

אפשר לייצא את סביבת העבודה לקוד הפעלה בכל שלב. אפשר להריץ את הקוד הזה בצד הלקוח ב-JavaScript (באמצעות eval או JS Interpreter), או בצד השרת בכל שפה.

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

תוכנית מקבילית

חלק מהאפליקציות של Blockly בוחרות להריץ את כל ערימות הבלוקים במקביל, ולא ברצף. דוגמה: אפליקציית מוזיקה שבה לולאת תופים פועלת במקביל למלודיה.

אחת הדרכים להטמיע הרצה מקבילה היא ליצור את הקוד לכל בלוק בנפרד:

import {javascriptGenerator} from 'blockly/javascript';

var json = Blockly.serialization.workspaces.save(workspace);

// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice();  // Create shallow copy.
blocks.length = 0;

// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
  var block = topBlocks[i];
  blocks.push(block);
  Blockly.serialization.workspaces.load(json, headless);
  allCode.push(javascriptGenerator.workspaceToCode(headless));
  blocks.length = 0;
}

אם שפת היעד היא JavaScript, אפשר להשתמש במערך allCode כדי ליצור כמה מפענחי JS להרצה בו-זמנית. אם שפת היעד היא שפה כמו Python, אפשר להרכיב את מערך allCode לתוכנית אחת שמשתמשת במודול threading.

כמו בכל תוכנית מקבילית, צריך לקבל החלטות מושכלות לגבי כל המשאבים המשותפים, כמו משתנים ופונקציות.

תוכנית מבוססת-אירועים

הגורמים המטפלים באירועים הם פשוט פונקציות שהמערכת קוראת להן, ולא התוכנית. הבלוקים האלה יכולים להקיף את ערימת הבלוקים שצריך להריץ, או שהם יכולים להיות כותרות שמופיעות מעל ערימת בלוקים.

יש מפתחים שמוסיפים 'כובע' לחלק העליון של בלוקים של אירועים כדי שהם ייראו שונים מבלוקים אחרים. זה לא המראה שמוגדר כברירת מחדל ב-Blockly, אבל אפשר להוסיף אותו על ידי שינוי ברירת המחדל של קבוע הרכיב ADD_START_HATS ל-true (Custom renderers codelab - Override constants), או על ידי הוספת ערכת נושא והגדרת האפשרות hat בסגנון הבלוק. מידע נוסף על הגדרת כובעים בבלוקים כחלק מעיצובים זמין במאמר סגנון בלוק במסמכי העיצובים.

במודל מבוסס-אירועים, יכול להיות שיהיה הגיוני ליצור גם handler להתחלת התוכנית. במודל הזה, המערכת תתעלם מכל חסימה במרחב העבודה שלא מחוברת ל-event handler, והיא לא תבצע אותה.

כשמתכננים מערכת שמשתמשת באירועים, כדאי לשקול אם אפשר או רצוי לתמוך בכמה מופעים של אותו handler של אירוע.

פריסת Workspace

יש שתי דרכים סבירות לפריסת מסך משמאל לימין. אחת הדרכים מתחילה עם סרגל הכלים בצד ימין, סביבת העבודה באמצע והדמיה של הפלט בצד שמאל. הפריסה הזו משמשת בגרסה 1 של Scratch וגם ב-Made with Code.

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

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

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

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

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

המלצה: כדאי למקם את התצוגה החזותית של התוכנית לצד סרגל הכלים.