App Inventor ile Programlamaya Giriş

App Inventor uygulaması sayesinde hiç programlama bilginiz olmasa da Android uygulamaları geliştirebilirsiniz! İşte bu harika uygulamanın püf noktaları…

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 mümkün kılan bir programdır. Bu program online olarak sunuluyor. Sözü uzatmadan size önce App Inventor hakkında kısa bilgiler vereceğiz, ardından App Inventor kullanarak nasıl basit bir uygulama yapabileceğinizi göstereceğiz.

App Inventor Nedir?

App Inventor az önce de belirttiğimiz gibi, programlamayı az bilenler veya hiç bilmeyenler için Android uygulamaları geliştirmek amacıyla kullanabilecekleri, kolay bir görsel uygulamadı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. İşte App Inventor kullanmak için bilmeniz gerekenler:

• Uygulamaları geliştirmek için Google hesabı kullanıyoruz.
• Eğer Google hesabımız yoksa buradan açabiliriz : http://gmail.com
• Bu hesabı kullanarak http://appinventor.mit.edu/ sitesine kayıt oluyoruz.

Siteye girdiği zaman Teach sekmesine tıklıyoruz. Burada birinci adımı yapacağız: Step 1. Setup App Inventor. Bu adım üç aşamadan oluşuyor. Birinci aşamada java yüklü olup olmadığın kontrol ediyoruz. Eğer bilgisayarınızda java mevcut değilse bu linki kullanarak java’yı indirilebilirsiniz.  İkinci aşamada App Inventor’u kuracağız: http://appinventor.mit.edu/explore/install-app-inventor-software.html.  Son aşamada App Inventor’u  kullanabiliriz: http://beta.appinventor.mit.edu/.

App Inventor’da çalışmak için web tarayıcısı ve internet bağlantısı gerekecektir. Benim tavsiyem web tarayıcısı olarak Google Chrome’u kullanmanız olacaktır.

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

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.

Tasarımcıyla beraber bir pencere daha açmamız gerekecektir. Blok editörü (Blocks Editor) resimde kırmızıyla işaretlenen butondur. Butona tıklatıktan sonra aşağıdaki gibi pencere gelecektir.

Open with Java seçtikten sonra OK butonuna basıyoruz.

‘Always trust contents from this publisher’ (İçindekilere güvendiğimizi kabul ediyoruz) seçeneğini onayladıktan sonra dosyayı açıyoruz. Ve Run (Çalıştır) butonuna basıyoruz.

Karşımıza blok editör pencere gelecektir.

1-Uygulamamız için bileşenleri seçiyoruz

İlk uygulamayı oluşturalım, adı HelloPurr ismi olsun. Uygulamada butona basıldığı zaman kedinin sesi duyacağız. Projede kullanılan dosyaları buradan yükleyebilirsiniz: Kitty Picture, meow sound . Dosyaları indirmek için web tarayıcıda File Save As seçeneğini kullanıyoruz.

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.

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

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 kedinin resmini seçiyoruz.

Çı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. Şimdi projemize bir etiket (Label) ekleyelim.

Sol taraftan etiket (Label) bileşenini seçiyoruz. Sağ taraftan etiketin özelliği değiştiriyoruz. FontSize 30 olsun ve Text özelliği olarak Pet the Kitty! metnini yazıyoruz.

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

2-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 Open the Blocks Editor butonuna basacağız ve daha önce yazdığım aşamaları yapacağız. Açılan pencerede sol tarafta yer alan My blocks  (Bloklarım) sekmesini seçiyoruz. Burada  tasarladığımız butonu, etiketi, sesi ve ekranı görüyoruz.

Yeşil olan bloklar olay işleyici (event handler) fonksiyonu taşıyorlar. İşleyici bloklar, olaylara ne işlem yapılacağını belirtiyorlar. Yani yapılmasını istediğimiz işi, işleyici bloklara atıyoruz. Mesela kullanıcı butona bastı, telefon da bu yüzden titreşti. Sonra Sound1 seçiyoruz ve seçeneklerden Sound1.Play2’yı 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.

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

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

Blokların çalışması daha iyi anlamak için bu linkten faydalanabilirsiniz Understanding Blocks. Zaten ilerleyen Android Programlama Derslerinde de bu konuları detaylı bir şekilde işleyeceğiz.

Uygulamamızı çalıştırmak için programı bilgisayara indireceğiz. Bunu yapmak için yukarıda sağ tarafta Package for Phone > Download to this 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.

Sonuç:

Sonuçta kedi artık dokunulduğunda miyavlıyor! Kediyi miyavlatmaktan daha fazlasını da yapabilirsiniz ama bu da iyi bir başlangıç. İşte gördüğünüz gibi, hiç kodlarla uğraşmadan düğmeler, görseller, sesler ve düğmelere basıldığında, kedi resmine dokunulduğunda olacak olayları programlamış olduk. Son derece basit olsa da, Android uygulamalarını koda başlamadan önce tasarlamak, görmek ve daha iyi anlamak için son derece yararlı bir araç. App Inventor’u yeterince kurcaladıktan ve yapabileceklerinizin sınırlarına ulaştıktan sonra elbette kodlamaya girişmelisiniz. Bu iş için de Android Programlama Dersleri’miz sizi bekliyor…