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

יש כמה פרדיגמות לבחירה כשמעצבים אפליקציה שמשתמשת ב-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 תומך בגלילה אופקית בארגז הכלים, אבל צריך להשתמש בה בזהירות.

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