Mobil Programlama – Mobil Uygulama Geliştirme

4. Mobil Uygulama Geliştirme

Bu ders kapsamında uygulama geliştirme bölümünde listelenen farklı mimariler ayrı ayrı kullanılarak mobil uygulama geliştirme süreci tüm adımları içerecek şekilde anlatılmıştır. Her bir uygulama geliştirme mimarisinde, kullanılan geliştirme araçlarının kurulumundan itibaren uygulamanın mobil cihaz üzerinde çalıştırılma sürecine kadar uygulama yaşam döngüsü detaylandırılmıştır.

4.1. Web Tabanlı Mobil Uygulama Geliştirme

Mobil cihazlarda yaşanan teknolojik gelişmeler ve özellikle işlemci hızının artması, masaüstü bilgisayarlardaki İnternet kullanım deneyimine benzer bir deneyimin mobil cihazlarda da yaşanmasına olanak sağlamaktadır. Bu aşamada mobil cihazların özellikle ekran boyutları dikkate alınarak geliştirilen Web tabanlı uygulamalar bir mobil uygulama olarak çalışabilmekte ve mobil işletim sisteminden bağımsız olarak kullanılabilmektedir.

4.1.1. Web Tabanlı Mobil Uygulama Geliştirme Ortamı

Web tabanlı mobil uygulama geliştirme ortamı olarak herhangi bir metin editörü kullanılabilir. Metin editörü seçiminde dikkat edilmesi gereken en önemli nokta editörün Web tabanlı uygulama geliştirme açısından verdiği desteklerdir (kod renklendirme, kod tamamlama vb. gibi).

Bu ders kapsamında açık kaynak kodlu olan ve ücretsiz olarak sunulan Adobe firmasının Brackets isimli metin editörü kullanılacaktır. Bu editör http://brackets.io/ adresinden tüm popüler işletim sistemleri için indirilebilir ve kişisel bilgisayarlara kurulabilir. Kurulum gerçekleştikten sonra arayüz Türkçe olarak kullanılabilir.

Adobe Brackets metin editörü İnternet sitesi

Brackets Web sitesindeki ana sayfada yer alan “Download Brackets” (Brackets’ı İndir) isimli butona tıklandığında kurulum dosyasının indirilme işlemi başlatılmış olur. O an hangi işletim sistemi kullanarak indirme işlemini gerçekleştiriliyorsa o işletim sistemine uygun kurulum dosyası indirilmeye başlanacaktır (ör.: Windows işletim sistemi için “Brackets.Release.1.11.msi”). Desteklenen diğer işletim sistemleri için sunulan kurulum dosyalarını ise “Other Downloads” (Diğer İndirmeler) bağlantısına tıklanarak görüntülenebilir.

Diğer işletim sistemleri için kurulum dosyaları

İnternet tarayıcısı aracılığıyla indirilmiş olan kurulum dosyasına “İndirilenler” adlı klasörden erişebilirsiniz. Bu klasör işletim sisteminize ve İnternet tarayıcınıza göre farklı isimlerde ve sabit diskiniz üzerinde farklı konumlarda olabilir. Kurulum dosyasına çift tıklandığında kurulum otomatik olarak başlatılacaktır.

Kurulum

Kurulum yazılımındaki ayarlar standart olarak bırakılabilir. Sabit disk üzerinde farklı bir alana kurulumun gerçekleşmesi isteniyorsa bu bölümden yeni bir alan tanımlaması yapılabilir. “Next” (İlerle) butonuna tıklayarak bir sonraki aşamaya geçilir. Bir sonraki aşamada “Install” (Kur) butonuna tıklayarak kurum gerçekleştirilir.

Install” Kur

“Finish” (Tamamlandı) butonuna tıklayarak kurulum programından çıkılabilir. Brackets programı artık kullanılabilir durumdadır.

Kurulumun tamamlandığını belirten bilgi ekranı

Kurulum işlemi tamamlanan Brackets yazılımına bilgisayardaki diğer programların da yer aldığı liste içerisinden erişilebilir. Yazılımı başlatmak için bilgisayar içerisinde “Brackets” kelimesi aratılarak da yazılıma erişilebilir.

Brackets yazılımının aratılması ve arama sonucu

Liste içerisinden ya da arama sonuçlarından Brackets ikonuna tıklandığında yazılım çalışacaktır.

Brackets yazılımının arayüzü

Brackets, kurulu olduğu işletim sisteminin dil ayarlarını algılayarak otomatik olarak arayüzünü o dile göre yapılandırır. Arayüzün dil seçimi isteğe göre menüler yardımıyla da yapılabilir. Arayüzün dilini değiştirmek için “Ayıkla” menü grubundaki “Dili Değiştir” bölümü kullanılır.

Arayüzde dil değişikliği yapılması

Brackets, temel olarak iki ana bölümden oluşmaktadır. Bu bölümler solda yer alan klasör ve dosya görüntüleme alanı ve sağda yer alan kod yazma ve görüntüleme alanıdır. Mobil uygulama geliştirmeye başlamadan önce bilgisayardaki diğer dosya ve klasörlerle uygulama dosyalarının karışmasını engellemek için bu çalışmaya özel bir klasör oluşturmak ve o klasörün içinde çalışmak uygun olacaktır.

Bu ders kapsamında geliştirilecek uygulamaların depolanması için sabit diskte “Mobil Uygulama Geliştirme” adlı ana bir klasör ve bu klasörün içerisinde de uygulama geliştirme mimarilerine bağlı olarak alt klasörler oluşturulmuştur. Web tabanlı uygulamaların yer alacağı klasörün adı “Web”dir.

Brackets açıldıktan sonra yapılması gereken ilk şey çalışma alanı olarak oluşturulmuş klasörün seçilmesidir. Bu seçim işlemi “Dosya” menü grubu altındaki “Klasörü Aç” (Ctrl+Alt+O) ögesine tıklayarak gerçekleştirilir. Klasör seçimi bir kere gerçekleştirildikten sonra Brackets her açılışında aynı klasörün içeriğini gösterir. Brackets’ı her açışta yeniden bu işlemin gerçekleştirilmesine gerek kalmaz.

alışmaların yapılacağı klasörün brackets içerisinde tanımlanması

