projecte botiga virtual 7notes - uocopenaccess.uoc.edu/webapps/o2/bitstream/10609/11524/7/... ·...

Autor Joaquín Herrada Valera Consultor Albert Grau Perisé 16 de Gener de 2012

TREBALL FI DE CARRERA Àrea J2EE

Projecte botiga virtual 7notes

2 Treball Fi de Carrera – Àrea J2EE Projecte botiga virtual 7notes

Curs 2011/12 - Tardor Joaquín Herrada Valera

1. Introducció

Justificació

Objectius

Planificació

Productes obtinguts

2. Anàlisi

Actors principals

Casos d’ús

Prototip

3. Disseny

Disseny orientat a objectes

Disseny de la base de dades

Arquitectura

Continguts

4. Implementació

Tecnologies

Bastiments i patrons de disseny

Imatges de l’aplicació

5. Conclusions



Justificació

Motiu de la tria de l’àrea J2EE: obeeix a raons de superació personal i professional. Aprendre a utilitzar noves tecnologies des de zero, dins d’un entorn acadèmic, és una gran oportunitat i una motivació addicional per assumir el repte.

Descripció del projecte: es tracta d’una botiga virtual de discos i DVD, anomenada 7notes, on s’ofereixen els productes del catàleg existent i els usuaris poden visualitzar-los amb les eines de consulta disponibles, per passar a realitzar les comandes adients en cas que els vulguin adquirir.

Tipologia del programari a desenvolupar: aplicacions de comerç electrònic.

Introducció (1/4)



Objectius

Conèixer i aprofundir en les tecnologies J2EE.

Adquirir experiència en la programació en llenguatge Java.

Conèixer i aplicar els patrons de disseny.

Utilització de bastiments aplicables a les tecnologies J2EE.

Conèixer les característiques dels servidors web.

Treballar amb un model de dades orientat a objectes i conèixer com s’emmagatzema en bases de dades relacionals.

Introducció (2/4)



Planificació

Plantejament segons metodologia de cicle de vida en cascada

Fites parcials:

• PAC1: 05/10/11

• PAC2: 10/11/11

• PAC3: 20/12/11

• Final: 16/01/12

Riscos:

• Manca d’experiència en tecnologies Java

Introducció (3/4)



Productes obtinguts

Introducció (4/4)

Memòria Presentació Producte (aplicació web)



Actors :

Usuari convidat: Usuari anònim que pot realitzar consultes dels productes existents i veure les notícies o anuncis publicats.

Usuari client: Usuari convidat que decideix comprar productes i que es vincula comercialment amb l’empresa mitjançant el registre com a client, que atorga accés a l’àrea de clients de l’aplicació.

Administrador: Usuari empleat de l’empresa propietària dels productes. La seva funció principal és la del manteniment del catàleg de productes, atendre les consultes dels usuaris i s’encarrega de les tasques administratives derivades de la facturació als clients.

Anàlisi (1/3)



Casos d’ús

Anàlisi (2/3)



Prototip:

Disseny centrat en l’usuari

Complet (flux d’interacció)

Operatiu (HTML)

Visualment atractiu

Anàlisi (3/3)

Inici

Navegar Catàleg CistellaÀrea

clients

NotíciesTaulell de notícies

Ofertes

Contacte

Informació General

Formularicorrecte

Error

1d

Resultats

Cerca Avançada

Resultats

Cerca alfabètica

Historial

En cursComandes

Comandes

Dades personals

Dadesconfirmades

Afegir / Treure

1c

Realitzar compra

1a(1b)

Llegenda

(1a) Si l’usuari està registrat i connectat podrà accedir a l’àrea privada corresponent (enllaça amb figura 2).

(1b) Si l’usuari està connectat podrà desconnectar-se

(1c) Si l’usuari accepta les condicions i l’import podrà formalitzar la compra

(1d) Si el formulari és correcte, s’envia. En cas contrari es mostra un missatge d’error

(1e) Condició: cal haver seleccionat un article per afegir o treure de la cistella

Flux d’interacció: Botiga virtual de discos (7notesSHOP)

Àrea Administrador

Manteniment

Consultar

1e

Estadístiques

Facturació



Disseny (1/4)

Disseny orientat a objectes

Diagrames UML

Diagrama de classes

Diagrames d’estats

Diagrames d’activitats Diagrames de seqüència



Disseny (2/4)

Base de dades

Esquema entitat – relació

USER

ADMIN

CUSTOMER

GUEST

QUESTION

IMAGE

ITEM

ALBUM

DVD

ARTIST

COMMENT

GENRE

SONG

TRACK

ORDER

ORDERLINE

dateMAKES

HAS

CONTAINS

CONTAINS

ADDS

POSTS

D, T

texttext

quantity

VIDEO

MP3

PERFORMS

PERFORMS

BELONGS

SHOWS

D, T

N

N

N

N

1

M1

1

N

N1

1

1

1

1

1

N

1

N

1

1

N M

OWNS

Model teòric Realització



Disseny (3/4)

Arquitectura

Utilització del patró Model – Vista – Controlador

Arquitectura de quatre capes:

• Capa client: navegador web

• Capa servidor web: bastiment JavaServer Faces 2.0 i Facelets

• Capa servidor d’aplicacions: JavaBeans i persistència amb bastiment Hibernate (sota patró Data Access Objects)

• Capa servidor base de dades: accés JDBC



Disseny (4/4)

Esquema de l’arquitectura



Tecnologies utilitzades

Llenguatge de programació: Java (1.6.0_26).

Java EE Software Development Kit versió 2.

Entorn de desenvolupament: NetBeans 7.0.

Servidor d’aplicacions web: Glassfish 3.1.1.

Gestor de bases de dades: Informix 10.0.

Client web: Navegador Mozilla Firefox versió 7.0.1.

Controls de presentació PrimeFaces 2.2.1 (implementació de JSF).

Implementació (1/4)



Bastiments i patrons de disseny utilitzats:

Java Server Faces 2.0: Facilita implementar el patró MVC, doncs està dissenyat sota aquest paradigma, que separa les diferent parts:

• Model: Mitjançant Managed Beans per accedir als objectes de negoci.

• Vista: Consisteix en pàgines JSF, creades amb tecnologia Facelets.

• Controlador: Proporciona un servei FacesServlet que centralitza totes les peticions del client sense haver d’afegir codi addicional.

Hibernate: S’encarrega del model de persistència entre els objectes i la base de dades, fent que sigui transparent pel programador. S’utilitza una única sessió per connexió emprant el patró Singleton i es combina amb el patró DAO per accedir a les dades.




Javaserver Faces: fases del cicle de vida de procés de peticions d’usuari


Crear o restaurar vista

Aplicar valors d’usuari

Validar valors

Actualitzar model

Buscar nova vista (si cal)

Mostrar vista

Demanar pàgina

Visualitzar pàgina

Facelets: esquema de construcció de les pàgines, basat en plantilles

top.xhtml TOP

MENU

CONTENT menuGuest.xhtml

contentCatalog.xhtml baseLayout.xhtml

Plantilles client Plantilla principal Pàgines web

index.xhtml



Imatges de l’aplicació




Una experiència molt enriquidora perquè es tracta de la primera aplicació amb tecnologies J2EE que es desenvolupa i el grau d’aprenentatge adquirit ha estat a l’alçada de les expectatives.

Sorprèn la quantitat de possibilitats disponibles per desenvolupar la mateixa aplicació, que fa que la tria sigui també una habilitat que cal aprendre amb el pas del temps i l’experiència adquirida.

Fer una bona planificació i seguir-la ha esdevingut essencial per aconseguir els objectius marcats. Un altre factor decisiu és el treball constant al llarg del curs doncs els esforços dedicats, en forma d’hores de treball, han estat quantiosos.

En resum, el desenvolupament del projecte TFC amb tecnologies J2EE ha significat un repte molt interessant i constitueix un sòlid punt de partida per afrontar futurs projectes dins d’aquesta àrea.

Conclusions

Autor Joaquín Herrada Valera Consultor Albert Grau Perisé 16 de Gener de 2012

TREBALL FI DE CARRERA Àrea J2EE

Projecte botiga virtual 7notes

Gràcies per la vostra atenció

projecte botiga virtual 7notes - uocopenaccess.uoc.edu/webapps/o2/bitstream/10609/11524/7/... ·...

Documents