App2: Ekran Değiştirme
Kazanımlar
Problem çözme, öğrendiklerini paylaşma, eleştirel ve analitik düşünme becerisi kazandırmak.
Android telefon sistemi ve QR kod sistemi ile tanıştırmak.
.click ve .image .screen bloklarını öğrenir.
Bilgisayar
AppInventor 2 programı
Android telefon
MIT AI2 telefon uygulaması
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ı: 2 x Button, 2 x Resim ve 2 x Screen
Uygulamaya ikinci bir ekran eklemek için şu işlemleri yapalım.
Proje oluşturulduktan sonra açılan sayfanın sol üst bölümünde yer alan Add Screen düğmesine tıklayarak ikinci bir ekran oluşturalım.
Screen1 ve Screen2 ekranı için tasarımı hazırlayalım.
User Interface bölümünden Button ekleyelim.
Properties kısmından şu ayarları yapalım;
Height: Automatic, Width: Automatic, Image: Resim dosyası seçelim ve Text: Butonun üzerinde resim görüneceği için boş bırakalım.
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 Inventor2 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 buton görseline tıklandığında diğer ekrana geçmesini sağlayacak kod bloklarını yazalım.
Blocks bölümünden Button1 aracını seçelim ve açılan ekrandan “when button1.click do” bloğunu alalım.
Daha sonra ise Kontrol menüsünden “open another screen screenName” bloğunu alalım.
Blocks bölümünden text menüsüne tıklayalım ve “....” bloğunu alalım ve buton tıklandığında hangi ekrana yönelecek o ekranın adını tam olarak yazalım.
Bu adımda yapılan işlemlerin aynısını Screen2 içerisinde de yapalım ve uygulamayı telefonda çalıştıralım.
