Kod Görevi 1: Sunum Yap

Ekranınızı Tasarlamak

Bu uygulamada kullanıcının farklı görselleri görmesini sağlayan bir yazılım programlayacaksınız. Ekranınızı tasarlarken, kullanıcının başka bir resme geçmesini sağlamak için bir buton, resimleri görmesini sağlamak için de resimler kullanacaksınız.Önce bunu dizayn ekranında ayarlayacaksınız.

  1. Sayfaya resim ekleyin
    • Resmin uzunluk ve genişliğini ayarlayarak sayfaya oturmasını sağlayın.
    • Bunun için “fill parent” (alanı doldur) özelliğini kullanabilirsiniz. Bu özelliği kullanınca, seçtiğiniz obje bulunduğu alanın tamamını doldurur. Resim1 sayfanın içindeyken, butonlar yatay çerçevenin içindedir. Hangi objenin nerede durduğunu bilmek için ekranınızın sağ tarafındaki “components” bölümünden, objelerin sırasına bakabilirsiniz.
  2. Resmin altına yatay çerçeve ekleyin
  3. Yatay çerçevenin içine iki tane buton sürükleyin
    • “components” kısmından butonların üstüne tıklayın.
    • Butonların üstüne “sonraki” ve “önceki” yazmak için ‘text’ kısmına gidin ve yazıyı değiştirin.
    • Aynı zaman da kodunuzu yazarken butonların işlevini hatırlayabilmek için butonların adını “önceki” ve “sonraki” olarak değiştirin. Bunu “rename” (yeniden adlandır) kısmından yapabilirsiniz.
  4. Fotoğraf dosyanızda kullanmak istediğiniz bir resmi yükleyin.
  5. Fotoğraf dosyanızın başında bulunmasını istediğiniz fotoğrafı seçin.
    •  “components” kısmından resim1’e tıklayın, daha sonra “picture” (resim) tuşuna tıklayın. Böylece istediğiniz resmi seçebilirsiniz.
  6. En az 2 tane daha sayfa ekleyin. Biz kendi dosyamız için üç sayfa kullandık ama siz istediğiniz kadar sayfa kullanabilirsiniz.
    • Şimdilik diğer sayfalar için hiç bir şey yapmanıza gerek yok. Ama kodlamaya başladıkça bu sayfalara da resimler ve butonlar eklemeniz gerekecek.

designer

Kodlama

Şimdi ekranınızı tasarladığınıza göre, uygulamanıza işlev katacaksınız. Kullanıcılar butonlara basınca uygulamanın başka bir resim olan bir sayfa açmasını sağlayacaksınız. Bunun için buton eylemlerini ayarlayan bloklardan yararlanacaksınız.

  1. “Önceki” olarak adlandırdığınız butona basın. Bu buton için kullanabileceğiniz birçok blok göreceksiniz. “when button.click” bloğunu çalışma alanınıza sürükleyin.
  2. “control” yazısına basın ve “open another screen screenName” bloğunu bulun.
  3. Boş bir yazı kutusu alın ve onu “open another screen” bloğunun içine yerleştirin. Bu butona basınca gitmek istediğiniz sayfanın adını yazın. Bizim için bu Screen2.
  4. Aynı şeyleri “sonraki” butonu için de tekrarlayın.

blocks

Kontrol Noktası!

Daha çok ilerlemeden önce kodunuzun çalışıp çalışmadığını mutlaka kontrol edin. Her zaman tüm uygulamanın kodunu yazmadan önce adım adım ilerleyip kontrol ederek gitmek daha iyidir.  Aksi taktirde uygulamanızda çalışmayan bir kod olduğunda sebebini anlamakta zorluk çekebilirsiniz.

App Inventor’ı telefonunuza, tabletinize veya emülatörünüze bağlayın ve kullanın. Kodunuzun istediğiniz gibi çalışıp çalışmadığını kontrol edin. Eğer istediğiniz gibi çalışmıyorlarsa kodunuzu değiştirerek düzeltmeyi deneyin.

Not: Yaptığımız ilk sayfa haricindekilerde henüz hiç bir şey olmadığından telefonunuz üzerinden sayfa değiştiremezsiniz. Bu nedenle bilgisayarınızı kullanarak değiştirmeyi deneyin. Bu ileride işinize yarayabilir.

Uygulamayı bitiriyoruz

Şu an bir sayfayı tasarlamayı ve kodlamayı öğrendiğinize göre diğer sayfaları da programlayabilirsiniz! İsterseniz başka sayfalar ekleyerek  fotoğraf dosyanızın daha uzun olmasını sağlayabilirsiniz ama en az 3 tane sayfanızın olduğundan emin olmalısınız. Aşağıdaki adımlar size uygulamanızın nasıl çalıştığını ve neler yapmanız gerektiğini anlatacak.

  1. 1 ve 12 arasındaki tüm adımları her sayfa için tekrar edin. “önceki” butonunun önceki sayfaya “sonraki” butonun ise her zaman bir sonraki sayfaya gittiğinden emin olun.


3screen-diagram
4screen-diagram

Son Kontrol Noktası

Uygulamanızın çalıştığından emin olun! Her “sonraki” ve “önceki” tuşlarını deneyin ve her tuşun doğru sayfaya yönlendirdiğinden emin olun. Eğer doğru çalışmıyorlarsa sayfaların isimlerini doğru yazdığınızdan emin olun.

Tebrikler! Şu an ilk kodlama görevini tamamladınız! Unutmayın, herkes bir mobil uygulama kodlayamaz!

Bir yerde takıldınız mı? Kodumuzu yükleyebilirsiniz. Kodların nasıl yükleneceğini anlatan yönergeler burada:  Kod yönergeleri

 

Kodu yükle