Uygulama tasarımı

Blockly kullanan bir uygulama tasarlarken seçebileceğiniz çeşitli paradigmalar vardır. Bu seçimler, kullanıcının ihtiyaç duyacağı blokları etkilediğinden erken yapılmalıdır.

Yapılandırma

Birçok Blockly uygulaması, yürütülebilir programlardan ziyade yapılandırmaları tanımlamak için kullanılır. Yapılandırma uygulamaları genellikle çalışma alanında bir kök düzeyinde blok başlatarak başlar. Bunun iyi bir örneği, Blockly Geliştirici Araçları'nın Blok Fabrikası sekmesidir:

Blockly.Blocks['factory_base'] = {
  init: function() {
    this.setDeletable(false);
    this.setMovable(false);
    this.setEditable(false);
    // etc...
  }
}

Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);

Bu işlem, kullanıcının tüm yapılandırmalarını içeren, silinemeyen ve taşınamayan bir blok oluşturur. Mevcut yapılandırmayı belirlemek için çalışma alanı istediğiniz zaman serileştirilebilir.

Bu tür uygulamalar, kök blokla bağlantılı olmayan blokları otomatik olarak devre dışı bırakmak isteyebilir. Bu işlem tek bir satırla yapılabilir:

workspace.addChangeListener(Blockly.Events.disableOrphans);

Seri program

Blockly uygulamalarının çoğu, sıralı programlar oluşturmak için tasarlanmıştır. Kullanıcılar, sırayla yürütülen blokları üst üste yerleştirir.

Çalışma alanındaki her (devre dışı bırakılmamış) blok programa dahil edilir. Birden fazla blok yığını varsa önce daha yüksek olanlar çalıştırılır. (İki yığın yaklaşık olarak aynı yükseklikteyse soldaki yığınlara (sağdan sola yazılan dillerde sağdaki yığınlara) öncelik verilir.)

Çalışma alanı, istediğiniz zaman yürütülebilir koda aktarılabilir. Bu kod, JavaScript'te istemci tarafında (eval veya JS Interpreter kullanılarak) ya da herhangi bir dilde sunucu tarafında yürütülebilir.

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

Paralel program

Bazı Blockly uygulamaları, blok yığınlarını seri olarak değil paralel olarak yürütmeyi tercih eder. Örneğin, bir müzik uygulamasında davul döngüsüyle birlikte melodi çalınabilir.

Paralel yürütmeyi uygulamanın bir yolu, her blok için kodu ayrı ayrı oluşturmaktır:

import {javascriptGenerator} from 'blockly/javascript';

var json = Blockly.serialization.workspaces.save(workspace);

// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice();  // Create shallow copy.
blocks.length = 0;

// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
  var block = topBlocks[i];
  blocks.push(block);
  Blockly.serialization.workspaces.load(json, headless);
  allCode.push(javascriptGenerator.workspaceToCode(headless));
  blocks.length = 0;
}

Hedef dil JavaScript ise allCode dizisi, eşzamanlı yürütme için birden fazla JS yorumlayıcı oluşturmak üzere kullanılabilir. Hedef dil Python gibi bir dilse allCode dizisi, iş parçacığı modülü kullanan tek bir programda birleştirilebilir.

Herhangi bir paralel programda olduğu gibi, değişkenler ve işlevler gibi paylaşılan kaynaklar konusunda dikkatli kararlar verilmelidir.

Etkinlik odaklı program

Etkinlik işleyiciler, program tarafından değil sistem tarafından çağrılan işlevlerdir. Bu bloklar, yürütülecek blok yığınını kapsayabilir veya blok yığınının üzerinde yer alan başlıklar olabilir.

Bazı geliştiriciler, etkinlik bloklarının diğer bloklardan farklı görünmesi için üst kısımlarına "şapka" eklemeyi tercih eder. Bu, Blockly'nin varsayılan görünümü değildir ancak oluşturucu sabitini ADD_START_HATS olarak true değiştirerek (Özel oluşturucularla ilgili kod laboratuvarı - Sabitleri geçersiz kılma) veya bir tema ekleyip blok stilinde şapka seçeneğini ayarlayarak eklenebilir. Temaların bir parçası olarak bloklara şapka ekleme hakkında daha fazla bilgi için tema dokümanlarındaki Blok stili bölümüne bakın.

Etkinliğe dayalı bir modelde, program başlangıcı için de bir işleyici oluşturmak mantıklı olabilir. Bu modelde, bir etkinlik işleyicisine bağlı olmayan çalışma alanındaki tüm bloklar yok sayılır ve yürütülmez.

Etkinlikleri kullanan bir sistem tasarlarken aynı etkinlik işleyicinin birden fazla örneğini desteklemenin mümkün olup olmadığını veya istenip istenmediğini göz önünde bulundurun.

Workspace düzeni

Ekranı soldan sağa doğru düzenlemenin iki makul yolu vardır. Bir yöntemde sol tarafta araç çubuğu, ortada çalışma alanı ve sağ tarafta çıkış görselleştirme bulunur. Bu düzen, Scratch'in 1. sürümü ve Made with Code tarafından da kullanılır.

Diğer yöntemde ise solda çıktı görselleştirme, ortada araç çubuğu ve sağda çalışma alanı bulunur. Bu düzen, Scratch'in 2. sürümü ve çoğu Blockly uygulaması tarafından kullanılır.

Her iki durumda da çalışma alanı, mevcut ekran boyutunu kaplayacak şekilde genişlemelidir. Kullanıcıların programlama için olabildiğince fazla alana ihtiyacı vardır. Yukarıdaki ekran görüntülerinde görüldüğü gibi, kullanıcının kodu ve çıkış görselleştirmesi ayrıldığından ilk düzen, geniş ekranlarda düşük performans gösteriyor. İkinci düzen ise üç bölümü de birbirine yakın tutarken daha büyük programlar için ekstra alan sağlar.

Kullanıcıların önce çözmeye çalıştıkları sorunu düşünmeleri, ardından sağlanan araçlara bakmaları ve ancak ondan sonra programlamaya başlamaları da mantıklıdır.

Elbette Arapça ve İbranice çevirilerde tüm sıralama tersine çevrilmelidir.

Basit blokların az sayıda kullanıldığı durumlar gibi bazı durumlarda araç kutusunun çalışma alanının üstünde veya altında olması mantıklı olabilir. Blockly, bu durumlarda araç kutusunda yatay kaydırmayı destekler ancak dikkatli kullanılmalıdır.

Öneri: Program görselleştirmesini araç çubuğunun yanına yerleştirin.