مقدمة عن تطبيقات Blockly

تطبيق Blockly هو تطبيق ويب يحتوي على محرِّر Blockly (مساحة عمل). يقدّم هذا المستند أمثلة على استخدامات تطبيقات Blockly، كما يتناول ميزات واجهة المستخدم النموذجية.

إذا لم يسبق لك ذلك، احرص على قراءة المسرد المرئي وخطوات التطبيق الأساسية قبل المتابعة إلى هذا المستند.

ما هي وظيفة تطبيقات Blockly؟

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

في ما يلي بعض الأمثلة على أنواع البرامج التي يكتبها المستخدمون باستخدام تطبيقات Blockly:

  • حلول الألغاز أو الصور المتحركة أو الموسيقى: يحلّ الرمز البرمجي الذي تم إنشاؤه لغزًا (مثل متاهة) أو يعرض صورة متحركة أو يشغّل موسيقى. للاطّلاع على مثال، يُرجى الانتقال إلى Music Lab من Code.org.

  • ألعاب الفيديو: يشغّل الرمز الذي تم إنشاؤه لعبة فيديو. على سبيل المثال، يمكنك إنشاء المستويَين الأول والثاني من لعبة "اضرب الخلد" في MakeCode Arcade وتنزيل اللعبة على وحدة تحكّم أو تشغيلها في المحاكي.

  • الروبوتات: يوجّه الرمز الذي تم إنشاؤه روبوتًا. على سبيل المثال، يمكنك برمجة روبوت باستخدام Ozoblockly وتنزيل البرنامج على روبوت حقيقي أو تشغيله في المحاكي.

  • الرسم: يرسم الرمز الذي تم إنشاؤه رسمًا ثنائي الأبعاد أو ثلاثي الأبعاد. للاطّلاع على مثال، يُرجى الانتقال إلى BlocksCAD.

  • تحليل البيانات: تحلّل التعليمات البرمجية التي تم إنشاؤها البيانات وتنشئ رسمًا بيانيًا. للاطّلاع على مثال، راجِع هذا العرض التوضيحي لمنصة Dialogic.

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

واجهات المستخدم

من الطرق الجيدة لفهم المكوّنات النموذجية لتطبيقات Blockly إلقاء نظرة على واجهات المستخدم الخاصة بها.

مكوّنات واجهة المستخدم الأساسية

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

واجهة مستخدم لتطبيق متاهة يتضمّن محرّرًا ولوحة إخراج وزر تشغيل

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

واجهة مستخدم لتطبيق رسم بياني يتضمّن محرّرًا ولوحة نتائج لمعادلة أنشأها المستخدم ولوحة نتائج للرسم البياني الخاص بهذه المعادلة

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

مكوّنات إضافية لواجهة المستخدم

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

  • Scratch هو تطبيق لإنشاء صور متحركة وألعاب فيديو، ويتضمّن أدوات تعديل الرسومات والصوت، ولوحات لإنشاء كائنات وخلفيات جديدة، وقوائم للملفات والتعديل والإعدادات:

    واجهة مستخدم Scratch

  • MakeCode Arcade هو تطبيق لإنشاء ألعاب فيديو، ويتضمّن عناصر تحكّم في الإخراج، وأدوات تعديل للرموز والرسومات، وقائمة إعدادات، وزرَّين للتنزيل والحفظ. تحاكي لوحة الإخراج ذراع تحكّم في الألعاب محمول باليد.

    واجهة مستخدم MakeCode Arcade

  • يحتوي تطبيق MIT App Inventor، وهو تطبيق لإنشاء تطبيقات الهواتف، على شاشات منفصلة لتصميم واجهة المستخدم الرسومية ومحرّر Blockly، بالإضافة إلى قوائم الملفات والاتصال والإنشاء والإعدادات. وبدلاً من لوحة الإخراج، يختبر المستخدمون الرمز البرمجي الذي تم إنشاؤه على هواتفهم.

    أداة تصميم واجهة المستخدم الرسومية في واجهة مستخدم App Inventor محرّر Blockly في واجهة مستخدم App Inventor

تعتمد المكوّنات الإضافية التي يجب تضمينها على أهداف تطبيقك وقدرات المستخدمين. بعض المكوّنات الشائعة هي:

  • الإدارة:

    • إدارة الملفات (إنشاء ملف جديد أو فتحه أو حفظه أو حفظه باسم أو حذفه)
    • إدارة الحساب (إنشاء الحساب وتسجيل الدخول والخروج)
    • الإعدادات (اللغة، إعدادات واجهة المستخدم)

  • البرمجة:

    • أوامر التعديل (التراجع والإعادة والنسخ والقص واللصق والتكرار)
    • مصمّم واجهة المستخدم الرسومية
    • أدوات تعديل الرسومات والصوت
    • أداة تعديل الرموز البرمجية أو عرض الرموز البرمجية للقراءة فقط

  • الاختبار

    • إعدادات الإخراج (البدء/الإيقاف، وسرعة التشغيل، ومستوى الصوت، ولقطة الشاشة، وما إلى ذلك)
    • برنامج تصحيح الأخطاء (نقاط الإيقاف، التشغيل، التنفيذ خطوة بخطوة، تمييز الحظر)
    • ضبط مَعلمات الاختبار

  • أجهزة

    • طريقة الربط (USB أو بلوتوث أو رمز استجابة سريعة)
    • الإعداد (اختيار الطراز، واختيار الملحقات، وتحديد أسماء المكوّنات)
    • التحكّم (التحكّم يدويًا في الروبوت، وتسجيل موضع الروبوت)
    • تنزيل الرمز

  • مساعدة

    • الوثائق
    • برامج تعليمية تفاعلية
    • المساعدة المتعلقة بالمحتوى

ما هي الخطوات التالية؟

إذا كنت لا تزال تفكّر في تطبيقك، يمكنك مواصلة القراءة عن اعتبارات التصميم.

إذا أردت معرفة كيفية إنشاء تطبيق بسيط، جرِّب Getting started with Blockly codelab.

إذا كنت مستعدًا لكتابة طلبك، اتّبِع الخطوات التالية: