PhoneGap ile Android Projesi Oluşturma

Android programlama yapmanın tek yolu native bir biçimde, sabit kalıpların dışına çıkmadan gerçekleştirmek değildir. Örneğin Xamarin ile .NET C# ortamında android projesi geliştirebilir ve Java dilini öğrenme zorunluluğundan kurtulabiliriz. Eğer web programlama yapan biriyseniz  ve HTML5 ,CSS ,Javascript'e hakimseniz Android projesi geliştirebilirsiniz. Bunu sağlayan aracın adı isePhoneGap.


PhoneGap sadece Android değil çoğu mobil platformlarda(IOS,WindowsPhone, BlackBerry...) uygulama geliştirmenize imkan tanıyor. Bu yazımda Eclipse IDE'si üzerinde nasıl PhoneGap uygulaması oluşturacağımızdan bahsedeceğim.
Bugün ki adı ile PhoneGap, Apache Cordova adı ile tanınmıştır, öyle ki uygulama geliştirirken sıklıkla cordova adına rastlıyoruz. Zaman içerisinde Adobe tarafından satın alınıp adı PhoneGap olarak değiştirilmiştir.

Daha önce anlatmış olduğum gibi Eclipse IDE'si üzerinde Android kurulumu yapmanız gerekiyor.

Şimdi sıra geldi PhoneGap sitesine bağlanıp ihtiyacımız olan dosyaları indirmeye... 

• http://phonegap.com/install/ bu adresten phonegap'ın en son versiyonunu yada istediğiniz bir versiyonunu indirebilirsiniz.

İndirmiş olduğumuz dosya içerisinde phonegap sayesinde proje geliştirebileceğimiz tüm ortamlarla ilgili dosyalar ve örnek klasörler bulunuyor.
Bizi ilgilendiren kısım ise example klasörünün altında tüm işlemlerin yapılmış ve kullanıma hazır olduğu android projesi. Ben example klasörünü kullanıp gerekli değişiklikleri hazır dosyalar üzerinden yapıyorum.
Ancak her işlemi sıfırdan kendiniz oluşturmak istiyorsanız yapmanız gereken başlıca işlemler var. Assets klasörü altında www klasörü oluşturup içerisinecordova 

js dosyasını ekliyoruz ve yazacağımız tüm html, css, javascript işlemlerimizi bu klasör altında gerçekleştiriyoruz. Bunun dışında yapmanız gereken başlıca işlemler var örneğin cordova jar dosyasını projenize eklemek ve manifest xml dosyasında değişiklikler yapmak gibi. Bu konuyla ilgili detaylı ve görsellerle anlatım yapmış Adobe, ilgili yazıya buradan ulaşabilirsiniz.

Şimdi sıra geldi bizim için hazırlanmış Android projesini oluşturmaya.

Eclipse IDE'mizi açıyoruz veFile->New Project seçiyoruz. Ardından açılan pencereden yandaki görselde olduğu gibiAndroid Project from Existing Code seçip next diyoruz. Bu seçim bize example adlı klasörün yolunu göstererek projeyi açmamızı sağlayacak.
Ardından açılan penceredenRoot Directory üzerinde bulunan Browse butonuna tıklıyoruz. Şimdi sıra geldiexample klasörümüzü bulmaya, indirmiş olduğumuzPhoneGap klasörünü buluyoruz ardından aşağıda belirttiğim yolu takip ediyoruz.

• phonegap-2.9.0\lib\android\example

Aşağıdaki görselde görüldüğü gibi example klasörünü bulduktan sonra tamam diyoruz, ardından next diyerek example projemizi açmış oluyoruz.

 

 

 

Açılmış olan proje üzerindeki dosyalara bakacak olursanız, her zamanki android projemizden daha farklı olduğunu göreceksiniz. Daha sade bir proje üzerinden işlem yapmak isterseniz assets/www altındaki html css dosyalarını silebilir, sıfırdan kendi projenizi yazabilirsiniz. Eğer projeniz üzerinde herhangi bir hata bulunmuyorsa çalıştırıp örnek projeyi emulator üzerinden görebilirsiniz. Ayrıca PhoneGap ile proje yazmaya başlayabilirsiniz.

Son olarak projenizde hata görünüyorsa bu hata AndroidManifest.xml'den kaynaklanıyor, bu durum için çözüm yöntemini aşağıdaki başlık altında anlatıyor olacağım.

PhoneGap AndroidManifest.xml Hata Çözümü

Burada kullanmış olduğumuz android paketimizin versiyonunu değiştireceğiz. 

File->Properties seçeneklerini seçiyoruz ve açılan pencereden Android sekmesini seçiyoruz. Buradan herhangi bir Android versiyonunu seçiyoruz, örneğin ben 4.0'ı seçtim.
Son olarak AndroidManifest.xml içerisinde bulunan 

 

kodundaki minSdkVersion alanını 8 olarak değiştiriyoruz. Artık sorunumuz çözülmüş halde, projemizi çalıştırabiliriz.

Projenin çalıştırılmış hali aşağıdaki görseldeki gibi:

PhoneGap tarafından example altında yazılmış olan sayfayı görüntüledik. 

Şimdi assets->www klasörü içerisinde bulunan index.html içerisindeki kodları silip Merhaba PhoneGap yazalım.
body etiketiki altındaki kodları silip  

<h1>Merhaba PhoneGap!</h1>
<p>Eren Güvercin</p>

?

kodunu yazıyorum. Çalıştırdıktan sonraki görüntü aşağıdaki gibi: