الحصول على الشفرة‏

هناك عدة طرق للحصول على رمز Blockly، وعدة طرق لتحميله بعد الحصول عليه.

نص إنشاء الحِزمة

توفّر Blockly نصًا برمجيًا لبدء تطبيق أساسي، ويمكنك تعديله بعد ذلك. ويستخدم أدوات تطوير الويب الشائعة، مثل webpack و eslint، ولكنّه لا يتضمّن إطار عمل، مثل React أو Angular.

يتطلّب ذلك تثبيت node.js وnpm قبل تنفيذ الأوامر التالية.

لإنشاء تطبيق مكتوب بلغة JavaScript في دليل hello-world جديد:

npx @blockly/create-package app hello-world

لإنشاء تطبيق مكتوب بلغة TypeScript في دليل hello-world جديد:

npx @blockly/create-package app hello-world --typescript

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

يتضمّن أيضًا بعض النصوص البرمجية المفيدة للمبتدئين، مثل نص لاختبار المشروع محليًا في متصفّح:

cd hello-world
npm run start

يمكنك الرجوع إلى ملف package.json الذي تم إنشاؤه للاطّلاع على الأوامر الأخرى.

Unpkg

إذا كنت تحاول فقط تجربة أفكار ولا تريد إنشاء تطبيق كامل، يمكنك تحميل Blockly من unpkg باستخدام علامات النصوص البرمجية.

في حال إضافة ما يلي إلى أي صفحة HTML، يمكنك فتح ملف HTML مباشرةً في متصفّح لتجربة Blockly:

<!-- Load Blockly core -->
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="https://unpkg.com/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="https://unpkg.com/blockly/msg/en.js"></script>

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

الحصول على الشفرة‏

هناك عدة طرق يمكنك من خلالها الحصول على الرمز البرمجي لتشغيل Blockly.

ينصح فريق Blockly باستخدام Blockly من خلال مدير حِزم (مثل NPM أو Yarn) للأسباب التالية:

  • من الأسهل البقاء على اطّلاع بالتغييرات في Blockly
  • وتشجع على استخدام الإضافات بدلاً من تعديل Blockly.

NPM

npm install blockly --save

خيط غزل

yarn add blockly

GitHub

يمكنك أيضًا تنزيل الرمز المضغوط من إصدارات GitHub. ومع ذلك، يتطلّب ذلك تنزيل الرمز يدويًا على فترات منتظمة لتلقّي أحدث التحديثات والإصلاحات في Blockly.

تحميل الرمز

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

علامات النصوص البرمجية

<!-- Load Blockly core -->
<script src="./my-lib-directory/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="./my-lib-directory/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="./my-lib-directory/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="./my-lib-directory/blockly/msg/en.js"></script>

عند استخدام علامات النصوص البرمجية، يمكنك الوصول إلى عمليات الاستيراد من مساحة الاسم الشاملة:

// Access Blockly.
Blockly.thing;

// Access the default blocks.
Blockly.libraryBlocks['block_type'];

// Access the generator.
javascript.javascriptGenerator;

عمليات الاستيراد

// Import Blockly core.
import * as Blockly from 'blockly/core';
// Import the default blocks.
import * as libraryBlocks from 'blockly/blocks';
// Import a generator.
import {javascriptGenerator} from 'blockly/javascript';
// Import a message file.
import * as En from 'blockly/msg/en';

عند استيراد ملفات الرسائل، عليك أيضًا تطبيقها.

Blockly.setLocale(En);

المتطلبات

// Require Blockly core.
const Blockly = require('blockly/core');
// Require the default blocks.
const libraryBlocks = require('blockly/blocks');
// Require a generator.
const {javascriptGenerator} =  require('blockly/javascript');
// Require a message file.
const En = require('blockly/msg/en');

عند طلب ملفات الرسائل، عليك أيضًا تطبيقها.

Blockly.setLocale(En);