Merhaba, Android cihazlara uygulama yapmaya bunun en basit yolu olan MIT üniversitesinin geliştirdiği android uygulama hazırlama platform...
Android cihazlara uygulama yapmaya bunun en basit yolu olan MIT üniversitesinin geliştirdiği android uygulama hazırlama platformu App Inventor 2 (Ai2) ile giriş seviyesinde uygulamalarla başlıyoruz.
Bunun için bize bir bilgisayar ve Android telefon lazım.Bilgisayarımızdan App Inventor 2 sitesine girip Google hesabımızla oturum açıyoruz.Eğer ilk kez oturum açıyorsanız kullanım sözleşmesini en alttaki butona basarak onaylamanız gerekiyor:
Ardından muhtemelen anket sayfası çıkacaktır."Never Take Survey" yazısına tıklayıp.anketi geçiştirelim.
Artık Sol üstten "Start new project" butonuna basıp tasarım sayfasına geçebiliriz.
İlk Ders: Hello Codi!-Arıya dokun vızıltıyı duy-
Yapacağımız uygulamada ekrana yerleştireceğimiz Ai2 logosundaki arıya dokununca ses çıkarmasını sağlayacağız.Öncelikle kullanacağımız dosyasları indiriyoruz:
Dosya 1 : Arı Logo İNDİR
Dosya 2 : Ses Dosyası İNDİR
Uygulamanızı tasarlamak için bileşenleri(Components) seçin:
App Inventor bileşenleri tasarım penceresinin sol tarafında Palette başlığının altında yer alır.Bileşenler (Components) android uygulamanın temel elemanlarıdır.Bazı bileşenler çok basit bileşenlerdir.Örneğin Label bileşeni gibi.Ekranda yazı göstermenize yarar, veya Button bileşeni bir eylemi başlatmak için dokunuruz.
Diğer bileşenler daha ayrıntılıdır. Örneğin Canvas bileşeni resim ve animasyonları göstermeye yarar, Accelerometer sensörü telefonu salladığınızda veya hareket ettirdiğinizde algılamayı sağlar.
Bileşenler (components) mesaj gönderir, video ve müzik çalar, web sitelerinden bilgiler alır ve benzeri şeylere yararlar.
Uygulamanızda bir bileşeni kullanmak için, tıklayıp ve Tasarımcının (Designer) ortasındaki görüntüleyicinin üzerine sürüklemeniz gerekir. Görüntüleyiciye (Viewer) bir bileşen eklediğinizde (hemen alttaki resimde 1 numara), Görüntüleyicinin (Viewer) sağ tarafındaki bileşenler listesinde de görünür.Bileşenler (Components-resimde no 2) ayarlanabilir özelliklere(Properties) sahiptir.Bu özellikler uygulamanın telefonda nasıl görünüp davranacağını belirler.Bir bileşlenin özelliklerini (Properties-resimde no 3) değiştirmek için Components listesinden seçili olması gerekmektedir.
HelloCodi uygulaması bir adet Button bileşeni içerir.Bu bileşen sayfanın başında verdiğimiz resimden oluşacak.Bunu yapmak için;
Adım 1a: User Interface kısmından Button bileşenini sürükleyip Screen1 yazan telefon ekranını gösteren kısma bırakıyoruz.
Adım 1b: Butona resim eklemek için Properties panosunda Image yazısının hemen altındaki "None" yazısına tıklayıp açılan minik pencereden "Upload File.." butonuna tıklıyoruz.Gelen pencereden "Dosya Seç" e tıklayıp sayfanın başında verdiğimiz linkten daha önce indirdiğimiz Codi.jpg resmini seçip "OK" e tıklıyoruz.
Adım2: Butondaki Text özelliklerini değiştirelim. "Text for Button1" yazısını silip boş kalmasını sağlayalım.Böylece resmin üzerinde yazı kalmasın.
Adım3: User Interface listesinden Label bileşenini sürükleyip ekranımızdaki resmin altına bırakıyoruz(resimde 1).Components panosunda Label1 olarak görünecektir.
Properties kısmından ayarlarımızı yapıyoruz;
(2) Text : Buraya "Touch the Bee" yazıyoruz
(3) FontSize: Yazı ebatını 30 olarak ayarlıyoruz.
(4) BackgroundColor: Yazının arkaplan rengini istediğimiz bir renk olarak ayarlıyoruz.
(5) TextColor : Yazımızın rengini istediğimiz bir renk olarak ayarlıyoruz.
Adım4: Palette panosunda Media başlığı altında bulunan Sound bileşenine tıklayıp Screen1 e sürükleyip bırakın(resimde no:1).Sound bileşeni görsel olmayan bir bileşendir.Bu sebeple ekranın neresine bıraktığınız önemli değildir. Görünmeyen bileşenleri ekranın orta alt kısmında Non-visible components başlığı altında görebilirsiniz.Media panosu altındaki "Upload File" butonuna tıklıyoruz(2).Açılan pencereden "Dosya Seç" e tıklayıp bilgisayarınızdan daha önce sayfanın başında verdiğimiz linkten indirdiğimiz Bee-Sound.mp3 ses dosyasını seçiyoruz(3). Properties panosunda bulunan Sound1 bileşenine ait Source başlığı altındaki None.. yazısına tıklayıp Bee-Sound.mp3 seçiyoruz.(4).
Uygulamamızın görsel kısımları tamamladık ve şimdi sıra geldi Blocks Editor ile programlamaya;
Programlamaya başlamak için sağ üstte yer alan Block butonuna tıklıyoruz:
Blocks Editor açılınca programlamaya başlayabiliriz.
Sesi Çaldıralım;
Adım1: Block editörümüzün sol tarafında bulunan Screen1 altındaki Button1 e tıklayınca çıkan kod bloklarından Button1.Click kod bloğunu sürükleyip sağ taraftaki kodlama alanına sürükleyip bırakıyoruz.
Adım 2a: Bu defa yine sol tarafta bulunan Sound1 e tıklıyoruz ve açılan pencereden Sound1.Play kod bloğunu fare ile tutup az önce koyduğumuz when Button1.Click kod bloğunun içine yapışacak şekilde sürükleyip bırakıyoruz:
Mor bloklara, olay işleyicilerinin gövdesine yerleştirilen komut blokları denir. Bir olay işleyicisi kodu çalışınca, içine yerleştirilen komut dizisini çalıştırır. Komut, gerçekleştirilecek eylemi belirten bir bloktur. Olay tetiklenince (ör butona basılınca) görevi yap ( ör: sesi çal)
Kodlarımızın son hali:
Uygulamamız bitti.Sıra geldi denemeye.Şimdi de uygulamamızı telefonumuzda nasıl görüntüleyeceğimizi görelim:
UYGULAMAYI TELEFONDA DENEME
Bunun için telefonumuza yardımcı bir uygulama yükleyerek App inventor 2 ile tasarlayacağımız her uygulamayı anlık olarak telefonumuzda deneyebileceğiz.Bu uygulamanın adı MIT AI2 Companion App.
Dikkat:Bu uygulamayı kullanırken tasarım yaptığınız bilgisayar ile uygulamayı deneyeceğiniz telefonun aynı internet ağında olması gerekmektedir
veya
veya QR kodu taratabilirsiniz.
(Bilinmeyen kaynaklardan uygulama yüklemeye izin vermelisiniz)
Uygulamayı telefonumuza yükleyip açtıktan sonra aşağıdaki resimde gördüğünüz ekranın en üstündeki Connect menüsünden AI Companion seçeneğine tıklıyoruz:
Açılan penceredeki kodu telefonumuza yazıp "connect with code" a tıklıyoruz. veya telefondaki "scan QR code" butonuna tıklayıp kamera ile bilgisayar ekranındaki kare kodu okutuyoruz.Kısa bir süre beklediğimizde artık tasarladığımız uygulamanın telefonumuzda çalıştığını görebilirsiniz.
NOT:Uzun süreli bağlantılarda (özellikle okul ağında) kopmalar yaşanabilmektedir. Bu durumda Connect menüsünden "Reset Connection" a tıklayıp sonrasında tekrar bağlanmayı deneyiniz.
Uygulamamız ekranda göründüğünde artık Arıya tıklayıp sesi duyabiliriz.
GÖREV: Öğrendiğimiz bu uygulamayı nasıl geliştirebilir, neler yapabilirsiniz?
Örneğin bir müzik kutusu tasarlayabilirsiniz.Sevdiğiniz müziklerden elinizde bulunan dosyalardan basit bir müzik kutusu oluşturabilirsiniz.
Bu dersimizde App inventor 2 ye basit seviyede bir uygulamayla giriş yapmış olduk. Sonraki derslerimizde giriş seviyesinden ileri seviyeye doğru uygulamaları bulabileceksiniz.
Yorumlar