express etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
express etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

27 Kasım 2013 Çarşamba

Devfest Istanbul'13 What The Node Sunumu

Hiç yorum yok:
Devfest Istanbul'13 "What The Node" sunum ve videosu. Node.js için yeni başlayanlara ve başlamak isteyenlere rehber niteliğinde giriş seviyesi bir sunumdur


Sunuma tam ekran ulaşabilmek için tıklayınız

14 Kasım 2013 Perşembe

Devfest Istanbul'13 Complete MVC on NodeJS Konferansı

Hiç yorum yok:
Devfest Istanbul'13 Complete MVC with NodeJS sunum ve videosu. Tüm gün süren bu etkinlik gerçekten çok güzeldi. Emeği geçen herkese tekrardan teşekkürler.


19 Eylül 2013 Perşembe

NodeJS & MongoDB - Controller - View İlişkisi

Hiç yorum yok:

Merhaba arkadaşlar. Bugün sizlere Controller View ilişkisini anlatmaya çalışacağım. Önceki dersleri biraz hatırlayalım. 

  • Projemizde gerekli olan modelleri yarattık.
  • Bu modelleri Controller içinde kullandık

16 Eylül 2013 Pazartesi

NodeJS & MongoDB Serisi

Hiç yorum yok:
Merhaba arkadaşlar. Bir süredir sitemizde NodeJS & MongoDB hakkında ders anlatmaya çalışıyoruz. Bu derslerin güncel listesini sırayla aşağıda belirtilmiştir. Umarım faydalı bir referans olur. Bu seriye yeni ders eklenirse bu liste de güncellenecektir.

  1. NodeJS & MongoDB - Kurulum ve Ayarlar
  2. NodeJS & MongoDB - Proje Yapısının Ayarlanması
  3. NodeJS & MongoDB - Kod Yazmaya Başlayalım!
  4. NodeJS & MongoDB - Modellerin Hazırlanması
  5. NodeJS & MongoDB - Controller İçinde Model Kullanımı
  6. NodeJS & MongoDB - Controller - View İlişkisi
Bu seride dersler anlatılırken aslında gerçek bir proje üzerinden gidiliyor. Projenin çalışır haline de buradan ulaşabilirsiniz.


NodeJS & MongoDB - Controller İçinde Model Kullanımı

Hiç yorum yok:

Hepinize selamlar... Önceki dersimizde projemiz için gerekli olan modelleri hazırlamıştık. Şimdi hazırladığımız modellerin projenin controller kısmında nasıl kullanacağımızı sizlere anlatmaya çalışacağım.

12 Eylül 2013 Perşembe

NodeJS & MongoDB - Modellerin Hazırlanması

Hiç yorum yok:


Merhaba arkadaşlar, NodeJS & MongoDB serisine devam ediyoruz. Bir önceki dersimizde hafiften kod yazmaya başlamıştık. Bu derste ise projenin içinde kullanılacak olan modellerin nasıl oluşturulup kodlanacağından bahsedeceğim.

25 Ağustos 2013 Pazar

NodeLab: çok dedikodulu etkinlik

Hiç yorum yok:
*fotoğraf çekimi için ev verimsiz anı bulup salonun en boş anını yakalamışım tebrik ettim kendimi :)

Sıcak bir cumartesi gününde yoğun bir ilgi ve katılım ile tamamladık etkinliğimizi. Katılan tüm misafirlerimize teşekkür ederiz. Etkinlikten yarım saat önce kimse gelmeyecek sanırım diyenleri şaşırtıp, salona dolup taştık.

Başka bir salonda devam etmek zorunda kaldığımız etkinlikte;

Öncelikle Node nedir, neden NodeJS gibi soruların üzerinde konuşuldu.
İki Farklı web uygulaması örneği üzerinde konuştuk.
İdeal proje yapısından, yaşanabilecek problemlerden bahsettik.
Bir sonraki etkinlik için notlar aldık.

Etkinlikler hakkında dönüşleriniz için hello@nodejstr.com ve hello@gdgistanbul.com adreslerinden
@gdgistanbul, @nodejstr hesaplarından bir de +GDG Istanbul ve NodeJS Türkiye üzerinden iletişime geçebilirsiniz


Örnek Kodlar

https://github.com/nodejstr/HangiTakim
https://github.com/nodejstr/GDGIstOcak13NodeJS
https://github.com/IkiMuhendis/GDGIstOcak13Android

Bir sonraki etkinliğimizde görüşmek üzere

12 Ağustos 2013 Pazartesi

NodeLab - NodeJS ile kod geliştirme

Hiç yorum yok:


Temmuz ayındaki etkinliğin devamı niteliğinde,


Yarım kalan konulara devam edip,
Node nedir diyenler için kısa kısa özetlerle 
Nodejs ile uçtan uca bir web sitesi geliştirme,
Daha fazla örnek kod, biraz daha fazla sohbet...

-katılım sayısı yeterli koltuk ve priz ile sınırlı olduğu için, kayıttan sonra katılamayacak arkadaşların dönüş yapmaları rica olunur.



10 Ağustos 2013 Cumartesi

Express Middleware

Hiç yorum yok:

Express ile request'ler üzerinde aspect oriented(AOP) bir yapı geliştirmek çok kolay.Express tarafından tanımlanmış Middleware'ler kullanılabileceği gibi dilersek kendi işlemlerimiz için özelleşmiş middleware'lerde yazabiliriz.

Express tarafında tanımlı middleware'lerin tam listesi ve kullanımı için Express Middleware linkini takip edebilirsiniz.

Express tarafında tanımlanmış middleware'ler genel kullanıma yönelik ihtiyaçları karşılasa da bazen özelleştirilmiş middleware'lere ihtiyaç duyabiliyoruz. Özelleştirilmiş middleware'ler yazmakta oldukça basit.
Yapıyı anlamak adına basit bir örnekle başlayalım.

Yükleniyor...


yukarıda yer alan middleware her request için "Hello!" cevabı dönmektedir.

Daha detaylı, kompleks metodlara ihtiyacımız varsa ne yapacağız. Eğer middleware'in tüm requestlerde çalışmasını istiyorsak yazdığımız middleware'için yukarıda olduğu gibi "app.use" metodunu kullanmamız yeterli.
 Aşağıda yer alan örneğimiz gelen her request için request'den gelen ip'nin yasaklı listesinde olup olmadığını kontrol eden bir middleware.

Yükleniyor...



Tanımladığımız middleware'i tıpkı yukarı da olduğu gibi kullanıyoruz.

Yükleniyor...


Peki tüm requestlerde uygulanmasını istemediğimiz bir yapı gerekirse ne yapmalıyız. Örneğin uygulamamız üzerindeki bazı linkler user authentication gerektirirken bazılarının gerektirmediği bir durumu ele alalım. Bu durumda authentication gerektiren url'lere gelen requestler kontrol edilip giriş yapan kullanıcının yetkisi varsa veya girişi yapılmışsa görüntülenmeli aksi takdirde sayfa yönlendirmesi yaparak kullanıcıdan giriş yapmasını istemelidir.

Bu durumda her bir request içinde tekrar tekrar kontrol yapmaktansa express için bir middleware yazıp ilgili requestlerde çalışmasını sağlayabiliriz.

İlgili request'in routingi tanımlarken çalışması gereken middleware metodlarıda parametre olarak geçmemiz yeterli olacaktır.Yukarıda anlatılan senaryo için hazırladığımız authorization middleware'i aşağıda görülmektedir.

Yükleniyor...


Peki tanımladığımız bu middleware'i nasıl kullanacağız.Tanımladığımız authorization dosyasının require edildiğinden yada parametre olarak geçildiğinden emin olduktan sonra;

Yükleniyor...


Tanımladığımız her url için ihtiyacımıza yönelik metodları kullanarak gerekli kontrollerin yapılmasını sağlayabiliriz.

Middleware'ler özellikle büyük projelerde hayat kurtaran, kod kalitesini yükselten, tekrar kullanılabilir yapıları destekleyen verimli bir çözüm yöntemi sunuyor.

14 Temmuz 2013 Pazar

NodeJS & MongoDB - Proje Yapısının Ayarlanması

Hiç yorum yok:
Merhaba arkadaşlar, NodeJS & MongoDB derslerinin ikincisine hemen başlayalım. Bir önceki dersi şuradan inceleyebilir ya da bu dersi okumaya devam edebilirsiniz. Bu yazıda bir önceki derste kurulum ve ayarları yapılmış olan projemize biraz daha somutluk kazandıracağız.

Önceki dersimizde package.json adında bir dosya oluşturup içinde express.js modülünün bağımlılık ayarlarını yazmıştık ve sonra npm install komutu ile express.js modülünü indirmiştik. Bu derste proje için gerekli olan dosya yapısını oluşturarak derse devam edeceğiz.

Projenin dosya yapısı için daha önce yazdığım şu makaleye göz atabilirsiniz. 

Projenin dosya ve klasörlerini adım adım inceleyecek olursak;


  • app.js : Projemizin ana dosyası. Ana dosyadan kastım, bütün modüllerin, modellerin, controller ların yüklenip konfigüre edildiği dosya.
  • package.json : Paket bağımlılıklarını belirten dosya.
  • public : Bu klasörde prokemizin statik dosyalarını tutacağız. Bu javascript, css, resim, ... olabilir.
  • controller : Projemizin controller larının tutulduğu klasör
  • model : Prokedeki her bir objenin modellenip saklandığı klasör. Biz bu derste örnek bir blog uygulaması yapacağız ve örnek olarak User modeli verilebilir.
  • views : Projedeki view dosyalarının tutulduğu klasör. Biz Jade ile yazdığımız dosyaları burada tutacağız.
  • lib : Burada ise, projede sıkça kullandığımız fonksiyonlara yer vereceğiz. Bu  klasördeki dosyaları helper gibi düşünebilirsiniz .
  • config : Projemizdeki ayarların tutulduğu yer. 
Dosya yapısının son aşağıdaki gibi olacaktır;




















