Dizayn ( Designer) Ekranı - Social

"Android Yazılımı Artık Çok Kolay"

1. Social (Sosyal İletişim Bileşenleri):
1. ContactPicker:Telefonunuzda kayıtlı olan rehbere ulaşmanızı sağlar seçilen kayıt üzerinde işlem yapmanıza yarar. Örneğin E-posta yollama, telefon araması gibi.
2. EmailPicker: Bu bileşen “TextBox” bileşeni görünümündedir. İçine bir elektronik posta girişi yapılırken, kayıtlı olanların seçimi için bir açılır liste görüntüler.
3. PhoneCall: “Properties” alanındaki “PhoneNumber” değişkenine girilen telefon numarası bilgisini kullanarak telefon araması yapar.
4. PhoneNumberPicker: Bu bileşene tıklandığında cihazınızdaki rehberi görüntüler tabi telefon numaraları olarak.
5. Sharing: Cihazda tanımlı paylaşım yapabileceğiniz programları listesine ulaşmaya yarar, örneğin “google plus”, “facebook”, “twitter”. Bu liste ile içeriğinizi paylaşıma açabilirsiniz
6. Texting: SMS (Kısa Mesaj) gönderme özelliği olan bir cihazdan SMS göndermenizi sağlar. Bu özellikle gelen SMS mesajını da alabilirsiniz.
7. Twitter: Twitter hesabınızdan gönderi yapmanıza olanak veren bir bileşendir. Bu işlemi uygulamanız içinden yapabilmek için “http://twitter.com/oauth_clients/new” adresini ziyaret edip yetkilendirme almanız gerekiyor.

Dizayn ( Designer) Ekranı - Drawing ve Animation - Sensors

"Android Yazılımı Artık Çok Kolay"

1. Drawing and Animation (Çizim ve Animasyon Bileşenleri): Bu bileşnler ile çeşitli oyun animasyonları benzeri dokunmatik ile kontrol edilen animasyon ve çizim yapılır. İlk önce ekranımıza “Canvas” (Tuval) bileşeni eklememiz diğer bileşenleri de bunun içinde konumlandırılmamız gerekmektedir.
1. Canvas: Yukarıda açıklandığı üzere bu bileşen resim tuvali mantığı ile boş bir hareket sahnesi yaratır.
2. Ball: “Canvas” bileşeni içine eklenen bu bileşenin blok bölümünde de göreceğimiz üzere, hız, dokunma, görünürlük ve pozisyon ayarlarını yönetebilirsiniz.
3. İmageSprite: Bu bileşen ile hazırladığınız bir resim dosyasını animasyonunuza ekleyebilirsiniz. Bu bileşen içinde hız, dokunma, görünürlük ve pozisyon ayarlarını yönetebilirsiniz.

1. Sensors (Sensör Bileşenleri): Bu bölümdeki bileşenler ekranda görünmezler, cihazın donanımından aldığı bilgiyi uygulamaya iletmeye yararlar. Bu bölümdeki sensörlerin denemeleri sanal olmayan cihazda yapılmalı ve  cihazın ilgili sensöre sahip olup olmadığı tespit edilmelidir.
1. AccelerometerSensor: Bu bileşen cihazın 3 boyutlu hareketini (X ekseninde, Y ekseninde, ve Z ekseninde)  ve hareket hızını hesaplar ve uygulamanıza bildirir. Örneğin blok bölümünde olduğu gibi “Shaking” (Çalkalama) hareketi y (cihazın kabaca her ekseni içine alacak şekilde hızlıca hareketi) sonucu yapılacak bir işlemi blok bölümündeki “When.sensörismi.Shaking” hazır bloğu altına yazılabilirsiniz.
2. BarcodeScanner: Bu bileşen cihazda yüklü bir barkod tarayıcı yazılımını kullanarak dönen barkod verisine göre işlem yapmaktadır. Bu bileşeni kullanmadan önce ücretsiz bir barkod tarama yazılımını yoksa eğer kurmanız gerekiyor. Tarama sonrası barkodun değeri size döner.
3. Clock: Bu bileşen zaman sayıcı bir kronometre şeklinde kullanılır. Belli zaman içinde yapılacak işler veya tekrarlanacak işler bu bileşenin blok bölümünde bulunan hazır bloklar içinden yönetilir. Ne kadar zaman yani zaman döngüsü değeri “Properties” bölümünde bulunan “TimerInterval” bölümüne yazacağımız değer ile belirlenir. Bu değer milisaniye cinsindendir. Yani 1 (Bir) saniye için 1000 (Bin) değeri yazılır.
4. LocationSensor: Bu bileşen ile o anda bulunulan coğrafi konum tespit edilir ve uygulamaya bu konum iletilir. Bu bilgiler; Latitude (Enlem bilgisi), Longitude (Boylam bilgisi), Altitude (Rakım-Yükseklik bilgisi) olarak sayı formatında alınır.
5. NearField(NFC): Bu bileşen ile NFC özelliği taşıyan etiket bezeri pasif veya aktif cihazlarla iletişim kurabilirsiniz. Bu cihazlardaki bilgiyi okumaya veya yazmaya yarayan bir bileşendir.
6. OriantationSensor: Cihazın yatay veya dikey durumunu hesaplayan bir sensördür. Mesela dikey veya yatay konumda olması gibi. Bunu yaptığınız uygulamanın görselliğinin uyumu için kullanabilirsiniz. Örneğin “VideoPlayer” bileşeni cihaz yatay konuma geldiğinde tam ekran olabilir. Üç başlık altında açı verisi alınır. Bunlar; Roll, Azimuth, Pitch. Blok bölümünde diğer tüm bileşenlerde yapabileceğiniz gibi denemeler yaparak, örneğin bahsedilen değerleri bir “TextBox” içine yazdırarak hangi harekette hangi değerlerin nasıl değiştiğini test ediniz.
7. ProximitySensor: Nesnelerin yakınlığını ölçen bir sensör var ise o nesnenin uzaklığına göre uzaklık değerini uygulamanıza bildirir.

Dizayn ( Designer) Ekranı - Layout ve Media

"Android Yazılımı Artık Çok Kolay"

1. Layout (Ekran Konumlandırma) Bileşenleri
1. HorizontalArrangement: Bu bileşen içine yerleştirdiğiniz tüm bileşenlerin yanyana (Yatay) konumlanmasını sağlar.
2. VerticalArrangement:Bu bileşen içine yerleştirdiğiniz tüm bileşenlerin üstüste (Dikey) konumlanmasını sağlar.
3. TableArrangement:Bu bileşen bize sayısı “Properties” (Özellikler) bölümündeki “Columns” (Sütunlar) ve “Rows” (Satırlar) alanına yazdığımız kadar sütun ve satır içeren bir tablo konumlandırma alanı oluşturur. Bileşenlerin istediğimiz hücrenin içine konumlanmasını sağlar.



2. Media (Medya Bileşenleri)
1. Camcorder: Uygulama içinde video camera ile video çekimi yapmanıza olanak verir. Sizin uygulamanızdan cihazın camerasına bağlanarak çekimi yapar ve blok bölümündeki “AfterRecording” olayı içine yazılan işlem sonunda “clip” özelliğinde bulunan “getclip” değişkeni bize kaydedilen video klibin dosya yolunu döndürür.
2. Camera: Bir önceki “Camcorder” bileşeninde olduğu şekilde bize kameradan fotograf çekme imkanı verir.
3. İmagePicker: Fotograf seçimi yapılabilecek bir ekran görüntülenir.
4. Sound: Uygulama içinde ses çalmayı sağlar. Bu bileşen açılış efekti veya değişik sesli uyarılar gibi anlık ses dosyaları içindir.
5. Player: Uygulama içinde kontrol butonları ile ses çalmayı sağlar, örneğin .mp3 dosyaları gibi.
6. SoundRecorder: Bize ses kaydetme ve oluşan ses dosyasını kullanma imkanı sağlayan bileşendir.
7. SpeechRecognizer: Konuşmayı yazıya çeviren bir bileşendir. Sesler şimdilik ingilizce dilini tam olarak tanımaktadır.
8. TextToSpeech: Bu bileşen de bir öncekinin tersine yazılan yazıyı sese çevirmektedir.
9. VideoPlayer: Cihazda kayıtlı bir video dosyasını çalmaya yarar. İlgili video dosyasının tam yolu “Properties” (Özellikler) bölümündeki “Source” (Kaynak dosya yolu) bölümüne girilmeli veya program çalışması esnasında blok bölümündeki “Set.VideoPlayerBileşeni.source” özelliğine değer olarak aktarılmalıdır.

Dizayn ( Designer) Ekranı - User Interface

"Android Yazılımı Artık Çok Kolay"

3. DİZAYN EKRANI ALANLAR BÖLÜMÜ:

1. PALET ALANI
1. User Interface (Arayüz Bileşenleri):Bu bölüme başlamadan önce resimde görüldüğü üzere tüm bileşenlerin yanındaki “?” soru işaretine tıklarsanız o bileşen hakkında bilgi göreceksiniz.

1. Buton: Tüm uygulamalarda karşımıza çıkan düğme bileşenidir. Genelde “onclick” olayı ile işlemler yapılmaya başlanır.
2. CheckBox: Seçenek işaretleme için kullanılır. Örneğin bu bileşenin işaretli olması veya olmaması kontrol edilerek program akışı yönlendirilir.
3. DatePicker:Uygulamalarınıza tarih eklemek için kullanabileceğiniz bir bileşendir. Blok bölümünde tarih seçim kutusu içinden “Yıl, Ay, Gün” bilgisini alabilir ve bunları değişkenlere aktarabilirsiniz.
4. İmage: Uygulamaya resim ve çizim eklemenizi sağlar. İster daha önce yüklediğiniz isterse anlık yükleyebileceğiniz bir “Picture” özelliği vardır. Bu özelliği kullanmak için Dizayn ekranında bileşeni ekledikten sonra “Properties” alanında bulunan “Picture” butonunu tıklıyoruz.
5. Label: Uygulamaya etiket ekler.
6. ListPicker: Uygulama içinde liste oluşturmak ve bu listeyi göstermek için kullanılır. Bir sonraki “ListView” bileşeni arasındaki fark listenin bu bileşende görünmemesi butona basılınca görünür olmasıdır.
7. ListView: Bir önceki “ListPicker” bileşeninin aksine liste ve liste elemanları ekranda görünür durumdadır.
8. Notifier: Hatırlatma ve kısa uyarı diğebileceğimiz, mesaj kutusu olarak bildiğimiz bir yazının görünmesi sağlar. Bu bileşeni diğer görsel bileşenler gibi ekran üzerinde değil, alt kısımda “Non-Visible” (Görünmeyen Bileşenler) bölümünde görürüz.
9. PasswordTextBox: İçine yazdığımız karakterleri maskeleyen bir görsel özelliği bulunan bileşendir. Özellikle şifre ve gizli bilgileri almak amaçlı kullanılır.
10. Slider: Sağa sola hareket ettirdiğimiz bir hareketli buton ile pozisyon değişimi ile bağlantılı bir değişkeni değiştirebileceğimiz görsel bir bileşendir.
11. Spinner: Liste elemanlarını açılır kutu içinde görüntüler, listeye “Properties” (Özellikler) bölümünde “ElementsFromString” içine yazılan ve virgülle ayrılan seçenekleri ekler. Çoktan seçmeli bir değer alınacaksa bu bileşen kullanılır.
12. TextBox: Bu bileşen içine karakter yazılabilen veya görüntülenebilen bir bileşendir. “bileşenismi.Text” değişken özelliği ile değer verilebilir. İlk örneğimizde kullanılmıştır.
13. TimePicker: Uygulamalarınıza saat eklemek için kullanabileceğiniz bir bileşendir. Blok bölümünde tarih seçim kutusu içinden “Saat, Dakika” bilgisini alabilir ve bunları değişkenlere aktarabilirsiniz.
14. WebViewer: “Properties” (Özellikler) bölümündeki “HomeUrl” bölümüne yazılan web adresini görüntülemeyi sağlayan bileşendir. Bu bileşenin blok bölümünde de “HomeUrl” özelliğine değer aktarıp istediğiniz web sitesini uygulamanın çalışması esnasında da görüntüleyebilir siniz.

