Kod oluşturma

Kod oluşturma, bir çalışma alanındaki blokları yürütülebilecek bir kod dizesine dönüştürme işlemidir.

Kod üretmek, bloklarınızın aritmetik ifadeleri değerlendirme, bir karakteri labirentte hareket ettirme veya online mağaza yapılandırma gibi işlemler yapmasını sağladığı için son derece önemlidir.

Blokları doğrudan "koşamazsınız". Bunun yerine kod dizeleri oluşturur ve ardından bunları yürütürsünüz.

Kod oluşturma araçları

Kod oluşturmak için hangi metin tabanlı dili oluşturmak istediğinizi seçmeniz gerekir.

Kod oluşturma aracı, belirli bir dile özgü olan ancak tek bir bloka özgü olmayan kod oluşturma kurallarını işleyen bir sınıftır. Örneğin, yorumları biçimlendirme, ifadeler girintilendirme ve dizeleri alıntılama gibi işlemleri işler.

// javascriptGenerator is a code generator that makes javascript strings.
import {javascriptGenerator} from 'blockly/javascript';

const code = javascriptGenerator.workspaceToCode(myWorkspace);

Blockly, 5 yerleşik kod oluşturucu sunar:

• JavaScript ES5
• Piton 3
• Lua 5.1
• Dart 2
• 7 PHP

Aşağıdaki yöntemlerden birini kullanarak oluşturucuları içe aktarabilir ve kullanabilirsiniz.

Modüller

import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
import {phpGenerator} from 'blockly/php';
import {luaGenerator} from 'blockly/lua';
import {dartGenerator} from 'blockly/dart';

const jsCode = javascriptGenerator.workspaceToCode(workspace);
const pythonCode = pythonGenerator.workspaceToCode(workspace);
const phpCode = phpGenerator.workspaceToCode(workspace);
const luaCode = luaGenerator.workspaceToCode(workspace);
const dartCode = dartGenerator.workspaceToCode(workspace);

Paketlenmemiş

Blockly'yi dahil ettikten sonra oluşturucuyu da eklemeniz gerekir.

<script src="https://unpkg.com/blockly"></script>
<script src="https://unpkg.com/blockly/javascript_compressed"></script>
<script src="https://unpkg.com/blockly/python_compressed"></script>
<script src="https://unpkg.com/blockly/php_compressed"></script>
<script src="https://unpkg.com/blockly/lua_compressed"></script>
<script src="https://unpkg.com/blockly/dart_compressed"></script>

const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

Yerel komut dosyaları

Blockly'yi dahil ettikten sonra oluşturucuyu da eklemeniz gerekir.

<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="python_compressed.js"></script>
<script src="php_compressed.js"></script>
<script src="lua_compressed.js"></script>
<script src="dart_compressed.js"></script>

const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

Bu liste, kod oluşturmak istediğiniz dili içermiyorsa bir özel kod oluşturma aracı da oluşturabilirsiniz.

Blok kodu oluşturma araçları

Kod oluşturmanın ikinci adımı, tek tek blokların hangi kodu oluşturacağını tanımlamaktır. Bu işlem, oluşturmak istediğiniz her bir dil için her blok için yapılmalıdır.

javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ }

Farklı blok türleri için kod oluşturucular farklı şekillerde çalışır:

• Çıkış içeren engellemeler
• Çıkışı olmayan engellemeler

Ancak bunların hepsinde alanlardan değerlerin toplanması, iç blokların kodunun toplanması ve ardından bu dizelerin birleştirilmesi gerekir.

Nesil

Oluşturma işlemi, son kullanıcı istediğinde (ör. bir düğmeyi tıkladığında) veya sürekli olarak gerçekleştirilebilir.

Sürekli güncellemeler, kullanıcı bir değişiklik yaptığında kodu göstermenize veya çalıştırmanıza olanak tanır. Kod oluşturmak hızlı bir işlemdir, dolayısıyla bunu yapmanın performans üzerindeki etkisi çok az olur. Bu işlem bir etkinlik işleyici kullanılarak yapılır.

const supportedEvents = new Set([
  Blockly.Events.BLOCK_CHANGE,
  Blockly.Events.BLOCK_CREATE,
  Blockly.Events.BLOCK_DELETE,
  Blockly.Events.BLOCK_MOVE,
]);

function updateCode(event) {
  if (workspace.isDragging()) return; // Don't update while changes are happening.
  if (!supportedEvents.has(event.type)) return;

  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}

workspace.addChangeListener(updateCode);

Önsöz veya sonsöz kodu

Kodunuzu oluşturduktan sonra, (isteğe bağlı) ön veya ön eki, oluşturulan kodun başına veya sonuna ekleyebilirsiniz.

let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
code = `const def = 'some value';\n${code}\nkickOffSomeFunction();\n`;

Önsöz kodu genellikle kodun başına harici tanımlar eklemek için kullanılır. Postscript kodu genellikle kodun sonunda davranışı başlatmak amacıyla işlevleri çağırmak için kullanılır.

Oluşturulan kodunuz olduğu gibi çalıştırılabiliyorsa önsöz veya postscript eklemenize gerek yoktur.

Uygulama

Kodu oluşturduktan sonra, nasıl yürüteceğinizi bulmanız gerekir. Bu komutun nasıl yürütüleceğine karar vermek oldukça uygulamaya özeldir ve Blockly'nin kapsamı dışındadır.

Blockly ekibi, JavaScript kodu için JSInterpreter'nın kullanılmasını önerir. Diğer diller için başka araçlar gerekir.