TFM presentation about ButiJS, a implementation of the Butifarra Game on top of Node.js, WebSockets and HTML

1. Introducci´o
Metodologia
Tecnologies utilitzades
Desenvolupament
Demostraci´ o
Conclusions
M`ster en Enginyeria de Programari Lliure
a
`
Treball de Final de Master
Implementaci´ de la Botifarra
o
utilitzant WebSocket, HTML5 i
Javascript
Autor: Sergi Almacellas Abellana
Director: Juan Manuel Gimeno Illa
26 de juliol de 2012
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

2. Introducci´o
Metodologia
Tecnologies utilitzades
Desenvolupament
Demostraci´ o
Conclusions
1 Introducci´
o
Objectius
Requeriments del sistema
2 Metodologia
3 Tecnologies utilitzades
Node.js
WebSockets
HTML5
Per a qu` s’utilitzen?
e
4 Desenvolupament
L`gica Botifarra
o
Comunicaci´ client-servidor
o
5 Demostraci´
o
6 Conclusions
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

3. Introducci´o
Metodologia
Tecnologies utilitzades Objectius
Desenvolupament Requeriments del sistema
Demostraci´ o
Conclusions
Introducci´
o
Qu` ´s la botifarra?
ee
Joc de Cartes, que utilitza la baralla espanyola.
Tradicionalment jugat a Catalunya.
4 Jugadors, 2 equips de 2 jugadors.
Qu` s’ha implementat?
e
El joc de la botifarra a trav´s de navegador web.
e
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

4. Introducci´o
Metodologia
Tecnologies utilitzades Objectius
Desenvolupament Requeriments del sistema
Demostraci´ o
Conclusions
Objectius
Objectius principals
Implementar un joc de la botifarra.
Presa de contacte amb noves tecnologies.
Objectius secundaris
Utilitzar forges per la compartici´ de codi.
o
Utilitzar noves metodologies de treball ( TDD/BDD)
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

5. Introducci´o
Metodologia
Tecnologies utilitzades Objectius
Desenvolupament Requeriments del sistema
Demostraci´ o
Conclusions
Requeriments del sistema
L`gica Botifarra
o
Complir amb les regles de la botifarra.
Jugadors automatitzats.
Entorn Web
Programa servidor
Programa client
Multijugador
Permetre comunicaci´ entre els jugadors.
o
Temps real.
Capa¸ d’allotjar gran quantitat de jugadors.
c
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

6. Introducci´o
Metodologia
Tecnologies utilitzades
Desenvolupament
Demostraci´ o
Conclusions
Metodologia
Metodologies Utilitzades
1 Model Incremental
2 TDD/BDD
TDD/BDD
1 Definir la caracter´
ıstica a implementar.
2 Escriure la seva especificaci´.
o
3 Escriure la implementaci´.
o
4 Comprovar la validesa de la implementaci´.
o
5 Reestructurar/millorar la implementaci´.
o
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

7. Introducci´o
Metodologia Node.js
Tecnologies utilitzades WebSockets
Desenvolupament HTML5
Demostraci´ o Per a qu` s’utilitzen?
e
Conclusions
Tecnologies utilitzades
Principals
1 Node.js
2 WebSockets
3 HTML5
Altres
1 JQuery, CSS i Jade
2 JSON
3 Mocha i JsCoverage
4 Git
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

8. Introducci´o
Metodologia Node.js
Tecnologies utilitzades WebSockets
Desenvolupament HTML5
Demostraci´ o Per a qu` s’utilitzen?
e
Conclusions
Node.js
Qu` es Node.js
e
Framework multiplataforma execuci´ codi Javascript per la banda
o
del servidor.
Caracter´
ıstiques
Entrada/Sortida As´
ıncrona.
M´ltiples fils d’execuci´ de forma transparent per al
u o
programador.
Basat en esdeveniments.
Gran quantitat de llibreries disponibles i gestor de les mateixes.
Suport integrat pels protocols TCP,DNS,HTTP.
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

9. Introducci´o
Metodologia Node.js
Tecnologies utilitzades WebSockets
Desenvolupament HTML5
Demostraci´ o Per a qu` s’utilitzen?
e
Conclusions
Codi s´
ıncron vs. codi as´
ıncron
C´di s´
o ıncron:
Espera a obtenir els recursos externs (Fitxers,BD). Necessitat d’us
dels threads per paralelitzar.
Codi as´
ıncron:
NO s’espera, es programa l’execuci´ de codi quan el recurs estigui
o
disponible.
Com s’implementa en node?
Bucle d’esdeveniments.
Emisi´ d’events.
o
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

10. Introducci´o
Metodologia Node.js
Tecnologies utilitzades WebSockets
Desenvolupament HTML5
Demostraci´ o Per a qu` s’utilitzen?
e
Conclusions
Node.js
Beneficis de Node.js
No hi ha bloquejos.
Simplicitat del codi.
Velocitat.
Per a qu` s’utilitza?
e
Desenvolupament d’aplicacions o serveis web.
Sistemes d’intercanvi de missatges.
Servidors per a jocs multijugador basats en HTML5
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

11. Introducci´o
Metodologia Node.js
Tecnologies utilitzades WebSockets
Desenvolupament HTML5
Demostraci´ o Per a qu` s’utilitzen?
e
Conclusions
WebSockets
Problemes del protocol HTTP
Comunicaci´ unidireccional.
o
Gran quantitat d’informaci´ addicional (cap¸aleres).
o c
Refresc de la informaci´.
o
Que ens permeten els WebSockets?
Canal de comunicaci´ bidireccional.
o
Reduir la informaci´ addicional.
o
Informaci´ en temps real.
o
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

