Uni e sidad Complu ense de Mad id
T abajo de in de g ado del G ado en Ingenie ía
In o má ica. Facul ad de In o má ica.
Desa ollo de una aplicación de ges ión de álbumes de c omos de ú bol
Au o es:
Jo ge FAJARDO VIZUETE
I án FERNÁNDEZ SÁNCHEZ
Miguel VEGA OCHOA
Di ec o :
An onio SARASA CABEZUELO
1
2
AGRADECIMIENTOS
Que ía ag adece les a mis pad es oda la paciencia y odo el apoyo que me han
dado du an e la ca e a. También dedicá selo a mi pa eja, Ana, que ha es ado
apoyándome en los momen os más du os y si es oy aquí, en el inal de la ca e a,
en g an pa e es po ella. Ag adece a An onio, po su ayuda a lo la go del abajo.
También que ía ag adece an o a los p o eso es como a los compañe os con
los que he compa ido es a ca e a, que, aunque no odo han sido expe iencias
buenas, he ap endido un poco de cada uno de ellos. Y po úl imo, dedicá selo a
Miguel y a I án que son lo mejo que me lle o de la ca e a.
Fdo: Jo ge Faja do Vizue e
En p ime luga , me gus a ía ag adece a mis pad es odo el apoyo que me han
dado du an e es a impo an e e apa, y a mi pa eja, Daniela, po habe es ado en
los momen os más di íciles y cuando más dudas enía de si se ía capaz de
consegui lo. También engo que ag adece a odos los p o eso es po su
implicación, ya que de odos he ap endido muchas cosas impo an es pa a mi
o mación, y en especial a An onio po oda su ayuda y paciencia.
Po úl imo, pe o no menos impo an e, ag adece les a Jo ge y Miguel odo el
abajo y el es ue zo que han hecho y el apoyo y ayuda que me han dado du an e
la ca e a. Han sido los mejo es compañe os que se ha podido ene y, sob e
odo, los mejo es amigos que pod ía encon a .
Fdo: I án Fe nández Sánchez
Que ía ag adece y dedica el TFG a mis pad es po es a conmigo du an e la
ca e a que an o me ha cos ado y que les ag adezco no habe se endido
conmigo. También dedicá selo a Ága a, mi pa eja, que an o me ha ayudado en
la ca e a, apoyándome y nunca dejando que me indie a. Al es o de amilia es,
amigos y po supues o a I án y Jo ge po que son dos g andes amigos que me
lle o de la ca e a.
Fdo: Miguel Vega Ochoa
3
Resumen
Es e abajo consis e en un álbum de c omos i ual de la liga española de ú bol.
B inda al usua io la posibilidad de colecciona odos los c omos de la
compe ición. Además de es a uncionalidad básica de cualquie colección,
ambién o ece la posibilidad de hace po as o esponde p egun as que ayudan
al usua io a ob ene monedas que pos e io men e pod án se u ilizadas pa a
consegui el obje i o inal, que es comple a la colección.
También o ece una uncionalidad impo an e e inno ado a que es pode
in e cambia los c omos epe idos que ya no in e esan con el es o de los
usua ios que engan algún c omo epe ido que ambién se quie a deshace de
él, pa a así in e ac ua con o os usua ios y en e odos log a e mina la
colección.
Abs ac
This TFG consis s o a i ual ca d album abou he Spanish i s league. I pe mi s
he use he possibili y o collec ing all he ca ds ha he compe i ion has. Besides
he collec ion unc ionali y, he use s can also answe ques ions abou he league
and make he weekly p edic ions ha will gi e him coins o spend in ca ds so he
can inish he collec ion be o e anyone.
Apa om all o ha , he use has he choice o changing ca ds wi h o he use s
on he applica ion. Tha b ings he oppo uni y o ha e a ca d ha you s ill don'
ha e. This will also help o he use s o ha e he collec ion, so e e yone can ha e
un, and no one will lea e he game because hey a en' able o inish he
collec ion.
4

5
Índice
Capí ulo 1. In oducción 9
1.1. Mo i ación 9
1.2. Obje i os 9
1.3. Es uc u a de la memo ia 10
Chap e 1. In oduc ion. 13
1.1. Mo i a ion 13
1.2. Objec i es 13
1.3. Memo y s uc u e 14
Capí ulo 2. Es ado del a e. 16
2.1. Panini [1]. 16
2.2. Panini Collec o s[3]. 16
2.3. MyPanini Digi alCollec ion[4]. 17
2.4. Ne C om[5]. 17
2.5. Quiniela[6]. 17
2.6. LaLiga San ande [2]. 18
Capí ulo 3. Especi icación de equisi os. 19
3.1. Ac o es 19
3.2. Módulos 19
3.2.1. Módulo Usua io 19
3.2.2. Módulo C eación de con enido 26
3.2.3. Módulo In e acción de usua ios 32
Capí ulo 4. Tecnologías empleadas 41
4.1 MySQL [7] 41
4.2 phpMyAdmin [8] 41
4.3 Apache [9] 42
4.4 Visual S udio Code [10] 42
4.5 La a el [11] 42
4.6 XAMPP [14] 43
4.7 Gi Hub [15] 43
4.8 Gi [16] 43
4.9 PHP [17] 44
4.10 HTML [18] 44
4.11 CSS [19] 45
4.12 Boo s ap [20] 45
6
Capí ulo 5. A qui ec u a de la aplicación y modelo de da os 46
5.1. A qui ec u a de la aplicación. 46
5.2. Modelo de da os. 48
Capí ulo 6. Implemen ación 53
6.1. Usua io 53
6.1.1. Regis o 53
6.1.2. Inicio de sesión 54
6.1.3. P egun as 55
6.1.4. Po a 57
6.1.5. Comp a de c omos 61
6.1.6. In e cambia c omos 63
6.1.7. Lis ado de equipos 67
6.1.8. Lis ado de c omos en el equipo 68
6.1.9. Lis ado de c omos epe idos 70
6.1.10. Pe il 71
6.2 Adminis ado 73
6.2.1. Añadi equipo 73
6.2.2. Lis ado de equipos 75
6.2.3. Elimina equipo 75
6.2.4. Edi a equipo 76
6.2.5. Añadi c omo 77
6.2.6. Lis ado de c omos 78
6.2.7. Elimina c omo 78
6.2.8. Edi a c omo 79
6.2.9. Añadi p egun a 80
6.2.10. Lis ado de p egun as 81
6.2.11. Elimina p egun a 81
6.2.12. Edi a p egun a 82
6.2.13. Añadi po a 83
6.2.14. Lis ado de po as 85
6.2.15. Elimina po a 85
6.2.16. Edi a po a 86
6.2.17. Na ba Adminis ado 87
6.3 Acceso al eposi o io Gi hub del p oyec o 88
Capí ulo 7. Conclusiones y abajo u u o 89
7.1. Conclusiones 89
7
7.2. T abajo u u o 90
Chap e 7. Conclusions and u u e wo k 92
7.1. Conclusions 92
7.2. Fu u e wo k 92
Capí ulo 8. Apo aciones pe sonales 95
8.1. Jo ge Faja do Vizue e 95
8.2. I án Fe nández Sánchez 96
8.3. Miguel Vega Ochoa 98
Bibliog a ía 100
Anexo I: Guía del usua io 102
A-Adminis ado 102
A-1 Login 102
A-2 Página de inicio 103
A-3 Añadi 104
A-3.1 Equipos 105
A-3.2 C omos 105
A-3.3 P egun as 106
A-3.4 Jo nada/Po a 107
A-4 Lis as 107
A-4.1 Equipos 108
A-4.2 C omos 109
A-4.3 P egun as 110
A-4.4 Jo nada/Po a 111
B-Usua io 111
B-1 Página P incipal 111
B-2 Regis o 112
B-3 Página de inicio 112
B-4 P egun as 113
B-5 Po a 116
B-6 Comp a 118
B-7 Cambia 122
B-8 Repe idos 124
B-9 Lis ado 126
B-10 Pe il 128
8
15
● Chap e 4. Technology used.
This chap e desc ibes he equipmen and p og amming languages ha we e
used.
● Chap e 5. A chi ec u e and da a model.
This chap e desc ibes he da a model used in he so wa e, he da abase used
and he ables ha o m i
● Chap e 6. Implemen a ion.
This chap e desc ibes he unc ionali y o he web applica ion, by adding
cap u es o he code and explaining i .
● Chap e 7. Conclusions and u u e wo k.
This chap e alks abou he conclusions ha we e ob ained om he p ojec ,
such as some ideas ha can help his p ojec be be e in a possible u u e
de elopmen .
● Chap e 8. Pe sonal wo k.
In his chap e each membe o he g oup alks abou i s pe sonal wo k o he
p ojec .
● Bibliog aphy
This pa con ains he links o he isi ed websi es and e e ences ha helped
his p ojec o be done.
2. A achmen I: Use ´s manual.
This a achmen con ains a guide ha he use can ollow o s a using he page
in a simple and in ui i e way.

