Blockly uygulamalarına giriş

Blockly uygulaması, Blockly düzenleyicisi (çalışma alanı) içeren bir web uygulamasıdır. Bu belgede, Blockly uygulamalarının ne için kullanıldığına dair örnekler verilmekte ve tipik kullanıcı arayüzü özellikleri incelenmektedir.

Henüz yapmadıysanız bu belgeye devam etmeden önce görsel sözlüğü ve temel uygulama adımlarını okuduğunuzdan emin olun.

Blockly uygulamaları ne işe yarar?

Blockly uygulamaları, kullanıcıların video oyunlarından robotik ve veri analizine kadar çeşitli alanlarda program yazmasına yardımcı olur. Kullanıcılar, programlarını bloklar kullanarak yazar. Uygulama, JavaScript veya Python gibi metin tabanlı kod oluşturmak için bu blokları kullanır. Uygulama daha sonra oluşturulan kodu doğrudan çalıştırır veya kullanıcı kodu indirip başka bir platformda çalıştırır (ör. robot ya da elde taşınabilir video oyunu kumandası).

Kullanıcıların Blockly uygulamalarıyla yazdığı program türlerine ilişkin bazı örnekler:

  • Bulmaca çözümleri, animasyon veya müzik: Oluşturulan kod, bir bulmacayı (ör. labirent) çözer, animasyon gösterir veya müzik çalar. Örnek için Code.org'un Music Lab'ine bakın.

  • Video oyunları: Oluşturulan kod, video oyunu çalıştırır. Örneğin, MakeCode Arcade'de "Whack the Mole" oyununun ilk iki seviyesini oluşturun ve oyunu bir kontrol cihazına indirin veya simülatörde oynayın.

  • Robotik: Oluşturulan kod, bir robotu yönlendirir. Örneğin, Ozoblockly ile bir robot programlayıp bunu gerçek bir robota indirebilir veya simülatörde çalıştırabilirsiniz.

  • Çizim: Oluşturulan kod, 2 boyutlu veya 3 boyutlu bir çizim yapar. Örnek için BlocksCAD'e bakın.

  • Veri analizi: Oluşturulan kod, verileri analiz eder ve bir grafik oluşturur. Örneğin, Dialogic Platformu'nun bu tanıtımına bakın.

  • Uygulamaya özel kod: Oluşturulan kod, belirli bir uygulamaya özel bir görev gerçekleştirir. Örneğin, Blockly Developer Tools, yeni Blockly blokları tasarlamak için kullanılan bir araçtır. Kullanıcıların kendi Blockly uygulamalarına kopyalayıp yapıştırdığı blok tanımı kodu oluşturur.

Kullanıcı arayüzleri

Blockly uygulamalarının tipik bileşenlerini anlamanın iyi bir yolu, kullanıcı arayüzlerine bakmaktır.

Temel kullanıcı arayüzü bileşenleri

Neredeyse tüm Blockly uygulamaları birkaç temel bileşeni paylaşır: Blockly düzenleyicisi (çalışma alanı), çıkış paneli ve "Çalıştır" düğmesi. Örneğin, Blockly Games'teki Labirent'in kullanıcı arayüzünü burada görebilirsiniz.

Düzenleyici, çıkış paneli ve Çalıştır düğmesi içeren bir labirent uygulamasının kullanıcı arayüzü.

Bazı Blockly uygulamalarında "Çalıştır" düğmesi bulunmaz ve bunun yerine kullanıcı her değişiklik yaptığında çıkış paneli güncellenir. Örneğin, Blockly'nin örneklerindeki Graph uygulaması, her değişiklikte güncellediği iki çıkış paneline (biri grafik, diğeri denklem için) sahiptir.

Bir grafik uygulamasının kullanıcı tarafından oluşturulan bir denklemin düzenleyicisini, çıkış panelini ve bu denklemin grafiğinin çıkış panelini içeren kullanıcı arayüzü.

Bazı uygulamalarda çıkış paneli yoktur. Bu durum en çok robot programlama gibi donanım uygulamalarında görülür. Bu uygulamalardan bazılarında donanım simülatörü bulunsa da çoğu, kullanıcıların oluşturulan kodu doğrudan hedef cihaza indirip çalıştırmasına olanak tanır.

Ek kullanıcı arayüzü bileşenleri

Çoğu uygulamada ek kullanıcı arayüzü bileşenleri bulunur. Bunlardan bazıları kullanıcının çalışmasını kaydetme gibi genel ihtiyaçları karşılarken bazıları da GUI tasarlama gibi uygulamaya özel ihtiyaçları karşılar. Aşağıda bazı örnekler verilmiştir:

  • Animasyon ve video oyunları oluşturmaya yönelik bir uygulama olan Scratch'te grafik ve ses düzenleyiciler, yeni karakterler ve arka planlar oluşturmaya yönelik paneller ile dosya, düzenleme ve ayarlar menüleri bulunur:

    Scratch kullanıcı arayüzü.

  • Video oyunları oluşturmaya yönelik bir uygulama olan MakeCode Arcade'de çıkış kontrolleri, kod ve grafik düzenleyiciler, bir ayarlar menüsü ile indirme ve kaydetme düğmeleri bulunur. Çıkış paneli, elde taşınabilir bir oyun kumandasını simüle eder.

    MakeCode Arcade kullanıcı arayüzü.

  • Telefon uygulamaları oluşturmaya yönelik bir uygulama olan MIT App Inventor'da; GUI tasarımcısı, Blockly düzenleyicisi, dosya, bağlantı, derleme ve ayarlar menüleri için ayrı ekranlar bulunur. Kullanıcılar, çıkış paneli yerine telefonlarında oluşturulan kodu test eder.

    App Inventor kullanıcı arayüzündeki GUI tasarımcısı App Inventor kullanıcı arayüzündeki Blockly düzenleyici

Hangi ek bileşenleri dahil etmeniz gerektiği, uygulamanızın hedeflerine ve kullanıcılarınızın yeteneklerine bağlıdır. Yaygın olarak kullanılan bazı bileşenler şunlardır:

  • Yönetim:

    • Dosya yönetimi (yeni, aç, kaydet, farklı kaydet, sil)
    • Hesap yönetimi (oluşturma, giriş, çıkış)
    • Ayarlar (dil, kullanıcı arayüzü yapılandırması)
  • Programlama:

    • Düzenleme komutları (geri alma, yeniden yapma, kopyalama, kesme, yapıştırma, çoğaltma)
    • GUI tasarımcısı
    • Grafik ve ses düzenleyiciler
    • Kod düzenleyici veya salt okunur kod gösterimi
  • Test

    • Çıkış yapılandırması (başlatma/durdurma, oynatma hızı, ses düzeyi, ekran görüntüsü vb.)
    • Hata ayıklayıcı (kesme noktaları, çalıştırma, adım, blok vurgulama)
    • Test parametrelerini ayarlama
  • Donanım

    • Bağlantı (USB, Bluetooth, QR kodu)
    • Yapılandırma (model seçme, aksesuar seçme, bileşen adları atama)
    • Kontrol (robotu manuel olarak kontrol etme, robotun konumunu kaydetme)
    • Kodu indir
  • Yardım

    • Belgeler
    • Etkileşimli eğiticiler
    • Bağlama duyarlı yardım

Bundan sonra ne yapmalıyım?

Uygulamanızla ilgili düşünmeye devam ediyorsanız tasarımla ilgili dikkat edilmesi gereken noktalar hakkında bilgi edinmeye devam edin.

Basit bir uygulama oluşturmanın nasıl bir deneyim olduğunu görmek istiyorsanız Blockly ile Başlarken codelab'ini deneyin.

Uygulamanızı yazmaya hazırsanız: