Butifarra Implementation on Node.js, WebSockets and HTML5

IntroduccioMetodologia

Tecnologies utilitzadesDesenvolupament

DemostracioConclusions

Master en Enginyeria de Programari LliureTreball de Final de Master

Implementacio de la Botifarrautilitzant WebSocket, HTML5 i

Javascript

Autor: Sergi Almacellas AbellanaDirector: Juan Manuel Gimeno Illa

26 de juliol de 2012

Sergi Almacellas Abellana [email protected] Implementacio de la botifarra a traves de Web




1 IntroduccioObjectiusRequeriments del sistema

2 Metodologia

3 Tecnologies utilitzadesNode.jsWebSocketsHTML5Per a que s’utilitzen?

4 DesenvolupamentLogica BotifarraComunicacio client-servidor

5 Demostracio

6 Conclusions





ObjectiusRequeriments del sistema

Introduccio

Que es la botifarra?

Joc de Cartes, que utilitza la baralla espanyola.

Tradicionalment jugat a Catalunya.

4 Jugadors, 2 equips de 2 jugadors.

Que s’ha implementat?

El joc de la botifarra a traves de navegador web.






Objectius

Objectius principals

Implementar un joc de la botifarra.

Presa de contacte amb noves tecnologies.

Objectius secundaris

Utilitzar forges per la comparticio de codi.

Utilitzar noves metodologies de treball ( TDD/BDD)






Requeriments del sistema

Logica Botifarra

Complir amb les regles de la botifarra.

Jugadors automatitzats.

Entorn Web

Programa servidor

Programa client

Multijugador

Permetre comunicacio entre els jugadors.

Temps real.

Capac d’allotjar gran quantitat de jugadors.





Metodologia

Metodologies Utilitzades

1 Model Incremental

2 TDD/BDD

TDD/BDD

1 Definir la caracterıstica a implementar.

2 Escriure la seva especificacio.

3 Escriure la implementacio.

4 Comprovar la validesa de la implementacio.

5 Reestructurar/millorar la implementacio.





Node.jsWebSocketsHTML5Per a que s’utilitzen?

Tecnologies utilitzades

Principals

1 Node.js

2 WebSockets

3 HTML5

Altres

1 JQuery, CSS i Jade

2 JSON

3 Mocha i JsCoverage

4 Git






Node.js

Que es Node.js

Framework multiplataforma execucio codi Javascript per la bandadel servidor.

Caracterıstiques

Entrada/Sortida Asıncrona.

Multiples fils d’execucio de forma transparent per alprogramador.

Basat en esdeveniments.

Gran quantitat de llibreries disponibles i gestor de les mateixes.

Suport integrat pels protocols TCP,DNS,HTTP.






Codi sıncron vs. codi asıncron

Codi sıncron:

Espera a obtenir els recursos externs (Fitxers,BD). Necessitat d’usdels threads per paralelitzar.

Codi asıncron:

NO s’espera, es programa l’execucio de codi quan el recurs estiguidisponible.

Com s’implementa en node?

Bucle d’esdeveniments.

Emisio d’events.






Node.js

Beneficis de Node.js

No hi ha bloquejos.

Simplicitat del codi.

Velocitat.

Per a que s’utilitza?

Desenvolupament d’aplicacions o serveis web.

Sistemes d’intercanvi de missatges.

Servidors per a jocs multijugador basats en HTML5






WebSockets

Problemes del protocol HTTP

Comunicacio unidireccional.

Gran quantitat d’informacio addicional (capcaleres).

Refresc de la informacio.

Que ens permeten els WebSockets?

Canal de comunicacio bidireccional.

Reduir la informacio addicional.

Informacio en temps real.






HTML5

Que es HTML5?

Ultima versio del llenguatge de marcatge utilitzat per escriurepagines web.

Novetats

1 Millor estructuracio del documents.

2 Contingut multimedia: audio, vıdeo, animacions (canvas).

Beneficis

A l’estar estandarditzats son suportats de forma nativa per tots elsnavegadors web moderns.






Per a que s’utilitzen?

Node.js

Encarregat d’allotjar tota la logica del servidor de partides.

Websockets

S’encarrega de realitzar el transport de la informacio entre el clienti el servidor.

HTML5

S’utilitza l’etiqueta canvas per tal de dibuixar la interfıcie del joc irealitzar les animacions corresponents






Per a que s’utilitzen?

Altres

jQuery, CSS, Jade ⇒ Capa de presentacio del sistema.

JSON ⇒ Estructuracio de la informacio que s’envia a travesdels WebSockets.

Mocha i JSCoverage ⇒ Jocs de Proves

Git ⇒ Allotjament del codi font





Logica BotifarraComunicacio client-servidor

Logica Botifarra





Logica BotifarraComunicacio client-servidor





Provem-ho

http://buti.koolpi.com


http://buti.koolpi.com




Conclusions

TDD/BDD

Augmenten l’estabilitat del codi ⇒ millora de la productivitat.

Permet mesurar l’estat del desenvolupament.

HTML5

Augment de caracterıstiques ⇒ semblanca entorn d’escriptori.

WebSockets

Gran volum de dades ⇒ millora el real-time.

Node.js

Estabilitat + Conjunt de moduls ⇒ facilitat desenvolupament.

Disseny asıncron + Esdeveniments ⇒ + peticions - recursos.





Conclusions

Desenvolupament d’aplicacions web.

Independencia Sistema Operatiu.

Independencia Tipus dispositiu.

Sense realitzar cap tipus d’instal·lacio.

Permet la comparticio d’informacio.

Que suposa?

Gran futur en el desenvolupament d’aplicacions.





Treball futur

Adaptacio interfıcie telefons mobils.

Historial de partides.

Classificacio de jugadors.

Millora de la inteligencia aritifical.

Implementacio variants de la botifarra.

Implementacio de campionats.

Integracio amb xarxes socials.





Voleu col·laborar amb el projecte?

https://github.com/pokoli/ButiJS

Dubtes/Preguntes?

Correu electronic: [email protected]

Twitter: @pokoli srk


https://github.com/pokoli/ButiJS

Technology

Butifarra Implementation on Node.js, WebSockets and HTML5