gestor de reserves de pistes onlineopenaccess.uoc.edu/webapps/o2/bitstream/10609/40147/5... · soc...

Gestor de reserves de pistes onlineMemòria de Projecte Final de Mà

Màster Universitari en Enginyeria Informàtica

Desenvolupament d’aplicacions

Gestor de reserves de pistes onlineMemòria de Projecte Final de Màster

Màster Universitari en Enginyeria Informàtica

web

Gestor de reserves de pistes online

Gestor de reserves de pistes online, Màster Univers itari en Enginyeria Informàtica

2 / 92

Autor: David Puigdomènech Blancas

Consultor: Ignasi Lorente Puchades

Professor: César Pablo Córcoles Briongos

Lliurament final - 9/1/2015


3 / 92

Copyright

El contingut d’aquest document, així com el desenvolupament del projecte està subjecte sota les

condicions de llicenciament d’ “Aprovat per obres culturals lliures”, Creative Commons

Attribution-ShareAlike 4.0 International (CC BY-SA 4.0).


4 / 92

Dedicatòria

Dedico aquest projecte a la meva dona Roser i al nostre fill Sau, els quals em donen energia per poder

començar cada dia amb un bon somriure.


5 / 92

Abstracte

Actualment vivim un moment tecnològic en el que tot ha de tindre visibilitat a Internet o sinó sembla que

no existeixi. Ens hem acostumat a poder fer qualsevol cosa des de qualsevol dispositiu amb pantalla.

Des de fer la compra del supermercat, comprar unes sabates, imprimir una fotografia o reservar una

activitat, entre d’altres moltes.

És en aquesta darrera acció, la reserva d’una activitat, on el Club de Tenis les Argelagues requereix

d’alguna solució tecnològica que permeti dur a terme les tasques de gestió online de les seves pistes

de pàdel i tenis.

No disposar d’un sistema que permeti realitzar reserves de les seves pistes a través d’Internet pot

suposar la pèrdua d’usuaris potencials. A més, la gestió manual i en paper d’aquestes reserves pot ser

causa d’errors involuntaris.

D’altra banda, al requerir d’accés a través de qualsevol tipus de dispositiu, és summament important

l’adaptació de models i estratègies FirstMobile1 i l’ús de dissenys Responsive Web Design2.

El món Web basat en HTML5 i CSS3 està evolucionant constantment i de forma sorprenent

adaptant-se a les necessitats dels usuaris del segle XXI que persegueixen poder-ho fet tot, des de

qualsevol lloc i en qualsevol moment.

Paraules clau: reserves online, pàdel, pista, FirstMobile, Responsive Web Design.

1 FirstMobile es refereix a la creixent tendència de les empreses a dissenyar els seus productes per a telèfons o dispositius mòbils abans de realitzar dissenys orientats a ordinadors d'escriptori i portàtils tradicionals. 2 Responsive Web Design és una tècnica de disseny i desenvolupament web que mitjançant l'ús d'estructures i objectes disponibles a través de tecnologies HTML5 i CSS3, aconsegueix adaptar la interfície a mostrar a l'entorn de l'usuari. La idea principal d'aquesta tècnica és fer que una interfície sigui visible de manera òptima en tot tipus de dispositius (des de mòbils a ordinadors o tauletes). capaços de visualitzar pàgines web.


6 / 92

Índex

1. Introducció........................................................................................................................................................... 9

1.1 Presentació ................................................................................................................................................... 9

1.2 Pàdel ............................................................................................................................................................ 9

1.3 El club ......................................................................................................................................................... 10

1.4 Motivació..................................................................................................................................................... 10

2. Descripció ......................................................................................................................................................... 11

3. Objectius ........................................................................................................................................................... 12

3.1 Principals .................................................................................................................................................... 12

3.2 Secundaris .................................................................................................................................................. 12

4. Continguts ......................................................................................................................................................... 13

5. Metodologia....................................................................................................................................................... 14

6. Arquitectura del sistema .................................................................................................................................... 15

7. Plataforma de desenvolupament....................................................................................................................... 17

8. Planificació ........................................................................................................................................................ 18

9. Procés de treball i desenvolupament ................................................................................................................ 22

10. API i llibreries utilitzades ................................................................................................................................. 25

11. Diagrames UML .............................................................................................................................................. 27

11.1. Casos d’ús ........................................................................................................................................... 27

11.2. Bases de dades ................................................................................................................................... 39

11.3. Entitats i classes .................................................................................................................................. 40

11.4. Diagrama de paquets .......................................................................................................................... 41

11.5. Diagrames de classes detallats ........................................................................................................... 42

11.6. Diagrama de seqüència ....................................................................................................................... 45

11.7. Diagrama d’activitats ........................................................................................................................... 47

12. Prototips .......................................................................................................................................................... 52

12.1 Lo-Fi ......................................................................................................................................................... 52

12.2 Hi-Fi .......................................................................................................................................................... 52

13. Perfils d’usuari ................................................................................................................................................. 60

14. Disseny conceptual ......................................................................................................................................... 61

14.1. Escenaris d’ús ..................................................................................................................................... 61

14.2. Fluxos d’interacció ............................................................................................................................... 63

15. Seguretat......................................................................................................................................................... 64

16. Tests ............................................................................................................................................................... 65

16.1. Test d’usabilitat .................................................................................................................................... 65

16.2. Tests unitaris ....................................................................................................................................... 71

17. Versions de l’aplicació/servei .......................................................................................................................... 72

18. Requisits d’instal·lació/implantació/ús ............................................................................................................. 74

19. Instruccions d’instal·lació/implantació ............................................................................................................. 75

19.1. JDK 1.7.0_51 ....................................................................................................................................... 75

19.2. Apache Tomcat 7.0.55......................................................................................................................... 75

19.3. PostgreSQL 9.3.5 ................................................................................................................................ 75

19.4. WAR .................................................................................................................................................... 76

20. Instruccions d’ús ............................................................................................................................................. 77

21. Projecció a futur .............................................................................................................................................. 78

22. Conclusió/-ns .................................................................................................................................................. 79

Annex 1. Lliurables del projecte ............................................................................................................................ 80

Annex 2. Codi font ................................................................................................................................................. 81

Annex 3. Captures de pantalla .............................................................................................................................. 82

Annex 4. Bibliografia ............................................................................................................................................. 91


7 / 92

Figures i taules

Índex de figures

Figura 1: Pista de pàdel al Club de Tenis les Argelagues ....................................................................................... 9

Figura 2: Arquitectura del sistema ......................................................................................................................... 15

Figura 3: Cronograma del projecte........................................................................................................................ 18

Figura 4: Diagrama de Gantt del projecte ............................................................................................................. 19

Figura 5: Llistat de tasques i carrega de treball en detall ...................................................................................... 20

Figura 6: Casos d’ús del sistema de gestió de reserves de pistes online ............................................................. 27

Figura 7: Model conceptual de la base de dades del sistema ............................................................................... 39

Figura 8: Model entitats i classes del sistema ....................................................................................................... 40

Figura 9: Diagrama de paquets versió Beta .......................................................................................................... 41

Figura 10: Diagrama de classes paquet booking.controller.common .................................................................... 42

Figura 11: Diagrama de classes paquet booking.controller.services .................................................................... 42

Figura 12: Diagrama de classes paquet booking.controller.util ............................................................................. 42

Figura 13: Diagrama de classes paquet booking.model.bo .................................................................................. 43

Figura 14: Diagrama de classes paquet booking.model.util .................................................................................. 43

Figura 15: Diagrama de classes paquet booking.view.calendar ........................................................................... 43

Figura 16: Diagrama de classes paquet booking.model.entity .............................................................................. 44

Figura 17: Diagrama de seqüència de l’arquitectura del sistema .......................................................................... 46

Figura 18: Diagrama d’activitats registrar-se al sistema ........................................................................................ 47

Figura 19: Diagrama d’activitats autenticar-se al sistema ..................................................................................... 48

Figura 20: Diagrama d’activitats sol·licitar recordatori de contrasenya i canvi de contrasenya ............................. 49

Figura 21: Diagrama d’activitats actualitzar dades d’un usuari ............................................................................. 50

Figura 22: Diagrama d’activitats crear una reserva ............................................................................................... 51

Figura 23: Pantalla inicial sense autenticació ....................................................................................................... 52

Figura 24: Pantalla inicial recordar contrasenya ................................................................................................... 53

Figura 25: Pantalla inicial amb autenticació .......................................................................................................... 53

Figura 26: Pantalla realitzar sol·licitud de reserva o creació de partida ................................................................ 54

Figura 27: Pantalla realitzar sol·licitud de reserva ................................................................................................. 55

Figura 28: Pantalla crear partida amb jugadors .................................................................................................... 56

Figura 29: Pantalla crear partida sense jugadors .................................................................................................. 57

Figura 30: Pantalla afegir-se a la bossa de jugadors d’una partida ...................................................................... 57

Figura 31: Pantalla afegir-se a una partida ........................................................................................................... 58

Figura 32: Pantalla borrar-se d’una partida ........................................................................................................... 58

Figura 33: Pantalla sortir de la bossa de jugadors d’una partida........................................................................... 59

Figura 34: Pantalla accés inicial ............................................................................................................................ 82

Figura 35: Pantalla formulari de registre ............................................................................................................... 83

Figura 36: Pantalla accés usuari registrat ............................................................................................................. 84

Figura 37: Pantalla reserva de pista o creació de partida ..................................................................................... 85

Figura 38: Pantalla confirmació reserva de pista .................................................................................................. 86

Figura 39: Pantalla accés usuari registrat amb pistes reservades ........................................................................ 87

Figura 40: Pantalla sol·licitud canvi contrasenya................................................................................................... 88

Figura 41: Pantalla processant sol·licitud canvi contrasenya ................................................................................ 89


8 / 92

Figura 42: Pantalla confirmació de sol·licitud canvi contrasenya .......................................................................... 90

Figura 43: Correu electrònic amb la confirmació de sol·licitud canvi contrasenya ................................................ 90

Figura 44: Pantalla formulari de recuperació de contrasenya ............................................................................... 90

Figura 45: Pantalla confirmació de canvi de contrasenya ..................................................................................... 90

Índex de taules

Taula 1: Programari de l’arquitectura del sistema ................................................................................................. 16

Taula 2: Programari de l’entorn de desenvolupament ........................................................................................... 17

Taula 3: Llistat de dependencies del projecte ....................................................................................................... 26

Taula 4: Perfils d’usuari ......................................................................................................................................... 60

Taula 5: Escenaris d’ús ......................................................................................................................................... 62

Taula 6: Fluxos d’interacció .................................................................................................................................. 63

Taula 7: Calendari del test d’usabilitat amb usuaris .............................................................................................. 70

Taula 8: Definició dels tests unitaris ...................................................................................................................... 71

Taula 9: Contingut Versió 0.0.0 Alpha ................................................................................................................... 72

Taula 10: Contingut Versió 1.0.0 Beta .................................................................................................................. 73


9 / 92

1. Introducció

1.1 Presentació

Soc en David Puigdomènech, Enginyer Superior d'Informàtica per a la UAB i bàsicament tinc un perfil

de desenvolupador d’aplicacions, tot i que darrerament estic adquirint un perfil més aviat de gestor

d’equips. La meva trajectòria professional s’ha focalitzat molt en el desenvolupament d’aplicacions

amb llenguatges orientats a Web. Tanmateix actualment HTML5 i CSS3 són els llenguatges més

populars per als desenvolupaments d’interfícies Web. L’objectiu del meu TFM3 és aprofundir en parts

d’aquestes tecnologies fora de l’àmbit en el que habitualment treballo, desenvolupant també una eina

per a poder gaudir millor d’una de les activitats que més m’agrada practicar en el meu lleure, el pàdel.

1.2 Pàdel

En els darrers anys el pàdel ha esdevingut un dels esports més sol·licitats arreu de Catalunya, fet que

a companys argentins causa sorpresa, degut a que al seu país d’origen ja practicaven aquest esport fa

més de 20 anys.

Figura 1: Pista de pàdel al Club de Tenis les Argelagues

Aquesta nova moda (on m’incloc) per aquest tipus d’esport ha fet que clubs de tenis hagin hagut de

renovar-se i tinguin com a principal activitat la gestió de pistes i professors de pàdel, convertint-se en

una de les principals fonts d’ingressos.

3 Treball Final de Màster.


10 / 92

1.3 El club

Visc a un petit poble prop de Granollers anomenat Lliçà de Vall. Sóc resident en aquest municipi des de

fa uns 6 anys, i farà qüestió d’un any em vaig endinsar en el món del pàdel. La meva principal motivació

era fer una mica d’exercici i gaudir d’una bona estona amb companys de feina i amics.

Prop de casa meva podem trobar el Club de Tenis les Argelagues, el qual disposa de 3 pistes de pàdel,

2 pistes de tenis i una piscina (a l’estiu).

Bàsicament el club sobreviu dels socis, els quals paguen rigorosament una mensualitat, i els no socis

(com jo) que hi anem esporàdicament. Addicionalment, el club organitza casals d’estiu per nens i

nenes del barri i algun que altre torneig.

Donada la proximitat i els bons preus que ofereix aquest club, l’he convertit en club de referència per a

jugar les meves partides de pàdel.

Actualment l’única via de què disposa el club per tal de poder gestionar les reserves de les pistes, tant

de tenis com de pàdel, és mitjançant una agenda física (llapis i paper). A més a més, per tal de poder

realitzar una reserva, només tens la via presencial, el correu electrònic o una trucada telefònica.

Recentment han incorporat el WhatsApp4. El principal inconvenient d’aquestes vies és que no disposes

d’informació relativa a l’estat de la pista (ocupada o disponible) fins que reps el feedback del club, així

com que només pots realitzar la reserva en horari d’atenció al públic.

1.4 Motivació

Donada la relació cordial que he acabat tenint amb l’administració del club (Francesc i Silvia), un dia

prenent una cervesa després d’haver jugat un partit de pàdel, va sorgir l’idea de desenvolupar una eina

que permetés als usuaris (com jo) reservar les pistes a través d’una plana web.

Com he deixat entreveure anteriorment, el club no disposa de gaire marge d’ingressos i em vaig oferir

a emmarcar aquest desenvolupament en el meu TFM, ja que d’aquesta manera podia cobrir dos

necessitats, per una banda la del club i per la l’altre, la meva al disposar d’un tema personalment

motivant per a poder desenvolupar el meu TFM.

Tot i que el tema a priori no es gaire innovador, ja existeixen solucions de reserves de pistes, el

funcionament del club i funcionalitats que han anat sortint (entre una i altra cervesa) justifica un

desenvolupament ad hoc.

4 WhatsApp, aplicació mòbil per a enviar missatges de text i/o multimèdia.


11 / 92

2. Descripció

El projecte a desenvolupar correspon a un sistema de gestió de reserves de pistes online, a través

d’interfícies Web, per al Club de Tenis les Argelagues.

El club de Tenis les Argelagues disposa de 3 pistes de pàdel i 2 pistes de tenis i actualment manté la

gestió de les mateixes amb llapis i paper, a través d’una agenda. Els usuaris no disposen d’informació

sobre l’estat de les pistes fins que poden ser atesos pel personal del club, dins de l’horari d’atenció al

públic, fet que pot causar que molts usuaris accedeixen a altres clubs de la zona.

L’objectiu principal del projecte, és posar a disposició de tots els usuaris del club i de la pròpia

Administració del mateix, un sistema que permeti gestionar digitalment les reserves de les pistes,

aconseguint millorar l’experiència de l’usuari al realitzar una reserva i addicionalment intentar

maximitzar els beneficis que pot treure el club de cadascuna de les seves pistes, a través de l’accés a

la pista fora de l’horari d’atenció al públic i a través d’algoritmes que proposin a l’usuari les millors

franges horàries per a desenvolupar l’activitat física.

Addicionalment el sistema haurà de permetre la creació dinàmica de partides, es a dir, la possibilitat de

fer una reserva de partida i sol·licitar al sistema que localitzi possibles jugadors (segons la seva

disponibilitat i preferències) que es podran apuntar a la partida.

Degut a la disparitat de dispositius que actualment s’utilitzen a totes les llars; telèfon mòbil, tableta,

Smart TV, portàtil, sobretaula, entre d’altres, estem en un moment on el concepte Mobile First es

summament important en el desenvolupament d’aquest tipus de sistemes Web. És per aquest motiu

que el sistema a desenvolupar ha de ser capaç d’adaptar-se a qualsevol tipus d’interfície que pugui

utilitzar un usuari potencial. Concepte Responsive Web Design.

A més a més, el sistema ha d’estar disponible per a qualsevol tipus d’usuari, indistintament de les

seves característiques o mancances, això fa que durant el temps d’anàlisis i definició s’hagin de tindre

molt en compte els conceptes d’accessibilitat i d’usabilitat.

Tanmateix, s’haurà de gestionar també l’accés a les dades dels usuaris, al disposar d’informació

subjecte a la LOPD.

Addicionalment, el sistema permetrà disposar d’una gestió d’usuaris digitalitzada i segmentada. La

qual cosa permetrà poder oferir serveis personalitzats, com poden ser: tornejos, promocions, entre

altres, als usuaris segons per exemple: el sexe, l’edat, el seu nivell de joc, la seva disponibilitat, etc.

Un bon desenvolupament del projecte podria permetre un increment en els ingressos i les possibilitats

del club, incentivant el desenvolupament d’activitats locals amb l’ús de les TIC.


12 / 92

3. Objectius

A continuació s’enumeren en ordre de rellevància els objectius del TFM.

3.1 Principals

Objectius clau del TFM.

• Disposar d’un sistema que permeti gestionar les reserves de les pistes del Club de Tenis les

Argelagues. El principal objectiu del projecte és que qualsevol usuari, en qualsevol moment,

des de qualsevol indret i amb qualsevol dispositiu sigui capaç de realitzar una reserva d’una de

les pistes de pàdel o tenis del club.

• Mantenir un sistema de gestió d’usuaris del club digitalitzat i segmentat. El sistema

emmagatzemarà característiques genèriques de cada usuari per tal de mantindre un llistat

d’usuaris segmentat. Exemples d’aquestes característiques son: Edat, sexe, nivell de joc,

disponibilitat, entre altres.

• Facilitar l’accés a l’esport, disposant d’un sistema que permeti que un usuari pugui proposar la

realització d’una partida en un dia i hora determinada. En nombroses ocasions molts usuaris

es queden sense jugar un partit, degut a la incompatibilitat d’horaris i disponibilitat amb altres

companys. Es persegueix eliminar aquest obstacle i permetre que els usuaris iniciïn propostes

de partides, tot i no disposar de tots els jugadors. Aquestes propostes de partides es podran

omplir amb tots els jugadors i consolidar-se com a partida o transcorregut un temps,

esborrar-se.

3.2 Secundaris

Objectius addicionals que enriqueixen el TFM i que poden patir variacions.

• Maximitzar els beneficis. Aplicar algoritmes per optimitzar les reserves. Proporcionar capacitat

al sistema per a que pugui proposar a l’usuari la millor hora per fer la reserva.

• Disposar d’un sistema per a explotar la comunicació amb els usuaris mitjançant l’explotació de

les seves característiques.

• Mantenir un rànquing dels usuaris amb el nombre de partits jugats, empatats i perduts.

• Sistema de fidelització digital. Actualment el club disposa d’un sistema de fidelització que

consisteix en disposar de la cinquena hora gratuïta. Aquest registre es fa manualment a través

d’una fitxa en paper de cada usuari. El sistema podria permetre portar aquest control

digitalment i cada usuari podria veure l’estat de la seva fitxa.


13 / 92

4. Continguts

Aquest document conte el recull de tota la documentació generada per el Treball Final de Màster de

Gestió de reserves de pistes online.

Seguint la metodologia de la UOC d’avaluació continuada, el document s’ha anat treballant al llarg de

tot el semestre de tal manera que s’han anat completant cadascun dels apartats segons avançaven les

entregues parcials i s’anava treballant en cadascuna de les fases del projecte.

El treball realitzat durant tot el semestre ha donat com a resultat un estudi elaborat de creació d’un Web

adaptatiu, preparat per a ser consultat des de qualsevol dispositiu, per a poder realitzar reserves de

pistes de pàdel i tenis del Club Les Argelagues. Així mateix, al finalitzar la darrera entrega del projecte,

juntament amb la memòria del treball, s’allibera una construcció del lloc Web amb la implementació

d’algunes de les funcionalitats principals del sistema.

El present document conté les evidencies d’aquest estudi així com de tota la seva evolució. Partint des

de la metodologia aplicada al llarg del treball, la planificació prevista i la definició del sistema, incloent

l’arquitectura del mateix, les eines de programari i les llibreries de tercers utilitzades, i sobretot les

necessitats dels usuaris expressades en mode de casos d’ús. Tanmateix el disseny detallat del

sistema incloent diagrames de classes, de paquets, de seqüència i d’activitats de les funcionalitats

implementades. No oblidar l’estudi en les vulnerabilitat de desenvolupaments Web, apartat Seguretat ,

d’aquest mateix document.

Al centrar el projecte en el model Disseny Centrat en l’Usuari, el treball inclou el disseny dels prototips

de les pantalles del sistema, l’anàlisi dels perfils d’usuari i els seus context d’ús, i la definició del test

d’usabilitat a aplicar als usuaris pilot. Tot centrant l’objectiu del procés en aconseguir una millor

experiència de l’usuari en l’ús del sistema.


14 / 92

5. Metodologia

El meu propòsit és orientar totalment el projecte al model de Disseny Centrat en l’Usuari (DCU), posant

com a focus en tot el projecte l’experiència de l’usuari al realitzar les diferents activitats amb el sistema.

Això ho aconseguirem amb l’ús de prototips i amb la validació d’aquests prototips mitjançant els

heurístics de Nielsen i posteriorment realitzant un test amb usuaris.

A la planificació del projecte es pot veure com aquesta fase de disseny UI y validació de prototips té un

gran pes en tot el conjunt de les fases del projecte.

Addicionalment durant la fase de construcció del projecte voldria utilitzar SCRUM com a metodologia

de seguiment i priorització de funcionalitats a implementar. A priori contemplo realitzar dos Springs.

Cadascun amb una tasca de validació funcional i d’usabilitat.

Durant la fase de construcció el rol de Product Owner l’assolirà l’Administració del Club (Francesc i

Silivia), mentre que la resta de rols els desenvoluparé jo mateix.


15 / 92

6. Arquitectura del sistema

La següent figura mostra l’arquitectura del sistema, basada en un model SOA, arquitectura orientada a

servei.

Figura 2: Arquitectura del sistema

Com es pot observar el sistema es divideix en 3 capes principals; capa Front End o capa de

presentació, capa de serveis que serveix per publicar les diferents funcionalitats de l’aplicació i

finalment la capa de Back-End que conté la lògica de negoci i l’accés a les dades.

La figura mostra també les principals tecnologies utilitzades en cadascuna de les capes. Aquestes son:

• Front-End o capa de presentació . HTML5 y CSS3. Bootstrap, JQuery, JSON i com a

principal component visual la llibreria FullCalendar-io.

• Services o serveis d’aplicació . SpringMVC i serveis RESTful.

• Back-End . Hibernate i JAVA.


16 / 92

El principal programari que s’utilitzarà per cadascuna de les capes és el llistat a la següent taula:

Producte Versió Proveïdor

Ser

vido

r (B

ack

-End

i S

ervi

ces)

Sistema operatiu Tomcat 7.0.55 Apache

Servidor

d’aplicacions

Linux N/A Red Hat

Base de dades

PostgreSQL

Hibernate

9.3.5

4.3.7

The PostgreSQL

Global Development

Group

JBossDeveloper (Red

Hat)

Compilador JDK 1.7.0.51 de 32 bits Oracle

Controlador Spring Framework 4.1.1 Pivotal Software

Clie

nt (

Fro

nt-E

nd)

Navegadors

Chrome,

Firefox,

IE11

Versions compatibles

amb HTML5

Google,

Mozilla,

Microsoft

Presentació

JQuery

Bootstrap

FullCalendar-io

1.11.1

3.2.0

2.2.3

The jQuery Foundation

Twitter

Adam Shaw

Taula 1: Programari de l’arquitectura del sistema

L’apartat API i llibreries utilitzades , d’aquest mateix document, conté una relació acurada de totes les

llibreries de tercers utilitzades al projecte.


17 / 92

7. Plataforma de desenvolupament

La següent taula mostra el programari utilitzat a l’entorn de desenvolupament:

Producte Versió Proveïdor

IDE Eclipse Kepler 4.3 de 32 bits The Eclipse Foundation

Servidor d’aplicacions Tomcat 7.0.55 Apache

Construcció

Maven 3.0.3 Apache

Ant 1.8.4 Apache

Compilador JDK 1.7.0.51 de 32 bits Oracle

Bases de dades

PgAdmin 1.14.2 de 32 bits The PostgreSQL Global

Development Group

PostgreSQL 9.1.5 The PostgreSQL Global

Development Group

SCM

Tortoise 1.6.16 de 32 bits CollabNet

Subversion 1.6 Apache

Disseny

Microsoft Visio 2010 Microsoft

Balsamiq Mockups 2.0.19 Balsamiq

Documentació Microsoft Word

Microsoft Project

2007

2010

Microsoft

Microsoft

Sistema operatiu Sistema operatiu XP Microsoft

Taula 2: Programari de l’entorn de desenvolupament


18 / 92

8. Planificació

A continuació es mostra el cronograma inicial complet de la planificació del projecte.

Figura 3: Cronograma del projecte

He dividit la planificació del projecte en els següents blocs o fases, assumit una carrega de treball de 2

hores diàries (10 hores setmanals), considero a més que he fet una planificació molt optimista:

• Fase de Gestió . Correspon a la fase de consolidació de projecte on es presenten els principals

objectius del projecte, les seves fites, el seu desenvolupament i la seva duració. Aquesta fase

es va iniciar el 17/09/2014 i finalitza amb l’entrega de la PAC1 el 1/10/2014.

• Fase d’Anàlisis . Correspon a la fase de captura de requeriments, elaboració

d’especificacions, generació de casos d’ús, escenaris, guions i posterior presentació i

acceptació dels requeriments per part del Club de Tenis les Argelagues. Aquesta fase s’inicia

el 2/10/2014 i esta previst que finalitzi el 14/10/2014.

• Fase de disseny UI i validació de prototips. Basat en un model DCU, generació i validació

de la usabilitat de prototips. Es planifiquen un parell de rondes. Aquesta fase esta compresa

entre el 14/10/2014 i el 4/11/2014.

• Fase de disseny de l’arquitectura del sistema. Aquesta fase comprèn les activitats de

disseny arquitectònic de la solució TIC, elecció de les tecnologies a utilitzar i modelització del

software a desenvolupar. Disposarem de 8 dies per a dur a terme aquesta fase entre les dates

4/11/2014 i 14/11/2014.

• Fase de construcció. Aquesta fase constitueix la construcció física de la solució tecnològica i

està subdividida en dos springs.

• Fase de tancament. Aquesta fase compren les activitats de documentació i tancament de

projecte, on s’inclou la redacció de la memòria i l’elaboració de la presentació final. Fase

compresa entre el 22/12 i el 8/1/2015.


19 / 92

• Fase de desplegament . Aquesta fase inclou la posta en marxa del sistema i un període “Pilot”

on només usuaris concrets podran utilitzar el sistema a mode de prova. Passat el període de

10 dies, es podrà obrir el sistema a tot el públic. El pilot s’iniciaria el 8/1/2015.

A continuació es mostra el diagrama de Gantt del projecte.

Figura 4: Diagrama de Gantt del projecte


20 / 92

La següent figura mostra el llistat de tasques i el treball en detall.

Figura 5: Llistat de tasques i carrega de treball en detall


21 / 92

Les principals fites del projecte en ordre cronològic són:

• Entrega PAC1. 1/10/2014.

• Acceptació de requeriments per part del Club de Tenis les Argelagues i presentació al

consultor. 14/10/2014.

• Entrega PAC2. 29/10/2014.

• Acceptació dels prototips per part del Club de Tenis les Argelagues i presentació al consultor.

4/11/2014.

• Acceptació del disseny arquitectònic per part del Club de Tenis les Argelagues i presentació al


• Acceptació del primer spring per part del Club de Tenis les Argelagues i presentació al


• Entrega PAC3. 10/12/2014.

• Acceptació del segon spring per part del Club de Tenis les Argelagues i presentació al


• Pilot. 8/1/2015.

• Lliurament final. 9/1/2015.

• Go life. 22/1/2015.


22 / 92

9. Procés de treball i desenvolupament

Fase 1. Gestió

Aquesta etapa podríem considerar-la com la etapa 0 on el principal objectiu es definir les fites i cicles

del projecte. Per a la realització d’aquesta fase del projecte s’ha requerit seguir les indicacions de la

PAC1 així com material referent al desenvolupament d’aplicacions seguint models DCU, gestió de

projectes i altres materials didàctics vist al llarg del màster. Tanmateix s’ha requerit de reunions de

brainstorming amb l’Administració del Club.

Fase 2: Anàlisis

Aquesta segona etapa del projecte la podríem considerar com la etapa de Descoberta . L’objectiu es

determinar que és exactament el que hem de desenvolupar (abast del projecte), per a qui (perfils

d’usuari), per a quines situacions (context d’ús), serà útil?, entre altres.

L’objectiu al finalitzar aquesta etapa és conèixer:

• Els escenaris d’us.

• El model de flux.

• El perfil dels usuaris.

Per a realitzar aquest anàlisis s’han seguit les següents activitats:

• Activitat 1. Reunir-se amb l’administració del Club i definir l’abast del projecte i els objectius del

negoci i del lloc web.

o Aquesta activitat es va realitzar paral·lelament durant la fase de gestió del projecte i va

donar com a resultat la definició dels apartats Introducció i Objectius , d’aquest

mateix document.

• Activitat 2. Definir el pla i les tècniques utilitzades.

o Es va acordar amb l’Administració del club la realització de sessions de brainstorming

on s’anirien presentant propostes i alternatives a l’ús de la Web. Així mateix l’objectiu

era definir els processos de gestió, que l’Administració del Club volia dur a terme amb

aquesta nova eina. Recordar que fins al moment, la gestió de les reserves de les 6

pistes (3 de tenis i 3 de pàdel) la duen a terme a través d’una llibreta.

• Activitat 3. Definir els objectius del projecte o sistema de recerca. Necessitats de l’usuari

oportunitats de negoci.

o S’han realitzat reunions on s’ha aprofundit el concepte de “reserva de pista”. S’han

definit els processos bàsics de la reserva de pistes i la creació de partides.

o Així mateix, s’han acordat períodes de transició per tal que convisquin tots els

sistemes de reserves de pistes.


23 / 92

� Correu electrònic.

� Telèfon.

� Aplicació de missatgeria WhatsApp.

� Presencial.

� Web de reserves.

Aquesta transició es durà a terme permeten que només una de les pistes (pàdel o

tenis) sigui reservada a través de la Web de reserves.

o S’ha treballat en un document esborrany amb el catàleg de requisits, consultar

directori documentació i en els casos d’ús, veure apartat Casos d’ús , d’aquest

mateix document.

o L’administració del Club inclús ha vist com el sistema podria gestionar alguns dels

processos contables per tal de facilitar la gestió econòmica del Club. Aquestes

iniciatives es recullen a l’apartat Projecció a futur , d’aquest mateix document.

o La disponibilitat horària de ambdues parts, l’Administració del Club i jo mateix, ha

dificultat la realització d’aquestes sessions.

• Activitat 4. Realitzar el treball de camp. El sistema tindrà acceptació?

o El sistema a desenvolupar no es “innovador” ni dins un vessant tecnològic ni funcional.

Altres clubs de pàdel i tenis de la zona disposen ja de sistemes online de reserves de

pistes. La idea es crear un producte millor, d’es d’un punt de vista d’experiència per a

l’usuari. Per aquest motiu, s’ha realitzat un estudi dels sistemes existents i s’ha

prioritzat el següent manifest: “vull jugar, sistema ajuda’m ”.

o Tanmateix, s’han realitzat enquestes informals a usuaris del club, per tal de veure la

seva predisposició a un sistema Web per a realitzar reserves online, els resultats han

sigut satisfactoris donat que la majoria dels usuaris veu amb bons ulls i molt aprofitable

una iniciativa d’aquestes consideracions.


24 / 92

Fase 3: Disseny

Aquesta tercera etapa del projecte la podríem considerar com la etapa conceptualització . L’objectiu al

finalitzar aquesta fase és disposar de:

• Guions il·lustrats de l’activitat de l’usuari. Definició del flux.

• Prototip del disseny.

• Definició d’especificacions d’arquitectura del sistema.

Per a realitzar aquesta etapa d’especificacions s’han seguit les següents activitats:

• Activitat 1. Realització de sessions de brainstormings i conceptes de disseny.

o S’ha seguit treballant en el document de catàleg de requisits, consultar directori

documentació , document catàleg de requisits i en els casos d’ús del sistema veure

apartat Casos d’ús , d’aquest mateix document.

o S’han comparat altres sistemes de reserva de pistes de pàdel de la zona.

• Activitat 2. Elaboració de prototips.

o Durant les reunions de brainstorming, s’han elaborat mockups amb l’eina Balsamiq

Mockups. Aquests mockups ens serveixen per simular els fluixes dels usuaris al

realitzar les diferents accions amb el sistema. Aquesta metodologia ens permet

disposar de prototips hi-fi conjuntament amb el Product Owner del producte

(l’administració del club), fet que permet que aquest vegi realment com quedarà el

producte resultant donant-li més seguretat i confiança en el producte.

• Activitat 3. Definició d’especificacions d’arquitectura de la informació.

o S’ha realitzat el disseny arquitectònic del sistema pensant en possibles línees de futur,

com ara la creació d’aplicacions mòbils. Així mateix, s’ha acordat la tecnologia

utilitzada amb el responsable de sistemes de l’Administració del Club. L’apartat

Arquitectura del sistema , d’aquest mateix document, descriu l’arquitectura de tot el

sistema.


25 / 92

10. API i llibreries utilitzades

A continuació es mostren les APIs5 de tercers utilitzades en el projecte. Totes elles llibreries Open

Source.

servlet-api-2.5

org / mortbay / jetty / servlet-api-2.5 | Version(s): 6.1.5 | Scope: provided

postgresql

org / postgresql / postgresql | Version(s): 9.3-1102-jdbc41 | Scope: runtime

spring-context

org / springframework / spring-context | Version(s): 4.0.6.RELEASE | Scope: compile

spring-webmvc

org / springframework / spring-webmvc | Version(s): 4.0.6.RELEASE | Scope: compile

log4j

log4j / log4j | Version(s): 1.2.17 | Scope: compile

mail

javax / mail / mail | Version(s): 1.4 | Scope: compile

jstl

javax / servlet / jstl | Version(s): 1.2 | Scope: compile

jasypt

org / jasypt / jasypt | Version(s): 1.9.2 | Scope: compile

jasypt-spring31

org / jasypt / jasypt-spring31 | Version(s): 1.9.2 | Scope: compile

commons-dbcp2

org / apache / commons / commons-dbcp2 | Version(s): 2.0.1 | Scope: compile

json-lib

net / sf / json-lib / json-lib | Version(s): 2.4 | Scope: compile

xstream

com / thoughtworks / xstream / xstream | Version(s): 1.4.7 | Scope: compile

commons-io

commons-io / commons-io | Version(s): 2.4 | Scope: compile

commons-lang

commons-lang / commons-lang | Version(s): 2.6 | Scope: compile

commons-fileupload

commons-fileupload / commons-fileupload | Version(s): 1.3.1 | Scope: compile

commons-configuration

commons-configuration / commons-configuration | Version(s): 1.10 | Scope: compile

commons-codec

commons-codec / commons-codec | Version(s): 1.9 | Scope: compile

5 Les llibreries s’han obtingut a través del gestor de dependencies i construcció Maven.


27 / 92

11. Diagrames UML

A continuació es presenten els diagrames UML generats.

11.1. Casos d’ús

Els casos d’ús identificats al sistema son els mostrats a la següent figura.

Figura 6: Casos d’ús del sistema de gestió de reserves de pistes online

Identificador CU-001

Nom Autenticar-se al sistema.

Prioritat Alta.

Descripció Acció en la que l’actor del cas d’ús s’identifica dins el sistema.

Actors Usuari (Soci / No Soci) i Administració del Club.

Pre-Condicions L’actor s’ha d’haver registrat al sistema prèviament.


28 / 92

Iniciat per L’actor vol realitzar alguna de les operacions que permet el sistema.

Flux 1. El sistema sol·licita les credencials de l’usuari; correu electrònic i contrasenya.

2. L’actor introdueix les seves credencials.

3. El sistema verifica la validesa d’aquestes credencials.

3.1. Si les credencials son correctes el sistema identifica a l’usuari i segons la seva

autorització dins del mateix permet visualitzar les seves opcions disponibles.

3.2. Si les credencials son incorrectes el sistema mostra un missatge de credencials

incorrectes.

3.2.1. Si és el tercer cop, el sistema bloqueja a l’usuari, mostra un missatge informatiu i

només permet que l’usuari realitzi un recordatori de contrasenya.

Post-Condicions L’actor pot identificar-se dins del sistema.

Notes N/A.


Nom Sol·licitar recordatori de contrasenya.

Prioritat Alta.

Descripció Acció en la que l’actor del cas d’ús sol·licita que el sistema li recordi la contrasenya per tal

d’accedir al sistema.

Actors Usuari (Soci / No Soci) i Administració del Club.

Pre-Condicions L’actor s’ha d’haver registrat al sistema prèviament.

Iniciat per L’actor no recorda la seva contrasenya.

Flux 1. L’actor sol·licitar el recordatori de contrasenya a través de la secció del sistema “recordatori

de contrasenya” i introdueix el seu correu electrònic.

2. El sistema envia un correu electrònic amb un enllaç temporal per accedir a crear una nova

contrasenya. L’enllaç només és vàlid 24 hores a contar des del moment de la seva generació.

3. L’usuari accedeix al seu correu electrònic, recupera l’enllaç i accedeix a l’aplicació.

4. El sistema mostra dos camps per introduir la nova contrasenya i la seva repetició.

5. L’usuari introdueix la contrasenya i la seva repetició.

6. El sistema valida que els dos camps informats son iguals així com que la contrasenya

compleix amb els requisits de la Política de contrasenyes.


29 / 92

Post-Condicions L’usuari recupera la seva contrasenya.

Notes Política de contrasenyes

La contrasenya de l’usuari haurà de complir les següents restriccions:

• Haurà de contenir com a mínim un dígit numèric.

• Haurà de contenir com a mínim una lletra en majúscules.

• Haurà de contenir com a mínim una lletra en minúscules.

• Haurà de tindre una longitud mínima de 6 caràcters i màxima de 10 caràcters.

El sistema no emmagatzemarà en cap cas la contrasenya de l’usuari. En el seu defecte

emmagatzemarà un hash únic equivalent de la mateixa.


Nom Registrar-se al sistema.

Prioritat Alta.

Descripció L’usuari es registra al sistema per a poder accedir-hi.

Actors Usuari (Soci / No Soci)

Pre-Condicions L’usuari no s’ha d’haver registrat al sistema prèviament.

No pot existir el correu electrònic.

Iniciat per L’usuari vol poder accedir al sistema.

Flux 1. L’actor sol·licitar poder donar-se d’alta al sistema través de la secció del sistema “Vull

registrar-me”.

2. El sistema mostra un formulari amb les següents dades:

• Àlies. Obligatori i únic.

• Nom de l’usuari. Obligatori.

• Cognoms de l’usuari. Obligatori.

• Sexe. Obligatori

• Telèfon de contacte. Obligatori

• Correu electrònic. Obligatori

• Contrasenya (2 cops). Obligatori.

• Nivell del jugador. Enumeració predeterminada. Obligatori.


30 / 92

• Indicador vull que el sistema m’avisi de possibles partits en els dies i horaris

indicats. Optatiu.

3. L’actor omple tots els camps del formulari obligatoris.

4. El sistema registra a l’usuari dins del sistema.

Post-Condicions L’usuari s’ha donat d’alta correctament al club.

Notes Els següents camps seran sempre visibles a altres usuaris del club:

• Àlies.

• Nivell del jugador.

• Sexe.


Nom Donar-se de baixa del sistema.

Prioritat Baixa.

Descripció L’usuari vol esborrar les seves dades del sistema


Pre-Condicions L’usuari s’ha d’haver registrat al sistema prèviament.

Haver executat el cas d’ús CU-016 Veure perfil d’un usuari.

Iniciat per L’usuari ja no vol realitzar cap de les accions que el sistema li permet desenvolupar.

Flux 1. L’usuari seleccionar la opció del sistema “vull esborrar les meves dades”.

2. El sistema mostra un missatge de confirmació o cancel·lació de l’acció a realitzar.

3. L’usuari accepta l’acció a realitzar e introdueix obligatòriament un motiu de baixa.

4. El sistema esborrar les dades de l’usuari i envia un correu electrònic a l’Administració del

Club confirmant la baixa de l’usuari.

Post-Condicions L’usuari ja no existeix al sistema.

Notes N/A



31 / 92

Nom Crear una reserva.

Prioritat Alta.

Descripció L’usuari vol realitzar una reserva de pista

Actors Usuari (Soci / No Soci) o Administrador

Pre-Condicions Haver executat el cas d’ús CU-001 Autenticar-se al sistema .

Iniciat per L’usuari disposa de 4 jugadors per a realitzar un partit de pàdel o tenis i vol reserva una pista.

Un usuari sol·licita a l’administració del club la reserva d’una pista a través d’una via diferent a

la Web.

Flux 1. L’usuari selecciona una franja disponible dins del calendari del tipus de pista (pista pàdel o

pista tenis) desitjat i selecciona la opció “Realitzar sol·licitud de reserva”.

2. El sistema mostra un missatge de confirmació o cancel·lació de l’acció a realitzar.

3. L’usuari accepta la creació d’una sol·licitud de reserva.

4. El sistema crear una reserva amb estat “Confirmada”.

5. El sistema envia un correu electrònic amb la sol·licitud de reserva de pista a l’usuari i a

l’administració del Club.

Post-Condicions Es crea un reserva amb estat Confirmada.

Notes El calendari es mostrarà amb la següent llegenda de colors:

• Verd. Total disponibilitat de les pistes per realitzar una sol•licitud de reserva.

• Vermell. No existeixen pistes disponibles. Per tant no es possible realitzar una

sol·licitud de reserva, però es possible posar-se a la cua per una possible

anul·lació.

El possibles estats d’una reserva son:

• Confirmada. Estat final a l’acceptar la sol•licitud de reserva.

• Anul·lada. Estat final al refusar la sol•licitud de reserva.

El diagrama d’estats és el que es mostra a continuació:

Segons el rol de l’usuari, Soci o No Soci. El sistema permetrà fer la creació de la partida amb

la disponibilitat de pistes següent:


32 / 92

• Si l’usuari és Soci, el sistema permetrà fer la creació de la partida a 7 dies per

endavant.

• Si l’usuari és No Soci, el sistema permetrà fer la creació de la partida a 2 dies

per endavant.

El temps d’una reserva es de 60 minuts.


Nom Anul·lar una reserva.

Prioritat Alta.

Descripció Anul·lar una reserva de pista confirmada.


Pre-Condicions Disposar d’una reserva de pista confirmada.

Haver executat el cas d’ús CU-001 Autenticar-se al sistema .

Iniciat per L’usuari vol anul·lar una pista reservada.

Flux 1. L’usuari accedeix a la seva reserva i seleccionar l’opció “Vull anul·lar la reserva”.

2. El sistema mostra una confirmació o cancel·lació de l’acció a realitzar.

3. L’usuari confirma l’acció e introdueix un motiu d’anul·lació.

4. El sistema envia un correu electrònic a l’usuari creador de la sol·licitud de reserva amb

l’anul·lació de la reserva i el motiu i actualitza l’estat de la reserva a anul·lada.

Post-Condicions La reserva queda en estat anul·lada.

Notes N/A


Nom Crear una partida.

Prioritat Alta.

Descripció Crear una partida en la que no es tenen els 4 jugadors.

Actors Usuari (Soci / No Soci).


33 / 92


Iniciat per Un usuari vol jugar una partida en una data concreta i no disposa de tots els jugadors.

Flux 1. L’usuari selecciona una franja disponible dins del calendari del tipus de pista (pista pàdel o

pista tenis) desitjat i selecciona la opció “Crear partida”.

2. L’usuari introdueix les dades d’aquells jugadors dels que ja disposa o vol convidar, inclòs ell

mateix. Si algun dels jugadors existeix dins el sistema, apareixerà per a que l’usuari el pugui

triar. Les dades que s’hauran d’introduir per a cada jugador de la partida son:

a. Sexe.

b. Nivell.

c. Jugador confirmat (vist ok) o jugador que vull convidar (?).

3. El sistema detecta quants jugadors manquen per a finalitzar la partida i sol·licita a l’usuari

que introdueixi el nivell i sexe dels jugadors restants. Les possibles opcions seran:

a. Sexe: Home / Dona / indistint.

b. Nivell: Enumeració predefinida al sistema.

4. L’usuari accepta la creació de la partida. El sistema mostra un missatge informant que si

24h abans de la realització de la partida, aquesta no s’ha omplert, la partida es descartarà i la

reserva quedarà anul·lada.

5. El sistema busca aquells usuaris que compleixin els requisits de la partida i els hi envia un

correu electrònic amb un enllaç per a que es puguin apuntar a la partida.

6. El sistema envia un correu electrònic amb un enllaç per a que es puguin apuntar a la partida

als convidats.

7. El sistema llista la partida a la secció “partides en creació” del sistema.

8. El sistema realitza una reserva de pista amb estat confirmada i assigna la primera pista

disponible.

Post-Condicions Es crea una nova partida i una nova reserva.

Notes Segons el rol de l’usuari, Soci o No Soci. El sistema permetrà fer la creació de la partida amb

la disponibilitat de pistes següent:

• Si l’usuari és Soci, el sistema permetrà fer la creació de la partida a 7 dies per

endavant.

• Si l’usuari és No Soci, el sistema permetrà fer la creació de la partida a 2 dies

per endavant.

Els estats d’una partida son:

• Partida en creació (INICIADA). Estat inicial que vol dir que una partida no te els

4 jugadors. Verd.


34 / 92

• Partida confirmada. Estat final que indica que una partida té 4 jugadors.

Vermell.

• Partida anul·lada. No apareix al calendari.

El temps d’una partida és de 60 minuts.


Nom Afegir-se a una partida.

Prioritat Alta.

Descripció L’usuari s’afegeix a una partida existent.



Existeix una partida creada.

Iniciat per L’usuari rep una notificació de partida existent o l’usuari veu una partida a traves de la secció

“partides en creació”.

Si l’usuari ha rebut un correu electrònic amb la invitació a la partida, accedeix directament al

sistema a traves de l’enllaç proporcionat, aquest l’encamina directament al detall de la

partida.

Si l’usuari veu una partida a la secció “partides en creació” i fa clic sobre la mateixa.

Flux 1. El sistema mostra el detall de la partida.

1.1. Si la partida té els 4 jugadors:

1.1.1. L’usuari selecciona l’opció vull afegir-me a la bossa de jugadors de la partida.

1.1.2. El sistema mostra una confirmació o cancel·lació de l’acció a realitzar.

1.1.3. L’usuari confirma l’acció

1.1.4. El sistema emmagatzema al jugador dins la bossa de jugadors de la partida.

1.2. Si la partida no té els 4 jugadors:

1.2.1. L’usuari selecciona l’opció vull afegir-me a la partida.

1.2.2. El sistema mostra una confirmació o cancel·lació de l’acció a realitzar.

1.2.3. L’usuari confirma l’acció

1.2.4. El sistema emmagatzema al jugador dins els jugadors de la partida.

1.2.5. Si la partida ja té els 4 jugadors el sistema confirma la partida i envia un correu


35 / 92

electrònic a tots els jugadors informant de la confirmació de la partida.

Post-Condicions L’usuari s’ha afegit a una partida

Notes N/A


Nom Donar-se de baixa d’una partida

Prioritat Normal

Descripció L’usuari es vol donar de baixa d’una partida



Existeix una partida creada i l’usuari esta apuntat dins de la bossa de jugadors de la partida o

com a jugador de la mateixa.

Iniciat per L’usuari no pot assistir a la partida

Flux 1. L’usuari accedeix al detall de la partida i seleccionar la opció:

1.1. “Vull sortir de la partida” si es jugador.

1.1.1. Si, existeixen jugadors a la bossa de jugadors. El sistema informarà a tots els usuaris

de la bossa que ha quedat una plaça lliure a la partida. Si la partida estava en estat “partida

confirmada” i la partida es farà amb més de 24h d’antelació, passarà a estat “partida en

creació” i s’avisarà d’aquest nou estat a tots els jugadors confirmats, així com de la possibilitat

que un jugador de la bossa de jugadors es podria apuntar. Si la partida es farà amb menys de

24h d’antelació la partida queda anul·lada directament i s’avisarà d’aquest nou estat a tots els

jugadors confirmats.

1.2.2. Si no existeixen jugadors a la bossa de jugadors. Si la partida estava en estat “partida

confirmada” i la partida es farà amb més de 24h d’antelació passarà a estat “partida en

creació” i s’avisarà d’aquest nou estat a tots els jugadors confirmats. Si la partida es farà amb

menys de 24h d’antelació la partida queda anul·lada directament i s’avisarà d’aquest nou

estat a tots els jugadors confirmats.

1.2. “Vull sortir de la bossa de jugadors” si esta dins de la bossa de jugadors. El sistema

eliminar al jugador de la bossa de jugadors i manté l’estat de la partida.

Post-Condicions El jugador s’ha donat de baixa correctament de la partida.

Notes N/A


36 / 92


Nom Anul·lar una partida

Prioritat Alta

Descripció El sistema anul·la una partida iniciada que no conte els 4 jugadors per tal d’alliberar la pista.

Actors Sistema (Temporitzador)

Pre-Condicions Existeixen partides en creació (INICIADES).

Iniciat per Temporitzador del sistema

Flux 1. El sistema cerca totes les partides que estiguin en estat en creació i en les que la seva

reserva sigui amb menys de 24h, si obté resultats canvia l’estat de la partida a anul·lada i

envia un correu electrònic a tots els jugadors informant de l’acció efectuada.

Post-Condicions No existeixen partides iniciades programades en menys de 24h.

Notes N/A


Nom Buscar usuaris

Prioritat Baixa

Descripció Cercador d’usuaris

Actors Usuari (Soci / No Soci) i administració del Club


Iniciat per L’actor vol buscar un usuari per veure el seu perfil públic.

Flux 1. L’actor seleccionar l’opció del sistema “Cercador d’usuaris” i omple els criteris de cerca.

2. El sistema mostra en format tabular la cerca dels usuaris trobats.

3. L’actor selecciona un registre d’un usuari i activa el cas d’ús CU-0016 Veure perfil amb

accés només a les dades publiques d’aquest usuari.

Post-Condicions L’actor troba l’usuari cercat.


37 / 92

Notes N/A.


Nom Configurar el sistema.

Prioritat Baixa.

Descripció L’administració del club configura els paràmetres de comportament de l’aplicació.

Actors L’administració del club.


Iniciat per L’administració del club requereix modificar algun dels parametres del sistema.

Flux 1. L’administració del club accedeix a la configuració del sistema.

2. El sistema mostra les possibles opcions de configuració com ara:

• Pistes

• Hores d’antel·lació per anul·lar una partida.

• Dies d’antel·lació per a que un SOCI pugui reservar una pista i crear una

partida.

• Dies d’antel·lació per a que un NO SOCI pugui reservar una pista i crear una

partida.

• Altres.

3. L’administració del club modifica les configuracions i confirma els canvis.

4. El sistema guarda els canvis.

Post-Condicions S’han guardat els canvis de la configuració del sistema-

Notes La configuració del sistema no es realitzarà a través d’una interfície gràfica en aquesta

primera versió.


Nom Veure perfil d’un usuari

Prioritat Normal


38 / 92

Descripció Veure el perfil d’un usuari

Actors Usuaris (Soci / No Soci) i administració del club


Iniciat per Resultat d’una cerca d’usuaris i accés al perfil públic.

Flux 1. L’actor accedeix al perfil.

2. El sistema mostra les dades del perfil, segons els permisos de l’actor connectat.

Post-Condicions N/A.

Notes N/A.


Nom Actualitzar dades d’un usuari

Prioritat Alta.

Descripció Actualitzar dades d’un usuari



Iniciat per El propi usuari vol actualitzar les seves dades.

Flux 1. L’usuari accedeix al seu perfil

2. El sistema mostra el formulari amb les seves dades.

3. L’usuari actualitzar les dades pertinents.

4. El sistema emmagatzema els canvis realitzats.

Post-Condicions L’usuari ha modificat les seves dades.

Notes N/A


39 / 92

11.2. Bases de dades

A continuació es mostra el disseny conceptual de la base de dades del sistema.

Figura 7: Model conceptual de la base de dades del sistema


40 / 92

11.3. Entitats i classes

A continuació es mostra el disseny d’entitats i classes de domini del sistema.

Figura 8: Model entitats i classes del sistema


41 / 92

11.4. Diagrama de paquets

La següent figura mostra el diagrama de paquets implementats del sistema.

Figura 9: Diagrama de paquets versió Beta


42 / 92

11.5. Diagrames de classes detallats

Les següents figures mostren els diagrames de classes implementades per cadascun dels paquets del

sistema.

Figura 10: Diagrama de classes paquet booking.controller.common

Figura 11: Diagrama de classes paquet booking.controller.services

Figura 12: Diagrama de classes paquet booking.controller.util


43 / 92

Figura 13: Diagrama de classes paquet booking.model.bo

Figura 14: Diagrama de classes paquet booking.model.util

Figura 15: Diagrama de classes paquet booking.view.calendar


44 / 92

Figura 16: Diagrama de classes paquet booking.model.entity


45 / 92

11.6. Diagrama de seqüència

A continuació es mostra el diagrama de seqüència amb les crides de construcció dels diferents

objectes del sistema. Com s’ha descrit anteriorment, s’ha dissenyat un model SOA i el següent

diagrama mostra la interconnexió i les crides de cada una de les capes.

El flux de les operacions mostrades al diagrama son:

1. Creació del contenidor de l’aplicació al servidor d’aplicacions.

2. Creació de la instancia controladora de l’aplicació i construcció del pool de connexions a la

base de dades (sessió en terminologia Hibernate).

3. Operacions del client cap a la capa controladora. El diagrama simula l’execució dels següents

casos d’ús:

a. Navegació pel calendari.

b. Registre al sistema. Creació d’un usuari.

c. Autenticació al sistema.

d. Creació d’una partida.

e. Realització d’una reserva.

f. Anul·lació d’una reserva.

g. Anul·lació d’una partida.

h. Visualització del perfil d’usuari.

i. Actualització del perfil d’usuari.

j. Tancament de sessió del sistema.

k. Sol·licitud de recordatori de contrasenya.

4. Destrucció del contenidor de l’aplicació al servidor d’aplicacions.


46 / 92

Figura 17: Diagrama de seqüència de l’arquitectura del sistema


47 / 92

11.7. Diagrama d’activitats

A continuació es mostren els diagrames d’activitats dels casos d’ús implementats.

Registrar-se al sistema

Figura 18: Diagrama d’activitats registrar-se al sistema


48 / 92

Autenticar-se al sistema

Figura 19: Diagrama d’activitats autenticar-se al sistema


49 / 92

Sol·licitar recordatori de contrasenya

Figura 20: Diagrama d’activitats sol·licitar recordatori de contrasenya i canvi de contrasenya


50 / 92

Actualitzar dades d’un usuari

Figura 21: Diagrama d’activitats actualitzar dades d’un usuari


51 / 92

Crear una reserva

Figura 22: Diagrama d’activitats crear una reserva


12. Prototips

Esbossos, croquis, models, prototips, etc., c

12.1 Lo-Fi

Degut a la utilització del programari

requeriments, no s’han realitzat sketchers a mà alçada sinó que s’ha utilitzat l’aplicació de disseny per

tal d’anar creant els diferents mockups de les pantalles conjuntament amb el Product Owner del

producte.

12.2 Hi-Fi

A continuació es poden observar les

poden veure al directori documentació/

Com es pot veure les pantalles s’han dissenyat tant per a una vista de monitor de PC com per a una

vista de dispositiu mòbil.

Pantalla inicial sense autenticació

Figura 23: Pantalla inicial sense autenticació


quis, models, prototips, etc., creats durant el procés de treball, incloent especialment

Degut a la utilització del programari Balsamiq Mockup durant les reunions de brainstorming


d’anar creant els diferents mockups de les pantalles conjuntament amb el Product Owner del

A continuació es poden observar les principals pantalles de l’aplicació treballades.

documentació/ mockups .


Pantalla inicial sense autenticació

: Pantalla inicial sense autenticació


52 / 92

treball, incloent especialment:

brainstorming i captura de


d’anar creant els diferents mockups de les pantalles conjuntament amb el Product Owner del

pantalles de l’aplicació treballades. Addicionalment es



Pantalla inicial recordar contrasenya

Figura 24: Pantalla inicial recordar contrasenya

Pantalla inicial amb autenticació

Figura 25: Pantalla inicial amb autenticació


inicial recordar contrasenya

: Pantalla inicial recordar contrasenya

Pantalla inicial amb autenticació

: Pantalla inicial amb autenticació


53 / 92


Pantalla real itzar sol·licitud de reserva o

Figura 26: Pantalla realitzar sol·licitud de reserva o creació de partida


itzar sol·licitud de reserva o creació de partida

realitzar sol·licitud de reserva o creació de partida


54 / 92


Pantalla realitzar sol·licitud de reserva

Figura 27: Pantalla realitzar sol·licitud de reserva


Pantalla realitzar sol·licitud de reserva

: Pantalla realitzar sol·licitud de reserva


55 / 92


Pantalla crear partida amb jugadors

Figura 28: Pantalla crear partida amb jugadors


crear partida amb jugadors

: Pantalla crear partida amb jugadors


56 / 92


Pantalla crear partida sense jugadors

Figura 29: Pantalla crear partida sense jugadors

Pantalla afegir-se a la bossa de jugadors d’una partida

Figura 30: Pantalla afegir-se a la bossa de jugadors d’una partida


Pantalla crear partida sense jugadors

: Pantalla crear partida sense jugadors

a la bossa de jugadors d’una partida

se a la bossa de jugadors d’una partida


57 / 92


Pantalla afegir- se a una partida

Figura 31: Pantalla afegir-se a una partida

Pantalla borrar-se d’una partida

Figura 32: Pantalla borrar-se d’una partida


se a una partida

se a una partida

d’una partida

se d’una partida


58 / 92


Pantalla sortir de la bossa de jugadors d’una parti da

Figura 33: Pantalla sortir de la bossa de jugadors d’una partida


Pantalla sortir de la bossa de jugadors d’una parti da

: Pantalla sortir de la bossa de jugadors d’una partida


59 / 92


60 / 92

13. Perfils d’usuari

Llistat i descripció detallada dels perfils tipus d'usuaris que s'esperen facin ús de l'aplicació.

Identificador

de perfil

Característiques del perfil Context d’ús Tasques a

realitzar

1 Soci i no soci del Club (usuaris).

Persones entre quinze i seixanta-cinc

anys que realitzen reserves a aquest

club o altres clubs o activitats per

telèfon o presencialment, amb diferents

estats civils; solteres, parelles i

matrimonis, amb diverses situacions

familiars. Usuaris que no estan gaire

familiaritzats amb les tecnologies.

Aquest tipus d’usuari

podria utilitzar el

sistema a la seva llar a

través del seu

ordinador portàtil o

sobretaula.

• Veure la

disponibilitat

de les pistes.

• Realitzar

una reserva.

• Crear una

partida.

• Afegir-se a

una partida

existent. 2 Soci i no soci del Club (usuaris).

Persones entre quinze i seixanta-cinc

anys que realitzen reserves a altres

clubs o a altres activitats a traves

d’Internet, amb diferents estats civils;

solteres, parelles i matrimonis, amb

diverses situacions familiars. Usuaris

que estan familiaritzats amb les

tecnologies.


podria utilitzar el

sistema a la seva llar a

través del seu

ordinador portàtil o

sobretaula, a través

de la seva tableta i a

traves del seu telèfon

intel·ligent.

3 Administrador del Club. Persones entre

20 i 40 anys que, amb diferents estats

civils; solteres, parelles i matrimonis,

amb diverses situacions familiars i que

estan familiaritzats amb les

tecnologies.


podria utilitzar el

sistema al despatx del

Club a través del seu

ordinador de

sobretaula, a través

de la seva tableta i a

traves del seu telèfon

intel·ligent.

• Veure la

disponibilitat

de les pistes.

• Realitzar

una reserva.

Taula 4: Perfils d’usuari


61 / 92

14. Disseny conceptual

14.1. Escenaris d’ús

Els possibles escenaris d’ús del sistema en base als perfils d’usuari enumerats anteriorment, apartat

Perfils d’Usuari , d’aquest mateix document, es llisten a la següent taula.

Perfil

d’usuari

Context d’ús Objectiu Quines tasques desenvolupa i

quina informació necessita

1 L’usuari es troba a casa seva

fora d’horari d’atenció al

públic. El club esta tancat.

L’usuari vol reservar

una pista.

L’usuari ha de ser capaç de

donar-se d’alta al sistema o ha de

ser capaç d’accedir-hi.


seleccionar el tipus de pista que

desitja.


realitzar una sol·licitud de reserva

a les hores que li convinguin.

L’usuari vol jugar un

partit en un dia i hora

determinat.






desitja.

L’usuari ha de ser capaç de veure

si existeix alguna partida que li

convingui o ha de se capaç de

realitzar la creació d’una nova

partida.

2 L’usuari es troba en qualsevol

indret amb un dispositiu amb

connexió a Internet.

L’usuari vol reservar

una pista.






desitja.


realitzar una sol·licitud de reserva

a les hores que li convinguin.


62 / 92

Perfil

d’usuari

Context d’ús Objectiu Quines tasques desenvolupa i

quina informació necessita

L’usuari vol jugar un

partit en un dia i hora

determinat.






desitja.

L’usuari ha de ser capaç de veure

si existeix alguna partida que li

convingui o ha de se capaç de

realitzar la creació d’una nova

partida.

3 L’administració del club es

troba al despatx del club o en

qualsevol indret amb un

dispositiu amb connexió a

Internet.

L’administració del

club vol reservar una

pista.

L’administració del club ha de ser

capaç d’accedir al sistema a la

zona de gestió de reserves.

Ha de ser capaç de seleccionar el

tipus de pista que desitja.

Ha de ser capaç de realitzar una

reserva a les hores que li

convinguin.

L’administració del

club vol gestionar

una pista.

L’administració del club ha de ser

capaç d’accedir al sistema a la

zona de gestió de reserves.

Ha de ser capaç de seleccionar el

tipus de pista que desitja.

Ha de ser capaç de realitzar les

modificacions sobre la sol·licitud

de reserva que desitgi.

Taula 5: Escenaris d’ús


63 / 92

14.2. Fluxos d’interacció

El següent diagrama mostra els fluxos d’interacció del sistema:

Taula 6: Fluxos d’interacció


64 / 92

15. Seguretat

OWASP6 estableix que les principals vulnerabilitats d’una aplicació Web estan dins dels següents

dominis (o temes). Durant el desenvolupament del sistema s’han tingut presents aquests dominis per

tal de minimitzar el risc a l’explotació indeguda de les dades gestionades.

• Injeccions. Injeccions de codi no controlades. Com poden ser injeccions SQL o LDAP. Per

evitar aquest tipus d’injecció he utilitzat un ORM per construir les consultes a base de dades.

Addicionalment mancaria implementar filtres i diccionaris d’entrada per validar que totes les

dades d’entrada son correctes. Per exemple, no podríem permetre que un usuari es digues

DROP TABLE.

• Pèrdua d’autenticació y gestió de sessions. S’ha d’assegurar una correcta validesa de l’usuari

en tot moment, no només en el procés d’autenticació. S’han implementat mesures de control a

cada acció que requereix d’haver-se identificat al sistema. Addicionalment s’ha utilitzat el

comptador y generador de sessions del propi servidor d’aplicacions.

• Cross-Site Scripting. S’ha d’evitar que l’usuari pugui introduir codi Javascript o HTML. Similar

al domini d’injeccions s’han d’implementar filtres i diccionaris d’entrada.

• Referències directes insegures a objectes i redireccions i reenviaments no validats. Per evitar

l’accés a planes o recursos no públics, aquests s’han protegit ubicant-los als directoris privats

(WEB-INF). Tanmateix s’ha creat un filtre amb Spring per a que només estiguin disponibles a

través de redireccions internes del sistema.

• Configuracions de seguretat incorrectes. Durant el pas a producció, s’han de verificar que totes

les configuracions son les adequades. Per exemple, treure els directoris d’exemple del

servidor d’aplicacions, treure la consola d’administració, canviar la contrasenya per defecte,

configurar la connexió SSL (HTTPS), entre d’altres.

• Exposició de dades sensibles. S’ha d’assegurar que cada usuari del sistema veu la informació

a la que té accés.

• Utilització de components amb vulnerabilitats. S’ha d’establir un manteniment periòdic per

garantir que els components utilitzats estan lliures d’explotacions conegudes (CVE7).

6 OWASP (Open Web Application Security Project) és una organització oberta encarregada de propagar informació i eines per millorar la seguretat i evitar l’explotació no autoritzada de recursos. 7 CVE (Common Vulnerability and Exposures) és un diccionari de vulnerabilitats i exposicions de seguretat d'informació de coneixement públic.


65 / 92

16. Tests

A continuació es descriuen els test d’usabilitat i els test de sistema que s’aplicaran al projecte.

16.1. Test d’usabilitat

Test d’usabilitat que es durà a terme amb usuaris.

Grups d’usuaris

El test s’aplicarà a 5 persones de cadascun dels perfils definits.

Objectius del test

Mesurar la facilitat en la que un usuari pot realitzar la reserva d’una pista i la creació d’una partida.

Mesura l’ús de la secció suggeriments i partides creades.

Mesura la facilitat per donar-se de baixa d’una partida.

Pretest

En el nostre cas d’estudi, l’objectiu del pretest es recollir informació sobre els següents aspectes dels

usuaris:

• Tecnologia, programari que els usuaris utilitzen per accedir al nostre site.

• Perfils d’usuari, coneixement del usuaris vers l’ús de tecnologies web.

• Motius o factors pels quals un usuari realitza reserves per Internet. Freqüència. Grau de

satisfacció, aspectes interessants que podrien fer millorar el site, en front altres sites.

• Motius o factors pels quals un usuari no realitza reserves per Internet, i com fer que canviïn

aquest hàbit.

Per extreure tota aquesta informació s’han preparat les següents qüestions i/o preguntes, que els

usuaris han de respondre abans de realitzar les diferents tasques proposades durant l’execució del

test. Es important que el facilitador realitzi el pretest amb l’usuari. Per facilitar la interacció facilitador –

usuari s’han intercalat preguntes tancades i obertes.

Qüestions

1. ¿Quin navegador web utilitzes normalment?

a. Internet Explorer.

b. Chrome.

c. Safari.

d. Firefox.

e. Altres.


66 / 92

2. Si la resposta a la qüestió anterior ha estat altres, ¿Quin o quins son els navegadors que

utilitzes normalment?

3. Com qualificaries els teus coneixements, comoditat i ús de pàgines web.

a. Principiant. Conec molt poc sobre pàgines web, no mi sento còmode i rarament les utilitzo.

b. Mitjà. Sé com utilitzar una pàgina web, normalment m’hi sento còmode i la utilitzo entre 1 y

3 cops a la setmana.

c. Avançat. Sé com utilitzar una pàgina web, m’hi sento còmode, la utilitzo amb regularitat

més de 3 cops a la setmana.

d. Expert. Sé com utilitzar una pàgina web, m’hi sento còmode, he integrat el meu dia a dia

amb l’ús de pàgines web.

4. ¿Has realitzat, alguna vegada, una reserva per Internet?

a. Sí.

b. No.

5. Si la resposta a la qüestió anterior ha estat sí,

5.1. Recordes a quina web i quina activitat vas reservar?

5.2. Hi Repetiries?

a. Sí.

b. No.

5.3. Per què?

5.4. Què et va agradar de la web? (Per exemple. Disseny de la interfície).

5.5. Què no et va agradar de la web? (Per exemple. Temps d’espera, interacció, altres).

5.6. Realitzes reserves regularment per Internet?

a. Sí.

b. No.

5.7. Si la resposta a la qüestió anterior ha estat sí. Amb quina freqüència realitzes reserves

per Internet?

a. 1 vegada al mes.

b. 2 vegada al mes.

c. 3 vegada al mes.

d. Més de 3 vegada al mes.

5.8. Quins avantatges i quins inconvenients li trobes a realitzar reserves per Internet? (Per

exemple. Horari, comoditat, temps d’espera).


67 / 92

6. Si la resposta a la qüestió 4 ha estat no, per quin o quins motius no has realitzat mai una

reserva per Internet?

a. No entenc com s’ha de fer.

b. No confio en Internet.

c. Prefereixo parlar directament amb una persona.

d. Altres.

7. Si la resposta a la qüestió anterior ha estat altres, ¿Quin o quins són altres motius pels quals no

has realitzat mai una reserva per Internet?

Test

S’han dissenyat els següents escenaris i tasques en relació als objectius descrits anteriorment.

Escenaris

Escenari 1

Vols reservar una pista de pàdel i el club ja esta tancat, recordes que t’han parlat d’una nova web que el

club a posat a disposició dels usuaris per tal de poder realitzar una reserva.

Tasca 1. Series capaç de realitzar una reserva d’una pista de padel per el proper Dimarts de 17.00 a

18.00 de la tarda?

Escenari 2

T’agradaria jugar a tenis el proper divendres, fa setmanes que no pots jugar perque no trobes a ningú

per fer-ho, els horaris de feina i l’estat familiar dels teus amics es un impediment.

Tasca 1. Series capaç de veure si podries jugar una partida de tenis divendres vinent de 20.00 a 21.00

de la nit?

Escenari 3

Estaves apuntat a una partida de pàdel el proper dimecres. El teu cap t’acaba de convocar a una reunió

i veus que no podràs arribar-hi.

Tasca 1. Series capaç de trobar la partida a la que estàs apuntat i esborrar-te de la mateixa?

Postest

A fi de recollir les impressions i opinions de l’usuari vers el site, s’han preparat les següents qüestions

i/o preguntes que els usuaris han de respondre una vegada finalitzat el test. És important que el

facilitador realitzi el postest amb l’usuari. Per facilitat la captura d’informació s’han preparat un seguit de

preguntes tancades, encara que, al finalitzar l’usuari pot aportar qualsevol altre observació.

Les qüestions que els usuaris hauran de respondre després d’haver realitzat les tasques són:

1. En general, utilitzar la pàgina web ha estat:

a. Molt fàcil.


68 / 92

b. Fàcil.

c. Normal.

d. Difícil.

e. Molt difícil.

2. En general, trobar les accions que volies fer en els menús ha estat:

a. Molt fàcil.

b. Fàcil.

c. Normal.

d. Difícil.

e. Molt difícil.

3. En general, entendre els missatges del site ha estat:

a. Molt fàcil.

b. Fàcil.

c. Normal.

d. Difícil.

e. Molt difícil.

4. Finalitzar totes les tasques del test ha estat:

a. Molt fàcil.

b. Fàcil.

c. Normal.

d. Difícil.

e. Molt difícil.

5. Assenyala el grau de conformitat.

5.1. El color, forma i mida de les icones son aclaridores amb les accions que realitzen.

a. Totalment d’acord.

b. D’acord.

c. Normal.

d. En desacord.

e. Totalment en desacord.

5.2. La interfície es senzilla i intuïtiva de utilitzar.


69 / 92

a. Totalment d’acord.

b. D’acord.

c. Normal.

d. En desacord.

e. Totalment en desacord.

6. Has necessitat consultar l’apartat d’ajuda per finalitzar alguna de les tasques plantejades?

a. Sí.

b. No.

7. Si la resposta a la qüestió anterior es sí, l’ajuda ha estat suficientment aclaridora per

ajudar-te a finalitzar la tasca?

a. Sí.

b. No.

8. Recomanaries el site als teus amics o familiars.

a. Sí.

b. No.

9. Per què?

10. Observacions generals sobre el site. Canviaries alguna part del site, quina i per què?


70 / 92

Calendari

La sessió del test d’usabilitat dissenyat té una durada aproximada de 1h i 10minuts, distribuïda de la

següent forma:

• Benvinguda i explicació del test. 15 minuts.

• Firma de l’autorització. 5 minuts.

• Agenda. Explicació dels passos a realitzar durant la sessió. 5 minuts.

• Pretest. 15 minuts.

• Test. 30 minuts.

o Escenari 1.

� Tasca 1. 10 minuts.

o Escenari 2.


o Escenari 3.


• Postest. 15 minuts.

Taula 7: Calendari del test d’usabilitat amb usuaris


71 / 92

16.2. Tests unitaris

S’ha implementat una test unitari que proba els serveis oferts per la capa de Serveis. A continuació es

mostra una taula resum amb la descripció i l’objectiu de cada test. Addicionalment per obtindre més

informació del test es recomana accedir a l’informe

Test Objectiu del test

testCreateUserWithoutPreferences() Verificar que la creació d’un usuari sense

preferències (franges disponibles per ser

consultat en el moment de crear una nova

partida) funciona correctament.

testCreateUserWithPreferences() Verificar que la creació d’un usuari amb




testLogin() Verificar que el procés d’autenticació al sistema

funciona correctament.

testRecoveryPassword() Verificar que el procés de generació de hash

temporal funciona correctament.

testUpdateUserWithoutPreferences() Verificar que l’actualització d’un usuari sense




testUpdateUserWithPreferences() Verificar que l’actualització d’un usuari amb




Taula 8: Definició dels tests unitaris


72 / 92

17. Versions de l’aplicació/servei

A continuació es detallen les entregues del sistema efectuades i el seu contingut:

• Versió 0.0.0 Alpha. Entregada el 10/12/2014.

Fase / Ítem Contingut

Disseny arquitectònic SOA i

comunicació en totes les capes

• Client. Totalment independent del servidor. Tecnologies

utilitzades: HTML5 / JS / BOOTSTRAP / JQUERY /

FULLCALENDAR-IO / JSON.

• Controlador. Capa de Servei REST. Tecnologia utilitzada

MVC-SPRING.

• MODEL.

o Capa de domini (entitats i lògica de negoci).

Tecnologia utilitzada JAVA.

o DB. ORM. Tecnologia utilitzada HIBERNATE.

DCU. Prototip de la vista • Pantalla principal de l'aplicació, Web Responsive, amb les

següents funcionalitats:

o Registre d'usuari. Servei de missatgeria per

confirmar el correu electrònic i validacions no

implementades.

o Inici / Tancament de sessió.

o Recordatori de contrasenya. Servei de missatgeria

per confirmar el correu electrònic no implementat.

o Visualització de reserves. Servei no dinàmic.

o Creació de reserves. Sense persistència.

Construcció • Aplicació.

• Informe de construcció / Documentació tècnica:

o API / Javadoc.

o Informe de dependencies.

o Resultats del Test / Cobertura.

o Codi font.

Taula 9: Contingut Versió 0.0.0 Alpha


73 / 92

• 1.0.0 Beta. Entregada el 9/1/2015.

Fase / Ítem Contingut

Versió 0.0.0 Alpha • Contingut versió anterior millorat. Bugs menors solucionats.

Funcionalitats implementades • CU-001 Autenticar-se al sistema (100%).

• CU-002 Sol•licitar recordatori de contrasenya (100%).

• CU-003 Registrar-se al sistema (100%).

• CU-005 Crear una reserva (50%). Sense persistència.

• CU-0017 Actualitzar dades d’un usuari (75%). Pendent

mostrar dades de l’usuari connectat. Servei de persistència

implementat.

Construcció • Aplicació.

• Informe de construcció / Documentació tècnica:

o API / Javadoc.


o Resultats del Test / Cobertura.

o Codi font / Codi del test.

Taula 10: Contingut Versió 1.0.0 Beta


74 / 92

18. Requisits d’instal·lació/implantació/ús

Informació detallada sobre els recursos necessaris. Detallar per client i servidor (si s’escau) i:

• Software:

o Client. Navegador compatible amb HTML5. Per exemple Google Chrome.

o Servidor.

� Apache Tomcat 7.0.55

� JDK 1.7.0_51.

