PhoneGap/Cordova çalışma ortamının kurulması

6 Şubat 2013
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

Mobil yazılım geliştirmeye ilgi duyan pek çok kişi Cross Platform Mobil Uygulama Geliştirme ortamlarında mutlaka göz atmıştır. Bunların arasında en popüler olanlarından biri olan PhoneGap, yeni ismiyle Cordova en popülerlerinden biri. Ben de 2012 yılının son çeyreğinden beri yoğun bir şekilde Cordova kullanıp, bu konu da ilerlemeye çalışıyorum. Şimdiye kadar edindiğim bilgileri de buradan paylaşıyor olacağım. İşte ilk yazı..

Daha önce “Cross Platform Mobil Uygulama Geliştirme ve Apache Cordova/PhoneGap” başlıklı yazımda Native ve Cross Platform Mobil Uygulama Geliştirme ortamları ile ilgili ortak özellikleri, kullandıkları teknolojileri, avantaj ve dezavantajları gibi konuları geniş bir şekilde anlatmıştım. Bu yazı da ise PhoneGap çalışma ortamının kurulması ve artık klasikleşmiş olan “Merhaba Dünya” uygulamasını gerçekleştirip, yazımızı sonlandıracağız.

Bu sebeple PhoneGap/Cordova nedir? ne değildir? sorusunu merak edenlerin öncelikle diğer yazımı okumalarını tavsiye ederim. Küçük bir not daha.. Yapacağımız geliştirmeler Android ortamı için olacak. Dolayısı ile iPhone, WP8 ya da BlackBerry için yapılması gereken derlemelerin nasıl olması gerektiği hakkında PhoneGap‘in resmi web sitesinden yardım alabilirsiniz.

Başlayalım..

Android ortamına PhoneGap’in kurulumunu gerçekleştirmek için öncelikle kullanacağımız Eclipse IDE’sinde Android ortamının kurulu olması gerekiyor. Bunun için internet üzerinden Android geliştirme ortamının kurulması  başlıklı makaleleri okuyabilirsiniz.

1. İlk olarak PhoneGap dosyalarını http://phonegap.com/download/ adresinden (şu anda 2.3.0 sürümü bulunuyor) indirelim.
2. Eclipse’i açalım ve yeni bir “Android Application Project“ oluşturalım.


 

 

 

 

3. Artık PhoneGap dosyalarımızı Eclipse entegre etmeye başlayabiliriz.

3.1. Projemizdeki “assets” klasörü altına “www” klasörünü oluşturalım.


3.2. Oluşturduğumuz “www” klasörünün altına bir “index.html” dosyası oluşturalım.


3.3.  PhoneGap web sitesinden indirdiğimiz dosya içerisinde bulunan ve “phonegap-2.3.0\phonegap-2.3.0\lib\android\” pathi altında yer alan “cordova-2.3.0.js” isimli dosyayı projemiz altındaki “www” klasörüne kopyalayalım.


3.4.  PhoneGap web sitesinden indirdiğimiz dosya içerisinde bulunan ve “phonegap-2.3.0\phonegap-2.3.0\lib\android\” pathi altında yer alan “cordova-2.3.0.jar” isimli dosyayı projemiz altındaki “libs” klasörüne kopyalayalım.

3.5. PhoneGap web sitesinden indirdiğimiz dosya içerisinde bulunan ve “phonegap-2.3.0\phonegap-2.3.0\lib\android\” pathi altında yer alan “xml” isimli klasörü projemiz altındaki “res” klasörüne kopyalayalım.

3.6. Projemizin üzerinde sağ tıklayarak > Properties menüsünü seçelim ve Java Build Path seçeneğini işaretleyerek “Libraries” sekmesine gelelim. Sağ kısımda bulunan menüden “Add JARs” menüsünü seçerek, projemizin “libs” klasörü altında bulunan “cordova-2.3.0.jar” isimli kütüphaneyi seçerek projemize ekleyelim.

4. Entegrasyonumuzu tamamladığımıza göre artık ilk uygulamamızı hazırlayabiliriz.

4.1 Önce src > com.delipenguen.phonegapornek1 > MainActivity.java dosyamızı açalım.

4.2.MainActivity” extend ettiği “Activity” i iptal edip, “DroidGap” yapalım. Bu değişiklikten sonra aşağıdaki gibi hata görünümleri oluşacaktır.

Ctrl+Shift+O tuş kombinasyonuna basarak “import org.apache.cordova.DroidGap;” kütüphanesinin projemize eklenmesini sağlayalım ve hatayı da düzeltmiş olalım.

