Çevrim İçi Ortamları Tanıma: Arayüz ve Araç Kutusu

Çevrim içi blok tabanlı geliştirme ortamları, Dizge arayüzü bölümleri (Sahne, Kod Alanı, Blok Paleti) ve araç kutusu. Maarif Modeli RK1.2.1 ders notu ve A4 PDF.

Robotik Kodlama5. HaftaRK1.2.1
Bu konuyla ilgili test çöz PDF yakında
KAZANIM • RK1.2.1 (a)

Robotik sistemlerde çevrim içi blok tabanlı yazılım geliştirme ortamını hazırlayabilme.

  1. Robotik sistemlerde çevrim içi blok tabanlı yazılım geliştirme ortamlarını tanır.
  2. Robotik sistemlerde çevrim içi blok tabanlı yazılım geliştirme ortamını belirler.
  3. Robotik sistemlerde çevrim içi blok tabanlı yazılım geliştirme ortamını düzenler.
🎨 Kodlamaya Görsel Başlangıç: Dizge ile Tanışın! 1. ünitede robotların nasıl düşündüğünü ve akış şemalarını öğrendik. Şimdi sıra bu algoritmaları bilgisayarda hayata geçirmeye geldi! Robotik projelerimizi karmaşık metin kodlarıyla değil; renkli, eğlenceli ve tıpkı bir yapboz (lego) gibi birbirine kilitlenen blok tabanlı kodlama araçlarıyla inşa edeceğiz. Platformumuzun temel geliştirme ortamı olan Dizge ile tanışmaya hazır olun!
Anahtar Kavramlar: Çevrim İçi Ortam Blok Tabanlı Kodlama Dizge Arayüzü Sahne Kukla (Karakter) Araç Kutusu (Blok Paleti) Kodlama Alanı Yeşil Bayrak & Kırmızı Dur

1) Çevrim İçi Blok Tabanlı Yazılım Geliştirme Ortamı Nedir?

Bir robotu ya da ekrandaki bir karakteri yönetmek için ona komutlar vermemiz gerekir. Bu komutları tasarlayıp birleştirdiğimiz dijital çalışma alanına yazılım geliştirme ortamı (IDE) denir.

Geleneksel programlamada kodlar klavyeden harf harf yazılırken, eğitimde ve robotikte blok tabanlı ortamlar tercih edilir:

  • 🧱 Blok Tabanlı Kodlama: Komutlar, üzerlerinde ne iş yaptıkları açıkça yazılı renkli bloklar hâlindedir. Kod yazarken imla hatası (noktalı virgül unutma, parantez kapatmama) riski yoktur; çünkü sadece birbirine uyan bloklar kilitlenir.
  • 🌐 Çevrim İçi (Web Tabanlı): Bilgisayara herhangi bir kurulum veya ağır program yüklemeye gerek yoktur. İnternet tarayıcısı (Chrome, Edge vb.) olan her bilgisayardan, tabletten anında açılır ve projeler bulutta saklanır.
🤖 Dizge ve Robo-Dizge Nedir?
Dizge, BLocKodlama ekosisteminde kullandığımız modern blok tabanlı kodlama ortamıdır. Dizge ile ekrandaki kuklaları canlandırabilir, hikâyeler ve oyunlar yazabiliriz. Üstelik Robo-Dizge eklentisi sayesinde hazırladığımız bu blokları tek tıkla Arduino Uno kontrol kartına aktarıp gerçek robotları yönetebiliriz!

2) Dizge Arayüzünün 5 Ana Bölümü

Dizge ekranını açtığımızda karşımıza son derece düzenli ve kullanışlı bir çalışma alanı çıkar. Bu arayüz 5 temel bölüme ayrılır:

Bölüm AdıEkrandaki YeriGörevi ve İşlevi
1. Üst Menü & Kontrol BandıEn Üst KısımProje adını yazma, projeyi bilgisayara kaydetme / yükleme, panele kaydetme ve sahneyi hızlandıran Turbo Mod araçlarını barındırır.
2. Araç Kutusu (Blok Paleti)Sol TarafKullanabileceğimiz tüm renkli kod bloklarının kategoriler hâlinde listelendiği depodur. Bloklar buradan tutulup kod alanına sürüklenir.
3. Kodlama Çalışma AlanıOrta Kısım (Geniş Alan)Blokları bir yapboz gibi alt alta ve iç içe birleştirerek algoritmamızı inşa ettiğimiz geniş çalışma masasıdır.
4. SahneSağ Üst BölümYazdığımız kodların görsel sonucunu canlı olarak izlediğimiz ekrandır. Üzerinde programı başlatan Yeşil Bayrak ve durduran Kırmızı Buton yer alır.
5. Kukla ve Dekor Yönetim AlanıSağ Alt BölümSahnedeki karakterlerin (kuklaların) adını, X-Y koordinatlarını, büyüklüğünü, yönünü ayarladığımız ve yeni karakter/sahne dekoru eklediğimiz paneldir.

3) Araç Kutusu (Blok Paleti) ve Renkli Kategoriler

Dizge'de yüzlerce kod bloğu bulunur. Aradığımız bir komutu saniyeler içinde bulabilmemiz için bloklar işlevlerine göre özel renklerle kategorilere ayrılmıştır:

KategoriRenkNe İşe Yarar? (Örnek Bloklar)
HareketMaviKarakteri ileri götürme, döndürme, belirli bir X-Y koordinatına yönlendirme.
GörünümMorKonuşma balonu çıkarma ("Merhaba de"), kostüm değiştirme, büyüklüğü ayarlama.
SesPembe / EflatunBip sesi çalma, nota çıkarma, müzik veya ses efektleri oynatma.
OlaylarSarıProgramın ne zaman başlayacağını tetikleyen bloklar (Yeşil bayrağa tıklandığında, Boşluk tuşuna basılınca).
KontrolTuruncuAkışı yöneten bloklar: Bekleme süreleri, döngüler (10 defa tekrarla, sürekli tekrarla) ve koşullar (eğer... ise).
AlgılamaAçık MaviSensör ve çevre etkileşimleri: Fareye değdi mi?, Kenara geldi mi?, Mesafe ne kadar?
OperatörlerYeşilMatematiksel işlemler (+, -, *, /), büyüktür/küçüktür karşılaştırmaları ve mantıksal (VE, VEYA) bağlaçlar.
DeğişkenlerTuruncu / KiremitSkor, can, sayaç veya sensörden okunan anlık değerleri hafızada saklayan kutucuklar.
💡 İpucu: Kod Silmek Çok Kolay! Kodlama alanında istemediğiniz veya fazla gelen bir bloğu silmek için onu fareyle tutup sol taraftaki Blok Paletine (Araç Kutusuna) geri sürükleyip bırakmanız yeterlidir. Ya da bloğa sağ tıklayıp "Bloğu Sil" seçeneğini kullanabilirsiniz.

4) Sahne ve Koordinat Sistemi Mantığı

Dizge sahnesi rastgele bir boşluk değildir; matematiksel olarak tanımlanmış bir Kartezyen Koordinat Düzlemidir:

  • Merkez Noktası: Sahnenin tam ortası X: 0, Y: 0 noktasıdır.
  • X Ekseni (Yatay): Karakterin sağa (+) veya sola (-) hareketini belirler. Sahne genişliği -240 ile +240 arasındadır (toplam 480 birim).
  • Y Ekseni (Dikey): Karakterin yukarı (+) veya aşağı (-) hareketini belirler. Sahne yüksekliği -180 ile +180 arasındadır (toplam 360 birim).
🚩 Program Nasıl Başlar ve Durur?
• Yeşil Bayrak: Kodlama alanında başında [Yeşil Bayrağa Tıklandığında] olan tüm kod yığınlarını aynı anda çalıştırır.
• Kırmızı Yuvarlak Buton: Çalışmakta olan tüm döngüleri, sesleri ve hareketleri anında dondurur ve durdurur (sanal acil durdurma).

5) Sınav Tarzı Örnek Sorular ve Çözümleri

⚠️ Örnek Soru 1: Dizge ortamında proje geliştiren Emre, karakterinin ekranda 10 adım yürümesini ve ardından "Görevi Başardım!" diye konuşma balonu çıkarmasını istemektedir. Emre bu iki komut bloğunu sırasıyla araç kutusundaki hangi renkli kategorilerden almalıdır?
A) Mavi (Hareket) ➔ Mor (Görünüm)
B) Sarı (Olaylar) ➔ Turuncu (Kontrol)
C) Açık Mavi (Algılama) ➔ Yeşil (Operatörler)
D) Mor (Görünüm) ➔ Pembe (Ses)
Cevap: A) Mavi (Hareket) ➔ Mor (Görünüm).
Yürüme ve yer değiştirme komutları Hareket (Mavi) kategorisinde; ekranda yazı ve konuşma balonu çıkarma komutları ise Görünüm (Mor) kategorisinde yer alır.
➕ Örnek Soru 2: Dizge ortamının geleneksel metin tabanlı (harflerle kod yazılan) programlama dillerine göre yeni başlayan öğrenciler için sağladığı en önemli iki avantaj nedir?
Cevap:
1) Yazım (Syntax) Hatalarını Sıfırlaması: Noktalı virgül, parantez veya harf hatası yapma ihtimali yoktur; sadece birbiriyle uyumlu bloklar kilitlenir.
2) Görsel ve Anlaşılır Olması: Komutların renkli ve lego şeklinde olması öğrencinin kod mantığını ve algoritma akışını somut olarak kavramasını sağlar.

6) 5. Hafta Özeti ve Altın İlkeler

  • Dizge çevrim içi bir geliştirme ortamıdır: Kurulum gerektirmez, internet olan her cihazda tarayıcı üzerinden çalışır.
  • 5 Ana Bölüm: Üst Menü, Araç Kutusu (Blok Paleti), Kodlama Alanı, Sahne, Kukla ve Dekor Alanı.
  • Renkli Kategoriler: Hareket (mavi), Görünüm (mor), Ses (pembe), Olaylar (sarı), Kontrol (turuncu), Algılama (açık mavi).
  • Yeşil Bayrak Başlatır, Kırmızı Buton Durdurur: Kod blokları sürükle-bırak yöntemiyle kod alanına taşınır ve yeşil bayrakla tetiklenir.

Dersi BlocKodlama ile işleyin.

Kazanım bazlı interaktif içerikler, Türkçe blok kodlama editörü Dizge ve sınav merkezi tek platformda.