� PostgreSQL 9.3.5.

� WAR (booking-1.0.0.Beta.war). Veure fitxer documentació/1.0.0

Beta/booking-1.0.0.Beta.war .

• Hardware:

o Segons HW i arquitectura de màquina descarregar les versions del SW compatibles.

• Formació/Coneixements

o Coneixement en instal·lació de programari de base de dades y de desenvolupament

d’aplicacions Java.

o Coneixements en desplegaments d’aplicacions Web en servidors d’aplicacions

Tomcat.


75 / 92

19. Instruccions d’instal·lació/implantació

Informació amb passos detallats sobre com s'ha d'instal·lar/implantar el servei/aplicació. Aquestes

instruccions també han d’acompanyar al servei/aplicació en un arxiu contingut en els seus directoris.

19.1. JDK 1.7.0_51

Passos:

1. Accedir a la URL de descarrega del proveïdor

http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

2. Seleccionar la versió a descarregar segons la arquitectura HW de la màquina.

3. Descomprimir el paquet o seguir el wizard d’instal·lació del fabricant segons el paquet

descarregat.

4. Verificar la creació de la variable d’entorn JAVA_HOME, necessària per el servidor Apache

Tomcat.

19.2. Apache Tomcat 7.0.55

Passos:

1. Accedir a la URL de descarrega del proveïdor http://tomcat.apache.org/download-70.cgi

2. Seleccionar la versió a descarregar segons l’arquitectura HW de la màquina.

3. Descomprimir el paquet o seguir el wizard d’instal·lació del fabricant segons el paquet

descarregat.

19.3. PostgreSQL 9.3.5

Passos:

1. Accedir a la URL de descarrega del proveïdor http://www.postgresql.org/download/

2. Seleccionar la versió a descarregar segons l’arquitectura HW de la màquina.

3. Seguir el wizard d’instal·lació del fabricant segons el paquet descarregat.

a. Instal·lar el client SQL PgAdmin.

b. Utilitzar com a usuari propietari l’usuari postgres amb contrasenya postgres .


76 / 92

19.4. WAR

Passos:

1. Accedir al gestor de base de dades a través de PgAdmin.

2. Crear una nova base de dades “booking” amb usuari propietari postgres. Utilitzar el fitxer

documentació\0.0.0 Beta\db\CreateDatabase.sql

3. Crear les taules de la base de dades “booking” amb usuari propietari postgres. Utilitzar el fitxer

documentació\0.0.0 Beta\db\CreateTables.sql

4. Omplir les taules de la base de dades “booking”. Utilitzar el fitxer documentació\0.0.0

Beta\db\InsertData.sql

5. Renombrar el fitxer war documentació/1.0.0 Beta/booking-1.0.0.Beta.war a booking.war .

6. Accedir al directori de desplegament d’aplicacions web de TOMCAT. Per defecte directori

$TOMCAT_HOME/webapps/.

7. Copiar el fitxer booking.war .

8. Arrancar el servidor TOMCAT.

9. Verificar que l’aplicació esta correctament inicialitzada. Revisar la consola d’errors del

TOMCAT o el log de l’aplicació ${catalina.home}/logs/booking-traces.log .

10. Si la base de dades esta en local i s’ha creat l’usuari de base de dades postgres , l’aplicació

s’ha d’arrencar correctament. D’altra cas:

a. localitzar el fitxer

$TOMCAT_HOME/webapps/booking/WEB-INF/classes/hibernate.cfg.xml

b. Configurar l’accés a la base de dades modificant les propietats:

i. connection.url

ii. connection.username

iii. connection.password

c. Reiniciar el servidor d’aplicacions.


77 / 92

20. Instruccions d’ús

A continuació es descriuen les instruccions per tal d’utilitzar els serveis implementats en el sistema.

Registrar-se al sistema

1. Accedir a l’aplicació a través d’un navegador Web. Per exemple: http://localhost:8080/booking/

2. Accedir a la secció “Registrat”.

3. Crear un nou usuari a través del formulari i seleccionar l’opció “Registrar”.

Accedir al sistema


2. Accedir al sistema amb les credencials de l’usuari creat anteriorment.

Sortir del sistema



3. Sortir de l’aplicació a través de la secció “Sortir”.

Realitzar una reserva



3. Fer clic sobre una franja horària damunt el calendari.

4. Seleccionar la opció “Vull realitzar una sol·licitud de reserva”.

Realitzar un recordatori de contrasenya


2. Realitzar un recordatori de contrasenya a través de la secció “He oblidat la meva contrasenya”.

3. Introduir el correu electrònic de l’usuari i seleccionar l’opció “Confirmar sol·licitud”.

4. Rebre un correu electrònic amb un enllaç i una clau per tal de modificar la contrasenya.

5. Accedir al formulari de canvi de contrasenya a través de la URL rebuda.

6. Introduir la nova contrasenya dos cops i seleccionar la opció “Registra”.

7. Obtindre el missatge de confirmació de canvi de contrasenya.


78 / 92

21. Projecció a futur

Informació, prediccions i suggeriments sobre ampliacions a futur del treball, i/o llista de millores a

realitzar en hipotètiques futures versions del servei/aplicació.

• Desenvolupament d’un mòdul per a gestionar la part econòmica del Club, a través de la

reserva de les seves pistes (per a usuaris no socis) i l’administració dels socis.

• Ampliació del mòdul de reserves per a integrar-ho amb els calendaris de Gmail y Outlook.

• Ampliació del mòdul d’autenticació per a integrar-ho amb l’autenticació d’altres proveïdors com

Gmail, Facebook, entre altres.

• Permetre la difusió de les partides a través de la xarxes socials com per exemple Facebook y

Twitter.

• Creació d’aplicacions Client mòbils per als principals markets (Android, IOS).

• Permetre el pagament online de partides i reserves.

• Fer un seguiment dels resultats dels partits d’un jugador i convidar-li a pujar o baixa de nivell,

segons els seus resultats.

• Seguint el punt anterior mantindre un rànquing dels jugadors.

• Personalitzar la vista de calendari per a que mostri les franges horàries en funció de les seves

preferències.


79 / 92

22. Conclusió/-ns

Finalment no he sigut capaç de finalitzar la implementació de totes les funcionalitats que tenia previstes

(apartat casos d’ús , d’aquest mateix document) en el temps planificat. No obstant, tot i que de cara a

la UOC el meu TFM finalitza amb aquesta darrera entrega i la corresponent presentació, per a mi,

aquesta és només una de les fites del projecte. Durant els següents mesos seguiré treballant en la

implementació de les funcionalitats que manquen per tal de disposar finalment d’un sistema de

reserves de pistes que compleixi les expectatives del Club així com les meves. En aquest moment de la

meva vida, un dels propòsits d’aquest projecte és construir un sistema del qual em sentis orgullós i

satisfet.

El procés de treball del projecte ha estat duu i m’he trobat amb dificultats de diversos caires, tant

pròpiament tècniques i tecnològiques, com de gestió de comunicacions. Aquestes darreres les més

complicades de gestionar. Les reunions amb l’Administració del Club han estat més complicades del

que en un inici m’esperava. La por pel canvi s’ha manifestat i ha provocat moments de “tensió” en els

que s’ha hagut d’imposar la psicologia, el saber estar i el respecte.

Com he començat dient en aquestes conclusions i reflexions finals, la gestió del temps ha estat un dels

meus principals problemes o també podríem dir que ha estat el meu taló d’Aquiles. Compaginar la

feina, la vida familiar (amb un nadó d’1 any) i la construcció d’aquest projecte ha sigut complicat.

Podríem resumir-ho com que la gestió del temps és una de les capacitats en les que he de millorar molt

més.

Addicionalment, l’ús de tecnologies, per a mi noves, ha provocat que l’avenç de la construcció del

projecte fos més lent del planificat inicialment. No obstant, l’aprenentatge d’aquestes tecnologies ha

sigut positiu i enriquidor.

M’enduc una satisfacció personal d’haver sigut capaç de liderar e implementar aquest projecte utilitzant

recursos i tècniques apreses al màster i a la meva vida laboral. Així mateix, m’enduc la sensació que el

que he aprés (i aprendre) durant la realització d’aquest projecte em serà molt útil en la meva trajectòria

professional.


80 / 92

Annex 1. Lliurables del projecte

Els lliurables del projecte son:

• Memòria del projecte, document actual.

• Artefacte de l’aplicació Web. Fitxer WAR ubicat al directori documentació\1.0.0 Beta\

booking-1.0.0.Beta.war

• Informes de la construcció del producte ubicats al directori documentació\1.0.0

Beta\site\index.html . Aquests informes inclouen, entre d’altres:

o Apidocs (javadoc) del codi font.

o Apidocs (javadoc) de les probes unitàries.

o Codi font en format API/HTML.

o Codi font de les probes unitàries en format API/HTML.

o Informes de cobertura de les probes unitàries.


o Informe de revisió de codi (checkstyle, PMD, CPD, findbugs).


81 / 92

Annex 2. Codi font

El codi font del projecte esta disponible en format HTML dins els informes de construcció al directori

documentació\1.0.0 Beta\site\xref\index.html .

Addicionalment el codi font dels test unitaris del projecte també esta disponible en format HTML dins

els informes de construcció al directori documentació\1.0.0 Beta\site\xref-test\index.html .


82 / 92

Annex 3. Captures de pantalla

A continuació es mostren les captures de pantalla de les seccions del sistema implementades.

Figura 34: Pantalla accés inicial


83 / 92

Figura 35: Pantalla formulari de registre


84 / 92

Figura 36: Pantalla accés usuari registrat


85 / 92

Figura 37: Pantalla reserva de pista o creació de partida


86 / 92

Figura 38: Pantalla confirmació reserva de pista


87 / 92

Figura 39: Pantalla accés usuari registrat amb pistes reservades


88 / 92

Figura 40: Pantalla sol·licitud canvi contrasenya


89 / 92

Figura 41: Pantalla processant sol·licitud canvi contrasenya


90 / 92

Figura 42: Pantalla confirmació de sol·licitud canvi contrasenya

Figura 43: Correu electrònic amb la confirmació de sol·licitud canvi contrasenya

Figura 44: Pantalla formulari de recuperació de contrasenya

Figura 45: Pantalla confirmació de canvi de contrasenya


91 / 92

Annex 4. Bibliografia

W3C - HTML, CSS i altres

http://w3.org

OWASP (Open Web Application Security Project)

https://www.owasp.org/

CVE (Common Vulnerability and Exposures)

https://cve.mitre.org/

Bootstrap

http://getbootstrap.com/

FullCalendar

http://fullcalendar.io/

Spring Framework

http://projects.spring.io/spring-framework/

Hibernate

http://hibernate.org/

JQuery

http://jquery.com/

Oracle JDK

http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

Tomcat

http://tomcat.apache.org/download-70.cgi

PostgreSQL

http://www.postgresql.org/download/

Luke Wroblewski (2011). Mobile First 6 edition. A Book Apart.

Ethan Marcotte (2011). Responsive Web Design. A Book Apart.


92 / 92

gestor de reserves de pistes onlineopenaccess.uoc.edu/webapps/o2/bitstream/10609/40147/5... · soc...

Documents