مقدمه ای بر برنامه های Blockly

برنامه Blockly یک برنامه وب است که حاوی یک ویرایشگر Blockly (فضای کاری) است. این سند نمونه‌هایی از کاربردهای برنامه‌های Blockly را ارائه می‌کند و به ویژگی‌های معمولی UI نگاه می‌کند.

اگر قبلاً این کار را انجام نداده اید، قبل از ادامه این سند، حتماً واژه نامه تصویری و مراحل اولیه برنامه کاربردی را بخوانید.

برنامه های Blockly چه کار می کنند؟

برنامه های Blockly به کاربران کمک می کند تا برنامه هایی را در زمینه های مختلف بنویسند، از بازی های ویدیویی گرفته تا روباتیک و تجزیه و تحلیل داده ها. کاربران برنامه های خود را با استفاده از بلوک ها می نویسند که برنامه از آنها برای تولید کدهای متنی مانند جاوا اسکریپت یا پایتون استفاده می کند. سپس برنامه به طور مستقیم کد تولید شده را اجرا می کند یا کاربر آن را دانلود کرده و روی پلتفرم دیگری مانند ربات یا کنترلر بازی ویدیویی دستی اجرا می کند .

در اینجا چند نمونه از انواع برنامه هایی که کاربران با برنامه های Blockly می نویسند آورده شده است:

  • راه حل های پازل، انیمیشن یا موسیقی: کد تولید شده یک پازل (مانند یک پیچ و خم) را حل می کند، یک انیمیشن را نمایش می دهد یا موسیقی پخش می کند. برای مثال، به آزمایشگاه موسیقی Code.org مراجعه کنید.

  • بازی های ویدیویی: کد تولید شده یک بازی ویدیویی را اجرا می کند. به عنوان مثال، دو سطح اول "Whack the Mole" را در MakeCode Arcade ایجاد کنید و بازی را در یک کنترلر دانلود کنید یا آن را در شبیه ساز بازی کنید.

  • رباتیک: کد تولید شده یک ربات را هدایت می کند. به عنوان مثال، یک ربات را با Ozoblockly برنامه ریزی کنید و آن را در یک ربات واقعی دانلود کنید یا آن را در شبیه ساز اجرا کنید.

  • ترسیم: کد تولید شده یک نقاشی دو بعدی یا سه بعدی را ترسیم می کند. برای مثال، BlocksCAD را ببینید.

  • تجزیه و تحلیل داده ها: کد تولید شده داده ها را تجزیه و تحلیل می کند و یک نمودار ایجاد می کند. برای مثال، به این نمایش از Dialogic Platform مراجعه کنید.

  • کد خاص برنامه: کد تولید شده یک کار خاص برای یک برنامه خاص را انجام می دهد. به عنوان مثال، ابزار توسعه Blockly ابزاری برای طراحی بلوک های جدید Blockly است. کد تعریف بلوک را تولید می کند که کاربران آن را کپی و در برنامه Blockly خود جایگذاری می کنند.

رابط های کاربری

یک راه خوب برای درک اجزای معمولی برنامه های Blockly این است که به رابط کاربری آنها نگاه کنید.

اجزای اصلی UI

تقریباً همه برنامه‌های Blockly چند مؤلفه اساسی را به اشتراک می‌گذارند: یک ویرایشگر Blockly (فضای کاری)، یک پانل خروجی و یک دکمه Run . برای مثال، در اینجا رابط کاربری Maze در Blockly Games آمده است.

رابط کاربری یک برنامه ماز با یک ویرایشگر، یک پانل خروجی و یک Run دکمه

برخی از برنامه های Blockly دکمه Run را حذف می کنند و در عوض هر بار که کاربر تغییری ایجاد می کند، پانل خروجی را به روز می کند. به عنوان مثال، برنامه Graph در نمونه های Blockly دارای دو پانل خروجی (یکی برای نمودار و دیگری برای معادله) است که در هر تغییر به روز می شود.

