Büyük Bir Projeye Başlarken Nelere İhtiyaç Duyarız?

By 25 Mayıs 2015Yazılım

Büyük Bir Projeye Başlarken Nelere İhtiyaç Duyarız?

Kapsamlı ve uzun soluklu bir projeye başlarken, proje ihtiyaçlarının iyi bir analizine ve bu analize göre gereksinimlerin belirlenmesine ihtiyaç var.
 
Ben web yazılım işini tamamen kendi gayretlerim ile öğrendiğim için, bazı noktalarda bunun eksikliğini hissediyorum. Özelikle de yazılım konusunda bir çevremin eksikliği… Tabi İstanbul’a tayin olduğumdan beri bu açığımı yavaş yavaş kapatmaya başladım. (İlk blogum olması sebebiyle biraz detay oldu 🙂 )

Şimdi Gelelim Sadede

Başlıkta her ne kadar ‘Büyük Bir Projeye Başlarken’ diye yazsam da, aşağıdaki söyleyeceklerim her projede uygulanabilir ve uygulanması gerekir. (Sebep: Yönetilebilir, geliştirilebilir projeler ortaya koymak)
Projeye başlamadan önce okullarda (ben bunun okulunu okumadım 🙂 ) öğretildiği gibi iyi bir analiz, daha sonrasında da ihtiyaç ve gereksinimlerin belirlenmesi gerekir. Bütün bunlar yapıldıktan sonra bazı araçlar var ki, işlerimizi kolaylaştırmada, bu araçlardan faydalanacağız.

GitHub

Projenizi geliştirirken (takım halinde veya yalnız başınıza) bir versiyon sistemi kullanmanız sizin uzun süreçte çok vakit kazanacağınız bir girişim olur. Çünkü bu versiyon sistemleri projenizi her yüklediğinizde (commitler aracılığıyla) bunu kendi algoritmalarına göre farklı bir versiyon olarak kaydeder. Ve istediğiniz zaman istediğiniz bir sürüme geçebilir ve yapılan değişiklikleri görebilirsiniz. Zaman içerisinde büyük faydalar sağlayacağı için hiç düşünmeden, en küçük projenizi bile versiyon sistemleri kullanarak geliştirin derim ben.
Benim tavsiye ettiğim ve kullandığım ise GitHub. Peki GitHub’ı nasıl kullanacağız. Hemen başlayalım öyleyse…
Öncelikle GitHub ana sayfasında kayıt olun ya da daha önce olduysanız giriş yapın.

Github

Daha sonra GitHub’ı kendi işletim sisteminiz için indirin ve kurulumunu tamamlayın…

Windows'ta Github

Şimdi hesabımıza girip yeni depo (repository) oluşturalım.

Yeni repository ekleme menüsü

Gerekli yerleri dolduralım

Github'da yeni depo oluşturma

Evet depomuzu da oluşturduk. Peki şimdi ne yapacağız? Local’de bulunan projemizi GitHub’daki projemizle ilişkilendireceğiz. Artık bundan sonrasını GitHub yapacak.

Github'da depoyu klonlama

Masa üstü GitHub programımız da açıldı :). Şimdi geldi projemizi Git’e göstermeye…

Windows Github depo ekleme

Artık bilgisayarınızda Git programını her açtığınızda, localdeki projeniz dinlenecek ve değişiklikler gösterilecek. Hemen basit bir şeyler yapalım.
Proje içine index.php dosyası oluşturalım ve Git programımıza bakalım neler olmuş.

Windows Github commit ekranı

Şimdi proje üstünde bazı değişiklikler yapalım. Tekrar program üzerinde bakalım neler olmuş.

Windows Github değişikliklerin görüntülenmesi

Silinen satırlar kırmızı, eklenenler yeşil… Harika :). Böyle basit işlemlerde anlaşılmasa da, projelerinizde yazdığınız kodlar çoğaldıkça GitHub’ın faydası daha da gözle görünür hale gelecektir.

Bower