Şimdi gelelim bu klasördeki dosyaların işlevlerine;


  • config
    • development.json : Burdaki dosya adını siz kendiniz belirleyebilirsiniz. Ama bu ismin sistemdeki ortam değişkeniyle uyuştuğuna emin olun.
  • contoller
    • SiteController.js : Projedeki temel sayfalar için tanımlanan fonksiyonların bulunduğu klasördür. Mesela; anasayfa, hakkında, iletişim gibi temel sayfaların fonksiyonları burada yer alır
    • BlogController.js : Blog ile ilgili işlem fonksiyonlarının tutulduğu controller burasıdır. Mesela; yeni blog yarat, blog görüntüle, ... gibi
    • UserController.js : Kullanıcı işlemlerinin bulunduğu controller. Mesela; kullanıcı profili görüntüle, login, logout, register, gibi fonksiyonlar örnek olabilir
  • lib
    • utils.js : Projede lazım olan helper fonksiyonları içerir. Örnek; database bağlantısı kurma, ...
    • validator.js : Model kısmında belirli validasyonlar için kullanılan fonksiyonlarını burda tanumlayabiliriz. Mesela; kullanıcı adı en az 6, en fazla 8 olabilir gibi işlemler burada tanımlanabilir.
  • models
    • User.js : Sistemde kayıtlı kullanıcıların bilgilerinin modellendiği model dosyadır ve kullanıcının temel bilgilerinin başlıklarını tutar. username, password, gibi.
    • Blog.js : Blog objesinin model bilgisini tutan dosyadır. blog başlığı, blog detayı, yaratılış tarihi gibi bilgiler bu model de belirlenir.
  • public
    • css : Projenin css dosyaları bu klasördedir
    • js : Projede kullanılan javascript dosyaları burada yer alır
    • img : Projede kullanılan resimler burada yer alır.
  • views
    • layout.jade : Projenin temel şablonu bu view dosyasında yer alır.
    • header.jade : Sayfanın başlık kısmının jade kodlarını içerir.
    • footer.jade : Sayfa altındaki copyright, link gibi objelerin yer verildiği sayfadır.
    • blog-detail.jade : Blog detay sayfasını için yazdığımız view burada yer alır.
    • blog-list.jade : Bütün blogları listelemek için jade kodlarının yer aldığı dosyadır
    • blog-new.jade : Adından da anlaşıldığı üzere yeni blog yaratmak için kullanılan view.
Proje hiyerarşik klasör yapısnı ve içindeki dosyalrın ne amaçla kullanacağımızı anlatmaya çalıştım umarım anlaşılır olmuştur.

Bir sonraki dersimizde, proje için gerekli olan ayar dosyalarını hazırlayıp modelleri oluşturacağız. Sonraki derste görüşmek üzere...

8 Temmuz 2013 Pazartesi

Jade Nedir?

Hiç yorum yok:

Jade NodeJs tarafında sıkça kullanılan, performansıyla öne çıkan bir template engine. Jade'i diğer template enginelerden ayıran en büyük özelliği performansı. Bunun yanında farklı, alışması zor ama kullanması çok pratik syntax'ı ile de dikkat çekiyor.

Kuruluım

npm install jade
komutuyla ilgili kütüphanenin kurulumu sağlanmaktadır.

Express ile birlikte kullanırken
app.set('view engine', 'jade')
yapılması jade dosyalarının işlenmesi için yeterlidir.

Jade bilenen tag açıp kapatma yapısını ortadan kaldırarak boşluk ve girintilerle okunması kolay bir şekilde yazım olanağı sağlıyor. Aşağıda jade-lang.com 'in ana sayfasında da yer alan kullanım örneğini görüyoruz.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      if (foo) {
        bar()
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Jade is a terse and simple
         templating language with a
         strong focus on performance
         and powerful features.</p>
    </div>
  </body>
</html>
doctype 5
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript')
      if (foo) {
         bar()
      }
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.



Yukarıda standart html ve jade ile yazılan aynı kod blogunu görülmektedir.
Jade ile tag açıp kapatma derdinden kurtuluyoruz. Bu sayede açık kalan taglarden kaynaklı sorunlardan da kurtulmuş oluyoruz. Indentation(girinti) ile hangi elemanın hangi eleman altında yer alacağını belirliyoruz.

Bunun yanı sıra if else yapısı gibi conditional operasyonlar ve loopları jade ile çalıştırabilirsiniz.
"#" ilgili elemana id vermek için kullanılırken "." ile ilgili html elamanına eklenecek css classlarını arka arkaya ekleyebiliyoruz. Atamasını yapmamız gereken diğer attributeler içinse yukarıdaki örnekte görüldüğü gibi 
(attrName="value",attrName2="value2")
şeklinde ilgili değerlerin atamasını yapabiliyoruz.

Express ile kullanımına bakacak olursak

exports.new = function(req, res){
  res.render('posts/yeni', {
    baslik: 'Yeni Makale',
    makale: new Makale({})
  })
}

Yukarıda yer alan kod parçacığı posts klasörü altında yer alan 'yeni.jade' dosyasını gönderdiğimiz baslik ve makale parametreleriyle işleyerek oluşturduğu html'i render edilmek üzere göndermektedir.

Id Kullanımı

div#container

<div id="container"></div> olarak görüntülenecektir.

Css Class Kullanımı

div#foo.bar.baz
<div id="foo" class="bar baz"></div> olarak görüntülenecektir.

#foo
.bar

<div id="foo"></div><div class="bar"></div>

İçerik Görüntüleme
  
p merhaba!

<p>merhaba!</p>.

Parametre Kullanımı 
Jade' parametre olarak gönderdiğimiz değerleri template içerisinde #{} yapısıyla kullanıyoruz.

Örneğin gönderdiğimiz parametreler :{baslik:'Ana Sayfa',girisMesaji:'Hoşgeldiniz'} olsun.
#{baslik} #{girisMesaji} olarak jade şablonları içerisinde kullanabiliriz.Peki #{} yapısnı text olarak kullanmamız gerekiyorsa yani yazı içerisinde "#{format}" bu şekilde görüntülemek istiyorsak ne yapmalıyız. Escape mekanizması burada yardımımıza yetişiyor.

