Mobil Programlamanın Önemi

Transkript

1 STEM Haziran 2016

2 Mobil Programlamanın Önemi 2015 verilerine göre dünyada 1.4 milyardan fazla akıllı telefon bulunmaktadır*. Bu telefonların %81 den fazlası Android işletim sistemine sahiptir*. Akıllı telefon sayısı arttıkça mobil programlamanın önemi de artmaktadır. *Kaynak: Gartner (2016)

3 Mobil Programlamanın Önemi Programlama eğitimi artık sadece bu alanda kariyer yapmak isteyenler için değil herkes için önemli hale gelmiştir. Gerek çocuklar gerek yetişkinler için birçok programlama eğitimi kampanyası yürütülmektedir. Artık sadece kullanıcı olmak yerine üretici olmak önemli hale gelmiştir.

4 Bu Dersten Ne Beklemeliyim? Bu ders sonunda MIT App Inventor arayüzüne tanıdık hale geleceksiniz. Android işletim sistemi için temel seviyede uygulama geliştirebilir hale geleceksiniz. Profesyonel hayatınıza uygun uygulamalar geliştirmek için gerekli bilgi altyapısına sahip olacaksınız.

5 Ders için gerekli önbilgi Websitesi ve programlama ortamını kullanabilecek düzeyde bilgisayar kullanma becerisine (temel seviye) sahip olmak. App Inventor ortamını anlayabilecek seviyede İngilizce bilgisine sahip olmak. Akıllı telefon kullanımına aşina olmak.

6 App inventor Sitesine Giriş ve Kayıt İlk olarak yapmamız gereken App Inventor sitesine girip kayıt olmak Bunun için ilk yapmamız gerek adresini internet tarayıcımıza yazarak siteye gitmek

7 App inventor Sitesine Giriş ve Kayıt Sitenin giriş ekranında sağ üst köşedeki Create Apps butonuna tıklayarak App Inventor sitesine kayıt olabiliriz.

8 App inventor Sitesine Giriş ve Kayıt Eğer giriş yapılmış bir gmail hesabınız yok ise karşımıza yandaki ekran gelecektir. Eğer Gmail hesabınız var ise adres ve şifrenizi girerek sonraki adıma geçebilirsiniz.

9 App inventor Sitesine Giriş ve Kayıt Yok ise Hesap Oluştur bağlantısına tıklayarak yeni bir Gmail hesabı oluşturulur.

10 App inventor Sitesine Giriş ve Kayıt Gmail hesabına giriş yaptıktan sonra karşınıza onaylamanız için aşağıdaki gibi ekranlar gelecektir.

11 App Inventor Sitesine Giriş ve Kayıt Bir kez izinleri kabul ettikten sonra App Inventor arayüzüne ulaşacaksınız. İlk girişinizde size ankete katılmak isteyip istemediğiniz sorulacak. Never Take Survey seçeneğini işaretleyiniz. Karşılama ekranı için ise Do not Show Again kutucuğunu işaretleyip Continue düğmesine tıklayın Bu işlemi sadece sisteme ilk girişinizde yapacaksınız

12 App Inventor Arayüzünü Tanıma Bahsedilen işlemleri tamamlamanın ardından App Inventor arayüzüne ulaşmış olacaksınız. Artık ilk uygulamamızın projesini başlatabiliriz.

13 App Inventor Arayüzünü Tanıma Proje uygulamanın geliştirme aşamasındaki haline verilen addır. Görüldüğü gibi Start new project düğmesine tıklayarak ardından projemize bir isim vererek uygulamamızı geliştirmeye başlayabiliriz.

14 App Inventor Arayüzünü Tanıma Proje ekranı iki ana kısımdan oluşur. Bunlar Designer ve Blocks olarak adlandırılır.

15 App Inventor Arayüzünü Tanıma Şu an ekranda görünen Designer kısmı ekrana eklenecek programda görünecek bileşenlerin tasarımını ve özelliklerini değiştirmeye yarar. Blocks ise uygulamamıza işlevini kazandıracağımız, uygulamamızın «kodlama» tarafını gerçekleştireceğiniz kısmıdır.

16 App Inventor Arayüzünü Tanıma Blocks kısmına ise Designer ekranındayken sağ üst köşede bulunan Blocks düğmesine tıklanarak ulaşılır. Designer ekranındayken Blocks düğmesinin aktif, Blocks ekranındayken Designer düğmesinin aktif olduğuna dikkat ediniz. Ekranlarımız arasında geçişi bu düğmeler aracılığıyla sağlıyoruz.

17 App Inventor Arayüzünü Tanıma Blocks ekranı aşağıdaki gibidir. Blocks ekranının arayüzü ve işlevi uygulama geliştirirken uygulamalı olarak açıklanacaktır. Şimdi Designer ekranına dönerek oradaki alanları tanıyalım ilk uygulamamızı geliştirelim.

18 App Inventor Arayüzünü Tanıma Designer ekranı Palette, Viewer, Components, Media, Properties gibi alanlardan oluşur. İlk olarak Viewer alanını inceleyelim.

19 App Inventor Arayüzünü Tanıma Viewer alanı telefon ekranının bir yansıması olarak düşünülebilir. Uygulamaya eklemek istediğimiz tüm bileşenleri telefon ekranına (beyaz alan) sürükleyip bırakarak ekleyebilirsiniz.

20 App Inventor Arayüzünü Tanıma Palette alanı uygulama için kullanılacak objelerin tamamını içeren bir kütüphane gibi düşünülebilir. Nesneler belli gruplara (User Interface, Layout, Media vb) bölünerek sekmeler altında toplanmıştır. Başlangıç uygulamarında sıklıkla kullanacağınız Button, Label, Table Arrangement, Image vb.) nesneler incelenecektir. Not: Merak ettiğiniz nesnelerin sağında yer alan Soru İşareti simgesine tıklayarak açıklamayı okuyabilirsiniz.

21 İlk Uygulamanın Yaratılması ve Test Edilmesi Lütfen adımları App Inventor hesabınız üzerinden adım adım uygulayınız. Eğer anlatım kısmında proje yaratmadıysanız. Lütfen yeni bir proje yaratıp ekrana bir Button (Düğme) sürükleyiniz.

22 App Inventor Arayüzünü Tanıma Components (Bileşenler) alanında ekrana sürüklenip bırakılan tüm nesneler görünmektedir. Eklenen bileşenlerin isim değiştirme işlemi Rename düğmesi ile yapılabilir. Kaldırılmak istenilen bileşenler için ise Delete düğmesi kullanılabilir.

23 App Inventor Arayüzünü Tanıma Properties alanı ise Components alanındaki seçili bileşenin özelliklerini değiştirmeye yarar. Önceden eklediğimiz Button ın font, boyut, resim, metin, şekil gibi özellikleri Properties alanından değiştirilmektedir. Her bileşenin kendine özgü özellikleri vardır. Yapılan örneklerde bu özelliklerden bazılarına değinilecektir.

24 İlk Uygulamanın Yaratılması ve Test Edilmesi Düğmemizin özelliklerini üzerinde resimden oluşan, metin olmayan, ve ekranı genişlik olarak kaplayan hale getirmeliyiz. Bu değişiklikleri Button seçiliyken Properties (Özellikler) alanından yapmalıyız. Button (düğme) ekrana ekliyken ekran alanındaki button seçili değilse üzerine tıklanarak seçilir.

25 İlk Uygulamanın Yaratılması ve Test Edilmesi İlk adımımız Button (Düğme) için bir resim yüklemek. Bunun için Image (Resim) özelliğine tıklayıp bir resim yüklemeliyiz. 1 Adımları takip ederek 1-Image, 2-Upload File (Dosya Yükle), 3-Browse (Gözat) seçenekleri tıklanarak istenilen resim dosyası seçilir. 2 3

26 İlk Uygulamanın Yaratılması ve Test Edilmesi Resim yüklemenin ardından Button un (Düğmenin) aşağıdaki gibi bir görünümü olmalıdır. Resimin ekranın tamamında görünmesi için Properties (Özellikler) alanından Height ve Width ayarlarının değiştirilmesi gerekiyor. Varsayılan boyut ayarı, resim boyutuna göre otomatik ayarlayan Automatic ayarlıdır. Değiştirmek için ilgili alana tıklanır.

27 İlk Uygulamanın Yaratılması ve Test Edilmesi Automatic dışındaki boyut seçenekleri Fill Parent, pixels ve percent olarak görülmektedir. Fill Parent: Ekranı (veya içinde bulunduğu nesne her neyse) tamamen kaplayacak boyuta gelir. Bulunduğu kabın şeklini alan sıvı gibi düşünülebilir. Ekran boyutu ne kadar büyükse o kadar büyüyecektir. pixels: Girilen piksel değerine göre sabit bir boyuta sahip olur. Örneğin 200 piksel. percent: Girilen değere göre ekranı yüzde oranında kaplar. Ekran çözünürlüğü bilinmeyen durumlar için kullanışlıdır. Örneğin ekranın %70ini kaplayan uygulama.

28 İlk Uygulamanın Yaratılması ve Test Edilmesi Düğme için genişlik ayarlarını Yüksekliği 200 Genişliği 180 olacak şekilde ayarlayınız. Düğme üzerinde yazan Text for Button1 yazısını silmek için Properties alanından Text değeri seçilip Backspace tuşuna basılabilir.

29 İlk Uygulamanın Yaratılması ve Test Edilmesi Artık Ekranımızın görüntüdeki gibi olması gerekiyor. Yaptığımız işlem ekrandaki Button u (Düğmeyi) şekil olarak değiştirmekti. Sonraki adımda bir ses dosyası yükleyeceğiz ve bu düğmeye tıklandığında sesin oynamasını sağlayacağız. Düğmeye tıklandığında -> Ses Çal işlevini kazandırmak için Block ları kullanacağız. Şimdi ses dosyamızı yükleyelim.

30 İlk Uygulamanın Yaratılması ve Test Edilmesi Ses dosyasını yüklemek için Media alanındaki Upload File (Dosya Yükle) düğmesine basılır ve resim yüklediğimiz ile aynı sırayı takip ederek ses dosyası ortama yüklenir. Siz de uygulamanız için sunulan ses dosyasını veya kendinize ait herhangi bir ses dosyasını kullanarak bu işlemi tamamlayınız.

31 İlk Uygulamanın Yaratılması ve Test Edilmesi Ses dosyasını uygulamada çalabilir hale getirmek için uygulamamıza Sound (Ses) bileşeni eklememiz gerekiyor. Bu işlem için öncelikle Palette teki Media (Ortam) sekmesine tıklayıp, Sound bileşeni tıpkı Button (Düğme) için yaptığımız gibi ekrana sürüklenip bırakılır. Button dan (Düğmeden) farklı olarak Sound ses olduğu için ekranda görünmek yerine (Bkz. 4. adım) ekranın dışında Non-Visible Component (Görünmez Bileşen) olarak belirecektir

32 İlk Uygulamanın Yaratılması ve Test Edilmesi Eklediğimiz Sound (ses) bileşenine tıpkı Button a resim eklediğimiz gibi yüklediğimiz ses dosyasını eklememiz gerekiyor. Bunun için Sound (ses) dosyası seçiliyken Properties (özellikler) alanına gidip, Source (kaynak) başlığının altında None (hiçbiri) seçeneğine tıklayarak ses dosyamızı seçmeliyiz. Ardından OK tuşuna basmalıyız. Böylelikle ses dosyamız artık çalabilir hale gelecek. 1 2

33 İlk Uygulamanın Yaratılması ve Test Edilmesi Şimdiye kadar yaptığımız kısım daha önce bahsedildiği üzere uygulamanın Designer yani Tasarım kısmıydı. Uygulamamıza amaçladığımız işlevi Blocks (Bloklar) kısmından kazandıracağız. Blocks geleneksel programlamadaki (popüler kültürde sıklıkla telaffuz edilen) kodlamanın App Inventor karşılığı olarak düşünülebilir. Temel olarak Blocks uygulamaya hangi durumda ne yapması gerektiğini anlatmamızı sağlayan bir dil veya iletişim aracı olarak düşünülebilir. Şimdi Blocks sekmesine geçip Button a (Düğmeye) ses çalma işlevi kazandıracağız.

34 İlk Uygulamanın Yaratılması ve Test Edilmesi Blocks sekmesine geçmek için Sağ üstte yer alan Blocks düğmesine basarak Blocks sekmesi açılır. 1

35 İlk Uygulamanın Yaratılması ve Test Edilmesi Blocks ekranı ekranda göründüğü gibi karşınıza çıkacaktır. Şimdi Blocks ekranının alanlarını inceleyeceğiz.

36 İlk Uygulamanın Yaratılması ve Test Edilmesi Blokların aktif olarak yer alacağı alan Backpack (sırt çantası) tekrar kullanmak üzere blokları saklama için kullanılacak alan Silmek istediğiniz blokları Çöp Kutusu simgesine sürükleyebilirsiniz. Bloklarınızda hata varsa bu alanda görünecektir.

37 İlk Uygulamanın Yaratılması ve Test Edilmesi Şimdi ilk Block u eklemek için etkileşimi sağlayacak olan YeniDugme Button ununa tıklayalım. İlgili bloklar sağ tarafta listelenecektir. Bu bloklar yanlarında yazan Click (tıklamak), GotFocus (Odak aktif), Long Click (uzun süreli tıklama) vb. gibi tetikleyiciler sağlandığında; Do (yap) kelimesinin yanında yer alan tüm bloklardaki işlemleri yapacaklardır. Şimdi örneğimiz ile devam ederek kullanımını görelim.

38 İlk Uygulamanın Yaratılması ve Test Edilmesi YeniDugme Button una tıkladıktan sonra When YeniDugme.Click do (YeniDugme ye tıklandığında.. Yap) Block unu tutup ekrandaki boş alana sürükleyip bırakalım. Block un aktif olabilmesi için do (yap) alanına ses çalma Block unu eklemeliyiz. Bunun için tıpkı YeniDugmeye tıkladığımız gibi Sound1 bileşenine tıklayarak, ilişkili blokları açığa çıkarmalıyız.

39 İlk Uygulamanın Yaratılması ve Test Edilmesi Sound1 bileşenini seçip açılan listeden call Sound1.Play (sound1 i oynat) Block unu seçip, görüldüğü when YeniDugme.Click bloğunun içine sürükleyip bırakın. Bu durumda düğmeye tıklandığında (yani dokunulduğunda) artık uygulamaya eklediğiniz ses dosyası oynatılacaktır.

40 İlk Uygulamanın Yaratılması ve Test Edilmesi Uygulamamıza son şeklini vermek için Button un üstüne bir Label (Etiket) bileşeni ekleyip içeriğini «Merhaba» olarak değiştirelim. Label (Etiket) bileşeni ekrana Metin eklemek istediğimizde kullandığımız bileşendir. İlk olarak Blocks ekranından Designer ekranına dönmek için sol üstten Designer düğmesine basmalıyız.

41 İlk Uygulamanın Yaratılması ve Test Edilmesi Pallete n Label (Etiket) bileşenini sürükleyip ekranda Button un üstüne bırakmalısınız. Ardından Label1 seçili iken Properties (Özellikler) ekranından Text (Metin) bölümüne Text for Label1 yazısı yerine Kalp yazınız.

42 İlk Uygulamanın Yaratılması ve Test Edilmesi Label1 bileşeninin Properties (Özellikler) ekranından sırasıyla gösterilen özellikleri değiştirelim. Yazı Tipini kalın hale getiren Font Bold seçeneğini işaretleyelim. Yazı büyüklüğünü arttırarak «24» değeri girip klavyeden Enter tuşuna basalım. Genişlik (width) için Fill Parent (Ekranı kapla) seçeneğini işaretleyip OK düğmesine tıklayalım. Son olarak yazıyı ortaya taşımak için Text Alignment seçeneğinden Center ı (merkezi) seçelim.

43 İlk Uygulamanın Yaratılması ve Test Edilmesi Uygulamamızın son halinin Designer ve Blocks ekranı aşağıdaki gibi görünmelidir. Şimdi Uygulamamızı test etmeliyiz.

44 İlk Uygulamanın Yaratılması ve Test Edilmesi App Inventor da uygulama test etmek için birden fazla yöntem vardır. Bu yöntemlerin adı AI Companion, Emulator, ve USB Bu yöntemler tek tek incelenecektir. Bunlardan en pratik olan yöntem AI Companion dır. Öncelikle AI Companion ın ne olduğu, çalışması için ihtiyaç duyulanlar, ve nasıl kullanılacağı anlatılacaktır.

45 İlk Uygulamanın Yaratılması ve Test Edilmesi MIT AI2 Companion App projenizin telefonunuzda eş zamanlı olarak test edilmesini sağlayan MIT tarafından hazırlanmış bir uygulamadır. Bu uygulamayı kullanmak için Android işletim sistemli bir telefon (veya tabletiniz olmalı) ve bilgisayarınız ve telefonunuz aynı internet ağına bağlı olmalıdır. Eğer yukarıdaki şartları sağlıyorsanız uygulamayı cihazınıza yüklemelisiniz (linke tıklayarak veya kare kodu taratarak indirebilirsiniz). Sağlamıyorsanız bu adımı geçebilirsiniz. Bilgisayarda geliştirin Telefon veya Tablette aynı anda test edin

46 İlk Uygulamanın Yaratılması ve Test Edilmesi Companion uygulamasını Android cihazımıza kurduktan sonra Bilgisayarda Projemiz açıkken üst barda yer alan Connect (Bağlan) düğmesine tıklayarak, AI Companion seçilmelidir. Android Cihazınızdaki MIT AI2 Companion uygulamasını başlatınız.

47 İlk Uygulamanın Yaratılması ve Test Edilmesi Bilgisayar ekranında soldaki, Android ekranında soldaki ekran belirecek. Companion App teki Scan QR code seçeneğine tıklayarak kameranızı bilgisayar ekranındaki karekoda tutunuz. Sorun olmadığı sürece bilgisayarınızda yaptığınız her değişikliği telefon ekranında test edebiliyor olmanız gerekmektedir. Eğer karekodu taramakta sorun yaşıyorsanız Your code is: ibaresinin altında yer alan kodu telefon ekranında bulunan Code alanına yazıp Connect with code (Kod ile bağlan) seçeneği seçilmelidir.

48 İlk Uygulamanın Yaratılması ve Test Edilmesi Eğer projede yaptığınız değişiklikler bir süre sonra ekranda görünmemeye başlıyorsa Connect (Bağlan) seçeneğindeki Reset Connection (Bağlantıyı Sıfırla) butonu ile bağlantı sıfırlanıp bağlantı kurma aşamaları tekrarlanabilir.

49 İlk Uygulamanın Yaratılması ve Test Edilmesi MIT tarafından önerilen bağlantı yöntemi açıklanan MIT Companion App tir. Eğer bu yöntemi kullanmak için gerekli şartları sağlıyorsanız, diğer test yöntemlerini denemeden geçebilirsiniz. Eğer Android telefonunuz varsa fakat telefonunuz ile bilgisayarınız aynı ağın parçası değilse kullanmanız gereken yöntem USB ile bağlantıdır.

50 İlk Uygulamanın Yaratılması ve Test Edilmesi USB ile bağlantı için ilk yapmanız gereken bilgisayarınıza uygun olan gerekli yazılımı yüklemek: Windows: Mac: Linux: MIT Companion App i daha önce bahsedildiği gibi telefonunuza kurun (bir önceki aşamada kurmadıysanız kare kodu tarayıp kurabilirsiniz. Ardından bilgisayardaki aistarter uygulamasını çalıştırınız.

51 İlk Uygulamanın Yaratılması ve Test Edilmesi USB yöntemini kullanmak için telefonunuzda USB hata ayıklama modunun aktif olması gerekmektedir. Bunun için Android cihazınızda Sistem Ayarlarından, Geliştirici Seçeneklerine girip USB Hata Ayıklama seçeneğine izin verildiğinden emin olmanız gerekir. Android 4.2 sürümünden daha yeni sürüme sahip telefonlarda Geliştirici Seçenekleri gizlidir. Açmak için Ayarlar > Telefon Hakkında seçeneğine gidip Build Number a (derleme numarasına) 7 kez dokunarak açılmaktadır. Seçeneği açtıktan sonra yukarıda bahsedildiği gibi USB hata ayıklama açılmalıdır.

52 İlk Uygulamanın Yaratılması ve Test Edilmesi Android cihazınızı bilgisayar USB ile bağlayıp «yığın depolama cihazı» olarak seçtiğinizden emin olun Android ve daha yeni sürümlerde telefon cihaz ekranında USB hata ayıklamaya izin verilsin mi seçeneği çıkabilir. Tamam a basarak bilgisayarın telefona erişimi için gerekli izini vermiş olursunuz. Bağlantıyı başlatmak için Connect menüsünden USB seçeneği seçilmelidir. Bağlantınızı test etmek için sayfasına gidebilirsiniz.

53 İlk Uygulamanın Yaratılması ve Test Edilmesi Diğer bir yöntem ise emülatör kullanımıdır. Eğer Android işletim sistemine ait bir cihazınız yoksa uygulamanızı test etmek için kullanmanız gereken yöntemdir. USB yönteminde bahsedilen yazılım bilgisayara bu yöntem için de kurulmalıdır. Windows: Mac: Linux: Kurduktan sonra AiStarter programı çalıştırılmalıdır

54 İlk Uygulamanın Yaratılması ve Test Edilmesi Ardından Connect (Bağlan) menüsünden Emulator seçeneği seçilmelidir. Emülatör başlarken aşağıdaki ekranlar sırası ile belirir.

55 İlk Uygulamanın Yaratılması ve Test Edilmesi Emülatör ekranı sırasıyla aşağıdaki gibi görünür son aşamaya geldiğinde programınız test etmeye hazırdır.

56 İlk Uygulamanın Yaratılması ve Test Edilmesi Ek olarak: Titreşim Ekleme, Çalan Sesi durduracak yeni bir düğme ekleme Label Yazısı Değiştirme Table ile farklı organlar ekleme yapabilirsiniz.

57 Ek Uygulama Geliştirme Yeni bir düğme ekleyelim. Sound Recorder (ses kaydedicisi) bileşenini ekleyelim. Yeni düğmeye basık tutulduğunda ses kaydı başlatıp bıraktığında ses kaydını durduran; Ses kaydı tamamlandığında Kalp düğmesine tıklandığında kaydedilen sesi çalsın.

58 BiyoKatalog uygulaması Bu bölümün sonunda ekranda göründüğü gibi yeni bir uygulama geliştireceğiz. Öğrenciler çevrelerindeki biyo-çeşitliliği fotoğraflayacaklar.

59 BiyoKatalog uygulaması Uygulama ekranı 1 TableArrangement (Tablo Düzenleme) 4 Button (Düğme), 1 Label (Etiket), 4 Checkbox (İşaret Kutusu) görünen bileşenlerinden oluşmaktadır. Non-Visible Components (Görünmeyen bileşenler) ise 4 Camera (Kamera) ve 1 AccelerometerSensor (İvmeÖlçerSensörü) bileşenlerinden oluşmaktadır.

60 BiyoKatalog uygulamasının işlevi Görünür bileşenler TableArrangement (Tablo düzenleme) içinde yer almalı. Uygulama işlev olarak Button lara (düğmelere) basıldığında kamerayı açar ve çekilen fotoğrafı ilgili düğmenin arka planı yapar. Fotoğraf çekilen düğme fotoğraf çekiminin ardından işaretli hale gelmelidir. Ve telefonu salladığımızda çektiğimiz resimler ve işaret kutuları sıfırlanmalıdır.

61 BiyoKatalog uygulaması Uygulamayı Başlatmak ve ilk Bileşenler Geçtiğimiz bölümde bahsedildiği gibi Start New Project düğmesine basarak yeni bir proje oluşturalım. İlk olarak yapmamız gereken ekrana eklediğimiz bileşenleri düzenli bir şekilde yerleştirmek için Layout (Düzen) sekmesi altında yer alan TableArrangement (Tablo Dizilişi) bileşenini ekrana eklemektir. Arrangement (Diziliş) sekmesindeki bileşenler ekrandaki bileşenlerin görsel düzenini sağlamak için kullanılır. Vertical (dikey) sadece tek sütun, Horizontal (tek satır), Table Arrangement bileşeni ise satır ve sütüna sahip tablo şeklinde düzen için kullanılır.

62 BiyoKatalog uygulaması Tablo Bileşeninin eklenmesi Palette menüsü altında bulunan Layout (Düzen) sekmesine tıklayarak Arrangement seçenekleri açılır. Buradan Horizontal (Yatay), Table (Tablo) ve Vertical (Dikey) Arrangement seçenekleri yer almaktadır. Satır ve sütunlara sahip bir uygulamamız olacağı için TableArrangement (Tablo Dizilişi) bileşeninini ekrana sürükleyip bırakmalısınız. Table içi boş olduğu için sadece çerçeve olarak görünecektir.

63 BiyoKatalog uygulaması Tablo Özelliklerinin Değiştirilmesi Tablomuz 2 sütun, 4 satırdan oluşmalıdır ve ekranı kaplamalıdır. Bu özellikleri değiştirmek için TableArrangement (Tablo Dizilişi) bileşeni seçiliyken Properties (Özellikler) alanından Columns (Sütunlar) 2, Rows (Satırlar) 4 olmalıdır Height (Yükseklik) ve Width (Genişlik) için ise Fill Parent (Ekranı Doldur) seçeneği seçilmelidir. Ayarları değiştirdikten sonra tablo (yeşil çerçeve) ekranı resimdeki gibi kaplamalıdır.

64 BiyoKatalog uygulaması Tablo İçine Bileşenlerin Eklenmesi Şimdi tablo içine adım adım bileşenleri ekleyeceğiz. İşlem sonunda ekran aşağıdaki gibi görünmelidir.

65 BiyoKatalog uygulaması Düğme Özelliklerinin Değiştirilmesi Şimdi uygulamamızın görünümünü son haline getirelim. İlk olarak Button ların (Düğmelerin) boyutlarını ve yazısını değiştirmeliyiz. 4 Button (Düğme) için de sırasıyla Height (Yükseklik) boyutlarını 40 Percent (Yüzde 40) ve Width (Genişlik) boyutlarını 50 Percent (Yüzde 50) yapalım. Böylece Button (Düğme) boyutu ekranın yarısı olacaktır. Son olarak da Düğme Text ine (Metinine) Resim Eklemek için Tıklayınız yazalım. 40

66 BiyoKatalog uygulaması İşaretKutusu Özelliklerinin Değiştirilmesi Checkbox (İşaret Kutusu) için ise yapmamız gerekenler ise FontBold u (Kalın Font) işaretlemek, Font büyüklüğünü 18 e çıkarmak, Ve Text ini (Metin) Fotoğraf Çekildi diye değiştirmek

67 BiyoKatalog uygulaması Başlık Etiketi Eklemek Gerekli değişiklikleri yapmamızın ardından ekran resimdeki gibi görünmelidir. Ekleyeceğimiz son görünür bileşen Başlık Etiketi olan Label olacak. Resimlerdeki gibi etiketi ekleyip tıpkı diğer bileşenlerde yaptığımız gibi bileşenin özelliklerini FontBold, Font büyüklüğü 18, Genişliği Fill Parent, Ve hizalaması Center (Orta), Text (metin) Biyo-Çeşitlilik olacak şekilde değiştirerek son ekran görüntümüze ulaşalım.

68 BiyoKatalog uygulaması Kamera Bileşeninin Eklenmesi Daha önceden bahsedildiği gibi uygulamada bazı Non-Visible Component lar yani Görünmeyen bileşenler de yer almaktadır. Bunlardan biri, her bir Button için 1 tane kullanmak üzere toplam 4 adet Camera (Kamera) bileşeni, diğeri ise AccelerometerSensor dur(ivmeölçer Sensörüdür). Bu bileşenleri eklemek için tek yapmanız gereken Ekranın herhangi bir yerine sürükleyip bırakmak. Kamera Palette alanında Media (Ortam) sekmesinde yer almaktadır. Camera (Kamera) bileşenini iki kez ekrana sürükleyin.

69 BiyoKatalog uygulaması İvmeÖlçer Sensörünün eklenmesi Aynı şekilde bu bileşeni de ekrana sürükleyip bırakmalıyız. AccelerometerSensor (İvmeÖlçer Sensörü) ise Sensors sekmesi altındadır. AccelerometerSensor (İvmeÖlçer Sensörü) telefonun hareketini takip eder. Örneğin telefon sallandığında bir işlevi bu sensöre atayabiliriz. İşlem sonunda Non- Visible Component lar (Görünmeyen bileşenler) altında 4 adet kamera ve AccelerometerSensor bileşenleri görünmelidir.

70 BiyoKatalog uygulaması Blok Sekmesine Geçiş Uygulamamızın görsel tasarımı tamamlandı. Şimdi işlev kazandırmak için ekranın sağ üst tarafında bulunan Blocks düğmesine basarak Block sekmesine geçmeliyiz. Eklediğimiz tüm bileşenlerin Blocks alanında belirdiğine dikkat ediniz.

71 BiyoKatalog uygulaması Düğme Tetikleyicisi Bloğunun eklenmesi Kazandırmak istediğimiz ilk işlev Button1 e (Düğmeye) basıldığında Camera1 in çalışmaya başlaması. Bunun için geçen örnekte yaptığımız gibi Button1 e tıklayıp açılan listedeki When Button1 Click tetikleyicisini seçip ekrana sürüklemeliyiz.

72 BiyoKatalog uygulaması Kamerayı Çalıştırma Bloğu Ardından Camera1 bileşenine tıklayıp Call Camera1.TakePicture (Camera1in Fotoğraf çekme fonksiyonunu çağırma) Block unu Button (Düğme) tetikleyicisinin içine yerleştirelim. Şimdi geçtiğimiz bölümde anlatılan test etme yöntemlerini kullanarak Button1 e dokunduğumuzda kameranın çalışıp çalışmadığını test edelim.

73 BiyoKatalog uygulaması Fotoğraf Çektikten Sonra Tetikleyicisi Kodumuzda bir sorun yoksa kameranın açılıp fotoğraf çeker durumda olması gerekmektedir. Tabi asıl istediğimiz çekilen fotoğrafın Button un arka planı olması. Bunun için Camera1 bileşenine tıklamalıyız. Açılan sayfada When Camera1.AfterPicture do bloğunu yani Camera1 fotoğraf çektikten sonra. Yap bloğunu Viewer alanına sürüklemeliyiz.

74 BiyoKatalog uygulaması Image (Resim) Parametresi Bu blok Button bloğundan farklı olarak parametreye sahiptir. Parametre bir blok ile ilintili alt değere sahip bloklara denir. Bu parametreyi kullanmak için fare imlecini parametrenin üzerine getirip bekleyin. Kullanılabilir bloklar açılacaktır. get image yani resimi al seçeneği çekilen fotoğrafı temsil etmektedir. Set image ise çekilen fotoğrafı başka bir resimle değiştirmek için kullanılır.

75 BiyoKatalog uygulaması İlgili Bloğun bulunması Amacımız Button1 in arka planını çekilen fotoğraf ile değiştirmek olduğu için Button1 in arka planını get image bloğuna eşitlememiz gerekiyor. Dolayısıyla ilk yapmamız gereken Button1 in blokları arasında Button1 image ını (resmini) değiştiren blokları bulmak için bileşenlerden Button1 e tıklayıp ilgili bloğu When Camera1.AfterPicture do bloğu içine sürüklemeliyiz. Liste açıldığında sağ tarafta bulunan Scroll bar ı (kaydırma çubuğunu) aşağıya kaydırarak tüm blokları görebilirsiniz. Tüm blokları inceleyerek ilgili ihtiyaç duyduğumuz Block u arayalım.

76 BiyoKatalog uygulaması Düğme Resminin Değiştirilmesi İhtiyaç duyduğumuz Block set Button1.image to yani Button1in resmini şuna ayarla bloğudur. Bu bloğun sağ tarafına hangi resmi eklersek Button yani düğmemizin resmi ona ayarlanacak. İlgili bloğu göründüğü gibi Camera Bloğunun içine sürükleyelim.

77 BiyoKatalog uygulaması Düğme Resminin Fotoğraf iledeğiştirilmesi Ardından Set Button1.Image to bolğuna get image parametresini ekleyelim. Bu işlem sonrasında çektiğimiz fotoğraf Button1 in resmi haline gelecek fakat fotoğrafın üzerinde hala Resim ekleme için tıklayınız yazısı görünmektedir. Şimdi ekleyeceğimiz blok ile bu yazıyı silelim.

78 BiyoKatalog uygulaması Düğme Metninin Değiştirilmesi Bunun için tekrar Button1 bileşenine tıklayarak açılan listeden set Button1.text to (Button1in metnini şuna ayarla) bloğunu biraz önce eklediğimiz bloğun hemen altına sürükleyelim.

79 BiyoKatalog uygulaması Metin Bloğunun Kullanılması Bu işlemin tamamlanması için Button1 metinini boş hale getirmeliyiz. Şimdi Block bileşenlerinden Text e tıklayarak boş metini seçeceğiz. Ekranda görünen ilk sıradaki Block içine her ne yazılırsa o metini ilgili bileşene yazdıracaktır. Boş olduğu takdirde ise var olan metni silecektir.

80 BiyoKatalog uygulaması Metin Bloğunun Kullanılması Aşağıdaki text (metin) bloğunun içine her ne yazılırsa Button1 üzerinde o görünecektir. Bu kısımda metnin silinmesini istediğimiz için bloğun içini boş bırakıyoruz.

81 BiyoKatalog uygulaması İşaretKutusunun İşaretlenmesi Diğer istediğimiz işlev ise fotoğraf çekilmesinin ardından işaret kutusunun işaretlenmiş olması. Bunun için checkbox bileşenine tıklayarak listeden set Checkbox1.checked to bloğuna düğme bloğu içine sürükleyelim. İşaretKutusu işaretli bloğunu doğru yani işaretli hale getirmeliyiz. Bunun için Logic (Mantık) kategorisinden True (Doğru) bloğuna ihtiyacımız olacak. Bu bloğu sürükleyip ilgili blok ile birleştirmeliyiz.

82 BiyoKatalog uygulaması Blokların Son Hali Block larımızın son hali göründüğü gibi olmalıdır. Şimdiye kadar yapılan işlemlerin aynısını bütün düğmeler için de yapınız.

83 BiyoKatalog uygulaması Blokların 2. Düğme için Tekrarlanmasıa Tüm düğmeler için aynı işlemleri tamamladığınızda Block larınız göründüğü gibi olmalıdır. Böylece her düğme üzerine dokunulduğunda Kamerayı başlatacak ve çekilen fotoğrafı düğmenin fotoğrafı yapacak.

84 BiyoKatalog uygulaması İvmeÖlçer Bloğunun Hazırlanması Programı ilk haline getirmek için yani düğmelerdeki fotoğrafları sıfırlamak ve silinen yazıları geri getirmek için AccelerometerSensor ı (İvmeÖlçer Sensörünü) kullanacağız. Öncelikle Acceloremeter tetikleyici bloğunu, tıpkı Button tetikleyici bloğunu eklediğimiz gibi ekrana ekleyelim.

85 BiyoKatalog uygulaması İvmeÖlçer Bloğu ile Düğme Resminin Sıfırlanması Bu tetikleyici çalıştığında fotoğrafları sıfırlanacak, ve yazılar geri gelecek. Dolayısıyla ilk olarak 4 Button için de resimleri sıfırlayacağız. İlk olarak Set Button1.Image to bloğunu AccelerometerSensor ın (İvmeÖlçer Sensörünün) içine sürükleyelim. Button (düğme) için Image (görüntü) sıfırlayacağımız için boş Text (Metin) eklemeliyiz.

86 BiyoKatalog uygulaması İvmeÖlçer Bloğu ile Düğme Resminin Sıfırlanması Görüntüdeki gibi ilk Button ın (düğmenin) resmi telefon sallandığında sıfırlanacak. Aynı işlemi her Button (düğme) için yaptığımızda block aşağıdaki gibi görünecektir.

87 BiyoKatalog uygulaması İvmeÖlçer Bloğu ile Düğme Metninin Sıfırlanması Button (düğme) text i (metini) için yapacağımız işlem de neredeyse aynıdır. Tek fark bu sefer text (metin) bloğu içine yazı girişi yapacağız. Metin sıfırlama için yaptığımız gibi Button1 bloklarından set Button1.Text Bloğunu İvmeÖlçer Sensörü bloğunun içine yerleştirip, text (metin) bloğu ile birleştirmeliyiz. Text (Metin) bloğu içine «Resim Eklemek için Tıklayınız» yazmalıyız.

88 BiyoKatalog uygulaması Uygulama Bloklarının Son Hali Her Button (Düğme) için aynı işlemi yapalım Son olarak İşaret kutularının işaretlerini kaldıracağız. Bunun için işaretleme için kullandığımız bloğun değerini Logic (Mantık) kategorisinde bulunan blok yardımıyla false yapacağız. Bu işlemi yine 4 işaret kutusu için tekrarlayalım ve uygulamamızı tamamlayalım.

89 Bloklarımızın Son hali

90 Uygulamanızı Android Cihazınıza Yüklemek Olası Sorunlar Eğer 2. düğme de sorun varsa 1. düğme için yapılan kontrolleri bu düğme ve kamera için de yapınız. Tetikleyicilerdeki bileşenlerin isimlerinin Button2 ve Camera2 olduğundan emin olunuz. Eğer telefonu salladığınızda uygulama ilk haline dönmüyorsa İvmeÖlçer Sensörünün ekli olduğundan ve içine gerekli blokların eklenmiş olduğundan emin olunuz.

91 Uygulamanızı Android Cihazınıza Yüklemek Test etmek dışında uygulamayı cihazımıza yükleme şansımız da var. Uygulamayı Android cihazınıza yüklemek için bir dosya inşa edip yüklemeniz gerekmektedir. Android işletim sistemi yükleme için apk formatını kullanmaktadır. Uygulamamızı yükleyebilmek için apk olarak yapılandırmalıyız. Bunun için üst menüdeki Build (Yapılandır/İnşa et) seçeneğini kullanacağız. Build seçeneği altında iki seçenek ile karşılaşacaksınız.

92 Uygulamanızı Android Cihazınıza Yüklemek Gerekli Ayarlar İlk seçenek daha pratik bir şekilde QR code (karekod) ile apk dosyasını cihazınıza internetten direkt indirmek için kullanılır. Karekodu indirmek için MIT AI2 Companion uygulamasını başlatıp Scan QR Code (QR kodu tara) seçeneğini seçip karekodu tarattığınızda uygulamanın apk dosyası cihazınıza inecektir. Uygulamayı yükleyebilmek için cihazınızdan Güvenlik -> Bilinmeyen kaynaklar seçeneğini seçmelisiniz.

93 Uygulamanızı Android Cihazınıza Yüklemek APK Dosyasının Bilgisayara Kaydedilmesi Eğer Android cihazınız internete bağlı değilse ikinci seçenek olan save.apk to my computer seçilmelidir. Ardından dosya bilgisayara kaydedilmeli ve USB yardımı ile Android cihazınıza taşınmalıdır. USB bağlantısı kesildikten sonra uygulama yüklenebilir. Diğer yöntemde olduğu gibi bunda da Bilinmeyen kaynaktan yükleme seçeneği işaretli olmalıdır.

94 Uygulamanızı Android Cihazınıza Yüklemek Güvenlik Ayarları Eğer dosya Android cihazınıza yüklenirken güvenlik hatasıyla karşılaşıyorsanız lütfen biraz önce gösterildiği gibi Ayarlar-> Güvenlik Bilinmeyen Kaynaklar seçeneğinin işaretli olduğundan emin olunuz. Lütfen bilinmeyen kaynaklardan yükleme seçeneğinin cihazınız için güvenlik açığına neden olabileceğini unutmayın. Kendi yarattığınız uygulamaları yükleyeceğiniz zamanlar haricinde kapalı tutunuz.

95 BarcodeScanner (Barkod Tarayıcı) ile Organel Avı Bu örneği birlikte yapacağız. Örnek ve örnekte kullanılan bileşenlere kısaca değinilecektir. Bu uygulamada temel olarak Canvas (tuval), ImageSprite (Hareketli Resim) ve BarcodeScanner (Barkod Tarayıcı bileşenleri kullanılacaktır. İlgili düğmeye tıklayan öğrenci sınıfa resimleri asılmış karekodları tarayarak organelleri yerleştirecektir. Barkod tarayıcı bilgi içeren barkodları tarayan bir bileşendir. Canvas üzerinde animasyon ve çizim yaratılmasına izin veren bir tuval olarak düşünülebilir. ImageSprite ise bir resim ekleyip tuval üzerinde herhangi bir noktaya eklenebilen ve hareket ettirilebilen bileşendir.

96 İçerik, Bileşenler ve Medya Dosyaları Gerekli olan tasarım, bileşen ve medya dosyaları resimde görüldüğü gibidir.

97 Uygulama blokları Uygulamanın ilk aşamasında tek bir düğme ve barkod tarayıcı için yandaki bloğu oluşturacağız. Son halinde ise bloklarımız şu şekilde olmalıdır.

98 Molekülü tamamla uygulaması Uygulamada öğrencinin eksik olan atomu su molekülünü tamamlaması için sürükleyip doğru yere bırakmasını isteyeceğiz. Bu örneğimizde de Canvas (Tuval) ve ImageSprite (Hareketli Resim) bileşenlerini kullanacağız. Önceki örnekten farklı olarak bu örnekte ImageSprite ı sürükleyip taşıma, ve bu bileşenin koordinatlarını bloklar yardımıyla değiştirmeyi kullanacağız.

99 İçerik Bileşenler ve Medya Dosyaları

100 App Inventor da Koordinat kavramı App Inventor da kullanılan koordinat düzlemi matematikteki koordinat düzlemine oldukça benzemektedir. Tek fark orijin noktasının sol üst köşede olmasıdır. x y

101 Uygulama Blokları Uygulamanın blokları için ilk olarak atomlardan birini hareket ettirmek için aşağıdaki bloğu hazırlayacağız. Bu blok hareketli resmin koordinatlarını parmağımızın dokunduğu yer ile eşitlenmesi işlemini yapmaktadır. Bu uygulama için kullanacağımız en önemli kavram programlamanın en öenemli noktalarından olan if then else kavramıdır. Bu kavram sayesinde programlar mantıksal sınama yaparak bir koşul doğru ise belli işlevleri yerine getirip, doğru değil ise farklı işlevleri yerine getirmektedir.

102 Uygulama Blokları Bu uygulamada if then..else kavramını doğru atom yerine sürüklendiğinde yerine oturmasını yanlış ise yerine geri dönmesini sağlamak için kullanacağız. Bunun için bloğumuz aşağıdaki gibi olacak. Yandaki blok parmağımızı hidrojen resminde kaldırdığımızda resmin boşluk isimli yuvaya dokunup dokunmadığını kontorl ediyor ve eğer dokunuyor ise ikisinin koordinatlarını birbirine eşitliyor. Eğer dokunmuyor ise hidrojen resmini ilk konumuna geri döndürüyor.

103 Uygulama Blokları Diğer iki atomun da sürüklenebilir olması için yandaki bloklara ihtiyacımız olacak. Diğer iki atom resmi yanlış cevap olacağı için sınamaya gerek olmadan parmağımızı çeker çekmez yerlerine dönmelerini yandaki bloklarla sağlayabiliriz.

104 Uygulama blokları tamamlanmış hali

105 Serbest Düşme Uygulaması Uygulamada öğrenciler farklı yerçekimi ivmesine sahip gezegenlerdeki serbest düşmeyi görecekler. Tıklanan gezegene göre canvas ın (tuvalin) arkaplanı ve imagesprite ın (hareketliresim) hızı değişmeli. Bu örnekteki en önemli kavramlar variable (değişken) ve clock (saat) bloklarıdır.

106 Değişken Kavramı Değişken içinde bir değer barındıran ve bu değeri değiştirebildiğimiz bloklara denir. Değişkenleri denklemlerde kullandığımız x, y gibi bilinmeyenlere benzetebiliriz. Onlardan farklı olarak değişkenlerin değerini kendimiz belirleyebiliyoruz. İlk olarak bir başlangıç değeri atadığımız değişkeni uygulama içinde gerekli değer ile değiştirebiliriz. Bu örnekte değişkeni yerçekimi ivmesi değerini değiştirmek için kullanacağız.

107 Clock (saat) Kavramı Clock değişkeni sürekli tekrarlı bir tetikleyicidir. Tekrar aralığını milisaniye cinsinden biz belirliyoruz. Ve saat çalıştıkça saat içindeki olaylar sürekli olarak tekrar etmektedir.

108 İçerik Bileşenleri ve Medya Dosyaları

109 Uygulama Blokları