App7: Telefonu Sallayarak Ekranı Temizleme
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.
.accelerometer, .canvas, .touched ve .Initialize 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ı; 1 x Canvas, 1 x Accelerometer.
Drawing and Animation bölümünden Canvas ekleyelim.
Canvas aracının özelliklerini şu şekilde değiştirelim; Width: Fill Parent, Height: Fill Parent.
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 ekrana dokunulduğunda nokta işaretlerinin çıkmasını sağlayacak kod bloklarını yazalım.
Blocks bölümünden Canvas1 aracını seçelim ve açılan ekrandan “when Canvas1.Touched.. do” bloğunu alalım.
Blocks bölümünden Canvas1 aracını seçelim ve açılan ekrandan “call Canvas1 .DrawCircle” bloğunu alalım.
.DrawCircle bloğunun centerX ve centerY değerleri için .Touched bloğunda yer alan x ve y işaretlerinin üzerine mouse ile gidildiğinde açılan pencereden uygun blokları yerlerine yerleştirelim.
Radius değeri için ise Math menüsünden “0” bloğunu alalım ve buraya bir sayı yazalım.
Blocks bölümünden Accelerometer aracına tıklayalım ve “AccelerometerSensor1. Shaking do” bloğunu alalım.
Bu adımda telefonu salladığımızda ekranın temizlenmesi için gerekli olan kod bloğunu Canvas1 aracına tıklayarak alalım.
Bu adımda blokları birleştirelim ve uygulamayı telefonda çalıştıralım.
