Appinventor Nedir ve İlk Uygulamamı Nasıl Yaparım?

Appinventor kodlama ve programlama bilmeyenlerin rahatlıkla uygulamalar geliştirebileceği tamamen ücretsiz bir platformdur. Appinventor, Google tarafından ortaya çıkarılan ve sonrasında Massachusetts Institute of Technology (MIT) tarafından geliştirilen, özgür bir uygulama geliştirme aracıdır.
Appinventor blok tabanlı programlamayı esas alır. Front-end(tasarım) bölümünü bileşenlerle tasarlayabilir, back-end(kodlama) bölümünü sürükle-bırak blokları ile geliştirebilirsiniz. Kısacası blokları ve bileşenleri kullanarak, tek satır kod yazmadan rahatlıkla uygulamalar geliştirebilirsiniz. Bu yazımızda sizlerle appinventorda nasıl hesap açacağımızı ve ilk uygulamamızı nasıl geliştireceğimizi öğreneceğiz.

   İlk olarak tarayıcımıza appinventor yazıyoruz ve aratıyoruz. Çıkan sonuçlardan ilkine tıklıyoruz. Gelen ekranda sol üstte turuncu renkte create apps(uygulamalar geliştir) yazacaktır. Buraya tıklıyoruz. Gelen yeni sekmede gerekli bilgileri giriyoruz ve kaydoluyoruz. Google hesabınız ile kaydolabilirsiniz.

   Kaydolduğunuzda şöyle bir ekran gelmelidir. Burda “dont show again “ yazan kutucuğa tıklıyoruz ve “continue” yazan butona basarak bunu kapatıyoruz. Eğer bir daha bildirim gelirse onu da kapatıyoruz ve projelerimizi liste halinde görebileceğimiz ekrana ulaşıyoruz.

    Yaptığımız projeler bu ekranda listelenecek. Sol üstten “Start new project” (yeni bir projeye başla) butonuna tıklıyoruz. Projemize bir isim veriyoruz ve OK butonuna tıklıyoruz. Ben ilk projemizi MerhabaDunya olarak isimlendirdim. Siz gönlünüze göre isimlendirebilirsiniz.

   Tebrikler uygulama geliştirebileceğiniz arayüze ulaştınız. Solda “Palette” yazan kısma dikkatlice bakıyoruz. “User İnterface”(Kullanıcı arayüzü) gözünüze çarpmıştır. Burası bizim velinimetimiz, en kıymetli yerimiz. Uygulama geliştirirken en çok kullanacağımız yer kullanıcı arayüzü bölümüdür. Bu bölümü çok iyi bilmek işlerimizi oldukça kolaylaştıracaktır. Kullanıcı arayüzü neden mi bu kadar önemli? Siz uygulamanızı kullanıcıyla iletişime sokmak istediğinizde bu bölümü kullanacaksınız. Örneğin, bir telefon araması yapmak için ara tuşuna basmak zorundasınız. Bu tuş aslında kullanıcı arayüzü bölümünde gördüğümüz “button” dur. Eğer ara diye bir tuş olmasaydı, arkada binlerce satır kod olsa bile, kullanıcı nasıl arama yapacağını anlayamaz ve telefonu kullanmak istemezdi. Biz şiir gibi kod yazsak bile arayüzümüzü sade ve göze hitap eden şekilde tasarlamadıktan sonra kullanıcı uygulamamızı kullanmak istemeyecektir. Arayüzün önemini anladığımıza göre kodlama kısmına geçebiliriz. Sağ üstte “designer”(tasarım ekranı) ve “blocks”(blok ekranı) butonları var. Biz şu an tasarım ekranındayız, “blocks” yazan butona tıklayarak blok ekranına gidebilir ve kodlama yapabiliriz. Kodlama ekranında gördüğümüz beyaz alan bizim uzayımız. Kodlamalarımızı bu uzayda yapacağız. Sol tarafta “built-in”(geliştir) kısmını görebiliriz. Burda “control” yazan yere tıkladığımızda if bloğunu ve diğer blokları görebiliriz. Tavsiyem bu blokları biraz kurcalamanız. Bloklara sağ tıklayıp çıkan help yazısına tıklarsanız, tıkladığınız bloğun ne işe yaradığını İngilizce olarak anlatan sayfaya ulaşabilirsiniz. Şimdilik bu alanları kendiniz detaylı inceleyebilirsiniz. Sonraki yazılarda bu alanları detaylı olarak ele alacağım. Bu yazıda sizi daha fazla sıkmadan, işin eğlenceli kısmı olan uygulama geliştirmeye geçelim.


   Geliştireceğimiz uygulamada bir buton ve bir label olacak. Butona bastığımızda label kısmında yani ekranda “Merhaba Dünya” yazacak. Bu kavramları şu an bilmiyor olabilirsiniz ama uygulamayı yaptığınızda zaten bunların ne olduğunu, nasıl çalıştığını öğreneceksiniz.

   Uygulamayı geliştirmek için “designer”(tasarım ekranı) bölümüne geçiyoruz. “Label” yazan bileşeni sürükle-bırak yardımıyla ekranımızın içine atıyoruz. Daha sonra “Button” yazan bileşeni sürükle-bırak yardımıyla ekranımızın içine atıyoruz.

   Tasarım ekranımız bu kadar. Şimdi kodlama ekranına(blocks) geçiyoruz. Tasarım ekranındayken sağ üstte “blocks” yazan yere tıklıyoruz. Kodlama ekranımız açıldığında sol taraftan button1 bileşenine tıklıyoruz. “When button1 click do” (Button1 e tıklandığında … yap) bloğunu seçiyoruz ve uzayımıza sürükle-bırak yardımıyla atıyoruz.

   Bu adımı bitirince sol tarafta label1 bileşenine tıklıyoruz. “set label1 text” ( “label1” de ne yazacağına karar ver ) yazan bloğu seçiyoruz. Bu bloğu ilk seçtiğimiz bloğun arasına yerleştiriyoruz.


   Şimdi ekrana Merhaba Dünya yazdırmak için tek bir eksiğimiz var. Bunun için text kısmına gidiyoruz ve en üstte, içi boş olan, pembe renkli bloğu sürükle-bırak yardımıyla yeşil renkli bloğun ucuna ekliyoruz. Pembe renkli bloğun içine “Merhaba Dünya” yazıyoruz.


   Tebrikler ilk uygulamanızı yaptınız, harika gidiyorsunuz. Peki bu uygulamayı telefonunuzda nasıl kullanabilirsiniz ya da telefonunuza nasıl indirebilirsiniz? Bunun için android cihazınızdan play store uygulamasına girip MIT Appinventor 2 diye aratıyorsunuz.

    Görselde yer alan uygulamayı indiriyorsunuz. Bu uygulamayı kullanarak yaptığımız uygulamaları canlı olarak test edeceğiz ve eğer istersek .apk uzantılı olarak Android cihazımıza yükleyip çalıstırabileceğiz. Burda iOS platformuna uygulamalar geliştirmek isteyenler için bir parantez açmak istiyorum. MIT Appinventor iOS geliştiricileri için bir platform oluşturmak istiyordu ve bunun için de belli bir miktar bağış topladı. Şu an beta testinde olan platformda hem iOS için uygulamalar hem de Android için uygulamalar geliştirebilirsiniz. iOS geliştiricileri için kısa bir parantez açtıktan sonra uygulamamızı nasıl indireceğimizi anlatabilirim. Yukarıda “connect” (bağlan) ve “build” seçenekleri gözünüze çarpmıştır.



   “Connect” uygulamamızı canlı şekilde test etmemizi sağlarken, “build” uygulamamızı apk olarak android cihazımıza yüklememizi sağlar. Bunları iki madde halinde aşağıda anlatacağım.