4.3. assets > www altına oluşturduğumuz “index.html” dosyasını açalım ve “head” etiketleri arasına <script type=”text/javascript” charset=”utf-8″ src=”cordova-2.3.0.js”></script> kodumuzu ekleyelim.


4.4. src > com.delipenguen.phonegapornek1 > MainActivity.java dosyamızı tekrar açalım ve “onCreate” metodu altında bulunan “setContentView(R.layout.activity_main);” satırını iptal edip, yerine “super.loadUrl(“file:///android_asset/www/index.html”);” satırını ekleyelim.

4.5.index.html” dosyası içerisindeki “head” etiketleri arasına aşağıdaki kod satırlanı ekleyelim.

<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
      alert("PhoneGap yüklendi ve çalışır durumda. Merhaba Dünya!");
}
</script>

Artık hazırız ve projemizi çalıştırabiliriz. Ancak projemizi çalıştırdığımızda göreceğiz ki programımız hata verip kapanacak. Bunun sebebi aynı Android, iPhone, WP8 ya da Blackberry çalışma ortamlarında olduğu gibi PhoneGap için de gerekli izin kodlarını projemize yerleştirmediğimizden kaynaklanıyor. Bunun için son adımımızı da aşağıdaki gibi gerçekleştirelim.

Öncelikle projemizin rootunda bulunan “AndroidManifest.xml” dosyasını açalım ve XML görünümüne geçelim.


uses-sdk” ve “application” etiketleri arasına aşağıdaki izin kodlarını yerleştirelim.

<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

Artık uygulamamız çalıştığında aşağıdaki ekranla karşılaşacağız.

Ancak yazıyı şunu hatırlatmadan bitirmeyelim. Yukarıda tanımladığımız izinler neredeyse cihazımızın her özelliğine izin sağlıyor. Gerçek bir uygulamayı yaparken bunu asla kullanmamalısınız. Yalnızca uygulamanızın gerektirdiği izinleri açmanız en sağlıklı ve en doğru yoldur. Örneğin; bu uygulamamızı çalıştırmak için yalnızca

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

satırını kullanmak yeterlidir.

