8ruedas, botiga virtual -...

Botiga Virtual 8Ruedas Memòria Laura Hernández Ballesta ETIG

Vicenç Font Sagrista

16 de Juny del 2014

[Escriba el título del documento] 2

Resum de l’aplicació

L’aplicació 8Ruedas és una botiga virtual desenvolupada amb llenguatge

Java en la tecnologia J2EE. El projecte esta estructurat dins el framework

Struts2 que segueix un patró MVC (Model-Vista-Controlador) amb

metodologia orientada a objectes.

Per el desenvolupament s’ha utilitzat el IDE Eclipse Java EE en la seva versió

Kepler que està adaptat a les necessitats de aquest tipus de projecte i ens

facilita la programació del mateix. El servidor utilitzat es el Tomcat 7.0 i la

base de dades MySQL 5.0. Per tant per tal de poder executar el projecte es

necessitarà tenir instal·lat el entorn JDK, el servidor Tomcat 7.0 i una base de

dades MySQL 5.0.

L’aplicació es una botiga virtual de equipament esportiu de hockey patins

basada en la empresa real 8Ruedas. La finalitat d’aquest projecte era poder

agrandir l’àrea de venta per mitja de les vendes per internet. El projecte

buscava una primera aproximació al producte final, creant així una estructura

base de la que es partirà per obtenir una botiga 100% funcional..

El resultat final és molt pròxim al que es buscava, on s’ha prioritzar tenir un

projecte funcional per sobre del disseny que es podrà desenvolupar més

tard. S’han assolit les funcionalitats desitjades casi a la totalitat.

Botiga virtual 8Ruedas Memòria Resum aplicació

Índex

RESUM DE L’APLICACIÓ 2

ÍNDEX 4

JUSTIFICACIÓ DEL PROJECTE 6

DESCRIPCIÓ DEL PROJECTE 7

FUNCIONALITATS DEL PROJECTE 7 FUNCIONALITATS BÀSIQUES 7 FUNCIONALITATS EXTRES 8 TECNOLOGIES EMPLEADES 8

OBJECTIUS 10

OBJECTIUS GENERALS 10 OBJECTIUS ESPECÍFICS 10

PLANIFICACIÓ 12

ANÀLISI 15

CONCEPTE OPERACIONAL 15 REQUISITS FUNCIONALS 15 REQUISITS TECNOLÒGICS 17 ROLS 19 CASOS D’ÚS 20 CASOS D’ÚS PER USUARI I CLIENT 21 CASOS D’ÚS PER ADMINISTRADOR 26 INTERFÍCIE GRÀFICA D’USUARI 35 FRONT-END 36 BACK-END 41

DISSENY 45

ARQUITECTURA DE L’APLICACIÓ 45 CAPA DE DADES 46 DISSENY DE LA PERSISTÈNCIA 46 CAPA DE LÒGICA DE NEGOCI 48 CAPA PRESENTACIÓ 49

CONCLUSIONS 51

GLOSARI 53

ANEXOS 55

MANUAL D’INSTAL·LACIÓ DE LA BOTIGA VIRTUAL 8RUEDAS 55

Botiga virtual 8Ruedas Memòria Index

Justificació del projecte

La idea del projecte neix de la necessitat d’ampliar el mercat de la

petita empresa de venta material d’hoquei patins. Fins el moment només

s’ha venut en el àmbit del club i rodalies, però últimament ens arriben

comandes des de la resta d’Espanya i Llatinoamèrica (bàsicament Colòmbia).

Les dificultats de facilitar la informació del catàleg i veure la possibilitat real

d’ampliar el mercat, em fan plantejar la idoneïtat de crear una botiga virtual

que faci arribar tota la informació allà on necessitem, així com facilitar el

procés de compra.

Donat que avui en dia la plataforma J2EE i els patrons de disseny

faciliten la implementació de les aplicació de manera ràpida y estructurada,

el TFC en el àmbit de J2EE es la ocasió idònia per crea la botiga on-line que

es requeria i alhora aprofundir en els conceptes de J2EE i el Framework

Struts 2 que facilitarà aquesta tasca. La intenció es crear una aplicació

extensible amb l’objectiu de crear ara uns bons ciments que després pugin

anar evolucionant amb les necessitats reals de l’aplicació, per això seguim un

model MVC que facilita els canvis posteriors.

Botiga virtual 8Ruedas Memòria II – Descripció del projecte

Descripció del projecte

El projecte escollit per el treball de fi de carrera en

l’àrea de J2EE és la creació d’una botiga virtual del

material d’hoquei patins. Aquest projecte té

l’objectiu ampliar el mercat d’una petita

empresa de material d’hoquei patins, 8Ruedas, que en un principi es basava

en ventes al socis d’un club en concret.

Funcionalitats del Projecte

A continuació es detallarà una primera idea del que seran les

funcionalitats de l’aplicació a desenvolupar tot i que aquestes s’especificaran

amb més detall en la fase d’anàlisis.

Per aquesta primera aproximació tindrem en conte per una banda les

funcionalitats bàsiques de l’aplicació ,que són aquelles que cobriran el

requisits mínims per considerar l’aplicació completa i funcional. Per tant en

les que en centrarem durant el projecte. I per altra banda un conjunt de

funcionalitats extres que es desitgen per l’aplicació però no contemplem

desenvolupar en un principi i que no afecten al funcionament bàsic de

l’aplicació.

Funcionalitats bàsiques

La botiga constarà de tres parts diferenciats depenent del usuari que l’utilitzi.

Dues destinades al client (usuari públic i usuari registrat) i un backend

destinat a l’administració de l’aplicació (Administrador):

Al àrea pública pot accedir qualsevol usuari sense necessitat de ningun pas

previ. Les funcionalitats d’aquesta part inclouran consultar el catàleg

classificats per categories, cercar productes i preparar una compra afegint el

productes al cistell de la compra, no obstant no podrà completar-la. L’usuari

públic tindrà també accés a la informació de l’empresa i de contacte.

Finalment podrà identificar-se a la pagina si ja està registrat i registrar-se si

no ho està.

L’usuari registrat tindrà unes funcionalitats exclusives a part de totes les

heretades del usuari públic o no registrat. En aquesta part es podrà realitzar

una compra al complert (inicialment només es contempla el pagament per

transferència), administrar les comandes pendents i les dades d’usuari i

sessió.

Finalment l’àrea d’administrador tindrà l’accés restringit al personal de

l’empresa. Es contemplen funcionalitats tals com: operacions CRUD de

productes, categories, revisió i manteniment de comandes, i fer totes les

modificacions necessàries per tal de tenir la botiga actualitzada.

Funcionalitats extres

Altres funcionalitats desitjades per l’aplicació contemplarien pagament amb

targeta i PayPal, oferir altres classificacions com per exemple per marca i

seguiment més detallat per part de l’usuari del estat de la comanda. Per altra

banda també en plantejaríem la possibilitat d’enviament de butlletins d’ofertes

als clients registrats.

Tecnologies empleades

Tota l’aplicació esta basada entorn de l’especificació J2EE del

llenguatge Java. En centrarem en un disseny que ens permeti una bona

reutilització de codi, per tat utilitzarem el patró MVC que separa clarament

la presentació i la lògica de negoci. Basant-nos en aquesta premissa

s’utilitzarà el framework Struts2 que segueix aquest patró tot oferint eines

Botiga virtual 8Ruedas Memòria II – Descripció del projecte

que faciliten i simplifiquen les tasques més comuns en el desenvolupament

d’aplicacions web.

Per la capa de presentació tal i com indica el Framework Struts2 es faran

servir pàgines JSP i es contempla la possibilitat d’utilitzar el plugin Tiles que

en facilita dotar l’aplicació d’un look&feel uniforme.

La persistència de dades es farà en una base de dades MySQL i ens

basarem en el framework Hibernate que facilita i simplifica el mapatge de

dades seguint un model DAO.

El nostre contenidor d’aplicacions serà Apache Tomcat i es planteja la

utilització de Maven per la gestió i la construcció del projecte ja que facilita

i automatitza el desplegament de l’aplicació

Finalment es treballarà sobre la versió per desenvolupadors JEE del IDE

Eclipse Keplerià.

Objectius

Objectius Generals

El principal objectiu del projecte es aprofundir en el coneixement ja

assolits en la carrera sobre el llenguatge Java i les Bases de Dades i adquirir

coneixements sobre la tecnologia J2EE mitjançant el anàlisis, disseny i

implementació d’una botiga virtual de material d’hoquei patins.

Per altra banda mentre es profunditza en les plataformes de e-

bussines es vol crear la base de una aplicació explotable comercialment. En

un principi prioritzant en el seu funcionament i estructura per sobre del

disseny estètic que es podrà modificar posteriorment.

Objectius Específics

Planificar i estructurar el desenvolupament del projecte mitjançant un

pla de treball amb la metodologia indicada.

Profunditzar els aspectes formals del procés de desenvolupament de

software posant-los a la pràctica en un cas concret.

Consolidar els coneixements del llenguatge Java i la programació

orientada a objectes obtinguts a la carrera realitzant una aplicació

empresarial.

Aprendre a realitzar una aplicació client/servidor amb arquitectura

J2EE (Servlets, JSP,..)

Botiga virtual 8Ruedas Memòria III – Objectius

Conèixer i utilitzar el framework Struts 2 com a model MVC

Adquirir coneixements en la utilització de l’eina d’ORM HIbernate.

Familiaritzar-me en la utilització de servidor d’aplicacions Tomcat.

Planificació

La planificació d’aquest projecte ve marcada per les 4 entregues

obligatòries que s’ha de seguir, les qual dividirem en 4 Fites, cada una amb

les seves pròpies tasques.

El següent quadre recull la informació d’aquestes Fites:

Tasca Inici Fi Descripció

Fita 1 28/02/2014 12/03/2014 Pla de treball

Fita 2 13/03/2014 17/04/2014 Anàlisi i disseny

Fita 3 18/04/2014 02/06/2014 Implementació

Fita 4 03/06/2014 16/06/2014 Memòria i presentació

A continuació es detallem les tasques de les fites anteriorment mencionades:

Fita 1: Pla de treball

Aquesta fita es descompon en les següents tasques:

Tria del projecte

Estudi documentació

Descripció del projecte

Planificació del projecte

Instal·lació programari

Fita 2: Anàlisi i disseny

Aquesta fase la dividirem en dues parts diferenciades, la d’anàlisi:

Especificació funcionalitats

Actors i Casos d’ús

Botiga virtual 8Ruedas Memòria IV – Planificació

Identificació classes de negoci.

I la de disseny:

Diagrama de classes

Diagrama seqüencia principals

Disseny persistència

