Grupo 1

Trần Quang Quí-CE160195

Trương Trọng Thiết-CE160161
Lê Phát Quý-CE160306
Võ Lập Quân-CE161081
Profesor: Lương Hoàng Hướng

1
 TABLE OF CONTENT
I. Resumen del proyecto
1.1. Introducción
1.2. Project background
II. Modelo de desarrollo de software
III. Diagramas de diseño
3.1. Base de datos

3.2. Diagrama de Casos de Uso

IV. Funciones del sistema

4.1. Regístrate
4.2. Iniciar sesión

4.3. Cerrar sesión

4.4. Función del cliente

4.5. Función de administración

V. Tabla de casos de prueba

VI. Metodologías de Gestión

VII. Interfaz web
VIII. Tabla de división del trabajo

2
I. Descripción general del proyecto

1.1. Introduction
- Project name: Dietary supplement shop
- Conferencia y miembros:
FULL NAME ROL
Luong Hoang Huong Profesor
Trần Quang Quí Miembro
Trương Trọng Thiết Miembro
Lê Phát Quý Member
Võ Lập Quân Miembro

1.2. Antecedentes del proyecto

Con la necesidad de una vida saludable y un buen cuerpo, la gente está

cada vez más se utilizarán suplementos dietéticos. La compra de
los productos también son una dificultad para los usuarios, ya que algunos lugares no los proporcionan

productos. Entendiendo esa necesidad y dificultad, decidimos desarrollar

este proyecto, un sitio web que vende suplementos dietéticos.

II. Modelo de desarrollo de software

El patrón de diseño MVC es un excelente método para crear aplicaciones web.

aplicaciones. Varias empresas ahora están optando por el desarrollo de

tales aplicaciones basadas en la arquitectura MVC.
Estamos utilizando el modelo MVC para desarrollar este sitio web debido a:

+ Organiza aplicaciones web de gran tamaño

3
 Fácilmente modificable
Proceso de Desarrollo Más Rápido
+ Planificación y mantenimiento fáciles

+ Devuelve datos sin formato

+ Soporta TTD (desarrollo guiado por pruebas)
+ Vistas Múltiples

III. Diagramas de Diseño

3.1. Base de datos

* Diagrama

* DER

* Datos

4
5
 3.2. Diagrama de casos de uso

IV. Funciones del Sistema

4.1. Registrarse
- Permitir a los usuarios registrarse para una nueva cuenta con información como:

username, password, fullname, phone, gender, address. A new account

¿El tipo de cuenta por defecto será cliente?
4.2. Login

6
 - El usuario y el administrador deben iniciar sesión para acceder al sitio web. Si el

el tipo de cuenta es Admin, se moverá a la página de inicio del administrador. En el

por otro lado, se moverá a la página de inicio del cliente si la cuenta

iniciar sesión es un cliente.

Además, si los usuarios olvidaron su contraseña, pueden llenar el formulario

en el botón de olvidar contraseña. Se enviará al correo de admin después de eso
el administrador puede verificar la respuesta con la información de su cuenta y si es
determinados, el administrador se pondrá en contacto por mensaje de texto, correo electrónico o llamada telefónica para

da su contraseña de nuevo.
4.3. Cerrar sesión

Al presionar el botón de cerrar sesión en ambas páginas de inicio, se ...

ser trasladado a la página de inicio de sesión.

4.4. Función del cliente

- Contacto: El cliente puede contactar con el administrador a través del formulario en el

botón de contacto.
- Ver producto: Incluir ver todos los productos, ver productos por tipo
cuando se presionan algunos botones representan el tipo de producto y ver el producto

detail when press in the name of product.

- Agregar al carrito: El cliente puede agregar productos al carrito de 2 maneras.

Firstly, press add to cart button in home page after each product.
En segundo lugar, al presionar añadir al carrito después de la información del producto en vista

página de detalles del producto. Una cosa conveniente es que el cliente puede editar el

quantity of product they want to add in product detail page that in the
la página de inicio no puede. El cliente puede ver el carrito incluyendo el producto,

su cantidad y el precio total que deben pagar.

- Verificar: El cliente presiona el botón de pago en la página de inicio para

verificar para ir a la página de pago En esta página el cliente tiene que completar
información como nombre de usuario, número de teléfono, correo electrónico, nombre completo y envío

7
dirección. Al presionar ordenar, su información será enviada al administrador para
confirmar pedido.

- Editar información: El cliente puede editar su información cuando

presionando en editar información. Pueden editar el nombre completo, la contraseña,... pero no pueden

edita el nombre de usuario.

4.5. Función de administrador

- La página de inicio del administrador puede mostrar todos los productos y el administrador puede

ver el detalle de cierto producto.

- Ver formulario de contacto: El administrador puede ver los formularios de contacto completados.

son enviados por los clientes. Incluye un formulario de contacto y recuperar contraseña

forma.
- Account management: The admin can see all account and set
permiso de cuenta en administrador o cliente y eliminarlo. Otra cuenta
está establecido en administrador también puede establecer permisos y eliminar la cuenta del cliente.

La cuenta principal de administrador no se puede eliminar.

- Gestión de productos: Tener una página puede mostrar un resumen de todo

producto. El producto se puede eliminar. El administrador puede agregar nuevos productos y