Klasör seçimi ile birlikte Web tabanlı mobil uygulama geliştirme ortamının hazırlık aşaması da tamamlanmış olur. Bu aşamadan sonra artık uygulama geliştirmeye başlanabilir.

4.1.2. Web Tabanlı Örnek Bir Mobil Uygulama Geliştirme

Web tabanlı mobil uygulama geliştirmeye en iyi başlangıç bu iş için özel olarak geliştirilmiş yazılım kütüphanelerinin kullanılması ile olabilir. HTML5, CSS3 ve JavaScript’in birlikte kullanımı ile oluşturulmuş birçok farklı yazılım kütüphanesi bulunmasına rağmen en fazla kullanılan, dokümantasyonu ve örnekleri en iyi hazırlanmış kütüphanelerden biri JQuery Mobile adlı yazılım kütüphanesidir. Jquery Mobile ile ilgili detaylı bilgi, dokümantasyon ve örneklere https://jquerymobile.com/ adresinden erişilebilir.

Örnek mobil uygulamamızda Jquery Mobile kütüphanelerini kullanarak basit bir sözlük uygulaması gerçekleştireceğiz. Bu sözlük uygulaması kelime listesi ve bu kelime listesi içerisinde bir arama bölümü içerecek şekilde tasarlanmış olacak. Şimdi adım adım bu uygulamayı geliştirelim.

Öncelikle kelime listesinin ve arama formunun yer alacağı ana sayfayı oluşturalım. Web tabanlı uygulamalarda aynen Web tasarımında olduğu gibi ana sayfanın adının “index.html” olarak belirlenmesi gerekmektedir. Bu şekilde bir klasör içerisinde duran uygulamayı yorumlayacak olan mobil İnternet tarayıcı hangi dosyayı başlangıç dosyası olarak kullanacağını belirleyebilecektir. Brackets içerisinde “index.html” isimli dosyayı “Dosya” menü grubu altındaki “Yeni” (Ctrl+N) ögesine tıklayarak oluşturabilirsiniz.

Yeni bir dosya oluşturulması

Yeni bir dosya oluşturduğunuzda bu dosya “Adsız” adıyla oluşturulur. Oluşturulan bu dosyayı “Dosya” menü grubu altındaki “Kaydet” (Ctrl+S) öğesine tıklayarak “index.html” adıyla içinde çalıştığınız klasörün altına kaydediniz.

Oluşturulan dosyanın kaydedilmesi

Bu örnek uygulamada çalışmalar “Mobil Uygulama Geliştirme” ana klasörü içerisindeki “Web” adlı alt klasöre kaydedilmektedir.

Dosya kaydedilirken klasör seçimi ve dosya isimlendirilmesi

Dosyanın oluşturulması ve isimlendirme yapılarak kayıt işleminin tamamlanmasının ardından kod yazımı ile ilgili bölüme geçiş yapılabilir. Öncelikle Brackets’ın sol bölümünde yer alan dosya bölümünde index.html adlı dosyanın seçili olduğunu kontrol edin. Brackets’ın üst bölümünde şu an düzenleme için açık olan dosyanın ismi yazmalıdır. Aynı zamanda yine sol üst bölümde “Çalışılan Dosyalar” adı altında index.html adlı dosyanın listelenmesi gerekmektedir.

index.html” adlı dosyanın düzenlemeye hazır hale getirilmesi

Şimdi “index.html” içerisinde ihtiyacımız olan kodları yazmaya başlayalım. Aşağıdaki kod bloğu standart olarak HTML kodlamada kullanılan kod bloğudur.

Standart HTML kod bloğu

Bu kod bloğunda 1. satırda dokümanın tipi tanımlanmaktadır. 2. satırdan 10. satıra kadar yer alan bölüm HTML olarak tanımlanmıştır. HTML içerisindeki tanımlamalar etiket adı verilen yapıların açılıp kapatılması ile gerçekleştirilir. Örnek uygulamamızın 2. satırında <html> ifadesi ile HTML etiketi açılmakta ve 10. satırda </html> ifadesi ile HTML etiketi kapatılmaktadır. Aynı etiketin açılıp kapatılması arasında kalan tüm kodlar o etiketin genel özellikleri ile tanımlanmış olur. Yine örnek uygulamamızdan yola çıkarak HTML dokümanının üst bölümü olarak tanımlanmak istenen alanda HEAD etiketi açılıp kapatılmıştır. <head> ile </head> arasında kalan tüm kodlar HEAD (başlık) etiketinin özelliğine sahip olacak şekilde tanımlanmıştır.

Bir HTML dokümanında iki ana bölüm bulunmaktadır. Bu bölümler başlık (head) bölümü ve Gövde (body) bölümüdür. Başlık bölümünde İnternet tarayıcısına özel bir takım tanımlamalar yer alır. Bu tanımlamalar, sayfanın başlığı, metin kodlaması, kullanılacak biçimlendirme dosyalarının (CSS) ve JavaScript kütüphanelerinin adresleri ve birtakım üst veri alanlarıdır.

Örnek uygulamamızda başlık (<head>) etiketi içerisinde aşağıdaki tanımlamaların yapılması gerekmektedir. Bu tanımlamalar JQuery Mobile biçimlendirme dosyalarının ve kod kütüphanelerinin adreslerini içermektedir.

Başlık bölümü tanımlamaları

Başlık bölümü içerisindeki kod satırlarını detaylandırmamız gerekirse

• 4. satır uygulamanın başlığını tanımlamaktadır ve mobil İnternet tarayıcının üst bölümünde uygulamanın adının yer almasını sağlayacaktır.

• 5. satır uluslararası dil kodlaması olarak belirlenmiş olan UTF-8’in sayfanın dil kodu olarak belirlenmesini sağlar. Bu satır özellikle Latin alfabesi dışındaki harflerin kullanımı açısından önemlidir.

• 6. satır mobil İnternet tarayıcısına hazırlanan sayfanın boyutları ile ilgili bir düzenleme yapmasını söyler. Bu şekilde boyutlandırma açısından ideal bir oran yakalanmaya çalışılır.

• 7. satır JQuery Mobile biçimlendirme dosyasının adresini içerir. Bu sayede belirli bir temaya göre yazı biçimleri (fontlar), boyutları, renkler, form ve diğer HTML bileşenlerinin biçimsel özellikleri belirlenmiş olur.

