Introducci´o                               Metodologia                      Tecnologies utilitzades                       ...
Introducci´o                                    Metodologia                           Tecnologies utilitzades             ...
Introducci´o                                      Metodologia                             Tecnologies utilitzades   Object...
Introducci´o                                      Metodologia                             Tecnologies utilitzades   Object...
Introducci´o                                     Metodologia                            Tecnologies utilitzades   Objectiu...
Introducci´o                                       Metodologia                              Tecnologies utilitzades       ...
Introducci´o                                       Metodologia      Node.js                              Tecnologies utili...
Introducci´o                                       Metodologia      Node.js                              Tecnologies utili...
Introducci´o                                     Metodologia      Node.js                            Tecnologies utilitzad...
Introducci´o                                       Metodologia      Node.js                              Tecnologies utili...
Introducci´o                                    Metodologia      Node.js                           Tecnologies utilitzades...
Introducci´o                                      Metodologia      Node.js                             Tecnologies utilitz...
Introducci´o                                      Metodologia      Node.js                             Tecnologies utilitz...
Introducci´o                                     Metodologia      Node.js                            Tecnologies utilitzad...
Introducci´o                                    Metodologia                           Tecnologies utilitzades   L`gica Bot...
Introducci´o                             Metodologia                    Tecnologies utilitzades   L`gica Botifarra        ...
Introducci´o                                   Metodologia                          Tecnologies utilitzades               ...
Introducci´o                                     Metodologia                            Tecnologies utilitzades           ...
Introducci´o                                     Metodologia                            Tecnologies utilitzades           ...
Introducci´o                                     Metodologia                            Tecnologies utilitzades           ...
Introducci´o                                  Metodologia                         Tecnologies utilitzades                 ...
Upcoming SlideShare
Loading in...5
×

Butifarra Implementation on Node.js, WebSockets and HTML5

421

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
421
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Butifarra Implementation on Node.js, WebSockets and HTML5

  1. 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 outilitzant 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. 2. Introducci´o Metodologia Tecnologies utilitzades Desenvolupament Demostraci´ o Conclusions1 Introducci´ o Objectius Requeriments del sistema2 Metodologia3 Tecnologies utilitzades Node.js WebSockets HTML5 Per a qu` s’utilitzen? e4 Desenvolupament L`gica Botifarra o Comunicaci´ client-servidor o5 Demostraci´ o6 Conclusions Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web o e
  3. 3. Introducci´o Metodologia Tecnologies utilitzades Objectius Desenvolupament Requeriments del sistema Demostraci´ o ConclusionsIntroducci´ 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. 4. Introducci´o Metodologia Tecnologies utilitzades Objectius Desenvolupament Requeriments del sistema Demostraci´ o ConclusionsObjectius 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. 5. Introducci´o Metodologia Tecnologies utilitzades Objectius Desenvolupament Requeriments del sistema Demostraci´ o ConclusionsRequeriments 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. 6. Introducci´o Metodologia Tecnologies utilitzades Desenvolupament Demostraci´ o ConclusionsMetodologia 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. 7. Introducci´o Metodologia Node.js Tecnologies utilitzades WebSockets Desenvolupament HTML5 Demostraci´ o Per a qu` s’utilitzen? e ConclusionsTecnologies 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. 8. Introducci´o Metodologia Node.js Tecnologies utilitzades WebSockets Desenvolupament HTML5 Demostraci´ o Per a qu` s’utilitzen? e ConclusionsNode.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. 9. Introducci´o Metodologia Node.js Tecnologies utilitzades WebSockets Desenvolupament HTML5 Demostraci´ o Per a qu` s’utilitzen? e ConclusionsCodi 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. 10. Introducci´o Metodologia Node.js Tecnologies utilitzades WebSockets Desenvolupament HTML5 Demostraci´ o Per a qu` s’utilitzen? e ConclusionsNode.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. 11. Introducci´o Metodologia Node.js Tecnologies utilitzades WebSockets Desenvolupament HTML5 Demostraci´ o Per a qu` s’utilitzen? e ConclusionsWebSockets 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. 12. Introducci´o Metodologia Node.js Tecnologies utilitzades WebSockets Desenvolupament HTML5 Demostraci´ o Per a qu` s’utilitzen? e ConclusionsHTML5 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. 13. Introducci´o Metodologia Node.js Tecnologies utilitzades WebSockets Desenvolupament HTML5 Demostraci´ o Per a qu` s’utilitzen? e ConclusionsPer 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. 14. Introducci´o Metodologia Node.js Tecnologies utilitzades WebSockets Desenvolupament HTML5 Demostraci´ o Per a qu` s’utilitzen? e ConclusionsPer 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. 15. Introducci´o Metodologia Tecnologies utilitzades L`gica Botifarra o Desenvolupament Comunicaci´ client-servidor o Demostraci´ o ConclusionsL`gica Botifarra o Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web o e
  16. 16. Introducci´o Metodologia Tecnologies utilitzades L`gica Botifarra o Desenvolupament Comunicaci´ client-servidor o Demostraci´ o ConclusionsSergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web o e
  17. 17. Introducci´o Metodologia Tecnologies utilitzades Desenvolupament Demostraci´ o ConclusionsProvem-ho http://buti.koolpi.com Sergi Almacellas Abellana pokoli@gmail.com Implementaci´ de la botifarra a trav´s de Web o e
  18. 18. Introducci´o Metodologia Tecnologies utilitzades Desenvolupament Demostraci´ o ConclusionsConclusions 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. 19. Introducci´o Metodologia Tecnologies utilitzades Desenvolupament Demostraci´ o ConclusionsConclusions 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. 20. Introducci´o Metodologia Tecnologies utilitzades Desenvolupament Demostraci´ o ConclusionsTreball 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. 21. Introducci´o Metodologia Tecnologies utilitzades Desenvolupament Demostraci´ o ConclusionsVoleu col·laborar amb el projecte?https://github.com/pokoli/ButiJSDubtes/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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×