رابط کاربری یک برنامه گراف با یک ویرایشگر، یک پانل خروجی برای یک معادله ساخته شده توسط کاربر، و یک پانل خروجی برای نمودار آن معادله

برخی از برنامه ها پنل خروجی ندارند. این در برنامه‌های سخت‌افزاری، مانند برنامه‌نویسی روبات‌ها، رایج‌تر است. در حالی که برخی از این برنامه ها شامل یک شبیه ساز سخت افزاری هستند، بسیاری از آنها فقط به کاربران اجازه می دهند کد تولید شده را مستقیماً روی دستگاه مورد نظر دانلود و اجرا کنند.

اجزای UI اضافی

اکثر برنامه ها دارای اجزای UI اضافی هستند. برخی از آنها نیازهای عمومی مانند ذخیره کار کاربر را برآورده می کنند، در حالی که برخی دیگر نیازهای خاص برنامه مانند طراحی رابط کاربری گرافیکی را برآورده می کنند. در اینجا چند نمونه آورده شده است:

  • Scratch ، اپلیکیشنی برای ساخت انیمیشن و بازی های ویدئویی، دارای ویرایشگرهای گرافیکی و صدا. پانل هایی برای ایجاد sprites و پس زمینه های جدید. و منوهای فایل، ویرایش و تنظیمات:

    کاربر Scratch رابط.

  • MakeCode Arcade ، برنامه ای برای ایجاد بازی های ویدیویی، دارای کنترل های خروجی، ویرایشگرهای کد و گرافیک، منوی تنظیمات و دکمه های دانلود و ذخیره است. پنل خروجی آن یک کنترلر بازی دستی را شبیه سازی می کند.

    کاربر MakeCode Arcade رابط.

  • MIT App Inventor ، برنامه‌ای برای ایجاد برنامه‌های تلفن، دارای صفحه‌های مجزا برای طراح رابط کاربری گرافیکی و ویرایشگر Blockly، و همچنین منوهای فایل، اتصال، ساخت و تنظیمات است. کاربران به جای پنل خروجی، کد تولید شده را روی گوشی خود آزمایش می کنند.

    طراح رابط کاربری گرافیکی در کاربر App Inventor رابط کاربریویرایشگر Blockly در کاربر App Inventor رابط کاربری

اینکه کدام مؤلفه های اضافی را باید بگنجانید بستگی به اهداف برنامه شما و توانایی های کاربران شما دارد. برخی از اجزای رایج عبارتند از:

  • مدیریت:

    • مدیریت فایل (جدید، باز، ذخیره، ذخیره به عنوان، حذف)
    • مدیریت حساب (ایجاد، ورود، خروج)
    • تنظیمات (زبان، پیکربندی رابط کاربری)
  • برنامه نویسی:

    • دستورات ویرایش (واگرد، دوباره، کپی، برش، چسباندن، تکرار)
    • طراح رابط کاربری گرافیکی
    • ویرایشگرهای گرافیک و صدا
    • ویرایشگر کد یا نمایش کد فقط خواندنی
  • تست کردن

    • پیکربندی خروجی (شروع/توقف، سرعت پخش، صدا، اسکرین شات و غیره)
    • اشکال زدا (نقاط شکست، اجرا، مرحله، برجسته سازی بلوک)
    • پارامترهای تست را تنظیم کنید
  • سخت افزار

    • اتصال (USB، بلوتوث، کد QR)
    • پیکربندی (انتخاب مدل، انتخاب لوازم جانبی، اختصاص نام اجزا)
    • کنترل (کنترل دستی ربات، ثبت موقعیت ربات)
    • دانلود کد
  • کمک کنید

    • مستندات
    • آموزش های تعاملی
    • کمک حساس به متن

از اینجا کجا برم؟

اگر هنوز به برنامه خود فکر می کنید، به مطالعه در مورد ملاحظات طراحی ادامه دهید.

اگر می‌خواهید ببینید ساختن یک برنامه ساده چگونه است، شروع به کار با کد Blockly را امتحان کنید.

و اگر آماده نوشتن درخواست خود هستید: