Örnek Uygulama – Hazırlık

Uzun süredir node.js üzerine kapsamlı bir yazı yazmak istiyordum. Daha doğrusu yazı dizisi. Internette başkaların neler yaptıklarına ne tür yazılar yazdıklarına bakarken dikkatimi çekti ki hemen hemen herkes “Blog” örneği yapmış. Ayrıca okadar tekdüzeler ki hepsi sanki tek elden yazılmış gibi. Tabi eminim o şekilde yazılmamışlardır ama blog geliştiriliyor sonuçta ne kadar farklılık katılabilir ki uygulamaya. Bense bu yazımda farklı bir yoldan gidip internette gördüğüm güzel bir HTML template‘i üzerinden örnek bir uygulama anlatmaya çalışacağım.

Örnek Uygulama: Profile.me

  1. Hazırlık
  2. Modellerin oluşturulması ve MongoDB Bağlantılarının yapılması
  3. Servislerin yazılması
  4. Serverside rendering ile sayfaların oluşturulması

1. Hazırlık

Yazı dizisinin ilk bölümünü tahmin edebileceğiniz gibi hazırlık adımına ayırıyorum. Bu bölümde yapacağımız uygulamayı yani Profile.me uygulamasını anlatacağım. Ardından projenode_js_full_hazirlikde kullanacağımız araçlardan ve kütüphanelerden bahsedeceğim. Son olarak ise projemizi ayağa kaldıracağız.

1.1 Proje: Profile.me

Eminim hemen hemen herkes about.me sayfasını duygmuştur. Duymayanlar için kısaca bahsedecek olursam, bu site size tüm sosyal ağlarınızı kartvizit gibi dağıtmanıza olanak sağlıyor. Kısa bir öz geçmiş sayfası gibi düşünebilirsiniz. Günlük kullanım için ideal. Bizim yapacağımız ise bunun biraz daha gelişmişi. Profesyonel ortamlar için, insanların becerilerini profil sayfalarında görüntüleyebileceği, portfolio oluşturabileceği ve paylaşabileceği bir uygulama olacak. Tahmin edeceğiniz gibi uygulama biraz kapsamlı duruyor. Kapsamı küçültmek adına veri girişi yapılacak sayfaları bu yazı dizisinin dışına bırakıyorum. Veritabanında verileri oluşturmak için gerekli ayarları yapacağız fakat sadece ilgili sayfaları oluşturmayacağız. En azından şimdilik …

1.2 Araçlar ve Kütüphaneler

Tüm sistem tahmin edeceğiniz üzere node.js üzerinde çalışacak. Bu sebepten az da olsa bir node.js bilginiz yoksa bu yazı dizisi size göre değil. Öncelikle kullanacağımız araçlara değinelim.

1.2.1 Araçlar

  • Tüm uygulama JetBrains’in WebStorm IDE’si üzerinden geliştirilecek. Arzu eden olursa SublimeText’te kullanabilir ama şimdiden söyliyim Debug yapmakta zorlanacaksınız. Ayrıca eğer node.js ile ilgili profesyonel olarak çalışmayı planlıyorsanız mutlaka WebStorm alın. Kendinize yapacağınız en karlı yatırımlardan olacaktır. Son olarak benden duymuş olmayın ama “ilgili” ortamlarda da WebStorm’u bulabilirsiniz.
  • Veritabanı olarak MongoDB kullanacağız. Node.js ile kullanılan ve en çok tercih edilenlerden. Ama unutmayın gayet tabi MySQL ya da PostgreSQL’de kullanabilirsiniz.
  • Arzu ederseniz mongodb için bir arayüz kullanabilirsiniz ama ben CLI’ı tercih ediyorum. Uygulamayıda bu arayüz üzerinden yapacağım.

1.2.1 Kütüphaneler

  • MongooseMongoDB kullanıpta mongoose kullanmamak ayıp olur. Mongoose mongodb için geliştirilmiş bir ORM/ODM aracı. Düşününce  sanki yaptığı çok bişey yok her iki ortamda JSON sonuçta ama yinede çok kullanışlı oluyor.
  • Express: Nodejs kullanıp da express kullanamak ayıp olur. REST servis yapımızı ve server side rendering işlemlerimizi express üzerinden geliştireceğiz.
  • Jade: Server side rendering için kullanacağımız motor yapısı. Bunun alternatifleri mevcut handlebars, ejs, haml ve musthache bunlardan bir kaçı. Eğer deminde dediğim gibi nodejs ile profesyonel anlamda ilgileniyorsanız, bu alternatifleride bir gözder geçirmelisiniz.
  • Bunun haricinde klasikleşmiş istemci tarafı javascript kütüphanelerini kullanacağız. Bootstrap (ne yazık ki versiyon 3’ü kullanamayacağım. Nedenini ilerleyen bölümlerde açıklayacağım.), Jquery bunlardan bir kaçı

Araçlarımızı ve kütüphanelerimizi tanıttığımıza göre projemizi oluşturmaya geçebiliriz.

1.3 Projenin Olusturulması

Pr0jemizi oluştururken WebStorm kullanacağımızdan bahsetmiştik. Bunun için eğer başka bir IDE ya da araç kullanıyorsanız projenizi orada kendinizin oluşturması gerekiyor. Bunun için Create New Project diyoruz ve açılan ekranı aşağıdaki şekilde dolduruyoruz.

webstorm-create-new-project

Proje adı olarak tahmin edeceğiniz üzere profile-me kullanıyoruz. Project type olarak ise Node.js Express App giriyoruz. Daha sonra OK seçeneğini seçtiğimizde aşağıdaki ekran bizi karşılıyor.

webstorm-nodejs-express-appBurada express versiyonumuzu ve kullanacağımız Template Engine i seçiyoruz. Burada arzu ederseniz başka bir template engine’de seçebiliyoruz. Ayrıca isterseniz yine Less ya da Stylus ile geliştirme yapabiliyorsunuz. Açılan bu panelde de OK seçeneğini seçtiğinizde projenizi yaratmış oluyorsunuz. Size arada Node.js ile ilgili kütüphaneleri indirmekle alakalı sorular gelebilir. Hepsini onaylayıp geçebilirsiniz.

Burdan sonra app.js dosyasını çalıştırırsanız projenizin başarıyla başladığını göreceksiniz. Burdan sonra http://localhost:3000 adresine gidecek olursanız aşağıdaki ekran çıktısını görmeniz gerekiyor.

first-express-app

Son

Böylelikle hazırlık bölümümüzün sonuna geldik. Burdan sonra Veritabanımızı ve modellerimizi oluşturacağız. Ardından Express ile servislerimizi yazacağız. Son olarakta kullanacağımız HTML template’ini indirip Jade yardımıyla sayfalarımızı oluşturacağız. Tüm uygulamamızı hazır bir HTML template‘ine dayandırdığımızdan diğer sayfaya geçmeden önce bir incelemenizi tavsiye ediyorum.

End of Line