تصميم التطبيق

هناك عدة نماذج يمكنك الاختيار من بينها عند تصميم تطبيق يستخدم Blockly. يجب مراعاة هذه الخيارات في وقت مبكر، لأنّها تؤثر في عدد الوحدات التي سيحتاج إليها المستخدم.

الإعداد

تُستخدم العديد من تطبيقات Blockly لوصف الإعدادات بدلاً من البرامج القابلة للتنفيذ. تبدأ تطبيقات الإعداد عادةً بتهيئة كتلة واحدة على مستوى الجذر في مساحة العمل. من الأمثلة الجيدة على ذلك علامة التبويب "مصنع الحظر" في "أدوات مطوّري برامج 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 لإنشاء برامج تسلسلية. يرتّب المستخدمون معًا مربّعات يتم تنفيذها بالترتيب.

سيشكّل كلّ مربّع (غير متوقّف) في مساحة العمل جزءًا من البرنامج. إذا كانت هناك حِزم متعدّدة من الكتل، يتم تنفيذ الحِزم الأعلى أولاً. (إذا كان ارتفاع حزمتَين متساويًا تقريبًا، تكون الأولوية للحزم الموجودة على اليسار (أو اليمين في وضع الكتابة من اليمين إلى اليسار)).

يمكن تصدير مساحة العمل إلى رمز قابل للتنفيذ في أي وقت. ويمكن تنفيذ هذا الرمز من جهة العميل باستخدام 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 لإنشاء عدة برامج JavaScript لتنفيذها في الوقت نفسه. إذا كانت اللغة المستهدَفة هي لغة مثل Python، يمكن تجميع مصفوفة allCode في برنامج واحد يستخدم وحدة ترابط.

كما هو الحال مع أي برنامج متوازٍ، يجب اتخاذ قرارات دقيقة بشأن أي موارد مشتركة، مثل المتغيرات والدوال.

برنامج يستند إلى الأحداث

معالجات الأحداث هي مجرد دوال يستدعيها النظام، وليس البرنامج. يمكن أن تحيط هذه الكتل بمجموعة الكتل التي سيتم تنفيذها، أو يمكن أن تكون عناوين تقع في أعلى مجموعة من الكتل.

يفضّل بعض المطوّرين إضافة "قبعة" إلى أعلى مربّعات الأحداث لتبدو مميّزة عن المربّعات الأخرى. هذا ليس المظهر التلقائي لـ Blockly، ولكن يمكن إضافته من خلال إلغاء قيمة الثابت ADD_START_HATS واستبدالها بالقيمة true (Custom renderers codelab - Override constants). أو من خلال إضافة مظهر وتحديد خيار "القبعة" في نمط الكتلة. لمزيد من المعلومات حول ضبط القبعات على مربّعات كجزء من المظاهر، راجِع نمط المربّع في مستندات المظاهر.

في نموذج يستند إلى الأحداث، قد يكون من المنطقي أيضًا إنشاء معالج لبدء البرنامج. بموجب هذا النموذج، سيتم تجاهل أيّ كتلة في مساحة العمل غير مرتبطة بمعالج أحداث ولن يتم تنفيذها.

عند تصميم نظام يستخدم الأحداث، يجب تحديد ما إذا كان من الممكن أو المرغوب فيه توفير مثيلات متعددة لمعالج الحدث نفسه.

تنسيق Workspace

هناك طريقتان معقولتان لتنظيم الشاشة من اليمين إلى اليسار. تبدأ إحدى الطرق بشريط الأدوات على اليسار ومساحة العمل في المنتصف وتصوّر الناتج على اليمين. يتم استخدام هذا التخطيط في الإصدار 1 من Scratch، بالإضافة إلى Made with Code.

يبدأ التنسيق الآخر بعرض البيانات المرئية على اليمين، وشريط الأدوات في الوسط، ومساحة العمل على اليسار. يتم استخدام هذا التصميم في الإصدار 2 من Scratch، بالإضافة إلى معظم تطبيقات Blockly.

في كلتا الحالتين، يجب أن تتمدد مساحة العمل لتشغل حجم الشاشة المتاح، لأنّ المستخدمين يحتاجون إلى أكبر مساحة ممكنة للبرمجة. كما هو موضّح في لقطات الشاشة أعلاه، لا يحقّق التصميم الأول أداءً جيدًا على الشاشات العريضة لأنّه يفصل بين رمز المستخدم وتمثيل الناتج. في المقابل، يتيح التصميم الثاني مساحة إضافية للبرامج الأكبر حجمًا مع إبقاء جميع الأقسام الثلاثة متقاربة.

من المنطقي أيضًا أن يفكّر المستخدمون أولاً في المشكلة التي يحاولون حلّها، ثم ينظروا إلى الأدوات المتوفّرة، وبعد ذلك فقط يبدأوا البرمجة.

بالطبع، يجب عكس ترتيب الجملة بالكامل عند الترجمة إلى العربية والعبرية.

في بعض الحالات، مثل استخدام عدد صغير من اللبنات البسيطة، قد يكون من المنطقي أن تكون مجموعة الأدوات أعلى مساحة العمل أو أسفلها. تتيح Blockly إمكانية التمرير الأفقي في "صندوق الأدوات" في هذه الحالات، ولكن يجب استخدامها بحذر.

اقتراح: ضَع التمثيل البصري للبرنامج بجانب شريط الأدوات.