p \#{format}
<p>#{format}</p>

Bir sonraki yazıda Jade'in daha detaylı kullanım örneklerini, jade ile yapılabilecek tekrar kullanılabilir bileşenleri inceleyeceğiz.

29 Haziran 2013 Cumartesi

NodeJS & MongoDB - Kurulum ve Ayarlar

Hiç yorum yok:

Son zamanlarda en çok konuşulan iki teknoloji olan MongoDB ve NodeJS ile ilgili bilgi vermek amacıyla hazırlamış olduğum derslerin ilkine hoş geldiniz :-) Bu dersi daha iyi anlaşılabilmesi için  örnek bir uygulama üzerinden anlatmaya çalışacağım. Ben projeyi ubuntu da hazırladım ve anlatımı da ubuntu üzerinden yapacağım.

2 Haziran 2013 Pazar

NodeJS ile Web Projelerinde İdeal Proje Yapısı

Hiç yorum yok:

NodeJS ile web projesi yaparken en çok araştırılan noktalardan bir tanesi de ideal proje yapısının nasıl olacağıdır. Mesela, internette Express Framework ile yapılmış bir sürü web projesi var ve bununla birlikte onlarca proje yapısı mevcuttur. Peki en ideal olanı hangisidir? Bu yazıda 1 hafta süren araştırmayla ortaya çıkan ideal proje yapısını anlatmaya çalışacağım. 

3 Nisan 2013 Çarşamba

NodeJS ile Authenticate Sunumu

Hiç yorum yok:


NodeJS ile Authenticate konularına değindik.
Kod örneklerine aşağıdaki link ile ulaşabilirsiniz.

Genel olarak bu sunumda şu konulara değindik

  • NodeJS ile Auth
  • PassportJS
  • Express ile PassportJS entegrasyonu
  • Twitter StreamAPI
  • twitter-public-stream
  • SocketIO


NodeJSTR-Passport-Express-SocketIO 

2 Nisan 2013 Salı

NodeJS, PassportJS ile Auth

Hiç yorum yok:
NodeJS Türkiye Mart ayı etkinliğini sizlerin desteği ile gerçekleştirdi. Tüm katılımcılara teşekkür ediyoruz.

Etkinlikte Dart, NodeJS, Neo4J, Push Notifications, Java EE ve Design Patterns konularıyla ilgili biribirinden güzel sunumlar gerçekleşti.





Salim Kayabaşı, NodeJs, Passport JS, Express JS ile ilgili giriş sunumunun ardından mini lab ile örnek geliştirmeler yaptı.









Hasan Keklik Neo4J ile ilgili temel bilgilerden bahsetti.








Murat Yener, Java Revisits Design Patterns sunumuyla ilgi topladı.









Ali Parmaksız Google Dart ile ilgili bilgiler verdi.








Tüm bu paylaşım dolu güzel gün sonrasında Mart ayı etkinliği de tamamlandı.
Çekilen tüm fotoğrafları bu Google+ etkinlik adresinden görebilirsiniz.
Tüm sunumlara ve kaynaklara buradan ulaşabilirsiniz.

Kod örnekleri için aşağıdaki adresleri ziyaret edebilirsiniz.
http://github.com/NodeJSTR

21 Ağustos 2012 Salı

Node.js, Socket.IO, Express.js ile HTML5 Oyun Geliştirme - Bölüm 1

1 yorum:
Herkese Merhaba,

Node.js, Socket.IO, Express.js ile HTML5 Oyun Geliştirme, NodeJS Türkiye sitesindeki ilk makalem olacaktır. Bu makalenin temelini jstanbul 2012'de yapmış olduğum sunum oluşturmaktadır. Sunumun tamamını ve kodlarını aşağıdaki linklerde bulabilirsiniz:

Sunum: http://slidesha.re/Nezd9N
Kodlar: http://bit.ly/NcxzGj


Makalemizi 3 parça olarak tamamlamayı planlamaktayım. Makalelerin bütününde anlatılacak konu olarak aşağıdaki sıralamada olacaktır:



  1. Bingo Oyunu (Bölüm 1)
  2. Bingo Oyununun Tasarımı (Bölüm 1)
  3. Bingo Oyununun Yazılım Mimarisi (Bölüm 1)
  4. Node.js ve Neden Node.js? (Bölüm 2)
  5. Express.js ve Neden Express.js? (Bölüm 2)
  6. Socket.IO ve Neden Socket.IO? (Bölüm 2)
  7. HTML5 Canvas (Bölüm 3)
  8. Oyunun İmplementasyonu (Bölüm 3)
  9. Sonuç (Bölüm 3)
Bölüm 1:

Oyunumuzun yapılışı için öncelikle oyun tasarımıyla analizi çıkarılacak, ardından mimarisi çizilecek, daha sonra da kullanılacak teknolojiler teker teker anlatılıp neden multiplayer bir oyun için gerekli olduğundan bahsedilecektir. İlk olarak, bingo oyununu tanıyalım ve oyun tasarımından bahsedelim.


Bingo Oyunu:

Bingo oyunu aslında bizim her sene yılbaşında oynadığımız Tombola oyunundan hiçbir farkı yoktur. Ancak Bingo oyununun belirli çeşitleri bulunmakta ve bizim bildiğimiz Tombola oyunu, Kara Avrupa'sında aynı stildedir. 

Resim 1: Tombola Oyunu


Bingo oyununun oynanışını adım adım belirtirsek:
  1. Her oyuncuya Bingo kartları dağıtılır.
  2. Daha sonra içi kapalı Bingo torbasından sayılar rastgele bir şekilde seçilir. 
  3. Seçilen sayının kartlarda bulunması sonucu, o kart üzerindeki o sayı kapatılır.
  4. Kartındaki bütün sayıları ilk kapatan oyuncu, oyunu kazanır.
Oyunun temel oynanışı yukarıdaki gibidir. Ayrıca, bazı oyun kuralları da mevcuttur:
  • Bingo kartlarının her bir sütunu 10'un katlarındaki sayıları belirtecek şekilde ayarlanır.
  • Çekilen rastgale sayılar 0 - 90 arasında olmalıdır.
Şimdi az-çok oyunumuzun nasıl oynandığı ve hangi kurallar dahilinde oynanacağı belirtmiş olduk. Artık, oyunumuzu bilgisayar ortamında nasıl tasarlayacağımız konusunda temel bilgilere sahip olduk ve şimdi oyuncuların nasıl oyuna giriş yapacağını belirlemek için bazı yapılardan bahsedeceğim:


Resim 2: Oyuncu Alanları


Salon: Bütün oyuna bağlanan oyuncuların, ilk olarak bağlanacağı alandır.
Oda: Oyuncuların oyun oynamak için salondan giriş yapacağı alanlardır. Odaların oyuncu limiti gibi bir kısıtı olmalıdır. Böylece, oda dolu olduğu zaman oyunun başlaması için temel kural tamamlanmış olacaktır.

Yani temel olarak oyuncumuz öncelikle salona giriş yapacak, ardından boş olan odalardan herhangi birine girdikten sonra odanın dolmasını bekleyecek, oda dolduğu zaman oyun başlayacaktır. Oyunun sonunda oyuncu isterse oda da kalıp diğer oyunun başlamasını bekleyecek veya salona geri dönüp herhangi bir odaya giriş yapabilecektir.


Resim 3: Oyuncu Durumu
Bingo Oyununun Yazılım Mimarisi:

Artık, oyunumuzun kurallarını belirledikten sonra, geriye kalan oyunumuzun yazılım mimarisinin nasıl olacağını belirlemek kaldı. Oyun mimarisi, multiplayer oyunlar için benzerlikler göstermektedir. Aşağıdaki resimde bizim Bingo oyunumuzda kullanacağımız mimariyi göstermektedir.


Resim 4: Oyun Yazılım Mimarisi

Öncelikle yazılım mimarimiz, iki parçaya ayrılmış durumdadır. Birincisi, Server tarafı yani bütün kullanıcıların bağlanacağı taraf, diğeri ise Client tarafı, her bir kullanıcıyı(Oyuncuyu) temsil eden birimdir. Ayrıca her ikisinin arasında mesaj iletimini gerçekleştiren bir yapıda bulunmaktadır. Açıklamalara, server tarafıyla başlamak istiyorum:


  • Server Tarafı:  Bütün kullanıcıları kontrol eden taraftır. Bu tarafta veri tabanı(Kalıcı ve Geçici veritabanları) ile ilişkiler, modeller, mesaj kuyruk yapıları ve ana kontrol yapısından(Front Controller) oluşmaktadır Bu yapımız tamamen Node.js tabanını kullanmaktadır.
    • Front Controller: Kullanıcıya iletilen bütün mesajların kontrollerini ve karar mekanizmasını, ayrıca modeller aracılığıyla veritabanı ile haberleşmeleri kontrol eden mekanizmadır. 
    • Models: Normal bir uygulamadaki gibi, Business Logic diye anlattığımız yapıların olduğu, Player, Room, Saloon gibi objelerin olduğu ve bunların birbirleriyle etkileşimlerini ve veritabanları ile kontrolleri sağlayan bölümdür.
    • MySQL(Persistent Storage): Modeller içerisinde oluşan verilerin kalıcı bir şekilde tutulmasını sağlayan, hepimizin web uygulamarda oldukça fazla kullandığımız veritabanıdır. Örnek olarak, oyuncunun geçmiş oyunlarda kazandığı puanlar, kişilik bilgileri gibi kalıcı olarak tutulmasını istediğimiz bilgileri MySQL tarafında tutmamız gerekmektedir.
    • Redis (Temporary Storage): Modeller içerisinde oluşan ancak geçici bilgileri tutacağımız  ve tamamen memory tabanlı, hızlı ve ölçeklenebilirlik konusunda, bize ve MySQL'e yardımcı olacak bilgileri Redis üzerinde saklamayı planlıyoruz. Mesela, oyuncu oyuna girdiği zaman, oyuncu ile ilgili bilgileri ve o anki oyundaki bilgileri Redis üzerinde tuttuğumuz zaman, verilere ulaşmamız en hızlı ve ölçeklenebilir bir şekilde gerçekleşecektir.
    • Message Queue: Mesaj kuyruğu yapısı, Server tarafından Client tarafına iletilecek ve geri gelecek bütün mesajların ölçeklenebilırliği konusunda yardımcı olacaktır. Ayrıca, bu mesajların, mesaj kuyruğunda takip edilmesi kolaylaşacak ve implementasyonunda oluşacak hataları mimimuma indirmeye yardımcı olacaktır.
  • Client Tarafı: Her bir kullanıcıyı temsil eden taraftır. Bu tarafta oyun arayüzünün yapıldığı, tamamen kullanıcının etkileşimine açık taraftır.
    • HTML 5 Rendering: Kullanıcıyı etkileyici bir arayüzle, animasyonlarla karşılamak ve bütün gelişmiş Browser'larda gösterebilmek için kullanabileceğimiz en iyi yapı, şu anda 2 boyutlu grafikler için HTML 5 Canvas ve 3 boyutlu yapılarda HTML 5 WebGL'dir. 
  • Socket.IO Tarafı: Server ve Client arasında mesaj iletimini gerçekleştiren protokole sahip ve elimizdeki bütün Browser'lara iletimi gerçekleştiren API'ye sahip Node.JS'te bulunan en iyi kütüphane Socket.IO'dur. Socket.IO sayesinde IE5'e bile anlık olarak(real-time communication) mesajlaşmaları gerçekleştirmekteyiz. Daha detaylı bilgiyi bir sonraki bölümde anlatmayı planlıyorum. 
Artık, oyun mimarimizi de oluşturduktan sonra kullanacağımız teknolojileri, teker teker anlatmaya başlayabiliriz. Bu teknolojiler sırasıyla Node.JS, Express.JS, Socket.IO ve HTML5 Canvas olacaktır. Bir sonraki bölumde teknolojileri anlatmaya başlayacağız. 

Herkese Iyi Bayramlar,




11 Ağustos 2012 Cumartesi

NodeJS Express Framework MVC yapısı

Hiç yorum yok:

Daha önceki yazımızda NodeJS ve express framework'unu kullanarak uygulama geliştirmeye giriş yapmıştık.Bu yazımızda ise edindiğimiz tecrübe ile birlikte tam bir MVC yapısı kullanarak NodeJS ile nasıl uygulama geliştireceğimizi inceleyeceğiz.

Anlatımı tam olarak takip edebilmeniz için WebMatrix kullanmanızı tavsiye etmekle birlikte, istediğiniz editörü kullanmakta özgürsünüz.

Daha önce yaptığımız gibi WebMatrix üzerinden yeni bir şablon uygulama ile boş bir NodeJS uygulaması oluşturuyoruz.Boş oluşturmamızın sebebi Express framework'unu daha sonra kurarak en güncel versiyon ile geliştirme yapmak.

Daha önceki yazımızda belirttiğimiz şekilde command prompt'dan yeni oluşturduğumuz proje dizinine gelerek;

npm install express komutunu çalıştırıyoruz.

Yazımıza devam etmeden önce Express framework'ünün güncellenmesi ile birlikte daha önce yazdığımız kodlar yeni versiyonda hata verecektir. Daha önce

express.createServer();

şeklinde kullandığımız yapı express'in artık http.Server'dan inherit ederek geliştirilmediğinden dolayı hata verecektir. Bu nedenle yeni kullanım şekli olan

var express = require('express'),
    app = express();
app.listen(3000);

şeklinde değiştirmemiz gerekmektedir.

Projemize sağa tıklayıp 2 yeni klasör oluşturuyoruz. model ve view isimlerini verdiğimiz bu klasörler isminden de anlaşılacağı üzere model sınıflarımızı ve view'lerimizi saklayacağımız klasörler.

Model klasörüne sağa tıklayarak new File deyip yeni bir javascript dosyası oluşturalım. "urun.js" adını verdiğimiz dosyamıza aşağıda yer alan kod blogunu ekleyerek ilk modelimizi oluşturalım.

function urun(data, id) {
    this.id = id;
    this.adi = String(data.adi) || "Tanımlanmamış";
    this.kategoriler = (data.kategoriler || []).map(function(c, index) {
        return { id: Number(c.id) || index, kategoriAdi: String(c.kategoriAdi) };
    });
}
module.exports = urun;



module.exports = urun;
satırı modelimizin proje genelinde kullanabilir, referans verilebilir hale getirmektedir.


Ürün modelimiz içerisinde id, adi , ve kategoriler alanları bulunmaktadır. Kategori ise kendi içerisinde id, kategoriAdi attribute'lerine sahiptir.
Şimdi uygulamamuz için bir request tanımlayıp yeni oluşturduğumuz modeli kullanarak bir cevap dönelim.

app.get('/urun', function(req, res) {
    var urun1 = new urun({ adi: 'Portakal', kategoriler: [{ kategoriAdi: 'Meyve'}] });
    res.send(urun1);
});

Response olarak döndürdüğümüz objenin görüntülendiğini göreceğiz.
{
    "adi":"Portakal",
    "kategoriler": [
      {
        "id":0,
        "kategoriAdi": 'Meyve'
      }
    ]
}

Şimdi Jade template engine'inin kullanarak oluşturduğumuz modeli görüntüleyeceğimiz bir sayfa geliştirmesi yapalım.

Bu işlem için ilk olarak projemiz içerisine Jade kurulumu yapmamız gerekiyor.

Command prompt ile proje dizinimize ulaştıktan sonra (C:\Users\<kullaniciAdi>\Documents\My Web Sites\Express MVC Sample)
npm install jade komutunu çalıştırıyoruz. Jade kurulumu gerçekleşecektir.