Disseny arquitectura

Fita 3: Implementació

En aquesta fase en desenvoluparà l’aplicació pròpiament dita assolint les

següent tasques:

Implementació persistència

Codificació classes

Creació pàgines

Testing

Durant aquesta fase es contemplen varies entregues amb el tutor per tal de

fer un seguiment de la evolució del projecte i poder anar aplicant les

correccions necessàries.

Fita 4: Memòria i presentació

Finalment repassarem el projecte i redactarem la documentació final. Les

tasques seran les següents:

Repàs del projecte i correccions necessàries

Redacció memòria

Realització presentació

Botiga virtual 8Ruedas Memòria Pla de treball V-Anàlisi IV – Planificació

Anàlisi

Concepte Operacional

Requisits funcionals

Com es lògic l’aplicació tindrà les funcionalitats bàsiques de tota botiga

virtual, passem a detallares a continuació. Per una banda trobem les accions

pròpies de un negoci de venta al detall com són:

Catàleg de productes: El client podrà consultar el productes del

catàleg navegant per les diferents categories. Es contempla la

possibilitat d’afegir l’opció d’organitzar per marca, donat que hi ha

molt jugadors amb preferència específica per certes marques.

Cerca de productes: Existirà la funcionalitat de buscar directament el

producte desitjat per mitja de paraules clau. Un cop executada la

cerca es mostrarà un llistat del productes que compleixin els requisits

de la cerca.

Cistell de la compra: L’usuari podrà afegir qualsevol producte al

cistell de la compra per tal de compra-lo posteriorment. Un cop al

cistell els productes es podran eliminar o canviar-ne la quantitat i

formalitzar la compra.

Compra: Des de el cistell de la compra es podrà formalitzar la

compra tot indicant la direcció d’entrega (que pot ser diferent a la

d’usuari), en un principi el pagament es farà mitjançant transferència,

per tant s’enviarà un correu al usuari amb la proforma i les indicació

per realitzar el pagament. La comanda s’enviarà un cop rebut el

pagament.

Seguiment Comanda: Un cop efectuada una comanda, el client podrà

fer un seguiment del seu estat des del seu conte d’usuari.

Per altra banda trobem les funcionalitats d’usuari com a tal, que seran:

Registre: On el client podrà donar-se d’alta al sistema per tal de tenir

accés a totes les funcionalitats del front-end de l’aplicació, com

formalitzar la compra.

Login: Permet al usuari identificar-se al sistema.

Manteniment del compte: Des de aquí l’usuari podrà fer les

modificació que vulgui del compte així com donar-se de baixa.

Finalment trobem les funcionalitats de manteniment de l’aplicació, o back-

end, a les que només tindrà accés l’administrador de la mateixa. Aquí es

realitzarà el manteniment dels producte i categories i el seguiment de les

comandes tal i com es descriu a continuació:

Gestió productes: L’administrador podrà crear, modificar i eliminar els

productes per tal de tenir el catàleg sempre actualitzat.

Gestió de categories: També es permetrà el manteniment de

categories mitjançant la seva creació, modificació i eliminació. Cal tenir

en conte que per tal d’eliminar una categoria aquesta no podrà esta


lligada a ningun producte. Per tan, abans s’haurà de reassignar els

productes que contingui.

Seguiment de comandes: Des d’on es podrà consultar totes les

comandes així com actualitzar el seu estat. Per cada comanda

contemplarem 5 estats possibles. Quan s’inicia al ser formalitzada la

compra per el client (CREADA), un cop es rep el pagament (PAGADA)

moment en el que es procedeix al enviar-la (ENVIADA). Així mateix

qualsevol comanda pot ser anul·lada durant el procés per els motius

pertinents (ANULADA). Els següent diagrama mostra els estats:

Requisits Tecnològics

Per tal de facilitat la incorporació de noves funcionalitats o requeriments,

així com adaptar l’aplicació a canvis de tecnologia, utilitzarem una

arquitectura client-servidor de tres capes . La independència entre les capes

de presentació, lògica negoci i dades es idònia per aquest fi.

Tal i com s’observa al gràfic, els clients accediran a l’aplicació utilitzant un

navegador web el qual connectarà amb el servidor d’aplicacions utilitzant el

protocol HTTP.

Aquesta capa de presentació interactua amb la lògica de negoci mitjançant

el framework Struts 2. El servidor d’aplicacions Apache Tomcat constitueix la

capa de negoci. Aquest disposa de un contenidor web executa els objectes

de la plataforma J2EE que rep les peticions dels clients i retonen una

resposta en format HTML comprensible pels navegadors.

Finalment la capa de dades la forma el SGDB relacional MySQL i per el

mapeig de les seves taules utilitzàrem el framework Hibernate el qual també

resideix al contenidor web.

CAPA DE PRESENTACIÓ Client

CAPA DE NEGOCI Servidor Aplicacions

CAPA DE DADES Base de Dades


Rols

Un cop identificades les funcionalitats de l’aplicació trobem 3 actors

clarament diferenciats. El rols identificats són usuari, client(usuari registrat) i

administrador.

El usuari es qualsevol que utilitzant un navegador arribi a la nostre aplicació,

no s’ha identificat al sistema i només podrà utilitzar les funcionalitats

bàsiques de la part pública de l’aplicació. Les seves funcions són:

Consultar catàleg

Cerca producte

Simular compra

Registre

Login

El client o usuari registrat, està donat d’alta i identificat al sistema, té accés a

tota la part pública del software. Hereta totes les funcionalitats de el usuari i

a més a més podrà:

Confirmar compra

Manteniment compte d’usuari

Consultar comandes

Finalment, el administrador es el que té accés a tota la part privada de

l’aplicació ocupant-se del seu manteniment realitzant funcions com:

Gestió productes

Gestió categories

Seguiment de comandes

Casos d’ús


Casos d’ús per Usuari i Client

Alta usuari

Funcionalitat: Dona d’alta al client en el sistema.

Actors: Usuari

Paper dins del rol de l’actor: Necessari per accedir a les funcionalitats del

rol client.

Casos d’ús relacionats: Cap

Precondició: El client no existeix al sistema

Postcondició: El client està donat d’alta al sistema.

Flux principal:

L’usuari es vol registra al sistema

El sistema demana les dades necessàries al client.

S’envien les dades al sistema i es dona d’alta al usuari.

Flux alternatiu:

Si l’usuari ja està donat d’alta es mostra l’error.

Si falten camps obligatoris per completar es mostra error.

Si els password no coincideixen es mostra error.

Consulta producte

Funcionalitat: Es mostra la informació referent al producte seleccionat.

Actors: Usuari, client.

Paper dins del rol de l’actor: Necessari per comercialitzar el producte.

Casos d’ús relacionats: Cerca producte, Afegir producte.

Precondició: El producte existeix al sistema i ha estat cercat o consultat des

de el catàleg.

Postcondició: Es mostra tota la informació referent al producte.

Flux principal:

Es selecciona el producte, ja sigui des de el catàleg o cerca directa.

El sistema mostra la informació del producte.

Cerca producte

Funcionalitat: L’usuari fa una cerca de productes segons uns criteris clau.

Actors: Usuari, client

Paper dins del rol de l’actor: Necessari per visualitzar un producte a cercar.

Casos d’ús relacionats: Consulta producte.

Precondició: Cap.

Postcondició: Es mostra una llista dels productes que compleixen el

requisits indicats en la cerca.

Flux principal:

L’usuari realitza una cerca segons uns criteris.


El sistema mostra un llistat dels productes que compleixen el criteris

desitjats.

Flux alternatiu:

Si no es troba cap producte que compleixi els criteris de cerca es mostra el

missatge corresponent.

Consulta cistell

Funcionalitat: Mostra el cistell de la compra


Paper dins del rol de l’actor: Necessari per modificar productes del cistell i

confirmar compra.

Casos d’ús relacionats: Eliminar producte, Confirmar compra.

Precondició: Cap.

Postcondició: Es mostra el contingut del cistell de la compra.

Flux principal:

L’usuari selecciona la opció de consultar el cistell.

El sistema mostra el contingut del cistell de la compra.

Afegir producte

Funcionalitat: S’afegeix un producte al cistell de la compra


Paper dins del rol de l’actor: Necessari per comprar el producte.

Casos d’ús relacionats: Consulta producte.

Precondició: El producte existeix al sistema i s’ha mostrat prèviament la seva

informació.

Postcondició: El producte queda afegit al cistell de la compra.

Flux principal:

El usuari consulta un producte i decideix afegir-lo al cistell.

El usuari seleccionarà la quantitat i les característiques del producte.

El sistema afegeix el producte al cistell i en suma l’import.

Eliminar producte

Funcionalitat: Treu un producte del cistell de la compra.


Paper dins del rol de l’actor: Opcional per corregir errors de l’Usuari.

Casos d’ús relacionats: Consulta cistell.

Precondició: El usuari esta dins el cistell de la compra i aquest té productes

afegits.

Postcondició: El producte es treu del cistell de la compra.

Flux principal:

L’usuari consulta el cistell i selecciona un producte a treure.

El sistema elimina el producte del cistell i en descompta l’import.

Login

Funcionalitat: El client s’identifica al sistema.

Actors: Client

Paper dins del rol de l’actor: Necessari per identificar-se al sistema i poder

realitzar les funcionalitats reservades al client.

Casos d’ús relacionats: Confirmar compra, modificar compte, Baixa usuari,

Consultar comandes.

Precondició: El client esta donat d’alta al sistema.

Postcondició: S’inicia la sessió del client identificat al sistema.

Flux principal:

El client introdueix el usuari i la contrasenya.

El sistema inicia la sessió del usuari indicat.

Flux alternatiu:

El usuari o la contrasenya són incorrectes. Es mostra el missatge d’error.


Confirmar compra

Funcionalitat: El client confirma la compra i es crea la comanda.

Actors: Client


Casos d’ús relacionats: Login, Consultar cistell.

Precondició: El client està correctament identificat al sistema i té productes

al cistell.

Postcondició: El client a completat la comanda, se l’hi envia la proforma i es

buida el cistell.

Flux principal:

El client amb productes al cistell vol confirmar la compra.

El sistema crea la comanda al sistema i buida el cistell.

El sistema envia la proforma al client amb les indicacions per realitzar

el pagament.

Consulta comandes

Funcionalitat: El client consulta les comandes que ha efectuat.

Actors: Client.

Paper dins del rol de l’actor: Opcional per fer el seguiment de la comanda.

Casos d’ús relacionats: Login

Precondició: El client esta correctament identificat al sistema.

Postcondició: Es mostren les comandes del client i el seu estat.

Flux principal:

El client vol consultar les seves comandes.

