Blockly Geliştirici Araçları, özel bloklar oluşturmanıza ve bunları uygulamanıza dahil etmenize yardımcı olabilecek web tabanlı bir geliştirici aracıdır.
Blok tanımlama
Blok Fabrikası çalışma alanı, boş bir yapılandırma bloğuyla başlar. Blokları araç kutusundaki ilgili kategorilerden sürükleyerek bloğa girişler ve alanlar ekleyebilirsiniz. Yapılandırma bloğunu değiştirerek blok için ipucu metnini, yardım URL'sini, rengi ve bağlantı kontrollerini de ayarlayabilirsiniz.
Blok Fabrikası aynı anda yalnızca bir tür blok oluşturabilir. Birbirine bağlı birkaç blok tasarlamak istiyorsanız blokları ayrı ayrı tasarlayıp araç kutusu tanımında bağlamanız gerekir. Ayrıca bloklar değiştiriciler gibi gelişmiş özelliklere sahip olabilir ancak bu gelişmiş özellikler Fabrika'da oluşturulamaz. Bloğun temel şeklini oluşturduktan sonra blok tanımını dokümanlara göre değiştirmeniz gerekir.
Çalışma alanındaki yapılandırma bloğunu değiştirdiğinizde bloğun önizlemesi otomatik olarak güncellenir. Uygulamanıza eklemeniz gereken kod da otomatik olarak güncellenir.
Çıkış yapılandırması
Blockly, blok tanımlama ve Blockly'nin kendisini yükleme için farklı yöntemleri destekler. Ayrıca, birden fazla yerleşik kod oluşturucu dili vardır. Bloklarınızı ve blok kodu oluşturucularınızı tanımlama şekliniz bu faktörlere bağlıdır. Bu nedenle, kod çıkışını değiştirmek için bunları Blok Fabrikası'nda ayarlayabilirsiniz.
Blockly içe aktarma biçimi
Blockly'yi HTML'deki <script> etiketleri veya uygulamanızla bir derleme aracı kullanıyorsanız import ifadeleriyle yükleyebilirsiniz. Bu seçim, Blockly API'nin belirli bölümlerine nasıl referans vereceğinizi etkiler. Hangisini seçeceğiniz hakkında daha fazla bilgi için Blockly'yi yükleme ile ilgili dokümanları inceleyin.
Hangi yöntemi kullanırsanız kullanın, uygulamanıza ekleyeceğiniz kodun uygulamanız için doğru olması amacıyla Blok Fabrikası'nda ilgili seçeneği belirlediğinizden emin olun.
Blok tanımı biçimi
Blockly, blokların JSON veya JavaScript'te tanımlanmasını destekler. JSON biçimi tercih edilir ancak mutasyonlar gibi gelişmiş özellikler ekleyecekseniz JavaScript biçimini kullanabilirsiniz.
Kod oluşturma dilini
Blockly, birden fazla kod oluşturma diliyle birlikte gelir. İlgili blok kodu oluşturucu saplamasını göstermek için uygulamanızın ihtiyaç duyduğu dilleri seçin. Özel bir dil oluşturucu kullanıyorsanız kodu uygulamanıza kopyaladıktan sonra özel CodeGenerator sınıfınızın adını değiştirebilirsiniz.
Kod çıkışı
Blok Fabrikası'nın sonraki bölümlerinde, oluşturduğunuz bloğu yüklemek için uygulamanıza kopyalamanız gereken kod gösterilir. Kodu nereye kopyalayacağınız, uygulamanızı nasıl yapılandırdığınıza bağlıdır. Ancak genellikle kodu, tanım ve blok kodu oluşturucudan önce, blok tanımlarını bir araç kutusunda kullanmaya çalışmadan önce ve blok kodu oluşturucuları bir çalışma alanı için kod oluşturmaya çalışmadan önce çalıştırmanız gerekir. Her bölüm için kopyalama düğmesini kullanarak ilgili bölümün kod bloğunun tamamını kopyalayabilirsiniz.
Kod çıkışını nasıl kullanacağınızdan hâlâ emin değilseniz özel bloklar ve blok kodu oluşturucularla ilgili örnekler içeren örnek uygulamayı inceleyebilirsiniz.
Kod başlıkları
Kod başlıkları bölümünde, temel Blockly kitaplığını ve seçtiğiniz dil oluşturucuyu yüklemek için gereken kod gösterilir. Burada başka yapılandırmalar da olabilir. Örneğin, bir bloğa ekleyebileceğiniz bazı alanlar Blockly eklentilerinden gelir. Bu eklentilerin kendi içe aktarma ifadeleri ve alanı başlatmak için çalıştırmanız gereken başka kodları olabilir. Bu kod, aşağıdaki kod bölümlerinden herhangi birinden önce eklenmelidir.
Tanımı engelleme
Blok tanımı, Blockly'ye bloğunuzun şeklini (ör. hangi alanlara ve girişlere sahip olduğu, rengi vb.) bildirme şeklinizdir. Bu kodu çalıştırdıktan sonra Blockly, yalnızca type temelinde bir blok oluşturmayı bilir.
Örnek uygulamayı kullanıyorsanız bu kodu blocks/ dizinindeki bir dosyaya ekleyebilirsiniz. Kendi uygulama yapınız varsa bir bloğa adıyla başvurmaya çalışmadan önce (ör. araç kutusu tanımında) bu kodu eklediğinizden emin olun. Her iki durumda da, bu kodu eklediğiniz dosyada kod başlıklarının bulunduğundan emin olun.
Jeneratör saplaması
Blok kodu oluşturucu, bir blok için oluşturulması gereken kodu açıklama şeklinizdir. Block Factory tarafından oluşturulan oluşturucu saplaması, bloğunuzdaki girişlerin ve alanların değerlerini almak için temel kodu sağlar. Bu değerleri, oluşturulacak nihai kodda birleştirmek sizin sorumluluğunuzdadır.
Örnek uygulamayı kullanıyorsanız bu kodu generators/ dizinindeki bir dosyaya ekleyebilirsiniz. Kendi uygulama yapınız varsa özel bloklarınızı içeren bir çalışma alanı için kod oluşturmaya çalışmadan önce bu kodu eklediğinizden emin olun. Her iki durumda da kod başlıklarının, bu kodu eklediğiniz dosyada bulunduğundan emin olun.
Adım adım açıklamalı video kılavuzu
Bu videoda, bir bloğun tanımlanmasıyla ilgili adımlar ayrıntılı olarak açıklanmaktadır. Kullanıcı arayüzü güncel olmasa da vurgulanan blok özellikleri aşağı yukarı doğrudur.
Blok kitaplığı
Bloklarda değişiklik yaptığınızda bloklar otomatik olarak tarayıcının yerel depolama alanına kaydedilir. Üst araç çubuğundaki ilgili düğmeleri tıklayarak yeni bir blok oluşturabilir veya yerel depolama alanınızdan mevcut bir bloğu yükleyebilirsiniz.
Eski Block Factory'den içe aktarma
Eski Blok Fabrikası'nı kullandıysanız ve mevcut blok tanımlarınızı yeni araca taşımak istiyorsanız aşağıdaki adımları uygulayabilirsiniz:
Eski Blok Fabrikası'nda araç çubuğundaki
Export Block Librarydüğmesini tıklayın. Bu işlem, tüm blok tanımlarınızı içeren bir dosyayı indirir.
Yeni Blok Fabrikası'nda araç çubuğundaki "Blok yükle" düğmesini tıklayın.
Menüde "Import from Block Factory" (Blok Fabrikası'ndan İçe Aktar) seçeneğini belirleyin.
1. adımda indirdiğiniz dosyayı yükleyin.
Blok tanımlarınız otomatik olarak yeni biçime dönüştürülür ve artık
Load blockmenüsünden kullanılabilir. Mevcut bloklarla çakışma olması durumunda bloklar yeniden adlandırılmış olabilir.Bloklarınızdan herhangi birinin ayrıştırılması sırasında hata oluşursa bu blokları yükleyemeyiz. Bir hata bildirimi göndererek ve ayrıştırılmayan dosyayı ekleyerek bize yardımcı olabilirsiniz.