Thunkable: Daha Yakından Bakış

  • Olay odaklı programlama hakkında bilgi edinin
  • Thunkable platformundaki farklı blok türlerini anlayın

Bu dersin etkinlikleri şunlardır:

ETKİNLİKLER

Mobil uygulamalar olay odaklı programlamaya dayanır. 

Olay odaklı programlama kodun baştan sona çalıştırılması yerine olaylara dayalıdır. Bazı programlar tüm kodlarını tek seferde çalıştırır, ancak mobil uygulamalar kullanıcının uygulamayla nasıl etkileşime girdiğine göre çalışır.

Mobil uygulamalar şu temellere dayanarak çalışır olaylaraolarak adlandırılır ve kodun çalışmasını tetikleyen şeylerdir. Bir örnek vermek gerekirse, kullanıcı bir düğmeye tıklar. Olay, kullanıcının tıklamasıdır. Ve bu olay gerçekleştiğinde çalıştırılacak kod, olay işleyicisiolarak adlandırılır.

DUR VE TARTIŞ

Telefonunuzla nasıl etkileşim kurduğunuzu ve telefonunuzun ne yaptığını düşünebilir misiniz? İşte başlangıç için birkaç örnek:

  • Bir uygulamanın simgesine tıkladığınızda, uygulama açılır.
  • Bir metin mesajı için "gönder" düğmesine tıkladığınızda, mesaj gönderilir ve bir ses çıkar.
  • Bir uygulamaya giriş yapmaya çalıştığınızda, uygulama şifre sorar.
girls discussing

Thunkable platformunun farklı bölümlerine göz atarak başlayalım.

Thunkable, uygulamanızı oluşturmak için kullandığınız iki pencereye sahiptir. Üst menü çubuğundaki (ekranın sol üst köşesindeki) Tasarım seçeneğine tıkladığınızda Tasarımcı'e yönlendirilir ve burada kullanıcı arayüzünü tasarlayabilirsiniz. Kullanıcı arayüzü , uygulamanızda kullanıcının etkileşime girebileceği her şeydir. Bunlar düğmeler, gezinme çubukları, metin kutuları, resimler vb. olabilir.

THUNKABLE TASARIMCI PENCERE

Thunkable designer window
1

Bileşen Listesi

Uygulamanıza eklediğiniz tüm bileşenler, ekranlara göre hiyerarşik olarak düzenlenmiş şekilde burada görünür.

3

Çalışma alanı

Bileşenlerinizi bu merkezi çalışma alanındaki telefona sürükleyin. Bu merkezi çalışma alanında, bileşenlerin yerleştirileceği yeri ve boyutlarını kontrol edebilirsiniz.

2

Bileşenler Ekle

Bu panelden görsel bileşenleri çalışma alanına sürükleyebilirsiniz. 

4

Özellikler Paneli

Özellikler paneli, her bir bileşenin özelliklerini ayarlamanıza olanak tanır. Özellikler , her bir bileşen için ayarlayabileceğiniz genişlik, yükseklik ve renk gibi farklı özelliklerdir. Maket üzerinde bir bileşen seçin ve ardından Özellikler panelinde bu bileşenin özelliklerini değiştirebilirsiniz.

Birisi uygulamanızı kullandığında, düğmelere tıklayarak, metin girerek vb. kullanıcı arayüzünüzle etkileşime girer. Uygulamanızın ne yapması gerektiğini belirlemek ve bunları yapmak üzere programlamak size kalmıştır.

BLOK EDİTÖRÜ

"Bloklar" seçeneğine tıkladığınızda Bloklar Editörü penceresine yönlendirilirsiniz. Burada tüm kodlamalarınızı yapabilirsiniz. Sol taraftaki panelden blokları ekranın ortasındaki çalışma alanına sürükleyin.

Thunkable blocks editor
1
Bloklar Paleti

Solda blok paleti bulunur. En üstte UI bileşenleri yer alır. Uygulamanızdaki her bileşen kendi blok setine sahiptir. Çalışma alanına sürükleyebileceğiniz blokları görüntülemek için bileşene tıklayın.

4

Kodlama Çalışma Alanı