Günümüzde teknoloji ve girişimler çok hızlı bir şekilde ilerliyor. Yazılımcıların da bu hıza ayak uydurması gerekir. Bunu manuel olarak yapmak ise çok zor. Çünkü bir proje hazırlarken bir çok iş var ki; birer angaryadan başka bir şey değil.
Bu yüzden birçok işleme otomasyon yapmamız ve bunları bilgisayara devretmemiz gerekiyor.(1)
İşte tam bu noktada yardıma koşan araçlardan bir tanesi Bower… Bower projelerinizdeki gereksinimlerinizi sizin için temin eder ve istediğiniz zaman bu gereksinimlerinizi tek bir işlemle güncelleyebilir. Aynı gereksinim listesini başka bir projede kullanmak da ilki kadar kolay bir işlem.
Biraz daha açmak gerekirse; ben projemde AngularJs kullanacağım mesela… Bunu projeme eklemem için neler yapmam gerekiyor.
  1. Önce ilgili aracın internet sitesine git
  2. Aracı indir
  3. İndirilen dosya ayıklanır ve işimize yarayan dosya alınır.
  4. Projeye koy
İşte görüldüğü gibi bir araç için min 4 adım atmanız gerekiyor. Peki projenizde 5 araç kullanırsak ne olur? 4×5=20 :). İşte bütün bunları bilgisayarın sizin yerinize yapmasını isterseniz, Bower’ı kullanmalısınız.
Şimdi Bower’ı nasıl kullanacağımızı anlatayım. Öncelikle Bower‘a gidip dosyaları indiriyorsunuz demiyorum. Çünkü Bower için bilgisayarınızda NodeJs ve Git yüklü olmalı. Sakın “NodeJs’i falan yükleyip öğrenene kadar, ben projeyi bitiririm” gibi düşünceler içine girmeyin. Çünkü bu tür programlar eğer iyi bir yazılımcı olmak istiyorsanız bilgisayarınızda sürekli bulunmalı.
O zaman kısaca anlatıyorum: NodeJs‘e gidin ve Node’u bilgisayarınıza yükleyin…

Node JS

Şimdi sıra geldi Bower yüklemeye. Bir de Bower‘ı ziyaret edelim bakalım neler varmış :).

Bower

(Kendi başladığım proje üzerinden anlatıyorum) Bower’ı projenize yüklemek için yapmanız gereken bilgisayarınızda cmd‘yi açmak ve cd ile projenizin klasörüne gitmek. Daha sonra şu komutu çalıştıracağız: npm install -g bower . Açıklamak gerekirse:
  • npm: node js paketleri yükleme komutu
  • install: bildiğiniz install işte
  • -g: Bu komut ile Bower’ın global olarak yükleneceğini ve başka projelerde de kullanılabileceğini belirttik. İstemezseniz kullanmayabilirsiniz.
  • bower: kurulacak paket adı. Başka paketler de bu şekilde kurulur
Bu işlem biraz zaman alabilir. Merak etmeyin… İşte yapılan işlemler. İsterseniz göz atabilirsiniz…

Bower işlemi sonucu ekran görünütüsü

Şimdi sıra geldi paketleri yüklemeye 

Bir hatayı beraber çözelim…

Tabi burada şunu söylemeden geçemeyeceğim. Az önce yüklediğimiz Bower programı ile, Git yüzünden uğraştım da uğraştım. Fakat şu hatayı alıyordum : bower ENOGIT git is not installed or not in the path. Ancak yaptığım araştırmalar sonucu http://git-scm.com/ adresine giderek, Git’i bir de buradan indirdim. (İkisinin arasındaki farkı çözemedim. Çözen birisi yorum ile beni aydınlatırsa sevinirim.)

Git

Daha sonra programı çalıştırdım ve program içinden local projemi gösterdim.

Git GUI depo seçme

Varolan depoyu Git GUI'de seçme

Bu işlemler bittikten sonra, Bower araç yüklemelerini Git Bash üzerinden yapacağız. Başlamadan önce Bower paketlerini inceleyelim. Bower üzerinde birçok araç mevcut. Bunların içinden istediğinizi yükleyebilirsiniz.

Bower'da paket arama

Şimdi gelelim işin en önemli bölümüne… Bütün bunların, yani Bower‘ın bize sağladığı en büyük katkı ise şu: bütün paketlerini indirtikten sonra, Git Bush ekranında bower init  komutunu çalıştırıyorsun. Çalıştıktan sonra senden bazı bilgiler istiyor.

Bower init

Ve Bower senin için bütün paketlerinin bilgilerini barındıran bower.json adında bir dosya oluşturuyor. Daha sonra sen aynı paketleri başka bir projede veya aynı projeyi başka bir bilgisayarda kuracağında Git Bush ekranına bower install  komutunu vermen yeterli oluyor… Bower senin paketlerinin hepsini kuruyor ve ilgili klasöre yerleştiriyor. Harika 🙂

