HTML5 ve Javascript ile Android Uygulaması Geliştirmek
İşte mobil uygulama geliştirmek isteyen web geliştiricilerinin kahramanı! İşte eclipse'e uyuz olan programcıların "sana mı kaldım lan!" diyebilme sebebi. İşte boktan android componentlerine özgür arayüz alternatifi! İşte, Phonegap!
Şaka bir yana eclipse ile uygulama yazmayı denedim. Daha önceden az biraz C# tecrübem olduğu için Java pek de karışık gelmedi. Ancak androidin sunduğu arayüz bileşenlerine (buton, textview vs.) pek ısınamadığım için pek sarmadı. Sonra Android Studio'yu denemeye karar verdim; deneyemedim. Deneyemedim çünkü IDE'yi açarken bile laptop ısınıp kapanacak raddeye geldi. Yani çok yavaş, sanırım biraz daha stabilize edilmesi gerek.
Android benim için bitmiştir, "daha da Eclipse'e gelmem" dedikten sonra bir blogdan HTML5 ile android uygulamaları geliştirilebileceğini okudum. Phonegap'i buldum, iyi gidiyor, bu yaz nişanımız var.
İşin iyi yanı uygulamalarınızı platform-bağımsız olarak kodluyorsunuz, daha sonra hedef platforma göre derliyorsunuz. Yani yazdığınız bir uygulamayı hem Android, hem Windows Phone hem de iOS üzerinde kullanabilirsiniz. Ancak bildiğim kadarıyla Apple şu an için Phonegap uygulamalarını onaylamıyor. Olsun be, onda da bir hikmet vardır diyerek kolları sıvıyoruz!
Güncelleme: Ubuntu/Linux kullanıcıları şu sayfadan devam edebilir.
Windows için Phonegap Kurulumu
İlk olarak Windows'da kullanmayı denedim, fakat bazı sorunlarla karşılaştığım için Ubuntu'da denemeye karar verdim. Ben şuanda Ubuntu üzerinde kullanıyorum ancak malumunuz Windows daha çok kullanıldığı için kurulumu ona göre anlatacağım. Zaten kurulum dışında kullanımında pek bir farklılık yok. Hazırsanız başlayalım.
1. Node.js Kurulumu
Önce nodejs.org indirme sayfasına girdikten sonra Windows için olan kurulum dosyasını indirin. Ardından next-next diyerek kurun. Kendi işlemci mimarinize uygun (x86 - x64) kurulumu seçmeye özen gösterin. Kurulumdan sonra konsol ekranını açıp "npm" yazın, eğer hata vermediyse sorunsuz yüklenmiş demektir.
2. Phonegap CLI Kurulumu
Konsolu açtıktan sonra aşağıdaki komutu girin. Bu, cordova komut satırı arayüzünün kurulmasını sağlayacak.
npm install -g cordova
Eğer neden phonegap kurmadık da cordova kurduk derseniz; aslında ikisi de aynı işi yapıyor. Phonegap arayüzü uzaktan debug yapmaya yarayan bazı komutları da içeriyor. Aslında phonegap'in çatısı cordova'dır. Örneğin, webkit bir çatıdır ve Chrome ve Safari tarayıcıları bu çatıya bağlıdır. Bunun gibi düşünebilirsiniz.
Proje Oluşturma
Konsoldan projeyi oluşturmak istediğiniz klasöre geldin. Eğer nasıl ilerleyeceğinizi bilmiyosanız, aşağıda iki temel komut var.
cd.. // Bir üst klasöre çıkar cd klasor-adi // Adı verilen klasöre girer
İstediğiniz klasöre geldikten sonra proje oluşturun.
cordova create merhabaphonegap com.umut.merhabaphonegap MerhabaPhonegap
Create komutu ile gönderdiğimiz parametreler sırasıyla; klasör adı, uygulama paket ismi, projenin adı. Yani bu komutla merhabaphonegap adında bir klasör oluşturulup içinde MerhabaPhonegap isimli bir taslak proje oluşturulacak. Bu uygulamanın paket ismi com.umut.merhabaphonegap olacak.
Projeye Android Platformu Kurulumu
Projeyi oluşturduğumuza göre artık hangi platforma göre kod yazacaksak, o platformun dosyalarını projeye dahil etmenin zamanı geldi. Önce cd komutu ile projeyi oluşturduğumuz klasöre girip ardından platform ekleme komutunu yazalım. Komutları sırasıyla yazmaya dikkat edin.
cd merhabaphonegap cordova platforms add android
Bu işlem sırasında "bilmem ne dosyası bulunamadı" tarzında hatalar verebilir. Dert etmeyin, s*ktir edin.
Test Sürüşü
Android telefonunuzun Geliştirici Ayarları bölümünden USB Hata Ayıklama modunu aktif ettikten sonra bilgisayara USB ile bağlayın ve konsola aşağıdaki komutu yazın.
cordova install android
Karşınıza aşağıdaki gibi bir karşılama ekranı geldiyse uygulama çalıştı demektir.
Bu senin serseri serbest stilin
Buraya kadar geldikten sonra tek yapmanız gereken proje-klasoru/www/ içindeki index.html, css klasöründeki index.css ve js klasöründeki index.js dosyalarını çılgın fikirlerinize ve üstün tasarım yeteneğinize göre düzenlemek!
Kolay gelsin!