16
Capí ulo 2. Es ado del a e.
En es e capí ulo llamado es ado del a e, se a a da una explicación de cuáles
han sido y son las aplicaciones que se u ie on en cuen a pa a pode llega a la
idea inal de es e abajo, cogiendo los pun os ue es de cie as aplicaciones y
obse ando que les al aba, pa a que de es a mane a es e abajo no u ie a
nada que en idia le a la compe encia.
2.1. Panini [1].
G upo Panini es una edi o ial dedicada al sec o de los c omos. Con iene odo
ipo de colecciones, incluyendo, en e o os, la de la amosa Liga San ande [2].
Tiene dos ipos de colecciones den o de la liga española, que son:
● Colección del álbum de c omos ísico
● Colección del álbum de c omos i ual.
Pa a pode comple a es as colecciones, es necesa io acudi a un
es ablecimien o a comp a sob es de c omos.
Es o es lo que hace de es e p oyec o único y más comple o que es as
colecciones de álbumes, ya que incluso pa a comple a la colección de c omos
i ual es necesa io adqui i los c omos de mane a ísica, y pagando.
Es a aplicación es comple amen e g a ui a.
2.2. Panini Collec o s[3].
Es a aplicación, ambién pe enece al g upo Panini. Consis e en desca ga el
álbum que quie as comple a de los disponibles que ienen, y empeza la
colección, escaneando c omos. La elación que iene con el p oyec o es la
colección de una liga, den o de las posibilidades que ienes de colecciona en
Panini. Sin emba go, ambién es de pago, po lo que no la hace an llama i a
como el p oyec o.
17
2.3. MyPanini Digi alCollec ion[4].
Es a colección de c omos se puede encon a en la Play S o e ambién.
Consis e en la comp a de c omos ísicos de la colección ísica, en donde
algunos de es os c omos con ienen un código pa a me e en la aplicación y
consegui sob es i uales.
Es a aplicación no iene nada que en idia le a es e p oyec o, ya que además
que es de pago, no pod ás ap o echa odos los c omos, ya que solo en
algunos casos apa ece á el c omo con el código. Comple a una colección aquí
se á complicado.
2.4. Ne C om[5].
Es una web que almacena di e en es ipos de álbumes de c omos digi ales,
disponibles en la Play S o e[6]. Consis e en una colección de c omos de un ipo
en conc e o,según la aplicación que desees desca ga . Es bas an e o iginal y la
aplicación es a ac i a de e . Es a aplicación es bas an e simila a es e abajo,
ya que iene la mane a de consegui oda la colección disponible de mane a
g a ui a.
2.5. Quiniela[6].
La quiniela es un mé odo de juego ísico y online diseñado po Lo e ías y
Apues as del Es ado[7]. Consis e en la p edicción de esul ados de la jo nada
de ú bol. Compi es con a odo el mundo que juegue la Quiniela es a semana.
No hay mucha di e encia de la Quiniela con espec o a la po a de la aplicación,
pe o es g a ui a, a la pa que más simpli icada. No es necesa io pensa en oda
la can idad de pa idos que se juegan, po lo que es más sencillo ace a . Es o
18
es así po que la aplicación es á hecha pa a pasa el a o y di e i e, y no
impo a an o la compe encia.
2.6. LaLiga San ande [2].
La liga San ande es la compe ición po excelencia en España. Con iene los
clubes más impo an es del ú bol eu opeo y mundial, y po eso, en e o as
cosas, se ha elegido es a liga. Su aplicación con iene los equipos de es a
compe ición, de la misma o ma que con iene a sus jugado es. Ha se ido en
es e abajo como ayuda pa a hace la Base de da os y así pode ealiza la
aplicación de la mane a más eal posible.
19
Capí ulo 3. Especi icación de equisi os.
En es e capí ulo se an a desc ibi los equisi os de so wa e, donde se explica
el compo amien o del sis ema, incluyendo una se ie de casos de uso donde se
de allan las unciones de cada ipo de usua io.
3.1. Ac o es
Los ac o es que in e end án en los casos de uso de inidos pa a la aplicación
son:
● Usua io: pod á isualiza e in e ac ua con la aplicación.
● Adminis ado : es el usua io enca gado de ealiza las a eas de
man enimien o de la aplicación.
3.2. Módulos
La uncionalidad de la aplicación se ha ag upado en 3 módulos uncionales:
● Módulo Usua io
● Módulo C eación de Con enido
● Módulo In e acción de Usua ios
En los siguien es apa ados se desa ollan cada uno de es os módulos.
3.2.1. Módulo Usua io
El módulo usua io engloba oda la uncionalidad ela i a a la ges ión de usua ios
y al sis ema de au en icación. En la igu a 1 se mues a el diag ama de casos de
uso asociado al módulo.
20
Figu a 1. Diag ama de casos de uso del módulo Usua io.
En la igu a 1 se mues a un diag ama de los casos de uso pe enecien es al
módulo Usua io. Es e módulo incluye los casos pe enecien es al ac o Usua io
y al ac o Adminis ado .
A con inuación, se an a desc ibi los casos de uso que o man pa e de es e
módulo.
Caso de uso
#1
Regis o 1
Iden i icado
C1.1
Ac o
Usua io

