App Inventor ile Programlamaya Giriş

1
17027

App Inventor Nedir?

App Inventor, MIT tarafından geliştirilen ve Android programlama konusunda hiç bilgisi olmayan kullanıcıların bile, sürükle ve bırak yöntemiyle kolayca Android uygulamaları geliştirmesini sağlayan online olarak sunulan bir programdır.

App Inventor’da ilk başta uygulamayı görsel olarak tasarlayacağız ve sonra kodların yerine blokları kullanarak uygulamamızı oluşturacağız.

Uygulamaları  geliştirmek için birkaç ön adım var.App Inventor kullanmak için yapılması gerekenler:

Kayıt olduktan sonra açılan pencerede CREATE APPS! butonuna tıklıyoruz.

Son aşamadan sonra karşımıza böyle bir pencere gelecek.

2

Start New butonuna bastıktan sonra yeni projenin ismini gireceğiz.

Web tarayıcı bize çalışma ortamı açacaktır. Ortamın ismi tasarımcı (Designer). Bu çalışma ortamında uygulamamızı oluşturacağız.

3

Tasarımcıyla beraber bir pencere daha açmamız gerekecek: Blocks Butona tıkladıktan sonra aşağıdaki gibi pencere gelecektir.

4

Pencerenin sol tarafında kod butonları yer almaktadır.Bu aşamada yapılması gereken; uygulamamıza uygun olan butonları yap-boz yapar gibi birleştirmek.

İlk Olarak Uygulamamız İçin Bileşenleri Seçiyoruz

İlk uygulamayı oluşturalım, adı ETUSP olsun. Uygulamada butona basıldığı zaman “MERHABA ETUSP” sesi duyacağız.Uygulamanın bileşenleri App Inventor’da sol tarafta bulunuyor. Bileşenlerin arasında projede  kullanılan temel araçlar bulunuyor: Buton, resim, onay kutucuğu ve diğerleri.

5

Bileşenleri kullanmak için onları seçip sürükleyerek tasarımcıya taşıyoruz.

6

Birinci aşamada butonu tasarımcıya taşıyoruz. İkinci aşamada butonun görüntüyü değiştiriyoruz.  Butona kedinin resmini yapıştıracağız. Bunu yapmak için sağ taraftan Image > None   ve Upload New  butonuna basıyoruz. Çıkan pencerede Choose File butonuna basıyoruz ve bilgisayarda daha önce kaydettiğimiz resmi seçiyoruz.

ETSPPPPPP

Çıkan resmin üzerinde yer alan Text for Button1 yazısını silmek için sağ tarafta yer alan Text bölümde bulunan yazıyı silmemiz gerekiyor. Daha sonra projemize bir etiket (Label) ekleyelim.

ETSPPPPPP1

Sol taraftan etiket (Label) bileşenini seçip sağ taraftan etiketin özelliğini değiştiriyoruz.FontSize 50 olsun ve Text özelliği olarak ETUSP metnini yazıyoruz.

ETSPPPPPP2

Daha önce yüklediğimiz sesi projeye ekledikten sonra sol taraftan Media > Sound bileşenini Viewer’a taşıyoruz. Sağ tarafta Source (Kaynak) >  None > Upload Now  > Choose File seçiyoruz.

İkinci Aşama Blok Editörle Programlama

Uygulamamız için kod yerine blokları kullanacağız. Bunu yapmak için Blok editörüne ihtiyacımız olacak. Blok editörünü açmak için tasarım penceresinde, yukarıda sağ tarafta Blocks butonuna basacağız ve daha önce yazdığım aşamaları yapacağız. Açılan pencerede sol tarafta yer alan blocks  sekmesinde tasarladığımız butonu, etiketi, sesi ve ekranı görüyoruz.

10

Olay işleyici (event handler) fonksiyonu taşıyan bloklar var. İşleyici bloklar, olaylara ne işlem yapılacağını belirtiyor. Yani yapılmasını istediğimiz işi, işleyici bloklara atıyoruz. Sonra Sound1seçiyoruz ve seçeneklerden Sound1.Play’i seçip Button1.Click üzerine taşıyoruz. Mor ve mavi bloklar, komut (Command) bloklarıdır. Komut bloklar (Command blocks) olay işleyiciyi (event handler) içeriye yerleştiriyorlar.

son

Bu aşamada bloklarımız aşağıdaki gibi olmalı:

 

btBu bloğun anlamı “butona basıldığı zaman içindeki komutu çalıştır“dır, mesela bizim örneğimizdeki sesi çalma komutunu çalıştırır…

Uygulamamızı çalıştırmak için programı bilgisayara indireceğiz. Bunu yapmak için yukarıda sol üstte Build> App(save.apk to my computer)seçiyoruz. Bu aşamayı yaptıktan sonra bilgisayara .apk uzantılı bir dosya inecektir; bu dosyayı aygıta kopyaladıktan sonra çalıştırabilirsiniz.

Ve Sonuç

Sonuçta resme dokunulduğunda “merhaba etusp” sesini duyuyoruz Sizler bundan daha fazlasını da yapabilirsiniz.İşte gördüğünüz gibi, hiç kodlarla uğraşmadan görseller, sesler ve düğmelere basılarak, sadece resme dokunulduğunda olacak olayları programlamış olduk. Son derece basit olduğu gibi, Android uygulamalarını koda başlamadan önce tasarlamak, görmek ve daha iyi anlamak için son derece yararlı bir araç.

1 YORUM

CEVAP VER

Please enter your comment!
Please enter your name here