Daha sonra önceden oluşturmuş olduğumuz view klasörüne urun.jade dosyasını ekleyelim.

Açılan dosya içerisine görüntülemek istediğimiz html'i Jade yapısına uygun olarak yazalım

urun.jade


h1 
 p adi: #{data.adi}
 p Kategoriler
 ul  
 - each kategori in data.kategoriler
   li=kategori.kategoriAdi

Her ne kadar Jade ile ilgili detaylı bir konu yazacak olsak da Jade'den kısaca söz edelim.

Jade node için geliştirilmiş yüksek performans sağlayan bir template engine.

Oluşturmuş olduğumuz urun.jade dosyası içerisinde göndereceğimiz ürün modelinin adını ve kategorilerini listeleyeceğiz. "data.adi" tahmin edebileceğiniz gibi ürünün adı, Kategoriler başlığı altında yer alan liste ise kategoriler listesinde yer alan her bir kategori için kategori adını listleyecek. Bu işlemin yapılması için

server.js dosyası içerisine ilgili get metodunu ekleyelim.



app.get('/urun', function(req, res) {
    var urun1 = new urun({ adi: 'Portakal', kategoriler: [{ kategoriAdi: 'Meyve'},{ kategoriAdi: 'Kış Meyvesi'}] });
    //res.send(urun1);
    res.render('index', {data :urun1});
});


Gördüğünüz gibi server'a yapılan request bu method tarafından karşılanarak "urun1" değişkenine ürünümüz tanımlanacak.
"res.render" methoduna hangi jade dosyasının render edileceğini ve parametre verimizi gönderiyoruz.
"data" template içerisinde veriye erişim için kullanacağımız değişken adı. 
Template içerisinde #{} ifadesi içerisinde gönderdiğimiz data değişkenine erişim yapabilirz.
"- each kategori in data.kategoriler" ifadesi data değişkeni içerisinde yer alan her bir kategori için html list item oluşturacak ve kategoriAdi alanının yazacak.
Çalıştırdığımızda karşılaşmayı beklediğimiz sonuç aşağıdaki gibi olacaktır.



GitHub:

jade@0.27.2 node_modules\jade
├── commander@0.6.1
└── mkdirp@0.3.0

express@3.0.0rc2 node_modules\express
├── methods@0.0.1
├── cookie@0.0.4
├── crc@0.2.0
├── fresh@0.1.0
├── range-parser@0.0.4
├── commander@0.6.1
├── debug@0.7.0
├── mkdirp@0.3.3
├── send@0.0.3 (mime@1.2.6)
└── connect@2.4.2 (pause@0.0.1, bytes@0.1.0, qs@0.4.2,formidable@1.0.11)



7 Ağustos 2012 Salı

Socket.io Nedir?

7 yorum:

Socket.io'nun amacı, gerçek zamanlı olarak hemen hemen her tarayıcı ile (mobil cihazlar dahil) farklı iletişim protokollerine rağmen iletişim kurabilmelerini sağlamak.

Sunucu ve client tarafında anlık iletişimi sağlamak ve bunun için hemen hemen her tarayıcı ile ve çok farklı protokollerle çalışmayı hedeflemiş olan bu yapıyı beraber inceleyelim.

WebMatrix kullanarak boş bir NodeJS şablonu açtıktan sonra, komut satırı ile ilgili klasöre gelelim.

npm install express socket.io

Gerekli olan kurulumlar tamamlandık böylece. Express ile ilgili ayarları, daha önceki konularda bahsettiğimiz için geçiyorum.

var socket = require('socket.io');
var io = socket.listen(8888);

io.sockets.on('connection', function(socket) {
    socket.emit('news', { hello: 'world' });
    socket.on('my other event', function(data) {
        console.log(data);
    });
});

Tanımlanan Socket.IO ile 8888 portu üstünden kurulum yapılıyor. Sunucu tarafında bu kodlar ile başlayalım. İncelemek gerekirse, 'connection' adında bir event bekleniyor. Bu event ile 'news' adında başka bir event ile 
{ hello: 'world' } JSON objesi gönderiliyor ve sonrasında 'my other event' adında başka bir event bekleniyor. Bu event ile gelen veriyi de ekranda gösterelim istedik.

Client tarafında Socket.IO kullanabilmek için, tabiki de sunucu ile aynı porttan iletişime geçmemiz gerekiyor. İnceleme için index.html dosyası içerisinde client kodlarımız bakalım.

HTML sayfamız içerisinde head tag'ı arasında

<script src="http://localhost:8888/socket.io/socket.io.js"></script>

kodunu eklememiz gerekiyor. Body bölümünde ise gereken diğer kodları ekleyip bunları açıklayalım.
<script>
    var socket = io.connect('http://localhost:8888');
    socket.on('news', function(data) {
        console.log(data);
        if(document.all){
            document.getElementById('income-data').innerText =JSON.stringify(data);
        } else{
            document.getElementById('income-data').textContent = JSON.stringify(data);
        }
        socket.emit('my other event', { my: 'data' });
    });
</script>

Önce hangi porttan bağlandığımızı belirtiyoruz. Her client 'connection' adındaki event'i ilk bağlantı kurulduğunda göndermektedir. Kalp atışına başladıktan sonra, 'news' adındaki event için bekliyor. Gelen veriyi, 'income-data' içerisine yazıp 'my other event' adındaki event'i gönderiyor.

