MIT App Inventor ile Basit ve Eğlenceli Uygulamalar: İlk Uygulama (Veriyi_Ekrana_Yazmak) #3

in #tr7 years ago

Finally we will be able to make the first Android app 😉 I want to use a simple narrative language ! Sorry, for my potential English grammar and translation mistakes .🙏😊

İlk basit android uygulama oluşturmak için projemize start veriyoruz, nihayet 😉 En basit anlatım dilini kullanmaya çalışacağım. Olası hatalarımdan dolayı şimdiden af diliyorum herkesten 🙏😊

manset.png

Uygulamamızı oluşturmaya görsel komponentlerle başlıyoruz 😊


Detaylara pek girmek istemediğimi belirtmiştim. Zaten gerekte yok sanırım. İlerde daha teferruatlı uygulamalar geliştirirken belki ihtiyaç olabilir.

Aşağıdaki resimdede gözüktüğü üzre, uygulamamızın görseli olacak User interface komponentlerini bir bir sürüklüyoruz uygulamamızın arayüzüne. İşe butonumuzu yerleştirerek başlıyoruz. Sağda okla gösterilen kutucukta butonunuzun ismini değiştirebilirsiniz. Örneğin "Gönder" olabilir.

veriekran1.png

Ardından yine soldaki listede "TextBox" ikonunu bulup(resimde yeşil renkle belirtilmiş) butonumuzun altına sürükleyip bırakıyoruz.

veriekran2.png

Yine solda textboxa girdiğimiz verileri butona basınca bize gösteren "Label" komponentini sürükleyip, az önce yerleştirdiğimiz textbox'un altına yerleştiriyoruz. Sağda yazı boyutunu değiştirebilirsiniz. Ben 25 olarak ayarladım. Ardından label'ın ekran genişliğine eş değer olması için "Width" değerini "Fill parent" yapıyoruz. Ardından hemen altındaki "Text" kutucuğunda, varsayılan olarak gelen "Text for Label1" yazısını siliyoruz.

veriekran3.png

Uyarılar içinde birşey düşündüm. Soldaki "Notifier" ikonunu okla gösterilen yere sürükleyip bırakıyoruz. Resimde gözüktüğü gibi.

veriekran4.png

Böylelikle uygulamamızın görsel kısmını bitirmiş olduk. Blok kodlama sayfasına sağ üstte ki "Blocks" butonuna tıklayarak geçiş yapabiliriz artık.

veriekran5.png

Esasında resimlerde gerekli bilgiyi yazmış bulunuyorum fakat olurda okuyamayan yada resmi büyütme olanağı bulunmayanlar için tekrardan ve daha açıklayıcı olması açısından çift dikiş yapmaya çalışıyorum. Soldaki listeden "Button1" ikonuna tıklayınca bir menü açılır o menüde en üstteki bloğu sürükleyip sağdaki boş alana bırakıyoruz. Şimdi bu kodun manası şu:
Butona tıklayınca gerçekleşmesini istediğiniz olay nedir?

verikod6.png

Ardından bir kontrol atıyoruz. Az önceki gerçekleşmesini istediğimiz event için. Solda ki listenin en üstünde bulunan "Control" ikonuna tıklıyoruz açılan menüde, en üstteki bloğu resimdeki gibi yerleştiriyoruz az önce ki bloğun içerisine.

verikod7.png

Az önce yukarda ki resimde entegre ettiğimiz bloğa "else" özelliği kazandırıyoruz. Burda ki olay nedir?
Eğer butona tıklanırsa şu eylem gerçekleşsin değilse boş geçilmesin, uyarı versindir.

verikod8.png

Solda ki listeden "Logic" ikonuna tıklıyoruz, açılan menüden üzerinde "=" işareti bulunan komponenti resimdeki gibi yerleştiriyoruz.

verikod9.png

Yine solda ki listede bizim eklediğimiz görsel öğeleri görüyorsunuz. "TexBox1" öğesine tıklıyoruz, Açılan menüden okla gösterilen komponenti logic bloguna resimdeki gibi yerleştiriyoruz.

verikod10.png

Ardından listede "Text" ikonuna tıklayınca açılan menüden, en üstteki içi boş bloğu logic ile karşılaştırma yaptığımız bloğun içerisine yerleştiriyoruz.
Burda ki amaç şu:
Eğer Textbox'ımız boşsa şunu yap değilse şunu gibi bişey

verikod11.png

Uyarı komponenti içinde soldaki listeden, bizim "Notifier1" ikonuna tıklayınca resimdeki komponenti sağdaki bloğun içerisine ekliyoruz.

verikod12.png

Burda klonlama olayına değinmişim(resimde). Pratik olarak bloğa sağ tık yapıp açılan listede "Duplicate" yazısına tıklıyoruz ve aynından bir tane bloğumuz oluyor. ne güzel değil mi? 😉
Sonra o klonladığımız bloğu resimdeki gibi yerleştiriyoruz.

verikod13.png

Burası en sevdiğim kısım. Boş geçmeye kalkar da yazı yazmadan butona tıklarsak istediğimiz uyarıyı burda düzenleyebiliyoruz. Resimde ben "Lütfen birşeyler yazın!" gibi birşey yazmışım siz dilediğinizi yazabilirsiniz.

verikod14.png

Bu kısımda uygulamamızın amacına ulaşması için gereken son hareketi yapıyoruz. Nedir bu hareket? Textbox'a girdiğimiz veriyi isteriz ki bu label aracılığıyla görelim. Bütün her şey bu son hamleye görmek içindi dersem abartı olmaz.
Solda ki listede "Label1" e tıklıyoruz ardından açılan menüden set komponentini sürükleyip else bloğuna iliştiriyoruz.

verikod15.png

Yine son bir hamle 😉 gerçekten bu son. Listeden "TextBox1" ikonuna ardından açılan menüden resimdeki "TextBox - Text" komponentini sağdaki bloğa entegre ederek mevzuyu noktalıyoruz.
Peki bu son hamlenin anlamı nedir?
şudur:
Yukardaki koşullar normal ise; tektbox'a girilen text'i label1 üzerinde text olarak göster

verikod16.png

Aşağıda programımızın bittikten sonraki resmini görüyorsunuz.

verikod17.png

Vakit ayırdığınız için teşekkürler arkadaşlar, sağolun !
Geri dönüşleri tatmin edici bulursam seriyi devam ettirmek isterim.
Sevgiyle kalın.

GitHub

Sort:  

This post has received gratitude of 1.64 % from @appreciator thanks to: @liberta.

Coin Marketplace

STEEM 0.25
TRX 0.20
JST 0.037
BTC 93459.77
ETH 3481.21
USDT 1.00
SBD 3.78