editar información del producto. Al editar la información del producto, el ID del producto

no se puede editar.
- Gestión de pedidos: Mostrará todos los pedidos y al presionar
botón de vista, el administrador puede ver los detalles del pedido de un cierto pedido que incluye:

what products are ordered, its quantity, price, total price,…

Non-Function: checking account exist, password and account
formato,…

V. Tabla de Casos de Prueba

8
ID Func Procedimiento Prueba Esperado Pruebas
Datos y Prueba Result Result
Paso
01 Iniciar sesiónVerificar: Color Escribe Muestra el Pase
font, type información mismo con
textbox, button, iniciar sesión, presionar en diseño
página vinculada,… olvidé la contraseña
regístrate.

02 Login Validación Escribe algo Mostrar a la derecha Pasa

diferente anuncio
información
03 Regístrate Verificar: color Tipo Muestra el Pasa
font , type información lo mismo con
textbox, button, registrarse diseño
…
04 Registrarse Validación & Escribe algo Mostrar a la derecha Pase
guardar datos en diferente anuncio
base de datos información & puede guardar

registro en la base de datos

05 Pantalla para Ver pantalla Presiona cierto Mostrar el Pase

cliente producto, producto botón mismo con
detail, display diseño
producto por tipo
06 Añadir al carrito Añadiendo producto Agregar producto a Agregar Pasar
en el carrito, revisar carro exitoso &
calcular resultado precio justo
07 Revisar Ver pantalla Presiona pagar Mostrar todo Pasar
page, color, type botón los productos son

cuadro de texto añadido al carrito

9
 button,.., su cantidad
calcular el total y precio total
price
08 Editar Verificar: color Enviar edición Editar Pasar
Información font, type información exitoso.
cuenta textbox, button, Los nuevos datos pueden

información que guardar en

can/can not edit base de datos
09 Pantalla para Ver muestra Presiona cierta Mostrar el Pasar
Administrador
producto, producto botón igual que
detail, display diseño
producto por tipo
10 Mover a Ver ruta similar Presiona cierto Puede mudarse a Pasar
página vinculada en el botón botón formulario de google

producto
gestión
page, account
gestión
página
11 Conjunto Conjunto Configurar cuenta Se puede establecer administrador
Pasar
permiso admin/cliente, cliente en cliente.
& eliminar eliminar cuenta admin y Otros
cuenta permiso de administrador en el administrador no puede

otro administrador, customer, delete establecer principal

mostrar icono cuenta cuenta de administrador

button, display en cliente.

lista de cuentas Todos los administradores pueden

eliminar
cuenta. Ícono

10
 mostrar a la derecha

y puede
mostrar todo
cuenta
12 Eliminar Verificar: puede Eliminar producto Puede eliminar Pasa
producto & eliminar producto producto y
mostrar display delete mostrar todo
lista de productos y editar producto product,
botón editar/eliminar
icono del botón
13 Añadir nuevo Ver agregar nuevo Tipo Muestra el Pase
producto product, font, información el mismo con
cuadro de texto diseño. Puede
button, color, agregar datos en
mostrar página base de datos
14 Editar producto Ver pantalla Tipo nuevo Mostrar el Pasar
página, color, fuente, información para lo mismo con
tipo de cuadro de texto cierto producto diseño. ¿Puede
botón. editar
Información información
can/can not edit excepto
id del producto.

Puede guardar nuevo

datos en
base de datos
15 Orden Verificar pantalla Presiona el botón Puede mostrar Pase
Gestión página mover a orden todas las órdenes de
página gestión del cliente, puede
página y pedido ver detalle de

11
 página de detalles cada pedido.
Mostrar a la derecha

diseño

VI. Metodologías de Gestión

- Elegimos Agile para gestionar y desarrollar este proyecto. Porque
Agile es una metodología de desarrollo de software flexible que tiene una especificación

enfoque a la gestión de proyectos de software. Incluye un integrado y

flujo de trabajo interactivo para poner el producto en manos del usuario como
tan rápido como sea posible.

VII. Web Interface

7.1. Página de inicio de sesión

7.2. Página de Registro

12
7.3. Página de inicio del cliente

7.4. Editar Información

7.5. Ver Producto Por Tipo

13
7.6. Ver Detalle del Producto

7.7. Ver detalles del carrito y finalizar compra

14
7.8. Página de inicio del administrador

7.9. Gestionar Producto

7.10. Añadir nuevo producto

15
7.11. Editar Información del Producto

7.12. Gestionar Cuenta (Establecer Permiso y Eliminar)

7.13. Gestión de pedidos

16
 7.14. Detalle del pedido

VIII. Tabla de División del Trabajo

Nombre Completo Trabajo Porcentaje Completo

Trương Trọng Thiết Diseñar Página Principal 100%
Cliente y Administrador

* Diseñar producto y
Gestión de cuentas
Võ Lập Quân *Diseñar Iniciar sesión y 100%
Página de Registro

* Editar diseño de cuenta

Página
Lê Phát Quý Base de datos 100%
* Diseñar agregar, editar

17
 Página del producto

* Design Diagram
* Documento

Trần Quang Quí *Base de datos 100%

Servlet
* Cargar datos
Resumen

18