Bir sonraki yazı da görüşmek üzere.

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. 8 Nisan 2013 - 00:18

    Hocam çok teşekkür ederim. Ancak bu kadar temiz ve iyi anlatılabilirdi. Emeğine sağlık.

  2. :DeliPenguen
    8 Nisan 2013 - 08:14

    Beğendiğine sevindim. PhoneGap ile çalışıyorsan https://plus.google.com/u/0/communities/117075673032309282055 adresinde kurduğum PhoneGap/Cordova Geliştiricileri Türkiye Topluluğu’na da beklerim.

  3. Ramazan Onur
    19 Nisan 2013 - 14:29

    Hocam merhaba,

    Bu adımları tek tek izledim hepsini yaptım fakat test için çalıştırdığımda çıkan emulatorde android yazısı var sadece nerede hata yapmış olabilirim acaba

    • Ramazan Onur
      19 Nisan 2013 - 16:04

      Bir süre beklemem gerekiyormuş telefonun açılma süreci 🙂 yanlız açılan emulator de sistem çok yavaş. Bunun nedeni ne olabilir acaba ?

  4. :DeliPenguen
    19 Nisan 2013 - 14:56

    Merhaba Ramazan. Emülatör üzerinden Android sistemi çalıştığında uygulama otomatik ayağa kalkacaktır. Bir hata olup olmadığını Eclipse üzerindeki “LogCat” penceresinden takip edebilirsin. Oradan bir hata alırsan üzerinde konuşalım. Zira örneği test ederek makaleye eklediğim için muhtemelen sen hazırlarken gözünden küçük bir şeyi kaçırmış olmalısın. Önemli bir sorun olduğunu sanmıyorum. Dediğim gibi hatayı bir de LogCat üzerinden takip et, tekrar konuşalım.

    • Ramazan Onur
      19 Nisan 2013 - 16:41

      Hocam çok teşekkürler sorunsuz gerçekleştirdim fazla yazılan bir tırnak yüzünden çalıştıramamışım 🙂 kusura bakmayın vaktinizi aldım. Örnek için çok teşekkürler..

  5. :DeliPenguen
    22 Nisan 2013 - 10:12

    Geçmiş olsun, kolay gelsin 😉

  6. Kemal Can Kaynak
    10 Mayıs 2013 - 19:58

    Merhaba kolay gelsin. Gerçekten çok güzel bir anlatım olmuş ancak www altına bir türlü yeni bir html dosyası oluşturamadım. Yani yeni dosya seçeneklerinde html dosyası oluşturma seçeneği bende çıkmıyor. Rastgele bir dosya oluşturup adını index.html olarak atadığımda ise, yazdığım html kodu renklenmiyor. Bu yüzden kodu takip etmek ve hataları bulmak işkence haline geliyor. Yeni html dosyasını nasıl oluşturabilirim ?

    Eclipse versiyon 3.8.0
    Android Developer Tools versiyon v21.1.0
    Phonegap versiyon 2.6.0

  7. :DeliPenguen
    10 Mayıs 2013 - 20:33

    Merhaba Kemal. Bu durum Android Adt Bundle kurulduğunda genel olarak gerçekleşir. Bu konunun nasıl düzeltilmesi gerektiğini http://www.delipenguen.com/2013/04/android-adt-bundle-uzerinde-phonegap-gelistirme-ortami-nasil-hazirlanir/ buradaki makalede anlatmıştım. Deneyip bilgi verir misin?

  8. Kemal Can Kaynak
    11 Mayıs 2013 - 01:47

    Tamam hallettim teşekkürler 🙂

  9. Kemal Can Kaynak
    11 Mayıs 2013 - 18:56

    Şimdi de “Application Error : Bir ağ hatası oluştu. (file:///android_assets/www/index.html) hatası almaya başladım. İnternette aynı sorunu yaşayıp çözümü bulanların tüm çözüm yollarını denedim ancak hala hata alıyorum. Nerede yanlış yapıyor olabilirim ?

    • :DeliPenguen
      11 Mayıs 2013 - 19:39

      Muhtemelen AndroidManifest.xml dosyasına vermen gereken izinleri vermemişsin. İzinleri vererek tekrar dener misin?

  10. Evrim
    28 Mayıs 2013 - 10:13

    4.2 o0lan son sürümü şimdi indirdim. Yeni HTML sayfası eklemesi yok sanırsam kaldırıldı mı? yardımcı olursanız sevinirim.

  11. :DeliPenguen
    28 Mayıs 2013 - 11:44

    “No active compatible AVD’s or devices found.”

    Mesajında hatayı belirtmiş aslında. Eclipse bir Virtual Device tanıttın mı?

  12. kadir kartal
    6 Temmuz 2013 - 19:18

    url i super.loadUrl(“file:///android_asset/www/index.html”);
    bu şekilde verdim ama hata veriyor
    super.loadUrl(“file:///assets/www/index.html”);
    super.loadUrl(“file:///android_assets/www/index.html”);
    Bu şekilde de hata veriyor
    android_asset tanımlı bir klasör müdür?

    • :DeliPenguen
      22 Temmuz 2013 - 02:13

      Merhaba Kadir. Bir Android projesi oluşturduğunda assets klasörü default olarak proje içerisinde gelir. Bu klasör içerisine erişim de file:///android_asset/www/index.html şeklinde sağlanıyor. Bu şekilde yazdığın halde erişemiyorsan atladığın başka bir sorun vardır.

  13. Bahadır
    23 Temmuz 2013 - 12:26

    Öncelikle güzel ve anlaşılır anladım için çok teşekkür ederim. Tüm basamakları eksiksiz olarak 3 defa arka arkaya yapmama rağmen uygulamayı başlattığımda sadece beyaz ekran geliyor ve emulator duruyor öyle nedeni ne olabilir acaba eclipse versiyonu olabilirmi sizin resimlerinizden farklı olarak benim eclipse görüntüm bu şekilde çünkü?

    [url=http://bit.ly/c25MCx][img]http://t1307.hizliresim.com/1c/r/qnrk3.png[/img][/url]

  14. 8 Ekim 2013 - 14:35

    Hocam merhaba.Anlatım çok iyi fakat ben birtürlü hiçbir şekilde uygulama geliştiremedim eclips’de.Ne yapsamn olmuyor saçma sapan hatalar alıyorum.işin ehli değilim öğrenciyim Visual Studio ile onlarca uygulama yaptım ama bunda sürekli alakasız hatalar alıyorum.Çözümü nedir?Visual Studio ile geliştirilebilirmi lütfen yardımcı olun.

    Teşekkürler.

    • :DeliPenguen
      9 Ekim 2013 - 17:41

      Merhaba Ömer,

      Öncelikle telaş yok. Hali hazırda zaten yazılım geliştiriyorsan eminim kısa sürede adapte olabilirsin. Linkini verdiğin yazımdaki PhoneGap çalışma ortamının kurulumu 3.0 versiyona kadar olan geçerli halidir. Yani 2.9 ve öncesi için sorunsuz kurabilirsin. Yeterki anlatılan adımları sırası ile uygula. Yine de takıldığın yerler olursa seve seve yardımcı olmayaca çalışırım.

      Bunun yanında olurda iş-güç durumundan cevap yazmakta sıkıntı yaşarsam beni beklemene hiç gerek yok. Aşağıda verdiğim linkte Google Plus üzerinde kurduğum “PhoneGap/Cordona Geliştiricileri Türkiye Topluluğu” isimli bir grup var. Bu grupta da karşılaştığın problemlerin çözümü için yardımcı olabilecek pek çok arkadaşımız mevcut.

      https://plus.google.com/communities/117075673032309282055

      Visual Studio meselesine gelince, bu durum değişir. Şöyle ki; PhoneGap ile mobil uygulama geliştirmek web yapmak demek değildir. Sakın bu iki kavramı birbirine karıştırma. PhoneGap ile web teknikleri kullanılarak mobil uygulama geliştirilir ama bu web geliştirme demek değildir. Bu yüzden PhoneGap ile hangi ortam için Mobil geliştirme yapmak istiyorsan o ortamı kurmalısın. Android üzerine geliştirme yapacaksan Eclipse, iOS üzerine uygulama geliştireceksen XCode, Windows Phone 7/8 geliştireceksen Visual Studio kullanabilirsin.

      Umarım aklındakileri bir nebze olsun cevaplayabilmişimdir.

  15. 19 Şubat 2014 - 19:11

    Anlatım için emeğinize, yüreğinize sağlık.. İyi günler kolay gelsin.

    • :DeliPenguen
      24 Şubat 2014 - 14:59

      Teşekkürler, faydalı olur inşallah.

  16. 30 Eylül 2014 - 22:52

    Hocam merhabalar, konuyu açalı uzun zaman olmuş inşaAllah hâlâ sorulara cevap veriyorsunuzdur 🙂

    Ben phonegap’i “Android Project from Existing Code” metodu ile çalıştırdım. Sorunum şu;
    “cordovaExample has been stoped” uyarısı aldım yani uygulama çalışmadı. Araştırdım

    bu satırı eklemem lazımmış, ekledim fakat bu seferde

    android:hardwareAccelerated=”true”
    android:debuggable=”true”

    satırlarında hata almaya başladım. Bir çok yerde (yerli-yabancı) araştırdım ama çözüm bulamıyorum. Acaba bu konuda yardımcı olabilir misiniz?

    • 30 Eylül 2014 - 22:55

      Bu arada neden sizin anlattığınız yöntemle değilde öbür türlü yaptığımı da şöyle anlatayım ;
      cordova 2.3.0’ı bilmem de 2.9.1’de phonegap-2.9.1\lib\android\ içinde .jar dosyası yoktu,bende garanti olsun diye hemde kolaya kaçmak amaçlı o yolu tercih ettim.

  17. Esref Bektas
    20 Aralık 2014 - 17:04

    Arkadaşlar
    file:///android_asset/www/index.html
    sorununda hata alanlar,
    super.loadUrl kodunu elle yazsın.Daha sonra (url) kısmıan gelince url yi silip tırnak içinde yapıştırın hata düzelir.

  18. 3 Haziran 2015 - 02:06

    MERHABA, HOCAM ALLAH RAZI OLSUN. GERÇEKTEN ÇOK İYİ BİR İŞ ÇIKARTMIŞSIN.
    YABANCI SİTELER DE DAHİL OLMAK ÜZERE İNTERNETTE BULUNAN ÖRNEKLERİN İÇİNDE ÇALIŞAN BİR ÖRNEK NİHAYET BULABİLDİM.

    ÖRNEK GAYET GÜZEL VE SAĞLAM, TIKIR TIKIR ÇALIŞIYOR.LOLLİPOP’TA BİLE DENEDİM SORUN YOK.
    GERÇEKTEN ÇOK İYİ VE ADIM ADIM VE AYRINTILI BİR ANLATIM OLMUŞ ELİNİZE SAĞLIK DİYORUM.

  19. Umut
    10 Ocak 2016 - 21:49

    alert alamıyorum bir türlü herşeyi denedim neden olabilir