Bingo  Oyununu  Node.js,   Socket.io  ve  HTML5  ile         Geliştirme	 {	   By  @emrahayanoglu  #jstanbul
Merhaba();	                   >BenKimim()		@emrahayanoglu	              emrahayanoglu@gmail.com
node.JS?	      Express?	 HTML  5?	      Socket.IO?	Bingo  Oyunu?	 Oyun  Tasarımı?
Bingo      Oyunu	    Oyun     Tasarımı	 Oyun  Server    ve  Client    Tasarımı	İmplementasyon	  Whooray!!!
Bingo!  Oyunu  (Tombala)	General  Rules:	•  Seçilen  sayılar  0  ile  90  arasında  olmalıdır	•  Oyun  kartında  her  sütu...
Oyun  Salonu	Oda  1	                    Oda  2
Oyuncu  Bingo  içerisinde  nasıl  davranır?  	                 Oyuncu                    online                     oldu	 ...
Oyun  Server  ve  Client                                    Tasarımı	       Server        (Node.js)	                      ...
Peki,  Node.JS  nedir?  Sadece  modern                       teknoloji  sozcüklerinden  birimi?	•  Javascript  programlama...
Node.JS  ile  web  server  oluştumak                            kolaymı?	var  hpp  =  require(ʹhppʹ);	hpp.createServer(fun...
Fakat,  Multiplayer  oyunlar  için  neden  Node.JS’I  tercih  edelim?	      •  Diğer  dillerdeki  kütüphaneler  gibi  Doğa...
Node.JS  tamam,  peki  Web                 Framework  için    Node.JS’te  hangi                    kütüphaneyi  kullanabil...
Express  Örneği	                    Görüntüleme                        Motoru	                    Görüntüleme  	          ...
Node.JS  ve  Express  tamam,  peki,                  Client  ile  Oyun  Server’larını  nasıl                              ...
Peki,  Socket.IO  nedir?	•  Socket.IO  gerçek  zamanlı  ve  devamlı(persistent)  bağlantıyı  gerçekleştirir.	•  Birçok  Br...
Socket.IO  hakkında  daha  fazla                           bilgi…	                   Event  Send&Receive	Server  Tarafı	  ...
Socket.IO’u  oyunlarımız  için  nasıl                              kullanabiliriz?	•    Oyun  içerisindeki  mesajlaşmaları...
Server  tarafı  tamamlandı,  peki  Client  tarafındaki  grafikleri  ne  ile             geliştirebiliriz?
HTML5  ==	                             <!DOCTYPE  html>  ?  	•  J  HTML5  birçok  yeni  API’la  geliyor;	     •  Canvas  ...
Bingo  Demo  
Son  olarak,	•  Deployment	    •  Heroku	    •  Nodejitsu	    •  AWS	•  API  Entegrasyonu	    •  Facebook	•  hpps://github...
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Upcoming SlideShare
Loading in …5
×

Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game

4,028 views

Published on

Node.js based Socket.IO, Express and HTML 5 based Bingo! game development presentation which is presented during the Turkey's first javascript conference jstanbul

4 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
4,028
On SlideShare
0
From Embeds
0
Number of Embeds
53
Actions
Shares
0
Downloads
60
Comments
4
Likes
4
Embeds 0
No embeds

No notes for slide

Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game

  1. 1. Bingo  Oyununu  Node.js,   Socket.io  ve  HTML5  ile   Geliştirme { By  @emrahayanoglu  #jstanbul
  2. 2. Merhaba(); >BenKimim() @emrahayanoglu emrahayanoglu@gmail.com
  3. 3. node.JS? Express? HTML  5? Socket.IO? Bingo  Oyunu? Oyun  Tasarımı?
  4. 4. Bingo   Oyunu Oyun   Tasarımı Oyun  Server   ve  Client   Tasarımı İmplementasyon Whooray!!!
  5. 5. Bingo!  Oyunu  (Tombala) General  Rules: •  Seçilen  sayılar  0  ile  90  arasında  olmalıdır •  Oyun  kartında  her  sütun  10’un  katları  olan  sayıları  içermektedir. •  Bir  oyuncunun  kartındaki  bütün  sayılar,  seçilen  sayılar  arasındaysa          oyuncu  Bingo’yu  kazanır.
  6. 6. Oyun  Salonu Oda  1 Oda  2
  7. 7. Oyuncu  Bingo  içerisinde  nasıl  davranır?   Oyuncu   online   oldu Oyuncu  bir   tane  oda   seçer   Oyun  odada   başlar Odadaki   oyun   tamamlanır
  8. 8. Oyun  Server  ve  Client   Tasarımı Server   (Node.js) Client Redis (Temporary  Storage) Controller Socket.IO MQ Front   Socket.IO HTML  5  Models Rendering MySQL (Persistent  Storage)
  9. 9. Peki,  Node.JS  nedir?  Sadece  modern   teknoloji  sozcüklerinden  birimi? •  Javascript  programlama  ortamı •  V8  tabanlı •  Olaya  Dayalı(Event  Driven) •  Doğal  olarak  Non-­‐‑blocking  I/O  modeli  destekler   •  C/C++  tabanlı  eklentileri  destekler •  Çok  hızlı(Blazing  fast) •  Gerçek  zamanlı  uygulamalar  için            oldukça  uygun •  Referenslar; •  Linkedin,  Yahoo,  Uber,  Game  Salad
  10. 10. Node.JS  ile  web  server  oluştumak   kolaymı? var  hpp  =  require(ʹhppʹ); hpp.createServer(function  (req,  res)  {    res.writeHead(200,  {ʹContent-­‐‑Typeʹ:  ʹtext/plainʹ});    res.end(ʹHello  Worldnʹ); }).listen(1337,  ʹ127.0.0.1ʹ); console.log(ʹServer  running  at  hpp://127.0.0.1:1337/ʹ); >node  example.js Server  running  at  hpp://127.0.0.1:1337/
  11. 11. Fakat,  Multiplayer  oyunlar  için  neden  Node.JS’I  tercih  edelim? •  Diğer  dillerdeki  kütüphaneler  gibi  Doğal   olarak  Olaya  dayalı(Event  driven)  ve  Non   blocking  I/O  modeli  destekler; •  Nepy(Java) •  EventMachine(Ruby) •  Twisted(Python) •  Mevcut  projeleri  Node.JS’e   çevirmek  oldukça  kolay; •  DB •  Caching •  Message  Queue •  Authentication(OAuth) •  Son  olarak,  Node.js  sadece   JavaScript’ten  oluşur.
  12. 12. Node.JS  tamam,  peki  Web   Framework  için    Node.JS’te  hangi   kütüphaneyi  kullanabiliriz? Express  nedir? •  Node.JS’teki  Ruby  Sinatra  tabanlı  web  kütüphanesidir. •  Node.JS’te  yüksek  performans  ve  en  üst  kalite  web  geliştirme   olanağını  sağlar. •  Özellikleri; •  Sağlam  yöneltici(routing)  barındırır. •  (Redirection)Yönlendirme  yardımcılarını  barındırır. •  Dinamik  görüntüleme  yardımcılarını  barındırır. •  Yüksek  performansa  odaklıdır. •  Session  tabanlı  flash  bildirimleri  destekler. •  Referanslar; •  Learnboost •  Linkedin  Mobile
  13. 13. Express  Örneği Görüntüleme   Motoru Görüntüleme   Dizin  Yeri Yöneltici (Router) Statik   Dosyaların   Dizin  Yeri Port  3000’I   dinle
  14. 14. Node.JS  ve  Express  tamam,  peki,   Client  ile  Oyun  Server’larını  nasıl   bağlamalıyız? Flash  Socket Websocket = SOCKET.IO XHR-­‐‑Polling JSONP-­‐‑Polling
  15. 15. Peki,  Socket.IO  nedir? •  Socket.IO  gerçek  zamanlı  ve  devamlı(persistent)  bağlantıyı  gerçekleştirir. •  Birçok  Browser’a  destek  verir. •  Hapa,  IE  5.5’a  bile  destek  verir  J •  API  tabanında  WebSocket,  Flash  Socket,  Long  Polling  AJAX,  Multipart   AJAX,  Iframes  vardır •  Otomatik  olarak  JSON  encoding/decoding’i  gerçekleştirir. •  Alan  adlarına(Namespaces(Multiplexing))  ve   Anlaşmaya(Handshaking(Session  Handling))  destek  verir. Server  Tarafı Client  Tarafı
  16. 16. Socket.IO  hakkında  daha  fazla   bilgi… Event  Send&Receive Server  Tarafı Client  Tarafı Veya  WebSocket  gibi   kullan
  17. 17. Socket.IO’u  oyunlarımız  için  nasıl   kullanabiliriz? •  Oyun  içerisindeki  mesajlaşmaları  ve  olayları  Socket.IO  ile  iletebiliriz. •  Socket.IO  birçok  browser’a  mesajların  yollanmasını  sağlamaktadır. •  Hapa,  JSON  decode  veya  encode’a  gerek  olmadan  iletişimi  sağlamaktadır. •  Bizim  deneyimlerimize  göre  Flash  Socket  ve  Web  Socket’i  diğer  iletim   yöntemlerine  göre  tercih  etmemiz  tavsiye  edilir. Bingo  Oyunundaki   Örnek  Socket.IO Server  Tarafı Client  Tarafı
  18. 18. Server  tarafı  tamamlandı,  peki  Client  tarafındaki  grafikleri  ne  ile   geliştirebiliriz?
  19. 19. HTML5  == <!DOCTYPE  html>  ?   •  J  HTML5  birçok  yeni  API’la  geliyor; •  Canvas  API •  WebSocket  API •  LocalStorage  API •  WebStorage •  WebGL •  … •  2D  Graphics  =  HTML5.getCanvasAPI(); •  Browser  içerisinden  2D  olarak  grafik  geliştirmemize  olanak  sağlar •  Javascript  ve  HTML’den  başka  herhangi  bir  araç  ve  programlama  dili   kullanmaya  gerek  yoktur. •  Modern  Browser’lar  tarafından  desteklenmektedir. •  Plug-­‐‑in  tabanlı  Flash,  Silverlight  gibi  eklentilere  ve  SVG’yi  artık   unutun…
  20. 20. Bingo  Demo  
  21. 21. Son  olarak, •  Deployment •  Heroku •  Nodejitsu •  AWS •  API  Entegrasyonu •  Facebook •  hpps://github.com/emrahayanoglu

×