El sistema mostra el llistat de les comandes del client.

Flux alternatiu:

No existeix cap comanda en curs es mostra el missatge corresponent.

Modificar usuari

Funcionalitat: El client modifica les seves dades d’usuari.

Actors: Client

Paper dins del rol de l’actor: Secundari per realitzar la compra però

necessari per mantenir la informació actualitzada.


Precondició: El client esta correctament identificat al sistema.

Postcondició: Les dades del usuari queden modificades.

Flux principal:

L’usuari selecciona l’opció de modificar les dades-

El sistema mostra el formulari de dades.

L’usuari les modifica i les guarda.

El sistema actualitza el client amb les noves dades proporcionades.

Flux alternatiu:

Si falten camps obligatoris per completar es mostra error.

Si els password no coincideixen es mostra error.

Casos d’ús per administrador

Login

Funcionalitat: L’administrador s’identifica al sistema per entrar al back-end.

Actors: Administrador


realitzar les funcionalitats reservades al administrador.

Casos d’ús relacionats: Alta Categoria, Alta Producte, Llistar Categoria,

Llistar Comandes, Llistar Clients

Precondició: L’administrador esta donat d’alta al sistema.

Postcondició: S’inicia la sessió del client identificat al sistema.

Flux principal:

L’administrador introdueix el usuari i la contrasenya.


El sistema inicia la sessió al back-end.

Flux alternatiu:

El usuari o la contrasenya són incorrectes. Es mostra el missatge d’error.

Casos d’ús sobre Producte i Categoria

Alta Categoria

Funcionalitat: L’administrador crea una nova categoria al sistema.


Paper dins del rol de l’actor: Necessari per tenir categories on classificar els

productes.


Precondició: L’usuari està identificat al sistema com administrador.

Postcondició: La categoria queda creada a la base de dades.

Flux principal:

L’administrador selecciona l’opció de crear categoria.

El sistema mostra el formulari per crear-la.

L’administrador completa la informació i crea la categoria.

Flux alternatiu:

Falta informació. Es mostra el missatge d’error.

Alta Producte

Funcionalitat: L’administrador crea un nou producte al sistema.


Paper dins del rol de l’actor: Necessari per tenir productes a la botiga.



Postcondició: El producte queda creada a la base de dades.

Flux principal:

L’administrador selecciona l’opció de crear producte.

El sistema mostra el formulari per crear-la.

L’administrador completa la informació i crea el producte.

Flux alternatiu:


Llistar Categories

Funcionalitat: Es mostra el llistat de totes les categories donades d’alta al

sistema.


Paper dins del rol de l’actor: Necessari per accedir a una categoria o els

seus productes.

Casos d’ús relacionats: Login, Mostrar categoria, Consultar categoria.


Postcondició: Es mostra el llistat de categories.

Flux principal:

L’administrador seleccionar llistar les categories.

El sistema mostra per pantalla el llistat de categories de la BBDD.

Consulta categoria

Funcionalitat: Mostra la categoria seleccionada



Paper dins del rol de l’actor: Necessari per actualitzar a una categoria o

accedir a els seus productes.

Casos d’ús relacionats: Llistar categories, Modificar categoria, Consulta

prodcute.

Precondició: L’administrador ha consultat el llistat de categories.

Postcondició: Es mostra la informació de la categoria.

Flux principal:

L’administrador selecciona una categoria de la llista.

El sistema mostra la informació de la categoria i els productes de la

mateixa.

Modificar Categoria

Funcionalitat: Modificar la informació d’una categoria.


Paper dins del rol de l’actor: Necessari per mantenir actualitzada una

categoria.

Casos d’ús relacionats: Mostrar categoria

Precondició: El sistema mostra una categoria

Postcondició: La categoria s’actualitza al sistema.

Flux principal:

L’administrador consulta una categoria i la vol modificar.

El sistema mostra el formulari.

L’administrador fa el canvis pertinents i guarda.

El sistema guarda la categoria modificada.

Flux alternatiu:


Consulta Producte

Funcionalitat: Mostra la informació del producte seleccionat


Paper dins del rol de l’actor: Necessari per posteriors accions amb el

producte.

Casos d’ús relacionats: Mostrar categoria, Modificar producte.

Precondició: L’administrador ha consultat una categoria de productes.

Postcondició: Es mostra la informació del producte.

Flux principal:

L’administrador selecciona una producte de la llista.

El sistema mostra la informació del producte.

Modificar Producte

Funcionalitat: Modificar la informació d’un producte.


Paper dins del rol de l’actor: Necessari per mantenir actualitzat el producte.

Casos d’ús relacionats: Mostrar producte.

Precondició: El sistema mostra un producte.

Postcondició: El producte s’actualitza al sistema.

Flux principal:

L’administrador consulta un producte i el vol modificar.



El sistema guarda el producte modificat.

Flux alternatiu:


Casos d’ús sobre Comanda


Llistar comandes

Funcionalitat: Es mostra el llistat de les comandes pendents.


Paper dins del rol de l’actor: Necessari per accedir a una comanda.

Casos d’ús relacionats: Login, Mostrar comanda.


Postcondició: Es mostra el llistat de comandes.

Flux principal:

L’administrador seleccionar llistar comandes.

El sistema mostra per pantalla el llistat de comandes pendents.

Consulta comanda

Funcionalitat: Mostra la comanda seleccionada.


Paper dins del rol de l’actor: Necessari per interactuar amb la comanda.

