App1: Arka Plan Değiştirme
Kazanımlar
Problem çözme, öğrendiklerini paylaşma, eleştirel ve analitik düşünme becerisi kazanır.
Android telefon sistemi ve QR kod sistemi ile tanışır.
.text ve .click, backgroundimage bloklarını öğrenir.
Bilgisayar
Android telefon
MIT AI2 telefon uygulaması
Online App Inventor programı
Google hesabı
USB şarj kablosu
http://ai2.appinventor.mit.edu/ adresine girerek App Inventor’u açalım ve buradan New Project diyerek yeni proje başlatalım.
Ardından uygulamayı başlattığınızda telefonunuzun ekranında çıkacak olan görüntünün oluşturulması adımına geçelim.
Bu tasarımı oluşturmak için gerekli olan App Inventor araçları:
4 x button, 4 x Arka plan resmi, 1 x HorizontalArrangement
Layout bölümünden HorizontalArrangement ekleyelim.
Properties bölümünde şu ayarları yapalım;
AlignHorizontal: Center, AlignVertical: Top, Height: 45px, Width: Fill Parent
User Interface bölümünden 4 tane “Button” ekleyelim.
Properties bölümünde şu ayarları yapalım;
Height:40px, Width: Fill parent, Text: buton adı(1)
Arka plan görselleri ekleyelim.
Upload File düğmesine basarak görünmesini istediğimiz resimleri ekleyelim.
Bu işlemleri tamamladıktan sonra uygulamanın telefonda nasıl göründüğüne bakmak için Connect menüsünden “AI Companion” seçelim.
Bilgisayarınızın ekranında aşağıdaki fotoğraftakine benzer bir QR kod ve ayrıca giriş kodu görseli gelecektir.
Bu “QR Code” veya “Code”değerlerini Android telefonunuzdaki AppInventor2 uygulamasını çalıştırdığınızda ekrana gelecek olan alanları kullanarak giriş yapabilirsiniz.
Telefonunuzun ekranına gelen görüntüde “connect with code” ve “scan QR code” şeklinde 2 buton olacaktır. Buradaki seçeneklerden birini seçerek ilerleyelim.
Seçim yapıldıktan sonra hazırlamış olduğumuz tasarım Android telefonun ekranında görüntülenmiş olacak.
Tasarım aşaması tamamlandıktan sonra kod yazma aşamasına geçelim.
Bilgisayardan açmış olduğunuz App Inventor sayfasının sağ üst köşesinde bulunan Blocks butonuna tıklayalım ve kod yazma ekranına geçelim.
Uygulama başlatıldığında ekrandaki butonlara basıldığında arka plan resminin değişmesi için gerekli olan kod bloklarını yazalım.
Blocks bölümünden Button aracını seçelim ve açılan ekrandan “when button1.click .. do” bloğunu alalım.
Blocks bölümünden Screen1 aracını seçelim ve açılan ekrandan “set screen1. backgroundimage to” bloğunu alalım.
Blocks bölümünden text menüsüne tıklayalım ve “....” bloğunu alalım. Boşluk alana Upload edilmiş olana resimlerin adını ve uzantısını(1.jpg) şeklinde yazalım.
Bu adımda blokları birleştirelim ve bu işlemi diğer butonlar için de uygulayalım. Tamamladıktan sonra uygulamayı telefonda çalıştıralım.
