Ubuntu'da Web Geliştirme Ortamı İçin Eclipse Yapılandırması

        Bu güne kadar herhangi bir IDE kullanmadan yazıyordum kodlarımı. Fakat jQuery öğrenmeye başladıktan sonra kod tamamlama başta olmak üzere hata ayıklama gibi ileri düzey özellikleri kullanma gereksinimi duydum. Bunun için açık kaynak kodlu, özgür bir yazılım olan Eclipse Geliştirme ortamını seçtim. Nedeni ise tamamen Java bazlı olan uygulamada JavaScript ve jQuery gibi istemci taraflı uygulamaları değil sunucu bazlı PHP gibi uygulamaları da geliştirmek mümkün. Gelelim kurulumuna..
  • Eclipse'i Ubuntu'ya kurmak çok kolay. Terminale (Ctrl + Alt + T) şu komudu yazıyoruz:
        $ sudo apt-get install eclipse
  • Kurulum tamamlandıktan sonra Super tuşuna basıp çıkan ekranda Eclipse'i aratarak açıyoruz.
  • Eclipse bizden çalışma alanı (workspace) belirlemememizi isteyecektir. Çalışma alanı, Eclipse'in projeleri saklamak için kullandığı klasördür. İstediğiniz yeri belirledikten sonra "Use this as the default and do not ask again" ("Bunu varsayılan olarak kullan ve bir daha sorma") yazan checkbox'ı işaretlersek her açılışta tekrar yer belirlememizi istemeyecektir. OK ile işlemi tamamlıyoruz.
  • Karşımıza karşılama ekranı çıkacaktır. Bu ekran Eclipse ile ilgili bilgiler, yenilikler, eğitimler ve örnekler için link sağlamaktadır.

Bu Hoşgeldin ekranını sağ üst köşede bulunan Workbench tuşu veya sol üst köşede bulunan kapatma ikonu ile kapatabilirsiniz. Bu işlemi yaptığınızda genel olarak kurulum işlemi tamamlanmış olur.
  • Sıra kodlarımızı barındıracak JavaScript projesini oluşturmak için yapılması gereken yapılandırma ayarlarında. Bu ayarlar için "Help > Install New Software..." yolunu takip ederek;

        ekranına ulaştıktan sonra "Add..." butonuna tıklıyoruz.

        Name: Juno
        Location: http://download.eclipse.org/releases/juno

        kısımlarını bu şekilde doldurduktan sonra OK'a basıyoruz. 


  • Name bölümünde yazan kısımlardan en alttaki "Web, XML, Java EE and OSGi Enterprise Development" kısmının solundaki oka tıklayarak içeriğini görüntülüyoruz. Bu içeriğinde bulunan eklentilerden geliştirmek istediğiniz herhangi birini seçebilirsiniz. Ben JavaScript ve jQuery için gerekli olanları seçiyorum. Bunlar:
          Eclipse Java Web Developer Tools
          JavaScript Development Tools
          Web Page Editor
  • Seçimlerimizi yaptıktan sonra Next - Next diyerek kurulumlarını gerçekleştiriyoruz. Krulum bittikten sonra Eclipse kendini baştan başlatmak isteyecektir. Kabul ediyoruz. Bunları yaptıktan sonra artık JavaScript kodlayabilir hale geldik. Yeni bir JavaScript projesi oluşturmak için;
          "File > New > Project... > JavaScript > JavaScript Project" yolunu izledikten sonra Next diyoruz.

  • Açılan pencerede Proje Adını girdikten sonra Next diyerek projede kullanılacak kütüphaneleri belirleyebiliriz. Finish tuşuna basarak projemizi oluşturuyoruz.
  • Projemize dosya eklemek için Script Explorer kısmından projemize sağ tıklayarak "New > File" yolunu izledikten sonra Yeni Dosya penceresi açılacaktır.

          Burada dosya ismini belirledikten sonra Finish tuşuna bastığımızda boş bir HTML dosyası projemize eklenecektir. Eclipse, siz HTML dosyasına yazarkken hem HTML hem de JavaScript için kod yardımı yaptığını göreceksiniz. Kod yardımını başlatmak için (Ctrl + Alt) kombinasyonuna basınız!
  •  JavaScript geliştirme ortamımız hazır. Şimdi yapmamız gereken işlem Eclipse'e jQuery kodlarını tanıtmak. Bunun için yapılması gereken Eclipse ortamında JSDT jQuery isimli eklentiyi eklemek.
  • Eklentiyi indirmek için "Help > Eclipse Marketplace" seçeneğini seçiyoruz. Eğer Eclipse Marketplace seçeneği yoksa;
    • "Help > New Install Software..." yolunu izleyince gelen ekranı biliyoruz. Add butonuna basıyoruz. Gelen kutucuktaki
    •        Name: Indigo
    •        Location: http://download.eclipse.org/releases/indigo

             kısımları bu şekilde doldurduktan sonra OK'a basıyoruz. 
    • Name bölümünde "General Purpose Tools" seçeneğinin yanındaki oka tıklayarak içeriğini görüntülüyoruz ve bu kısımdaki "Marketplace Client" seçeneğini seçerek Next Next diyerek Marketplace'i kuruyoruz ve Eclipse'i yeniden başlatıyoruz.
  • "Help > Eclipse Marketplace" yolunu kullanarak Marketplace'i açıyoruz. Gelen ekranda Find kısmına "jsdt" yazıp Go ya basıyoruz.

  • JSDT jQuery seçeneğinin yanındaki Install butonuna tıklayarak kuruluma başlıyoruz. Eclipse bağımlılıkları denetledikten sonra Next diyip sözleşmeyi kabul ettikten sonra Finish diyerek kurulumu tamamlıyoruz. Her zamanki gibi Eclipse'i yeniden başlatıyoruz.
  • Son bir ayar daha yaptıktan sonra Eclipse jQuery kodları tanır duruma gelecektir. Bu ayar projemize jQuery Kütüphanesini dahil etmektir.  Bunun için Script Explorer kısmında projemize sağ tıklayıp Properties (Özellikler) seçeneğini seçiyoruz.

    Açılan pencerenin sol tarafındaki menüden "JavaScript > Include Path" seçeneklerini seçtikten sonra sağ taraftaki "Add JavaScript Library" butonuna tıklıyoruz.


    Burada "jQuery Library" seçeneğini seçip Finish butonuna tıklayarak kütüphanemizi projemize dahil etmiş oluyoruz.



        Her şey yolunda gitmişse Eclipse; oluşturduğumuz HTML dosyasında yazdığımız tagleri arasındaki jQuery kodlarını tanıyacaktır. İyi çalışmalar.