Casos d’ús relacionats: Llistar comandes, Modificar comanda, Anul·lar

comanda, Notificar cobrament, Notificar enviament.

Precondició: L’administrador ha consultat el llistat de comandes.

Postcondició: Es mostra la informació de la comada.

Flux principal:

L’administrador selecciona una comanda de la llista.

El sistema mostra la informació de la comanda.

Modificar comanda

Funcionalitat: L’administrador modifica les dades (no referents al estat) de

una comanda existent.


Paper dins del rol de l’actor: Necessari per mantenir una comanda

actualitzada.

Casos d’ús relacionats: Consulta comanda.

Precondició: L’administrador ha consultat la comanda a modificar.

Postcondició: Es modifiquen les dades de la comanda a la BBDD.

Flux principal:

L’administrador consulta una comanda i la vol modificar.



El sistema guarda la comanda modificat.

Notificar enviament

Funcionalitat: Canvia l’estat de la comanda a enviada.


Paper dins del rol de l’actor: Necessari per tenir el flux de la comanda

actualitzat.


Precondició: L’administrador ha consultat el detall de una comanda i la

comanda esta en estat cobrada.

Postcondició: La comanda passa estat enviada i s’ha afegit el localitzador

del enviament a la BBDD.

Flux principal:

L’administrador consulta una comanda i la vol modificar l’estat.


Es notifica l’enviament.

EL sistema canvia l’estat de la comanda i afegeix el localitzador.

Notificar cobrament

Funcionalitat: Canvia l’estat de la comanda a cobrada.



actualitzat.


Precondició: L’administrador ha consultat el detall de una comanda i la

comanda esta en estat creada.

Postcondició: La comanda passa estat cobrada a la BBDD.

Flux principal:

L’administrador consulta una comanda i la vol modificar l’estat.

Es notifica l’enviament.

EL sistema canvia l’estat de la comanda.

Anul·lar comanda

Funcionalitat: Anul·la una comanda.



actualitzat.

Casos d’ús relacionats: Mostrar comanda.

Precondició: El sistema mostra una comanda i el estat de la comanda es

creada o cobrada.

Postcondició: La comanda s’anul·la.

Flux principal:

L’administrador consulta una comanda i la vol anular.

El sistema anul·la la comanda.

Flux alternatiu:

L’ha comanda ja ha estat enviada.

Es mostra el missatge indicant que ja no es port anular la comanda.

Casos d’ús sobre Client

Llistar clients

Funcionalitat: Es mostra el llistat dels clients existents al sistema.


Paper dins del rol de l’actor: Necessari per accedir a un client.

Casos d’ús relacionats: Login, Consulta Client.


Postcondició: Es mostra el llistat de clients.

Flux principal:

L’administrador selecciona llistar clients.

El sistema mostra per pantalla el llistat de clients.

Consulta clients

Funcionalitat: Mostra el client seleccionat.


Paper dins del rol de l’actor: Necessari per poder interactuar amb el client.

Casos d’ús relacionats: Llistar clients.

Precondició: L’administrador ha consultat el llistat de clients.


Postcondició: Es mostra la informació del client.

Flux principal:

L’administrador selecciona una client de la llista.

El sistema mostra la informació del client.

Modificar client

Funcionalitat: L’administrador modifica les dades de un client existent.


Paper dins del rol de l’actor: Necessari per mantenir un client actualitzat.

Casos d’ús relacionats: Consulta clients.

Precondició: L’administrador ha consultat el clienta modificar.

Postcondició: Es modifiquen les dades de la comanda a la BBDD.

Flux principal:

L’administrador consulta una comanda i la vol modificar.



El sistema guarda el client modificat.

Interfície gràfica d’usuari

La interfície gràfica de usuari seguirà l’estructura bàsica de la majoria de les

botigues virtuals. Per una banda tindrà una capçalera i barres laterals que es

mantenen a tota l’aplicació donant unitat a la mateixa, i per l’altre un espai

central on presentaran les planes de cada acció.

Ja que es preveu que en un futur sigui una botiga 100% funcional, es

presenten els prototips de les pantalles amb la interfície bastant completa.

No obstant donada la durada del projecte no es preveu arribar a realitzar-la

al complert, sinó que es centrarà en representar totes les funcionalitats sense

prioritzar amb l’estil.

A continuació es mostra les pantalles principals implicades en el flux normal

de navegació en l’aplicació.

Front-end

Pantalla d’inici

En la pantalla d’inici ja s’observa la estructura base de la part pública. Una

barra de navegació superior amb les diferents seccions de la pàgina i a la

part superior esquerra el login i registre d’usuari. A l’esquerra trobem el

menú de navegació del catàleg, sempre present donada la naturalesa de


l’aplicació. Finalment una barra dreta on trobem la presencia en xarxes

socials primordial avui en dia i posteriorment el cistell de la compra. A la

part central només entrar trobarem les diferents ofertes i notícies.

Pantalla Categoria

En aquesta pantalla es mostren tots el productes de una categoria. Veiem

que es manté la estructura que s’ha comentat i s’ha afegit la previsualització

del cistell de la compra a la barra dreta. Per altra banda, també destacar que

el usuari ja esta identificat al sistema, per tant, es dona la benvinguda i les

opció de modificar la conta d’usuari i veure les comandes pendents.

Consulta producte


Aquest es el prototip de la pantalla de un producte en concret. Es mostra la

informació del producte així com la opció de afegir-lo al cistell. A la part

inferior també es mostraran els productes seleccionats. Destacar que a la

part superior del centre sempre apareix la barra de navegació que indica on

et trobes i permet navegar per les pantalles anteriors.

Cistell de la compra

En aquesta pantalla es mostren els productes afegits al cistell, amb les

quantitats i el preu. Per cada producte està la opció per treure’l del cistell. Es

mostra un subtotal del preu i es dona la opció de escollir la forma de

pagament i enviament, el que actualitzarà el preu. Un cop es vol comprar la

comanda, tal i com es mostra al esquema superior, es passaria a introduir les

dades d’entrega, la confirmació de la comanda i el pagament.


Back-end

Llistat categories

En la part privada hi ha un menú lateral amb les opcions de les 4 àrees

administrables. Un altre canvi es la mostra de la data i hora actual útil a tenir

present en la gestió de comandes. EN aquesta pantalla en concret veiem el

llistat de categories amb el qual podem interactuar fent-hi click.

Alta producte


Seguint l’estructura del Back-End es mostra la pantalla de alta de producte

amb el formulari on introduirem tota la informació per crear un nou

producte al catàleg. Les talles i els color s’han d’introduir en un format

especial, per això trobem dos botons d’ajuda que en especificaran les pautes

seguir.

Botiga virtual 8Ruedas Memòria Pla de treball VI-Disseny IV – Planificació

Disseny

Arquitectura de l’aplicació

Tal i com s’ha comentat anteriorment l’aplicació seguirà una estructura de

tres capes amb dos frameworks principals que són Struts2 i Hibernate que

faran de frontera entre elles.

La part principal de l’aplicació resideix a la capa de lògica de negoci.

Aquesta conté unes classes principals que en forment el nucli que

representen les entitats principals de l’aplicació, com per exemple client,

producte, comanda o categoria. Aquestes classes són les anomenades

classes entitat i requeriran estar emmagatzemades a la BBDD. També trobem

una sèrie de classes no persistent però fortament lligades a la lògica de

negoci que dependran de la sessió d’usuari com el cistell de la compra,

identificades com a classes de sessió.

De la necessitat de emmagatzemar de forma persistent les classes entitat es

desprèn que cada una d’elles tindrà que tenir accés a la BBDD. Això ens crea

classes bastant pesades i molt extenses ja que contenen la estructura de

dades bàsica, les regles de negoci i la part d’accés a la BBDD. Com són que

són les classes principals hem de tenir en conte que es transmeten

freqüentment entre les capes, tant a la de dades com a la de presentació, i

el fet de ser tant no es òptim.

Per tal de solucionar aquest fet i alhora minimitzar les repercussió davant de

canvis com per exemple de BBDD, s’aplicaran els patrons de disseny

DAO(Data Acces Object) i TO(Tranfer Object). El que aconseguim amb

aquests patrons es tres classes lleugeres amb un objectiu específic. Cada

classe entitat te per una banda la seva classe DAO en la que es delega

l’accés a al base de dades. Per l’altre la seva classe TO que conté l’estructura

bàsica de dades amb atributs privats i el getters i setters corresponents, una

estructura lleugera que és l’objecte d’intercanvi entre classes i capes. I

finalment la classe entitat en si mateixa que contindrà totes les regles de

negoci.

Aquesta capa de lògica de negoci es comunica amb les altres dues amb

l’ajuda dels dos frameworks mencionat. Struts 2 fa de frontera amb la capa

de presentació i Hibernate amb la capa de dades.

Analitzant més a fons Struts2 i la seva funció trobem que es una

implementació del patró MVC per la plataforma J2EE on la vista la formen

les planes JSP, el model les classes Action i el controlador són els Servlets.

Per tant Struts 2 mapeja les planes JSP amb les classe Action que utilitzen

les classes d’entitat i sessió.

Per altra banda el framework Hibernate s’encarrega de mapejat les taules de

la base de dades amb les classes adequades automatitzant les tasques com

gestió de connexions i conversió de tipus de dades. Seguint els patrons

escollits es du a terme únicament a les classes DAO i les classes mapejades

són les TO.

Capa de dades

Disseny de la persistència

Com ja tenim identificades les entitats de l’aplicació, passem a dissenyar la

persistència d’aquelles que ho necessitin. Dissenyarem la persistència segons

el següent diagrama Entitat-Relació:


A continuació enumerem les diferents entitats i relacions de model

relacional.

PERSONA(NIF, nom, cognom1, cognom2)

CLIENT(id, NIF, telèfon, adreça, mail, password, activat)

{adreça} clau foranea de ADREÇA(id)

ADREÇA(id, direcció, població, província, cp, país)

CATEGORIA(id, nom, categoria_pare)

{categoria_pare} clau foranea de CATEGORIA(id)

PRODUCTE(id, nom, categoria, marca, descripció, preu)

{categoria} clau foranea de CATEGORIA(id)

COMANDA(id, estat, creació, cobrament, enviament, client, destinatari, destí,

import, localitzador)

{client} clau foranea de CLIENT(id)

{destinatari} clau foranea de PERSONA(NIF)

{destí} clau foranea de ADREÇA(id)

PRODUCTE_COMANDA(comanda, producte, quantitat)

{comanda} clau foranea de COMANDA(id)

{producte} clau foranea de PRODUCTE(id)

Capa de lògica de negoci

Com ja s’ha mencionat a la arquitectura de l’aplicació existeixen dos tipus de

classes les de entitat (persistents) i les de sessió. A continuació es mostra un

diagrama simplificat de les classes de lògica de negoci i les seves relacions.

Destacar que tot i que cada classe entitat te la seva DAO i TO, no es

mostren al diagrama per claredat.


Capa presentació

Seguint el esquema del framework Struts2 la capa presentació esta formada

per les Planes JSP que són mapejades amb les classes de negoci mitjançant

un arxiu XML.

Com s’observa en els prototips de les interfícies d’usuari, tota l’aplicació

segueix una estructura estàndard, el que ens permet fer servir el framework

Tiles que ens facilitarà aquesta feina. Tiles en permet definir una capçalera,

un menú, un peu de pagina per tal de tenir la estructura desitjada

Botiga virtual 8Ruedas Memòria Pla de treball VII-Conclusions IV – Planificació

Conclusions

Aquest apartat descriurà la valoració final de l’estudiant comparant la idea

inicial amb el resultat final:

• La idea inicial era bastant simple, deixant obertes múltiples possibilitats de

treball. Això es va fer així degut a que no es tenia constància del cost

temporal que podia portar fer una aplicació d’aquest estil. A mida que

s’anava dissenyant es podia veure aproximadament el cost que tindria.

• Un cop acabat el projecte crec que he encertat de ple en la mida i qualitat

de la feina. Potser he tingut un parell de setmanes bastant intensives,

però també es compensa amb la relaxació inicial.

• Tot i que le producte final no es tan robust com m’agradaria, crec que he

assolit un bon funcionament de l’aplicació i una base solida amb la

que treballar

• És un producte que, tal com està dissenyat, es pot ampliar de moltes

maneres.

• La temporització no l’he pogut seguir per factor externs no obstant crec

que un una situació normal era una bona aproximació

• S’ha aconseguit crear tots els casos d’ús previstos.

• Tota l’aplicació té un control d’errors i excepcions que fa que no hi hagi

manera de fer-la “petar”.

• En aquest cas parlem d’una botiga de material esportiu d’hoquei, però

l’estructura d’aquesta aplicació fa que es pugui aprofitar molt

fàcilment per qualsevol tipus de negoci a internet.

• Estic molt contenta perquè crec que he realitzat una molt bona feina i he

aprés molt sobre Java i J2EE.

Botiga virtual 8Ruedas Memòria Pla de treball VIII-Glosari IV – Planificació

Glosari

• Java: és un llenguatge de programació orientat a objectes creat per

Sun Microsystems, Inc. que permet crear programes que funcionen a

qualsevol tipus d’ordinador i sistema operatiu. S’usa per crear

programes especials anomenats applets, que poden ser incorporats a

pàgines web per fer-les interactives. Les aplicacions Java requereixen

que el navegador utilitzat sigui compatible amb Java.

• J2EE: J2EE són les sigles de Java 2 Enterprise Edition que és l’edició

empresarial del paquet Java creat i distribuït per Sun Microsystems.

Comprenen un conjunt d’especificacions i funcionalitats orientades al

desenvolupament d’aplicacions empresarials. A causa de que J2EE no

deixa de ser un estàndard, existeixen altres productes creats a partir

d’ella encara que no exclusivament.

• JDK: Java Development Kit. És el paquet de desenvolupament per

Java, que conté tot el necessari per utilitzar aquest llenguatge.

• Eclipse: programa per a desenvolupar aplicacions amb Java (i altres).

• Tomcat: (també anomenat Jakarta Tomcat o Apache Tomcat) funciona

com un contenidor de servlets creats sota el projecte Jakarta a

l’Apache Software Foundation. Tomcat implementa les especificacions

dels servlets i de JavaServer Pages (JSP) de Sun Microsystems. Es

considera un servidor d’aplicacions.

• MySQL: sistema de gestió de base de dades, habitualment utilitzada

en entorn Linux i amb programació PHP. Permet, per exemple, des

de la creació de qualsevol sistema de registre d’usuaris, fins les

funcionalitats més avançades d’un projecte web.

Botiga virtual 8Ruedas Memòria Pla de treball IX-Anexos IV – Planificació

Anexos

Manual d’instal·lació de la botiga virtual 8Ruedas

• Instal·lar JDK 5.0.

• Instal·lar Apache Tomcat 7.0.

• Configurar Tomcat amb l’usuari i password que es vulgui i posar com a

port el 8080.

• Instal·lar MySQL Server 5.0.

• Instal·lar MySQL Workbench.

• Executar al Workbrench 8RuedasDB.sql

• Configurar l’accés a la base de dades amb els següents valors:

Usuari: root

Password: KOryCNMj

9. Arranca Tomcat.

10.Obre Internet Explorer i posa l’adreça següent:

http://localhost:8080/manager.html

11. Carrega el fitxer 8RuedasWeb.war com a nova aplicació.

12. Obre Internet Explorer i posa l’adreça següent:

http://localhost:8080/8RuedasWeb

13. L’aplicació ja hauria d’estar instal·lada!!!

Notes: - Per poder començar a provar les funcionalitats a l’aplicació d’un

administrador cal loginar-se amb:

http://localhost:8080/8RuedasWeb

- Usuari: 8Ruedas

- Password: admin

Per navegar com a client

- Usuari: [email protected]

- Password: 12345

mailto:[email protected]

8ruedas, botiga virtual -...

Documents