1-Uygulamayı telefona yükleme(Build):
a- “Build” yazan kısma basın ve çıkan yazılardan “provide QR code for .apk” yazan yere tıklayın. Telefonunuzdan uygulamayı açıp “scan QR code” yazan yere tıklayın. QR kodu telefonunuza okutun. Telefonunuzda bir internet sekmesi açılacak, bu internet sekmesinden uygulamayı indirin. Gerekli izinleri verin ve uygulamayı yükleyin

b- “Build” yazan kısma basın ve çıkan yazılardan “save .apk to my computer” yazan yere tıklayın. Uygulama .apk uzantılı olarak bilgisayarınıza indirilecektir. Uygulamayı bilgisayarınızdan android cihazınıza göndererek ve gerekli kurulumları yaparak kullanabilirsiniz.

2– Uygulamayı canlı olarak test etme(Connect):
a- “Connect” yazan kısma basın ve çıkan yazılardan “AI Companion” yazan yere tıklayın. Android cihazınıza indirmiş olduğunuz uygulamayı açıp QR kodu tarayın. Uygulama canlı olarak ekranınıza gelecektir.

b- “Connect” yazan kısma basın ve çıkan yazılardan “AI Companion” yazan yere tıklayın. Android cihazınıza indirmiş olduğunuz uygulamayı açıp ekranda gördüğünüz kodu yazın ve “connect with code” yazan butona basın. Uygulama canlı olarak ekranınıza gelecektir.

İkinci adımı uygulama geliştirirken ne yaptığımızı anlık olarak görmek ve hatalarımızı anlık olarak tespit etmek için kullanıyoruz. Birinci adımı ise uygulamayı kalıcı olarak cihazımızda tutmak istediğimizde kullanıyoruz.

   Bu yazımda appinventorun ne olduğunu ve ilk uygulamanızı nasıl yapabileceğinizi anlattım. Youtube platformunda beğendiğim appinventor eğitimlerinin bağlantılarını aşağıya bırakarak yazımı bitiriyorum. Sabırla okuduğunuz için teşekkür ederim.

Teknodate- Appinventor Dersleri

El Harezmi Bilgelik Evi- Appinventor Dersleri

Turkcell Geleceği Yazanlar- Appinventor 101 Eğitimi

 

(Visited 13 times, 1 visits today)

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir