butifarra implementation on node.js, websockets and html5
Post on 13-May-2015
441 Views
Preview:
DESCRIPTION
TRANSCRIPT
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 pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
1 IntroduccioObjectiusRequeriments del sistema
2 Metodologia
3 Tecnologies utilitzadesNode.jsWebSocketsHTML5Per a que s’utilitzen?
4 DesenvolupamentLogica BotifarraComunicacio client-servidor
5 Demostracio
6 Conclusions
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
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.
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
ObjectiusRequeriments del sistema
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)
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
ObjectiusRequeriments del sistema
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.
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
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.
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
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
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
Node.jsWebSocketsHTML5Per a que s’utilitzen?
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.
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
Node.jsWebSocketsHTML5Per a que s’utilitzen?
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.
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
Node.jsWebSocketsHTML5Per a que s’utilitzen?
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
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
Node.jsWebSocketsHTML5Per a que s’utilitzen?
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.
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
Node.jsWebSocketsHTML5Per a que s’utilitzen?
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.
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
Node.jsWebSocketsHTML5Per a que s’utilitzen?
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
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
Node.jsWebSocketsHTML5Per a que s’utilitzen?
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
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
Logica BotifarraComunicacio client-servidor
Logica Botifarra
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
Logica BotifarraComunicacio client-servidor
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
Provem-ho
http://buti.koolpi.com
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
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.
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
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.
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
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.
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
IntroduccioMetodologia
Tecnologies utilitzadesDesenvolupament
DemostracioConclusions
Voleu col·laborar amb el projecte?
https://github.com/pokoli/ButiJS
Dubtes/Preguntes?
Correu electronic: pokoli@gmail.com
Twitter: @pokoli srk
Sergi Almacellas Abellana pokoli@gmail.com Implementacio de la botifarra a traves de Web
top related