App Inventor: Daha Yakından Bakış

  • Olay odaklı programlama hakkında bilgi edinin
  • MIT App Inventor 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 olaylaratemelinde çalışır. Örneğin, kullanıcı bir düğmeye tıklar. Olay, kullanıcının tıklamasıdır. Ve olay, 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

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

App Inventor, uygulamanızı oluşturmak için kullandığınız iki pencereye sahiptir. Tasarımcı düğmesine (ekranın sağ üst köşesinde) tıkladığınızda Tasarımcı'e yönlendirilirsiniz ve burada kullanıcı arayüzünü tasarlayabilirsiniz. Kullanıcı arayüzü , uygulamanızda kullanıcının etkileşimde bulunabileceği her şeydir. Bunlar düğmeler, gezinme çubukları, metin kutuları, resimler vb. olabilir.

UYGULAMA İCATÇISI TASARIMCI PENCERESİ

App Inventor designer window
1

Palet

Pencerenin ortasında bulunan Görüntüleyiciye eklemek için Paletten bileşenler seçersiniz. Keşfedilip kullanılabilecek birkaç çekmece dolusu bileşen vardır.

2

Görüntüleyici

Bileşenlerinizi Görüntüleyici'ye sürükleyin. Bileşenler soldan yukarıdan aşağıya doğru eklenir. Bileşenlerin tam olarak nerede görüneceğini daha iyi kontrol etmek için Düzen bileşenlerini ve hizalamayı kullanmanız gerekir.

3

Bileşenler Listesi

Bu liste, ekranınızdaki öğelerin hiyerarşik bir listesini sunar. Bunları, Görüntüleyici'de veya bu listede tıklayarak seçebilirsiniz.

4

Özellikler Paneli

Özellikler paneli, yazı tipi boyutu, hizalama, renk vb. gibi her bir bileşenin özelliklerini ayarlamanıza olanak tanır.

5

Görünmeyen bileşenler

Görünmeyen bileşenler ekranda görünmez, ancak yine de uygulamanın bir parçasıdır. Sürükleyip bıraktığınızda ekranın altında görünürler.

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.

App Inventor blocks editor
1
Bloklar Paleti

Sol tarafta, çalışma alanına sürükleyebileceğiniz blokları bulacaksınız. Bunlar Kontrol ve Mantık gibi kategoriler/çekmeceler halinde düzenlenmiştir.

3

Görüntüleyici

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

Bileşen Blokları

Uygulamanızdaki her bileşen kendi blok setine sahiptir. bileşene tıklayarak, çalışma alanına sürükleyebileceğiniz blokları görüntüleyebilirsiniz.

OLAY YÖNETİCİLERİ

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

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.

screen1 orientation changed event block

Ekran Yönü Değiştirildiğinde
Kullanıcı telefonunu dikey (portre) konumdan yatay (manzara) konuma çevirdiğinde, ekranın düzenini veya bileşenlerin boyutunu değiştirmek gibi bir işlem yapmak isteyebilirsiniz.

Kaydırıcı Konumu Değiştirildiğinde
Kayan çubuk, kullanıcının onu sürükleyerek üzerinde bir değer seçmesini sağlar. Bu, başka bir bileşende değişiklik yapılmasına neden olabilir. Örneğin, bir çizim uygulamasında kayan çubuğu kullanarak kalemin boyutunu artırabilirsiniz.

FONKSİYONLAR

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

function blocks

TextToSpeech.Speak
TextToSpeech bileşeni, konuşmasını istediğiniz herhangi bir metni söyleyebilir veya seslendirebilir.

Kamera.FotoğrafÇek
Kamera bileşeni, telefonla fotoğraf çekebilir.

Ses.Oynat
Ses bileşeni bir ses çalabilir.

AYARLAYICILAR VE ALICILAR

Yeşil bloklar bileşenler ve özellikleriyle ilgilidir. 

Başka bir bloğa yapışabilen açık yeşil bloklara gettersolarak adlandırılır, çünkü özelliğin değerini alıyorsunuz.

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.

app inventor setter and getter blocks

Button1 metni
Button1'in metni alınır ve global greeting değişkeninde saklanır.

Button1 metni
Button1'in Metni "Kodlamayı seviyorum" olarak ayarlanmıştır. "Kodlamayı seviyorum" kelimeleri düğme üzerinde görünecektir.

Etiket Metni1
Etiket1 Metni, Ses1 Kaynağına ayarlanmıştır. Bu, ses dosyasının adının Etiket1'de görüntüleneceği anlamına gelir. 

Ses Kaynağı1
Ses1'in kaynağı (ses dosyasının adı) alınır ve Etiket1'in Metin özelliğinde saklanır. Bir etiketin metnini ayarlamak, esasen etiketteki değeri görüntüler, böylece ses dosyasının adı Etiket1'de görünür.

Etiket1'in metni

TextToSpeech, Label1'in Metin içeriğini alır ve sesli olarak okur. Label1'de görüntülenen metin ne olursa olsun sesli olarak okunur. 

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.

app inventor math blocks

Sayılar
Sayı değerleri, bir uygulamada veri olarak kullanılabilir. Bu bloklar, blok paletindeki Matematik çekmecesinde bulunabilir.

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, Bloklar paletinin Metin çekmecesinde bulunur.

app inventor 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

Başlangıç projesini App Inventor Galerisi'nde buradan görüntüleyin, uygulamayı App Inventor'a yükleyin,
ve aşağıdaki videoda Dave'in talimatlarını izleyin.

Yükleme talimatlarını atlamak için videonun 1:11'den başladığını unutmayın. Yukarıdaki bağlantıyı kullanarak başlangıç projesini yüklediyseniz, bu talimatlara gerek yoktur.

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: Renk çekmecesini kontrol edin ve renk bloğuoluştur 'nı bulun. Ardından Matematik çekmecesinde rastgele bir tamsayı bloğu arayın. Renkler, 0-255 aralığında kırmızı, yeşil ve mavi için RGB olmak üzere 3 sayıdan oluşur.

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 App Inventor başlangıç düzeyindeki eğitimlerini appinventor.org