Mobil Web Araçları

Web sitenize android uygulaması yapma (APK)

Yazıldı ogz

ANDROID WEB SİTESİ UYGULAMASI

Android uygulama yapmak sanıldığı kadar zor bi iş değil aslında. Hele hele web sitesi için android uygulama yapmak gerçekten çok kısa zamanınızı alacaktır. Bunu yapacağımız platform ise ücretsiz app inventor sitesi.

http://ai2.appinventor.mit.edu/  Adresine gmail kimliğimizle giriş yaparak kolayca Android program yapabileceğimiz bir platformdur. Program internet üzerinden online çalışmakta olup çalışmalarımıza istediğimiz bilgisayarda devam edebiliriz. Kısaca tanıtacak olursak:

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.

 

Gelelim en kolay web sitesi uygulaması appinventor ile nasıl yapılır kısmına.

Biz uygulamamızda WebViewer  , HorizontalScrollArrangement  aracı ile Buton ve Text Box araçlarını kullanacağız.

 Sisteme giriş yaptıktan sonra Project – New Project yolunu kullanarak yeni bir proje açtık ve ismini istediğinizisim olarak belirleyin.

Tasarım ekranında önce bir Tablo (HorizontalScrollArrangement) ekledik ki eklediğimiz bileşenleri düzen içinde yerletirebilelim. Üstte görünmesi için uygulama ismini yazabilmek amacıyla bir Textbox ekleyip uygulama ismini yazdık. Uygulamasını yapacağımız web sitesini otomatik olarak gösterecek olan webviewer aracını sol bölmeden bularak Mouse ile seçip sağ alana sürükledik.

WebViewer  aracının adres bölümüne (HomeUrl)  bölümüne sitenizin adresini ya da sitenizin istediğiniz sayfasının adresini  girin.Bu adres uygulamanız tarafından açılacak olan ana sayfadır. Adres girerken http veya https ile :// kısımları iel yazmanız gerekir.

Programı kapatmak için de bir Buton ekleyerek ikinci bir Textbox içine “Hazırlayan: ” kısmını ekleyin.

Tasarım bölümünü burada bitirip Appİnventor programının “Blocks” yani kod düzenleme bölümüne geçiyoruz. Webviewer için herhangi bir koda gerek yok ancak eklediğimiz “Kapat butonu” için bu işlevi gerçekleştirecek kodların eklenmesi gerekiyor. Bu platformda kodlar yazılmak yerine tıpkı lego yaparmış gibi kod içeren şekilleri ekranda birleştiriyoruz.

 

Burada buton tıklandığında programın kapatılması için Sol taraftan Buton seçip çıkan komutlardan “When button Click”  ve “close application”  şekillerini seçip iç içe birleştirin.

Son olarak üst menüde Build kısmında projemizi akıllı telefona yüklenebilir halde bilgisayarımıza indirebiliriz. Bu dosyayı telefonunuza gönderip kurabilir, Google uygulamalar’a yükleyebilir ya da sitenizden paylaşıp indirilmesini sağlayabilirsiniz.

En basit ve kolay haliyle web site uygulaması bu şekilde yaptık ama tabii ki aynısını yapmak zorunda değilsiniz. Appinventor ile yapabileceğiniz birçok şey var aslında. Tamamen sizin hayal gücünüze kalmış.

APPİNVENTOR    kolayca  Android program yapabileceğimiz ÜCRETSİZ  bir platformdur. Size de tavsiye ederiz.

Yazar Hakkında

ogz

Yorum Bırak