Burası, tüm bloklarınızı sürükleyebileceğiniz çalışma alanınızdır. Blokları hareket ettirebilir, birbirlerine ve birbirlerinin içine yerleştirebilirsiniz. İhtiyacınız olmayan blokları da silebilirsiniz.

2

Çekirdek Bloklar

Çekirdek bloklar, uygulamanızda kullanabileceğiniz standart kodlama bloklarıdır. Türlerine göre kategorize edilmiş ve renk kodlu olarak düzenlenmiştir.

3

Uygulama Özellikleri

Bunlar, uygulamanıza ekleyebileceğiniz görünmez özelliklerdir. Birini tıklayarak ekleyebilir, ardından özellikleri ayarlayabilir ve o özellik için kod bloklarını sürükleyebilirsiniz.

OLAY YÖNETİCİLERİ

Thunkable'daki olay işleyici blokları altın rengindedir ve açık blok şeklinde olduğundan, içine bloklar ekleyebilirsiniz. Bu bloklar yalnızca söz konusu olay gerçekleştiğinde çalışır.

Thunkable button click event block

Düğme Tıklandığında
Bunu zaten kullandınız. Kullanıcı belirli bir düğmeye tıkladığında, uygulamanın başka bir ekran açmak veya mesaj göndermek gibi bir işlem yapmasını istersiniz.

Thunkable list-viewer item click event block

ListViewer Öğesi Tıklandığında
ListViewer, açılır menüye benzer, bu nedenle bu olay, kullanıcı listeden bir öğeyi seçtiğinde gerçekleşir. Uygulama, tıklanan öğeyle ilgili bir işlem yapmalıdır.

Thunkable screen opens event block

Ekran açıldığında
Bu olay, uygulama ilk başlatıldığında veya uygulama başka bir ekrana geçtiğinde bir şey yapmak istediğinizde kullanılır. Değişkenleri ayarlayabilir veya buluttan bilgileri güncelleyebilirsiniz.

FONKSİYONLAR

İşlevler bir şeyler yapan kod bloklarıdır. Bir uygulama içinde birçok kez çalıştırılabilirler. Thunkable'da işlev blokları mor renkle gösterilir. Bazı dillerde işlevler, yöntemler veya prosedürler olarak adlandırılır. Bir şeyler yaparlar, bu yüzden onları eylem blokları olarak düşünebilirsiniz.

function blocks

Söyle
Bu işlev, uygulamanın istediğiniz metni sesli olarak söylemesini veya okumasını sağlar.

Zamanlayıcı Başlatma ve Ses Çalma
Zamanlayıcı bileşeni saymaya başlayabilir.  Ve uygulama bir ses çalabilir.

AYARLAYICILAR VE ALICILAR

Yeşil bloklar, bileşenin özellikleriyle ilgilidir. 

Açık yeşil bloklar gettersolarak adlandırılır, çünkü özelliğin değerini alıyorsunuz.

Thunkable getter blocks

Button1 metni
Metin alınır ve numberChoice değişkenine kaydedilir.

Timer1'in saniye cinsinden süresi
Zamanlayıcının saniye değeri alınır ve Lablel1'in metnine kaydedilir, böylece değer etikette görüntülenir. 

Setter'lar daha koyu yeşil renktedir ve uçlarında açık bir yuva bulunur. Bu, özelliğin değerini ayarlamanıza olanak tanır.

Thunkable setter blocks

Button1'in metni
Button1'in Metni "Beni tıkla!" olarak ayarlanmıştır.

Etiket1.Metin
Label1'in Metni, Timer1'in Saniye Cinsinden Süresine ayarlanır.

Timer1'in IntervalMilliseconds
Timer1'in IntervalMilliseconds (ne sıklıkla devreye girdiği) değeri 3000, yani 3 saniye olarak ayarlanmıştır.

En iyi uygulamalar: Öğrencilere bunun gerçek kodlamaya tam olarak benzediğini hatırlatın. Kullandığımız garip kelimeler (fonksiyonlar, alıcılar, ayarlayıcılar) tam olarak kodlayıcıların kullandığı kelimelerdir.

 

