Aplicació per la gestió de partides, lligues i tornejos de dards

id192747


APLICACIÓ PER LA GESTIÓ DE PARTIDES,
LLIGUES I TORNEJOS DE DARDS
GERARD SERRAMIÀ ROSELL
Di ec o /a
SILVIALLORENTEVIEJO(Depa amen d'A qui ec u adeCompu ado s)
Ti ulació
G auenEnginye iaIn o mà ica(Tecnologiesdelain o mació)
Memò ia del eball de i de g au
Facul a d'In o mà ica de Ba celona (FIB)
Uni e si a Poli ècnica de Ca alunya (UPC) - Ba celonaTech
15/05/2025

Resum
Aques p ojec e consis eix en el desen olupamen d’una aplicació web pe juga a da ds de
pun a de e o en e dos jugado s, en la modali a coneguda com a 501. En aques joc, cada
pa icipan comença amb 501 pun s i ha d’ana llançan da ds a una diana pe ana es an
pun uació ins a a iba exac amen a ze o.
L’aplicació no subs i ueix el llançamen ísic dels da ds, sinó que se eix com a eina de
supo pe egis a la pun uació de cada i , po a el con ol de la pa ida i o e i una
expe iència isual i o gani zada del seu p og és. Això pe me que els jugado s es cen in en
el joc men e l’aplicació ges iona au omà icamen el ma cado , l’his o ial de o ns i al es
elemen s com les es adís iques pe sonals o la classi icació en compe icions.
A a és d’aques a aplicació, es poden juga pa ides an localmen com en línia,
man enin semp e un en o n accessible i àcil d’u ili za , ap e pe a qualse ol pe sona que
ulgui gaudi dels da ds de mane a mode na i es uc u ada.
Es e p oyec o consis e en el desa ollo de una aplicación web pa a juga a da dos de pun a
de hie o en e dos jugado es, en la modalidad conocida como 501. En es e juego, cada
pa icipan e comienza con 501 pun os y debe i lanzando da dos a una diana pa a i
es ando pun uación has a llega exac amen e a ce o.
La aplicación ac úa como una he amien a de apoyo pa a egis a la pun uación de cada
lanzamien o, lle a el con ol de la pa ida y o ece una expe iencia isual y o ganizada de
su desa ollo. Es o pe mi e que los jugado es se cen en en el juego mien as la aplicación
ges iona au omá icamen e el ma cado , el his o ial de u nos y o os elemen os como las
es adís icas pe sonales o la clasi icación en ligas.
A a és de es a aplicación, se pueden dispu a pa idas an o localmen e como en línea,
man eniendo siemp e un en o no accesible y ácil de u iliza , ap o pa a cualquie pe sona
que desee dis u a del juego de los da dos de una o ma mode na y es uc u ada.
This p ojec consis s o he de elopmen o a web applica ion o playing s eel- ip da s
be ween wo playe s, using he popula 501 game mode. In his game, each playe s a s
wi h 501 poin s and h ows da s a a da boa d o educe hei sco e un il eaching exac ly
ze o.
The applica ion se es as a suppo ool o eco d he sco e o each h ow, manage he
p og ess o he ma ch, and p o ide a isual and o ganized expe ience o he game. This
allows playe s o ocus on playing while he app au oma ically handles he sco eboa d, u n
his o y, and o he ea u es such as pe sonal s a is ics o league ankings.
Th ough his applica ion, ma ches can be played ei he locally o online, always wi hin an
accessible and use - iendly en i onmen , sui able o anyone who wan s o enjoy da s in
a mode n and s uc u ed way.
Índex de con ingu s
1. In oducció i con ex uali zació .................................................... 6
1.1. In oducció ............................................................................................................... 6
1.2. Con ex ..................................................................................................................... 6
1.3. Te minologia i de inicions .......................................................................................... 7
1.4. Iden i icació del p oblema ......................................................................................... 7
1.5. Ac o s implica s ........................................................................................................ 9
1.6. Funcionamen d'una pa ida de da ds 501 .................................................................. 9
2. Jus i icació ............................................................................... 12
2.1. Solucions exis en s ................................................................................................. 12
2.2. P opos a de solució ................................................................................................. 15
3. Abas del p ojec e ..................................................................... 17
3.1. Objec iu p incipal .................................................................................................... 17
3.2. Requisi s uncionals ................................................................................................ 17
3.3. Requisi s no uncionals ........................................................................................... 18
3.4. Riscos i possibles obs acles .................................................................................... 18
4. Me odologia i igo .................................................................... 19
4.1. Me odologia ............................................................................................................ 19
4.2. Eines u ili zades ...................................................................................................... 20
5. Plani icació Tempo al ................................................................ 21
5.1. Recu sos ................................................................................................................ 21
5.2. Desc ipció de les asques ........................................................................................ 22
5.3. Resum de la plani icació .......................................................................................... 25
5.4. Diag ama de Gan .................................................................................................. 26
5.5. Ges ió de iscos ...................................................................................................... 27
6. P essupos ............................................................................... 28
6.1. Recu sos humans ................................................................................................... 28
6.2. Ha dwa e ................................................................................................................ 29
6.3. So wa e ................................................................................................................. 30
6.4. Cos os indi ec es .................................................................................................... 30
6.5. Con ingències ......................................................................................................... 31
6.6. Imp e is os ............................................................................................................. 32
6.7. P essupos inal ...................................................................................................... 33
6.8. Replani icació ......................................................................................................... 33
6.9. Con ol de ges ió ..................................................................................................... 35
7. P esa de Requisi s .................................................................... 36
7.1. P esa de Requisi s d'Usua i ...................................................................................... 36
7.2. Rece ca i inspi ació d'in e ícies ............................................................................... 38
8. Disseny i implemen ació de l’aplicació ...................................... 41
8.1. F on end ................................................................................................................. 43
8.2. Backend: A qui ec u a i API REST ............................................................................. 52
8.3. Base de dades ........................................................................................................ 56
8.4. Backend: WebSocke s Se e .................................................................................. 59
8.5. Comuniacio P2P amb Pee JS ................................................................................... 64
8.6. Au en icació i Segu e a ........................................................................................... 65
9. En o n de desplegamen ........................................................... 69
9.1. F on end – Ne li y .................................................................................................... 69
9.2. Backend – Railway ................................................................................................... 69
9.3. Base de dades – Railway (Pos g eSQL) ...................................................................... 70
9.4. Domini - DonDominio .............................................................................................. 70
9.5. Fu u – Mig ació a un se ido p opi .......................................................................... 71
9.6. Segu e a in o mà ica .............................................................................................. 71
10. Lleis i egulacions ..................................................................... 73
10.1. RGPD ..................................................................................................................... 73
10.2. LSSI-CE .................................................................................................................. 73
10.3. Llicències de p og ama i i p opie a in el·lec ual ........................................................ 73
10.4. Polí ica de cookies .................................................................................................. 73
11. Sos enibili a i Comp omís Social .............................................. 74
11.1. Dimensió ambien al ................................................................................................ 74
11.2. Dimensió econòmica .............................................................................................. 74
11.3. Dimensió social ...................................................................................................... 75
12. In eg ació de coneixemen s....................................................... 76
13. Conclusions ............................................................................. 77
13.1. Conclusió del p ojec e............................................................................................. 77
13.2. P incipals p oblemes ............................................................................................... 77
13.3. Millo es i uncionali a s u u es ................................................................................ 77
13.4. Valo ació pe sonal .................................................................................................. 78
14. Re e ències .............................................................................. 79
15. Annex1 – Visuali zació ima ges aplicació ................................... 81
Índex d’il·lus acions
Il·lus ació 1: Pun uació en una diana de da ds. Fon : Elabo ació p òpia ......................... 10
Il·lus ació 2: Exemple d'una pa ida. Fon : Elabo ació p òpia. ........................................ 11
Il·lus ació 3: Pàgina p incipal Nakka. Fon : Nakka [3] .................................................... 12
Il·lus ació 4: Fo mula i de c eació de pa ida. Fon : Nakka [3] ........................................ 13
Il·lus ació 5: Pa ida a Nakka. Fon : Nakka [3] ............................................................... 13
Il·lus ació 6: Me odologia Kanban. Fon : Elabo ació p òpia............................................ 19
Il·lus ació 7: Diag ama de Gan . Fon : Elabo ació p òpia. ............................................. 26
Il·lus ació 8: Inspi ació d’in e ície e olució pa ida. Fon : Nakka [3]. ............................. 38
Il·lus ació 9: : Inspi ació d’in e ície, in oducció de pun uacions. Fon : Da Coun e [4]. 38
Il·lus ació 10: Inspi ació d'in e ície, lobby en línia. Fon : Da Coun e [4]. ..................... 39
Il·lus ació 11: Inspi ació d’in e ície, disseny. Fon : Chess [29]. ..................................... 39
Il·lus ació 12: A qui ec u a gene al. Fon : Elabo ació p òpia. ......................................... 41
Il·lus ació 13: A qui ec u a del on end. Fon : Elabo ació p òpia. .................................. 46
Il·lus ació 14: Diag ama de na egació. Fon : Elabo ació p òpia. ..................................... 50
Il·lus ació 15: Disseny isual aplicació. Fon : Elabo ació p òpia. .................................... 51
Il·lus ació 16: A qui ec u a del backend, API REST. Fon : Elabo ació p òpia. ................... 53
Il·lus ació 17: Diag ama En i a Relacio (ER). Fon : Elabo ació p òpia. ........................... 58
Il·lus ació 18: A qui ec u a del backend, WebSocke s. Fon : Elabo ació p òpia. ............. 60
Il·lus ació 19: Flux de uncionamen de c eació de pa ida. Fon : Elabo ació p òpia. ...... 62
Il·lus ació 20: Flux de uncionamen d'una pa ida. Fon : Elabo ació p òpia. .................. 63
Il·lus ació 21: Fluxe d'au en icacio. Fon : Elabo ació p opia .......................................... 67
Índex de aules
Taula 1: Taula esum de plani icació. Fon : Elabo ació p òpia ........................................ 25
Taula 2: Es imació sala ial pe ecu sos humans. Fon : Elabo ació p òpia ...................... 28
Taula 3: Es imació sala ial pe asca i ol. Fon : Elabo ació p òpia. ................................. 29
Taula 4: Es imació de cos os pe ecu sos ma e ial. Fon : Elabo ació p òpia. ................. 30
Taula 5: Es imació de cos os pe ecu sos so wa e. Fon : Elabo ació p òpia. ................. 30
Taula 6: Es imació de cos os indi ec es. Fon : Elabo ació p òpia ................................... 31
Taula 7: Càlcul de cos os de con ingència. Fon : Elabo ació p òpia ............................... 31
Taula 8: Es imació de cos os imp e is os. Fon : Elabo ació p òpia. ................................ 32
Taula 9: P essupos inal. Fon : Elabo ació p òpia. ........................................................ 33
Taula 10: Es imació de cos os pe ecu sos ma e ials(2). Fon : Elabo ació p òpia. .......... 34
Taula 11: P essupos inal eplani ica . Fon : Elabo ació p òpia ...................................... 34
Taula 12: Compa ació de ecnologies del on end. Fon : Elabo ació p òpia. .................. 44
Taula 13: Compa ació de ecnologies del backend. Fon : Elabo ació p òpia. .................. 45
Taula 14: Compa ació sis emes de bases de dades. Fon : Elabo ació p òpia. ................. 56

6
1. In oducció i con ex uali zació
1.1. In oducció
Aques p ojec e s'emma ca dins el T eball de Fi de G au (TFG), equisi onamen al pe a
la inali zació del G au en Enginye ia In o mà ica (GEI) a la Uni e si a Poli ècnica de
Ca alunya (UPC), en l'especiali a de Tecnologies de la In o mació (TI). El p ojec e segueix
la modali a A, on l'es udian escull lliu emen el ema sob e el qual desen olupa à el
eball. En aques cas, el p ojec e s’ha cen a en la c eació d'una aplicació web pe a la
ges ió de pa ides, lligues i o nejos de da ds, en la modali a especí ica de pun a d'ace .
1.2. Con ex
Els da ds són un joc amb una lla ga adició, popula an en l'àmbi domès ic, com en
espais públics, pe exemple, ba s i clubs socials. His ò icamen , han se i com a o ma
d'en e enimen in o mal, amb amics i amilia s jugan an a casa com en aques s
es ablimen s. To i això, ambé han e oluciona cap a una disciplina espo i a p o essional
en di e sos països, com Angla e a, Alemanya o els Es a s Uni s, amb compe icions
in e nacionals ele isades i amb una audiència global.
Tal com diu la Fede ació Ca alana de Da ds [1]:
“S'anomena da ds l'espo que es po p ac ica indi idualmen , pe pa elles, iple s o pe
equips, i que consis eix a llança es da ds al e na i amen cada jugado a un objec iu
ci cula anomena diana que es à ixa a la pa e , ins a comple a una pun uació
de e minada o assoli uns sec o s de e mina s una sè ie de egades ambé de e minada,
segons la a ian del joc i egles amb les quals es igui jugan ”.
Els da ds es di ideixen en dues modali a s p incipals:
• Da ds de pun a de plàs ic (diana elec ònica): En aques a modali a , els da ds
enen una pun a de plàs ic, i la diana és elec ònica, la qual en egis a
au omà icamen les pun uacions dels jugado s. Aques a modali a és mol popula
en ba s i lla s, on es busca sob e o la di e sió. La ges ió elec ònica de les pa ides
pe me juga de mane a més còmoda i ins i o en línia amb jugado s d'a eu del
món, g àcies a les càme es in eg ades que po en les dianes elec òniques.
• Da ds de pun a d’ace : Aques a modali a és la que s’u ili za p incipalmen en
compe icions p o essionals, com les o gani zades pe la P o essional Da s
Co po a ion (PDC) [2]. Els da ds enen una pun a d’ace , i la diana es à e a de
sisal, un ma e ial adicional que es egene a desp és de cada impac e. Aques a
modali a és més p ecisa i eque eix una majo habili a pe pa dels jugado s.
Malg a això, el e que les dianes no siguin elec òniques compo a limi acions
signi ica i es, com la necessi a que els jugado s compe eixin de mane a
p esencial, di icul an la pa icipació a dis ància.
7
1.3. Te minologia i de inicions
• Aplicació web: P og ama accessible a a és d'un na egado que pe me la ges ió
de pa ides, lligues i o nejos de da ds de pun a d'ace . L'aplicació pe me an als
Ope ado s com als Jugado s in e ac ua amb el sis ema, insc iu e's a compe icions
i egis a esul a s.
• Classi icació: Sis ema au omà ic o manual que o dena els Jugado s en unció dels
esul a s ob ingu s en les compe icions. Les classi icacions es poden gene a an
pe pa ides indi iduals com pe lligues o o nejos.
• Da ds de pun a d'ace : Modali a en la qual els da ds enen una pun a de e o o
ace , dissenya s pe se u ili za s amb dianes e es de ib es de sisal, ma e ial
conegu pe la se a capaci a de egene a -se desp és dels impac es. Aques a
modali a és habi ual en compe icions p o essionals.
• Diana: Objec iu ci cula on els jugado s llancen els da ds. Con é di e en s
segmen s amb pun uacions especí iques.
• Lliga: Un conjun de pa ides o gani zades pe un Ope ado , on els jugado s
compe eixen en e si du an un pe íode de emps. Les classi icacions es basen en
els esul a s de les pa ides jugades.
• Ope ado : L’ope ado és l'usua i esponsable de c ea i ges iona les lligues,
o nejos i pa ides dins l'aplicació.
• PDC: O gani zació esponsable de les compe icions més p es igioses a escala
mundial en la modali a de da ds de pun a d’ace .
• Pa ida: Una compe ició en e un o més jugado s amb l'objec iu d'assoli una
pun uació o compli unes condicions especí iques, segons les egles del joc. Les
pa ides poden se indi iduals o pe equips.
• Sis ema de pagamen : Mecanisme in eg a a l'aplicació que pe me als Jugado s
e ec ua pagamen s pe a insc iu e's a compe icions i pe me als Ope ado s
ges iona els p emis o ecompenses.
• To neig: Esde enimen en el qual di e sos jugado s compe eixen seguin un o ma
elimina o i o de g ups, o gani za pe un Ope ado . El guanyado és de e mina
segons els esul a s ob ingu s al lla g de les ondes.
1.4. Iden i icació del p oblema
To i que els da ds de pun a d'ace són mol popula s en l'àmbi p o essional,
p incipalmen g àcies a la PDC, aques a modali a p esen a una limi ació impo an : la
manca d’in eg ació ecnològica.
A di e ència de les dianes elec òniques u ili zades en la modali a de pun a de plàs ic, les
dianes de sisal no inco po en senso s ni sis emes de egis e au omà ic de pun uació, e
que obliga els jugado s a egis a manualmen les pun uacions i di icul a el joc en línia.
A a bé, si anali zem la si uació amb pe spec i a, la modali a de pun a d'ace ambé
p esen a un a an a ge signi ica iu: si es ol juga en línia, només cal una diana de sisal, es
da ds i un sis ema de càme es connec ades a in e ne . Amb una càme a en ocan la diana
i una al a en ocan el jugado , es po ga an i una pa ida jus a i sense ampes.
En can i, la modali a de pun a de plàs ic eque eix una in aes uc u a mol més
complexa, ja que depèn de dianes elec òniques amb pan alles in eg ades, senso s de
8
de ecció d’impac es i, en mol s casos, un sis ema de connexió que limi a la se a lexibili a
i accessibili a .
En aques con ex , un so wa e que pe me i ges iona les pa ides en emps eal pod ia se
una eina essencial pe acili a el joc en línia en qualse ol modali a . Aques so wa e no
només pe me ia po a el egis e de pun uacions de mane a au omà ica, sinó que ambé
pod ia in eg a -se amb les càme es pe p opo ciona una expe iència de joc més luida i
anspa en .
Més enllà del joc en línia, la ges ió de o nejos de da ds de pun a d'ace en ba s i clubs
ambé p esen a una p oblemà ica: ac ualmen , mol s d’aques s esde enimen s es
ges ionen manualmen , ano an les pun uacions en pape o adminis an la compe ició de
mane a poc es uc u ada. Aques a manca de digi ali zació po gene a e o s, e a da el
desen olupamen dels o nejos i di icul a -ne el seguimen . Un sis ema in o ma i za pe
ges iona an les pa ides indi iduals com els o nejos i les lligues pod ia millo a
signi ica i amen l’e iciència i la comodi a pe a jugado s i o gani zado s.
Ac ualmen , exis eixen dues aplicacions web p incipals que abo den la ges ió de pa ides i
compe icions de da ds: Nakka [3] i Da Coun e [4]. To i que ambdues o e eixen
uncionali a s in e essan s, p esen en ce es limi acions que di icul en una expe iència de
joc òp ima.
La p ime a aplicació, Nakka, pe me juga an en línia com ges iona o nejos i lligues. A
més, o e eix la possibili a de connec a càme es pe e i a ampes du an les pa ides.
A a bé, desp és d’anali za -la en p o undi a , es de ec en di e ses de iciències. L’ús de la
pla a o ma esul a poc in uï iu i p esen a un disseny an iqua i poc amigable, e que
di icul a l’accessibili a pe a nous usua is. A més, mol s ope ado s i jugado s han exp essa
el seu descon en amen amb les ele ades comissions que cob a la pla a o ma, ja que
aques es edueixen els p emis de les compe icions i an menys a ac iu l’ús del seu se ei.
La segona aplicació, Da Coun e , descobe a du an la eali zació d’aques eball, o e eix
la possibili a de juga an en local com en línia. Aques a pla a o ma es à dissenyada al
ol an de la enda de dianes amb un sis ema in eg a de càme a o senso s, que egis en
au omà icamen la pun uació de cada llançamen . Això suposa un g an a an a ge en
e mes d’au oma i zació, pe ò ambé una ba e a d’accés, ja que només es po juga en
línia amb al es usua is si es disposa del seu ha dwa e especí ic, el qual é un cos ele a
(ap oximadamen 300-1500 € pe uni a ). A més, aques a pla a o ma no inclou cap opció
pe c ea o nejos o lligues, ja que es à pensada p incipalmen pe a pa ides indi iduals
jugades des de casa.
Anali zan aques es opcions, es po conclou e que ac ualmen no exis eix una aplicació
que cob eixi o es les necessi a s del joc de da ds de pun a d’ace de mane a
accessible i e icien . Pe an , es de ec a una opo uni a pe desen olupa una solució més
in uï i a, mode na i econòmica, que millo i l’expe iència an pe als jugado s
(p o essionals o ama eu s) com pe als o gani zado s de compe icions.
9
1.5. Ac o s implica s
En aques p ojec e en conc e , hi ha di e sos ac o s, des de la ase de plan ejamen del
p ojec e, ins al desen olupamen , implemen ació, en ega i u ili zació de l’aplicació.
• Desen olupado (es udian ): Pe sona/es que a el eball i s’enca ega de de ini ,
implemen a i es eja l’aplicació pel seu bon uncionamen , a més a més de
documen a el p ojec e i edac a la memò ia. En aques p ojec e només hi ha una
pe sona amb aques ol, que és Ge a d Se amià Rosell.
• Di ec o a del TFG: Pe sona que supe isa i guia a l’es udian pe què el p ojec e
pugui i a enda an . En aques p ojec e, la di ec o a és Sil ia Llo en e Viejo.
• Jugado : Pe sona que juga pa ides en se i l’aplicació, siguin indi iduals de
o ma local si no es à egis a o bé pa ides en línia, o nejos o lligues si ho es à. En
aques cas ambé é accés a les se es es adís iques pe sonals.
• Ope ado : De ineix les egles de les compe icions, ges iona les insc ipcions, busca
pa icipan s, ac uali za els esul a s i s'enca ega de la dis ibució de p emis o
ecompenses als guanyado s.
1.6. Funcionamen d'una pa ida de da ds 501
El món dels da ds comp a amb di e en s modali a s de joc, com el C icke , el 301, el 501,
en e d’al es. El 501 és el o ma més es ès en compe icions de pun a d’ace , an a escala
p o essional com ama eu . A con inuació, s'explica de alladamen el uncionamen
d’aques a modali a .
L'objec iu p incipal d'una pa ida d’aque a modali a és edui la pun uació inicial de 501
pun s a 0 exac amen , u ili zan el meno nomb e possible de llançamen s.
1.6.1. Sis ema de pun uació
Cada jugado disposa de es da ds pe o n. La pun uació ob inguda en un o n es calcula
suman els pun s dels segmen s on impac en els da ds.
La diana es à di idida en segmen s nume a s d'1 a 20, amb una secció cen al in e io
anomenada Diana Doble i una secció cen al supe io anomenada Diana Simple. Cada
segmen é di e en s alo s segons la zona d’impac e:
• Segmen senzill: Pun ua el alo base del segmen .
• Segmen doble: Pun ua el doble del alo del segmen .
• Segmen iple: Pun ua el iple del alo del segmen .
• Diana Doble: 50 pun s.
• Diana Simple: 25 pun s.
Si el da d llença no es cla a a la diana o es cla a o a d’aques s segmen s con a à com a 0
pun s o OUT.
16
Ges ió e icien de o nejos i lligues
• S’ha c ea un sis ema que gene a au omà icamen el quad e de compe ició,
de ineix els en on amen s i ac uali za la classi icació en emps eal.
• Dona supo a di e en s o ma s de o nejos i lligues, cosa que pe me als
o gani zado s con igu a egles pe sonali zades segons les necessi a s del o neig.
Reducció de cos os i accessibili a
• Es ga an eix que l'ús de la pla a o ma és més econòmic que les al e na i es
ac uals, amb a i es més ajus ades pe a l’o gani zació de lligues i o nejos.
• L'objec iu és que els p emis de les compe icions siguin més a ac ius pe als
jugado s, e i an comissions ele ades que edueixin el alo dels p emis.
Pe spec i a de u u : cap a una comuni a de da ds
A lla g e mini, l’aplicació pod ia e oluciona cap a una comuni a digi al pe a jugado s de
da ds, on els usua is puguin in e ac ua , compa i expe iències i oba compe icions
d’in e ès.
• Implemen a un sis ema de no i icacions i anuncis pe què els jugado s es iguin
in o ma s de o nejos i lligues p òximes, sigui en línia o en es ablimen s ísics.
• Els ba s i clubs pod ien u ili za la pla a o ma pe p omociona els seus o nejos,
acili an la insc ipció de jugado s i ges ionan les compe icions de mane a més
e icien .
• In eg a un sis ema de classi icacions i ànquings gene als, cosa que pe me als
jugado s segui la se a e olució i compa a -se amb al es pa icipan s de la
comuni a .
Amb aques en ocamen , l’aplicació no només esol els p oblemes ac uals de ges ió de
pa ides i o nejos, sinó que ambé es pod ia a iba a con e i en un pun de obada pe
als a iciona s als da ds, omen an la pa icipació i la di usió d’aques espo .

17
3. Abas del p ojec e
En aques apa a es desc iu l’abas del p ojec e, eien els seus objec ius p incipals, els
equisi s uncionals i no uncionals, així com els iscos i possibles obs acles que
pod ien a ec a el desen olupamen . Aques es conside acions han es a essencials pe
ga an i que l’aplicació complís amb les expec a i es inicials i pogués e oluciona cap a
una e sió inal exi osa.
3.1. Objec iu p incipal
L’objec iu p incipal d’aques p ojec e ha es a desen olupa una aplicació web uncional
pe a la ges ió de pa ides, lligues i o nejos de da ds de pun a d'ace . To i que la e sió
inicial no p e enia se una e sió inal del p oduc e, el seu p opòsi ha es a es abli una
es uc u a sòlida i uncional que supe i les limi acions de les solucions ac uals, o e in
una in e ície més in uï i a i e icien .
El esul a del p ojec e és una aplicació amb les uncionali a s bàsiques necessà ies pe a
la se a implemen ació inicial, que pod à se ampliada amb no es uncionali a s en el u u
ins a assoli un p oduc e compe i iu al me ca . Això ha pe mès cons ui una base obus a
pe con inua a egin uncionali a s addicionals a mesu a que es pe ecciona el sis ema.
Fo a de l’abas : la pa inance a, és a di , o a la ges ió de pagamen , i la pa legal, no es
con emplen dins d’aques p ojec e, ja que queda o a de les compe ències d'un T eball de
Fi de G au. Aques s aspec es pod ien se conside a s en u u es e apes del p ojec e, pe
exemple, in eg an passa el·les de pagamen segu es.
3.2. Requisi s uncionals
Els equisi s uncionals són les uncionali a s especí iques que l’aplicació ha de
p opo ciona pe compli amb els seus objec ius. Aques s equisi s inclouen:
• Regis e i au en icació d’usua is (jugado s i ope ado s): L’aplicació ha de
pe me e que els jugado s i els ope ado s es egis in i accedeixin al sis ema de
mane a segu a.
• Ges ió de pa ides de o ma local: L'aplicació ha de pe me e juga pa ides de
o ma local sense necessi a de egis e, aques es pa ides no queda an
egis ades.
• Ges ió de pa ides en línia: L'aplicació ha de pe me e c ea i juga pa ides en
emps eal en e dos jugado s. Els esul a s s’han d’en egis a au omà icamen en
base de dades i han de se isibles les dades en emps eal, incloen -hi pun uacions
i o ns. A més a més, ha d’inclou e un sis ema de econnexió i ac uali za les
es adís iques dels jugado s en inali za .
• C eació i ges ió de lligues i o nejos: Els ope ado s han de pode c ea i ges iona
lligues i o nejos de mane a senzilla, de inin les egles de compe ició i el o ma .
• Classi icacions au omà iques i en emps eal: Les classi icacions de jugado s
s'han d'ac uali za au omà icamen desp és de cada pa ida.
• Es adís iques i in o mes: Els jugado s i ope ado s han de pode consul a
es adís iques de endimen i in o mes sob e les se es pa ides, lligues i o nejos.
18
3.3. Requisi s no uncionals
Els equisi s no uncionals desc iuen les ca ac e ís iques de endimen i quali a que
l'aplicació ha de compli pe o e i una expe iència d’usua i òp ima:
• Usabili a / acili a d'ús: L’aplicació ha de se in uï i a i àcil d’u ili za , an pe als
jugado s com pe als ope ado s, amb una in e ície cla a i accessible.
• Escalabili a : L'aplicació ha de se capaç de ges iona un g an olum de dades i
d’usua is, incloen -hi mile s o milions de pa ides simul ànies, així com un
c eixemen p og essiu del nomb e de lligues i o nejos.
• Rapidesa d'execució: Ha de ga an i un endimen àpid, amb emps de cà ega
mínims i una expe iència luida pe a o s els usua is.
• Sis emes de ecupe ació de dades: En cas d'e o s ècnics o desconnexions,
l'aplicació ha de eni la capaci a de ecupe a la in o mació i pe me e la
con inuació de la pa ida o l'esde enimen sense pè dua de dades.
• Segu e a : És imp escindible ga an i la segu e a de les dades dels usua is,
especialmen en els aspec es elaciona s amb la in o mació pe sonal.
3.4. Riscos i possibles obs acles
Du an el desen olupamen del p ojec e, s’han ingu en comp e di e sos iscos i obs acles
que pod ien a ec a l’a anç del eball o el endimen de l’aplicació. Els més elle an s són:
• Resis ència al can i dels usua is: Els jugado s poden se e icen s a u ili za una
no a aplicació ins que aques a no comp i amb un olum signi ica iu de
compe icions i usua is ac ius. Això po alen i l'adopció de la pla a o ma.
• Can i de ecnologia pe al a de emps i coneixemen s: Un isc comú en
p ojec es de desen olupamen és ia una ecnologia que no s’adap i al con ex ,
als ecu sos disponibles o al ni ell de coneixemen del desen olupado . To i que
po se emp ado u ili za ecnologies mode nes o popula s, aques es poden
in odui una complexi a innecessà ia si no es dominen p ou bé o si no encaixen
amb les necessi a s especí iques del p ojec e.
• P oblemes ècnics (bugs i e o s): El desen olupamen , especialmen en
aplicacions web, po p esen a e o s inespe a s (bugs) que e a din el calenda i
inicial. Aques s p oblemes poden complica la implemen ació de uncionali a s.
• Escalabili a ècnica: Si l’aplicació no es à dissenyada adequadamen pe
ges iona un g an olum d’usua is o esde enimen s, el sis ema po col·lapsa quan
c eixi el nomb e de jugado s i compe icions. Això eque eix una plani icació ècnica
acu ada.
• Segu e a de dades: La ges ió segu a de la in o mació pe sonal i inance a és
c ucial, ja que qualse ol ulne abili a po comp ome e la con iança dels usua is i
posa en isc el p ojec e.
19
4. Me odologia i igo
4.1. Me odologia
Pe a la ges ió d’aques p ojec e, s’ha op a pe la me odologia Kanban [7] a causa de la
se a lexibili a i simplici a , ideal pe a un eball indi idual. Aque a me odologia acili a
l'o gani zació de les asques mi jançan un aule isual amb columnes que ajuden a
con ola l'es a de cada asca.
Il·lus ació 6: Me odologia Kanban. Fon : Elabo ació p òpia.
S’ha e se i T ello [8] pe implemen a aques sis ema. El aule de T ello ha ingu les
següen s columnes:
• Penden s: Ha con ingu les asques que enca a no s'han comença . Aquí s’han
ecolli o es les ac i i a s que ha ien de se plani icades i iniciades en el u u .
• En cu s: Ha inclòs les asques que s’es a en duen a e me. Aques a columna ha
ajuda a eu e quines asques es an en execució pe o d e de p io i a s.
• Finali zades: Ha euni les asques que ja s'han comple a . Se eix pe a e un
seguimen dels p og essos aconsegui s i pe e isa els èxi s del p ojec e.
Addicionalmen , es a c ea un segon aule Kanban especí ic pe a ges iona les
sub asques de i ades dels pun s més g ans del p ojec e, així com pe egis a i soluciona
els e o s de ec a s du an el desen olupamen , on cada columna ha es a d’alguna pa
especi ica com Usua is, Pa ides, Lliges, e c.. Aques aule addicional ha pe mès una
ges ió més de allada i p ecisa, acili an la esolució de p oblemes i con ibuin a un millo
seguimen del eball dia i.
Aques en ocamen ha pe mès una ges ió e icaç del eball, adap an -se a can is i p io i a s
men e es man é una isió cla a del p og és del p ojec e.
20
4.2. Eines u ili zades
Pe al desen olupamen i la ges ió d’aques p ojec e, s’han e se i les següen s eines:
• Gi Hub [9]: Aques a eina s’ha u ili za pe al con ol de e sions del codi. Gi Hub ha
pe mès ges iona i segui les modi icacions del codi on de mane a e icien ,
acili an la ecupe ació de e sions an e io s.
• Visual S udio Code [10]: Ha es a l’en o n de desen olupamen in eg a (IDE) pe a
p og ama . Visual S udio Code o e eix un ampli conjun d’eines i ex ensions que
acili en la codi icació, la depu ació i el desen olupamen de l'aplicació.
• Google Mee [11]: S’ha e se i pe e les eunions amb la di ec o a del p ojec e.
• Cha GPT (OpenAI) [12]: Eina d’in el·ligència a i icial u ili zada com a supo du an
el desen olupamen , p incipalmen pe a asques d’assesso amen ècnic,
esolució de dub es pun uals, e isió de ex os i supo en la documen ació del
p ojec e.
• T ello: Aplicació pe ges iona asques segons la me odologia Kanban. Ha pe mès
una o gani zació cla a i isual dels objec ius del p ojec e, acili an la ges ió de
asques p incipals i sub asques, així com el egis e dels e o s oba s du an el
desen olupamen .
• Can a [13]: U ili zada pe c ea ima ges i il·lus acions especí iques pe a la
documen ació del p ojec e. Ha pe mès gene a g à ics isuals i esquemes de
mane a senzilla i àpida.
• Mic oso Wo d [14]: Ha es a l’eina p incipal pe edac a i es uc u a la memò ia
del p ojec e. Wo d acili a la e isió, el o ma i l'o gani zació e ec i a del con ingu
ex ual i g à ic del documen .
• PgAdmin [15]: Aplicació u ili zada pe ges iona , adminis a i isuali za la base de
dades Pos g eSQL [16] de mane a còmoda i e ec i a du an el desen olupamen
del p ojec e.
• D aw.io (Diag ams.ne ) [17]: Eina u ili zada pe dissenya els diag ames ècnics del
p ojec e, com els diag ames de na egació i els diag ames elacionals de la base de
dades, apo an cla eda isual a la documen ació.
• Ne li y [18]: Se ei e se i pe desplega l'aplicació on end de o ma àpida i
segu a, acili an les p o es d’usua i i demos acions en en o ns eals.
• Railway [19]: Pla a o ma u ili zada pe desplega el backend de l'aplicació en línia,
pe me en p o es i demos acions accessibles a a és d'in e ne .
• DonDominio [20]: Se ei e se i pe egis a i ges iona el domini web p opi del
p ojec e, acili an així la inculació del on end i backend so a un ma eix domini
pe sonali za i p o essional.
Aques a selecció d’eines ha es a clau pe assegu a un desen olupamen e icien , o dena
i àgil, així com pe o e i un esul a cohe en amb els objec ius ma ca s inicialmen .
21
5. Plani icació Tempo al
La plani icació empo al és onamen al pe assegu a una ges ió e icien de qualse ol
p ojec e. Aques a secció desc iu les di e en s ases del p ojec e, o e in una anàlisi
de allada dels ecu sos necessa is, els equisi s i les asques associades a cadascuna de
les e apes. S’ha e se i la me odologia Kanban pe al seguimen de les ac i i a s i un
Diag ama de Gan [21] pe ep esen a el p og és empo al del p ojec e. Finalmen , s’han
anali za els possibles iscos, alo an la se a p obabili a i impac e, i es plan egen mesu es
al e na i es pe mi iga -los en cas que es p odueixin.
La plani icació inicial del p ojec e es a eu e a ec ada pe di e sos ac o s pe sonals i
ècnics. To i així, s’ha pogu adap a i econdui de mane a sa is ac ò ia, ob enin un
esul a cohe en amb els objec ius ma ca s.
5.1. Recu sos
5.1.1. Recu sos Humans
• Desen olupado : El desen olupado , Ge a d Se amià, s’ha enca ega de la
implemen ació ècnica del p ojec e, incloen -hi la se a plani icació, edacció de la
memò ia, desen olupamen de l'aplicació, assegu an el complimen dels equisi s
uncionals i e minis, així com la de ensa da an el ibunal acadèmic.
• Di ec o a del p ojec e: La di ec o a, Sil ia Llo en e, ha guia l'alumne i supe isa
el p og és del p ojec e, apo an la se a expe iència pe ga an i el complimen dels
objec ius acadèmics i dels e minis es able s.
• S akeholde s: El desen olupado ha ac ua com a p ime es e de l’aplicació.
Tanma eix, és onamen al que els s akeholde s, incloen -hi els usua is inals, hagin
pa icipa ambé en la ase de p o es.
5.1.2. Recu sos Ma e ials
• O dinado i accesso is: Ha es a necessa i un o dinado d'esc ip o i o po à il amb
capaci a pe a la p og amació i execució de l'aplicació, acompanya dels
accesso is necessa is com a olí, ecla i una o dues pan alles.
• Càme es: S’ha necessi a disposa de càme es pe e i ica la connexió i la
isuali zació, en aques cas s’ha e se i an la càme a de l’o dinado po à il,
com una d’ex e na.
5.1.3. Recu sos So wa e
Els ecu sos so wa e e s se i en aques p ojec e ja han es a de alladamen explica s al
pun 4.2 Eines u ili zades d’aques a ma eixa memò ia. Es ecomana consul a aques a
secció pe ob eni in o mació comple a sob e les eines especí iques i les se es uncions
en el desen olupamen del p ojec e.

22
5.2. Desc ipció de les asques
Les asques del p ojec e s'han di idi en qua e blocs p incipals pe acili a -ne la ges ió i
l'o gani zació: Ges ió del p ojec e (GP), P esa de equisi s i disseny (RD),
Desen olupamen del p ojec e (PD/D) i Finali zació del p ojec e (F).
Es a e una plani icació inicial de les asques, pe ò, a causa del e que un dels iscos
p e is os es a acaba p oduin , a se necessa i e e la plani icació, a egin no es asques
i modi ican les ho es i els e minis de les ja exis en s.
5.2.1. Ges ió del p ojec e
• GP01 - Con ex uali zació i abas : De inició del con ex i l'abas del p ojec e en el
seu con ex acadèmic. Du ació es imada: 24 ho es.
• GP02 - Plani icació empo al: Elabo ació de la plani icació empo al pe a
l'execució comple a del TFG. Du ació es imada: 20 ho es.
• GP03 - Ges ió econòmica i sos enibili a : Es imació del cos econòmic del
p ojec e i eali zació d'una anàlisi de la se a sos enibili a . Du ació es imada: 20
ho es.
• GP04 - In eg ació inal del documen : Redacció i in eg ació inal de o s els
con ingu s necessa is pe al documen del TFG, ecollin els esul a s de les
asques GP01, GP02 i GP03. Du ació es imada: 10 ho es.
• GP05 - Redac a memò ia: Redacció de la memò ia inal del p ojec e, la qual es
a à pa al·lelamen amb el desen olupamen p ojec e ins a la se a en ega.
Du ació es imada: 60 ho es.
• GP06 - Reunions i seguimen : Reunions pe iòdiques amb la di ec o a del p ojec e
pe assegu a que es compleixin els objec ius es able s. Aques a asca es man é
ac i a du an o a la du ada del p ojec e. Du ació es imada: 10 ho es.
5.2.2. P esa de equisi s i disseny
Aques bloc inclou les asques elacionades amb l’anàlisi de les necessi a s dels usua is i
el disseny an isual com ècnic de l’aplicació.
• RD01 - P esa de equisi s d’usua i: Recollida de les necessi a s i expec a i es dels
usua is inals pe de ini les uncionali a s clau de l’aplicació. Du ació es imada: 20
ho es.
• RD02 - Rece ca i inspi ació d’in e ícies: In es igació de endències ac uals en
disseny d’in e ícies (UI) pe inspi a -se i iden i ica bones p àc iques. Es e isa an
al es aplicacions simila s pe ob eni e e ències i aplica -les a l’es uc u a isual
de l’aplicació. Du ació es imada: 8 ho es.
• RD03 - Na egació i es uc u a de l’aplicació: De inició de la na egació in e na de
l’aplicació. Es dissenya à l’es uc u a de les pan alles i les se es in e accions.
Du ació es imada: 20 ho es.
• RD04 - Disseny de la base de dades elacional: C eació de l’es uc u a de la base
de dades, incloen -hi la de inició de les aules, els camps i les elacions necessà ies
pe ges iona la in o mació de mane a e icien . Du ació es imada: 24 ho es.
23
5.2.3. Desen olupamen del p ojec e
El desen olupamen del p ojec e es di ideix en di e ses asques ècniques, des de la
con igu ació de l’en o n de desen olupamen , ins a la implemen ació de les uncionali a s
clau, passan pe la in eg ació de sis emes i p o es inals. S'ha di idi en dues ases
di e enciades pe e lec i cla amen el p océs eal del eball:
Fase de P e-desen olupamen (PD): Tasques inicials en les quals s’ha e se i el
amewo k Nex .js [22] pe amilia i za -se amb aques es ecnologies, iden i ica -ne les
limi acions i p end e una decisió sob e l'en o n ecnològic de ini iu.
Fase de Desen olupamen (D): Tasques p incipals de desen olupamen p òpiamen
di es, eali zades desp és d’ha e op a pe Reac [23] amb Vi e [24] com a en o n inal.
• PD01 – Ins al·lació i con igu ació inicial de l’en o n (Nex .js): Ins al·lació de
l'en o n inicial amb Nex .js, Visual S udio Code, Gi Hub, i con igu ació p elimina de
bases de dades locals amb pgAdmin pe comença amb les p ime es p o es.
Du ació es imada: 10 ho es.
• PD02 – Desen olupamen bàsic de ges ió d'usua is (Nex .js):
Ap enen a ge inicial de Nex .js, i desen olupamen inicial d’un sis ema bàsic
d’usua is pe en end e la se a a qui ec u a. Du ació es imada: 30 ho es.
• PD03 – Implemen ació inicial de pa ida bàsica (Nex .js): Desen olupamen
inicial de la mecànica bàsica del joc u ili zan Nex .js, e que a pe me e de ec a
limi acions ècniques i p end e la decisió de mig a cap a una al e na i a
ecnològica més adequada. Du ació es imada: 15 ho es
• D01 - Ins al·lació de l’en o n de desen olupamen inal: Ins al·lació de ini i a de
Reac amb Vi e, con igu ació de l’en o n local i con igu ació inal de les eines
necessà ies pe comença el desen olupamen de ini iu, com a a un nou p ojec e
a Gi Hub. Du ació es imada: 5 ho es.
• D02 - Implemen ació de la pan alla inicial: Desen olupamen d’una pan alla
inicial amb un sideba pe pode accedi a les al es pan alles, accessible sense
necessi a de login, que o e eix una is a gene al bàsica pe a o s els usua is.
Du ació es imada: 20 ho es.
• D03 - Implemen ació de la ges ió d'usua is C eació d’un sis ema comple de
ges ió d’usua is, incloen -hi egis e, au en icació i ges ió de pe ils. Du ació
es imada: 30 ho es.
• D04 - Implemen ació de la pa ida bàsica: Desen olupamen de la mecànica
p incipal del joc, el sis ema de ges ió de pa ides, les egles bàsiques del joc de
da ds i la base de dades pe emmaga zema els esul a s. Du ació es imada: 50
ho es.
• D05 – Implemen ació del joc en línia: Implemen ació de uncionali a s en emps
eal u ili zan WebSocke s [25] pe ges iona pa ides en línia en e usua is. Aques a
asca inclou la sinc oni zació en emps eal de les jugades, l'ac uali zació
au omà ica de les pun uacions, la ges ió de desconnexions dels jugado s i la
ecupe ació au omà ica de pa ides in e ompudes. A causa de la complexi a
ècnica dels WebSocke s, aques a asca ha compo a un pe íode addicional
d’ap enen a ge i ajus amen s ècnics. Du ació es imada: 40 ho es.
24
• D06 - Ges ió de pa ides en lligues i o nejos: Expansió de la uncionali a del joc
pe inclou e lligues i o nejos, amb la c eació d'un sis ema de pun uació au omà ica
i la ges ió de lligues i o nejos. Du ació es imada: 40 ho es.
• D07 - C eació de pe ils i pan alles pe ope ado s: Desen olupamen de no es
pan alles pe a ope ado s en les quals es puguin ges iona lligues i o nejos. Du ació
es imada: 30 ho es.
• D08 - Millo a de la In e ície d'Usua i: Millo a dels elemen s isuals p incipals com
bo ons, menús i llis a s pe a una expe iència d'usua i millo ada i una na egació
més in uï i a. Du ació es imada: 20 ho es.
• D09 - Con igu ació de càme es: P epa ació dels sis emes de càme es pe
en egis a o ansme e les pa ides. Du ació es imada: 20 ho es.
• D10 - P o es i co ecció d’e o s: Es du à a e me un pe íode in ensiu de p o es
que inclou à es s de uncionali a , de ecció i co ecció de bugs, així com
op imi zació del endimen i millo a del codi. Du ació es imada: 20 ho es.
• D11 - En o n de desplegamen : Con igu ació i posada en ma xa de l’en o n de
p oducció, con igu ació del se ido , pujada de l'aplicació i la base de dades, i
e i icació del seu uncionamen co ec e. Du ació es imada: 10 ho es.
5.2.4. Finali zació del p ojec e
La ase inal del p ojec e cons a de dues asques:
• F01 - Re isió i co ecció de la memò ia: Un cop inali za el desen olupamen s’ha
e isa i co egi la memò ia elabo ada du an el p ojec e. Du ació es imada: 20
ho es.
• F02 - P epa ació de la p esen ació inal: S’ha p epa a la p esen ació del TFG, que
inclou els aspec es més elle an s del p ojec e. Du ació es imada: 20 ho es.
25
5.3. Resum de la plani icació
Tasca
Ho es
Dependències
Ges ió del P ojec e
144
GP01
Con ex uali zació i abas
24
GP02
Plani icació empo al
20
GP01
GP03
Ges ió econòmica i sos enibili a
20
GP02
GP04
In eg ació inal del documen
10
GP03
GP05
Redac a memò ia
60
GP04
GP06
Reunions i seguimen
10
P esa de Requisi s i Disseny
72
RD01
P esa de Requisi s d'Usua i
20
RD02
Rece ca i inspi ació d'in e ícies
8
RD01
RD03
Na egació i es uc u a de l'aplicació
20
RD01
RD04
Disseny de la base de dades elacional
24
RD01
Desen olupamen del P ojec e
340
PD01
Ins al·lació i con igu ació inicial de l’en o n (Nex .js)
10
PD02
Desen olupamen bàsic de ges ió d'usua is(Nex .js)
30
PD01
PD03
Implemen ació inicial de pa ida bàsica (Nex .js)
15
PD02
D01
Ins al·lació de l’en o n de desen olupamen inal
5
D02
Implemen ació de la pan alla inicial
20
D01
D03
Implemen ació de la ges ió d'usua is
30
D02
D04
Implemen ació de la pa ida bàsica
50
D03
D05
Implemen ació del joc en línia
40
D04
D06
Ges ió de pa ides en lligues i o nejos
40
D05
D07
C eació de pe ils i pan alles ope ado s
30
D06
D08
Millo a de la In e ície d'Usua i
20
D07
D09
Con igu ació de càme es
20
D04
D10
P o es i co ecció d'e o s
20
D07
D11
En o n de desplegamen
10
D02
Finali zació del P ojec e
40
F01
Re isió/Co ecció memò ia
20
F02
P epa ació de la p esen ació inal
20
F01
To al
596
Taula 1: Taula esum de plani icació. Fon : Elabo ació p òpia
32
6.6. Imp e is os
És onamen al disposa d'una ese a pe a on a els possibles iscos que s’ha ingu en
comp e i e i a que inguin un impac e signi ica iu en el p essupos global. En aques cas
conc e , s'han iden i ica una sè ie de iscos amb po encial impac e econòmic, de alla s a
l’apa a 5.6 Ges ió de iscos. Aques s imp e is os no es an eni en comp e al 100% sinó
que es a e segons el pe cen a ge de p obabili a es imada de que succeïssin i l’impac e
que enien en el p ojec e. Conc e amen , es a aplica el següen c i e i de càlcul:
• Si l’impac e és al : S’ha ese a el 100% del alo espe a
• Si l’impac e és mi jà: S’ha ese a el 50% d’aques pe cen a ge.
• Si l’impac e és baix: S’ha es ima un 25% del pe cen a ge assigna .
Veiem en de all cada un dels iscos:
• E o s de disseny de la base de dades: Un mal disseny de la base de dades pod ia
p o oca ha e de edissenya -la pa cialmen o o almen , e que compo a ia
emps addicional pe ees uc u a i mig a les dades.
Al se un impac e al i eni una p obabili a del 60%, es a decidi ese a pe
aques imp e is el 100% del 60% dels 480€ que ha íem des ina a la asca RD04
(Disseny de la base de dades elacional). To al: 288€
• Es imació inco ec a de les ho es: Si les ho es necessà ies pe a cada asca han
es a mal calculades, es pod ia eque i dedica -hi més emps, la qual cosa
implica ia un augmen dels cos os labo als.
Al eni un impac e mi ja i eni una p obabili a del 50%, es a decidi ese a pe
aques imp e is el 50% del 50% de les asques de desen olupamen D02-D08 que
enien un o al de 4.400 €. To al: 1.100€
• P oblemes ècnics (bugs i e o s): El desen olupamen de p og ama i so in
gene a p oblemes ècnics i e o s imp e is os que poden eque i més ho es de
depu ació o ins i o , eesc ip u a de codi.
El seu impac e e a baix, pe ò amb un 90% de p obabili a s, així que es a ese a el
25% del 90% de les asques de depu ació D10 amb un o al de 365€. To al: 82€
• P oblemes amb els ecu sos ma e ials: En cas que els disposi ius u ili za s es
acin malbé du an el desen olupamen , s’hau an de subs i ui pe què són
imp escindibles. Pe calcula el cos , es a calcula la p obabili a que alles cada
ma e ial, mul iplicada pel seu p eu inicial.
Disposi iu
% Fallada
Cos inicial
Cos
O dinado
2
500 €
10 €
Pan alles
2
200 € * 2
8 €
Ra olí
5
40 €
2 €
Tecla
5
30 €
2 €
To al
22 €
Taula 8: Es imació de cos os imp e is os. Fon : Elabo ació p òpia.
Així doncs, el cos o al pe a cos os imp e is os se à de 288 € + 1.100 € + 82 € + 22€ , en
un o al de 1.492 €.

33
6.7. P essupos inal
Tenin en comp e o l'an e io , a con inuació es mos a una aula amb el esum dels cos os
o als.
Tipus
Cos
Recu sos humans
11,768 €
Ha dwa e
90 €
So wa e
50 €
Cos os indi ec es
300 €
Con ingències
1.832 €
Imp e is os
1.492 €
To al
15.532 €
Taula 9: P essupos inal. Fon : Elabo ació p òpia.
6.8. Replani icació
El p ojec e es a inicia u ili zan el amewo k Nex .js, pe ò la manca de coneixemen sob e
aques a ecnologia i la di icul a a egida ha e de decidi que es podia se ende i za al
se ido o al clien , an e que la co ba d'ap enen a ge os ele ada. Això a compo a la
necessi a de comença el p ojec e de nou, aques cop u ili zan Reac amb l'en o n Vi e,
e que a de i a en la decisió de ma icula -se a la con oca ò ia ex ao dinà ia i alla ga el
pe íode de desen olupamen .
A més, es a de ec a que les ho es inicialmen assignades a les asques no e en del o
ajus ades, i es an ha e de c ea no es asques.
Aques a si uació ha eque i un e isa com això ha a ec a a les pa ides del p essupos ,
di e encian els cos os en e:
• Imp e is os: Si els iscos associa s ja ha ien es a con empla s en la ges ió de
iscos.
• Con ingències: Si es ac a de despeses no p e is es inicialmen .
6.8.1. Recu sos Humans:
Es an ha e d’a egi es asques no es: PD01, PD02 i PD03, amb un o al de 55 ho es.
Tanma eix, es poden descomp a 5 ho es de la asca D01 i 10 ho es de la D02, ja que la
no a con igu ació de l'en o n amb Vi e e a més coneguda. El o al ne d’ho es ex es és, pe
an , de 40 ho es, equi alen s a 800 €, que an des ina de la pa ida de con ingències, ja
que aques imp e is no es a a con empla en la ges ió de iscos.
D’al a banda, es a comp o a que la asca D04 (implemen ació de la pa ida bàsica) no
disposa a de p ou ho es pe cob i el desen olupamen del mode de joc en línia. Pe aques
mo iu, es a c ea la no a asca D05 (implemen ació del joc en línia), amb una du ada de
40 ho es (800 € addicionals). Com que aques isc es a a con empla a la ges ió de iscos,
aques s 800 € es an ca ega a la pa ida d'imp e is os.
34
6.8.2. Ha dwa e
L’augmen de 80 ho es de eball ha eque i un ecalcul de l’amo i zació dels disposi ius
u ili za s. La ó mula aplicada ha es a :
𝐴𝑚𝑜𝑟𝑡𝑖𝑡𝑧𝑎𝑐𝑖ó = 𝐶𝑜𝑠𝑡 (€) ∗ 80
𝑉𝑖𝑑𝑎 ú𝑡𝑖𝑙 ∗ 220 ∗ 6
Disposi iu
Cos
Vida Ú il
Amo i zació
Asus F555L
500 €
4 anys
8 €
Moni o LG
200 €
5 anys
2 €
Moni o Asus
200 €
5 anys
2 €
Ra olí RGB Rainbow Gamming Ki
30 €
3 anys
1 €
Tecla Logi ech
40 €
3 anys
1 €
To al
14 €
Taula 10: Es imació de cos os pe ecu sos ma e ials(2). Fon : Elabo ació p òpia.
Aques o al de 14 €, es a aga a de la pa ida de con ingències.
6.8.3. So wa e
Pel que a al so wa e. L’únic que a augmen a a se el comp e de Railway, que és
mensual, com que es an a egi 3 mesos pe la ma icula ex ao dinà ia es an aga a 15€
de la pa ida de con ingències.
6.8.4. Cos os Indi ec es
També cal ecalcula els cos os indi ec es associa s al emps addicional. Si pe qua e
mesos s’ha ien calcula 300 €, aplican una egla de es, pe es mesos més an se 225 €
que es an aga a de la pa ida de con ingències.
6.8.5. P essupos inal eplani ica
Finalmen podem eu e que de la pa ida inicial de con ingències de 1.832 € se’n an
gas a 800 € de ecu sos humans, 14 € de ha dwa e, 15 € de so wa e i 225 € de cos os
indi ec es, quedan així un o al posi iu de 778 €.
Pe la pa de imp e is os, el o al e a de 1.492 i se’n an gas a 800€ de ecu sos humans,
quedan un o al posi iu de 692€.
Tipus
Cos
Recu sos humans
13,368 €
Ha dwa e
104 €
So wa e
65 €
Cos os indi ec es
525 €
Con ingències
778 €
Imp e is os
692 €
To al
15.532 €
Taula 11: P essupos inal eplani ica . Fon : Elabo ació p òpia
35
6.9. Con ol de ges ió
És necessa i es abli mecanismes de con ol que pe me in iden i ica des iacions
inespe ades i assegu a que es compleixin les p e isions eali zades inicialmen . Pe al de
e -ho, de ini em uns indicado s que se an e isa s i ac uali za s de mane a egula .
Aques s indicado s inclouen:
• Des iació del emps dedica a una asca: Aques a mesu a es calcula com a
Ho es es imades - Ho es eals. Se eix pe iden i ica si s'han dedica més o
menys emps del que es p e eia inicialmen , pe a cada asca.
• Des iació de cos os pe asca: S'ob é a pa i de la ó mula: (Ho es es imades -
Ho es eals) * Cos pe ho a es ima . Aques indicado ajuda a a alua l'impac e
econòmic de les des iacions en el emps dedica a les asques.
• Des iació o al dels cos os gene als: Es calcula es an el cos gene al eal del
cos gene al es ima : Cos gene al es ima – Cos gene al eal. Pe me eu e si els
cos os gene als del p ojec e s'ajus en a les p e isions.
• Des iació dels cos os pe imp e is os: Aques a mesu a compa a el cos es ima
pe imp e is os amb el cos eal d'aques s: Cos es ima pe imp e is os – Cos
eal imp e is os. Ajuda a ges iona millo les ese es econòmiques des inades a
imp e is os.
• Des iació de les ho es o als del p ojec e: Es calcula com a Ho es es imades
o als del p ojec e - Ho es eals dedicades al p ojec e. Pe me anali za si el
p ojec e a ança segons el calenda i p e is .
• Des iació de cos os o als del p ojec e: Aques a des iació s'ob é de la es a en e
el cos o al es ima i el cos o al eal: Cos o al es ima – Cos o al eal.
P opo ciona una isió gene al de la si uació inance a del p ojec e.
Aques s indicado s pe me an una ges ió e icien del p ojec e, ajudan a iden i ica à ees
que eque eixen a enció i a p end e decisions in o mades pe man eni el p ojec e dins dels
lími s de emps i p essupos es able s.
36
7. P esa de Requisi s
Aques apa a de alla el p océs de p esa de equisi s, un pas onamen al pe ga an i que
l'aplicació compleixi amb les necessi a s dels usua is. L'objec iu és iden i ica les
uncionali a s essencials que han de o ma pa del desen olupamen inicial.
7.1. P esa de Requisi s d'Usua i
Pe de e mina els equisi s de l'aplicació, es a du a e me una anàlisi de necessi a s
basada en dues on s p incipals:
• Consul a amb usua is ecu en s de pa ides de da ds, an jugado s ec ea ius
com p o essionals.
• Anàlisi de pla a o mes de da ds exis en s, iden i ican pun s ebles i opo uni a s de
millo a en expe iència d'usua i, uncionali a i accessibili a .
A pa i d'aques a in es igació, es an de ini di e en s ols d'usua i i els seus equisi s
especí ics.
7.1.1. Rols d’usua i
Usua i (Jugado ):
• Regis e, inici de sessió i ges ió del pe il.
• C eació i con igu ació de pa ides indi iduals amb opcions com pun uació inicial.
• Pa icipació en pa ides en línia amb sinc oni zació en emps eal.
• Visuali zació de l'his o ial de pa ides i es adís iques pe sonals.
• Insc ipció a lligues o o nejos en línia.
• Visuali zació de esul a s i calenda is de compe icions.
• Juga pa ides p og amades de les compe icions.
Ope ado :
• C eació i edició de o nejos i lligues.
• Inici, ges ió i i de les compe icions.
• Ges ió dels empa ellamen s de mane a au omà ica.
• Re isió i ajus amen de esul a s, pa i s i classi icacions.
Adminis ado
• Capaci a de pode modi ica els ols dels usua is.
• Con ol o al sob e l'aplicació.
37
7.1.2. Requisi s uncionals p incipals
Pa ides indi iduals:
• In e ície senzilla i in uï i a pe acili a el joc.
• Ma cado s cla s, pun uació en g an pe a cada jugado
• His o ial de o ns.
• In oducció senzilla de pun uacions i opció de co ecció.
• Di e ses o mes d'in odui pun uacions ( ecla , bo ons, diana in e ac i a)
Pa ides en línia:
• Lobby inicial pe pode ia con a qui juga
• Connexió es able amb sinc oni zació en emps eal.
• Con ol au omà ic del o n pe e i a e o s.
• Opcions en inali za la pa ida: o na a juga , abandona .
• Res iccions de so ida: si s’abandona la pa ida un cop iniciada es dona à pe
pe duda.
• Temps de econnexió: s’ha de pe me e als jugado s ecupe a la pa ida en cas de
desconnexió empo al.
Lligues i o nejos:
• C ea empa ellamen s au omà ics amb o ma s especí ics pe lliga o o neig.
• Classi icació ac uali zada en emps eal
• Possibili a d’ajus a les egles i els o ma s de compe ició.
7.1.3. Requisi s uncionals secunda is
A lla g e mini, l'aplicació pod ia in eg a no es uncionali a s que millo in l'expe iència de
joc i l'o gani zació de compe icions:
• In oducció a càme es.
• Opció pe què l’ope ado pugui e isa les pa ides en cas d'in acció.
• His o ial de pa ides pe usua i.
• Mode en enamen .
• Possibili a d'espec ado en una pa ida en di ec e.
• Sis ema de pagamen s in eg a pe a o nejos i lligues amb insc ipció mone i zada.
7.1.4. Requisi s no uncionals
• Usabili a : In e ície cla a, isualmen a ac i a i adap able.
• Rendimen : Ges ió e icien de múl iples usua is i sinc oni zació sense e a ds.
• Segu e a : P o ecció de dades i au en icació segu a.
• Escalabili a : Capaci a de c eixemen i compa ibili a amb di e en s disposi ius.

38
7.2. Rece ca i inspi ació d'in e ícies
Pe ga an i una expe iència d’usua i òp ima i un disseny in uï iu, es a eali za una ece ca
p è ia anali zan di e ses aplicacions elacionades amb els da ds i al es pla a o mes que
ges ionen pa ides en línia. Aques a in es igació a pe me e iden i ica bones p àc iques
en la p esen ació de pun uacions, la ges ió de pa ides i la na egació.
7.2.1. Inspi ació d’in e ícies d’al es aplicacions
Pe a la ep esen ació cla a i senzilla de l'his ò ic de o ns, es a p end e com a e e ència
Nakka, que des aca pe la se a simplici a en la isuali zació de dades. Es a eni en
comp e que la in o mació sigui accessible d’un cop d’ull i que els jugado s puguin segui
àcilmen l’e olució de la pa ida.
Il·lus ació 8: Inspi ació d’in e ície e olució pa ida. Fon : Nakka [3].
Pe al sis ema d’in oducció de pun uacions, es a anali za la in e ície de Da Coun e ,
que o e eix di e ses opcions pe in odui els pun s de mane a e icien i adap able a
di e en s ipus de jugado s.
Il·lus ació 9: : Inspi ació d’in e ície, in oducció de pun uacions. Fon : Da Coun e [4].
39
També es a p end e com a e e ència la mecànica de lobby en línia, on els jugado s poden
c ea una pa ida o uni -se a una ja exis en , ga an in una expe iència luida i àcil d’u ili za .
Il·lus ació 10: Inspi ació d'in e ície, lobby en línia. Fon : Da Coun e [4].
Pel que a a l’es è ica i l’elecció dels colo s, es a p end e com a e e ència Chess [29], una
aplicació pe juga a escacs en línia, o i no se una aplicació de da ds, la se a es uc u a
de ges ió de pa ides en línia se eix com a e e ència. Chess des aca pe la se a in e ície
simple i e icaç, pe un disseny ne , minimalis a i in uï iu.
S’ha busca que la in e ície ingui una na egació senzilla i sigui isualmen a ac i a, amb
bo ons g ans i una pale a de colo s que a a o eixi la comodi a isual.
Il·lus ació 11: Inspi ació d’in e ície, disseny. Fon : Chess [29].
40
Aques a in es igació ha es a clau pe de ini una in e ície cla a, mode na i uncional,
combinan les millo s p àc iques de di e ses aplicacions exis en s pe adap a -les a les
necessi a s especí iques del p ojec e.
7.2.2. P incipis de disseny adop a s
A pa i de l’anàlisi d’aques es aplicacions, es an de ini les següen s di ec ius de disseny
pe a la nos a pla a o ma:
Na egació senzilla i accessible:
• Un menú la e al pe manen amb les opcions p incipals pe acili a la na egació.
• Una disposició dels elemen s cla a i o denada, e i an sob ecà ega d'in o mació.
Disseny op imi za pe a di e en s disposi ius:
• Bo ons g ans i àcilmen accessibles pe ga an i una bona expe iència en aule es
i o dinado s.
• In e ície esponsi e pe adap a -se a di e en s pan alles i esolucions.
• Es è ica mode na i còmoda:
• Una in e ície osca, simila a Chess, pe millo a la llegibili a i edui la a iga isual.
• Ús de Tailwind CSS [26] pe ga an i cohe ència isual, lexibili a i acili a de
pe sonali zació.
Aques es decisions assegu en que l’aplicació no només sigui uncional, sinó que ambé
sigui ag adable d’u ili za , mode na i adap able a les necessi a s dels jugado s.
41
8. Disseny i implemen ació de l’aplicació
Aques a secció desc iu l’a qui ec u a gene al de l’aplicació, la sepa ació de
esponsabili a s en e capes i les ecnologies u ili zades pe o e i una expe iència de joc
mode na, escalable i amb in e acció en emps eal.
L'aplicació s’ha dissenya seguin una a qui ec u a clien -se ido , amb una cla a
sepa ació en e el on end i el backend. Ambdós es comuniquen mi jançan una API REST
pe a les ope acions habi uals, WebSocke s pe a la ges ió en emps eal de les pa ides i
Pee JS [30] pe a la ansmissió de ídeo, assegu an així una expe iència d'usua i luïda i
in e ac i a.
A la igu a següen es ep esen a l'es uc u a de l'a qui ec u a:
Il·lus ació 12: A qui ec u a gene al. Fon : Elabo ació p òpia.
48
Pe implemen a aques a comunicació, s’u ili za Axios [35] ,una llib e ia Ja aSc ip basada
en p omeses pe e pe icions HTTP des del na egado . Axios pe me en ia dades al
backend mi jançan mè odes com ge , pos , pu o dele e, i eb e’n les espos es de mane a
asínc ona.
A més, s’ha de ini una con igu ació comuna al i xe api.js, on es con igu a una ins ància
pe sonali zada d’Axios amb la URL base del backend i amb in e cep o s globals. Aques a
ins ància és eu ili zada pe o s els se eis, i els in e cep o s ac uen com a uncions que
s’execu en au omà icamen abans de cada pe ició o desp és de cada espos a. S’u ili zen
pe :
• Injec a el oken d’au en icació a cada pe ició (si n’hi ha).
• Ges iona edi eccions si el oken ha expi a .
• Regis a o modi ica les espos es de l’API abans d’a iba als componen s.
Aques a es uc u a pe me que o es les pe icions siguin consis en s i segu es.
Hooks pe sonali za s (Cus om Hooks)
Un hook és una uncionali a p òpia de Reac que pe me u ili za ca ac e ís iques
a ançades com l’es a o els e ec es secunda is dins de componen s uncionals, acili an
així una ges ió més e icien i modula de la lògica de l’aplicació.
S'han desen olupa di e sos hooks pe sonali za s pe encapsula lògica eu ili zable i
millo a la ne eja del codi:
• useGameEngine: Ges iona la lògica del mo o de joc.
• useGameSocke : Con ola la in e acció amb WebSocke s dins del con ex de
joc.
• useAd ancedFil e s: Aplica il es a ança s a llis a s, com lligues o o nejos.
Aques s hooks pe me en simpli ica la lògica dins dels componen s i omen a la
eu ili zació en di e en s pa s de l'aplicació.
Comunicació amb el Backend
La comunicació amb el backend es eali za de es mane es:
• API REST: Pe ope acions sínc ones com au en icació, ges ió de dades
d'usua i, lligues o his o ial de pa ides.
• WebSocke : Pe uncionali a s en emps eal com la sinc oni zació de pa ides
online.
• Pee JS: Pe la ansmissió de ídeo en di ec e en les pa ides en línia.
Les c ides API passen semp e pels se ices, men e que la connexió WebSocke és
ges ionada p incipalmen des de l’Socke Con ex i e o çada pe hooks especiali za s.
La base de dades es à comple amen encapsulada dins del backend, amb el on end
in e ac uan únicamen a a és dels canals es able s.

