هناك عدة طرق للحصول على رمز Blockly وعدة طرق لتحميله بعد الحصول عليه.
Create-package script
توفّر 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 باستخدام مدير حزمة (مثل 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);