APP INVENTOR DERS-4

BİR KLASİK(SIGN IN/LOGIN )

Kodlama dünyasına merhaba dedikten sonra pek çok uygulamada kullanılan kayıt ol ve giriş ekranını kodlayarak eğitime devam ediyoruz.

Bileşenlerimizi Ekliyoruz

Eklediğimiz bileşenlerin isimlerini ve kullanıcıya görünen text özelliğini ayarlayıp devam ediyoruz.

• TextBox1 = txtKullaniciAdi , Hint özelliği: Kullanıcı Adı Belirleyin
• TextBox2 = txtSifre , Hint özelliği: Şifre Belirleyin
• DatePicker1 = dtpDogumGunuAl , Text özelliği: Doğum Tarihinizi Girin
• CheckBox1 = chcKabul , Text özelliği: Kullanıcı sözleşmesini okudum ve kabul ediyorum
• Button1 = btnKayitOl , Text özelliği: Kayıt Ol

1. Bir önceki derste gördüğümüz gibi buton için tıklama olayını kullanıyoruz.Uygulamaların kayıt olma mantığını düşünürsek, eğer kullanıcı, kullanıcı sözleşmesini kabul ettiyse metin kutusuna girdiği kullanıcı adını, şifreyi ve doğum gününü kaydet.
2. MIT'nin bizim için hazırladığı hazır kodlardan Control içindeki if-then kod bloğunu alarak buton click olayının içine yerleştiriyoruz.
3. "Eğer kullanıcı, kullanıcı sözleşmesini kabul ettiyse" şartını bu if bloğuyla sağlıyoruz. if 'deki şart yerine geldiğindeyse then kısmına yerleştirdiğimiz kod blokları çalışır.

1. Genelde uygulamalarda veri aktarımları veritabanı-uygulama arasında yapılır.Biz şimdilik basit olması için girilen verileri, oluşturduğumuz değişkenlerde tutacağız.İşlemleri veritabanı ile yapsak dahi değişkenleri sıkça kullanacağız.
2. Bu kod bloğunu kullanarak,
3. Bu şekilde değişkenlerimizi oluşturuyoruz."name" kısmına değişkene vermek istediğimiz ismi yazıyoruz ve her biri için Text kısmından boş metin kutusu alıyoruz, çünkü oluşturduğumuz her değişkene ilk değerini atamalıyız.
4. Butona tıklandığında,
5. Eğer
6. "chcKabul" adını verdiğimiz checkbox işaretliyse(checked)
7. "txtKullaniciAdi" adını verdiğimiz metin kutusunun içine yazılan veriyi "Nickname" adını verdiğimiz değişkene, "txtSifre" deki veriyi de "Password" değişkenine ata.
8. "BirthDate" değişkenine kullanıcının girdiği doğum tarihi verisini atıyoruz.
9. Madde 7 den farklı olarak join(katıl/birleştir) işlemi kullanıyoruz. Text kısmından aldığımız join kod bloğu çentikleri arasındaki verileri birleştirir.Verileri birleştirmeye yukarıdan başlar.(join kod bloğu standart olarak 2 çentiklidir köşesindeki mavi çark simgesinden çentik sayısı artırılabilir.)

1. Add Screen(Ekran Ekle)'ye tıklayıp uygulamamıza 2. ekranımızı ekliyoruz.
2. Ekrana isim veriyoruz.
3. İstediğimiz zaman buradan ekranlar arasında geçiş yapabiliriz.

Giriş ekranımızı ekledik fakat giriş ekranına ne zaman geçileceğini belirlemedik. Gerekli şartlar yerine getirilip kayıt işlemleri tamamlandığında diğer ekrana geçiş yapılması için aşağıdaki şekilde görebileceğiniz gibi Screen1 kod bloğunda değişiklik yapmamız gerekiyor.

1. Variables(Değişkenler) kısmından "bilgiler" adını verdiğimiz yeni bir değişken oluşturuyoruz.
2. Lists(Listeler) kısmından en üstteki kod bloğunu kullanarak yeni boş bir liste oluşturuyoruz.
3. Lists kısmının 3. hazır kod bloğunu kullanarak, oluşturduğumuz listeye istediğimiz elemanları ekleyebiliriz.
4. Hangi listeye eleman eklemek istiyorsak buraya yerleştiriyoruz.
5. Listenin 1. index'ine(sırasına) "Nickname" değişkenini yani kullanıcı adını ekliyoruz.(Yazılım dillerinde index'ler genelde 0'dan başlar, ama app inventor için 1'den başlıyor)
6. Listenin 2. index'ine şifre verisini ekliyoruz.
7. Control kısmının 9. hazır kod bloğunu şekildeki gibi yerleştiriyoruz.Bu blok diğer ekranı açmamızı ve geçiş sırasında da veri aktarmamızı sağlıyor.
8. Geçiş yapmak istediğimiz ekranın adını bir metin kutusunun içine yazarak şekildeki gibi yerleştiriyoruz.
9. Diğer ekrana geçiş yaparken aktarılacak başlangıç değerini(startValue) buraya yerleştiriyoruz.(Bizim için bu başlangıç değeri "bilgiler" adlı listemiz)

Gerekli düzenlemeyi yaptıysanız giriş ekranımızı kodlamaya geçebiliriz.

Giriş Ekranına Eklediğimiz Bileşenler

*Giriş yapma mantığını düşünecek olursak kişi butona bastığında kullanıcı adı ve şifresi kayıt olurken belirledikleri ile aynıysa "lblSonuc" un text özelliğinde "Bilgiler Doğru Giriş Yapılıyor" yazsın.(Kendinizi geliştirdikçe daha farklı işlemler yaptırabilirsiniz, şimdilik örneği basit tutmak için

sadece ekrana yazı yazdırıyoruz)

Screen1'den aktardığımız bilgileri atamak(set etmek) için yeni değişkenler(variables) oluşturuyoruz

1. Ekran bileşeninin 3. kod bloğunu kullanıyoruz.Anlamı: "ekran yüklendiğinde/çalışmaya başladığında" aşağıdaki kodları çalıştır.
2. Yukarıda oluşturduğumuz listeye Screen1'den gönderdiğimiz liste verilerini aktarıyoruz.(get start value'yi Control bloklarında 10. sıradan alabilirsiniz)
3. Lists kısmı index 9 den alınan bu hazır kod bloğu, bir liste içerisinden girilen index numarasında ki veriyi seçmemizi sağlıyor.
4. Bu koyu mavi blokları Math kısmının en üstünden alıyoruz."gelenBilgiler" listesinin index 1 verisini(Screen1 den gönderdiğimiz kullanıcı adı), "gelenKullaniciAdi" ismini verdiğimiz değişkene atıyoruz.(Edit:"Sayı kutusunun içini değiştirmeyi unutmuşum siz 1 yapın")
5. Benzer işlemi şifre verisi için de yapıyoruz. (Sayı kutusunun içi 2 olacak)

1. MIT 'nin hazır kodlarından logic kısmını açıyoruz.
2. Mantıksal operatörlerden ve operatörünü seçiyoruz.
3. Şekilde gördüğümüz gibi yerleştiriyoruz.Hatırlayacak olursak if kod bloğu yanındaki şart doğruysa then kısmındaki kod bloklarını çalıştırıyordu.Tek başına if bloğunun yanına birden fazla kod bloğu yerleştiremiyoruz, giriş işlemini yapabilmek için birden fazla şartımız olduğundan(kullanıcı adı ve şifrenin doğru olması)  ve ikisininde aynı anda doğru olması zorunluluğundan dolayı and(ve) operatörü kullanıyoruz.Eğer şartlardan birisi sağlandığında diğerinin doğruluğu önemli olmadan işlem yapacak olsaydık or(veya/yada) operatörü kullanırdık.

1. Logic kısmından 2 adet "=" operatörünü alıyoruz.Bu operatör sağ ve solundaki verilerin birbiri ile aynı olup olmadığını kontrol eder.
2. Bizde kullanıcının uygulamamıza giriş yapmaya çalışırken yazdığı veriyi sola, kayıt olurken yazdığı(Screen1 den gönderdiğimiz) veriyi sağa ekliyoruz.
3. Şimdi de bu iki şartı aynı anda sağlayıp sağlamadığını kontrol edebilmemiz için, bu kod bloklarını and operatörünün sağına ve soluna yerleştiriyoruz.
4. Son olarak bütün şartlar sağlandığına göre artık "lblSonucYaz" adlı bileşenimizin text özelliğini"Bilgiler Doğru Giriş Yapılıyor" şeklinde set edebiliriz.

Kod Bloklarının Son Hali

İYİ ÇALIŞMALAR