ابزارهای توسعه دهنده Blockly

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

تصویری از کارخانه بلوک که جعبه ابزار و نواحی مختلف خروجی را نشان می دهد

بلوک را تعریف کنید

فضای کاری Block Factory با یک بلوک پیکربندی خالی شروع می شود. می‌توانید با کشیدن بلوک‌ها از دسته‌های مربوطه در جعبه ابزار، ورودی‌ها و فیلدها را به بلوک اضافه کنید. همچنین می‌توانید با تغییر بلوک پیکربندی، متن راهنمای ابزار، URL راهنما، رنگ و بررسی اتصال را برای بلوک تنظیم کنید.

Block Factory فقط می تواند یک نوع بلوک را در یک زمان ایجاد کند. اگر می‌خواهید چندین بلوک را طراحی کنید که به یکدیگر متصل هستند، باید بلوک‌ها را جداگانه طراحی کنید و آنها را در تعریف جعبه ابزار به هم متصل کنید. علاوه بر این، بلوک‌ها می‌توانند ویژگی‌های پیشرفته‌ای مانند mutators داشته باشند، اما این ویژگی‌های پیشرفته را نمی‌توان در کارخانه ایجاد کرد. پس از اینکه شکل اصلی بلوک را ساختید، باید تعریف بلوک را مطابق با مستندات تغییر دهید.

همانطور که بلوک پیکربندی را در فضای کاری تغییر می دهید، پیش نمایش بلوک به طور خودکار به روز می شود. کدی که باید به برنامه خود اضافه کنید نیز به صورت خودکار به روز می شود.

پیکربندی خروجی

Blockly از روش‌های مختلف تعریف بلوک‌ها و بارگیری خود Blockly و همچنین داشتن چندین زبان سازنده کد داخلی پشتیبانی می‌کند. نحوه تعریف بلوک‌ها و تولیدکنندگان کد بلوک به این عوامل بستگی دارد، بنابراین می‌توانید آن‌ها را در Block Factory برای تغییر خروجی کد تنظیم کنید.

تصویر صفحه‌نمایش پانل پیکربندی خروجی، با انتخاب‌کننده‌هایی برای قالب واردات بلوکی، قالب تعریف بلوک، و زبان تولیدکننده کد

قالب وارد کردن مسدود کردن

می‌توانید Blockly را از طریق تگ‌های <script> در HTML بارگیری کنید، یا اگر از ابزار ساخت با برنامه خود استفاده می‌کنید، از دستورهای import استفاده کنید. این انتخاب بر نحوه ارجاع بخش‌های خاصی از Blockly API تأثیر می‌گذارد. برای اطلاعات بیشتر در مورد انتخاب، به مستندات مربوط به بارگیری Blockly مراجعه کنید. از هر روشی که استفاده می کنید، مطمئن شوید که گزینه مربوطه را در Block Factory انتخاب کنید تا کدی که به برنامه خود اضافه می کنید برای برنامه شما دقیق باشد.

قالب تعریف بلوک

Blockly از تعریف بلوک ها در JSON یا جاوا اسکریپت پشتیبانی می کند. فرمت JSON ترجیح داده می شود، اما اگر ویژگی های پیشرفته ای مانند mutators را اضافه می کنید، می توانید از فرمت جاوا اسکریپت استفاده کنید.

زبان تولید کننده کد

Blockly با چندین زبان تولید کننده کد ارسال می شود. زبان(های) مورد نیاز برنامه خود را برای نشان دادن خرد مولد کد بلوک مربوطه انتخاب کنید. اگر از یک تولید کننده زبان سفارشی استفاده می کنید، می توانید نام کلاس CodeGenerator سفارشی خود را پس از کپی کردن کد در برنامه خود تغییر دهید.

خروجی کد

بخش‌های بعدی Block Factory کدی را به شما نشان می‌دهد که باید برای بارگیری بلوکی که ایجاد کرده‌اید در برنامه خود کپی کنید. جایی که کد را کپی می کنید به نحوه ساختار برنامه خود بستگی دارد، اما به طور کلی باید سرصفحه های کد را قبل از تعریف و تولید کننده کد بلوک، تعاریف بلوک را قبل از استفاده از آنها در جعبه ابزار اجرا کنید، و قبل از اینکه بخواهید برای یک فضای کاری کد تولید کنید، مولدهای کد بلوک را تولید کنید. برای هر یک از بخش ها، می توانید از دکمه کپی استفاده کنید تا کل بلوک کد آن بخش را کپی کنید.

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

