FERNANDO LÓPEZ CARRIÓN
TRABAJO DE FIN DE GRADO EN INGENIERÍA DEL SOFTWARE
FACULTAD DE INFORMÁTICA
UNIVERSIDAD COMPLUTENSE DE MADRID
Cu so 2018/2019
Di ec o : ANTONIO SARASA CABEZUELO
Mee &Sha e:
APLICACIÓN WEB PARA HACER AMIGOS
COMPARTIENDO GUSTOS Y AFICIONES
Ag adecimien os
En p ime luga , me gus a ía ag adece le a mi u o , An onio Sa asa Cabezuelo, el iempo
dedicado y la a ención p es ada. Sus consejos y ano aciones me han o ien ado desde el
p incipio y me ha sido más ácil p og esa es os meses en el abajo.
También quie o ag adece a mis pad es, mis he manas y mi amilia, la paciencia que han
enido conmigo en es os años de ca e a, de es ue zo y de supe ación. Su alien o ha sido
undamen al en momen os de caída, y la con ianza que deposi an en mí y en mi abajo,
me han hecho llega a consegui es e obje i o que me encuen o de endiendo.
Vine a es a casa con un sueño, y espe o i me con un sueño cumplido.
Índice gene al
Resumen ........................................................................................................................... 1
Abs ac ............................................................................................................................. 2
In oducción .............................................................................................................. 3
Mo i ación ......................................................................................................... 3
Obje i os ............................................................................................................ 3
Es uc u a ........................................................................................................... 4
In oduc ion ............................................................................................................... 6
Mo i a ion .......................................................................................................... 6
Objec i es .......................................................................................................... 6
S uc u e ............................................................................................................. 6
Es ado del a e ........................................................................................................... 8
Mee up ............................................................................................................... 8
Fe e .................................................................................................................. 9
Geokeda ........................................................................................................... 10
Timpik .............................................................................................................. 11
Tecnologías empleadas ........................................................................................... 13
He amien as pa a el clien e............................................................................. 13
HTML5 ..................................................................................................... 13
Boo s ap ................................................................................................... 13
CSS ........................................................................................................... 13
Lib e ías de iconos.................................................................................... 13
Ja asc ip .................................................................................................. 14
JQue y ....................................................................................................... 14
AJAX ........................................................................................................ 14
Boo s ap Da a ables ................................................................................. 15
Momen .js ................................................................................................. 15
Mapbox ................................................................................................. 15
He amien as de la pa e del se ido .............................................................. 15
Sp ing ....................................................................................................... 15
Ma en ....................................................................................................... 15
Thymelea ................................................................................................. 16
Base de da os: Fi ebase .................................................................................... 16
O as he amien as auxilia es ........................................................................... 16
Gi ............................................................................................................. 16
He amien as de desa ollo ....................................................................... 17
He oku ...................................................................................................... 18
Especi icación de equisi os .................................................................................... 19
Diag amas de casos de uso .............................................................................. 19
Casos de uso ..................................................................................................... 21
CU Usua io no iden i icado ...................................................................... 21
CU Usua io egis ado .............................................................................. 22
Modelo de da os ...................................................................................................... 42
Modelo en idad- elación .................................................................................. 42
Base de da os ................................................................................................... 42
In o mación de la aplicación .................................................................... 42
Usua ios .................................................................................................... 43
Ac i idades ............................................................................................... 47
No i icaciones ........................................................................................... 48
Mensajes ................................................................................................... 48
Con enido Mul imedia ..................................................................................... 49
Usua ios .................................................................................................... 49
Ac i idades ............................................................................................... 50
Au en icación ................................................................................................... 50
A qui ec u a de la aplicación................................................................................... 52
Capa de usua ios .............................................................................................. 52
Capa de p esen ación ....................................................................................... 53
Capa de negocio ............................................................................................... 53
Capa de in eg ación ......................................................................................... 54
Capa de Recu sos ............................................................................................. 54
Diseño de la aplicación ........................................................................................... 55
Aspec os de diseño ........................................................................................... 55
Visibilidad del es ado del sis ema ............................................................ 55
Adecuación en e el sis ema y el mundo eal ........................................... 56
Libe ad y con ol po el usua io .............................................................. 56
Consis encia y es ánda es ......................................................................... 57
P e ención de e o es ............................................................................... 57
Reconoce mejo que eco da .................................................................. 59
Flexibilidad y e iciencia de uso ................................................................ 59
Es é ica y diseño minimalis a ................................................................... 60
Ayuda a los usua ios a econoce , diagnos ica y soluciona los e o es 60
Ayuda y documen ación ....................................................................... 61
Funcionalidad p incipal ................................................................................... 62
Inicio de sesión ......................................................................................... 62
C eación de usua ios ................................................................................. 64
Busca usua ios / ac i idades .................................................................... 67
Modi ica pe il......................................................................................... 69
Ges iona usua ios .................................................................................... 75
Amigos ..................................................................................................... 76
C ea ac i idades ...................................................................................... 79
Modi ica in o mación de la ac i idad ..................................................... 81
Insc ibi se / desinsc ibi se en una ac i idad ............................................. 83
Mapa de ac i idades .............................................................................. 85
Conclusiones y abajo u u o ................................................................................. 87
Conclusiones .................................................................................................... 87
T abajo u u o .................................................................................................. 87
Conclusions and u u e wo k .................................................................................. 89
Conclusions ...................................................................................................... 89
Fu u e wo k ...................................................................................................... 89
1. Anexo I: Guía de uso ............................................................................................... 94
1.1. Usua ios no iden i icados ................................................................................. 94
1.1.1. Página p incipal ........................................................................................ 94
1.1.2. Regis o ..................................................................................................... 95
1.1.3. Inicia sesión ............................................................................................. 96
1.2. Usua ios egis ados ......................................................................................... 96
1.2.1. Buscado ................................................................................................... 96
1.2.2. Ve Pe il .................................................................................................. 97
1.2.3. Modi ica pe il......................................................................................... 98
1.2.4. Ce a sesión ............................................................................................. 99
1.3. Adminis ado es ............................................................................................... 99
1.3.1. Ac i a / desac i a usua ios..................................................................... 99
1.3.2. Da de al a nue os adminis ado es ........................................................ 100
1.4. Pe sonas y Emp esas ...................................................................................... 100
1.4.1. C ea ac i idad ........................................................................................ 101
1.4.2. Modi ica ac i idad................................................................................. 102
1.4.3. Cancela ac i idad .................................................................................. 103
1.4.4. Insc ibi se / desinsc ibi se en una ac i idad ........................................... 104
1.4.5. Valo aciones ........................................................................................... 104
1.4.6. Amigos ................................................................................................... 106
1.4.7. Compa i ac i idades ............................................................................. 106
1.4.8. No i icaciones ......................................................................................... 107
1.4.9. Cha ......................................................................................................... 108
2. Anexo II: Guía de ins alación................................................................................ 109
2.1. C ea una nue a ca pe a ................................................................................. 109
2.2. Descomp imi el a chi o comp imido ........................................................... 109
2.3. Comp oba pue o 8080 ................................................................................. 109
2.4. Ejecu a el p oyec o ....................................................................................... 109
2.5. Despliegue de la aplicación ........................................................................... 110
2.6. Ad e encias .................................................................................................. 110
Índice de Figu as
Figu a 1. Página p incipal de Mee up ............................................................................... 9
Figu a 2. Página p incipal de Fe e ................................................................................ 10
Figu a 3. Página p incipal de Geokeda ........................................................................... 11
Figu a 4. Página de e en os de Timpik .......................................................................... 12
Figu a 5. Casos de uso de la aplicación .......................................................................... 20
Figu a 6. Casos de uso Usua io no au en icado .............................................................. 21
Figu a 7. Casos de uso Usua io egis ado ..................................................................... 23
Figu a 8. Casos de uso Usua io Admins ado ............................................................... 27
Figu a 9. Casos de uso Pe sonas y Emp esas ................................................................. 30
Figu a 10. Modelo en idad- elación ............................................................................... 42
Figu a 11. Base de da os de la aplicación en Fi ebase Real ime Da abase .................... 43
Figu a 12. Ejemplo de colección de usua ios en Fi ebase Real ime Da abase............... 44
Figu a 13. Es uc u a de Fi ebase Cloud S o age ........................................................... 49
Figu a 14. Es uc u a de la ca pe a "use s" de Fi ebase Cloud S o age ......................... 49
Figu a 15. Es ucu a de la ca pe a de un usua io en Fi ebase Cloud S o age ............... 49
Figu a 16. Con enido de la ca pe a "p o ilePic u e" de un usua io en Fi ebase Cloud
S o age ............................................................................................................................ 50
Figu a 17. Es uc u a de la ca pe a “ac i i ies” de Fi ebase Cloud S o age ................... 50
Figu a 18. A chi os almacenados en una ac i idad de Fi ebase Cloud S o age ............ 50
Figu a 19. A qui ec u a de la aplicación ........................................................................ 52
Figu a 20. A qui ec u a in e na de la Capa de P esen ación .......................................... 53
Figu a 21. A qui ec u a in e na de la Capa de Recu sos ................................................ 54
Figu a 22. Vis a de Inicio de sesión con la opción esal ada .......................................... 55
Figu a 23. Vis a de una ac i idad que no co esponde con ningún menú ...................... 56
Figu a 24. Ca ego ías de las ac i idades iden i icadas median e iconos ........................ 56
Figu a 25. Mensaje de con i mación de baja jun o con las opciones de con i ma y
cancela ........................................................................................................................... 57
Figu a 26. Ba a p incipal de la aplicación mos ando el logo, las no i icaciones y el pe il
........................................................................................................................................ 57
Figu a 27. Ba a p incipal de la aplicación isualizada en un disposi i o mó il ........... 57
Figu a 28. Validaciones al c ea una ac i idad............................................................... 58
Figu a 29. Vis a de e ac i idad una ez és a ha empezado ......................................... 58
Figu a 30. Fil o del mapa con di e en es iconos en unción de la opción ..................... 59
Figu a 31. No i icaciones y lis a de ac i idades con enlaces a las en idades ................. 59
Figu a 32. En idades con in o mación ele an e ............................................................ 60
Figu a 33. Vis a con iconos iden i ica i os sin sopo e esc i o ...................................... 60
Figu a 34. Vis a de mis ac i idades con ex o de ayuda ................................................. 61
Figu a 35. Diag ama de clases de la aplicación.............................................................. 62
Figu a 36. Página de inicio de sesión ............................................................................. 63
Figu a 37. Página de egis o pa a Pe sonas y Emp esas ............................................... 65
Figu a 38. Página de egis o pa a Adminis ado es ...................................................... 65
Figu a 39. Página de búsqueda de usua ios pa a Adminis ado es ................................ 68
Figu a 40. Página de búsqueda de usua ios y ac i idades pa a Pe sonas y Emp esas ... 68
Figu a 41. Página pa a modi ica el pe il ...................................................................... 70
Figu a 42. Modal pa a cambia la imagen de pe il ....................................................... 72
Figu a 43. Modal pa a cambia la con aseña................................................................. 73
Figu a 44. In e az pa a cancela la cuen a ..................................................................... 74
Figu a 45. Página pa a la ges ión de usua ios de los Adminis ado es .......................... 75
Figu a 46. Modal pa a añadi un nue o amigo ............................................................... 77
Figu a 47. Página pa a acep a / echaza pe iciones de amis ad ................................... 78
Figu a 48. Página pa a elimina amigos ......................................................................... 79
Figu a 49. Página pa a c ea una ac i idad..................................................................... 80
Figu a 50. Página pa a modi ica una ac i idad ............................................................. 82
Figu a 51. Modal pa a añadi una imagen a una ac i idad ............................................. 82
Figu a 52. Página imagen añadida a una ac i idad ........................................................ 82
Figu a 53. Página de una ac i idad a la que insc ibi se.................................................. 84
Figu a 54. Página p incipal con el mapa de la aplicación .............................................. 86
Figu a 55. Página imagen añadida a una ac i idad ...................................................... 103
Índice de Tablas
Tabla 1. A ibu os de un Adminis ado en Fi ebase Da abase ...................................... 45
Tabla 2. A ibu os de una Pe sona en Fi ebase Da abase ............................................... 46
Tabla 3. A ibu os de una Emp esa en Fi ebase Da abase ............................................. 47
Tabla 4. A ibu os de una Ac i idad en Fi ebase Da abase ............................................ 48
Tabla 5. A ibu os de una No i icación en Fi ebase Da abase ....................................... 48
Tabla 6. A ibu os de un Mensaje en Fi ebase Da abase ................................................ 49
Tabla 7. A ibu os de Usua io en Fi ebase Au h ............................................................ 51
Tabla 8. A ibu os pe enecien es a un usua io egis ado .............................................. 66
Tabla 9. A ibu os pe enecien es una ac i idad ............................................................. 80
5
En es e segundo añadido, se de allan los di e en es pasos eque idos pa a la
ins alación y co ec o uncionamien o de la he amien a.
6
In oduc ion
In his chap e will be explained he mo i a ion o de elop he p ojec , he objec i es,
and he s uc u e o he memo y.
Mo i a ion
Cu en ly, adul s (o e 18 yea s) ace he eali y o spending mos o hei ime
sa is ying hei p o essional obliga ions, lea ing he es o imp o ing hei social
li e.
In his sense, he mission o his p ojec is o unde s and ha ime is limi ed, and
he human eels he need o adminis a e i ; being o ganiza ion skills one o he
keys o each hei pe sonal success.
On he o he hand, he ision will ocus on making su e ha ee ime means
quali y, since i in luences he physical and men al well-being o people.
Fo hese easons, i is clea ha people need o o ganize hei ee ime while
eeling ealized and sha ing hese momen s wi h o he s.
Objec i es
Taking in o accoun he abo e, he aim is o de elop an applica ion ha allows
use s o manage hei ee ime while in e ac ing wi h o he people.
This objec i e is e ined in he ollowing sub-objec i es:
• Use ac i i ies o e en s as mechanisms o union be ween use s
• P omo e his mechanism allowing he use s hemsel es o de ine he
ac i i ies ha a e o ganized
• Classi y hese plans acco ding o he common in e es s o a g oup o
people
• Place he ac i i ies in a speci ic loca ion, allowing use s o speci y a
mee ing poin
• Ease communica ion mechanisms among he use s who will a end hese
e en s, so hey can keep in ouch
• P o ide eedback sys em o use s, so hey can assess and il e he
o ganized e en s
S uc u e
This chap e will summa ize he s uc u e o memo y, exposing he di e en
sec ions in which is di ided.
1. In oduc ion
7
This sec ion de ails he mo i a ion ha has led o de elop his wo k, he
objec i es ha a e p oposed, and he s uc u e o he memo y i sel .
2. S a e o a
P esen s he ools and applica ions ha ul ill a unc ionali y simila o he one
p oposed.
3. Used echnologies
This chap e explains he echnologies and ools used in he wo k, as well as
he lib a ies and amewo ks employed.
4. Requi emen s speci ica ion
In his sec ion he di e en cases o use o e ed by he applica ion a e exposed,
o ganizing hem acco ding o he unc ionali y a ailable o each ac o .
5. Da a model
This chap e explains he design and o ganiza ion o he da abase, as well as
he in o ma ion i con ains.
6. A chi ec u e o he applica ion
In his sec ion he a chi ec u e o he web p ojec is exposed, desc ibing he
di e en laye s in which i is di ided.
7. Applica ion design
In his chap e he design o he ool is app oached, associa ing each g aphic
in e ace wi h he unc ionali y i implemen s.
8. Conclusions and u u e wo k
This sec ion lis s he conclusions de i ed om he p ojec ’s de elopmen , as
well as he di e en imp o emen s and changes ha could be implemen ed in
he u u e.
Bibliog aphy
This chap e sum up he di e en ex e nal applica ion’s esou ces ha ha e
been employed.
Annex I: Use guide
In his i s addi ional sec ion, a se ies o guidelines a e been exposed in o de
o desc ibe he main unc ionali y o he applica ion.
Annex II: Ins alla ion guide
In his second addi ion, he s eps equi ed o he ins alla ion and co ec ools’
ope a ion a e de ailed.
8
Es ado del a e
En es e capí ulo, se desc iben algunas de las he amien as que implemen an
uncionalidades pa ecidas a las desa olladas en es e abajo.
Mee up
Es una ed social mul ipla a o ma que pe mi e a sus miemb os uni se a g upos
c eados po o ganizado es, con el obje i o de conec a pe sonas con in e eses en
común [1] [2], eniendo un g an impac o en la sociedad [3].
La aplicación es á cen ada en la c eación de g upos o “mee ups”, cuyos
adminis ado es son los enca gados de o ganiza los e en os, mode a las
con e saciones y o os, ealiza encues as, e c. De es a mane a, los usua ios
pueden uni se a es os g upos en base a sus gus os y ca ego ías. Es o puede e se
en la página web o icial [4] mos ada en la Figu a 1.
La he amien a cuen a a su ez con un sis ema de amigos, po el cual los usua ios
pueden pone se en con ac o con o a gen e sin que sea necesa io ene una
ac i idad en común.
Pese a que el si io web y las apps mó iles son g a ui as, y no con ienen publicidad;
la emp esa ob iene ing esos cob ando una memb esía mensual a los o ganizado es
de los e en os, oscilando es as en e los 8 y 15 $ (USD) dependiendo de las o e as
e impues os aplicados.
9
Figu a 1. Página p incipal de Mee up
Fe e
Se a a de una pla a o ma social cuyo obje i o p incipal es que los usua ios
puedan ap o echa las di e en es o e as, icke s y en adas que se publici an;
siendo líde en es e sec o [5] [6], pese a que equie e un gas o mone a io po pa e
del usua io.
10
Es a aplicación como se puede ap ecia en el si io web o icial [7] de la Figu a 2,
des aca po su sencillez, eliminando la in e acción en e los usua ios, pe mi iendo
descub i nue os planes ce canos a una ubicación dada, y o eciendo un g an
ca álogo de e en os ca ego izados y o denados po echa.
Figu a 2. Página p incipal de Fe e
Geokeda
Es una aplicación g a ui a mul ipla a o ma española o ien ada a euni a pe sonas
pa a que compa an expe iencias depo i as y cul u ales. El obje i o de la
aplicación es acili a la compa ición de sus hobbies y a iciones en e los
usua ios.
La pla a o ma pe mi e c ea e en os públicos conocidos como “geokedadas” que
apa ece án en el calenda io p incipal, y ac i idades exclusi as c eadas po g upos
donde solo pueden insc ibi se sus in eg an es. También o ece ablones con
11
ac i idades popula es, o os de iniciación, e en os in o ma i os y guías de ayuda
pa a hace sen i lo más cómodo posible a los usua ios más nue os o ese ados.
Pa a conoce más ace ca de la aplicación se puede consul a la siguien e eseña
[8] o isi a el si io o icial cuya página p incipal se mues a en la Figu a 3 [9].
Figu a 3. Página p incipal de Geokeda
Timpik
Es una ed social [10] o ien ada a países de habla Hispana con un ca ác e
p o esional, cuyo obje i o es uni a depo is as y p o esionales del depo e, y que
ac ualmen e unciona como la he amien a p incipal pa a o ganiza e en os
depo i os en Mad id [11] [12].
Los depo is as pueden busca pa idos y e en os ce canos en un ho a io
especí ico, y que además incluye una lis a de espe a po si se p oducen bajas de
úl ima ho a ( éase Figu a 4). También incluye un o o pa a pode comen a el
e en o, y la opción de paga online en caso de que sea necesa io.
Así mismo, pueden añadi se nue os amigos, consul a los log os ob enidos, o
c ea y pa icipa en clubs pa a o ma pa e de pequeñas comunidades depo i as.
Los p o esionales del depo e son los enca gados de o ganiza los e en os que
end án luga en la aplicación, cuyo pe il es á o ien ado a emp esas y clubes de
12
depo es que necesi en una he amien a pa a ges iona los e en os que end án
luga en sus ins alaciones.
Po úl imo, cabe des aca que la emp esa gene a bene icios median e el cob o de
una comisión a los jugado es y clubes que pa icipan en es os e en os, llegando a
acue dos come ciales con es os locales.
Figu a 4. Página de e en os de Timpik
13
Tecnologías empleadas
En es e capí ulo se desc iben las ecnologías u ilizadas pa a desa olla el p oyec o.
La p esen ación se a a es uc u a exponiendo las ecnologías empleadas en el lado del
clien e, en el lado del se ido , y la base de da os. Así mismo, se comen a án o as
he amien as adicionales u ilizadas.
He amien as pa a el clien e
HTML5
En el lado del clien e, se ha u ilizado HTML5 [13] [14], el lenguaje de
ma cado empleado mundialmen e pa a el desa ollo de páginas web. A
a és de es e, se implemen an los con enedo es y con enidos de nues a
aplicación, u ilizando e ique as que deno an el comienzo y inal de es os
elemen os.
Boo s ap
Es una biblio eca de he amien as web de código abie o ampliamen e
ex endida, compa ible con la mayo ía de na egado es, y que con iene
plan illas de diseño pa a el desa ollo de in e aces de usua io. Es e
amewo k [15] pe mi e desa olla aplicaciones web esponsi e que se
adap an a p ác icamen e cualquie ipo de disposi i o, aunque
p incipalmen e es á o ien ado a la isualización en e minales mó iles
(mobile- i s ). Además, cuen a con un g an epe o io de ejemplos y
documen ación que ayudan al desa ollado a en ende ápidamen e el uso
de la he amien a.
CSS
Es un lenguaje de diseño g á ico que pe mi e c ea hojas de es ilo en
cascada (Cascade S yle Shee s [16]) que con ienen eglas o p opiedades de
es ilo (colo es, uen es, má genes, e c.) aplicables al elemen o
especi icado. Es e lenguaje es á diseñado pa a sepa a el con enido de la
página web (esc i o en HTML) de la o ma en la que se p esen a,
educiendo la complejidad, epe ición de código, y pe mi iendo adap a los
documen os al disposi i o en el que se es én isualizando.
Lib e ías de iconos
Con el obje i o de que la aplicación sea los más amigable posible con el
usua io, se han u ilizado biblio ecas de iconos.
14
La p ime a es Fon -Awesome [17], un amewo k de iconos compa ible
con la mayo ía de na egado es y disposi i os que emplea imágenes
ec o iales pa a ep esen a obje os, símbolos y igu as. Es á diseñado pa a
unciona jun o con Boo s ap o eciendo más de 300 iconos a inclui en
si ios web median e una simple e ique a HTML.
En segundo luga , se ha u ilizado Ma e ial-Icons, una lib e ía de iconos
c eada po Google bajo el concep o de Ma e ial-Design [18]. Es a o ma
de diseño o ece una se ie de pau as y no mas que p ome en esul ados
cla os, sencillos, o denados, llama i os, y cuya je a quía se basa en el uso
de somb as pa a indica la posición en la que se encuen an los elemen os
en la in e az.
Ja asc ip
Se a a de un lenguaje de p og amación in e p e ado y o ien ado a obje os,
u ilizado ampliamen e an o en el lado del clien e como en el lado del
se ido . Ja asc ip [19] es á basado en p o o ipos, que se u ilizan pa a
cons ui webs dinámicas, inco po a e ec os, maneja e en os, p ocesa
o mula ios, e c [20]. Cons i uye jun o con HTML y CSS, los es pila es
undamen ales sob e los que se cons uyen la g an mayo ía de si ios web
en In e ne .
JQue y
JQue y [21] [22] es una biblio eca mul ipla a o ma de so wa e lib e y
código abie o des inada p incipalmen e a in e ac ua y manipula los
elemen os HTML DOM ( ep esen ación en o ma de á bol de odos los
elemen os de un si io web). La azón de se de es a he amien a es sepa a
el código Ja asc ip de los documen os HTML, o eciendo uncionalidad
de una mane a b e e, cla a y compa ible con odos los na egado es.
También p opo ciona manejado es de e en os, animaciones y pe iciones
AJAX.
AJAX
AJAX [23] (Asynch onous Ja asc ip And Xml) es una écnica empleada
pa a desa olla si ios web y aplicaciones in e ac i as, o eciendo
dinamismo en e las comunicaciones de clien e y se ido . Es a ecnología
pe mi e que una página web ya ende izada pueda solici a nue a
in o mación al se ido en segundo plano, de mane a asínc ona, y sin
necesidad de eca ga se, pe mi iendo implemen a acciones complejas o
wo k lows sin que se p oduzcan in e upciones.
21
Casos de uso
En es a subsección se abo da án con de alle cada uno de los casos de uso,
ag upados según los ac o es que in e ienen y que componen la aplicación.
CU Usua io no iden i icado
Es os son los usua ios anónimo no egis ados que po an o no pueden
accede a la uncionalidad comple a de la he amien a, limi ándose a los
casos de uso desc i os en la Figu a 6.
Figu a 6. Casos de uso Usua io no au en icado
Caso de uso
Desc ipción
Iden i icado
InicioSesion
Nomb e
Inicio de sesión
Ac o es
Usua io no iden i icado
Visión gene al
Pe mi e al usua io accede a la aplicación
Condiciones p e ias
El usua io debe encon a se ac i o y egis ado en la
aplicación
Resul ado
Redi ige a la página de inicio del usua io
CU Asociados
C ea Usua ioPe sona, C ea Usua ioEmp esa,
C ea Usua ioAdminis ado , Ce a Sesion
En adas
Email y con aseña del usua io
Salida
No i icación de inicio de sesión
Índice de u ilización
Al o
22
Caso de uso
Desc ipción
Iden i icado
C ea Usua ioPe sona
Nomb e
C ea un usua io con el ol de pe sona
Ac o es
Usua io no iden i icado
Visión gene al
Pe mi e al usua io c ea una cuen a en el sis ema
Condiciones p e ias
El usua io no debe encon a se ya egis ado
Resul ado
C ea la cuen a e inicia sesión en la aplicación
CU Asociados
Inicia Sesion, C ea Usua ioEmp esa,
C ea Usua ioAdminis ado , Desac i a Cuen a,
Ce a Sesion
En adas
Da os de la pe sona a da de al a
Salida
No i icación de inicio de sesión
Índice de u ilización
Medio
Caso de uso
Desc ipción
Iden i icado
C ea Usua ioEmp esa
Nomb e
C ea un usua io con el ol de emp esa
Ac o es
Usua io no iden i icado
Visión gene al
Pe mi e al usua io c ea una cuen a en el sis ema
Condiciones p e ias
El usua io no debe encon a se ya egis ado
Resul ado
C ea la cuen a e inicia sesión en la aplicación
CU Asociados
Inicia Sesion, C ea Usua ioPe sona,
C ea Usua ioAdminis ado , Desac i a Cuen a,
Ce a Sesion
En adas
Da os de la emp esa a da de al a
Salida
No i icación de inicio de sesión
Índice de u ilización
Medio
CU Usua io egis ado
En el caso de los usua ios egis ados, ya o man pa e de la aplicación,
po lo que pueden accede a la uncionalidad comple a que se ecoge en la
Figu a 7.
23
Figu a 7. Casos de uso Usua io egis ado
24
Caso de uso
Desc ipción
Iden i icado
Busca Usua ios
Nomb e
Busca usua ios
Ac o es
Usua io egis ado
Visión gene al
Pe mi e encon a al usua io cuyo email o nomb e sea simila
al ex o especi icado
Condiciones p e ias
El ex o de búsqueda no puede encon a se acío
Resul ado
De uel e los esul ados encon ados
CU Asociados
Busca Ac i idad
En adas
Tex o de búsqueda
Salida
Resul ados
Índice de u ilización
Muy al o
Caso de uso
Desc ipción
Iden i icado
Ve Pe il
Nomb e
Ve pe il
Ac o es
Usua io egis ado
Visión gene al
Pe mi e al usua io isualiza su in o mación de pe il
Condiciones p e ias
Ninguna
Resul ado
Mues a los da os del usua io
CU Asociados
Modi ica ImagenPe il , Modi ica Pe il,
Modi ica Con aseña
En adas
Iden i icado del usua io
Salida
Ninguna
Índice de u ilización
Muy al o
25
Caso de uso
Desc ipción
Iden i icado
Modi ica ImagenPe il
Nomb e
Modi ica imagen de pe il
Ac o es
Usua io egis ado
Visión gene al
Pe mi e al usua io modi ica la imagen de pe il ac ual
Condiciones p e ias
Ninguna
Resul ado
Modi ica la imagen de pe il ac ual
CU Asociados
Ve Pe il, Modi ica Pe il, Modi ica Con aseña
En adas
Imagen nue a
Salida
Se ac ualiza la o o de pe il dinámicamen e
Índice de u ilización
Medio
Caso de uso
Desc ipción
Iden i icado
Modi ica Pe il
Nomb e
Modi ica pe il
Ac o es
Usua io egis ado
Visión gene al
Pe mi e al usua io modi ica la in o mación de pe il
Condiciones p e ias
Ninguna
Resul ado
Modi ica los da os del usua io
CU Asociados
Ve Pe il, Modi ica ImagenPe il, Modi ica Con aseña
En adas
Da os del usua io a modi ica
Salida
No i icación de cambios gua dados
Índice de u ilización
Medio
26
Caso de uso
Desc ipción
Iden i icado
Modi ica Con aseña
Nomb e
Modi ica con aseña
Ac o es
Usua io egis ado
Visión gene al
Pe mi e al usua io modi ica la con aseña de inicio de sesión
Condiciones p e ias
Ninguna
Resul ado
Modi ica la con aseña del usua io
CU Asociados
Ve Pe il, Modi ica ImagenPe il, Modi ica Pe il
En adas
Con aseña an igua y con aseña nue a
Salida
No i icación de con aseña cambiada
Índice de u ilización
Bajo
Caso de uso
Desc ipción
Iden i icado
Desac i a Cuen a
Nomb e
Desac i a cuen a
Ac o es
Usua io egis ado
Visión gene al
Pe mi e al usua io cancela la cuen a y ce a la sesión
Condiciones p e ias
Ninguna
Resul ado
Desac i a la cuen a y cie a la sesión
CU Asociados
C ea Usua ioAdminis ado , C ea Usua ioPe sona,
C ea Usua ioEmp esa, Ce a Sesion
En adas
Con i mación esc i a del usua io pa a desac i a la cuen a
Salida
No i icación de cuen a desac i ada
Índice de u ilización
Bajo
27
Caso de uso
Desc ipción
Iden i icado
Ce a Sesion
Nomb e
Ce a sesión
Ac o es
Usua io egis ado
Visión gene al
Pe mi e al usua io ce a la sesión y abandona la aplicación
Condiciones p e ias
El usua io debe encon a se con la sesión iniciada
Resul ado
Redi ige a la página de p incipal de la aplicación
CU Asociados
Inicia Sesion
En adas
Ninguna
Salida
No i icación de cie e de sesión
Índice de u ilización
Medio
4.2.2.1. CU Adminis ado
Los adminis ado es son los usua ios egis ados enca gados de
ges iona las cuen as de usua io de la aplicación a a és de las
uncionalidades p esen adas en la Figu a 8.
Figu a 8. Casos de uso Usua io Admins ado
28
Caso de uso
Desc ipción
Iden i icado
Reac i a Usua ios
Nomb e
Reac i a usua ios
Ac o es
Admins ado
Visión gene al
Pe mi e al adminis ado ol e a ac i a las cuen as de
usua io seleccionadas
Condiciones p e ias
Los usua ios seleccionados deben encon a se desac i ados
Resul ado
Vuel e a ac i a las cuen as de usua io seleccionadas,
pe mi iendo de nue o a és os el acceso a la aplicación
CU Asociados
Desac i a Usua ios
En adas
Lis a de iden i icado es de los usua ios seleccionados
Salida
Tabla de usua ios ac ualizada con los usua ios eac i ados
Índice de u ilización
Bajo
Caso de uso
Desc ipción
Iden i icado
Desac i a Usua ios
Nomb e
Desac i a usua ios
Ac o es
Admins ado
Visión gene al
Pe mi e al adminis ado desac i a las cuen as de usua io
seleccionadas
Condiciones p e ias
Los usua ios seleccionados deben encon a se ac i ados
Resul ado
Da de baja las cuen as de usua io seleccionadas, impidiendo
a es os ol e a inicia sesión en la aplicación
CU Asociados
Reac i a Usua ios
En adas
Lis a de iden i icado es de los usua ios seleccionados
Salida
Tabla de usua ios ac ualizada con los usua ios desac i ados
Índice de u ilización
Bajo
29
Caso de uso
Desc ipción
Iden i icado
C ea Usua ioAdminis ado
Nomb e
C ea un usua io con el ol de adminis ado
Ac o es
Adminis ado
Visión gene al
Pe mi e al usua io da de al a una nue a cuen a de
adminis ado en el sis ema
Condiciones p e ias
El usua io no debe encon a se ya egis ado
Resul ado
C ea la cuen a de usua io
CU Asociados
Inicia Sesion, C ea Usua ioPe sona, C ea Usua ioEmp esa,
Desac i a Cuen a, Ce a Sesion
En adas
Da os del adminis ado a da de al a
Salida
No i icación de adminis ado c eado
Índice de u ilización
Bajo
30
4.2.2.2. CU Pe sona y Emp esa
Es os ac o es compa en uncionalidad, siendo dis inguibles a
a és de los a ibu os gua dados sob e cada uno en la base da os.
A con inuación, se mues a el diag ama de casos de uso que indica
la uncionalidad accesible pa a es os ac o es (Figu a 9).
Figu a 9. Casos de uso Pe sonas y Emp esas
37
Caso de uso
Desc ipción
Iden i icado
Elimina ImagenesAc i idad
Nomb e
Elimina imágenes en una ac i idad p opia
Ac o es
Pe sona / Emp esa
Visión gene al
Pe mi e al usua io elimina una imagen exis en e de una
ac i idad c eada
Condiciones p e ias
La ac i idad especi icada debe pe enece al usua io, es a
ac i a, no habe inalizado, y la o o debe exis i .
Resul ado
Elimina la imagen indicada del ca usel de o og a ías ded la
ac i idad
CU Asociados
Modi ica ImagenPe il, Añadi ImagenesAc i idad
En adas
Da os de la ac i idad a da de al a
Salida
No i icación de ac i idad c eada
Índice de u ilización
Medio
Caso de uso
Desc ipción
Iden i icado
Insc ibi seAc i idad
Nomb e
Insc ibi se en una ac i idad
Ac o es
Pe sona / Emp esa
Visión gene al
Pe mi e al usua io insc ibi se en una nue a ac i idad
Condiciones p e ias
El usua io no debe es a insc i o en la ac i idad, ni se el
adminis ado ; y la ac i idad debe encon a se ac i a y sin
empeza
Resul ado
Insc ibe al usua io en la ac i idad indicada
CU Asociados
Desinsc ibi seAc i idad
En adas
Iden i icado de la ac i idad a insc ibi se
Salida
No i icación de insc ipción
Índice de u ilización
Al o
38
Caso de uso
Desc ipción
Iden i icado
Desinsc ibi seAc i idad
Nomb e
Desinsc ibi se de una ac i idad
Ac o es
Pe sona / Emp esa
Visión gene al
Pe mi e al usua io desinsc ibi se de una ac i idad
Condiciones p e ias
El usua io debe es a insc i o en la ac i idad, no debe se el
adminis ado ; y la ac i idad debe encon a se ac i a y sin
empeza
Resul ado
Desinsc ibe al usua io de la ac i idad indicada
CU Asociados
Insc ibi seAc i idad
En adas
Iden i icado de la ac i idad a desinsc ibi se
Salida
No i icación de desinsc ipción
Índice de u ilización
Medio
Caso de uso
Desc ipción
Iden i icado
Busca Fil a Ac i idades
Nomb e
Busca ac i idades / Fil a ac i idades en el mapa
Ac o es
Pe sona / Emp esa
Visión gene al
Pe mi e al usua io busca / il a las ac i idades mos adas
Condiciones p e ias
Ninguna
Resul ado
Se mues an los esul ados ob enidos a pa i del c i e io de
búsqueda
CU Asociados
Busca Usua ios
En adas
Nomb e de la ac i idad en el caso de la búsqueda.
Fecha de inicio, adio en km, plazas lib es o ca ego ías
seleccionadas en el caso de a a se del il o alojado en el
mapa.
Salida
No i icación de ac i idad c eada
Índice de u ilización
Muy al o
39
Caso de uso
Desc ipción
Iden i icado
Ve Ac i idadesRegis adasC eadasTe minadas
Nomb e
Ve ac i idades egis adas / c eadas / e minadas
Ac o es
Pe sona / Emp esa
Visión gene al
Pe mi e al usua io e las ac i idades egis adas, c eadas o
e minadas, siendo accesibles desde el panel de ac i idades o
el menú de his o ial espec i amen e
Condiciones p e ias
Ninguna
Resul ado
Mues a la lis a de ac i idades según el c i e io seleccionado
CU Asociados
Ninguno
En adas
Ninguna
Salida
Lis a de ac i idades
Índice de u ilización
Muy al o
Caso de uso
Desc ipción
Iden i icado
Compa i Ac i idadesAmigos
Nomb e
Compa i ac i idades con amigos
Ac o es
Pe sona / Emp esa
Visión gene al
Pe mi e al usua io compa i una ac i idad con los amigos
seleccionados
Condiciones p e ias
Los usua ios seleccionados deben se amigos de la pe sona o
emp esa que se encuen e con la sesión iniciada
Resul ado
Compa e la ac i idad con los usua ios seleccionados
CU Asociados
No i icaciones
En adas
Lis a de iden i icado es de los usua ios, y ac i idad a
compa i
Salida
No i icación ac i idad compa ida
Índice de u ilización
Al o
40
Caso de uso
Desc ipción
Iden i icado
Valo a Ac i idad
Nomb e
Valo a ac i idad
Ac o es
Pe sona / Emp esa
Visión gene al
Pe mi e al usua io alo a una ac i idad en la que haya
pa icipado
Condiciones p e ias
El usua io debe habe pa icipado en la ac i idad, la ac i idad
debe es a e minada, y el usua io no puede se el
adminis ado del e en o.
Resul ado
Pe mi e al usua io alo a una ac i idad inalizada, pudiendo
deja a su ez un comen a io
CU Asociados
Valo a Usua io, RankingUsua ios, RankingAc i idades
En adas
Iden i icado del adminis ado de la ac i idad, alo ación y
comen a io edac ado po el usua io
Salida
Mues a la alo ación en la lis a de alo aciones, accesible
cuando se en los de alles de la ac i idad inalizada
Índice de u ilización
Medio
Caso de uso
Desc ipción
Iden i icado
RankingAc i idades
Nomb e
Ranking de ac i idades
Ac o es
Pe sona / Emp esa
Visión gene al
Pe mi e al usua io isualiza la lis a de las 10 ac i idades más
o adas de es e momen o
Condiciones p e ias
Ninguna
Resul ado
Mues a el op 10 de ac i idades más alo adas en la
aplicación
CU Asociados
Valo a Usua io, Valo a Ac i idad, RankingAc i idades
En adas
Ninguna
Salida
Top 10 de usua ios o denados po alo ación
Índice de u ilización
Medio
41
Caso de uso
Desc ipción
Iden i icado
No i icaciones
Nomb e
No i icaciones de ac i idad
Ac o es
Pe sona / Emp esa
Visión gene al
Pe mi e al usua io e y elimina las no i icaciones que se
p oducen po la acción de una ac i idad
Condiciones p e ias
Ninguna
Resul ado
Mues a las no i icaciones pendien es del usua io, pudiendo
es e a su ez ma ca las como leídas
CU Asociados
Ninguno
En adas
Ninguna
Salida
Lis a de no i icaciones pendien es
Índice de u ilización
Muy al o
Caso de uso
Desc ipción
Iden i icado
Cha Ac i idades
Nomb e
Cha en e usua ios de una ac i idad
Ac o es
Pe sona / Emp esa
Visión gene al
Pe mi e a los usua ios insc i os en una ac i idad in e ac ua
en e sí.
Condiciones p e ias
Los usua ios deben es a insc i os en la ac i idad
Resul ado
Mues a la con e sación exis en e, pe mi iendo el en ío de
nue os mensajes
CU Asociados
Cha Usua ios
En adas
Mensajes de ex o
Salida
Con e sación en e usua ios
Índice de u ilización
Muy al o
42
Modelo de da os
En es e capí ulo se explica la o ganización y es uc u a de la base de da os de la
aplicación.
Modelo en idad- elación
Pa a lle a a cabo la pe sis encia, se adjun a un esquema concep ual de la base de
da os, especi icando las en idades que apa ecen en la aplicación, y sus elaciones
(Figu a 10).
Figu a 10. Modelo en idad- elación
Base de da os
Pa a implemen a el modelo en idad elación se u iliza án di e en es clases de
en idades, componiendo és as la base de da os de la pla a o ma. Pa a ello se
p ocede á a clasi ica és as en unción del ipo de con enido que almacenan.
In o mación de la aplicación
Dado que se a a de una base de da os no elacional, no exis en ablas al
uso y el con enido de es as no iene po qué ene una es uc u a ija.
43
Conc e amen e la base de da os se es uc u a median e obje os en o ma o
JSON.
Debido a es o, es el desa ollado es el enca gado de diseña la base de
da os y man ene la en un es ado cohe en e, de mane a que al ealiza las
di e en es consul as no se comp ome a la in o mación almacenada.
En es e caso, se u iliza la he amien a Fi ebase Real ime Da abase pa a
almacena en colecciones la in o mación e e en e a los usua ios,
ac i idades, no i icaciones y mensajes, siguiendo la es uc u a mos ada
en la Figu a 11.
Figu a 11. Base de da os de la aplicación en Fi ebase Real ime Da abase
Usua ios
La aplicación dis ingue 3 ipos de usua ios: Adminis ado es, Pe sonas y
Emp esas.
Debido a que se a a de una base de da os no elacional, la in o mación de
cada usua io no sigue siemp e una es uc u a de da os ija, sino que sólo
se gua dan los a ibu os co espondien es en unción del ipo.
44
Colección de usua ios (“use s”): Con iene la in o mación e e en e a los
dis in as clases de usua ios que in e ac úan con la aplicación,
encon ándose cada una de las en idades indexadas a a és de un uid
(iden i icado único). A con inuación, en la Figu a 12 se mues a un
ejemplo de cómo se es uc u an los a ibu os de cada uno de es os ipos de
usua ios.
Figu a 12. Ejemplo de colección de usua ios en Fi ebase Real ime Da abase
45
5.2.2.1. Adminis ado es
Como se ha explicado an e io men e es os usua ios son los
enca gados de adminis a el es o de cuen as, siendo los únicos
capaces de da de al a nue os usua ios con es e pe il.
A con inuación, se mues a un ejemplo de es a en idad ( éase Tabla
1), y se desc ibe cada uno de sus a ibu os:
A ibu os
Desc ipción
ac i e
Campo que indica si el usua io es á ac i o
email (único)
Co eo elec ónico del usua io
messagingToken
Token que habili a al usua io pa a pode en ia y ecibi
an o no i icaciones como mensajes.
name
Nomb e del usua io
pho oU l
Imagen de pe il del usua io
ype (“adminis a o ”)
Campo que indica el ipo de usua io
uid
Iden i icado p opo cionado po Fi ebase Au h al egis a
un usua io
Tabla 1. A ibu os de un Adminis ado en Fi ebase Da abase
5.2.2.2. Pe sonas
Cons i uyen los usua ios egis ados cuyo obje i o es conoce
gen e y compa i sus in e eses a a és de las ac i idades que se
p oponen. A con inuación, se de allan los a ibu os de los que se
componen ( éase Tabla 2):
A ibu os
Desc ipción
ac i e
Campo booleano que indica si el usua io es á ac i o
bi hday
Fecha de nacimien o
ca ego ies
Ca ego ías seleccionadas po el usua io, es as e lejan sus
gus os y a iciones.
c ea edAc i i ies
Lis a con los uids de las ac i idades c eadas po el usua io
desc ip ion
Desc ipción del usua io
email (único)
Co eo elec ónico del usua io
iendIds
Lis a con los uids de los amigos del usua io
iendReques s
Lis a con las pe iciones de amis ad pendien es que el usua io
ha ecibido.
46
messagingToken
Token que habili a al usua io pa a pode en ia y ecibi
an o no i icaciones como mensajes.
name
Nomb e del usua io
pho oU l
Imagen de pe il del usua io
a ings
Lis a con las di e en es alo aciones esc i as po los
usua ios que se encuen an insc i os en alguna de las
ac i idades p opues as po és e.
egis e edAc i i ies
Lis a con los uids de las ac i idades en las que el usua io se
ha insc i o ( ambién apa ecen las ac i idades c eadas ya que
los usua ios siemp e se encuen an insc i os en sus p opias
ac i idades).
ype (“pe son”)
Campo que indica el ipo de usua io
uid
Iden i icado p opo cionado po Fi ebase Au h al egis a
un usua io
Tabla 2. A ibu os de una Pe sona en Fi ebase Da abase
5.2.2.3. Emp esas
Son los usua ios egis ados que buscan publici a sus ac i idades
a la mayo can idad de público posible. A con inuación se exponen
las di e en es p opiedades de las que es án compues as es as
en idades ( éase Tabla 3).
A ibu os
Desc ipción
ac i e
Campo booleano que indica si el usua io es á ac i o
ca ego ies
Ca ego ías seleccionadas po el usua io, es as e lejan sus
gus os y a iciones.
c ea edAc i i ies
Lis a con los uids de las ac i idades c eadas po el usua io
desc ip ion
Desc ipción del usua io
email (único)
Co eo elec ónico del usua io
iendIds
Lis a con los uids de los amigos del usua io
iendReques s
Lis a con las pe iciones de amis ad pendien es que el usua io
ha ecibido.
messagingToken
Token que habili a al usua io pa a pode en ia y ecibi
an o no i icaciones como mensajes.
name
Nomb e del usua io
pho oU l
Imagen de pe il del usua io
53
Capa de p esen ación
En segundo luga , la capa de p esen ación o on end se encuen a desa ollada
median e ecnologías web y cons i uye el clien e o in e az sob e la que ope a el
usua io. Es a ambién cons i uye la Vis a de nues a aplicación, o eciendo al
clien e las di e en es in e aces de usua io que componen el p oyec o, y
p opo cionando al se ido un pun o de acceso e in e cambio de da os a a és de
pe iciones y espues as.
Es la enca gada de hace accesible el modelo (la in o mación) a la in e az de
usua io, ans o mando los da os que le llegan en un o ma o que el clien e sea
capaz de en ende y en iando las pe iciones co espondien es al Con olado .
Es e on end es á compues o (Figu a 20) po plan illas HTML implemen adas
con Boo s ap que con ienen la es uc u a de la in e az cuyo es ilo se de ine
median e CSS pa a da un aspec o más llama i o a la aplicación. A su ez se
u iliza Ja asc ip pa a do a de dinamismo a las páginas web, u ilizando JQue y
pa a in eg a las di e en es lib e ías Da a ables, Momen .js y Mapbox desc i as en
la sección de ecnologías ( éanse las subsecciones 3.1.8, 3.1.9 y 3.1.10
espec i amen e).
Figu a 20. A qui ec u a in e na de la Capa de P esen ación
Capa de negocio
La e ce a columna ep esen a al se ido o backend que encapsula la mayo pa e
de la uncionalidad. Como en la g an mayo ía de p oyec os, es el enca gado de
implemen a la lógica de negocio, modelo de da os y con ol. A a és de és os se
ges ionan las pe iciones que se eciben del on end.
Es la capa donde se p oduce oda la in e acción en e los elemen os del MVC,
pues la Vis a en ía las pe iciones del usua io a a és de los Con olado es (clases
ano adas median e la e ique a @Con olle ), enca gados de in oca la dis in a
uncionalidad de la que se cons i uye el Modelo.
54
Es e modelo ep esen a a és de las en idades de negocio (clases ubicadas en el
paque e de domain) los da os solici ados que deben de ol e se al con olado pa a
que es e los en egue de nue o a la is a.
Capa de in eg ación
También es implemen ada en el backend, siendo la enca gada de in e comunica
el negocio con la base de da os. Pa a ello, el p oyec o se ha desa ollado de mane a
que pueda segui se inc emen ando su uncionalidad de o ma ácil y sencilla,
siendo el modelo el pun o de acceso a la in o mación, y u ilizando con es e in
se icios de aplicación (in e aces ubicadas en el paque e se ices que exponen la
uncionalidad de la aplicación).
És os a su ez implemen an las ope aciones CRUD (c ea , lee , ac ualiza y
bo a ) que in eg an y de inen es a capa bajo una base de da os ex e na ges ionada
po Fi ebase. U ilizando es a pla a o ma el sis ema es capaz de accede a la
in o mación alojada, siendo es a ges ionable a a és de las APIs y lib e ías Ja a
mencionadas en el capí ulo 5.
Capa de Recu sos
Po úl imo, en la Figu a 21 se obse an los di e en es componen es que o man la
Capa ex e na de Recu sos. Es a albe ga odos los da os pe sis en es de nues a
aplicación y nos p opo ciona una se ie de mé odos y ope aciones asínc onas pa a
pode ges iona y manipula nues os da os: au en icación, usua ios, ac i idades,
no i icaciones, mensajes y con enido mul imedia ( éase la sección 5. Modelo de
da os).
Figu a 21. A qui ec u a in e na de la Capa de Recu sos
55
Diseño de la aplicación
En es a sección se explica á cómo se ha implemen ado la uncionalidad más ele an e
de la aplicación según los ac o es que in e ienen, an o a ni el isual como a ni el de
código.
Aspec os de diseño
En es e apa ado se indica án las pau as y p incipios seguidos pa a el diseño isual
de la aplicación y cómo és os se han aplicado.
En p ime luga , de ini emos lo que se en iende po usabilidad, siendo es a la
acilidad que ienen los usua ios de in e ac ua y elaciona se con la in e az de
usua io de nues a página.
Con el obje i o de c ea in e aces usables que aumen en la e iciencia de las
páginas web, eduzcan los cos es y aumen en la idelización de los usua ios, Jakob
Nielsen, doc o en diseño de in e aces de usua io y ciencias de la compu ación
po la Uni e sidad Técnica de Dinama ca, de inió los 10 p incipios de diseño
basados en el usua io:
Visibilidad del es ado del sis ema
El usua io debe se conscien e en odo momen o de lo que es á pasando y
en qué pun o de la na egación se encuen a.
En es e sen ido la aplicación mues a en colo esal ado el menú en el que
se encuen a ac ualmen e el usua io (Figu a 22), y de no se es a página un
menú p incipal, se indica en neg i a y con un g an amaño de uen e el caso
de uso con el que usua io se encuen a in e ac uando en ese momen o
(Figu a 23).
Figu a 22. Vis a de Inicio de sesión con la opción esal ada
56
Figu a 23. Vis a de una ac i idad que no co esponde con ningún menú
Adecuación en e el sis ema y el mundo eal
La aplicación debe de mos a su in o mación y uncionalidad a a és del
mismo lenguaje que los usua ios.
Pa a ello, se emplean iconos iden i icables y que albe gan elación con el
mundo eal, como es el caso de las ca ego ías (Figu a 23), la papele a de
basu a pa a elimina una ac i idad ya e minada, ep esen a el his o ial
median e un eloj, el cha median e un bocadillo de ex o, la página
p incipal con una casa, e c.
Figu a 24. Ca ego ías de las ac i idades iden i icadas median e iconos
Libe ad y con ol po el usua io
Con el obje i o de da más libe ad y con ol al usua io, és e debe se capaz
de deshace los cambios que ecién haya ealizado. Pa a ello se o ecen las
opciones de con i ma o cancela los cambios en caso de que el usua io
equie a ealiza una modi icación de una ac i idad o de su p opio pe il.
57
También se ealiza una e i icación adicional en el caso de que el usua io
desee da de baja su pe il (Figu a 25).
Figu a 25. Mensaje de con i mación de baja jun o con las opciones de con i ma y cancela
Consis encia y es ánda es
Resul a con enien e segui una se ie de pa ones y es ánda es ampliamen e
u ilizados que el usua io ya iden i ica pa a no con undi lo.
Un ejemplo de es o es la exis encia del logo en la pa e supe io izquie da
de la página web (Figu a 26) y el uso del icono de menú mó il
(hambu guesa) en el caso de que el si io sea consul ado desde es e
disposi i o (Figu a 27). De mane a análoga, las no i icaciones se
encuen an ce canas a la iden i icación del usua io, y la selección del
nomb e del usua io en la pa e supe io de echa de la página conduce al
usua io a su p opio pe il.
Figu a 26. Ba a p incipal de la aplicación mos ando el logo, las no i icaciones y el pe il
Figu a 27. Ba a p incipal de la aplicación isualizada en un disposi i o mó il
P e ención de e o es
Con la inalidad de que el usua io no in oduzca da os e óneos ni
comp ome a el sis ema, las comp obaciones y alidaciones de in o mación
se ealizan an o en el clien e como el se ido (Figu a 28). Así mismo, al
58
usua io sólo se le o ece la uncionalidad a la que puede accede en cada
momen o, como puede se el caso de no mos a el bo ón de modi ica o
desinsc ibi se cuando la ac i idad ha empezado (Figu a 29), y de sus i ui
los iconos de compa i po elimina en la lis a de ac i idades una ez es as
han inalizado.
Figu a 28. Validaciones al c ea una ac i idad
Figu a 29. Vis a de e ac i idad una ez és a ha empezado
59
Reconoce mejo que eco da
Pa a hace las acciones más isibles y econocibles, la aplicación u iliza la
mayo can idad de iconos di e en es e iden i icables dependiendo del caso
de uso u opciones que se plan ean (Figu a 30), de al mane a que el usua io
pueda elaciona es as igu as isuales con la uncionalidad que
co esponda, aumen ando la usabilidad y luidez de la he amien a.
Figu a 30. Fil o del mapa con di e en es iconos en unción de la opción
También se emplea de mane a sis emá ica el uso de ca ds (Figu a 29),
bloques de con enido que o ganizan la in o mación o eciendo el í ulo de
la sección en la pa e supe io y dando paso a la uncionalidad que se
implemen a.
Flexibilidad y e iciencia de uso
Se p opo cionan di e en es pun os de acceso hacia una misma
uncionalidad con el obje i o de o ece lexibilidad y adap abilidad al
usua io.
La aplicación o ece siemp e un enlace a la en idad que se e e encia en
cada caso de uso, siendo el caso de las no i icaciones, usua ios insc i os en
la ac i idad, las ac i idades si uadas en lis a que desplazan el mapa a la
ubicación del e en o seleccionado ( éase Figu a 31), e c.
Figu a 31. No i icaciones y lis a de ac i idades con enlaces a las en idades
60
Es é ica y diseño minimalis a
Con el obje i o de acili a y simpli ica el uso de la he amien a, se
p opo ciona sólo la in o mación más ele an e en el caso de que las
en idades se mues en en o ma de lis a (Figu a 32), haciendo accesible el
es o de in o mación a a és de un enlace a la is a co espondien e.
Adicionalmen e, en caso de que en la in e az no exis a espacio su icien e
como pa a mos a la desc ipción de la uncionalidad, se u ilizan iconos
signi ica i os que dis inguen la acción seleccionada del es o; al es el caso
de la lis a de ac i idades del mapa, el il o, o la is a de amigos del usua io
( éase Figu a 33).
Figu a 32. En idades con in o mación ele an e
Figu a 33. Vis a con iconos iden i ica i os sin sopo e esc i o
Ayuda a los usua ios a econoce , diagnos ica y soluciona los
e o es
En el caso de que se p oduzca algún allo en la aplicación, y es e p o enga
de la in e acción habi ual del usua io, los mensajes de e o se exp esa án
de mane a que el usua io pueda iden i ica la causa del p oblema (Figu a
28).
No obs an e, en caso de que el usua io haya manipulado la in o mación
que se en ía al se ido a a és de alguna he amien a con el obje i o de
ompe el sis ema o ealiza acciones que en un p incipio no end ía
61
pe mi idas, la aplicación mos a á un e o gené ico o edi ecciona á
di ec amen e al usua io a la página p incipal.
Los e o es inespe ados o que no hayan sido a ados se án iden i icados y
mos ados en el se ido , no i icando al usua io de la si uación.
Ayuda y documen ación
La aplicación es á des inada a cualquie clase de público, po lo que la
uncionalidad e in o mación se o ece de una mane a cla a y o ganizada.
Pese a es o, en el caso de que no exis a con enido en alguna sección de la
ac i idad, se mues a al usua io un mensaje de ayuda que le in o ma de la
si uación (Figu a 34). Tal es el caso de la búsqueda, la lis a de ac i idades,
el his o ial, y los ankings.
Figu a 34. Vis a de mis ac i idades con ex o de ayuda
62
Funcionalidad p incipal
En p ime luga , se exponen las di e en es clases in e aces y paque es que
componen la aplicación (Figu a 35).
Figu a 35. Diag ama de clases de la aplicación
Una ez se conoce la es uc u a del p oyec o, se con inúa desa ollando la
uncionalidad p incipal que se p esen a.
Inicio de sesión
Median e el inicio de sesión, los usua ios egis ados en la aplicación son
capaces de accede a los di e en es se icios que es a o ece. Pa a ello, el
usua io debe á in oduci co ec amen e su co eo elec ónico y con aseña
de acceso ( éase Figu a 36). Mien as se comp ueban los da os en iados,
ambas e siones mos a án un icono de ca ga pa a in o ma al usua io que
la pe ición ha sido ecibida y se es á ami ando.
69
Código 3. Use Se iceImp.ja a Busca usua ios
Modi ica pe il
Los usua ios ambién son capaces de modi ica (Figu a 41) su nomb e,
echa de nacimien o (en el caso de que sean pe sonas), desc ipción b e e
(en el caso de que se a e de emp esas), ca ego ías, y desc ipción
comple a. Pa a ello se busca á la in o mación del usua io, se comp oba án
los da os, y se sus i ui á con los cambios in oducidos ( éase Código 4).
70
Figu a 41. Página pa a modi ica el pe il
71
Código 4. Use Con olle .ja a Edi a pe il
De mane a análoga se pod á cambia la imagen de pe il p esionando en el
bo ón co espondien e, y adjun ando el a chi o deseado como se obse a
en la Figu a 42. T as la subida se ac ualiza á la o o, pudiendo en cualquie
momen o elimina la median e el bo ón de bo a imagen.
Cabe des aca que odo es e p oceso se ealiza en el lado del clien e ( éase
Código 5), po lo que el se ido nunca ecibi á a chi os mul imedia. Pa a
cambia la imagen se comp oba á la ex ensión del iche o, y se busca á la
imagen an e io . En caso de que se encuen e, se bo a á el iche o an iguo
y se sus i ui á con el a chi o seleccionado.
72
Figu a 42. Modal pa a cambia la imagen de pe il
Código 5. edi P o ile.js Cambia imagen de pe il
También es posible modi ica la con aseña ac ual (Figu a 41) adjun ando
la con aseña an e io y una cla e di e en e. De es a mane a (Código 6) se
comp oba á que los da os in oducidos son co ec os, y que el usua io
exis e y se encuen a ac i o. T as es o se ac ualiza á la con aseña en
Fi ebase Au h y se no i ica á al usua io.
73
Figu a 43. Modal pa a cambia la con aseña
Código 6. Use Con olle .ja a Modi ica con aseña
O a uncionalidad que o ece la aplicación es la de cancela la cuen a
(Figu a 44), esc ibiendo el email del usua io seguido de un espacio y la
palab a CANCELAR. Pa a ello ( éase Código 7) se comp oba á que el
ex o adjun ado es el co ec o, se desac i a á la cuen a en Fi ebase Au h,
después en Fi ebase Real ime Da abase, y po úl imo se ce a á la sesión.
74
Figu a 44. In e az pa a cancela la cuen a
Código 7. Use Con olle .ja a Cancela cuen a
75
Ges iona usua ios
Los adminis ado es ambién son los enca gados de ges iona las cuen as
de las pe sonas y las emp esas. Pa a ello, és os cuen an con una página
(Figu a 45) donde se ca gan y paginan odos los usua ios de la aplicación,
de modo que puedan encon a a los usua ios que deseen da de al a o baja.
Pa a ello, los adminis ado es debe án i seleccionando los usua ios sob e
los que se quie an ealiza las ope aciones, y as es o selecciona la acción
co espondien e.
Figu a 45. Página pa a la ges ión de usua ios de los Adminis ado es
T as es o, se busca án los usua ios seleccionados, y en caso de que exis an,
se ac i a án o desac i a án en unción de lo elegido po el adminis ado
(p ime o en Fi ebase Au h y después en Fi ebase Rel ime Da abase) como
puede e se en el Código 8.
76
Código 8. AdminCon olle .ja a Reac i a usua ios
Amigos
Con el obje i o de que los usua ios puedan conoce se e in e ac ua con
o as pe sonas, se ha implemen ado la uncionalidad de en ia pe iciones
de amis ad.
Pa a ello, el usua io que desee en ia la pe ición debe busca a o o usua io
y en ia la solici ud con un mensaje opcional (a a és del modal p esen e
en la Figu a 46). T as es o, el sis ema comp oba á si ambos usua ios
exis en y en caso a i ma i o en ia á la solici ud de amis ad ( éase Código
9).
77
Figu a 46. Modal pa a añadi un nue o amigo
Código 9. F iendCon olle .ja a En ia pe ición de amis ad
De mane a análoga, el usua io obje i o pod á esol e la pe ición de
amis ad, acep ándola o echazándola (Figu a 47). Pa a ello, la he amien a
comp oba á que los da os son co ec os, que exis en ambos usua ios, que
la pe ición ue en iada, y en caso a i ma i o esol e á la pe ición,
78
añadiendo a cada usua io a sus espec i as lis as de amigos, y
pe mi iéndoles manda se mensajes en e sí ( éase Código 10).
Figu a 47. Página pa a acep a / echaza pe iciones de amis ad
Código 10. F iendCon olle .ja a Resol e pe ición de amis ad
Po úl imo, el sis ema pe mi i á a los usua ios elimina amigos ( éase
Figu a 48), debiendo comp oba p ime o que ambos usua ios exis en y
ienen una elación de amis ad (Código 11). T as es o se deshabili a á el
cha , y se elimina án de sus espec i as lis as.
85
Código 14. Ac i i yCon olle .ja a Insc ibi se en una ac i idad
Mapa de ac i idades
Median e la in e acción con el mapa (Figu a 54), el usua io po d á
encon a ac i idades ce canas a su ubicación, así como e en os que se
ajus en a sus in e eses. Es o es implemen ado median e Mapbox ( éase
sección 3.1.10), u ilizando una he amien a de gelocalización que en caso
de que se hayan dado los pe misos pe ienen es, es capaz de si ua al
usua io en el mapa, calculando la dis ancia de és e con las ac i idades.
A su ez, se o ece un il o de ac i idades pa a adecua se a las
p e e encias y necesidades de cualquie usua io. A a és de es os, se
pe mi e especi ica la echa de c eación, la dis ancia máxima en
kilóme os, los si ios disponibles, y las ca ego ías en las que se clasi iquen
las ac i idades.
86
De mane a análoga, en la in e az se ubica el bo ón de c ea ac i idades
pa a pe mi i a los usua ios p opone nue os planes.
Figu a 54. Página p incipal con el mapa de la aplicación
87
Conclusiones y abajo u u o
En es e capí ulo se ecogen las conclusiones ex aídas del desa ollo de es e
p oyec o, así como el abajo y uncionalidad u u a que queda pendien e de
implemen a .
Conclusiones
Las p incipales en ajas que ca ac e izan a la aplicación es que se a a de una
pla a o ma g a ui a, in ui i a, o iginal, y que emplea ecnologías muy conocidas y
ex endidas, con una base de da os ex e na que consigue da obus ez al sis ema.
Al se una he amien a desplegada en la nube p esen a las en ajas e
incon enien es de es e ipo de aplicaciones:
Ven ajas:
• Acceso desde cualquie disposi i o y luga , en cualquie momen o
• Tecnología siemp e ac ualizada, cumpliendo los más al os es ánda es de
segu idad
• Aho o en el man enimien o écnico (no equie e de ha dwa e, ni la
con igu ación y man enimien o del mismo)
• Capacidad de ampliación y c ecimien o casi inmedia a e ilimi ada
Incon enien es:
• Necesidad de conexión a in e ne
• Limi ación en la ges ión de la base de da os a las he amien as y pla a o mas
de Fi ebase
• Capacidad máxima de las pe iciones es ingida al gas o que el dueño de la
aplicación es é dispues o a ealiza , pues una ez la he amien a supe e el
núme o lími e de pe iciones, Google eque i á de una in e sión mone a ia pa a
que el p oyec o con inúe uncionando
Como esul ado inal, se ha conseguido desa olla una he amien a que consigue
cumpli su obje i o, conec a a pe sonas con in e eses en común que buscan pasa
pa e de su iempo lib e desa ollando ac i idades cul u ales, depo i as, sociales,
e c.
T abajo u u o
A con inuación, se de allan posibles mejo as o cambios que no han sido posibles
de implemen a , pe o que apo a ían un g an alo a la aplicación.
• Implemen a e siones pa a IOS y And oid que ecojan el mismo ni el de
uncionalidad que la desa ollada en el p oyec o.
88
• Desa olla una he amien a in eligen e que pe mi a suge i nue as
ac i idades en base a los e en os en los que ha pa icipado el usua io y sus
ca ego ías.
• Añadi cap chas y con i maciones de email que asegu en y e i iquen que
los usua ios egis ados son pe sonas eales.
• Añadi isibilidad a los campos de los usua ios pa a que és os puedan
decidi qué in o mación compa en con el es o.
• Implemen a la c eación de g upos de usua ios pa a que és os puedan
pone se en con ac o y puedan o ganiza nue as ac i idades siendo una
misma en idad.
• Modi ica las ac i idades pa a que se pe mi a añadi in o mación adicional
como el p ecio, condiciones de insc ipción / desinsc ipción, e en os
elacionados, e c.
• Añadi con i maciones y cancelaciones de asis encia a las ac i idades de
mane a que se elimine o eduzca la ince idumb e exis en e al acudi a un
e en o y desconoce qué usua ios se p esen a án.
• Mos a el es ado del usua io (Desconec ado / En línea / Ocupado /
Ausen e), bo a mensajes en iados en los úl imos 5 minu os, elimina
con e saciones an iguas, en ia mensajes con emo iconos, y adjun a
cualquie clase de con enido mul imedia a los mismos con el obje i o de
aumen a la iqueza del cha .
• Pe mi i epo a compo amien os ue a de luga , con enido inadecuado y
bloquea usua ios con el in de que no se puedan ecibi más mensajes, no
puedan en ia se pe iciones de amis ad, ni puedan insc ibi se a las
ac i idades del usua io.
89
Conclusions and u u e wo k
This chap e includes he conclusions d awn om he de elopmen o his p ojec ,
as well as he wo k and u u e unc ionali y ha emains o be implemen ed.
Conclusions
The applica ion p esen s he ad an age o being ee, in ui i e, and an o iginal
pla o m. I uses well-known and ex ended echnologies, wi h an ex e nal da abase
ha gi es obus ness o he sys em, because i a ailu e occu s in he se e , he
applica ion would s ill be accessible h ough he mobile applica ion.
Being a ool deployed in he cloud p esen s he ad an ages and disad an ages o
his ype o applica ions:
Ad an ages:
• Acces om any de ice and place, a any ime
• Technology always upda ed, mee ing he highes sa e y s anda ds
• Sa ings in echnical main enance (does no equi e ha dwa e, con igu a ion o
main enance)
• Capable o expanding and g owing almos immedia ely and unlimi ed
Disad an ages:
• In e ne connec ion needed
• Limi ed da abase managemen o Fi ebase ools and pla o ms
• Maximum capaci y o eques s es ic ed o he expense ha he owne o he
applica ion is willing o make, because once he ool exceeds he limi numbe
o eques s, Google will equi e a mone a y in es men o he p ojec o
con inue wo king
As a esul , i has been possible o de elop a ool ha achie es i s objec i e,
connec ing people wi h common in e es s who wan s o spend pa o hei ee
ime de eloping cul u al, spo s, social ac i i ies, e c.
Fu u e wo k
Below a e possible imp o emen s o changes ha ha e no been possible o
implemen , bu hey would b ing g ea alue o he applica ion.
• Implemen e sions o IOS and And oid ha e lec he same le el o
unc ionali y as ha de eloped in he p ojec .
• De elop an in elligen ool ha allows sugges ing new ac i i ies based on
he e en s in which he use and i s ca ego ies ha e pa icipa ed.
• Add cap chas and email con i ma ions ha ensu e and e i y ha he
egis e ed use s a e eal people.
90
• Add isibili y o use s’ ields so ha hey can decide wha kind o
in o ma ion sha e wi h he o he s.
• Modi y he ac i i ies da a in o de o allow adding new in o ma ion such
as p ice, egis a ion / un egis a ion condi ions, ela ed e en s, e c.
• Add assis ance checks o he ac i i ies in a way ha dele e o dec ease he
exis ing unce ain y when a ending o an e en and igno e which use s
will come.
• Show he use s a e (Disconnec ed, Online / Busy / Away), dele e
messages sen in he las 5 minu es, emo e old con e sa ions, send emojis
and any kind o mul imedia con en in o de o build a ich cha pla o m.
• Allow epo ing misplaced beha io , inapp op ia e con en , and block
annoying use s so ha hey can’ send mo e iend eques s, messages o
insc ibe in use ’s ac i i ies.
91
Bibliog a ía
[1]
« eelance map,» [En línea]. A ailable:
h ps://www. eelance map.com/ eelance - ips/es/12116-mee up- eelance s.
[2]
J. Pas o . [En línea]. A ailable: h ps://www.ja ipas o .com/como-hace -
ne wo king-en- u-ciudad-con-mee up/.
[3]
«El País,» [En línea]. A ailable:
h ps://elpais.com/ ecnologia/2004/12/27/ac ualidad/1104139679_850215.h ml.
[4]
«Mee up,» [En línea]. A ailable: h ps://www.mee up.com/es-ES/.
[5]
«ABC,» [En línea]. A ailable:
h ps://www.abc.es/ ecnologia/mo iles/aplicaciones/abci- e e -espanola- uel e-
locos- ies e os-londinenses-201807051116_no icia.h ml.
[6]
«Expansion,» [En línea]. A ailable: h p://www.expansion.com/economia-
digi al/companias/2018/08/01/5b603294ca4741a 778b4642.h ml.
[7]
«Fe e ,» [En línea]. A ailable: h ps:// e e up.com/mad id.
[8]
«And oid Spain,» [En línea]. A ailable: h ps://and oidspain.es/geokeda-depo e-
ocio-y-mucho-mas-con-gen e-de- u-ciudad/.
[9]
«Geokeda,» [En línea]. A ailable: h ps://geokeda.es/.
[10]
«Timpik,» [En línea]. A ailable: h ps://www. impik.com/.
[11]
«Xaka a And oid,» [En línea]. A ailable:
h ps://www.xa akand oid.com/aplicaciones-and oid/aplicaciones-and oid-
depo es- impik.
[12]
«Timpik,» [En línea]. A ailable:
h ps://www. impik.com/es/pa idosP o inciaDepo e/28-mad id.
[13]
Mozilla, «MDN web docs mozilla,» [En línea]. A ailable:
h ps://de elope .mozilla.o g/es/docs/Web/HTML.
[14]
«codigo acili o,» [En línea]. A ailable: h ps://codigo acili o.com/a iculos/que-es-
h ml.
[15]
Boo s ap Team, «Boo s ap,» 1 5 2019. [En línea]. A ailable:
h ps://ge boo s ap.com/.
[16]
W3C, «Wo ld Wide Web Conso ium,» [En línea]. A ailable:
h ps://www.w3.o g/S yle/CSS/.
92
[17]
«Fon Awesome,» [En línea]. A ailable: h ps:// on awesome.com/icons.
[18]
Google, «Ma e ial Design,» [En línea]. A ailable:
h ps://ma e ial.io/design/in oduc ion/#p inciples.
[19]
«MDN web docs mozilla,» [En línea]. A ailable:
h ps://de elope .mozilla.o g/es/docs/Web/Ja aSc ip .
[20]
«w3schools,» [En línea]. A ailable: h ps://www.w3schools.com/js e /de aul .asp.
[21]
«JQue y,» [En línea]. A ailable: h ps://jque y.com/.
[22]
«MDN web docs mozilla,» [En línea]. A ailable:
h ps://de elope .mozilla.o g/es/docs/Glossa y/jQue y.
[23]
«w3schools,» [En línea]. A ailable:
h ps://www.w3schools.com/jque y/jque y_ e _ajax.asp.
[24]
«Da aTables,» [En línea]. A ailable: h ps://da a ables.ne /.
[25]
«Momen .js,» [En línea]. A ailable: h ps://momen js.com/.
[26]
«Mapbox,» [En línea]. A ailable: h ps://www.mapbox.com/.
[27]
«Sp ing.io,» [En línea]. A ailable: h ps://sp ing.io/.
[28]
«Apache Ma en,» [En línea]. A ailable: h ps://ma en.apache.o g/.
[29]
«Genbe a,» [En línea]. A ailable: h ps://www.genbe a.com/desa ollo/que-es-
ma en.
[30]
«Thymelea .o g,» [En línea]. A ailable: h ps://www. hymelea .o g/.
[31]
«A pen Technologies,» [En línea]. A ailable:
h ps://a pen echnologies.com/es/blog/aplicaciones-mo il/que-es- i ebase-y-que-
nos-apo a/.
[32]
«openwebina s,» [En línea]. A ailable: h ps://openwebina s.ne /blog/que-es-gi -y-
pa a-que-si e/.
[33]
«Sp ing.io,» 20 2 2019. [En línea]. A ailable: h ps://sp ing.io/ ools.
[34]
«Visual S udio Code,» 7 4 2019. [En línea]. A ailable:
h ps://code. isuals udio.com/.
[35]
«And oid De elope s,» 07 04 2019. [En línea]. A ailable:
h ps://de elope .and oid.com/s udio.
93
[36]
«Fi ebase Docs,» 7 04 2019. [En línea]. A ailable:
h ps:// i ebase.google.com/docs/?au huse =0.
[37]
«He oku,» [En línea]. A ailable: h ps://www.he oku.com/.
[38]
«Pla zi,» [En línea]. A ailable: h ps://pla zi.com/blog/que-es-he oku-y-pa a-que-
me-si e/.
[39]
«ElAnd oidLib e,» [En línea]. A ailable:
h ps://eland oidelib e.elespanol.com/2014/11/que-es-ma e ial-design.h ml.
94
1. Anexo I: Guía de uso
El p opósi o de es a sección en guia al usua io a a és de la aplicación, de mane a
que pueda explo a su uncionalidad p incipal. Debido a es o, la es uc u a de es a guía
se basa en los ac o es que in e ac úen con la he amien a.
1.1. Usua ios no iden i icados
Es a subsección se en oca a la uncionalidad accesible pa a los usua ios que no se
encuen an egis ados en la aplicación.
1.1.1. Página p incipal
Lo p ime o que e el usua io es la página p incipal (Cap u a 1) de la
aplicación donde se le in o ma del uso que es a iene.
Cap u a 1. In e az de la página p incipal
101
1.4.1. C ea ac i idad
A a és de la página p incipal mos ada en la Cap u a 14, las pe sonas
como las emp esas son capaces de p opone ac i idades con el obje i o de
di e i se y compa i su iempo con o os usua ios. Pa a ello los usua ios
deben ellena el o mula io co espondien e de la Cap u a 15 con la
ubicación p opues a, el nomb e, echa de inicio y in, pa icipan es
ca ego ías y desc ipción.
Cap u a 14. In e az que mues a el bo ón pa a c ea una ac i idad
Cap u a 15. In e az de c eación de ac i idades
102
1.4.2. Modi ica ac i idad
Las pe sonas y emp esas pod án modi ica sus ac i idades p opues as
siemp e y cuando és as no hayan comenzado. Po un lado, el usua io pod á
modi ica odos los da os de la ac i idad (Cap u a 16), así como añadi
imágenes adjun ando un a chi o (como en la Cap u a 17), o seleccionando
la imagen del ca ousel a elimina median e el bo ón bo a imagen ac ual
(Cap u a 17).
Cap u a 16. In e az pa a modi ica una ac i idad
103
Cap u a 17. In e az pa a añadi una imagen a una ac i idad
Figu a 55. Página imagen añadida a una ac i idad
1.4.3. Cancela ac i idad
Si la ac i idad no ha comenzado el usua io puede cancela la p esionando
en el bo ón de cancela ac i idad si uado al inal de la isualización de una
ac i idad p opia, siendo necesa io la con i mación de es e p oceso ( éase
Cap u a 18) e implicando que és a decisión se no i ique a los usua ios
egis ados.
Cap u a 18. In e az pa a cancela una ac i idad p opia
104
1.4.4. Insc ibi se / desinsc ibi se en una ac i idad
Las pe sonas y emp esas ambién pueden insc ibi se o desinc ibi se de las
ac i idades p opues as po o os usua ios, siemp e que es as no hayan
comenzado. Pa a ello el usua io debe á selecciona el bo ón
co espondien e si uado al inal de la in e az de isualización del e en o.
Cap u a 19. In e az pa a insc ibi se / desinsc ibi se de una ac i idad
1.4.5. Valo aciones
Una ez el usua io se ha insc i o en una ac i idad y ha pa icipado, el
sis ema le pe mi e deja un comen a io sob e la ac i idad y su
adminis ado , de mane a que los u u os usua ios puedan hace se una idea
p e ia de cómo se án los e en os p opues os po es e adminis ado .
La o ma más ápida es a a és del his o ial, donde se mues an las
ac i idades en las que el usua io ha pa icipado (Cap u a 20).
Cap u a 20. In e az donde se mues a el his o ial de ac i idades
Pa a alo a una ac i idad o adminis ado el usua io debe selecciona la
pun uación de la ac i idad, pudiendo deja un comen a io opcional, y hace
click en el bo ón en ia alo ación ( éase Cap u a 21).
105
Cap u a 21. In e az pa a alo a una ac i idad y a su adminis ado
T as es o, el usua io pod á obse a como su alo ación a ec a a la
ac i idad y adminis ado a a és del anking (Cap u a 22).
Cap u a 22. In e az que mues a el anking de ac i idades y usua ios
106
1.4.6. Amigos
La aplicación ambién pe mi e a sus usua ios es ablece elaciones de
amis ad pa a compa i las ac i idades que pa ezcan más in e esan es y
man ene se en con ac o.
Los usua ios se án capaces de añadi a o o como amigo a a és de su
pe il, o buscándolos di ec amen e en la ba a supe io ( e sección 1.2.1
de es e capí ulo). Es os ha án click el bo ón de añadi amigo pudiendo
deja adicionalmen e un comen a io ( éase Cap u a 23).
Cap u a 23. In e az pa a añadi un amigo
Una ez en iada la pe ición, el usua io obje i o se á el enca gado de
esol e la (Cap u a 24).
Cap u a 24. In e az pa a esol e una pe ición de amis ad
T as eso, en caso de que se haya con i mado la pe ición, ambos usua ios
apa ece án en sus espec i as lis as de amigos.
1.4.7. Compa i ac i idades
Los usua ios pod án compa i ac i idades con sus amigos, de mane a que
és os puedan uni se y asis i jun os al e en o.
Pa a ello las pe sonas o emp esas debe án accede a su lis a de ac i idades
( éase Cap u a 25). A a és del bo ón de compa i , se pod án selecciona
107
los usua ios a los que se les en ia á la ac i idad (Cap u a 26), con i mando
la ope ación median e el bo ón de compa i ac i idad, y no i icando a cada
uno de ellos.
Cap u a 25. In e az que mues a la lis a de ac i idades c eadas y egis adas po un usua io
Cap u a 26. In e az pa a compa i ac i idades con o os usua ios
1.4.8. No i icaciones
Los usua ios pod án e las no i icaciones ecibidas a a és del panel de
a isos (Cap u a 27).
Cap u a 27. In e az de no i icaciones
108
De o ma adicional pod án elimina las no i icaciones pendien es haciendo
click sob e el icono con o ma de c uz pa a elimina el a iso seleccionado,
o median e el bo ón ep esen ado con un ojo achado pa a ma ca odas
como is as.
1.4.9. Cha
Po úl imo, los usua ios pueden man ene se en con ac o a a és del cha ,
donde apa ece án las ac i idades en las que se ha insc i o el usua io, así
como los amigos con los que es e ha con e sado.
Pa a en ia un nue o mensaje a un amigo puede selecciona se la
con e sación di ec amen e, o ab i una con e sación a a és del bo ón
co espondien e ( éase Cap u a 28).
Cap u a 28. In e az que mues a cómo ab i una nue a con e sación con un amigo
Una ez se encuen e abie a la con e sación, se le pe mi i á al usua io
esc ibi un mensaje en el espacio habili ado y pulsa in o pa a en ia lo
( éase Cap u a 29).
Cap u a 29. In e az que mues a como en ia un mensaje
109
2. Anexo II: Guía de ins alación
En es e capí ulo adicional, se edac a un manual que desc ibe paso a paso como
ealiza la ins alación y despliegue de la aplicación.
No obs an e, el código comple o se encuen a accesible a a és del siguien e
eposi o io:
h ps://gi hub.com/ e lopezca /Mee AndSha eTFG-En ega
2.1. C ea una nue a ca pe a
Pa a asegu a el co ec o uncionamien o del p oyec o, es necesa io c ea una
nue a ca pe a con un nomb e desc ip i o al como “Mee AndSha e-
Sp ingApplica ion”.
2.2. Descomp imi el a chi o comp imido
T as c ea la ca pe a, debe olca se el con enido del comp imido en egado en es a
nue a ubicación.
2.3. Comp oba pue o 8080
An es de ejecu a la aplicación, debemos comp oba que ninguna aplicación o
se icio web se encuen a escuchando en el pue o indicado, ya que, de se así,
colisiona ía con es a y no se consegui ía desplega .
2.4. Ejecu a el p oyec o
Una ez se encuen a ins alada la aplicación y se ha comp obado el pue o, se debe
hace doble click en el iche o “Mee AndSha e-0.0.1-SNAPSHOT.ja ” como se
mues a en la siguien e Cap u a:
Cap u a 30. Es uc u a del p oyec o ejecu able en egado
110
2.5. Despliegue de la aplicación
T as es o, la aplicación queda accesible a a és del na egado (Mozilla y
Ch ome) bajo las siguien es u ls:
• Si io ecomendado: h ps://mee andsha e.he okuapp.com/
• Aplicación local ejecu ada: localhos :8080
2.6. Ad e encias
Resul a necesa io que el usua io conceda los pe misos a la aplicación pa a accede
a las no i icaciones y la ubicación, ya que, de o o modo, no se ga an iza el
co ec o uncionamien o de los casos de uso in oluc ados.
En caso de que es os pe misos no hayan sido solici ados, pueden con igu a se
haciendo click en el símbolo de in o mación ubicado a la izquie da de la u l del
si io mos ado en la siguien e Cap u a:
Cap u a 31. Ges iona pe misos de la aplicación