Ö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 projede 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

• Mongoose: MongoDB 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.

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.

Burada 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.

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