Kod Yazmadan Uygulama Geliştirme – App Invertor


MIT App Invertor kısaca tanımlayacak olursak Android işletim sistemine sahip telefonlar yada mobil cihazlar için kod kullanmadan uygulama geliştirmeye yarayan bir hizmettir. Hizmet diyorum çünkü internet üzerinden kullanabileceğiniz bir geliştirme ortamıdır.

İlk olarak googlelabs üzerinden kullanıcılara sunulan hizmet daha sonra http://appinventor.mit.edu üzerinden yayınına devam etti ve şuan hala geliştirilmesi devam ediyor.

Bu hizmet hiç bir kod kullanmadan uygulama geliştirebilirsiniz fakat yinede bazı kod kalıplarını ve ne işe yaradıklarını bilmeniz gerekmektedir. Kısacası bu hizmeti tam anlamıyla verimli bir şekilde kullanabilmek için temel seviyede programlama bilmeniz gerekmektedir.

Sistemin tanıtımından ziyade kullanılabilirliği üzerinden anlatıma devam edeceğimden dolayı basit bir örnek geliştirmek için kolları sıvayalım…

İlk olarak her ne kadar web üzerinden geliştirme yapacak olsak da bilgisayarımıza android sdk ve diğer gerekli uygulamalarını kurmamız gerekiyor. Bizim işimiz App Invertor ile olduğu için burayı atlıyoruz. http://appinventor.mit.edu sitesinde Invent butonuna tıklayarak devoloper kısmına geçiyoruz. Burada bizi aşağıdaki gibi bir ekran karşılıyor.

Buradan New’e tıklayarak projemizin adını(Zikirmatik) yazıyoruz ve proje dosyamızı oluşturuyoruz. Daha sonra ise App Invertor geliştirme aracı açılıyor.

App Invertor aracında iki platform bulunuyor bunlardan biri görsel tasarım diğeri ise kod bloklarıdır. Şuanda yukarıda gördüğünüz ekran tasarım alanına aittir. Gördüğünüz gibi sol sütunda en üstte projemizin adı yazmaktadır. Altında ise kullanabileceğimiz araçları görüyoruz. Orta alan geliştireceğimiz uygulamanın ekran görüntüsünün olduğu alandır. Soldaki nesneleri sürekle-bırak yöntemiyle bu alana taşıyarak uygulamamızın görsel tasarımını gerçekleştiriyoruz. Components başlıklı alan ise tasarım alanına elediğimiz komponentlerin bilgilerini gördüğümüz ve düzenleyebildiğimiz alandır. En sağdaki alan ise bu nesnelerin özelliklerinin(rengi, arkaplan resmi,boyutu vb) belirlendiği çalışma alanıdır. Kısaca tasarım alanımız bu şekilde.

Zikirmatik uygulaması yapacağımızdan dolayı buna uygun materyalleri tasarım alanına ekliyoruz.

Ekranın özellikleri ise aşağıdaki gibidir.

Yukarıdaki ekran kullanıcı giriş ekranımız. Bu ekranın adını Screen1 olarak bırakmışız fakat Title olarak Zikirmatik düzenledik. Ayrıca bu ekrana bir background resmi ve uygulama ikonu olarak tesbih.png görselini ekledik. ScreenOrientation bölümü ekranın yatay mı dikey mi ya da her ikisi olarak çalışabilmesine olanak sağlayan bölümdür. Biz dikey yani Portrait seçeneğini tercih ettik.

Karşılama ekranında bir adet sayfa düzeni açısından image nesnesi ve bir adette ana uygulamaya geçmek için gerekli olan buton nesnesi kullandık.

Gördüğünüz gibi şuana kadar tasarımımızı gerçekleştirdik ve tek bir kod kullanmadık. App Invertor aracında kod blokları kullanacağımızı söylemiştik ve buda ikinci platform yani kodlama kısmında. App Invertor aracında kodlama bölümüne geçmek için butonuna tıklıyoruz. bizdenjnlp uzantılı bir dosya indirmemizi istiyor bizde kırmayıp indiriyoruz ve çalıştırıyoruz (:

Dosya çalıştığında bir java uygulaması yükleniyor ve kısa bir süre sonra aşağıdaki ekran karşımıza geliyor. Tabi önce gelen java uyarısına Run diyoruz.

Gördüğünüz gibi yukarıdaki tasarım alanında kodlarımız yazılmış durumda daha doğrusu kod bloklarımız oluşturulmuş durumda. Bu ekranda da sol sütunda ihtiyacımız olan kod blokları kütüphanesini görüyoruz. Buradan işimize yarayan kod bloğunu kod alanına taşıyarak uygulama için hazır hale getiriyoruz. “ana” adındaki ana uygulamaya gidecek olan buton için kod dizilimi gördüğünüz gibidir. Bir if blogu oluşturulmuş ve butona basıldığında bu if blogu çalışarak “ana” ismine sahip screeni kullanıcıya getiriyor.

Hemen uygulamanın olduğu “ana” screene bakalım.

Uygulamamızın ana ekranı gördüğünüz gibi programın doğasına uygun şekilde tasarladık. Tasarlama işlemini ilk screende olduğu gibi sol menüdeki komponentleri kullanarak gerçekleştiriyoruz.

Uygulama ekranında kullandığımız nesneler aşağıdaki gibidir.

İki adet resim 2 adet label(text), 2 adet buton ve çekilen zikirin yazacağı sonuç textbox’u. Butonlardan zkrbtn sayıyı arttırmak için silbtn ise sayıyı sıfırlamak amacıyla kullanılmıştır. Uygulama ekranının kodlamasına bakalım. Kod alanına geçmek için Open the Blocks Editor butonunu kullanıyoruz.

Gördüğünüz gibi basit bir uygulama ilk olarak ana ekran yüklenmesini istediğimiz değeri yüklüyoruz. Bu kod blogunda sayi değişkenini sonuc textbox’una aktarıyoruz. “sayi” değişkeninde ise 0 değerinin atandığını görüyoruz. Geriye butonların görevlerini atamak kaldı. “zkrbtn” yani zikir butonu sayıyı yukarı saydıracak olan butonumuzdur. Butona basıldığında sayı değişkenine +1 eklenerek değişken sonuc textbox’una gönderiliyor ve ekranda gösteriliyor. “silbtn” basıldığında ise sayı değişkeni 0 rakamı ile çarpılarak sıfırlanıyor ve sonu. textbox’una gönderiliyor. 0’la çarpılan sayı sıfır olacağından dolayı sonuç sıfırlanmış oluyor böylece kullanıcı yeni zikire geçebiliyor.

Tasarımımızı ve kod bloklarımızı oluşturduk şimdi geldi apk uzantılı dosyayı oluşturmaya. Bunu çok basit bir şekilde gerçekleştirebiliyoruz.

Tasarım alanında yani web ortamında bölümünde istediğiniz şekilde apk uzantılı dosyayı elde edebilirsiniz. İsterseniz Barkod olarak oluşturup Android telefonunuzla indirebilir, direk telefona indirebilir ya da bilgisayarınız aracılığı ile telefonunuza aktarabilirsiniz.

App Invertor aracı ile basit uygulamalar günlük hayatta işlerinizi kolaylaştıracak alternatif uygulamalar geliştirebilirsiniz.

Yaptığımız Zikirmatik uygulamasına buradan ulaşabilirsiniz.

 

İlker GÜVEN

Posted in Android and tagged , , , , , , , , , , , , , , , , .

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak.

Güvenlik Sorusu *

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>