21
Desc ipción
Regis o de un usua io pa a pode usa la aplicación web.
P econdición
No exis a ningún usua io ya egis ado con el mismo co eo que se
quie a egis a el usua io
Pos condició
n
- Éxi o: el usua io quede egis ado sa is ac o iamen e.
- Fallo: se mues e un mensaje de e o y se le uel a a da al usua io
la posibilidad de egis a se de nue o, con da os co ec os.
Flujo
P incipal
1. (Usua io) Selecciona la opción de egis a se.
2. (Usua io) Rellena los dis in os campos que se le pidan.
3. (Sis ema) Analiza los da os in oducidos.
4. (Sis ema) Gene a un ID que se le adjudica á al usua io y queda á
gua dado en la base de da os con los demás da os que es e in odujo
an e io men e.
5. (Sis ema) Mensaje de que la ope ación de egis o se ha ealizado
co ec amen e.
Flujo
Secunda io
Paso 3: si los da os in oducidos no son co ec os se mos a á un
mensaje de e o y se ol e á al pun o 2.
Caso de uso
#2
Baja Usua io 1
Iden i icado
C2.1
Ac o
Usua io
Desc ipción
Da se de baja como usua io de la aplicación web.
P econdición
Es necesa io que el usua io es é egis ado y haya iniciado sesión.
Pos condición
- Éxi o: el usua io queda á dado de baja sa is ac o iamen e.
- Fallo: se mues a un mensaje de e o y se uel e a da al usua io la
opción de da se de baja.
22
Flujo P incipal
1. (Usua io) Selecciona la opción de da se de baja.
2. (Sis ema) Mensaje de con i mación con dos opciones: “OK” y
“Cancela ”.
3. (Sis ema) Se eliminan odos los da os del usua io en la base de
da os.
4. (Sis ema) Mensaje de que la ope ación se ha ealizado con éxi o.
Flujo
Secunda io
Paso 2: si pincha “OK” e o na al pun o 3. Si pulsa “Cancela ” se
e mina la ope ación.
Caso de uso
#3
Baja Usua io 2
Iden i icado
C3.1
Ac o
Adminis ado
Desc ipción
Da de baja a un usua io de la aplicación web.
P econdición
Es necesa io que el usua io es é egis ado.
Pos condició
n
- Éxi o: el usua io queda á dado de baja sa is ac o iamen e.
- Fallo: se mues a un mensaje de e o y se uel e a da al
adminis ado la opción de da de baja al usua io.
Flujo
P incipal
1. (Adminis ado ) Selecciona a un usua io.
2. (Adminis ado ) Selecciona la opción de da de baja usua io.
3. (Sis ema) Mensaje de con i mación con dos opciones: “OK” y
“Cancela ”.
4. (Sis ema) Se eliminan odos los da os del usua io en la base de
da os.
5. (Sis ema) Mensaje de que la ope ación se ha ealizado con éxi o.
23
Flujo
Secunda io
Paso 3: si pincha “OK” e o na al pun o 4. Si pulsa “Cancela ” se
e mina la ope ación.
Caso de uso
#4
Inicia Sesión
Iden i icado
C4.1
Ac o
Adminis ado , usua io
Desc ipción
Inicia sesión en la aplicación web.
P econdición
Es necesa io que el usua io es é egis ado.
Pos condició
n
- Éxi o: el usua io hab á iniciado sesión sa is ac o iamen e.
- Fallo: se mues a un mensaje de e o y se ol e á a pedi al usua io
que in oduzca “co eo elec ónico” y “con aseña” de nue o.
Flujo
P incipal
1. (Usua io) Selecciona la opción de inicia sesión.
2. (Usua io) In oduce co eo elec ónico y con aseña.
3. (Sis ema) Analiza los da os in oducidos.
4. (Sis ema) Mues a mensaje de inicio de sesión exi oso y
edi ecciona al usua io a la página p incipal.
Flujo
Secunda io
Paso 3: si los da os son e óneos se mues a un mensaje de que los
da os in oducidos no son co ec os y se uel e al pun o 2.
Caso de uso
#5
Ce a Sesión
Iden i icado
C5.1
Ac o
Adminis ado , Usua io
Desc ipción
Ce a la sesión ac ual de la aplicación web.
24
P econdición
Es necesa io habe iniciado sesión p e iamen e.
Pos condició
n
- Éxi o: el usua io hab á ce ado la sesión sa is ac o iamen e.
- Fallo: se mues a un mensaje de e o de que no se ha podido ce a
la sesión co ec amen e.
Flujo
P incipal
1. (Usua io) Selecciona la opción de ce a sesión.
2. (Sis ema) Mensaje de con i mación con dos opciones: “OK” y
“Cancela ”.
3. (Sis ema) Cie a la sesión del usua io y le edi ecciona a la página de
inicio de sesión.
Flujo
Secunda io
Paso 2: si el usua io pulsa “OK” se pasa al pun o 3. Si pulsa “OK” pe o
hay un e o se mos a á un mensaje de e o y el usua io segui á
logueado. Si pulsa “Cancela ” se e mina la ope ación.
Caso de uso
#6
Ve Usua io
Iden i icado
C6.1
Ac o
Adminis ado , Usua io
Desc ipción
Ve los dis in os da os que haya acili ado el o o usua io. No se pod án
e da os sensibles como con aseñas.
P econdición
Es necesa io que el usua io es é egis ado.
Pos condició
n
- Éxi o: el usua io pod á e los da os del usua io que haya
seleccionado.
- Fallo: se mues a un mensaje de e o .
Flujo
P incipal
1. (Usua io) Selecciona a un usua io.
2. (Sis ema) Le edi ecciona a una página con odos los da os que
haya acili ado el usua io.
31
Flujo
p incipal
1. (Adminis ado ) Selecciona la opción de c ea cues iona io.
2. (Adminis ado ) Selecciona p egun as con di e en es espues as, solo
una álida.
3. (Adminis ado ) Selecciona la opción de gua da cambios.
4. (Sis ema) Se mues a un mensaje de que el cues iona io se ha c eado
con éxi o.
Flujo
secunda io
Paso 3: Si ha habido algún campo sin ellena mues a un mensaje de
e o , y no pe mi e gua da los cambios has a que no se ellene lo que
al a.
Caso de uso
#6
Añadi p egun a al cues iona io
Iden i icado
C6.2
Ac o
Adminis ado
Desc ipción
Añade p egun as pa a los cues iona ios
P econdición
La p egun a aún no exis e en el cues iona io.
Pos condició
n
- Éxi o: Se ha añadido la p egun a con éxi o.
- Fallo: se mues a un mensaje de e o de que no se ha podido añadi
la p egun a.
Flujo
p incipal
1. (Adminis ado ) Selecciona la opción c ea cues iona io
2. (Adminis ado ) Selecciona añadi p egun a
3. (Adminis ado ) Se gua dan los cambios.
4. (Sis ema) Se mues a un mensaje indicando que la p egun a se ha
añadido con éxi o.

32
Flujo
secunda io
Paso 2: Si la p egun a ya exis e en el cues iona io, apa ece un mensaje
de e o , pe mi iendo ol e a añadi una p egun a.
Caso de uso
#7
C ea p egun a
Iden i icado
C7.2
Ac o
Adminis ado
Desc ipción
C ea p egun as pa a los cues iona ios
P econdición
La p egun a no exis e.
Pos condición
- Éxi o: Se ha c eado la p egun a con éxi o.
- Fallo: se mues a un mensaje de e o de que no se ha podido c ea
la p egun a.
Flujo p incipal
1. (Adminis ado ) Se selecciona c ea p egun a
2. (Adminis ado ) Se c ea la p egun a con a ias espues as, solo una
co ec a.
3. (Adminis ado ) Se gua dan los cambios.
4. (Sis ema) Se mues a un mensaje de que se ha c eado
co ec amen e la p egun a
Flujo
secunda io
Paso 2: Si no se selecciona una espues a, no pe mi e gua da la
p egun a.
3.2.3. Módulo In e acción de usua ios
33
Es e módulo engloba odas las acciones que los usua ios pueden ealiza con la
pla a o ma. En la igu a 3 se mues a el diag ama de casos de uso asociado al
módulo
Figu a 3. Diag ama de casos de uso del módulo In e acción de Usua ios
En la igu a 3 se mues a un diag ama de los casos de uso pe enecien es al
módulo In e acción de usua ios. Es e módulo a ec a únicamen e al ac o Usua io,
que es el enca gado de c ea odos los o mula ios ep esen ados en la igu a.
34
Caso de uso
#1
Comp a Paque e C omos
Iden i icado
C1.3
Ac o
Usua io
Desc ipción
Comp a un paque e de c omos pa a coloca los en el álbum.
P econdición
Es necesa io que el usua io enga las monedas necesa ias pa a paga
el paque e.
Pos condició
n
- Éxi o: el usua io ecibe el paque e de c omos que ab i á cuando
quie a.
- Fallo: se mues a un mensaje de e o de que no se ha podido
comp a el paque e deseado, ya sea po al a de monedas o po un
e o in e no.
Flujo
P incipal
1. (Usua io) Selecciona la opción de comp a un paque e de c omos.
2. (Usua io) Selecciona el ipo de paque e a comp a .
3. (Sis ema) Se manda el paque e elegido po el usua io a su in en a io
y se le es an las monedas co espondien es.
4. (Usua io) Se mues a un mensaje de que la comp a se ha ealizado
con éxi o.
Flujo
Secunda io
Paso 2: si el usua io no iene monedas su icien es pa a comp a el
paque e se le mos a á un mensaje de e o indicando lo ocu ido y se
acaba á la ope ación.
Caso de uso
#2
Visualiza álbum
Iden i icado
C2.3
35
Ac o
Usua io
Desc ipción
Ve álbum comple o con los c omos adqui idos
P econdición
Que el álbum se ha comp ado p e iamen e
Pos condició
n
● Éxi o: se mues a el álbum con cada equipo y los jugado es que
el usua io posee.
● Fallo: se mues a un mensaje de e o (el usua io no iene
comp ado el álbum).
Flujo
p incipal
1. (Usua io) Inicio de sesión.
2. (Usua io) Accede a la pes aña álbumes.
3. (Usua io) Selecciona el álbum que desea isualiza
4. (Usua io) Visualiza al álbum donde puede e odos los equipos
con los jugado es que ya ha conseguido.
Flujo
secunda io
● Paso 3: si no se ha adqui ido el álbum seleccionado apa ece á
un mensaje pa a comp a lo.
Caso de uso
#3
Responde cues iona io
Iden i icado
C3.3
Ac o
Usua io
Desc ipción
Responde un cues iona io pa a ob ene monedas
36
P econdición
No habe espondido un cues iona io de la misma emá ica en las
úl imas 24h.
Pos condició
n
● Éxi o: se isualiza el cues iona io seleccionado y se p ocede a
ealiza lo.
● Fallo: si ya se ha ealizado ecien emen e el mismo cues iona io
seleccionado se mues a mensaje de e o .
Flujo
p incipal
1. (Usua io) Inicio de sesión.
2. (Usua io) Accede a la sección de cues iona ios.
3. (Usua io) Selecciona el ipo de cues iona io que desea ealiza .
4. (Sis ema) Gene a 10 p egun as de o ma alea o ia del ipo
seleccionado.
5. (Usua io) En ía el cues iona io ealizado.
6. (Sis ema) Concede las monedas co espondien es a los acie os del
usua io.
Flujo
secunda io
● Paso 3: si no han pasado las ho as su icien es pa a pode
ol e a ealiza el cues iona io se comunica.
● Paso 5: si al a alguna p egun a po con es a sal a un mensaje
in o mando.
Caso de uso
#4
Acep a in e cambio de c omos
Iden i icado
C4.3