• 8. satır JQuery’nin ana kütüphanesinin adresini içermektedir. Burada bu çalışma çerçevesi (framework) için kullanılan JavaScript kütüphanesi bulunmaktadır.

• 9. satır JQuery’nin mobil cihazlar için geliştirdiği JavaScript kütüphanesinin adresini içerir.

Başlık bölümü tamamlandığına ve gerekli tanımlar yapıldığına göre artık uygulamanın kullanıcılar tarafından görüntülenecek kısmı olan “gövde” (body) üzerinde çalışmalara başlanabilir. Uygulamamızın gövde kısmında bir arama formu ve bir kelime listesi için gerekli kodlar yer alacaktır. Bu kodlar şekilde gösterilmektedir.

Uygulamanın gövde bölümünde yer alan kodlar

Gövde bölümü içerisindeki kod satırlarını detaylandırmamız gerekirse

• 13 ve 15. satırlar arasında yer alan kodlar bir HTML formunu tanımlamaktadır. Bu form JQuery Mobile JavaScript kütüphanesi içerisindeki “filter-for-listview” adlı fonksiyonu da içinde barındıracak şekilde yapılandırılmıştır. Bu fonksiyon listeyi süzmemize imkan sağlayacak ve bu sayede basit bir arama işlemi gerçekleştirilebilecektir. Arama kutucuğu içerisinde yer alan varsayılan mesajı da yine bu bölümdeki “placeholder” değişkenine atanan değer ile değiştirmek mümkündür.

• 16 ve 22. satırlar arasında yer alan kodlar, kelimelerin listelenmesini sağlamaktadır. Listelenen kelimelere bir Web sayfası ya da Web sitesi adresi atamak da mümkündür. Böylece tıklanan kelime ile ilgili bir detay sayfasına ya da bir başka siteye yönlendirme yapılabilir.

Uygulamamızın temel özelliklerini tamamladığımıza göre ilk test işlemini gerçekleştirebiliriz. Bu aşamada uygulama içerisinde kullanılan CSS ve JavaScript kütüphanelerini İnternet üzerinden kullandığımız için test işlemini gerçekleştireceğimiz cihazımızda İnternet bağlantısının olması gerekmektedir. Uygulamanın İnternet bağlantısına ihtiyaç duymasını istemiyorsak CSS ve JavaScript kütüphanelerini JQuery Mobile’ın İnternet sitesinden (http://jquerymobile.com/download/) bilgisayarımıza indirip proje klasörü içerisine kaydetmeliyiz. Daha sonra kaydettiğimiz bu dosyalara HTML sayfası içerisinden bağlantı sağlamalıyız.

Test işlemi için öncelikle kendi kişisel bilgisayarımızda yer alan herhangi bir İnternet tarayıcısını kullanabiliriz. Daha sonra uygulamamızı istersek dosyaları İnternet üzerine yüklediğimiz bir lokasyondan istersek de uygulama dosyalarını direkt mobil cihazın içerisine yükleyerek test edebiliriz.

4.1.3. Mobil Uygulamanın Kişisel Bilgisayar Üzerinde Yer Alan İnternet Tarayıcı ile Test Edilmesi

Test işlemini kişisel bilgisayar üzerinde gerçekleştirmek için takip edebileceğimiz iki yol bulunmaktadır. Bunlardan birincisi eğer bilgisayarımızda Google Chrome tarayıcı yüklü ise Brackets içerisindeki canlı önizleme (Live Preview) özelliğini kullanmak, diğeri ise direkt olarak bilgisayarımızın “Dosya Gezgini” yardımı ile uygulamamızın başlangıç dosyası olan “index.html” dosyasına çift tıklamak. Bu iki yol da İnternet tarayıcıda uygulamamızın açılmasını ve test edebilmemizi sağlayacaktır.
“Dosya Gezgini” ile proje klasörüne girip “index.html” dosyasına çift tıkladığımızda açılan uygulamamızın görüntüsü aşağıdaki gibi olmalıdır.

Mobil uygulamanın İnternet tarayıcısındaki görünümü

Bilgisayarınızda varsayılan İnternet tarayıcınızın hangisi olduğuna bağlı olarak uygulamanız ilgili tarayıcıda görüntülenir.

Farklı İnternet tarayıcılarda uygulamanızı test etmek için “Dosya Gezgini”inde “index.html” dosyasının üzerine sağ klik yaparak “Birlikte aç” bölümünden farklı bir İnternet tarayıcı seçebilirsiniz.

Şimdi uygulamamızın arama bölümünü test edelim. Örneğin arama kutucuğuna “a” harfi yazdığımızda içinde “a” harfi bulunan kelimeler haricindeki kelimeler listeden çıkartılacaktır.

Arama kutucuğuna harf girişi ile süzme işleminin gerçekleştirilmesi

Uygulama ekranında görüldüğü gibi “a” harfi girildikten sonra kelime listesinde yer alan “Üzüm” ve “Muz” içlerinde “a” harfini barındırmadığı için listeden çıkartıldı. Şimdi “a” harfine bir de “r” harfi ekleyerek devam edelim. Bu durumda listede sadece “Armut”un kaldığını göreceksiniz.

kinci harfin eklenmesi ile listenin yeniden oluşması

Örnek uygulamamızı 5 kelimeden oluşacak şekilde hazırlamıştık. Uygulamaya yeni kelimeler eklemek için aşağıdaki şekilde işaretli satırı (ör.: 18. satır) çoğaltarak yeni kelimelere göre düzenlememiz yeterli olacaktır.

Uygulamaya yeni kelimelerin eklenmesiYeni kelime olarak “Erik”in listeye eklenmesi

Artık uygulamamızda 6 sözcük yer almakta. İstenilen sayıda sözcüğü bu şekilde eklenip çıkartılması bu sayede mümkün olmaktadır.

Uygulamamızdaki bir diğer özellik ise seçilen kelime ile ilgili detaylı bilgi verilebilecek bir sayfaya ya da bir harici Web sitesine bağlantı sağlanabilmesidir. Bu bağlantıyı sağlayabilmek için kod bölümünde ilgili kelimenin bulunduğu satırda bir düzenleme yapmamız gerekmektedir. Bu düzenleme HTML içerisinde bağlantı vermek için kullanılan “<a>” etiketinin içindeki “href” tanımlamasında yapılmalıdır.

Örnek uygulamamızda ilk önce “Armut” kelimesi üzerinde bir düzenleme yapalım. Kullanıcı “Armut” kelimesini tıkladığı zaman Türk Dil Kurumunun (TDK) Güncel Türkçe Sözlüğü’ndeki armut kelimesinin arama sonucuna yönlendirilmiş olsun. Bu arama sonucunu elde edebilmek için http://www. tdk.gov.tr/ adresi ziyaret edilmeli ve buradaki sözlükte “Armut“ kelimesi aratılmalıdır.

Arama sonucunda gelen sayfanın adresi İnternet tarayıcısından kopyalanarak mobil uygulamamızın kod bölümünde ilgili yere yapıştırılır.

Yönlendirme yapılacak harici Web sitesinin adresinin kod içine yerleştirilmesi

Yönlendirme yapılacak adres kod bölümüne eklendikten sonra uygulama test edildiğinde armut üzerine tıklandığında TDK’nin ilgili sayfasına ulaşıldığı görülür.

Yönlendirme yapılan sayfanın İnternet tarayıcısında görüntülenmesi

4.1.4. Mobil Uygulamanın Mobil Cihaz Üzerinde Yer Alan İnternet Tarayıcı ile Test Edilmesi

Önceki bölümde bilgisayarımızın içindeki İnternet tarayıcı ile yapmış olduğumuz testi şimdi mobil cihazımızın içinde yer alan İnternet tarayıcı ile yapalım. Bunu gerçekleştirirken iki farklı yol izleyebiliriz. Bu yollardan ilki mobil uygulamamızı oluşturan dosyaları İnternet üzerindeki bir lokasyona aktarmak ve mobil İnternet tarayıcı ile bu lokasyonu ziyaret ederek mobil uygulamayı görüntülemek. İkinci yol ise uygulamayı oluşturan dosyaları mobil cihazımızın depolama alanına kopyalamak ve buradan mobil İnternet tarayıcı yardımı ile uygulamayı görüntülemek.

Yukarıda belirtilen ilk yol için bir İnternet sitesine, bu İnternet sitesine erişim haklarına ve dosyaları aktarabileceğimiz bir yazılıma (FTP yazılımı) ihtiyacımız var. Bunların temin edilmesinde sorunlar olabileceğinden yola çıkarak uygulamamızı mobil cihaz üzerinde ikinci yolu kullanarak test edeceğiz.

Öncelikle mobil cihazımızın şarj kablosunu cihazımızın şarj çıkışına ve kişisel bilgisayarımızın USB girişine bağlayarak fiziksel bağlantısını kuruyoruz. Bu aşamada mobil cihazın açık konumda olması gerekiyor, aksi halde bilgisayarın mobil cihazı algılaması mümkün olmaz.

Fiziksel bağlantı kurulduktan sonra kimi mobil cihazlar bağlantının sağlanabilmesi için bir onay ekranı görüntüler, bu ekrandan onay verilmesi ile birlikte bağlantı tam olarak sağlanır. Bazı durumlarda ise mobil cihazın ekran kilidinin açılması gerekmektedir.

Gerekli izinler verildikten sonra bilgisayarınızın Dosya Gezgini uygulaması aracılığıyla mobil cihazınızı görüntüleyebiliyor olmanız gerekir.

Dosya Gezgini aracılığıyla mobil cihazın görüntülenmesi

Dosya Gezgini içerisinde mobil cihazınızın varsayılan olarak görüntüleneceği yer “Bu bilgisayar” adlı bilgisayarınızın sabit disklerinin de görüntülendiği bölümdür. Mobil cihazınız marka ve model adı ile “Cihazlar ve sürücüler” altında görüntüleniyor olmalıdır.

Mobil cihazın marka ve model adı ile görüntülenmesi

Bu aşamada mobil cihazınızı temsil eden ikona çift tıklayarak mobil cihazınızın depolama alanları görüntülenir. Mobil cihazınızda tek bir depolama alanı olabileceği gibi birden çok dahili depolama alanı ve / veya dışarıdan eklenebilen (ör.: SD kart vb. gibi) depolama alanları olabilir.

Mobil cihazın depolama alanları.

SD kart cihazımızın özelliklerine göre farklı dosyalar ve klasörler içerebilir. Bu dosya ve klasörler arasında mobil uygulamamızı rahatça bulabilmek için tüm çalışmalarımızı kaydettiğimiz ana klasör olan “Mobil Uygulama Geliştirme” adlı klasörü bilgisayarımızın sabit diskinde yer alan lokasyonundan kopyalayarak SD kart içerisine yapıştırmamız yeterli olacaktır. Kopyalama ve yapıştırma işlemi tamamlandığında mobil cihazımızın SD kart bölümünün görünümü aşağıdaki gibi olmalıdır.

Geliştirdiğimiz uygulamanın klasör ve dosyaları dâhilî depolama alanına da yerleştirilebilir, burada dâhilî depolama alanı ve SD kart depolama alanı arasında bir fark bulunmamaktadır.

Mobil Uygulama Geliştirme” klasörünün SD karta kopyalanması

Mobil uygulamamızı oluşturan dosya ve klasörlerin mobil cihaza aktarılma işlemi tamamlandı. Artık testi gerçekleştirmek için mobil cihazımızın uygulamaları içinde yer alan dosya yöneticisi ya da benzeri bir program yardımıyla uygulama dosyalarına ulaşabiliriz.

Mobil cihazın uygulamalar bölümü

Dosya yöneticisi uygulamasına giriş yaptıktan sonra Micro SD kartın olduğu bölüme giriş yapıyoruz.

Dosya Yöneticisi uygulaması ve mobil cihazın depolama alanları

Micro SD kart içerisine giriş yaptıktan sonra sırasıyla “Mobil Uygulama Geliştirme” ve “Web” klasörlerinin içine girerek uygulamamızın yer aldığı klasöre kadar ilerlemiş oluyoruz.

Mobil uygulamanın yer aldığı klasöre erişim

“index.html” adlı dosyayı gördüğümüzde artık bu dosyanın üzerine dokunarak uygulamamızın testini gerçekleştirebiliriz. Mobil cihazınızda HTML uzantılı dosyaları görüntüleyebilecek birden fazla uygulama yer alabilir. Bu durumda istediğiniz herhangi bir İnternet tarayıcıyı test için seçebilirsiniz (ör.: Standart Android İnternet tarayıcı, Chrome, Opera Mobil). Bu çalışmamızda mobil cihazımızda yer alan Standart Android İnternet tarayıcısını (ilk sıradaki “Tarayıcı”) seçiyoruz.

Test için tarayıcının seçilmesi

Görüntüleyiciyi seçtiğinizde otomatik olarak ilgili uygulama açılacak ve mobil uygulamanın yer aldığı HTML dosyası ekranda kullanılabilir şekilde yer alacaktır.

Mobil tarayıcıda uygulamanın görüntülenmesi

Bu aşamada artık mobil cihazımızda uygulamamız kullanıma hazır hâle gelmiş oldu. Daha önce kişisel bilgisayarımızda test sırasında gerçekleştirdiğimiz işlemleri şimdi mobil cihazımız üzerinde deneyebiliriz.

Arama kutucuğuna birkaç harf girdiğimizde listenin filtrelendiğini ve güncellendiğini görüntüleyebiliyor olmanız gerekir.

Arama kutucuğuna harf girilerek test işleminin gerçekleştirilmesi

4.1.5. Mobil Uygulamada Test Aşamasında Yaşanabilecek Sorunlar ve Sorunların Çözümleri

Web tabanlı bir mobil uygulama geliştirme sırasında yaşanabilecek sorunlardan biri uygulamanızda kullandığınız yazılım kütüphanelerine (örnek uygulamamızda kullanılan JQuery, JQuery Mobile vb. gibi) uygulama içerisinden erişilememesidir. Bu durumun temel sebepleri İnternet bağlantısı ile ilgili sorunlar ya da kütüphane adreslerinin yanlış yazılması olabilir. Her iki durumda da, gerekli olan Javascript ve CSS dosyalarına ulaşılamadığı için uygulama tarayıcıda görüntülenecek ancak hem biçimsel olarak hem de fonksiyon açısından istediğimiz sonucu vermeyecektir.

Gerekli kütüphanelere erişemeyen uygulamanın İnternet tarayıcıdaki görüntüsü

Şekilde görüldüğü gibi daha önceki testimize göre biçimsel olarak bozulmuş bir arayüz ile karşı karşıyayız; aynı zamanda arama yapmak istediğimizde filtreleme işlemi de gerçekleşmeyecektir. Bu aşamada çözüm için öncelikle İnternet bağlantımızın olup olmadığını kontrol etmemiz, daha sonra ise harici olarak bağlantı kurduğumuz yazılım kütüphanelerinin adreslerini kontrol etmemiz gerekir. İnternet bağlantımızın olduğunu varsayarak harici dosyaların adreslerini nasıl kontrol edebileceğimize bakalım.

Kontrol işlemi için sorun yaşadığımız HTML sayfanının boş bir bölümünde sağ klik yaparak “Sayfa kaynağını görüntüle” menü ögesine tıklayalım.

HTML sayfasının kaynağının görüntülenmesi için gerekli komutun verilmesi

İnternet tarayıcımızda açılan yeni bir sekmede HTML sayfasının kaynak kodu görüntülenecektir. Bu kaynak kod bizim Brackets içerisinde yazdığımız kodun aynısıdır ancak içerisindeki bağlantılar tıklanabilir durumdadır ve bu sayede haricî bağlantılı olan dosyalara erişilebiliyor mu, bunu test etmemiz mümkün hâle gelir.

HTML kaynak kodun İnternet tarayıcıda görüntülenmesi

Kaynak kod içerisinde yer alan 7, 8 ve 9. satırlar, haricî kütüphanelerin erişim adreslerini içermektedir. Şimdi bu adreslerin üzerine tıklayarak “css” ve “js” uzantılı dosyalara erişebiliyor muyuz kontrol edelim.

Dosyanın bulunamadığına dair İnternet tarayıcıda yer alan hata mesajı

Şekilde görüntülendiği gibi dosya bulunamadı hata mesajı ile karşılaşıldı. Bunun sebebi haricî dosyaların bağlantı adreslerinin yanlış olmasıdır (İnternet bağlantınızın olduğu varsayılmaktadır.). Örnek kodda bağlantı adreslerinin başında bulunan “http://” ön eki silinmiştir. Bu da dosyaya erişimi engellemektedir. Haricî dosyalarının bağlantı adreslerini Brackets’dan güncelleyelim ve tekrar erişim sağlanabilecek bir yapıya kavuşturalım. Adresler güncellendiğinde sayfa kaynağındaki bağlantılara tıkladığınızda ilgili dosyayı İnternet tarayıcınızda görüntüleyebiliyor olmanız gerekir.

Bağlantısına tıklanan CSS dosyasının İnternet tarayıcıda görüntülenmesi

4.1.6. Mobil Uygulamada Kullanılan Haricî Kütüphanelerin İnternet Bağımlılıklarının Sona Erdirilmesi

Web tabanlı olarak geliştirilen uygulamalarda haricî kütüphanelerin kullanımında genelde izlenen yol kütüphanelerin İnternet üzerindeki orijinal kaynaklarından kullanılmasıdır. Bunu sebebi kütüphanelerde yapılan güncelleştirme ve iyileştirmelerden hızlı şekilde faydalanmaktır. Ancak bu durum beraberinde İnternet’e bağlı olma zorunluluğunu da getirir. Bu Web siteleri için çok önemli bir sorun teşkil etmez, zaten bu sitelerin ziyaret edilebilmesi için kullanıcının cihazında İnternet bağlantısı olması gerekir. Bir mobil uygulamada ise bu soruna neden olabilir. İnternet bağlantısı olmayan bir mobil cihaz, uygulamayı düzgün şekilde görüntüleyemeyecektir ve birçok fonksiyon çalışmayacaktır. Bu açıdan kullanılan kütüphanelerin dosyaları İnternet ortamında indirilerek uygulama klasörünün içinde yer verilmesi tercih edilebilir.

Yukarıda bahsedilen süreç ile ilgili birkaç farklı yol izlenebilir. Bu yollardan birincisi kullanılan kütüphanelerin İnternet sitelerinden ilgili paketlerin indirilmesidir. Örnek olarak uygulamada JQuery Mobile ile ilgili kütüphaneler kullanılacaksa http://jquerymobile.com/download/ adresinden son yayınlanan paketin indirilmesi gerekir.

Diğer yol ise geliştirdiğiniz mobil uygulamanın çalışan hâlindeki kütüphane bağlantılarını takip ederek bu dosyaları teker teker kişisel bilgisayarınızdaki çalışma klasörünüze indirmektir. Bu yöntem çalışan sistemin içindeki dosyaların indirilmesi açısından daha pratik ve sonuca daha hızlı ulaşabileceğiniz bir yöntemdir.

Yukarıda anlatılan her iki yöntemde de kütüphane dosyalarını kişisel bilgisayarınıza indirip proje klasörünün içine yerleştirdikten sonra HTML kodu içerisinde kütüphanelere bağlantı sağladığınız adresleri yerel sürümleri ile güncellemeniz gerekir. Şekilde proje klasörünüze kaydettiğiniz dosyalara bağlı olarak kodda nasıl bir güncelleme yapmanız gerektiği görüntülenmektedir.

Kütüphane dosyalarının yeni lokasyonuna göre adreslerin güncellenmesiKütüphane dosyalarının yeni lokasyonuna göre adreslerin güncellenmesi1

4.2. Web Tabanlı Mobil Uygulamanın Yerel (Native) Bir Uygulama Olarak Paketlenmesi

Mobil uygulamaların Web tabanlı olarak geliştirilmesi her ne kadar süreci hızlandırsa da birtakım sınırlılıkları da beraberinde getirmektedir. Hem Web tabanlı geliştirme ortamının avantajlarından yararlanmak, hem de beraberinde getirdiği sınırlılıkları en aza indirmek için geliştirilen uygulamanın sanki Yerel (Native) bir uygulamaymış gibi paketlenip mobil cihazlara yüklenebilmesi mümkündür. Bu şekilde paketleme işlemini yapan birçok platform bulunmaktadır. Bu platformların en gelişmiş olanlarından biri Adobe PhoneGap’tir. PhoneGap’in geliştiricisi Nitobi firmasının Adobe tarafından satın alınmasıyla PhoneGap iki farklı platform üzerinde geliştirilmeye devam etmektedir. Bu platformlardan biri Adobe’nin geliştirme çalışmalarına devam ettiği “Adobe PhoneGap”tir.

Adobe PhoneGap

Diğer platform ise PhoneGap’in kaynak kodlarının Apache Yazılım Vakfı’na (Apache Software Foundation) devredilmesiyle ortaya çıkan ve vakıf tarafından desteklenen Cordova Projesi’dir.

Apache Cordova Projesi

Apache Cordova, açık kaynak kodlu bir proje olması açısından, Adobe PhoneGap ise desteklediği yazılım kütüphanelerinin zenginliği açısından avantajlar sunmaktadır. Buna ek olarak Adobe PhoneGap paketleme işlemini kişisel bilgisayarınıza herhangi bir özel yazılım yüklemenize gerek kalmadan bulut üzerinde gerçekleştirebilmektedir. Yine Web tabanlı bir emülatörü de bulunan Adobe PhoneGap bu hizmetleri ücretsiz olarak vermektedir. Bu çalışmamızda geliştirdiğimiz Web tabanlı mobil uygulamayı Adobe PhoneGap platformu yardımıyla paketleyerek mobil cihazımıza yükleyeceğiz.

4.2.1. Mobil Uygulamanın Paketlenmesi İçin Kullanılacak Bulut Platformları

Yukarıda da belirtildiği gibi Adobe PhoneGap yardımıyla tüm süreç bulut üzerinde bir İnternet tarayıcısı yardımıyla gerçekleştirilebilmektedir. Bu süreci yönetebilmek için iki farklı bulut platformunda kullanıcı hesabına ihtiyacımız bulunmaktadır. Bu bulut platformlarından ilki dosyalarımızın yükleneceği ve depolanacağı GitHub kod deposudur.

GitHub kod deposuAdobe PhoneGap Built

Her iki bulut platformu için de kullanıcı üyeliği ücretsizdir. Geçerli bir e-posta adresinizin olması durumunda kullanıcı hesabınızı kolaylıkla oluşturabilirsiniz.

İlk olarak GitHub platformu üzerinde kullanıcı hesabımızı oluşturalım ve giriş yaparak mobil uygulamamızın dosyalarını kod deposuna yükleyelim. İnternet tarayıcımızdan github.com adresine giriş yaptığımızda yeni bir hesap oluşturmak için sayfanın sağ tarafında yer alan formu doldurarak “Sign up for Github” düğmesine tıklayalım.

Yeni bir kullanıcı hesabı oluşturmak için kullanılacak iletişim formu

Kayıt işlemi sırasında istenen bilgiler arasında Kullanıcı Adı (Username), E-Posta (Email) ve Şifre (Password) yer almakta. Bu bilgileri dikkatli bir şekilde doldurmakta fayda var çünkü daha sonra sisteme giriş yaparken bu bilgilere ihtiyacınız olacak.

Şimdi ise Adobe Built için gerekli olan kullanıcı hesabını oluşturalım. https://build.phonegap.com/ adresine giriş yaptığımızda sağ üst köşede “Sign in” (Giriş yap) ve “Sign up” (Kayıt yaptır) seçenekleri bulunmakta. Bu seçeneklerden “Sign up” (Kayıt yaptır) seçeneğini tıklayalım.

Adobe Built Web sitesinde “Sign up” Kayıt yaptır menü öğesinin seçilmesi

“Sign up” (Kayıt yaptır) menü öğesine tıklandığında platformu kullanım için sunulan farklı seçeneklerin yer aldığı bir sayfaya ulaşılır. Bu sayfada ücretsiz olan planı “Completely free” düğmesine basarak seçelim.

cretsiz olan kullanım planının seçilmesi

Kullanım planı seçimi sonrasında sisteme giriş için kullanıcı adı ve şifresinin olduğu bölüm ekrana gelecektir. Bu ekranda eğer daha önceden bir Adobe Hesabı varsa bu hesap ile giriş yapılabilir, Facebook ve / veya Google hesapları ile giriş yapılabilir ya da yeni bir Adobe Hesabı oluşturmak için “Get an Adobe ID” (Bir Adobe Kimliği al) bağlantısına tıklanır.

Adobe Built platformu için kullanıcı hesabının seçilmesi ya da oluşturulması

Yeni bir Adobe Hesabı oluştumak için “Get an Adobe ID” (Bir Adobe Kimliği al) bağlantısına tıklandığı zaman kullanıcı hesabının oluşturulacağı iletişim formu görüntülenir. Bu iletişim formundaki bilgileri dikkatli bir şekilde doldurduktan sonra “Sign up” (Kayıt ol) düğmesine tıklayarak kayıt işlemi tamamlanır.

Adobe ID Adobe Kimliği için iletişim formu

Bu ve benzeri kayıt işlemlerinde bulut platformları çoğunlukla kayıt olurken verilen e-posta adresine bir doğrulama postası gönderir ve bu e-posta mesajının içerisindeki bağlantıya tıklayarak kullanıcı hesabının aktif hâle getirilmesini isterler. Bu açıdan kayıt sırasında e-posta adresi forma yazılırken doğruluğunu kontrol etmek çok önemlidir.

4.2.2. Mobil Uygulamanın GitHub Kod Deposuna Yüklenmesi

Geliştirilen uygulamanın GitHub kod deposuna yüklenebilmesi için daha önce oluşturulan kullanıcı hesabı bilgileri (kullanıcı adı ya da e-posta ve şifre) ile platforma giriş işlemi gerçekleştirilir. Giriş panelinin görüntülenebilmesi için https://github.com/ ana sayfasının sağ üst köşesinde yer alan “Sign in” (Giriş yap) düğmesine tıklanır.

Giriş işlemi gerçekleştirildiğinde öncelikli olarak kod deposu içerisinde yeni bir depo oluşturulması gerekmektedir. Yeni bir deponun oluşturulması için sayfanın sağ üst köşesindeki “+” işaretine tıklayarak “New repository” (Yeni depo) menü öğesi seçilmeli ya da doğrudan sayfanın sağ bölümünde yer alan “New repository” (Yeni depo) düğmesine tıklanmalıdır.

New repository” Yeni depo oluşturulması

GitHub içerisinde birden çok kod deposu oluşturulabilir, her bir depo bir projeyi / uygulamayı temsil edecektir. Aynı uygulamanın birden fazla sürümü de bir kod deposu içinde yer alabilir.

Yeni bir depo oluşturmak için şekilde görüntülenen form aracılığıyla projenin yer alacağı depo ile ilgili temel bilgiler girilir. Bu bilgiler arasında en önemlisi deponun adının yer aldığı “Repository name” alanıdır. Bir depo adı bir kullanıcı hesabı içerisinde ancak bir kere kullanılabilir. Depo adını oluştururken boşluk, Türkçe karakter ve noktalama işaretlerini kullanmamak gerekir (noktalama işaretlerinden bazıları kullanılabilir, ör.: nokta).

Depo adının bir başka önemi ise bu adın mobil cihazlar için oluşturulan uygulama marketlerinde paket adı olarak kullanılabilecek olmasıdır. Bu açıdan bir mobil uygulama resmî olarak uygulama marketlerde yer alacaksa, bu marketlerin belirlemiş olduğu paket adı özelliklerine uygun olarak paket adının (dolayısıyla depo adının) belirlenmesi gerekir. Bu genelde uygulamayı geliştiren organizasyonun Web sitesi olarak kullandığı alan adının tersten kullanımı şeklinde bir algoritma içerir ve bu şekilde dünya üzerinde benzersiz bir paket adı oluşturulabilir.

Yeni depo oluşturulması için kullanılacak form

Kod deposu oluşturulurken depo hakkında genel bir bilgi verilmesi amacıyla “README” (BENİOKU) adlı bir dosyanın da oluşturulmasında fayda vardır. Şekil 47’de yer alan formdaki “Initilize this repository with a README” seçeneği işaretlenerek bu dosyanın otomatik olarak oluşturulması sağlanabilir. Bu şekilde kod deposuna Web üzerinden direkt dosya yüklenmesini sağlayacak başlangıç işlemleri de tamamlanmış olur.
“Create repository” (depoyu oluştur) düğmesine tıklandığında yeni deponun oluşturulması için gerekli komut verilmiş olur ve eğer form içeriği ile ilgili bir sorun yoksa şekildeki yeni kod deposunun içeriğini gösteren ekran görüntülenir.

Oluşturulan yeni deponun görüntülenmesi

Yeni deponun içinde şu an için sadece uygulama ile ilgili genel bilgilerin yer aldığı README.md dosyası bulunmaktadır. Uygulamayı oluşturan tüm dosyaların bu kod deposuna yüklenmesi gerekmektedir. Bu yükleme işlemi dosya listesinin yer aldığı bölümün hemen sağ üst köşesinde yer alan “Upload files” (Dosyaları yükle) düğmesi ile yapılır. Düğmeye tıklandığında aşağıdaki ekran görüntülenir.

Dosyaların yükleneceği arayüz

Bu ekran yardımıyla iki farklı şekilde dosya yükleme işlemi gerçekleştirilebilir, dosyaları seçtikten sonra sürükleyip gri bölüme bırakarak ya da bilgisayardan dosyaları seçerek. Orta bölümde yer alan “choose your files” (dosyalarınızı seçiniz) bağlantısına tıkladığınızda dosyaları seçebileceğiniz iletişim kutusu görüntülenecektir.

Dosyaların seçileceği iletişim kutusu

Tüm dosyalar işaretlendikten sonra “Aç” düğmesine tıklanır ve yükleme işlemi öncesi dosya seçimi tamamlanmış olur. Kod deposuna dosyaların teslim edilmesi için bir mesaj eşliğinde sürecin onaylanması istenir.

Değişikliklerin kod deposuna teslim edilmesi

Şekilde yer alan forma yükleme işlemi ile ilgili kısa bir bilgi girdikten sonra “Commit changes” (değişiklikleri teslim et) düğmesine tıklandığında kod deposuna uygulama dosyalarının gönderilme işlemi başlatılır. İnternet bağlantısının hızına bağlı olarak dosyaların gönderilme işlemi bir süre devam eder.

Dosyaların gönderilme süresi

Dosyalar kod deposuna teslim edildiğinde tüm uygulama bileşenleri Şekil 53’teki gibi görüntülenir. Kodlarda yapılacak herhangi bir değişiklik sonrası sadece değişiklik yapılan dosyanın yeniden kod deposuna gönderilmesi yeterlidir.

Kod deposunun dosyalar teslim edildikten sonraki görünümü

Bu ders kapsamında geliştirilen “MobilUygulama01” adlı örnek uygulamaya GitHub üzerinden aşağıdaki adres yardımıyla ulaşabilirsiniz. Dosyaları ve içeriklerini görüntüleyebilir, kendi kişisel bilgisayarınıza indirebilirsiniz:
https://github.com/orcunmadran/MobilUygulama01

4.2.3. Paketleme İşleminin Gerçekleştirilmesi İçin PhoneGap Build Platformunun Kullanılması

GitHub kod deposuna uygulama dosyalarının yüklenmesi ile paketleme işleminde kullanılacak dosyalar için yapılan ön hazırlık tamamlanmış olur. Bu aşamada paketleme işleminin gerçekleştirileceği PhoneGap Build (https://build.phonegap.com/) platformuna ücretsiz oluşturulan Adobe ID (Adobe Kimliği) ile giriş yapılır.

Adobe ID ile PhoneGap Built platformuna giriş yapılması

Giriş yapıldıktan sonra sağ üst köşede bulunan platform ile ilgili hesap ayarlarının düzenlendiği bölümden “Edit account” (Hesabı düzenle) öğesi seçilerek GitHub ile bağlantının kurulacağı sayfa görüntülenir.

GitHub ile bağlantının kurulacağı sayfanın görüntülenmesi

Şekilde görüntülenen sayfadan bağlantı kurulmak istenen platform seçilir. Mobil uygulamamız ile ilgili dosyalar GitHub kod deposunda olduğu için Github platformunun üzerine tıklayarak sonraki aşamaya geçilir.

Bağlantı kurulacak platformun seçilmesi

Seçim işleminden sonra PhoneGap Build ve Github platformları arasında bağlantı kurulmasına ilişkin iletişim sayfası görüntülenir ve bu sayfada işleme onay verilmesi istenir.

Bağlantının kurulabilmesi için onay verilmesi

Onay işlemi verildikten sonra PhoneGap Build platformuna otomatik olarak geri dönüldüğünde “Your GitHub account has been linked successfully.” (GitHub hesabınız ile başarılı bir şekilde bağlantı kuruldu.) mesajı görüntülenir. PhoneGap Build ana sayfasına dönüş yapıldığında “Your apps” (Uygulamalarınız) altındaki “open-source” (açık-kaynak) sekmesine tıklanır ve “find existing repo / paste .git repo” (varolan depoyu bul) açılır kutusundan GitHub’daki ilgili kod deposu seçilir.

GitHub kod deposunun seçilmesi

Kod deposunun seçilmesinin ardından “Pull from .git repository” (git deposundan çek) butonuna tıklanarak GitHub’da yer alan uygulama dosyalarının paketleme işlemi için PhoneGap Build’e aktarılması sağlanır. Dosyaların aktarılma işlemi tamamlandıktan sonra uygulama ile ilgili genel bilgilerin yer aldığı sayfa görüntülenir.

PhoneGap Build’e aktarılan uygulama ile ilgili genel bilgilerin yer aldığı sayfa

Şekilde görüntülenen sayfa içerisinde uygulamanın adı değiştirilebilir, kısa bir açıklama eklenebilir ve “Ready to build” (Paketlemeye hazır) düğmesine tıklanarak mobil cihaza uygulamanın yüklenebilmesi için “APK” uzantılı dosya oluşturulabilir.

Paketleme işlemi tamamlandığında Şekil 60’da yer alan platform ikonlarına tıklandığında ilgili platformun kurulum dosyası (ör.: *.apk) tarayıcı yardımıyla kişisel bilgisayara indirilir.

Kurulum dosyasının indirilmesi

Platform ikonlarından ortada bulunan Android ikonuna tıklandığında “PGBuildApp-debug.apk” kişisel bilgisayara indirilir. Bu dosyayı Dosya Gezgini yardımıyla bulup mobil cihazınızın içine yükleyerek buradan kurulumu gerçekleştirilir ve mobil cihaz üzerinde kullanıma hazır hâle gelir.

ndirilen kurulum dosyasına Dosya Gezgini ile erişilmesi

4.2.4. APK Uzantılı Kurulum Dosyasının Mobil Cihaza Aktarılması ve Kurulumun Gerçekleştirilmesi

APK uzantılı kurulum dosyasını mobil cihaza aktarmak için mobil cihazın USB kablosunu kişisel bilgisayara takmak yeterli olacaktır. Bağlantı sağlandıktan sonra APK uzantılı dosya daha sonra mobil cihaz üzerinden erişimin kolay olabileceği bir lokasyona kopyalanır.

APK uzantılı kurulum dosyasının mobil cihaz içerisine aktarılması

APK uzantılı kurulum dosyası mobil cihaza aktarıldıktan sonra mobil cihazdaki dosya yöneticisi ya da benzeri bir program yardımıyla dosyaya ulaşılır ve çalıştırılır. Bu aşamada dikkat edilmesi gereken nokta, resmî uygulama marketi dışından bir kurulum dosyasının mobil cihazda çalışması için gerekli izinlerin verilmesi gerekliliğidir.

Geliştirici seçenekleri olarak tanımlayabileceğimiz bir dizi özelliğin kontrolüne mobil cihazdaki “Ayarlar” altında yer alan “Geliştirici Seçenekleri” bölümünden ulaşılır.

Kurulum dosyası çalıştırıldığında “Bu uygulamayı yüklemek istiyor musunuz? Uygulama şunlara erişebilecektir:” şeklinde bir onay bölümü mobil cihazda görüntülenir. Ekranın sağ alt tarafında “Yükle” butonuna tıklayarak uygulamanın mobil cihaza kurulumu başlatılmış olur.

Kurum dosyasına erişim ve yükleme işleminin başlatılması

Uygulamanın boyutuna ve mobil cihazın işlemci gücüne bağlı olarak yükleme işlemi belli bir süre alacaktır. Yükleme işlemi tamamlandığında “Uygulama yüklendi.” mesajı ekranda görüntülenir.

Uygulamanın yüklenme süreci ve yükleme işleminin tamamlanması

Uygulama artık program listesi içerisinde yer almaktadır. Uygulama çalıştırıldığında şekildeki gibi görüntülenir.

Mobil uygulamanın cihazda görüntülenmesi

Bir cevap yazın

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