App Inventor - Proje Örneği 1 - Buton Uygulaması

Bu uygulamamız çok basit olup, sadece bir butondan oluşmaktadır. Uygulamamız ise butona basıldığında üstünde yazan yazıyı değiştirmeye yönelik olacaktır.

Adım 1:

İlk olarak sisteme giriş yapıyoruz.

Adım 2:

Daha sonra projemize isim veriyoruz.

Adım 3:

Karşımıza kodlayacağımız ekran geliyor. Telefonların formatlarını değiştirerek ekranda nasıl göründüğünü görebilirsiniz.

Adım 4:

Soldaki ekrandan button'u ekrana sürüklüyoruz. Buton ekledikten sonra yandaki Components menüsünden, Button1’in ismini değiştirebiliriz. Properties kısmından ise, Background Color ile buton rengini değiştirebilir, FontSize ile buton üstünde yazan yazı boyutu değiştirilebilir, veya Height/Width değerleri ile oynayarak buton boyutunu değiştirebiliriz

Adım 5:

Properties kısmından ise, Background Color ile buton rengini değiştirebilir, FontSize ile buton üstünde yazan yazı boyutu değiştirilebilir, veya Height/Width değerleri ile oynayarak buton boyutunu değiştirebiliriz. Burada değiştirmek istediklerimizi değiştirdikten sonra sağ üstteki sekmeden Block kısmına geçebiliriz.

Adım 5:

Block kısmında 3 adet bloğumuz var bunları sürükle-bırak ile ekrana taşıyoruz. İlk uygulamamızda ekrandaki butona basıldığında Merhaba Öğrenciler! yazmasını istiyoruz. Bunun için ilk önce Block kısmının altındaki Button1(ismini değiştirdiyseniz değiştirdiğiniz isim olarak gözükür) sekmesine tıklıyoruz ve yanda açılan bloklardan “when Button1.Click” bloğunu sürükleyerek Viewer kısmına bırakıyoruz.

Adım 6:

Seçtiğimiz bloğun anlamı, Buton1’e tıklandığında bir şeyler yap anlamına geliyor. Neler yapacağımıza ise do kısmından sonra konulan bloklar ile karar vereceğiz. Yapılmasını istediğimiz şey Buton1’in üzerindeki yazı yani text’inin değişmesi olduğundan tekrar Button kesmesine tıklayıp açılan pencereden “set.Button1.Textto” ismindeki bloğu sürükleyip do bloğunun içine bırakıyoruz.

Adım 7:

Şuana kadar bizim bu bloklar ile anlatmaya çalıştığımız şey, Butona tıklandığında, butonun yazısını değiştir. Şimdi ise buton yazısı yerine ne geleceğini belirleyelim. Bunun için Blocks kısmındaki text sekmesine tıklayıp en üstteki bloğu sürüklüyoruz. Bu bloğun içerisinde butona tıklandığında ne yazmasını istiyorsak onu yazabiliriz. Örneğin bu uygulamada Merhaba Öğrenciler! yazmasını istiyoruz. Ardından daha önce eklediğimiz set button 1 text to kodunun devamına birleştiriyoruz.

Adım 8:

Projemiz tamamlandı. Tamamlanan projeyi denemek için programın bize sunduğu QR kodu ile denememizi sağlayan basit bir yöntem var. Öncelikle üstteki sekmelerden Build sekmesine geldiğimizde site uygulamamızı derleyip bize bir QR kod veriyor.

Adım 9:

QR kodu okutturmak için öncelikle, https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3 adresinden MIT AI2 Companion isimli uygulamayı indirmemiz gerekiyor. Bu kodu telefona indirdiğimiz uygulamamıza okuttuğumuzda yaptığımız uygulamayı indirip telefona kuruyor ve işlem tamamlanıyor.

Adım 10:

Bu kodu telefona indirdiğimiz uygulamamıza okuttuğumuzda yaptığımız uygulamayı indirip telefona kuruyor ve işlem tamamlanıyor. İndirme işleminde farklı kaynaktan dosya indirimine izin vermeniz gerekiyor. Uygulama telefonunuza indiğinde App Inventor simgesiyle görünür. Tıkladığınızda açılır.

Adım 11:

Uygulamaya tıkladığınızda girdiğimiz kodlarla oluşturduğumuz uygulama karşımıza çıkıyor. Aşağıdan inceleyebilirsiniz.

Adım 12:

Daha sonra kodumuzu test etmek için butona tıkladığımızda Merhaba Öğrenciler! yazısını görüyoruz.