Kodu alın

Blockly kodunu almanın ve aldıktan sonra yüklemenin çeşitli yolları vardır.

Paket oluşturma komut dosyası

Blockly, başlangıç uygulamasını önyükleyen bir komut dosyası sağlar. Bu komut dosyasını daha sonra değiştirebilirsiniz. webpack ve eslint gibi yaygın web geliştirme araçlarını kullanır ancak React veya Angular gibi bir çerçeve içermez.

Bu işlem için aşağıdaki komutları çalıştırmadan önce node.js ve npm'yi yüklemeniz gerekir.

Yeni bir hello-world dizininde JavaScript ile yazılmış bir uygulama oluşturmak için:

npx @blockly/create-package app hello-world

Yeni bir hello-world dizininde TypeScript ile yazılmış bir uygulama oluşturmak için:

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

Bunlar, paket hedeflerini içe aktaran bir paket oluşturur. Ayrıca, bağımlılıkları yönetmek için package.json dosyası kullanır. Bu sayede Blockly'nin en son sürümünü kolayca kullanabilirsiniz.

Ayrıca, projeyi yerel olarak tarayıcıda test etme gibi bazı kullanışlı başlangıç komut dosyaları da içerir:

cd hello-world
npm run start

Diğer komutlar için oluşturulan package.json dosyasına bakabilirsiniz.

Unpkg

Yalnızca fikirlerle denemeler yapıyorsanız ve tam bir uygulama oluşturmak istemiyorsanız Blockly'yi unpkg'den komut dosyası etiketlerini kullanarak yükleyebilirsiniz.

Herhangi bir HTML sayfasına aşağıdakileri eklerseniz Blockly ile deneme yapmak için HTML'yi doğrudan tarayıcıda açabilirsiniz:

<!-- 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>

Bu yöntem, webpack gibi paketleyicilerle çalışmadığı için Blockly'yi edinmek için iyi bir uzun vadeli çözüm değildir ancak prototip oluşturma ve deneme için uygundur.

Kodu alın

Blockly'yi çalıştırmak için kodu almanın çeşitli yolları vardır.

Blockly ekibi, Blockly'nin bir paket yöneticisi (ör. NPM veya Yarn) aracılığıyla kullanılmasını önerir. Bunun nedeni:

• Blockly'deki değişikliklerden haberdar olmak daha kolaydır.
• Blockly'yi monkeypatching yapmak yerine eklentileri kullanmayı teşvik eder.

NPM

npm install blockly --save

Yumak

yarn add blockly

GitHub

Sıkıştırılmış kodu GitHub sürümlerimizden de indirebilirsiniz. Ancak Blockly'deki en son güncellemeleri ve düzeltmeleri almak için kodu düzenli aralıklarla manuel olarak indirmeniz gerekir.

Uyarı: Github'dan indirilenler yalnızca daha önce Blockly'yi çatallayan geliştiricilerin rahatlığı için sağlanır. Yeni bir geliştiriciyseniz paket yöneticisi kullanmanız gerekir.

Kodu yükleme

Kodu aldıktan sonra, kodunuza erişmek için çeşitli yöntemler kullanabilirsiniz.

Komut dosyası etiketleri

<!-- 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>

Komut dosyası etiketlerini kullanırken, global ad alanındaki içe aktarma işlemlerine erişebilirsiniz:

// Access Blockly.
Blockly.thing;

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

// Access the generator.
javascript.javascriptGenerator;

Not: Komut dosyası etiketlerini kullanırken birden fazla ileti dosyanız olamaz. Çünkü iletiler doğrudan Blockly.Msg dizisine uygulanır.

İçe aktarılanlar

Not: Paket hedeflerimizin içe aktarımlarını kullanmak için bir paketleyici (ör. webpack) kullanmanız gerekir. Bunun nedeni, Blockly'nin ESM yerine UMD olarak paketlenmesidir.

// 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';

İleti dosyalarını içe aktardığınızda bunları uygulamanız da gerekir.

Blockly.setLocale(En);

Gerekenler

// 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');

İleti dosyalarına ihtiyacınız olduğunda bunları uygulamanız da gerekir.

Blockly.setLocale(En);