Your SlideShare is downloading. ×
0
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,665

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

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
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,665
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
50
Comments
4
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Bingo  Oyununu  Node.js,   Socket.io  ve  HTML5  ile   Geliştirme { By  @emrahayanoglu  #jstanbul
  • 2. Merhaba(); >BenKimim() @emrahayanoglu emrahayanoglu@gmail.com
  • 3. node.JS? Express? HTML  5? Socket.IO? Bingo  Oyunu? Oyun  Tasarımı?
  • 4. Bingo   Oyunu Oyun   Tasarımı Oyun  Server   ve  Client   Tasarımı İmplementasyon Whooray!!!
  • 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. Oyun  Salonu Oda  1 Oda  2
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Socket.IO  hakkında  daha  fazla   bilgi… Event  Send&Receive Server  Tarafı Client  Tarafı Veya  WebSocket  gibi   kullan
  • 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. Server  tarafı  tamamlandı,  peki  Client  tarafındaki  grafikleri  ne  ile   geliştirebiliriz?
  • 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. Bingo  Demo  
  • 21. Son  olarak, •  Deployment •  Heroku •  Nodejitsu •  AWS •  API  Entegrasyonu •  Facebook •  hpps://github.com/emrahayanoglu

×