Bower.json görünümü

Diye devam eden bir dosya… İşin bir tane daha önemli komutu var. Mesela siz bu bower.json dosyasını oluşturduktan sonra, eklediğiniz paketleri bu dosyaya kaydetmesi için tekrar bower init  komutunu mu çalıştıracaksınız? Hayır. Her pakette bower install <paket_adi> --save  olarak komut verirseniz, yeni gelen paketler direk olarak bower.json dosyanıza eklenir. Hepsi bu 🙂

Gulp

Geçen hafta Cumartesi ve Pazar Günleri (22-23 Kasım 2014) VNGRS  ekibi tarafından AngularJs Bootcamp konfransı düzenlendi. Gerçekten birbirinden değerli konuşmacılar benim için, o haftasonunu bir kilometre taşı haline getirdiler. Konferansın Facebook albümüne bakabilirsiniz. İşte Gulp da bu konferansta tanıştığım ve asla vazgeçemeyeceğimi düşündüğüm bir sistem sunuyor bize (Bir alternatifi de Grunt. Artık siz hangisini seçerseniz… Ancak Gulp; ciceksepeti.com Senior Frontend Developer’ı Cihad Horuzoğlu ve sahibinden.com Principal Frontend Developer’ı Murat Çorlu tarafından tavsiye edildi.) Neyse bu kadar reklamdan 🙂 sonra devam edelim…

Gulp Ne İşe Yarar?

Hani projemizi bitirip de Web’e yüklerken yapılan standart işlemler var ya… Mesela şunlar gibi:
  • Resimlerin boyutlarını küçült
  • CSS dosyalarını küçült
  • CSS dosyalarını sıkıştır
  • CSS dosyalarını birleştir
  • JS dosyalarını küçült
  • JS dosyalarını sıkıştır
  • JS dosyalarını birleştir
  • HTML dosyalarını küçült
  • … ve bunlar gibi bir yığın işlem
Bütün bunları yapan bir program olsa bizim için. Hatta bırakın Web’e yüklemeyi, localde çalışırken bile dosyaları her kaydettiğimizde bu işlemleri saniyeler içinde yapsa… Hatta bir de bizim için tarayıcıyı yenilese… Ooohhh tadından yenmez değil mi? İşte Gulp bütün bunları yapan harika bir araç.

Peki Gulp Nasıl Kullanılır?

Önce Gulp’ı Kuralım. Bunun için cmd ekranında proje klasörümüzde npm install -global gulp  komutunu çalıştırıyoruz. Bu komut sonrasında proje klasörümüzde node_modules adında bir klasör oluşturulur. Ve içine Gulp paketi eklenir.
Şimdi gelelim Gulp paketlerini indirmeye. Her bir paket için proje klasörümüzde şu komutu çalıştıracağız: npm install <paket_adi> --save-dev . Paketlerimiz Gulp’ın yüklendiği klasör olan node_modules‘e eklenir.
Size bazı önemli paketleri tavsiye edebilirim. Siz de projenize uygun paketleri NPMjs’den inceleyebilirsiniz.
  1. gulp-imagemin resimlerinizi minimize eder. Yani projenizde kullandığınız resimleri bayt olarak biraz küçültüp web yüklüyorduk ya… İşte Gulp’ın bu paketi bunu otomatik yapıyor.
  2. gulp-concat dosyalarınız birleştirir. Mesela bütün .js dosyalarını veya istediklerinizi birleştirip tek bir dosya olarak projemize eklemek isteyebiliriz.
  3. gulp-sass sass kullanarak style dosyalarımızı oluşturduk. Şimdi projemizi yayınlarken bunları css formatına dönüştürmemiz gerekiyor. İşte ihtiyacımız olan araç bu.
  4. gulp-minify-css Şimdi de css dönen style dosyalarımızı minimize ederek, boyutlarını küçültelim.
  5. gulp-rename Şimdi bazı dosyalarımızı webde farklı bir isimle yayınlamak ve kullanmak isteyebiliriz. İşte gulp-rename bu işimize yarayacak.
  6. gulp-uglify JS dosyalarımızı da minimize edelim
  7. gulp-watch En önemlisi de hep bunları yaptırmak için komut satırından Gulp2ın komutlarını mı kullanacağız? Hayır. Bunu da otomatize etmemiz lazım. gulp-watch ile Gulp geliştirdiğimiz projeyi izler ve değişiklik olduğunda istediğimiz görevleri yerine getirir.

Leave a Reply