سرصفحه های کد

بخش Code Headers کدی را که برای بارگیری کتابخانه هسته Blockly نیاز دارید و مولد زبانی که انتخاب کرده اید نشان می دهد. ممکن است پیکربندی دیگری نیز در اینجا وجود داشته باشد. به عنوان مثال، برخی از فیلدهایی که ممکن است در یک بلوک قرار دهید از افزونه های Blockly هستند. این افزونه‌ها عبارت‌های واردات و احتمالاً کدهای دیگری را دارند که باید برای مقداردهی اولیه فیلد اجرا کنید. این کد باید قبل از هر یک از بخش های کد زیر درج شود.

تعریف بلوک

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

اگر از برنامه نمونه استفاده می‌کنید، می‌توانید این کد را در فایلی در زیر blocks/ دایرکتوری قرار دهید. اگر ساختار برنامه خود را دارید، قبل از اینکه بخواهید یک بلوک را با نام ارجاع دهید، مانند تعریف جعبه ابزار، حتماً این کد را وارد کنید. در هر صورت، مطمئن شوید که سرصفحه های کد در فایلی که این کد را در آن قرار داده اید وجود دارد.

خرد ژنراتور

مولد کد بلوک نحوه توصیف کدی است که باید برای یک بلوک تولید شود. خرد مولد ایجاد شده توسط Block Factory کد اصلی را برای دریافت مقادیر ورودی ها و فیلدهای موجود در بلوک به شما می دهد. این به شما بستگی دارد که این مقادیر را در کد نهایی که تولید می شود ترکیب کنید!

اگر از برنامه نمونه استفاده می‌کنید، می‌توانید این کد را در فایلی در زیر شاخه generators/ قرار دهید. اگر ساختار برنامه خود را دارید، قبل از ایجاد کد برای فضای کاری که شامل بلوک‌های سفارشی شما می‌شود، حتماً این کد را وارد کنید. در هر صورت، مطمئن شوید که سرصفحه های کد در فایلی که این کد را در آن قرار داده اید وجود دارد.

راهپیمایی ویدیویی

این ویدئو مراحل تعریف بلوک را به طور مفصل طی می کند. رابط کاربری قدیمی است، اما ویژگی های بلوکی که برجسته می کند کم و بیش دقیق هستند.

کتابخانه را مسدود کنید

هر زمان که بلوک را تغییر دهید، بلوک ها به طور خودکار در حافظه محلی مرورگر ذخیره می شوند. می‌توانید با کلیک کردن روی دکمه‌های مربوطه در نوار ابزار بالا، یک بلوک جدید ایجاد کنید یا یک بلوک موجود را از فضای ذخیره‌سازی محلی خود بارگیری کنید.

واردات از کارخانه بلوک قدیمی

اگر از Block Factory قدیمی استفاده کرده اید و می خواهید تعاریف بلوک موجود خود را به ابزار جدید منتقل کنید، می توانید این کار را با دنبال کردن مراحل زیر انجام دهید:

  1. در کارخانه Block Factory، روی دکمه Export Block Library در نوار ابزار کلیک کنید. با این کار یک فایل با تمام تعاریف بلوک شما دانلود می شود.

    اسکرین شات از کارخانه بلوک قدیمی با برجسته شدن دکمه «Export Block Library»

  2. در Block Factory جدید، روی دکمه Load block در نوار ابزار کلیک کنید.

  3. گزینه "واردات از کارخانه بلوک" را در منو انتخاب کنید.

    اسکرین شات کارخانه Block که دکمه های "Load block" و "Import" را برجسته می کند

  4. فایلی را که در مرحله 1 دانلود کرده اید آپلود کنید.

  5. تعاریف بلوک شما باید به صورت خودکار به فرمت جدید تبدیل شود و اکنون از منوی Load block در دسترس خواهد بود. در صورت وجود تداخل با بلوک های موجود، ممکن است بلوک ها تغییر نام داده باشند.

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