APPİNVENTOR İLE İNSTAGRAM BEĞENİ BUTONU PROJESİ

Appinventor çocukların ve kodlamaya yeni başlayanların, rahatlıkla mobil uygulama geliştireceği bir platformdur. Bu platformda kod yazma zahmetiniz yoktur, sadece kod bloklarını sürükle-bırak şeklinde kullanarak mobil uygulamalar geliştirebilirsiniz. Ben de bu platformu kullananlardan biriyim. Bu platformda bir mobil oyun ve bir uygulama geliştirdim. Uygulamayı geliştirirken bir şeyin eksikliğini fark ettim. Bu konuda tüm Türkçe ve yabancı kaynakları taradım fakat bununla ilgili bir bilgiye ulaşamadım. Ben de madem bu bilgiyi bulamıyorum kendim üreteyim dedim.  Bugün de size bunu anlatacağım. Bulamadığım bilgi: “İnstagram beğeni butonu nasıl yapılır?”

İnstagram beğeni butonu yapmayı iki adımda anlatacağım. İlk adımda arka plan rengi ve yazı değişirken, ikinci adımda projemize iki tane png resmi ekleyerek, butonumuzu gerçek bir instagram beğeni butonuna dönüştüreceğiz. Hadi projemizi geliştirmeye başlayalım.

1.Adım

İlk olarak tasarım(designer) kısmında bir butonu(button1) sürükle bırak yardımıyla ekrana(screen) atıyoruz.

Daha sonra bloklar(blocks) bölümüne gidiyoruz. Solda gördüğümüz ve az önce tasarım ekranına eklediğimiz butonun(button1) üstüne basıyoruz.

When Button 1 click

Do

yazan bloğu seçiyoruz. Buna when bloğu diyoruz. Bunu sürükle-bırak şeklinde sağdaki zemine(uzay) bırakıyoruz.

 

Sol tarafın en üstünde control yazan butona tıklıyoruz ve burdaki if then else(if else bloğu) yazan bloğu da When bloğunun içine koyuyoruz.

Buraya kadar yaptıysanız birinci adımın %50’sini tamamladınız.

Logic kısmından iki boşluk ve aralarında da eşittir olan bloğu alıp if else bloğunun if kısmına ekliyoruz. Bunu yaptıktan sonra solda Colors yazan yere gidip siyahı alıyoruz ve boşlukların birine ekliyoruz.

Bundan sonra işimiz butonla ve renklerle. Butonumuza tekrar tıklıyoruz ve button1-background-color(arka plan rengi) bloğunu alıp logic bloğundaki  bir boşluğa ekliyoruz.

Burda dediğimiz şey eğer butonun arka plan resmi siyahsa(then) .. yap değilse(else) … yap. Bu 3 noktalara ne geleceğini de anlatalım ve birinci adımımızı bitirelim.

Then yazan kısma button1’e basarak set-button1 -backgroundcolor bloğunu getiriyoruz. Ucuna da colors yazan yerden kırmızı renk bloğunu ekliyoruz.

Bu bloğun altına ise set-button1-text bloğunu getiriyoruz. Bu bloğun ucuna ise solda text yazan kısımndan en üstte duran içi boş olan ve etrafında tırnaklar olan bloğu ekliyoruz. Ekledikten sonra içine “Beğendin” yazıyoruz.  Bu iki bloğu kopyala yapıştır(sağ tık>duplicate) yaparak else kısmına da ekliyoruz. Fakat bu bloklarda değişiklikler yapmalıyız yoksa istediğimiz sonuca ulaşamayız.

Text kısmını “Beğenmedin”,  renk kısmını ilk başta if bloğumuza yapıştırdığımız siyahı kopyalayarak bloğumuza ekliyoruz. Tasarım(designer) kısmına giderek text fontunu da beyaz yapıyoruz

Şimdi uygulamamızı çalıştırabilir ve nasıl göründüğüne bakabiliriz

  1. Adım

İlk adımda yaptığımız işin yarısından daha az bir iş yaparak, instagram beğeni butonumuzu geliştirmiş olacağız.  İlk olarak Tasarım(designer) bölümüne giderek iki tane png formatlı resim yükleyeceğiz. Ben bu resimleri tarayıcıda “free icon” kelimeleriyle aratıp karşıma gelen bedava ikon sitelerinden buluyorum. Siz de o sitelerden istediğiniz ikonu ücretsiz  olarak bulabilirsiniz. Ben yine de projede kullandığım ikonları bu metne ekleyeceğim.

Kullanacağımız ikonlar bunlar, içi boş olan kalbin projedeki adı bos(1).png;

içi dolu olan kalbin adı ise dolu.png

       

Bu ikonları sağ altta upload(yükle) yazan butona basarak projenize media olarak yükleyebilirsiniz.

İkonları projenize yüklediğinizi varsayarak devam ediyorum. Şimdi bloklar(blocks) kısmına gidiyoruz ve butonumuzun (button1) üstüne tıklıyoruz. Set-button1-image olan bloğu seçiyoruz. Bu bloğu then parçasının en altına ekliyoruz.   Bu bloğun ucuna text kısmından en üstteki bloğu alıp ekliyoruz ve içine bos(1).png yazıyoruz

Bu işlemi else parçası için de tekrar ediyoruz. Fakat onun text kısmına dolu.png yazıyoruz.

Burda dikkat etmeniz gereken iki şey var:

1-İkonların adını ben bos(1) ve dolu yaptım. Siz bu ikonları indirdiğinizde büyük ihtimalle adı farklı olacaktır.  Siz bu adları sondaki uzantısı ile birlikte(png, jpeg)  text bloğuna yazmalısınız. Eğer text bloğuna benim yazdığım adları yazmak istiyorsanız indirdiğiniz ikonun adlarını projeye eklemeden önce değiştirmelisiniz.

2- İkonları ekledikten sonra beğendin ve beğenmedin yazılarına ihtiyacımız kalmıyor, isteğinize göre bunları kaldırabilir ya da değiştirebilirsiniz.  Ben kaldırmayı tercih ettim.

Projenin son halinin ekran görüntülerini sizlerle paylaşarak bu yazımı bitiriyorum. Buraya kadar sabırla okuduğunuz için teşekkür ederim.

 

(Visited 60 times, 1 visits today)

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir