Visual Studio ve PhoneGap ile HTML5, CSS3, JS Tabanlı Mobil Uygulama Nasıl Geliştirilir?

Önceki serilerde Mobil uygulama geliştirme, Visual Studio, Cordova, PhoneGap vb. bilgilere değinilmişti. Bu bölümde A’dan Z’ye adım adım Mobil Uygulama geliştirme konusu ele alınacaktır.

*** Bu adımlardan verim elde edilebilmesi için önceki serilere göz atılması tavsiye edilir.

Mobil Uygulama Geliştirmede Adım 1: Visual Studio Community ile Cordova Paketi Oluşturma

Microsoft tarafından geliştirilen “Visual Studio Community” programı indirilip bilgisayara kurulmalıdır.

İlk adımda bu program üzerinden Cordova paketleri hazırlanacaktır. Sonraki adımlarda Visual Studio Code ile kodlama yapılacaktır. (Visual Studio ile paketler oluşturulduktan sonra Dreamweaver, Turbo Editor, Quoda, Brackets, sublime Text vb. farklı kod editörü de kullanılabilir.)

  1. https://visualstudio.microsoft.com resmi sitesi üzerinden Visual Studio Community indirilip, bilgisayara kurulur.
visual studio websitesi olusturma1
  • Visual Studio menüsünden dosya > yeni > proje: Yeni proje oluşturma yolu izlenir.
  • Proje listesinden “Javascript > Mobil Apps > JS Boş Uygulama (Apache Cordova)” yolu izlenir. (Bu bölümde C# Xamarin, Visual Basic vb. programlama dilleri ile de uygulama geliştirilebilir. Bunun için ilgili bölmelerdeki proje paketleri kurulmalıdır.)
visual studio websitesi olusturma2
  • Oluşturulan paket ve önemli kodlarla dosyalar Visual Studio tarafından otomatik oluşturulur. Proje dosyalarını Visual Studio üzerinde açıp düzenlemek için; “Dosya > Aç > Proje/Çözüm” yolu izlenir. Proje klasöründe işlenecek proje seçilir.
  • Tarayıcı üst menülerinde yer alan “Debug – Android > Test Et” yolu izlenerek uygulama test edilir ve hata ayıklama işlemi tamamlanır. Bu sayede mobil uygulama listedeki mobil cihazlarda tarayıcı üzerinden test edilerek görünüm ve işlev kontrolü yapılır.
  • Oluşturulan pakete bilgisayardan “Bilgisayarım > C Diski > Kullanıcılar > (Ana kullanıcı) > source > repos” yolu ile ulaşılır. İlgili proje klasörü kopyalanıp, daha ulaşılabilir bir alana yapıştırılır. Sonraki işlemde index.html sayfası, css ve js dosyaları kod editörlerinde düzenlendikten sonra bu klasör içinde yer alan “www” klasörü içerisine atılır.  Klasör içinde gerekli düzenlemeleri elle (manuel) yapılabilir.

Mobil Uygulama Geliştirmede Adım 2: Config.xml Düzenleme

Cordova paketleri hazırlandıktan sonra config.xml dosyasının düzenlenmesi gerekmektedir. “Yeni Proje” Cordova paketinin oluşturulduğu klasöre gidilir. Klasör içerisinde yer alan.config.xml dosyası Visual Studio ,Visual Studio Code gibi kod editör yazılımında açılır. (Dosyaya sağ tıklayıp, ilgili programda açılabileceği gibi, sürükle bırak yöntemi ile de ilgili kod editöründe açılması sağlanabilir.) Biz Visual Studio Code üzerinde düzenleme ve kodlama yapmayı tercih ediyoruz.

visual studio websitesi olusturma3
<name> Kısmı: Mobil uygulamanın adı
	<name>Bizim Köşe Mobil Uygulaması</name>
<description> Kısmı: Uygulamanın tanımı
	<description>Bizimkose.com örnek cordova uygulamasıdır.</description>
<author href= Kısmı: Uygulamanın Web Sitesi, Eposta adresi ve Geliştirici adı
<author href="http://bizimkose.com" email="info@bizimkose.com">Geliştirici</author>
<engine name= Kısmı: Platform sürüm bilgisi
<engine name="android" spec="5.2.1" />
  <engine name="ios" spec="4.2.0" />
  <engine name="windows" spec="4.4.2" />

Diğer kısımlara müdahale edilmesi muhtemeldir. Ancak icon ve görsellere dair bilgileri içermekte olup, bu kısımda düzenleme yapmak yerine aynı adda klasör içinde dosyaları eklemek de muhtemeldir.

İşlemler tamamlandıktan sonra dosya aynı şekilde formatında bir değişiklik yapılmaksızın (CTRL + S) kaydedilir.

Mobil Uygulama Geliştirmede Adım 3: Uygulama İkonlarının ve Görsellerinin Değiştirilmesi

Sistem paketinde Cordova logosu otomatik olarak yer alır. Bunların klasör içerisinde güncellenmesi gerekir. Photoshop vb. görsel düzenleme programlarıyla hazırlanan ikon ve görsellerin bu klasörde aynı isim ve boyutlarda değiştirilmesi yeterlidir. Farklı isim ve boyutlarda resim eklemesi yapılacaksa muhakkak config.xml dosyası içerisinde de güncelleme yapılarak bu resimler belirtilmelidir.

res” Klasörü içerisinde yer alan “icons” klasöründe platform klasörler bulunur. Bunların her birinde platforma uygun ikonlar yer alır. Bu ikonlar mevcut görsellerdeki format ve boyutlara uygun görsellerle değiştirilmelidir.

Örnek android: res > icons > android

visual studio websitesi olusturma4

Aynı şekilde screens klasöründeki resimlerde uygun format ve boyutlarda kendi görselleriniz ile değiştirilmelidir.

Mobil Uygulama Geliştirmede Adım 4: Index.htm Hazırlanması

Tüm uygulamanın ara yüz ve kullanıcı deneyim kısmı “www” klasörü içerisinde yer alır. Bu kısma index.htm, style.css, script.js dosyaları eklenmelidir. Aynı şekilde kullanılan ilave görseller içinde bir klasör oluşturulmalı ve içerisine görseller eklenmelidir. (Görsellerin boyutlarının düşük olmasına dikkat etmenizi öneriyoruz.)

Visual Studio Code veya kullanılan farklı bir kod editörü üzerinden aşağıda belirtilen görseldeki gibi dosyalar oluşturulmalıdır. Index.html haricindeki dosyaların isimleri değiştirilebilir. Ancak CSS için .css, Javascript kodları için .js uzantılı dosya oluşturulmalıdır.

visual studio websitesi olusturma5 1

Index.html Oluşturma

Index.html adıyla bir adet HTML dosyası oluşturup, içerisine aşağıdaki gibi bir kodlama yapılır.

<!DOCTYPE html>
<html>
<head>
    <title>Uygulama Adı</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="main.js" type="text/javascript"></script>
    <link rel="stylesheet" href="main.css">
</head >
<body>
</body>
</html>

HTML5, CSS3 ve JavaScript kod bilgisine göre kodlama yapılır.

*** Olabildiğinde JavaScript’in yalın halinin kullanılması, JS Kütüphanelerini azami kullanılması tavsiye edilir.

CSS Kodları, main.css dosyası içerisine yazılmalıdır.

Javascript Kodları, main.js dosyası içerisine yazılmalıdır. Ancak CSS ve JS dosyası olmadan da tek bir Index.html sayfasında CSS ve JS kodları yazılabilir. Bu yöntem performansı düşürebileceği için pek tavsiye edilmemektedir.

Ara yüzü Tamamlama

Tüm kodlama ve ara yüz tasarlandıktan sonra veya adım adım Chrome, Opera ve Fire Fox gibi web tarayıcılarında uygulama web ara yüzü test edilebilir. Bu işlem tamamlandıktan sonra kullanılan tüm görseller aynı “www” klasörü içerisinde oluşturulan “img” adındaki (farklı isimler de verilebilir.) klasöre görseller eklenir. Bütün klasörler (isim, format, yer vb. değiştirilmeden) arşiv programları  ile .zip formatında sıkıştırılır. PhoneGap Cordova sadece .zip uzantılı arşiv dosyalarını kabul etmektedir.

Visual Studio Community ile Cordova paketi ve uygulama dizin dosyaları oluşturulup, herhangi bir visual studio code, dreamveawer gibi kod editörleriyle html, css ve js dosyaları kodlandıktan sonra “www” klasörü içerisine eklenir.

*** Ana html sayfası “index.html” şeklinde olmalıdır. Birden fazla html, css ve js dosyası oluşturulabilir.

Bu seri bölümünde Visual Studio ile Cordova paketi oluşturma, belli alan ve öğeleri düzenlemeyi gördük. Sonraki seride ise oluşturulan uygulamayı PhoneGap ile APK’ya çevirmeyi ve mobil cihazlarda çalıştırılabilir hale getirmeyi göreceğiz.

Mevlüt TAPAN