Blockly'nin temelinde kodlama yaparken veya eklenti geliştirirken deneme alanı son derece kullanışlı bir araçtır. Test, hata ayıklama veya prototip oluşturma için kullanabileceğiniz önceden yapılandırılmış bir Blockly örneğine sahiptir. Google'da Blockly'nin neredeyse tüm geliştirmeleri, oyun alanı kullanılarak gerçekleştirilir. Önizleme olarak, demo sunucudaki basit oyun alanını burada bulabilirsiniz.
Temel Blockly için 3 tür oyun alanı vardır: basit, gelişmiş ve çoklu. Blok örneklerinde, genellikle yalnızca gelişmiş oyun alanı kullanılır.
Ön koşullar
Blockly artık Closure modül sistemini kullanıyor. Derlenmemiş Closure modülleri, yüklendikleri yöntem nedeniyle bir http: veya https: URL'sinden getirilmelidir ve doğrudan file: URL'lerinden getirilemez. Bu nedenle, deneme alanını derlenmemiş modda yüklemek için yerel bir web sunucusundan yüklemeniz gerekir.
Yerel bir sunucuyu başlatan ve Blockly modüllerini yüklemek için gereken tüm kodu yükleyen bir komut dosyası oluşturduk. Tüm bağımlılıkları yüklemek için npm'nin makinenize yüklü olması ve Blockly kökünden npm install çalıştırmanız gerekir.
Internet Explorer'ı kullanma
Blockly artık kod tabanında Internet Explorer ile uyumlu olmayabilecek gelişmiş özellikler kullanıyor. Sıkıştırılmış (derlenmiş) kodda bu özellikler IE ile çalışacak şekilde derlenir ancak sıkıştırılmamış kod yüklendiğinde çalışmayabilir. Yerleşim alanını yerel bir http sunucusu üzerinden bile IE'de yüklerseniz yerleşim alanı, uyumluluğu sağlamak için sıkıştırılmış Blockly kodunu otomatik olarak yükler. Oyun alanındaki değişiklikleri sıkıştırılmış modda test etme hakkında daha fazla bilgi için "Oyun alanlarına doğrudan erişim" bölümüne bakın.
Basit Oyun Alanı
Diğer iki oyun alanı, basit oyun alanına dayanır. Bir araç kutusu ve çalışma alanı gösterir ve sınırlı sayıda ayarı düzenlemenize olanak tanır.
Playground'u açmak için
npm run start
Blockly'nin kökünden 8080 bağlantı noktasında başka bir dinleyici olmadığından emin olun. Bu komut, Blockly modüllerini barındıran bir sunucu başlatır ve tarayıcınızı otomatik olarak deneme sayfasına açar. Oyun alanını kapatmaya hazır olduğunuzda işlemi sonlandırın (Mac ve Linux ortamlarında ctrl-c).
Oyun alanında şunlar bulunur:
- Hızlı geliştirme için tüm kod sıkıştırılmaz.
- Tüm varsayılan bloklar (desteği sonlandırılan bazı bloklar hariç).
- Tüm dil oluşturucular (JavaScript, Python, PHP, Lua ve Dart).
- Çalışma alanı durumunu (JSON veya XML) serileştirme ve seri dışı açma.
- Soldan sağa ve sağdan sola düzen arasında geçiş yapın.
- Araç kutusu düzenleri arasında geçiş yapın.
- Oluşturucu için stres testleri.
- Tüm etkinlikleri konsola kaydeder.
Gelişmiş oyun alanı
Gelişmiş oyun alanı, Blockly'de hata ayıklamayı daha da kolaylaştıran ek özellikler içerir. Bu, tüm eklentiler için blockly-samples'de kullanılan varsayılan oyun alanıdır.
Bu oyun alanında, basit oyun alanlarının tüm özelliklerinin yanı sıra şunlar da bulunur:
- Izgara boyutu, yakınlaştırma/taşıma kontrolleri, oluşturma aracı, tema gibi ek ayarlar yapılandırılabilir.
- Kullanılan ayarlar ve bloklar önbelleğe alınır ve bir sonraki sefer oyun alanı yüklendiğinde otomatik olarak kullanılır.
- Her jeneratörün çıkışını aynı pencerede görebilirsiniz.
blockly-samples içindeki herhangi bir eklenti için gelişmiş oyun alanını başlatmak istiyorsanız eklentinin kök dizininden npm run
start dosyasını çalıştırın. Şu anda, aynı anda yalnızca bir eklenti çalışabilir ve eklenti 3000 numaralı bağlantı noktasını kullanır. Eklentiyi başlatmakta sorun yaşıyorsanız önce söz konusu bağlantı noktasında başka bir şeyin dinlenmediğinden emin olun.
Core'da gelişmiş oyun alanını başlatmak için Blockly'nin kök dizininden npm run start komutunu çalıştırın ve başlığın altındaki "Gelişmiş" bağlantısını tıklayın.
Blockly'nin dev-tools paketini kullanarak gelişmiş oyun alanını içeren kendi test sayfanızı da oluşturabilirsiniz.
Çoklu oyun alanı
Çoklu oyun alanı, LTR modu ve araç kutusunun konumu için farklı yapılandırmalarda çeşitli oyun alanları içerir. Bu özellik çoğunlukla, Blockly'nin yayınlanmadan önce LTR ile ilgili herhangi bir sorunu düzeltmediğini hızlı bir şekilde kontrol etmek için kullanılır. Bu oyun alanını açmak için basit oyun alanı adımlarını uygulayın ve ardından URL'yi /tests/multi_playground.html olarak değiştirin.
Değişiklikleri test etme
Oyun alanlarından herhangi birini yerel bir sunucudan çalıştırırken, Blockly'de yaptığınız değişiklikleri görmek için çoğu durumda sayfayı yenilemeniz yeterlidir. Yeni bir dosya veya bir dosyaya yeni bir bağımlılık eklediyseniz önce npm run
build dosyasını çalıştırmanız gerekebilir. Bu işlem, bağımlılıkların doğru şekilde yüklenmesini sağlamak için test/deps.js dosyasını günceller. Ardından sayfayı yenilemeniz gerekir.
Bir eklentinin gelişmiş oyun alanını kullanıyorsanız sayfayı yenilemeniz bile gerekmez. Değişiklikler otomatik olarak yayınlanır.
Oyun alanlarına doğrudan erişim
Daha önce, basit test alanına tarayıcınızda doğrudan test/playground.html dosyasına giderek yerel olarak erişiliyordu. Bu, basit ve çoklu oyun alanlarında hâlâ mümkündür ancak artık önerilmez. Bunu yaparsanız oyun alanı, yerel sunucu kullanmadığınızı algılar ve sıkıştırılmış Blockly dosyalarını otomatik olarak kullanır (daha fazla bilgi için Building Blockly sayfasına bakın.) ve temel Blockly'de bir şeyi değiştirdiğinizde, temeli yeniden oluşturup değişiklikleri aşamalandırmanız gerekir. Demo sitemizde barındırılan örnek sayfamız gibi uzak bir sunucuda barındırılan sayfalara da erişebilirsiniz. Sıkıştırılmış moddayken arka plan parlak mavi olur.
Gelişmiş oyun alanı, file: erişimi üzerinden kullanılamaz.