37
Ac o
Usua io
Desc ipción
Acep a una solici ud de in e cambio de c omos.
P econdición
Habe ecibido una p opues a de in e cambio de o o usua io.
Pos condició
n
● Éxi o: el c omo que posee el usua io inicialmen e es dado de
baja y el c omo que desea es dado de al a.
● Fallo: se in o ma al o o usua io que el usua io no ha acep ado
el in e cambio.
Flujo
p incipal
1. (Usua io) Inicio de sesión.
2. (Usua io) Selecciona la pes aña In e cambios.
3. (Sis ema) Mues a la lis a de in e cambios p opues os po o os
usua ios.
4. (Usua io) Selecciona el jugado que desea ob ene a cambio del
p opues o po el o o usua io
5. (Sis ema) En ía la solici ud de in e cambio al o o jugado a la espe a
de se acep ada.
Flujo
secunda io
● Paso 4: Si el o o usua io no iene c omos epe idos no es
posible ealiza la ope ación y se uel e al paso 3.
38
Caso de uso
#5
In e cambia c omos
Iden i icado
C5.3
Ac o
Usua io
Desc ipción
In e cambia c omos con o os usua ios.
P econdición
Tene al menos una ez epe ido el c omo del jugado que se desea
in e cambia .
Pos condició
n
● Éxi o: el c omo que posee el usua io inicialmen e es dado de
baja y el c omo que desea es dado de al a.
● Fallo: si el o o usua io no acep a el ueque se comunica al
usua io inicial.
Flujo
p incipal
1. (Usua io) Inicio de sesión.
2. (Usua io) Selecciona la pes aña In e cambios.
3. (Sis ema) Mues a la lis a de equipos con los jugado es que el usua io
aún no iene en el álbum.
4. (Usua io) Selecciona el jugado que desea ob ene
5. (Sis ema) Mues a la lis a de usua ios que ienen el c omo solici ado
como epe ido.
6. (Usua io) Manda la solici ud de in e cambio al usua io deseado.
Flujo
secunda io
● Paso 5: Si la lis a de usua ios es á acía mues a un mensaje
in o mando que no es posible ob ene el c omo deseado.
39
Caso de uso
#6
Realiza po a
Iden i icado
C6.3
Ac o
Usua io
Desc ipción
Rellena la po a de la jo nada
P econdición
· Que la jo nada se encuen e disponible
Pos condició
n
● Éxi o: la po a es mandada a la espe a de la inalización de la
jo nada.
● Fallo: se in o ma de un allo al ealiza la po a.
Flujo
p incipal
1. (Usua io) Inicio de sesión.
2. (Usua io) Selecciona la pes aña jo nadas.
3. (Usua io) Rellena la po a de la jo nada (un solo esul ado po pa ido)
4. (Usua io) En ía la po a.
5. (Sis ema) Comp ueba que la po a ha sido ellenada co ec amen e y
en iada a iempo (an es del inicio del p ime pa ido de la jo nada).
6. (Sis ema) Gua da en la base de da os los da os.
7. (Sis ema) Asigna las monedas co espondien es a los acie os del
usua io.
40
Flujo
secunda io
● Paso 5: Si no se ha en iado a iempo se in o ma al usua io y se
uel e al paso 3.
Caso de uso
#7
Comp a c omo indi idual
Iden i icado
C7.3
Ac o
Usua io
Desc ipción
Comp a un solo c omo de la ienda
P econdición
· Que el usua io enga monedas su icien es.
Pos condició
n
● Éxi o: el c omo es añadido al álbum.
● Fallo: se in o ma de un allo en la comp a.
Flujo
p incipal
1. (Usua io) Inicio de sesión.
2. (Usua io) Selecciona la ienda.
3. (Sis ema) Cada día se gene an 6 c omos alea o ios en e odos los
c omos exis en es pa a comp a po un núme o más ele ado de
monedas.
4. (Usua io) Selecciona el c omo deseado.
5. (Usua io) Mues a un mensaje de éxi o
Flujo
secunda io
● Paso 4: Si no cuen a con monedas su icien es uel e al paso 3.
47
En la igu a 4 se ep esen a un esquema con las in e acciones que se lle an a
cabo en la a qui ec u a del p oyec o.
- El usua io hace una pe ición al con olado , quien la ges iona pa a
hacé sela llega al modelo. Po ejemplo, el usua io e ec úa la comp a de
un sob e de c omos.
- Una ez llega al modelo, se ges iona y ac ualiza los da os. Siguiendo con
el ejemplo an e io , se modi ica la base de da os pa a es a las monedas
y añadi al usua io los c omos que le ocan en el sob e.
- A su ez, es a in o mación pasa a la is a, que es la enca gada de
ep esen a los cambios que se han p oducido y inalmen e el usua io los
isualiza. En el ejemplo, el usua io e los c omos ecibidos.
Los ac o es que in e ienen en la aplicación son de dos ipos:
En p ime luga , el adminis ado es el enca gado de c ea odo el con enido de
la aplicación. Añadi o elimina equipos y jugado es, uncionalidad necesa ia
pa a cuando un equipo asciende o desciende de ca ego ía y cuando un jugado
es ichado o endido.
También, el adminis ado es el enca gado de egis a la p egun a del
cues iona io y la po a de la jo nada. El egis o de es a úl ima se ealiza los
ma es pa a que los usua ios puedan ealiza sus p onós icos has a el ie nes
que empieza la jo nada. El lunes, al inaliza la jo nada, el adminis ado debe
g aba los esul ados pa a que las monedas sean libe adas a los usua ios
dependiendo de los acie os que hayan log ado.
Po o o lado, el usua io es el que puede isualiza el álbum con los c omos
que le han ocado de cada equipo y los c omos epe idos que iene disponibles
pa a in e cambia con o os usua ios. También puede ealiza la po a de la
semana y esponde p egun as del cues iona io pa a gana monedas ex a,
pa a luego comp a sob es de 1, 3 o 5 c omos que se añadi án al álbum o a la
lis a de epe idos dependiendo de si ya los enía an e io men e.

48
5.2. Modelo de da os.
Se ha op ado po u iliza un modelo de base de da os elacional en es e p oyec o,
ya que se los es in eg an es conocen es e modelo al habe a ado con él
du an e la ealización de la ca e a. Conc e amen e se ha u ilizado el sis ema de
ges ión de bases de da os (SGBD) Ma iaDB. Es o in e esaba más que una base
de da os no elacional debido a que el esquema es más es able, almacenando
los da os de una mane a es uc u al, las consul as son simila es unas a o as y
acili a el abajo.
Se han c eado las siguien es ablas que se mues an en la igu a, que
pos e io men e se explican. El diseño de la base de da os u ilizada en el p oyec o
se dispone de la siguien e o ma:
Figu a 5. Diseño de la base de da os
En la igu a 5 se mues a el diseño de la base de da os, con odas sus ablas, en
las que apa ecen sus cla es p ima ias, o áneas y las elaciones en e ellas.
1. Be ound: Tabla u ilizada pa a almacena los esul ados de la jo nada.
Se compa a á con la del usua io pa a comp oba si ha ace ado o no.
Es a abla es á o mada po los siguien es campos:
- id: iden i icado de la po a.
- id_home_ eam: iden i icado de equipo local del p ime pa ido
- id_away_ eam: iden i icado de equipo isi an e del p ime pa ido
49
- esul : esul ado del p ime pa ido (puede se 1 si gana el local, X si hay
empa e o 2, si gana el equipo isi an e)
- id_home_ eam_2: iden i icado de equipo local del segundo pa ido
- id_away_ eam_2: iden i icado de equipo isi an e del segundo pa ido
- esul 2: esul ado del segundo pa ido
- id_jo nada: Iden i icado de la jo nada.
- season: Tempo ada en la que se dispu ó el pa ido.
2. be _ ound_use : abla donde se almacenan los esul ados ma cados po
el usua io. Se compa a con be _ ound pa a comp oba si ha ace ado o
no.
Es a abla es á o mada po los siguien es campos:
- id: Iden i icado de la po a del usua io
- id_ ound: iden i icado de la po a ellenada po el usua io
- esul _use _1: Resul ado del p ime pa ido
- esul _use _2: Resul ado del segundo pa ido.
- end: si ha inalizado la jo nada.
- id_use : iden i icado del usua io
3. ca ds: C omo del álbum.
Es a abla es á o mada po los siguien es campos:
- id: Iden i icado del c omo
- id_playe : iden i icado del jugado
- id_use : iden i icado del usua io
4. ques ions: Tabla con las p egun as y espues as que si en pa a ealiza
los cues iona ios, y de aquella mane a pode suma monedas.
Es a abla es á o mada po los siguien es campos:
50
- id: Iden i icado de la p egun a
- ques ion: P egun a ealizada.
- co ec _answe : La espues a co ec a a la p egun a.
- bad_answe 1: Una de las espues as e óneas a la p egun a.
- bad_answe 2: Una de las espues as e óneas a la p egun a.
- bad_answe 3: Una de las espues as e óneas a la p egun a.
5. Use _answe s: abla que elaciona las p egun as del cues iona io con las
espues as de los usua ios
Es a abla es á o mada po los siguien es campos:
- id: iden i icado gene ado de o ma au omá ica y au oinc emen al.
- answe : s ing donde se almacena la espues a del usua io a una
p egun a.
- id_use : cla e o ánea que elaciona la abla use _answe s con la abla
use s.
- id_ques ion: cla e o ánea que elaciona la abla use _answe s con la
abla ques ions.
6. Use s: abla donde se almacenan los usua ios que se egis an en la
aplicación.
Es a abla es á o mada po los siguien es campos:
- id: iden i icado gene ado de o ma au omá ica y au oinc emen al.
- name: s ing donde se almacena el nomb e del usua io.
- email: s ing donde se almacena el co eo elec ónico del usua io.
- passwo d: s ing donde se almacena la con aseña ci ada del usua io.
- ype: s ing donde se almacena el ipo de usua io (no mal o
adminis ado ).
- coin: núme o de monedas de las que dispone el usua io.
7. Teams: abla donde se almacenan los equipos.
Es a abla es á o mada po los siguien es campos:
51
- id: iden i icado gene ado de o ma au omá ica y au oinc emen al.
- name: s ing donde se almacena el nomb e del equipo.
- season: empo ada ac ual.
- u limage: u a con la o o del c omo con el escudo del equipo.
8. Rounds: abla donde se almacenan las jo nadas.
Es a abla es á o mada po los siguien es campos:
- id: iden i icado gene ado de o ma au omá ica y au oinc emen al.
- name: s ing donde se almacena el nomb e de la jo nada.
9. Playe s:Tabla donde se almacenan los jugado es.
Es á o mada po los siguien es campos:
- id: iden i icado del jugado
- nomb e: nomb e del jugado .
- id_equipo: Equipo al que pe enece el jugado .
- u l_imagen: imagen del jugado .
10. Repe idos: Tabla que almacena los c omos epe idos de cada usua io.
Con iene los siguien es campos:
- id: iden i icado del c omo epe ido.
- id_playe : el jugado epe ido:
- id_use : el iden i icado del usua io que iene ese c omo epe ido.
11. Cambios: Tabla que e leja los cambios que se han ealizado con o o
usua io y los c omos in e cambiados pa a que pueda sali la ale a de que
el in e cambio se ha ealizado.
Con iene los siguien es campos:
52
- id: iden i icado del cambio
- doy: c omo a in e cambia
- ecibo: c omo que el usua io quie e ob ene
- id_use : iden i icado del usua io

53
Capí ulo 6. Implemen ación
En es e capí ulo se a a explica g an pa e de la uncionalidad de la aplicación,
apoyado median e cap u as de pan alla del Visual S udio Code, luga donde se
ha ealizado la implemen ación de la web. Hab á cap u as de la codi icación
co espondien e a la is a, y la codi icación de la uncionalidad de la pa e back.
6.1. Usua io
6.1.1. Regis o
Figu a 6. Regis e pa e 1
En la igu a 6 se mues a la p ime a pa e del código de egis e .blade
54
Figu a 7. Regis e pa e 2
En la igu a 7 se mues a la segunda pa e del código de egis e .blade
Con iene el o mula io de egis o del usua io. En él se in oducen “Nick”, “Email”,
“Passwo d”, “Con i m Passwo d”.
6.1.2. Inicio de sesión
55
Figu a 8. Login
En la igu a 8 se mues a el código de login.blade
Con iene el o mula io pa a que el usua io haga el login. El usua io debe á
in oduci “Email” y “Passwo d” que se comp oba án en el con olado .
6.1.3. P egun as
56
Figu a 9. Answe Ques ion
En la igu a 9 se mues a el código de answe _ques ion.blade
En es a is a se mues a la p egun a dia ia y las cua o opciones que se dan pa a
esponde a esa p egun a.
Figu a 10. Ques ion Con olle -> isCo ec
En la igu a 10 se mues a el código de la unción isCo ec de
Ques ionCon olle .blade
En es a unción se comp ueba si la espues a del usua io ha sido co ec a. Se
gua da la espues a en la base de da os con “s o eUse Answe ”. Luego, con la
unción “addCoins”, se comp ueba si la espues a es buena y se le suman las
monedas co espondien es al usua io. Po úl imo, se manda un mensaje al
usua io indicando si su espues a ha sido co ec a o e ónea.
Figu a 11. Ques ion Con olle -> s o eUse Answe
63
Figu a 20. C omo Con olle -> Gua da C omos pa e 1
En la igu a 20 se mues a el código de la segunda pa e de la unción
gua da C omos de C omoCon olle .
En es a unción p ime o se comp ueba si el usua io iene monedas su icien es
pa a comp a el sob e de c omos. Si no es así, se mos a á un mensaje de e o
diciéndole que no posee las monedas necesa ias. En el caso de que si las enga
se le es a a su can idad de monedas el p ecio del sob e. Pos e io men e, se
ob iene el núme o de c omos de o ma alea o ia y sin que haya epe iciones. Po
úl imo, se me en los c omos en sus co espondien es bases de da os, algunos
en “ca ds” o os en “ epe idos”.
6.1.6. In e cambia c omos

64
Figu a 21. Cambia Final
En la igu a 21 se mues a el código de cambia _ inal.blade.
En es e código de la is a se mues a un o mula io. En él hay dos selec . En el
p ime o, se mues an los c omos epe idos del usua io ac ual que le in e esan al
o o usua io y en el segundo selec ice e sa.
Figu a 22. Repe ido Con olle -> Cambia Repes pa e 1
65
En la igu a 22 se mues a el código de la p ime a pa e de la unción
cambia Repes de Repe idoCon olle .
Figu a 23. Repe ido Con olle -> Cambia Repes pa e 2
En la igu a 23 se mues a el código de la segunda pa e de la unción
cambia Repes de Repe idoCon olle .
Figu a 24. Repe ido Con olle -> Cambia Repes pa e 1
En la igu a 24 se mues a el código de la e ce a pa e de la unción
cambia Repes de Repe idoCon olle .
66
En es a unción se empieza ecolec ando los c omos epe idos del usua io con
el que se desea hace el cambio y los c omos epe idos del usua io ac ual.
Luego, se hacen dos o each donde se gua da en un a ay los c omos que busca
cada usua io. Los c omos que se buscan son los que al an en el “álbum”.
Pos e io a es o, se hacen dos o donde se gua da en un a ay los c omos
o ecidos po cada usua io. Los c omos o ecidos son los c omos epe idos de
un usua io que son buscados po el o o. Po úl imo, si los dos usua ios pueden
o ece se c omos en e sí, se llama a la is a pasándolos po “pa áme o”, si no,
se mues a un mensaje de e o .
Figu a 25. Repe ido Con olle -> Cambio Final
En la igu a 25 se mues a el código de la unción cambioFinal de
Repe idoCon olle .
En es a unción se hace el cambio de c omos en e los dos usua ios. Consis e
en me e en la base de da os de “ca ds” dos c omos nue os, idén icos a los que
67
habían pe o haciendo un cambio en el id_use . Po úl imo, se bo a en la base
de da os de “ epe idos” el c omo con el que cada usua io ha hecho el cambio.
6.1.7. Lis ado de equipos
Figu a 26. Lis ado Equipos
En la igu a 26 se mues a el código de lis ado_equipos.blade
En es e código de la is a se mues a un o each que eco e odos los equipos.
De cada equipo mos a á su imagen, el nomb e y el núme o de c omos que iene
el usua io de ese equipo.
68
Figu a 27. C omo Con olle -> Vis a Equipo
En la igu a 27 se mues a el código de la unción is aEquipo de
C omoCon olle .
En es a unción se o denan los c omos po id de jugado y de equipo. Se c ea
una lis a de índices dado que los ids de los equipos, aunque es án de meno a
mayo , a eces hay sal os. Po úl imo, se llama a la lis a de equipos pasandole
las a iables “ eams”, que con iene los da os de los equipos; “numCa ds”, el
núme o de c omos que posee el usua io de cada equipo; “ca dCoun e ”, el
núme o máximo de c omos que iene cada equipo.
6.1.8. Lis ado de c omos en el equipo

69
Figu a 28. C omos
En la igu a 28 se mues a el código de c omos.blade.
En es e código de la is a se mues a un o each que eco e a los c omos que
posee el usua io, en es e caso, a los jugado es de un equipo en conc e o. De
cada c omo se mues a la imagen y el nomb e.
Figu a 29. C omo Con olle -> Index
En la igu a 29 se mues a el código de la unción index de C omoCon olle .
En es a unción se gua da en el a ay “$jugado es” odos los c omos que iene el
usua io. Luego, se le pasa a la is a “jugado es”, a iable an e io ; “ eams”, da os
de odos los equipos e “id”.
70
6.1.9. Lis ado de c omos epe idos
Figu a 30. Repe idos
En la igu a 30 se mues a el código de epe idos.blade.
En es e código de la is a se eco en los c omos epe idos po el usua io. De
cada c omo se mos a á su imagen, el nomb e y un con ado de cuán as eces
es á epe ido.
71
Figu a 31. Repe ido Con olle -> Index
En la igu a 31 se mues a el código de la unción index de Repe idoCon olle .
En es a unción se eco en odos los c omos epe idos y se gua da en un a ay
los que sean del usua io, es deci , los que enga como id_use el id del usua io
ac ual. Luego, se gua da en una lis a de odos los c omos gené icos (los
jugado es) su id y un con ado de las eces que el usua io ac ual lo iene epe ido.
Si el usua io no iene ningún c omo epe ido, se mues a una ale a de e o
diciendo que no iene c omos epe idos. Si el usua io si los iene, se llama a la
is a y se le pasa “jugado es”, que son los c omos epe idos del usua io y
“ epe idosAg upados”, que es la lis a mencionada an e io men e.
6.1.10. Pe il
72
Figu a 32. P o ile
En la igu a 32 se mues a el código de p o ile.blade
En es a is a del pe il, se mues a simplemen e el nomb e del usua io, el mail
con el que se iden i ica, las monedas que iene disponibles, desde cuando es un
usua io de la aplicación y cuando ue la úl ima ez que inició la sesión.
Si e es usua io:
79
Al pulsa el bo ón de “Elimina ” se llama a la unción de la igu a 43 y se elimina
el c omo gené ico (jugado ) y odos los c omos co espondien es a él de la
base de da os.
6.2.8. Edi a c omo
Figu a 44. Edi a C omo
En la igu a 44 se mues a el c omo seleccionado con el alo que poseía en
cada campo.

80
Figu a 45. Edi a C omo - Upda e
Al pulsa el bo ón de “Edi a ” se llama a la unción de la igu a 45 y se edi an los
campos que se hayan modi icado.
6.2.9. Añadi p egun a
Figu a 46. Añadi p egun a
En la igu a 46 se puede e un o mula io en el que se puede ellena una
p egun a con sus espues as, una co ec a y es inco ec as.
81
Figu a 47. Añadi p egun a - S o e
Al pulsa el bo ón “En ia ” se llama a la unción de la igu a 47, en la que se
gua da la p egun a nue a en la base de da os.
6.2.10. Lis ado de p egun as
Figu a 48. Lis ado de p egun as
En la igu a 48 se mues a el lis ado de p egun as. En ella, se hace un eco ido
po las p egun as y de cada uno se mues a la p egun a acompañada de dos
bo ones, uno de elimina y o o de edi a .
6.2.11. Elimina p egun a
82
Figu a 49. Elimina p egun a
Al pulsa el bo ón de “Elimina ” se llama a la unción de la igu a 49 y se elimina
la p egun a y odas las espues as de los usua ios co espondien es a ella de la
base de da os.
6.2.12. Edi a p egun a
Figu a 50. Edi a p egun a
En la igu a 50 se mues a la p egun a seleccionada con el alo que poseía en
cada campo.
83
Figu a 51. Edi a p egun a - Upda e
Al pulsa el bo ón de “Edi a ” se llama a la unción de la igu a 51 y se edi an los
campos que se hayan modi icado.
6.2.13. Añadi po a
84
Figu a 52. Añadi Po a
En la igu a 52 se puede e un o mula io en el que se puede ellena una
po a con sus equipos en en ados, esul ados y si ha sido inalizada.

85
Figu a 53. Añadi Po a - S o e
Al pulsa el bo ón “En ia ” se llama a la unción de la igu a 53, en la que se
gua da la po a nue a en la base de da os.
6.2.14. Lis ado de po as
Figu a 54. Lis ado Po as
En la igu a 54 se mues a el lis ado de po as. En ella, se hace un eco ido po
las po as y de cada una se mues a el id de la po a acompañado de dos
bo ones, uno de elimina y o o de edi a .
6.2.15. Elimina po a
86
Figu a 55. Elimina Po a
Al pulsa el bo ón de “Elimina ” se llama a la unción de la igu a 55 y se elimina
la po a y odas las po as ellenadas de los usua ios co espondien es a ella
de la base de da os.
6.2.16. Edi a po a
Figu a 56. Edi a Po a
87
En la igu a 56 se mues a la po a seleccionada con el alo que poseía en
cada campo.
Figu a 57. Edi a Po a - Upda e
Al pulsa el bo ón de “Edi a ” se llama a la unción de la igu a 57 y se edi an los
campos que se hayan modi icado.
6.2.17. Na ba Adminis ado
Figu a 58. Na ba Admin
En la igu a 58 se mues a el código de na ba .blade cuando e es admin.
Se comp ueba el ipo de usua io. Si es adminis ado end á las siguien es lis as:
Equipos, C omos, P egun as y Jo nadas. Den o de cada una pod á elimina y
edi a a su gus o. También iene el apa ado de añadi .
88
6.3 Acceso al eposi o io Gi hub del p oyec o
En es a sección se mues a el enlace al eposi o io Gi hub donde se encuen a
el código del p oyec o.
h ps://gi hub.com/kokensii/TFG
95
Capí ulo 8. Apo aciones pe sonales
En es e oc a o capí ulo cada in eg an e del g upo a a explica su pa icipación
en el p oyec o, así como las a eas que ha ealizado du an e la ealización de
es e.
8.1. Jo ge Faja do Vizue e
Lo p ime o que se hizo ue ene una eunión en la que se decidía qué
ecnologías se usa ían pa a desa olla la aplicación web. El esul ado de esa
eunión ue usa como lenguaje PHP y como amewo k de es e La a el.
En una segunda eunión, es a con la pa icipación de An onio, se plan ea on las
dis in as uncionalidades que se pod ían implemen a en la aplicación. Tan o
An onio como los demás expusie on sus ideas y se llegó a un consenso de
cuáles iban a se las uncionalidades a desa olla .
T as habe decidido las dis in as pa es que se debe ían implemen a , se hizo
una eunión en la que se epa i ía el abajo que debe ía desempeña cada uno.
Se dec e ó que Jo ge enía que desa olla , mayo i a iamen e, la implemen ación
de la aplicación, an o de la pa e isual, es a en meno medida, como la pa e
uncional.
En la siguien e eunión, se c eó la base de da os. Se ie on cuales iban a se las
ablas que se necesi aban y los campos den o de cada una de ellas. La mayo ía
ue desa ollada po I án y Miguel, pe o Jo ge u o que hace dis in as
a iaciones a lo la go del abajo debido a algunas mejo as que se que ían
in eg a en las uncionalidades y que, pa a ello, se necesi aba añadi o edi a
algún campo y/o abla de la base de da os.
A la ho a de desa olla el código, se ha enido que es a en cons an e
ap endizaje, leyendo an o la documen ación de La a el como dis in os o os,
sob e odo en la pa e de ealiza un cambio.

96
Pa a la pa e isual de la aplicación se u ilizó ClickUp, pa a ges iona las a eas
que end íamos que hace cada uno. Lo que se hacía e a euni se pa a e qué
pun os desa olla ía cada uno y Jo ge los iba apun ando en el ClickUp dándole
una p io idad y una echa de encimien o p e iamen e consensuada po odos.
El abajo de Jo ge en la memo ia ue hace los pun os que enían que e con
el código de la aplicación, aunque ambién se iba ayudando a los demás
compañe os en el caso de que los apa ados ue an muy la gos y con mucho
con enido.
Po úl imo, se han enido di e sas euniones y con e saciones con An onio, en
las que se ha hablado de las mejo as que ealiza sob e la memo ia pa a deja la
lo mejo posible. Debido a ello, en el úl imo mes, cada semana se ha es ado
en iado una memo ia con las mejo as ealizadas.
8.2. I án Fe nández Sánchez
La pa icipación de I án en la ealización del TFG, aco dado y di idido siemp e
en e odos, ha sido epa ido pa a pode ap ende lo máximo posible de es e
abajo, aunque en ocasiones dis ibuido no an equi a i amen e, conocedo es
de los pun os ue es y débiles de cada uno, pa a pode llega a en ega el
p oyec o en iempo y o ma.
En p ime luga , el abajo que se hizo ue p incipalmen e de in es igación.
Consis ió en euni oda la in o mación posible ace ca de aplicaciones con
p opósi os simila es a es e p oyec o, leyendo documen ación y acciones que se
podían ealiza con es as pla a o mas. O o de los pun os impo an es en
in es igación ue la lec u a de documen ación de las ecnologías que se
u iliza ían pa a la ealización de la página. También ue on impo an es los
ideo u o iales pa a ap ende a maneja con mayo sol u a La a el y odo lo que
ello conlle a, aunque el ap endizaje y consul a han sido cons an es du an e la
du ación del p oyec o, no solo al p incipio.
La o ganización ha consis ido en una se ie de euniones que se han o ganizado
a lo la go del iempo, ma cando los obje i os a cumpli en cada e apa pa a pode
cumpli con los plazos de en ega. Es as euniones han sido an o online como
97
p esenciales. Además de las euniones en e los es miemb os pa a la
o ganización y desa ollo, ambién ha habido nume osas euniones con An onio,
di ec o del p oyec o, en las que se plani icaban los hi os, se o ganizaba el
abajo a ealiza y se esol ían las dudas exis en es.
No ha habido ninguna a ea de las que se an a nomb a a con inuación en las
que no hayan abajado el es o de compañe os, además de I án. En p ime
luga , I án ha pa icipado en da es ilo a la página, ap endiendo a maneja la
biblio eca Boo s ap, de la que se ha in es igado y ap endido bas an e en es e
p oyec o, y da o ma o a algunas de las is as. O o de los pun os en el que más
ha pa icipado es en el diseño, c eación y modi icación de la base de da os,
p ime o, decidiendo jun o al es o de compañe os las ablas y elaciones en e
ellas que se debían de ini , incluyendo cla es p ima ias y o áneas que se
necesi a ían pa a el co ec o uncionamien o de la página. La base de da os ha
ido a iando según se a anzaba en el p oyec o y se ha ido adap ando a las
necesidades de es e. Es as decisiones se omaban en euniones en las que se
llegaba a la conclusión de las nue as necesidades de la base de da os y los
mo i os po los que se ía mejo hace los cambios. Como, po ejemplo, la
necesidad de añadi nue as columnas a ablas exis en es o incluso añadi o
bo a algunas ablas.
Po o o lado, I án ambién ha pa icipado en la ealización de la memo ia, la cual
ambién se ha enido que i modi icando y adap ando según se ha a anzado en
el p oyec o, ya que pa e de ella la es aba lis a sin e mina pa e del código y
pos e io men e se ha adap ado al nue o o ma o. Como po ejemplo las cap u as
de las ablas de la base de da os, casos de uso o acciones de código. La
ealización de la memo ia se ha hecho p og esi amen e a lo la go del p oyec o
ya que es una a ea a la que hay que dedica bas an e iempo. An onio ambién
ha pa icipado en hace sus comen a ios y apo aciones sob e el o ma o y
con enido que debe apa ece en la memo ia.
En meno medida, I án ambién ha pa icipado en desa olla pa e de la
uncionalidad, como po ejemplo isualiza el lis ado de c omos, los c omos
epe idos del usua io y el es ilo de sus espec i as is as, en e o as di e en es.
98
O as de las apo aciones a des aca de I án ha sido la comp obación de e o es
y ce cio a que la página cumplía con las uncionalidades desc i as en el
p oyec o, elabo ando un lis ado con los e o es jun o al es o de in eg an es del
g upo con las de iciencias encon adas pa a su pos e io análisis y modi icación
del código.
8.3. Miguel Vega Ochoa
El abajo de Miguel du an e la ealización del TFG se ha di idido co ec amen e
en e el es o de los compañe os y él, siendo conocedo es de los pun os ue es
de cada uno, pe o pe mi iéndoles a odos oca un poco odo den o del p oyec o,
de mane a que ninguno se quedaba a ás y odos en endían co ec amen e las
a eas que se iban a ealiza . Las a eas que se enume an a con inuación
ambién han sido ealizadas po el es o de compañe os, no sólo po Miguel, pe o
posiblemen e es donde más ha des acado. Las a eas en las que más ha
abajado Miguel han sido: la ealización de la base de da os. Pa a pode c ea
la base de da os, u ie on luga nume osas euniones, an o en la acul ad como
ía online. Las euniones online acababan siendo la mane a más ú il de abaja ,
debido a que los es in eg an es del p oyec o abajan y e a complicado cuad a
los ho a ios. Había que pensa cuán as ablas debía ene es a base de da os.
Se añadie on p ime amen e las más lógicas, incluyendo los campos de es as, y
las elaciones en e ellas. A medida que ue a anzando el p oyec o es a base de
da os se u o que modi ica , ya que había cosas que no cuad aban, an o
añadiendo ablas nue as como modi icando campos y elaciones de es as. Más
adelan e Miguel ealizó la inse ción de da os pa a la ealización de p uebas y de
pode comp oba si el abajo ealizado es aba siendo el co ec o, con espec o
a la base de da os.
De la misma mane a que hubo euniones pa a o ganiza y c ea la base de da os,
Miguel se eunió con sus compañe os pa a la ealización de la memo ia. Con
espec o a la memo ia, An onio, el u o del p oyec o, ayudó a de ini jun o a
Miguel y los o os in eg an es los pun os que debía ocupa es a. De es a o ma,
Miguel, pudo i comple ándola poco a poco, pa a que los cambios se ue an
poniendo a medida que iban su giendo y no se pe die a el hilo de cómo debía
99
queda . Cuando la aplicación quedó e minada, se epa ie on los pun os de la
memo ia equi a i amen e, pa a pode epa i el abajo. Miguel des acó, en e
o os pun os de la memo ia, en la ealización de los apa ados en inglés,
aco dado con el es o de sus compañe os de que él posiblemen e ue a capaz
de aduci de una mane a más luida y no an li e al los apa ados a ealiza , y
pode con a lo mismo sin la necesidad de usa las mismas palab as.
Miguel ambién ha ealizado pa e de la codi icación de la aplicación, aunque
es a en meno medida, donde Jo ge ha sido posiblemen e el que más ha
des acado en es a pa e. Miguel se ha cen ado en el pe il, en el lis ado de
c omos, los c omos epe idos y la isualización de las is as comen adas.
Realizó las búsquedas de las o os de los jugado es a inclui en la base de da os
y los equipos. También ealizó búsquedas en in e ne ace ca de las mejo es
opciones pa a la isualización de la página, aunque no omó la decisión inal de
qué colo es/es ilos u iliza , sino que es a decisión se omó conjun amen e has a
que se encon ó un es ilo aco de con los es in eg an es.
Po úl imo y no menos impo an e, se ha cen ado en la comp obación de Bugs
una ez la aplicación es aba e minada, pa a comp oba que odo es aba
co ec o y pode ealiza el ideo, jun o a sus compañe os, que se iba a p oyec a
en la de ensa de es e abajo.
100
Bibliog a ía
[1] Panini. Disponible en h ps://www.panini.es/
[2] La Liga San ande . Disponible en h ps://www.laliga.com/laliga-
san ande
[3] Panini Collec o s. Disponible en
h ps://play.google.com/s o e/apps/de ails?id=com.panini.collec o s
&hl=es&gl=ES
[4] MyPanini Digi al Collec ion. Disponible en
h ps://www.panini.es/laliga22-23-coleccion i ual y
h ps://play.google.com/s o e/apps/de ails?id=com.panini.mypanini
digi alcollec ion&hl=es&gl=ES
[5] Ne c om. Disponible en h ps://www.ne c om.com/
[6] Quiniela. Disponible en
h ps://www.lo e iasyapues as.es/es/ esul ados/quiniela
[7] MySQL. Disponible en h ps://www.mysql.com/
[8] phpMyAdmin. Disponible en h ps://www.phpmyadmin.ne /
[9] Apache. Disponible en h ps://h pd.apache.o g/
[10] Visual S udio Code. Disponible en h ps://code. isuals udio.com/
[11] La a el. Disponible en h ps://la a el.com/
[12] Eloquen . Disponible en h ps://la a el.com/docs/9.x/eloquen
[13] Sym ony. Disponible en h ps://sym ony.com/p ojec s/la a el
[14] XAMPP. Disponible en
h ps://www.apache iends.o g/es/index.h ml
[15] Gi Hub. Disponible en h ps://gi hub.com/
[16] Gi . Disponible en h ps://gi -scm.com/
[17] PHP. Disponible en
h ps://www.php.ne /manual/es/in o-wha is.php
[18] HTML. Disponible en
h ps://de elope .mozilla.o g/es/docs/Web/HTML
[19] CSS.Disponible en
h ps://de elope .mozilla.o g/es/docs/Web/CSS
[20] Boo s ap. Disponible en h ps://ge boo s ap.com/

101
O as e e encias de in e és:
h ps://la a el.com/docs/9.x/ins alla ion
h ps://www.php.ne /manual/es/index.php
h ps://de elope .mozilla.o g/es/docs/Web/CSS
h ps://docs.gi hub.com/es
h ps://www. eecodecamp.o g/espanol/news/subi -a-gi hub-lo-
su icien emen e-simple-pa a-poe as/
h ps:// lexbox oggy.com/#es
h ps://www.apache iends.o g/es/index.h ml
h ps://code. isuals udio.com
h ps://s yde.ne /ex ensiones-de- s-code-pa a-php-y-la a el
h ps://www.you ube.com/wa ch? =A-BL8I 7puE
h ps://www.you ube.com/wa ch? =1kNwZbRiVcQ
h ps://www.je b ains.com/ esha pe /p omo/?sou ce=google&mediu
m=cpc&campaign=12513301815& e m= isual%20s udio%20addon&
gclid=CjwKCAjwpKyYBhB7EiwAU2Hn2VnqZqnBXeFka7kEab5XPyO
9NFcn27MxSV 4-saM UzjDPhc 9JucBoC AcQA D_BwE
h ps://s acko e low.com/ques ions/ agged/la a el
h ps://icons.ge boo s ap.com/icons/s ack-o e low/
h ps://la acas s.com/se ies/la a el-8- om-sc a ch
h ps://icons.ge boo s ap.com/
h ps://coolo s.co/
102
Anexo I: Guía del usua io
A con inuación, se a mos a la uncionalidad de la aplicación, ag upada po las
unciones del adminis ado y del usua io.
A-Adminis ado
A-1 Login
Las is as que iene el adminis ado son:
El inicio de sesión:
Figu a 59. Vis a Login
En la igu a 59 se mues a la is a del login de la página.
Si quién in en a inicia sesión se equi oca de con aseña, sal a un mensaje
pidiendo de nue o la con aseña:
103
Figu a 60. Vis a Login E o
En la igu a 60 se mues a la is a del login de la página cuando el usua io
in oduce mal la con aseña o el email.
A-2 Página de inicio
La ba a de na egación es di e en e, ya que el adminis ado se enca ga de las
labo es de que la aplicación es é al día
104
Figu a 61. Vis a Página p incipal Admin
En la igu a 61 se mues a la is a de la página p incipal cuando inicia sesión el
adminis ado .
Tiene dos opciones impo an es en la ba a de na egación, además del cie e de
la sesión.
A-3 Añadi
En es a is a se añaden los equipos, c omos, p egun as y jo nadas pa a que la
aplicación es é ac ualizada al momen o.
Figu a 62. Vis a Añadi de Admin
111
A-4.4 Jo nada/Po a
Jo nada ac ual de la liga, pa a iden i ica la po a y los pa idos que se juegan en
es a.
Figu a 71. Vis a Lis as - Jo nada de Admin
En la igu a 71 se mues a la is a de Lis as - Jo nada del adminis ado .
B-Usua io
B-1 Página P incipal
La is a p incipal que e cualquie usua io que en e en la página del p oyec o
es la siguien e:
Figu a 72. Vis a Página p incipal de Use
En la igu a 72 se mues a la is a de la página p incipal del usua io.

112
Es una is a sencilla, dándole la bien enida al usua io animándole a que se
egis e con noso os. Puedes egis a e, o loga e si ya o mas pa e de la
amilia.
Si quisie a egis a se, al pincha en el bo ón apa ece á la siguien e is a
B-2 Regis o
Figu a 73. Vis a Regis e de Use
En la igu a 73 se mues a la is a de Regis e del usua io.
Tend ía que in oduci un nick, un mail, y una con aseña, pa a cuando quie a
inicia sesión.
B-3 Página de inicio
Una ez se haya egis ado se le inicia á la sesión y le apa ece á la página de
inicio. En es a página apa ece una pequeña in oducción de las uncionalidades
que puede ealiza y la mo i ación de po qué se ha decidido que es e sea el
ema del TFG.
113
Figu a 74. Vis a Página p incipal con na ba de Use
En la igu a 74 se mues a la is a de la página p incipal incluyendo las
opciones de la ba a de na egación del usua io.
Se puede obse a que en la ba a de na egación apa ecen las di e en es
opciones disponibles en la página web, que se de alla á a con inuación. En odo
momen o el usua io pod á e en la ba a de na egación las monedas que iene
y end á a su de echa el pe il pa a e su in o mación, o pode ce a sesión.
B-4 P egun as
El usua io pod á accede a p egun as pa a esponde la p egun a del
cues iona io dia ia. De es a o ma, si la espues a es co ec a, el usua io
ob end á monedas de ecompensa y al día siguien e pod á epe i el mismo
p ocedimien o y esponde una nue a p egun a.
114
Figu a 75. Vis a P egun as de Use
En la igu a 75 se mues a la is a de esponde p egun as del usua io.
Figu a 76. Vis a P egun as con espues a de Use
En la igu a 76 se mues a la is a de esponde p egun as del usua io.
Si se acie an las espues as, ob ienes monedas.
115
Figu a 77. Vis a Respues a co ec a de Use
En la igu a 77 se mues a el mensaje de acie o de p egun a del usua io.
Figu a 78. Vis a Na Ba ac ualización monedas de Use
En la igu a 78 se mues a la ac ualización de monedas cuando el usua io
acie a la espues a.
Se puede obse a como aho a hab ía 1050 monedas, en luga de 1000.
Cuando se in en a ol e a esponde las p egun as, e sal a una ale a indicando
que ya se han espondido odas de esa semana.
116
Figu a 79. Vis a P egun as espondidas de Use
En la igu a 79 se mues a el mensaje de o al de p egun as espondidas del
usua io.
B-5 Po a
Se pod á ellena la po a con las opciones 1, X o 2 pa a cada pa ido. Si se elige
la opción 1, se es á p onos icando que gana á el equipo local (el que apa ece a
la izquie da), si se selecciona la X se p onos ica el empa e y si se selecciona el
2 se p onos ica que gana el isi an e (el que apa ece a la de echa). Cuando se
hayan comple ado odos los pa idos de la jo nada la po a queda á en iada.
Hay que en ia la an es de que empiece la jo nada, que suele se el ie nes y se
conoce án los esul ados el lunes cuando hayan inalizado odos los pa idos. En
unción del núme o de acie os ob enidos a ia á el núme o de monedas
ecibidas.

117
Figu a 80. Vis a Juga Po a de Use
En la igu a 80 se mues a la is a de juga po a del usua io.
Cuando hayas ellenado oda la po a, e sald á una ale a indicándolo.
118
Figu a 81. Vis a Po a ya ealizada de Use
En la igu a 81 se mues a el mensaje cuando el usua io ya ha ealizado la
po a.
B-6 Comp a
A la ho a de comp a c omos el usua io iene la posibilidad de comp a 1 sob e
con 1 c omo, con 3 c omos o con 5 c omos. En unción de que elija una opción
u o a el p ecio en monedas se á uno u o o.
Se di e encian en sob es de b once, pla a o de o o.
Figu a 82. Vis a Sob es de Use
En la igu a 82 se mues a la is a de las opciones de comp a de sob es del
usua io.
Si se comp a un sob e de b once:
119
Figu a 83. Vis a comp a sob e de 1 de Use
En la igu a 83 se mues a la is a cuando el usua io comp a un sob e de 1
c omo.
Si se comp a un sob e de pla a:
120
Figu a 84. Vis a comp a sob e de 3 de Use
En la igu a 84 se mues a la is a cuando el usua io comp a un sob e de 3
c omos.
Si se comp a un sob e de o o:
127
Figu a 94. Vis a Jugado es Equipo de Use
En la igu a 94 se mues a la is a con c omos ob enidos del equipo
seleccionado en la is a de la igu a 93.
Mien as que del Ba celona solo se iene 1 de 6 posibles.
Figu a 95. Vis a Jugado es Equipo de Use

128
En la igu a 95 se mues a la is a con c omos ob enidos del equipo
seleccionado en la is a de la igu a 93.
B-10 Pe il
Pa a la is a del pe il, simplemen e e sald án us da os.
Figu a 96. Vis a Pe il de Use
En la igu a 96 se mues a la is a del pe il de usua io.