49
8.1.4. Na egació de l'aplicació
Una na egació ben dissenyada es clau pe o e i una expe iència d'usua i luïda, in uï i a i
segu a. En aques p ojec e, s'ha implemen a un sis ema de na egació basa en el
concep e de SPA, u ili zan la llib e ia Reac Rou e .
Reac Rou e és una llib e ia que pe me de ini i ges iona u es dins d'una aplicació Reac
de mane a dinàmica, sense necessi a de eca ega la pàgina. G àcies a aques a eina, és
possible c ea una na egació es uc u ada, ges iona u es p o egides, edi eccions, u es
dinàmiques i con ola l'accés a di e en s is es segons l'es a de l'usua i.
Les u es de l'aplicació s'han classi ica segons les condicions d'accés, di e encian en e:
• Ru es públiques
• Ru es nomes si l’usua i no es à au en ica
• Ru es nomes si l’usua i es à au en ica
• Ru es es ingides pe ol
En cas que un usua i accedeixi a una u a es ingida sense pe misos, es edi igeix
au omà icamen a la pàgina de login o a un missa ge d’e o , segons el cas.
La implemen ació de allada del sis ema d'au en icació i la ges ió de ols es desc iu a
l'apa a 8.5 Au en icació i Segu e a , més enda an .
Un elemen clau pe acili a la na egació és el menú la e al anomena Sideba , p esen de
o ma ixa a o a l'aplicació. Aques Sideba pe me un accés àpid i cons an a les seccions
p incipals, adap an les opcions isibles segons l'es a de l'usua i (au en ica o no) i
pe me en pode col·lapsa -la pe op imi za l’espai. Això ga an eix que l'usua i semp e
disposi d'una es uc u a cla a pe mou e's pe l'aplicació de mane a e icien i segu a.
A con inuació, es po eu e un diag ama que mos a el lux gene al de na egació dins de
l'aplicació.
50
Il·lus ació 14: Diag ama de na egació. Fon : Elabo ació p òpia.
8.1.5. Disseny isual i d’UX/UI
Des del p ime momen , el disseny de l’aplicació s’ha o ien a cap a una in e ície cla a,
mode na i cohe en , p io i zan la simplici a i l’ús d’un mode osc pe a a o i la comodi a
isual du an un ús p olonga .
S’ha u ili za el amewo k Tailwind CSS, que ha pe mès de ini es ils de mane a lexible i
man eni una línia isual uni o me a a és de o a l’aplicació.
Un al e aspec e onamen al ha es a la implemen ació d’un disseny esponsiu,
assegu an que l'aplicació sigui o almen uncional i accessible des de qualse ol
disposi iu, ja sigui o dinado , aule a o elè on mòbil. Pe aconsegui -ho, s’han u ili za les
u ili a s de Tailwind CSS pe adap a dinàmicamen la disposició dels elemen s i s'ha
51
dissenya una e sió especí ica de ce es pàgines, pe a pan alles pe i es, op imi zan
l’expe iència d’usua i en disposi ius mòbils.
A més, pe millo a la comunicació en e l’aplicació i l’usua i, s’ha e ús de no i icacions
ipus Toas i de modals de con i mació. Aques s elemen s o e eixen un eedback
immedia no in usiu, in o man l’usua i sob e accions eali zades, e o s o con i macions
necessà ies, con ibuin així a una expe iència d’usua i més luïda i con olada.
A con inuació es mos a una cap u a de pan alla de la pàgina p incipal, on es po eu e el
disseny isual de l’aplicació, el menú la e al i l’es è ica gene al basada en mode osc.
Pe eu e una isió comple a de o es les pan alles i seccions implemen ades, es po
consul a l’Annex1, que ecull exemples de les pàgines de joc, lligues, e sió mòbil, i al es
pan alles elle an s.
Il·lus ació 15: Disseny isual aplicació. Fon : Elabo ació p òpia.
52
8.2. Backend: A qui ec u a i API REST
El backend de l’aplicació ha es a desen olupa u ili zan Node.js com a en o n d’execució
i Exp ess com a amewo k p incipal, seguin una a qui ec u a modula i escalable,
dissenyada pe ges iona de mane a e icien múl iples connexions simul ànies,
especialmen en con ex os de comunicació en emps eal. Pa al·lelamen , s'ha u ili za
Sequelize com a ORM pe acili a la in e acció amb una base de dades elacional
Pos g eSQL, assegu an així una ges ió obus a i e icien de la pe sis ència de dades.
8.2.1. Node.js
Pe al desen olupamen del backend s'ha escolli Node.js, un en o n d’execució de
Ja aSc ip basa en el mo o V8 de Google Ch ome que pe me execu a codi al se ido . La
se a a qui ec u a asínc ona i o ien ada a esde enimen s el a especialmen adequa pe a
aplicacions mode nes que eque eixen ges iona múl iples connexions simul ànies de
mane a e icien , com és el cas de la comunicació en emps eal mi jançan WebSocke s.
Les p incipals aons pe ia Node.js han es a :
• La se a capaci a pe ges iona ope acions d'I/O no bloquejan s, es a di , pe me
con inua a enen al es pe icions men e espe a la espos a d’ope acions com
consul es a base de dades, millo an el endimen en en o ns amb mol a
concu ència.
• La possibili a de compa i el ma eix llengua ge (Ja aSc ip ) en e on end i
backend, e que simpli ica la in eg ació amb Reac /Vi e i agili za el
desen olupamen .
• El seu ampli ecosis ema de llib e ies disponibles a a és de NPM, que acili a la
implemen ació de uncionali a s di e ses.
• La se a escalabili a , ideal an pe a p ojec es lleuge s com pe aplicacions més
complexes.
Du an la selecció de ecnologies, es an alo a al es opcions com ASP.NET (C#) [30],
pe ò es a desca a pe la se a majo complexi a , meno lexibili a amb Ja aSc ip i una
a qui ec u a més pesada, poc adequada pe a les necessi a s d'aques p ojec e.
8.2.2. Exp ess
Pe cons ui l'API REST i ges iona el se ido , s'ha u ili za Exp ess, un amewo k
minimalis a pe a Node.js. Exp ess des aca pe la se a simplici a , lexibili a i baix consum
de ecu sos, pe me en desen olupa una a qui ec u a cla a i modula sense imposa
es uc u es ígides.
Els a an a ges que han mo i a l'ús d'Exp ess inclouen:
• La ges ió e icien de u es i la possibili a d'o gani za l'API de mane a escalable.
• El supo na iu pe a middlewa es, an pe sonali za s com ex e ns, que ha
pe mès in eg a uncionali a s com l'au en icació, la segu e a , la ges ió d'e o s i la
con igu ació pe sonali zada. També s'ha e ús de middlewa es de e ce s com co s
pe ges iona l’accés en e dominis.
• La se a àcil in eg ació amb al es ecnologies com Pos g eSQL, Sequelize i
WebSocke s, cob in o es les necessi a s del p ojec e.
53
• L'ampli supo comuni a i i la compa ibili a amb nomb osos paque s disponibles
a NPM.
La combinació de Node.js i Exp ess ha p opo ciona una base lleuge a, e icien i àcilmen
ex ensible pe al backend, assegu an un desen olupamen àgil i una in eg ació òp ima
amb el on end basa en Reac .
8.2.3. Es uc u a del backend
A con inuació es p esen a el diag ama de l’es uc u a gene al del backend, on s’il·lus a
com s’o gani zen i in e accionen les di e en s pa s que composen el se ido de
l'aplicació.
Il·lus ació 16: A qui ec u a del backend, API REST. Fon : Elabo ació p òpia.
A qui ec u a API Res
El backend segueix un pa ó es uc u al inspi a en l’a qui ec u a adicional Model-Vis a-
Con olado (MVC). En el con ex d'una API REST, on no es gene a cap in e ície isual, la
" is a" es subs i ueix pe espos es en o ma JSON, que són consumides pel on end. Pe
aques mo iu, s’ha op a pe una o gani zació basada en la sepa ació de Models,
Con olado s i Ru es, ga an in una cla a di isió de esponsabili a s dins del sis ema.

54
L'API REST desen olupada amb Exp ess.js, és la esponsable de ges iona o es les
pe icions HTTP(S) p o inen s del on end, seguin un lux es uc u a i modula que
ga an eix la segu e a , la cohe ència i l'e iciència en el p ocessamen de les sol·lici uds.
Cada pe ició que a iba al se ido passa inicialmen pe una cadena de middlewa es, an
globals com especí ics, enca ega s de alida , in e p e a i p o egi la in o mació abans
que la sol·lici ud sigui di igida cap a la se a u a co esponen . Aques a p ime a e apa
ga an eix que només les pe icions co ec amen o mades i au o i zades accedeixin a la
lògica de negoci.
El p océs que segueix cada pe ició és el següen :
Aplicació de Middlewa es Ex e ns
• CORS Middlewa e: Con ola l'accés en e dominis, pe me en que només clien s
au o i za s puguin in e ac ua amb l'API.
• Exp ess JSON Middlewa e: Con e eix au omà icamen el cos de les pe icions en
o ma JSON a objec es Ja aSc ip , acili an -ne la manipulació pos e io .
• Cookie Pa se Middlewa e: Llegeix i in e p e a les cookies en iades pel clien ,
especialmen ú il pe a la ges ió de sessions i au en icació.
Aplicació de Middlewa es P opis
• Au hen ica ion Middlewa e: Ve i ica la p esència i alidesa del oken
d'au en icació (JWT) en cada pe ició p o egida, ga an in que només usua is
au en ica s accedeixin a de e minades u es.
• Role Middlewa e: Comp o a els pe misos associa s al ol de l'usua i (usua i,
ope ado , adminis ado ) abans de pe me e l'execució de uncionali a s
es ingides.
Ges ió de Ru es (Rou es)
Un cop supe a s els middlewa es, la pe ició es di igeix a la Ru a co esponen segons
l'endpoin sol·lici a .
Cada u a s'enca ega únicamen de eb e la pe ició i edi igi -la cap al Con olado
adequa , man enin una es uc u a cla a i desacoblada.
Lògica de Negoci (Con olle s)
Els Con olle s con enen la lògica p incipal de cada uncionali a . Aquí es p ocessen les
dades ebudes, es eali zen les alidacions necessà ies i es ges ionen les ope acions
p incipals de l'aplicació.
Quan es eque eix accés o modi icació de dades pe sis en s, els con olle s in e ac uen
amb els Models de ini s amb Sequelize.
Accés a la Base de Dades (Models + Sequelize)
Els Models ep esen en l'es uc u a de les aules de la base de dades i pe me en execu a
ope acions com consul es, inse cions o ac uali zacions.
Aques accés es eali za mi jançan l'ORM Sequelize, que acili a la comunicació amb la
base de dades elacional de mane a abs ac a i segu a.
55
T ans o mació de Dades (DTOs)
Abans d'en ia la espos a al clien , les dades ob ingudes es p ocessen a a és dels Da a
T ans e Objec s (DTO’s).
Aques a capa s'enca ega de o ma a i il a la in o mació, assegu an que només es
e o nin les dades necessà ies, millo an la segu e a i l'e iciència en la comunicació amb
el on end.
Ges ió de la Respos a (Middlewa e ResponseHandle )
Finalmen , el ResponseHandle s'enca ega de ges iona o es les espos es de l'API,
assegu an que segueixin un o ma comú amb camps com:
• Succés: Camp booleà que indica si la pe ició ha es a co ec e o no
• Da a: Objec e que con e les dades de espos a
• Messages: Con e els missa ges, ja sigui missa ges d’e o s o in o ma ius.
Aques en ocamen ga an eix una comunicació cla a i uni o me amb el clien , simpli ican
la ges ió d'e o s i l'anàlisi de les espos es pe pa del on end.
56
8.3. Base de dades
L’aplicació u ili za una base de dades elacional pe ges iona la pe sis ència d'in o mació
de mane a es uc u ada i segu a. Aques model pe me de ini elacions cla es en e
en i a s, assegu an la cohe ència i in eg i a e e encial, a més de acili a consul es
e icien s i escalables.
Les necessi a s p incipals del p ojec e inclouen:
• La ges ió d'usua is i els seus ols.
• L'en egis amen de pa ides, o ns i esul a s.
• L'adminis ació de lligues i classi icacions.
• El càlcul i emmaga zema ge d'es adís iques pe a cada jugado .
Pe cob i aques s equisi s, s'ha op a pe u ili za un sis ema obus i escalable, capaç de
ges iona olums c eixen s de dades i man eni un al endimen .
8.3.1. Pos g eSQL
S’ha escolli Pos g eSQL com a Sis ema de Ges ió de Base de Dades (SGBD) pe la se a
iabili a , po ència i excel·len supo pe a es uc u es i elacions complexes. Pos g eSQL
és una solució de codi obe àmpliamen econeguda, ideal pe ga an i la in eg i a de les
dades i supo a en o ns amb al a concu ència.
Du an el p océs de selecció es an alo a al es opcions, com es mos a a con inuació:
Sis ema
Ca ac e ís iques
Incon enien s
MySQL
Popula i àcil d'u ili za .
Bon endimen en consul es
simples.
Menys op imi za pe consul es
complexes i al a concu ència.
MongoDB
Base de dades NoSQL, lexible i
escalable.
No és elacional, e que hagués
complica la ges ió de lligues i
es adís iques.
Taula 14: Compa ació sis emes de bases de dades. Fon : Elabo ació p òpia.
En la següen aula podem eu e que Pos g eSQL o e eix el millo equilib i en e es uc u a
elacional, escalabili a i endimen , e que el con e eix en la millo opció pe aques
p ojec e.
8.3.2. Sequelize
Pe acili a la in e acció en e el backend i la base de dades, s’ha u ili za Sequelize, un
ORM (Objec -Rela ional Mapping). Aques a eina pe me ges iona la base de dades
mi jançan models de ini s en Ja aSc ip , e i an l'esc ip u a di ec a de consul es SQL.
Els a an a ges de l'ús de Sequelize són:
• Simpli icació de la ges ió de aules: La de inició de models en codi acili a la
c eació i man enimen de l'es uc u a de la base de dades.
• De inició cla a de elacions: Pe me es abli elacions 1:1, 1:N i N:M d'una mane a
in uï i a i cohe en amb la lògica de l'aplicació.
• Facili a pe a mig acions: Ges iona els can is en l'esquema de la base de dades
de o ma con olada.
57
• Millo a de la segu e a : P o egeix con a injeccions SQL g àcies a l'ús de consul es
p epa ades.
• In eg ació na u al amb Node.js: Al es a desen olupa en Ja aSc ip , encaixa
pe ec amen amb l'ecosis ema de l'aplicació.
L'ús de Sequelize ha pe mès man eni una a qui ec u a ne a i man enible, alho a que es
ga an eix una comunicació e icien amb la base de dades.
8.3.3. Es uc u a de la base de dades
El model de dades del p ojec e segueix una es uc u a elacional, dissenyada pe ga an i
la cohe ència i acili a la ges ió de les en i a s p incipals de l'aplicació.
Les p incipals aules del model són:
• Use s: Ges iona la in o mació dels usua is.
• Games: Emmaga zema les dades de les pa ides.
• Tu ns: Regis a cada o n juga .
• S a s: Gua da les es adís iques dels jugado s.
• Leagues: Ges iona les lligues.
• League_Use s: Ges iona els usua is insc i s en una lliga i la se a classi icació.
• Tou namen s: Ges iona els o nejos.
• Tou namen _Use s: Ges iona els usua is insc i s en un o neig.
A con inuació es mos a el diag ama en i a - elació (ER) que ep esen a g à icamen
l’es uc u a de la base de dades i les elacions en e les aules p incipals del sis ema.
64
8.5. Comuniacio P2P amb Pee JS
Pe complemen a la comunicació en emps eal basada en WebSocke s, l’aplicació
inco po a Pee JS com a solució pe a connexions pee - o-pee (P2P) en e usua is. Aques a
a qui ec u a esul a especialmen ú il pe a la ansmissió de dades mul imèdia com
l’àudio o el ídeo (pe exemple, si els jugado s compa eixen ima ge de càme a du an una
pa ida), ja que e i a passa o a la in o mació pel se ido cen al, eduin la la ència i l’ús
de ecu sos.
Pee JS és una llib e ia que simpli ica la c eació de connexions WebRTC en e na egado s.
A di e ència dels WebSocke s, que man enen una connexió cen ali zada amb el se ido ,
WebRTC pe me una comunicació di ec a en e clien s, desp és d’una ase d’in e can i de
senyals (signaling).
El p océs gene al és el següen :
• C eació del Pee : Cada usua i c ea una ins ància Pee amb un iden i icado únic.
• In e can i de senyals (signaling): Mi jançan el se ido Pee JS i la connexió
WebSocke p è iamen es able a, els usua is s’in e can ien la in o mació
necessà ia pe es abli una connexió di ec a.
• Connexió P2P: Un cop es able a, la comunicació en e usua is es eali za
di ec amen , sense passa pel backend.
• T ansmissió de dades: Es poden en ia luxos de ídeo, àudio o qualse ol al e
ipus d’in o mació en emps eal.
El se ido Pee JS s’ha desplega com una ins ància p òpia dins la in aes uc u a del
backend, uncionan de o ma pa al·lela al se ido de WebSocke s. Aques se ido ac ua
com a in e media i únicamen du an la ase d’inici de connexió (signaling), pe ò no
ansme dades un cop la connexió s’ha es able co ec amen .
Bene icis de Pee JS:
• E iciència: La ansmissió di ec a edueix la cà ega del se ido cen al.
• Baixa la ència: Millo a la luïdesa de les comunicacions mul imèdia.
• Escalabili a : Redueix els colls d’ampolla al backend en escena is amb mol s
usua is.
• Simul aneï a : Pe me es abli múl iples connexions P2P independen s.

65
8.6. Au en icació i Segu e a
L’aplicació implemen a un sis ema d’au en icació basa en JSON Web Tokens (JWT)
combina amb cookies H pOnly pe ga an i la segu e a i e i a ulne abili a s com el
C oss-Si e Sc ip ing (XSS) i el Roba o i de okens (Token The ).
S’ha p io i za la segu e a en o s els p ocessos d’au en icació, inco po an un sis ema de
Re esh Token, ges ió de sessions, p o ecció de connexions WebSocke , enc ip ació segu a
de con asenyes i mecanismes de ecupe ació de comp es.
A con inuació, es desc iuen les p incipals mesu es i luxos de segu e a .
8.6.1. JSON Web Tokens (JWT)
JWT és un es ànda d d’au en icació basa en okens que pe me e i ica la iden i a d’un
usua i de mane a segu a i escalable. Algunes de les se es ca ac e ís iques més impo an s
són:
• Au en icació sense es a (S a eless): No eque eix emmaga zema sessions al
se ido , ja que el oken con é la in o mació necessà ia.
• Segu e a millo ada amb signa u a digi al: U ili za HMAC SHA256 pe signa els
okens, e i an manipulacions.
• Escalabili a : pe me balanceja pe icions en e múl iples se ido s sense
sinc oni za sessions.
A més, els okens enen un emps de ida limi a i s'in alida au omà icamen el seu ús un
cop expi en, e o çan la segu e a .
8.6.2. Emmaga zema ge del oken: Cookies H pOnly
Pe e i a ulne abili a s com XSS i Token The , quan un usua i inicia sessió, el se ido
gene a els JWT i els en ia el clien mi jançan cookies H pOnly. Les a an a ges de e se i
cookies H pOnly són:
• Inaccessibles des de Ja aSc ip : P o ecció au omà ica con a sc ip s maliciosos.
• Manejamen au omà ic: El na egado s'enca ega d'inclou e la cookie a cada
pe ició al se ido , el qual alida el JWT que con e a a es del middlewa e
d’au en icacio.
• Més segu e a : El oken no queda exposa al clien e i an el Roba o i de okens.
S’ha desca a l’ús de localS o age o sessionS o age degu al isc inhe en de se llegi s en
cas d'un a ac XSS.
8.6.3. Flux d’au en icació en API REST i eno ació de okens
L’aplicació u ili za dos ipus de okens pe ges iona la sessió:
• Access Token: Té una du ada cu a (1 ho a) i s’en ia en cada pe ició al backend que
alida que sigui co ec e.
• Re esh Token: Té una du ada més lla ga (1 dia) i se eix pe ob eni un nou Access
Token quan aques caduca.
66
Mecanisme de eno ació de okens:
• Quan l’Access Token caduca, la següen pe ició al backend e o na un e o 401
Unau ho ized.
• L’in e cep o d’api.js de ec a aques e o i a una pe ició al backend a un endpoin
de egene ació de oken, en ian el Re esh Token pe ob eni un nou Access Token.
• Si el Re esh Token és àlid, el backend gene a un nou Access Token i es o na a e
la pe ició inicial.
• Si el Re esh Token ha caduca o és in àlid, l’usua i és desconnec a i edi igi al
login.
8.6.4. Au en icació i Segu e a en WebSocke s
Pe ga an i la segu e a en les connexions WebSocke , igual que en l’API es , s’u ili za un
sis ema de alidació basa en JWT. Això impedeix que usua is no au o i za s puguin es abli
connexions WebSocke sense una sessió àlida.
Quan el clien in en a es abli una connexió WebSocke amb el se ido , ha d’inclou e
l'Access Token en la pe ició de connexió.
• El se ido WebSocke alida el oken abans de pe me e la connexió mi jançan el
middlewa e d’au en icacio.
• Si el oken és àlid, la connexió WebSocke s’es ableix i l’usua i po in e ac ua amb
el se ido .
• Si el oken no és àlid o ha expi a , la connexió WebSocke es ebu ja i el clien ha
de eau en ica -se.
Aques mecanisme assegu a que només els usua is au en ica s puguin u ili za les
uncionali a s en emps eal i e i a connexions no au o i zades o a acs malin enciona s.
8.6.5. Tipus d'inici de sessió: Usua i i Google OAu h
L’aplicació pe me dos ipus d'inici de sessió:
Inici de sessió amb Usua i i Con asenya:
• L’usua i po egis a -se mi jançan un nom d’usua i, un co eu elec ònic i una
con asenya.
• La con asenya es gua da de mane a segu a a la base de dades mi jançan
l’algo isme bc yp [37] un algo isme de hashing especialmen dissenya pe a
aplicacions de segu e a .
• bc yp aplica un p océs de sal ing i hashing i e a iu pe di icul a a acs pe o ça
b u a o pe dicciona i. El sal ing a egeix un alo alea o i únic a cada con asenya
abans de e -ne el hash, de mane a que dues con asenyes iguals gene en esul a s
di e en s. El hash esul an con é aques sal , cosa que pe me alida la
con asenya quan l’usua i inicia sessió.
• Du an l’au en icació, quan l’usua i in odueix les c edencials, el se ido a se i
aques sal inclòs en el hash gua da pe aplica el ma eix p océs a la no a
con asenya i compa a si els esul a s coincideixen. Això assegu a que el sis ema
67
pugui e i ica co ec amen la iden i a de l’usua i o i que els hash siguin di e en s
pe con asenyes iguals.
• Un cop e i icades les c edencials, el se ido gene a un JWT (JSON Web Token) i
l’en ia al clien dins d’una cookie H pOnly, que no po se accedida des de
Ja aSc ip pe e i a a acs de ipus XSS.
Inici de sessió amb Google OAu h:
• L’usua i po au en ica -se mi jançan el seu comp e de Google.
• Un cop au en ica amb Google, aques e o na un ID Token, que el on end en ia al
se ido .
• El backend alida aques oken a a és de la p òpia API de Google.
• Si l’email del oken coincideix amb un usua i exis en a la base de dades, es
eu ili za aques usua i. Si no, es c ea un nou usua i au omà icamen , sense
necessi a d’es abli una con asenya.
• Finalmen , el se ido gene a el JWT i l’en ia igualmen en una cookie H pOnly,
man enin la segu e a i consis ència amb l’al e mè ode d’au en icació.
Ambdós luxos compa eixen el ma eix mecanisme de sessió i ges ió de okens, pe ò la
di e ència p incipal es el p océs inicial de alidació de c edencials.
En el diag ama següen podem eu e el lux que segueix l'inici de sessió i la ida dels okens,
an si és amb Google OAu h o amb inici de sessió adicional.
Il·lus ació 21: Fluxe d'au en icacio. Fon : Elabo ació p opia
8.6.6. Recupe ació i can i de con asenya
En cas que un usua i oblidi la se a con asenya, el sis ema pe me inicia un p océs de
ecupe ació segu . Quan l'usua i sol·lici a la ecupe ació, es gene a un oken alea o i
associa al seu comp e, amb una da a de caduci a limi ada. Aques oken es egis a a la
base de dades i s'en ia pe co eu elec ònic a l'usua i, jun amen amb un enllaç pe
accedi al o mula i de can i de con asenya. Si l'usua i u ili za l'enllaç dins el pe íode de
alidesa del oken, pod à in odui una no a con asenya. Un cop la con asenya es can ia
68
o el oken caduca, aques queda in alida au omà icamen , e i an -ne l'ús pos e io i
ga an in la segu e a del p océs.
Pel que a al can i de con asenya pe pa d'usua is au en ica s, el sis ema eque eix que
es alidi la con asenya ac ual abans de pe me e de ini una no a con asenya. Aques a
no a con asenya es xi a mi jançan l'algo i me Bc yp , aplican un sal únic pe a cada
egis e, e que e o ça la p o ecció con a a acs de o ça b u a i al es in en s de
comp ome e les c edencials.
8.6.7. Eliminació d’usua is
Quan un usua i sol·lici a elimina el seu comp e, el sis ema duu a e me un p océs
d'eliminació segu a de les se es dades pe sonals. Conc e amen , s'esbo en les dades
sensibles, com la con asenya i el co eu elec ònic associa al comp e. A més, el nom
d'usua i es eemplaça pel nom genè ic "Jugado Elimina ", assegu an així que no es pugui
iden i ica la pe sona o iginal.
To i això, pe al de man eni la in eg i a i cohe ència de les dades his ò iques del sis ema,
especialmen en pa ides dispu ades o lligues o gani zades, el egis e de l'usua i no
s'elimina comple amen de la base de dades. Aques en ocamen pe me p ese a la
açabili a de les in e accions i esul a s dins de l'aplicació, o ga an in la p o ecció de la
p i aci a de l'usua i.
69
9. En o n de desplegamen
L’aplicació es à desplegada en un en o n cloud, u ili zan se eis que p opo cionen una
solució e icien pe al desen olupamen i p o es.
Ac ualmen , s’ha op a pe :
• Ne li y: pe al on end, ja que la se a e sió g a uï a és su icien pe a les
necessi a s del p ojec e.
• Railway: pe al backend i la base de dades, ja que pe me desplega aplicacions
backend i bases de dades sense cos os inicials i amb un p océs de con igu ació
àpid i senzill.
To i això, aques es e sions inicials, són su icien s pe al p ojec e, pe ò no pe una
aplicació en p oducció.
En el u u , es pod ia passa a una e sió de pagamen de Ne li y i Railway, pe ò són opcions
bas an ca es, pe an , la in enció en un u u és mig a l’aplicació a un se ido p opi o a
una in aes uc u a més obus a com Amazon Web Se ice (AWS) [38], pe millo a el
con ol, la segu e a i la capaci a d'escalabili a .
9.1. F on end – Ne li y
El on end, desen olupa amb Reac i Vi e, es à desplega a Ne li y, ap o i an les se es
uncionali a s de CDN global, desplegamen au omà ic i in eg ació con ínua amb Gi Hub.
• Desplegamen àpid i senzill amb in eg ació au omà ica.
• CDN global pe millo a la eloci a de cà ega.
• Ce i ica HTTPS au omà ic amb Le 's Enc yp .
S’ha adqui i un domini pe sonali za 9Da s, incula a Ne li y.
El ce i ica HTTPS s’ac i a au omà icamen mi jançan Le 's Enc yp .
To es les connexions HTTP es edi igeixen a HTTPS pe e i a comunicacions insegu es.
9.2. Backend – Railway
El backend, desen olupa amb Node.js i Exp ess, es à desplega a Railway, que o e eix
desplegamen au omà ic i escalabili a .
• Desplegamen àcil i ges ió de bases de dades in eg ada.
• Va iables d'en o n p o egides pe segu e a .
• Railway p opo ciona connexions HTTPS, p o egin les comunicacions.

70
9.3. Base de dades – Railway (Pos g eSQL)
Railway ambé allo ja la base de dades Pos g eSQL, cosa que pe me un accés àpid i segu .
• Connexions enc ip ades mi jançan TLS.
• Backups au omà ics pe p o egi la in o mació.
• Limi ació d'accés només al backend de l’aplicació.
9.4. Domini - DonDominio
Pe aques p ojec e s’ha adqui i el domini 9da s.es a a és del se ei DonDominio, que
s'ha u ili za an pe a la ges ió de DNS com pe al co eu elec ònic associa al p ojec e.
A a és de DonDominio s’han con igu a els se ido s DNS, u ili zan els següen s
se ido s pe de ec e (ns1.dondominio.com, ns2.dondominio.com)
A la con igu ació DNS s’han c ea les següen s en ades:
CNAME
• *.9da s.es → Redi igeix qualse ol subdomini no de ini al domini p incipal allo ja a
Ne li y, assegu an que o es les u es i sub u es uncionin co ec amen en el
on end.
• api.9da s.es → Apun a al backend allo ja a Railway, man enin el ma eix domini
base que el on end i e i an p oblemes amb les cookies segu es (H pOnly) i les
polí iques CORS.
ANAME
• 9da s.es → Aques a en ada apun a di ec amen al domini base p opo ciona pe
Ne li y. L’ús de l’ANAME pe me edi igi el domini a el (@) a una ad eça IP
ges ionada pe Ne li y, assegu an una cà ega di ec a de la pàgina p incipal.
A més, s’ha con igu a un comp e de co eu elec ònic associa al domini a a és del p opi
panell de DonDominio, pe me en la ges ió de comunicacions o icials del p ojec e.
Pe a l’en iamen de co eus elec ònics des de l’aplicació (pe exemple, no i icacions,
ecupe ació de con asenya, e c.), s’ha con igu a un se ido SMTP amb les dades
p opo cionades pe DonDominio. Aques a in eg ació pe me en ia co eus de mane a
segu a i p o essional amb el domini p opi @9da s.es.
71
9.5. Fu u – Mig ació a un se ido p opi
A mesu a que l’aplicació c eixi, es pod ia conside a mig a a un en o n més obus , com
pe exemple AWS, pe ob eni més con ol i escalabili a . En un se ido p opi, el ce i ica
HTTPS ja no es ges iona ia au omà icamen com en Ne li y, pe la qual cosa cald ia gene a
un ce i ica SSL/TLS amb Le 's Enc yp pe ges iona les connexions segu es i au oma i za
la eno ació del ce i ica mi jançan Ce bo .
Pel que a a la ges ió de a iables d’en o n, men e que Railway les adminis a
au omà icamen , en un se ido p opi cald ia desa les c edencials en i xe s a iables
d’en o n segu es, u ili za un ges o de sec e s com AWS Sec e s Manage o Vaul , i e i a
exposa in o mació delicada en el codi, es ablin pe misos adequa s.
Si el on end i el backend es despleguen en el ma eix se ido , es poden millo a la
segu e a i el endimen es ablin les connexions in e nes en HTTP en lloc d’HTTPS, ja que
es comunica ien dins del ma eix en o n. També es po bloqueja l’accés públic al backend,
con igu an -lo pe què només accep i connexions des de la ma eixa aplicació i no des
d’In e ne , i implemen a un i ewall que limi i l’accés ex e n a la base de dades, pe me en
només connexions des del backend.
Finalmen , en un se ido p opi cald ia ges iona la cà ega de pe icions u ili zan un
balancejado de cà ega si hi ha di e sos se ido s, i moni o i za l’ús de ecu sos pe
op imi za l’escalabili a de l’aplicació.
9.6. Segu e a in o mà ica
El p ojec e ha adop a di e ses mesu es de segu e a pe p o egi la in o mació dels usua is
i ga an i la in eg i a i con idenciali a de les dades, d'aco d amb les bones p àc iques
habi uals en el desen olupamen d'aplicacions web mode nes.
Les mesu es implemen ades són les següen s:
• P o ecció con a injeccions SQL: S'ha u ili za l'ORM Sequelize pe ges iona o es
les in e accions amb la base de dades Pos g eSQL. Aques ORM e i a la
conca enació manual de consul es SQL i p o egeix con a a acs d'injecció
mi jançan pa ame i zació au omà ica de consul es.
• Ges ió segu a de con asenyes: Les con asenyes es gua den de o ma segu a
amb l’algo isme bc yp js, que aplica sal ing i hashing i e a iu pe di icul a a acs i
ga an i que cada con asenya ingui un hash únic. Du an l’au en icació, es
compa a el hash gene a amb el gua da , sense desenc ip a la con asenya
o iginal.
• Au en icació obus a: L’au en icació es ges iona mi jançan JSON Web Tokens
(JWT) emmaga zema s en cookies H pOnly, p o egin les sessions con a a acs XSS
i pe me en una ges ió sense es a . També es con empla la u u a inco po ació de
e esh okens pe millo a la pe sis ència i la segu e a .
• Segu e a en les comunicacions: To es les comunicacions en e el na egado i el
se ido es an ia HTTPS. El ce i ica SSL/TLS és p opo ciona au omà icamen pe
Le 's Enc yp an a Ne li y com a Railway, assegu an que les dades es ansme in
de mane a enc ip ada i p o egida con a in e cepcions. Railway ambé assegu a
connexions HTTPS amb TLS pe a l'API REST i la base de dades.
72
• Ges ió de a iables sensibles: Les a iables d’en o n amb in o mació sensible
(com claus d'API o sec e s JWT) es ges ionen mi jançan el sis ema de con igu ació
de Railway. En un u u , amb un se ido p opi, es ecomana u ili za un ges o de
sec e s, com AWS Sec e s Manage o HashiCo p Vaul .
• Polí ica CORS i SameSi e: S’han de ini polí iques CORS es ic i es pe e i a
accessos no au o i za s des d’o ígens desconegu s. Les cookies s’en ien amb
l’opció SameSi e=S ic pe e i a a acs CSRF, combinades amb Secu e pe ga an i
la se a ansmissió només so a HTTPS.
73
10. Lleis i egulacions
Du an el desen olupamen del p ojec e es an eni en comp e di e ses lleis i no ma i es
aplicables pe al d'assegu a -ne la legali a i la segu e a . Conc e amen , les següen s
no ma i es són elle an s pe al p ojec e:
10.1. RGPD
El Reglamen gene al de p o ecció de dades (RGPD) [38] és una no ma i a eu opea que
egula la ecollida, emmaga zema ge i ac amen de dades pe sonals dels usua is, amb
l'objec iu de ga an i -ne la segu e a , p i aci a i d e s onamen als. Aques a no ma i a
eque eix una ges ió esponsable de les dades pe sonals, p opo cionan mecanismes
pe què els usua is puguin accedi , ec i ica o sup imi les se es dades.
10.2. LSSI-CE
La Llei de se eis de la socie a de la in o mació i come ç elec ònic (LSSI-CE) [40] és una
no ma i a espanyola que egula els aspec es legals dels se eis digi als o e s pe mi jans
elec ònics. Aques a llei obliga a p opo ciona cla amen in o mació sob e la iden i a del
p o eïdo del se ei, així com documen s legals com l'a ís legal, condicions d'ús i polí ica
de p i aci a .
10.3. Llicències de p og ama i i p opie a in el·lec ual
Du an el desen olupamen del p ojec e s'han u ili za llib e ies i amewo ks ex e ns,
especialmen Reac , Exp ess, Sequelize, Vi e i al es dependències secundà ies com
Socke .io, TailwindCSS i bc yp js. La e isió de les llicències s'ha eali za consul an
explíci amen les pàgines o icials dels p ojec es i els seus eposi o is de Gi Hub,
con i man que o es aques es llib e ies u ili zen la llicència MIT [41] . Aques a llicència és
mol pe missi a i pe me u ili za , modi ica i dis ibui el p og ama i de mane a obe a i
senzilla, sense es iccions signi ica i es pe a p ojec es pe sonals, acadèmics o
come cials.
10.4. Polí ica de cookies
L'aplicació a se i cookies H pOnly pe ges iona la sessió de l'usua i, inc emen an així
la segu e a i p o egin les dades pe sonals, ja que no poden se accedides di ec amen pe
sc ip s des del na egado . En aques sen i , segons la no ma i a de la Agencia Española de
P o ección de Da os [42], les cookies ècniques (com pe exemple les cookies H pOnly pe
la ges ió de la sessió) no eque eixen consen imen , només in o mació cla a.
80
[30] Pee JS. URL: h ps://pee js.com/
[31] Sequelize. URL: h ps://sequelize.o g/
[32] Angula . URL: h ps://angula .de /
[33] Vue. URL: h ps:// uejs.o g/
[34] C ea e Reac App. URL: h ps://c ea e- eac -app.de /docs/ge ing-s a ed/
[35] Axios. URL: h ps://axios-h p.com/es/docs/in o
[36] ASP.NET. URL: h ps://do ne .mic oso .com/es-es/lea n/aspne /wha -is-aspne
[37] bc yp js. Llicència de p og ama i. URL:
h ps://gi hub.com/dcodeIO/bc yp .js/blob/mas e /LICENSE
[38] Amazon Web Se ices. URL: h ps://aws.amazon.com/
[39] Reglamen Gene al de P o ecció de Dades (RGPD). URL: h ps://eu -
lex.eu opa.eu/legal-con en /ES/TXT/?u i=CELEX%3A32016R0679
[40] Llei de Se eis de la Socie a de la In o mació i Come ç Elec ònic (LSSI-CE). URL:
h ps://www.boe.es/busca /ac .php?id=BOE-A-2002-13758
[41] MIT License. URL: h ps://opensou ce.o g/licenses/MIT
[42] Agencia Española de P o ección de Da os (AEPD). Guia sob e cookies. URL:
h ps://www.aepd.es/si es/de aul / iles/2020-07/guia-cookies.pd

81
15. Annex1 – Visuali zació ima ges aplicació
Figu a 1 – Pan alla d'inici amb el sideba obe
Figu a 2 – Fo mula i d'inici de sessió amb el sideba col·lapsa
Figu a 3 – Missa ge d'e o a l'inicia sessió
82
Figu a 4 – Fo mula i de egis e d'usua i
Figu a 5 – Con igu ació d'una pa ida local
Figu a 6 – Pan alla de joc amb diana in e ac i a
83
Figu a 7 – Pan alla de joc amb in oducció de pun uació pe bo ons
Figu a 8 – Pan alla de joc amb in oducció de pun uació o al
Figu a 9 – Mode mòbil amb diana
84
Figu a 10 – Mode mòbil amb aula de o ns
Figu a 11 – Missa ge de con i mació pe abandona la pa ida
Figu a 12 – Pan alla del lobby online
85
Figu a 13 – In i ació de pa ida online
Figu a 14 – Pa ida online amb càme es dels jugado s
Figu a 15 – Es adís iques d'una pa ida inali zada

86
Figu a 16 – Vis a de llis a de lligues amb il es
Figu a 17 – Fo mula i de c eació de lliga
Figu a 18 – De all de lliga amb classi icació
87
Figu a 19 – Selecció de jo nada en una lliga
Figu a 20 – Vis a de o nejos amb il es
Figu a 22 – Fo mula i de c eació de o neig
88
Figu a 23 – De all del o neig amb jugado s insc i s
Figu a 24 – Quad e del o neig amb enc euamen s
Figu a 25 – Pe il d’usua i amb es adís iques i pa ides
89
Figu a 26 – Con igu ació del pe il d’usua i
Figu a 27 – Can i de con asenya
Figu a 28 – Elimina comp e