Dizayn ( Designer) Ekranı - Menü ve Buton Bölümleri

"Android Yazılımı Artık Çok Kolay"

APP INVENTOR 2 DİZAYN EKRANI

1. MENÜ BÖLÜMÜ: Bu bölüm dizayn ekranı açıldığında gelen ve blok ekranında da değişmeyen bölümdür üst kısımda yer alır.

• Projects Menüsü (Projeler):Bu menü klasik programlardaki “File” dosya menüsü benzeri bir menüdür. Projenizi kaydetmek, dışarıya çıkarmak veya başka bir çıkarılmış projeyi kendi çalışma alanınıza almak için ve tabi ki yeni proje başlatmak için kullanılan komutlar vardır.
• Connect Menüsü (Bağlantı Kurma):Bu menüde bir önceki bölümde gördüğümüz üzere uygulamamızı denemek yani çalıştırmak için seçebileceğimiz yollar ve uygulamamızı çalıştırma esnasında meydana gelebilecek kırılmalarda, uygulamayı kapatma komutları vardır.
• Build Menüsü (Derleme):Bu menüde denemeleri yapılmış ve çalışan uygulamamızı dağıtmak için bize seçenekler sunar. İster QR KOD ile siteden indirimesini sağlarız. İstersek APP Inventor 2 nin bizim için oluşturabileceği .apk (Android OS için derlenmiş program dosyası) dosyasını bilgisayarımıza indirebiliriz.
• Help Menüsü (Yardım): Bu menüde ise tümü ingilizce olmak üzere; Yardım dokümanları ve eğitim linkleri yanında program içindeki bölümlerin ayrıntılı bir kütüphanesi ve versiyon bilgileri vardır.

2. BUTON BÖLÜMÜ:Menülerin hemen altında koyu yeşil alan içinde bulunan bu bölümde uygulama içinde farklı bileşenler yerleştirilerek farklı işleri yerine getirmek için kullanabileceğimiz ve birbiri ile bağlantılı çalışabilen ekranları (Screen) eklme silme ve arasında geçiş yapmanın yanı sıra, Bileşenleri yerleştirdiğimiz “Dizayn Ekranı” ile kullanıcı etkileşimi sağlayan ve olayları yöneten “Blok Ekranı” arasında geçişi sağlayacak butonlar vardır.

İlk Uygulamayı Çalıştırmak

"Android Yazılımı Artık Çok Kolay"

3. Uygulamayı Çalıştırma:

• Sağ üst köşede “Blocks (Bloklar)” butonuna tıklıyoruz ve gelen ekranın solunda bulunan “Blocks (Bloklar)” alanı altında bir önceki bölümde eklediğimiz Button1 bileşenimizi buluyoruz ve üzerine bir kere tıklıyoruz. Viewer alanında şekillerden oluşan ve çeşitli olay ve özelliklerin görselleştirilmiş simgeleri çıkacak.
• Bu simgelerin en üzerinde olan ve içinde “When Button1 Click do” yazan bloğu tıklıyoruz. Hemen bu blok “Viewer” alanına yerleşecek. Bu blok butona başıldığında yapılacak işleri yerleştirebileceğiniz bir blok.
• TextBox1 bilşenimize tıklıyoruz ve açılan menüden üzerinde “Set TextBox1.Text to” yazan bloğa tıklıyoruz. Bu blok “TextBox” bileşeninin “Text” yani yazı özelliğine bir yazı yazabilmemize veya boş bırakıp silebilmemize olanak verir.
• Bir önceki bölümde eklediğimiz bileşenler haricinde “Built-in” başlığı altında bulunan “Text” bloğuna tıklıyoruz, açılan menüden en üstteki (“ ”) çift tırnak içinde boş kutu olan bloğu tıklayıp “Viewer” alanına yerleştiriyoruz. Bu blok içine istenilen yazının yazılabileceği ve yazı yani “Text” özellikli diğer tüm bloklara eklenebilecek özellikte bir bloktur. Zaten solunda bir yapboz kulakçığı vardır.
• Şimdi “Viewer” alanında 3 adet blok var. Bunları aşağıdaki resimde görüldüğü gibi sürükleyip birleştiriyoruz ve son eklediğimiz blok olan içi boş yazı kutusu (Text) içine Merhaba Dünya yazıyoruz.

• 

• MIT AI2 Companion ile Uygulama Çalıştırma:”Google Play Store” uygulamasına cep telefonu veya tabletinizden giriyoruz. Arama alanına “MIT AI2” yazıyoruz ve uygulamayı indiriyoruz. Uygulama kurulduktan sonra uygulama hazırladığımız web sayfasına  geliyoruz, üst kısımdaki menülerden “Connect” tıklıyoruz ve açılan menüden “AI Companion” tıklıyoruz ve cıkan QR kodu “scan QR code” butonuna basarak taratıyoruz. Uygulama kendisi kurulacak ve otomatik başlayacaktır. İlk uygulamayı çalıştırdınız başarılar dilerim.

• Emulatör ile Uygulama Çalıştırma: İlk önce Windows işletim sistemleri için “http://appinventor.mit.edu/explore/ai2/windows.html” , MAC OS x işletim sistemleri için “http://appinventor.mit.edu/explore/ai2/windows.html” ve Linux işletim sistemleri için “http://appinventor.mit.edu/explore/ai2/linux.html” sayfalarından birine girip yazılan yönergelere göre kurulum dosyasını indiriyoruz ve kurulumu gerçekleştiriyoruz.

“aiStarter” uygulamasını çalıştırıyoruz. Bu emulatörü yani sanal cihazımızı çalıştırıyor. İstersek usb kablosu ile cihazımıza direkt bağlanıp uygulama yükleme işlemini de yapabiliriz. Ama şuan “Connect” menüsünden “Emulator” tıklıyoruz ve uygulama otomatik olarak çalıştırılıp sanal cihaz ekranında yazılımımız görünür olacaktır.

Blok Bölümü ( BLOCKS ) ve Olayları Yönetme

"Android Yazılımı Artık Çok Kolay"

2. Blok Bölümü ve Olayları Yönetme:

• Sağ üst köşede “Blocks (Bloklar)” butonuna tıklıyoruz ve gelen ekranın solunda bulunan “Blocks (Bloklar)” alanı altında bir önceki bölümde eklediğimiz Button1 bileşenimizi buluyoruz ve üzerine bir kere tıklıyoruz. Viewer alanında şekillerden oluşan ve çeşitli olay ve özelliklerin görselleştirilmiş simgeleri çıkacak.
• Bu simgelerin en üzerinde olan ve içinde “When Button1 Click do” yazan bloğu tıklıyoruz. Hemen bu blok “Viewer” alanına yerleşecek. Bu blok butona başıldığında yapılacak işleri yerleştirebileceğiniz bir blok.
• TextBox1 bilşenimize tıklıyoruz ve açılan menüden üzerinde “Set TextBox1.Text to” yazan bloğa tıklıyoruz. Bu blok “TextBox” bileşeninin “Text” yani yazı özelliğine bir yazı yazabilmemize veya boş bırakıp silebilmemize olanak verir.
• Bir önceki bölümde eklediğimiz bileşenler haricinde “Built-in” başlığı altında bulunan “Text” bloğuna tıklıyoruz, açılan menüden en üstteki (“ ”) çift tırnak içinde boş kutu olan bloğu tıklayıp “Viewer” alanına yerleştiriyoruz. Bu blok içine istenilen yazının yazılabileceği ve yazı yani “Text” özellikli diğer tüm bloklara eklenebilecek özellikte bir bloktur. Zaten solunda bir yapboz kulakçığı vardır.
• Şimdi “Viewer” alanında 3 adet blok var. Bunları aşağıdaki resimde görüldüğü gibi sürükleyip birleştiriyoruz ve son eklediğimiz blok olan içi boş yazı kutusu (Text) içine Merhaba Dünya yazıyoruz.

•