12. Introducci´o
Metodologia Node.js
Tecnologies utilitzades WebSockets
Desenvolupament HTML5
Demostraci´ o Per a qu` s’utilitzen?
e
Conclusions
HTML5
Qu` ´s HTML5?
ee
´
Ultima versi´ del llenguatge de marcatge utilitzat per escriure
o
p`gines web.
a
Novetats
1 Millor estructuraci´ del documents.
o
2 Contingut multim`dia: `udio, v´
e a ıdeo, animacions (canvas).
Beneficis
A l’estar estandarditzats s´n suportats de forma nativa per tots els
o
navegadors web moderns.
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

13. Introducci´o
Metodologia Node.js
Tecnologies utilitzades WebSockets
Desenvolupament HTML5
Demostraci´ o Per a qu` s’utilitzen?
e
Conclusions
Per a qu` s’utilitzen?
e
Node.js
Encarregat d’allotjar tota la l`gica del servidor de partides.
o
Websockets
S’encarrega de realitzar el transport de la informaci´ entre el client
o
i el servidor.
HTML5
S’utilitza l’etiqueta canvas per tal de dibuixar la interf´ del joc i
ıcie
realitzar les animacions corresponents
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

14. Introducci´o
Metodologia Node.js
Tecnologies utilitzades WebSockets
Desenvolupament HTML5
Demostraci´ o Per a qu` s’utilitzen?
e
Conclusions
Per a qu` s’utilitzen?
e
Altres
jQuery, CSS, Jade ⇒ Capa de presentaci´ del sistema.
o
JSON ⇒ Estructuraci´ de la informaci´ que s’envia a trav´s
o o e
dels WebSockets.
Mocha i JSCoverage ⇒ Jocs de Proves
Git ⇒ Allotjament del codi font
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

15. Introducci´o
Metodologia
Tecnologies utilitzades L`gica Botifarra
o
Desenvolupament Comunicaci´ client-servidor
o
Demostraci´ o
Conclusions
L`gica Botifarra
o
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

16. Introducci´o
Metodologia
Tecnologies utilitzades L`gica Botifarra
o
Desenvolupament Comunicaci´ client-servidor
o
Demostraci´ o
Conclusions
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

17. Introducci´o
Metodologia
Tecnologies utilitzades
Desenvolupament
Demostraci´ o
Conclusions
Provem-ho
http://buti.koolpi.com
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

18. Introducci´o
Metodologia
Tecnologies utilitzades
Desenvolupament
Demostraci´ o
Conclusions
Conclusions
TDD/BDD
Augmenten l’estabilitat del codi ⇒ millora de la productivitat.
Permet mesurar l’estat del desenvolupament.
HTML5
ıstiques ⇒ semblan¸a entorn d’escriptori.
Augment de caracter´ c
WebSockets
Gran volum de dades ⇒ millora el real-time.
Node.js
Estabilitat + Conjunt de m`duls ⇒ facilitat desenvolupament.
o
ıncron + Esdeveniments ⇒ + peticions - recursos.
Disseny as´
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

19. Introducci´o
Metodologia
Tecnologies utilitzades
Desenvolupament
Demostraci´ o
Conclusions
Conclusions
Desenvolupament d’aplicacions web.
Independ`ncia Sistema Operatiu.
e
Independ`ncia Tipus dispositiu.
e
Sense realitzar cap tipus d’instal·laci´.
o
Permet la compartici´ d’informaci´.
o o
Qu` suposa?
e
Gran futur en el desenvolupament d’aplicacions.
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

20. Introducci´o
Metodologia
Tecnologies utilitzades
Desenvolupament
Demostraci´ o
Conclusions
Treball futur
Adaptaci´ interf´ tel`fons m`bils.
o ıcie e o
Historial de partides.
Classificaci´ de jugadors.
o
Millora de la intelig`ncia aritifical.
e
Implementaci´ variants de la botifarra.
o
Implementaci´ de campionats.
o
Integraci´ amb xarxes socials.
o
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e

21. Introducci´o
Metodologia
Tecnologies utilitzades
Desenvolupament
Demostraci´ o
Conclusions
Voleu col·laborar amb el projecte?
https://github.com/pokoli/ButiJS
Dubtes/Preguntes?
Correu electr`nic: pokoli@gmail.com
o
Twitter: @pokoli srk
Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web
o e