Süreci özetleyip toparlamak gerekirse şöyledir. Sunucu tarafındaki kodlarımız, herhangi bir client isteği gelince ('connection') onlara { hello: 'world' } diyerek selam verecektir ve onların başka bir event ('my other event') göndermesini bekleyecektir.

Client tarafında ise, 'news' diyerek gelen veriyi alıp karşılık olarak ('my other event') gönderilecektir.



Komut satırı ile çalıştırdığımızdaki görüntüsü yukarıdaki gibidir. WebMatrix ile komut satırındaki gibi kayıtlara bakabiliyoruz.



Sunucu ve client için ayrı ayrı gelen giden tüm dataları detaylıca görebiliyoruz. Örnek kodun tamamını ve sürüm bilgilerini yazının sonunda bulabilirsiniz.

Kısa anlatımdan sonra Socket.IO hakkında biraz daha derin bilgilere geçebiliriz.
// io.listen(<port>) kodu otomatik olarak http server ayağa kaldırmaktadır.
var io = require('socket.io').listen(80);
// sunucumuzu 80 portu için ayarlıyoruz
io.sockets.on('connection', function(socket) {
    //'connection' bağlantının kurulmasını bekler.
    io.sockets.emit('this', { will: 'be received by everyone' });
    //gelen bağlantıya cevap olarak io.sockets.emit şeklinde cevap verirsek
    //io üzerindeki herkese cevap göndermiş oluruz.
    socket.on('message', function(from, msg) {
        //kaynağına göre özel mesaj gönderilmişse
        console.log('I received a private message by ', from, ' saying ', msg);
    });
 
    socket.on('disconnect', function() {
        //kullanıcı tarafında bağlantı koptuğu anda
        io.sockets.emit('user disconnected');
    });
});

Socket.IO üzerinde bazı ön tanımlı eventler vardır. Bunlar 'connection''private message', 'disconnect' şeklindedir.
Sırasıyla bağlantı kurulduğunda, mesaj gönderildiğinde ve bağlantı kesildiğinde gönderilmek üzere kurgulanmış eventlerdir.


// io.listen(<port>) kodu otomatik olarak http server ayağa kaldırmaktadır.
var io = require('socket.io').listen(80);
io.sockets.on('connection', function(socket) {
    socket.on('set nickname', function(name) {
        socket.set('nickname', name, function() {
            //set methodu ile session olarak kullanıcı ile server
            //arasında veri tutabiliriz.
            socket.emit('ready');
        });
    });
 
    socket.on('msg', function() {
        socket.get('nickname', function(err, name) {
            //bu veriyi get ile çekebiliriz.
            console.log('Chat message by ', name);
        });
    });
});

Peki bazı verileri kaydetmemiz gerekirse, çok önemli olmayan -database kaydı gerektirmeyen- verilerimizi oturum bazlı olarak kaydedebiliriz.

Bağlantı kesildiğinde bu veriler otomatik olarak silinmektedir.
var chat = io
  .of('/chat')
  .on('connection', function(socket) {
      //sadece '/chat' url'i altında çalışacaktır
      socket.emit('a message', {
          that: 'only'
      , '/chat': 'will get'
      });
      chat.emit('a message', {
          everyone: 'in'
      , '/chat': 'will get'
      });
  });
 
var news = io
  .of('/news')
  .on('connection', function(socket) {
      //sadece '/news' url'i altında çalışacaktır
      socket.emit('item', { news: 'item' });
  });

Url bazlı filtrelemeler yapabilmek için bu şekilde tanımlamalar yapabiliyoruz.
//SERVER
io.sockets.on('connection', function(socket) {
    //bağlantı kurulduğunda
    socket.on('ferret', function(name, fn) {
        //ferret event'ini dinleyecek
        //gelen parametreyi alıp fn fonksiyonu ile donecektir.
        fn('woot');
        // data olarak 'woot' gönderilecektir
    });
});
//SERVER

<!-- CLIENT -->
<script>
        var socket = io.connect(); 
    // ilgili bağlantıları otomatik bulmak için parametre girmeyin
        socket.on('connect', function () { 
    // 'connect' için doğru bir kullanım değildir. örnek içindir.
          socket.emit('ferret', 'tobi', function (data) {
            console.log(data); // woot datası gelecektir.
          });
        });
</script>
<!-- CLIENT -->

Bazı durumlarda client tarafında veriyi gönderdikten sonra dönen sonuca da ihtiyacımız vardır. Bunun en kolay yolu, .send ya da .emit methodlarına fazladan bir parametre ile bir fonksiyon göndermektir.

GitHub
NodeJS 0.8.4
express@3.0.0rc2 node_modules\express
├── methods@0.0.1
├── range-parser@0.0.4
├── fresh@0.1.0
├── cookie@0.0.4
├── commander@0.6.1
├── debug@0.7.0
├── mkdirp@0.3.3
├── crc@0.2.0
├── send@0.0.3 (mime@1.2.6)
└── connect@2.4.2 (pause@0.0.1, bytes@0.1.0, formidable@1.0.11, qs@0.4.2)
socket.io@0.9.9 node_modules\socket.io
├── policyfile@0.0.4
├── redis@0.7.2
└── socket.io-client@0.9.9 (xmlhttprequest@1.4.2, uglify-js@1.2.5, active-x-obfuscator@0.0.1, ws@0.4.21)