Öğrencilere sorulacak yol gösterici sorular: Günlük hayatınızda yaptığınız bazı işlevleri düşünebilir misiniz? (örnek: pasta pişirmek, diş fırçalamak – tekrarlanabilir adımları olan her şey). İşlevler algoritmalara çok benzer!

Mentor ipuçları AmeriCorps'un desteği ile sağlanmaktadır.

stylized A, AmeriCorps logo in navy

VERİ BLOKLARI

Setter bloklarını kullandığınızda, uygulamanızda kullanılabilecek verileri veya bilgileri temsil eden diğer bazı yerleşik blokları da kullanabilirsiniz. Kullanılabilecek veri bloklarına ilişkin bazı örnekler aşağıda verilmiştir.

thunkable math blocks

Sayılar
Sayı değerleri, bir uygulamada veri olarak kullanılabilir. Bu bloklar, blok paletinin temel bölümündeki Matematik çekmecesinde bulunabilir.

thunkable text block

Metin veya Diziler
Metin, bazen dizeler olarak da adlandırılır ve veri olarak kullanılabilir. Bunlar, bir uygulamada kullanılabilen harfler, kelimeler ve cümlelerdir. Bloklar, blok paletinin Temel bölümündeki Metin çekmecesinde bulunur.

thunkable boolean blocks

Boolean
Bu veri türü sadece iki olası değere sahiptir – doğru veya yanlış. Bu bloklar bir şeyin "durumunu" ayarlayabilir veya test edebilir ve koşullu ifadelerde kullanılır. Bu konuda daha fazla bilgi edineceksiniz.

AKTİVİTE: SES KARTI EĞİTİMİ

Tahmini süre: 45 dakika

Aşağıdaki video eğitimini izleyin

Medya dosyalarını buradan indirin (daha fazla ayrıntı için Dave'in videosunu izleyin)
Ardından, uygulamanızda konuşmaları oynatmak için Olay İşleyicileri ve İşlevleri kullanmak üzere aşağıdaki Dave'in videosunu izleyin.

ZORLUK

Etkinlikte şunları kullandınız:

  • Olay İşleyici blokları
  • İşlev blokları

Soundboard uygulamanıza bazı setter ve getter blokları ekleyerek bunları deneyelim.

Kullanıcı herhangi bir resme tıklayarak ilgili konuşmayı dinlemek istediğinde, ekranın arka plan rengini değiştirin. renk değiştirin. 

Tek bir renge değiştirebilirsiniz, ancak daha sonra başlangıç rengi olan siyaha kolayca geri döndüremezsiniz, bu nedenle ekranın arka planını rastgele bir renge değiştirin. 

 İpucu: Rastgele bir renk elde etmek için Renk çekmecesini kontrol edin.

YANSIMA

Farklı kod blokları hakkında biraz daha bilgi edindiğinize göre, uygulama çözümünüzü düşünün:

Uygulamanız için hangi bileşenlere ihtiyacınız olacak?
Uygulamanızda hangi olaylar için olay işleyicileri gerekecektir?
Uygulamanızda olaylar tetiklendiğinde gerçekleşecek eylemler nelerdir?

ANAHTAR TERİMLERİN GÖZDEN GEÇİRİLMESİ

  • Kullanıcı Arayüzü – uygulamanızda kullanıcının etkileşim kurabileceği her şey
  • Tasarımcı – uygulamanıza bileşenler ekleyebileceğiniz ve bunların görünümünü tasarlayabileceğiniz pencere
  • Bloklar Editörü – uygulamanız için blokları kodladığınız pencere
  • Olay – kodun çalışmasını tetikleyen bir olay
  • Olay İşleyici– bir olay meydana geldiğinde uygulamanıza ne yapması gerektiğini söyleyen kod blokları
  • Olay Odaklı Programlama – tüm kodu baştan sona çalıştırmak yerine olaylara dayalı programlama
  • İşlevler – çalıştırılan ve birden çok kez çalıştırılabilen bir kod bloğu

EK KAYNAKLAR

Dave Wolber'ın Thunkable eğitimlerinin devamını şu adreste bulabilirsiniz draganddropcode.com

Öğrenci Elçisi Meenakshi Nair'in ücretsiz Thunkable kursu bir başka harika kaynak!