1
Manual técnico del sistema para el proyecto
“Diseño y desarrollo de un aplicativo web para optimizar la gestión comercial, imagen
publicitaria y atención al cliente de la empresa Suculenta Villavicencio”
Modalidad de grado - Análisis sistemático de literatura
Nathaly Martínez Baquero
Programa de Ingeniería de sistemas, Universidad Cooperativa de Colombia, Sede
Villavicencio
Ing. Carlos Ignacio Torres, Ing. Francy Yaneth Patiño
Villavicencio – Meta
Noviembre 2021
2
Tabla de contenido
Introducción .................................................................................................................................... 5
Objetivo del manual ....................................................................................................................... 6
Usuarios a quien va dirigido .......................................................................................................... 7
Requerimientos de Hardware y Software .................................................................................... 8
Requerimientos mínimos de Hardware............................................................................. 8
Requerimientos mínimos de Software ............................................................................... 8
Descripción de la APP .................................................................................................................... 9
Requerimientos funcionales: .............................................................................................. 9
Requerimientos no funcionales: ....................................................................................... 10
Diagrama de casos de uso: ................................................................................................ 11
Modelo entidad – relación: ............................................................................................... 18
Diagrama de clases: ........................................................................................................... 19
Arquitectura del proyecto: ............................................................................................... 19
Referencias .................................................................................................................................... 22
3
Lista de ilustraciones
Ilustración 1. Diagrama de casos de uso ....................................................................................... 11
Ilustración 2. Modelo entidad-relación ......................................................................................... 18
Ilustración 3. Diagrama de clases ................................................................................................. 19
Ilustración 4. Arquitectura Cliente-Servidor aplicada en Wordpress ........................................... 20
Ilustración 5. Estructura WordPress ............................................................................................. 21
4
Lista de Tablas
Tabla 1. Caso de uso número 1 ..................................................................................................... 12
Tabla 2. Caso de uso número 2 ..................................................................................................... 12
Tabla 3. Caso de uso número 3 ..................................................................................................... 13
Tabla 4. Caso de uso número 4 ..................................................................................................... 13
Tabla 5. Caso de uso número 5 ..................................................................................................... 14
Tabla 6. Caso de uso número 6 ..................................................................................................... 14
Tabla 7. Caso de uso número 7 ..................................................................................................... 15
Tabla 8. Caso de uso número 8 ..................................................................................................... 15
Tabla 9. Caso de uso número 9 ..................................................................................................... 16
Tabla 10. Caso de uso número 10 ................................................................................................. 16
Tabla 11. Caso de uso número 11 ................................................................................................. 17
Tabla 12.Caso de uso número 12 .................................................................................................. 17
Tabla 13. Caso de uso número 13 ................................................................................................. 18
5
Introducción
El presente manual informa al lector sobre el aspecto técnico del aplicativo web y proyecto
“Diseño y desarrollo de un aplicativo web para optimizar la gestión comercial, imagen publicitaria
y atención al cliente de la empresa Suculenta Villavicencio”, en este se expone su objetivo, además
de los usuarios a quienes va dirigido.
Informa sobre los requerimientos de hardware y software mínimos para el buen uso del
sistema y a su vez una descripción sobre su funcionamiento e instalación o proceso de ingreso.
6
Objetivo del manual
Exponer en este documento información que ilustre y oriente al lector sobre los aspectos
técnicos del aplicativo web y proyecto “Diseño y desarrollo de un aplicativo web para optimizar la
gestión comercial, imagen publicitaria y atención al cliente de la empresa Suculenta Villavicencio”,
así como una guía para acceso a este mostrando los requerimientos mínimos solicitados para su
funcionamiento.
7
Usuarios a quien va dirigido
El presente manual va principalmente dirigido a la cliente del proyecto, en este caso la
señorita Laura Mondragón como gerente de la empresa Suculenta Villavicencio y para la cual se
realizó el aplicativo, sin embargo, este manual puede ser herramienta útil para todo tipo de usuario
clasificado dentro del proyecto: visitante, usuario, administrador o cliente.
8
Requerimientos de Hardware y Software
• Requerimientos mínimos de Hardware
• Dispositivo tecnológico funcional, ya sea computador de mesa, portátil o smartphone
que permita la conectividad a internet.
• Requerimientos mínimos de Software
• Computadores:
Sistema operativo funcional: Windows (desde su versión 7.0 en adelante), Mac OS,
Unix, etc.
Navegador de preferencia: Google Chrome, Microsoft Edge, Safari, Mozilla Firefox,
Opera GX.
Conexión a red wifi estable.
• Smartphone:
Sistema operativo funcional: Android, iOS, Symbian, Windows Phone, etc.
Navegador de preferencia: Google Chrome, Microsoft Edge, Safari, Mozilla Firefox,
Opera GX, Samsung Internet.
Conexión a red wifi estable.
9
Descripción de la APP
El aplicativo web Suculenta Villavicencio Virtual permite: por un lado a sus visitantes la
visualización de los productos ofrecidos por la empresa Suculenta Villavicencio, así como precio,
contenido y disponibilidad de estos. El visitante por medio del aplicativo puede registrarse y pasar
a ser un usuario al cual se le permite realizar la compra del producto que desee a través de los
medios de pago digitales ofrecidos por el aplicativo. Para el caso del administrador, el aplicativo
permite total administración, seguimiento logístico, contable y de inventario en cuanto a los
productos se trata, permite la visualización de las visitas a la tienda virtual, los usuarios registrados,
las compras finalizadas, las unidades disponibles, etc.
• Requerimientos funcionales:
La tienda virtual Suculenta Villavicencio Web permitirá realizar las siguientes funciones:
- Administrar pedidos: El administrador del sistema podrá gestionar los pedidos
dentro del SVW (organizar, buscar, eliminar).
- Administrar productos: El administrador del sistema podrá gestionar los
productos dentro del SVW (agregar, modificar, eliminar, buscar).
- Administrar usuarios: El administrador del sistema podrá gestionar los
usuarios dentro del SVW (agregar, modificar, eliminar, buscar).
- Compras: Proceso por el cual el cliente realizará el pago de su producto
mediante los medios de pago establecidos en el SVW.
- Generación de estadísticas: Proceso por el cual, para vista del administrador,
se generarán estadísticas de las ventas de los productos y el número de pedidos
y registros.
- Generación de notificaciones: Proceso por el cual el SVW notificará al cliente
y al administrador de cualquier pedido realizado.
- Navegación: Acto de indagación por parte de los visitantes dentro del SVW.
10
- Publicación de Información: El administrador del sistema actualizará la
información general dentro del SVW (productos, información de la empresa,
festividades, fechas especiales, etc).
- Registro: Proceso por el cual los visitantes pueden registrarse en el SVW y así
realizar compras.
- Chatbot: Permitir la comunicación de los clientes con un sistema de IA
(Chatbot) para cualquier inquietud que estos presenten.
• Requerimientos no funcionales:
- Aplicación de la usabilidad para visitantes y usuarios.
- Contar con un dispositivo el cual tenga acceso a internet.
- La tienda virtual deberá estar en capacidad de dar respuesta a todos los usuarios.
- La tienda virtual deberá ser diseñada y construida con los niveles mínimos de
flexibilidad y adaptabilidad.
- La solución debe tener interfaces gráficas claras de operación.
11
• Diagrama de casos de uso:
Nota. Por: Creación de la autora.
Ilustración 1. Diagrama de casos de uso
12
- Descripción de los casos de uso:
Tabla 1. Caso de uso número 1
Caso de uso Registrar Usuario
Identificador 1
Descripción El visitante registra sus datos en la tienda
virtual para lograr obtener su sesión como
usuario y posteriormente cliente.
Actor principal Visitante
Actor secundario Administrador
Precondiciones Ingresar a la tienda virtual
Flujo principal 1- Entrar a la tienda virtual
2- Ir a la parte Mi cuenta
3- Ingresar datos
4- Ingresar Usuario
5- Ingresar contraseña
6- Validar datos
7- Sesión iniciada
Post condiciones Tener una sesión de usuario registrada
Flujos alternativos Error en el ingreso de datos
Error en la verificación de datos
Error al cargar la tienda virtual.
Nota. Por: Creación de la autora.
Tabla 2. Caso de uso número 2
Caso de uso Visualizar catálogo de productos
Identificador 2
Descripción El visitante (ya sea como visitante o
cliente con cuenta registrada) podrá ver
los diferentes productos ofrecidos por la
empresa en la tienda virtual
Actor principal Visitante
Actor secundario Cliente
Precondiciones Ingresar a la tienda virtual
Flujo principal 1- Entrar a la tienda virtual
2- Ir a la parte de Tienda
3- Visualizar los diferentes productos
ofrecidos
Post condiciones Lograr identificar y conocer cada uno de
los productos disponibles dentro de la
tienda virtual
Flujos alternativos Error al cargar la página de Tienda
Nota. Por: Creación de la autora.
13
Tabla 3. Caso de uso número 3
Caso de uso Iniciar sesión
Identificador 3
Descripción El visitante deberá registrarse para poder
iniciar su sesión y categorizarse como
cliente, así mismo el cliente podrá iniciar
sesión en el momento que lo desee.
Actor principal Cliente
Actor secundario Visitante
Precondiciones Haber registrado un usuario y contraseña
Flujo principal 1- Entrar a la tienda virtual
2- Ir a la parte de Mi cuenta
3- Ingresar usuario
4- Ingresar contraseña
5- Validar datos
6- Sesión iniciada en la tienda virtual
Post condiciones Lograr el inicio de sesión
Flujos alternativos Error en el ingreso de usuario o
contraseña
Error al cargar la página Mi cuenta.
Nota. Por: Creación de la autora. Tabla 4. Caso de uso número 4
Caso de uso Agregar pedido
Identificador 4
Descripción El cliente podrá agregar los pedidos que
desee a su cuenta parcial o total.
Actor principal Cliente
Actor secundario Administrador
Precondiciones Haber iniciado sesión con su usuario y
contraseña
Flujo principal 1- Entrar a la tienda virtual
2- Realizar el inicio de sesión
3- Ir a la parte de Tienda
4- Escoger un producto
5- Agregar el pedido al Carrito
Post condiciones Lograr agregar un pedido al Carrito para
la cuenta total o parcial del cliente.
Flujos alternativos Error en el inicio de sesión.
Error al cargar la página Tienda.
Error al agregar un pedido al Carrito.
Nota. Por: Creación de la autora.
14
Tabla 5. Caso de uso número 5
Caso de uso Modificar Pedido
Identificador 5
Descripción El cliente podrá realizar la modificación
de su pedido siempre y cuando este no
haya finalizado.
Actor principal Cliente
Actor secundario Administrador
Precondiciones Haber iniciado sesión
Haber agregado un pedido al Carrito.
Flujo principal 1- Entrar a la tienda virtual
2- Ir a la parte de Carrito
3- Seleccionar el pedido a modificar
4- Modificar lo que se quiera
modificar
5- Validar datos
Post condiciones Pedido deseado modificado
Flujos alternativos Error en el inicio de sesión
Error al cargar la página de Carrito
Error al agregar pedido
Error al modificar pedido
Nota. Por: Creación de la autora. Tabla 6. Caso de uso número 6
Caso de uso Visualizar pedidos
Identificador 6
Descripción El cliente podrá visualizar los pedidos
realizados justo antes de finalizar la
compra
Actor principal Cliente
Actor secundario Administrador
Precondiciones Haber iniciado sesión
Haber agregado pedidos al Carrito.
Flujo principal 1- Entrar a la tienda virtual
2- Ir a la parte de Carrito
3- Visualizar los pedidos realizados
Post condiciones Lograr la visualización de pedidos antes
de finalizar la compra
Flujos alternativos Error en al iniciar sesión
Error al cargar la página de Carrito
Error al visualizar pedidos.
Nota. Por: Creación de la autora.
15
Tabla 7. Caso de uso número 7
Caso de uso Eliminar pedido
Identificador 7
Descripción El cliente podrá eliminar el pedido que
desee siempre y cuando este no haya
finalizado su compra.
Actor principal Cliente
Actor secundario Administrador
Precondiciones Haber iniciado sesión
Haber agregado pedidos al Carrito
Flujo principal 1- Entrar a la tienda virtual
2- Ir a la parte de Carrito
3- Agregar pedidos al Carrito
4- Visualizar los pedidos realizados.
5- Eliminar el pedido escogido
Post condiciones Lograr la eliminación del pedido no
deseado.
Flujos alternativos Error al iniciar sesión
Error al agregar pedidos al Carrito
Error al visualizar los pedidos
Error al eliminar el pedido deseado.
Nota. Por: Creación de la autora. Tabla 8. Caso de uso número 8
Caso de uso Visualizar historiales
Identificador 8
Descripción El cliente podrá visualizar el historial de
compra registrado a su usuario y sesión.
Actor principal Cliente
Actor secundario Administrador
Precondiciones Haber iniciado sesión
Haber realizado y finalizado pedidos en la
tienda virtual.
Flujo principal 1- Entrar a la tienda virtual
2- Ir a la parte de Mi cuenta
3- Ir a la parte de Pedidos
4- Visualizar el historial de pedidos
realizados
Post condiciones Lograr visualizar el historial de pedidos
finalizados.
Flujos alternativos Error al iniciar sesión
Error al cargar la página Mi cuenta
Nota. Por: Creación de la autora.
16
Tabla 9. Caso de uso número 9
Caso de uso Finalizar compra
Identificador 9
Descripción El cliente podrá finalizar su compra a
través de la tienda virtual
Actor principal Cliente
Actor secundario Administrador
Precondiciones Haber iniciado sesión
Haber agregado un pedido al Carrito
Flujo principal 1- Entrar a la tienda virtual
2- Agregar un pedido al carrito
3- Ir a la parte de Finalizar compra
4- Ingresar los datos requeridos
5- Finalizar la compra pagando por
medio de las formas de pago
disponibles
Post condiciones Lograr la finalización de la compra
Flujos alternativos Error al iniciar sesión
Error al agregar pedido
Error al finalizar compra.
Nota. Por: Creación de la autora. Tabla 10. Caso de uso número 10
Caso de uso Descargar
Identificador 10
Descripción El cliente podrá realizar la descarga de su
comprobante de compra si así lo quiere.
Actor principal Cliente
Actor secundario Administrador
Precondiciones Haber iniciado sesión
Haber finalizado al menos una compra
Flujo principal 1- Entrar a la tienda virtual
2- Agregar un pedido al carrito
3- Finalizar pedido
4- Descargar el recibo de compra.
Post condiciones Lograr la descarga del o los recibos de
compra.
Flujos alternativos Error al iniciar sesión
Error al finalizar la compra
Error al generar recibo y descarga.
Nota. Por: Creación de la autora.
17
Tabla 11. Caso de uso número 11
Caso de uso Agregar productos
Identificador 11
Descripción El administrador de la tienda virtual podrá
agregar los productos que desee.
Actor principal Administrador
Actor secundario Administrador secundario
Precondiciones Haber iniciado sesión con el usuario del
administrador
Flujo principal 1- Entrar a la tienda virtual
2- Iniciar sesión bajo el usuario
administrador
3- Agregar productos.
Post condiciones Lograr agregar los productos que se
deseen a la tienda virtual
Flujos alternativos Error al iniciar sesión
Error al agregar productos.
Nota. Por: Creación de la autora.
Tabla 12.Caso de uso número 12
Caso de uso Modificar productos
Identificador 12
Descripción El administrador podrá realizar la
modificación de los productos según estos
varíen en su precio, cantidad, tamaño, etc.
Actor principal Administrador
Actor secundario Administrador secundario
Precondiciones Haber iniciado sesión bajo el usuario del
administrador
Tener productos agregados los cuales
poder modificar
Flujo principal 1- Entrar a la tienda virtual
2- Iniciar sesión con el usuario
administrador
3- Agregar al menos un producto a la
tienda virtual
4- Modificar el producto existente
Post condiciones Lograr la modificación del producto
deseado.
Flujos alternativos Error al iniciar sesión
Error en la modificación del o los
productos.
Nota. Por: Creación de la autora.
18
Tabla 13. Caso de uso número 13
Caso de uso Eliminar productos
Identificador 13
Descripción El administrador podrá eliminar los
productos que desee siempre y cuando
estos ya existan dentro de la tienda virtual.
Actor principal Administrador
Actor secundario Administrador secundario
Precondiciones Haber iniciado sesión con el usuario
administrador
Tener productos existentes dentro de la
tienda virtual
Flujo principal 1- Entrar a la tienda virtual
2- Iniciar sesión bajo el usuario del
administrador
3- Visualizar los productos existentes
4- Eliminar el producto escogido
Post condiciones Lograr eliminar uno o más productos.
Flujos alternativos Error al iniciar sesión
Error al eliminar productos
Nota. Por: Creación de la autora.
• Modelo entidad – relación:
Nota. Por: Creación de la autora.
Ilustración 2. Modelo entidad-relación
19
• Diagrama de clases:
Ilustración 3. Diagrama de clases
Nota. Por: Creación de la autora.
• Arquitectura del proyecto:
Tomando que la arquitectura es: “la arquitectura de un sistema de software (en un
punto determinado) es la organización o la estructura de los componentes importantes del
sistema que interactúan mediante interfaces, con componentes compuestos de interfaces y
componentes cada vez más pequeños”. (CGRW01, 2021)
20
Se desarrolló dentro de este proyecto:
- Arquitectura cliente servidor:
En un sistema con arquitectura cliente-servidor, la información está almacenada
y gestionada en el servidor, y los clientes hacen peticiones, en este caso a través de
Internet, para recibirla. En el caso de los Gestores de Contenidos como WordPress, al
funcionar con páginas dinámicas con el lenguaje de programación PHP, el proceso tiene
algunos pasos más. De forma simplificada lo podemos describir en estos pasos:
Nota. Por: (Digital Learning, 2021)
- Arquitectura del CMS Wordpress:
Los themes WordPress utilizan varios archivos a la vez para formar una página,
que son llamados por funciones específicas de la plataforma para facilitar el proceso.
Estos son similares a la función include de PHP y evitan tener que escribir la misma
porción de código en varias plantillas. Por ejemplo, la sección del encabezado del sitio
siempre es igual, llevará un logo y unos botones que no se cambiará; en un sitio
construido íntegramente en HTML se debe copiar este código en cada una de las
páginas.
Ilustración 4. Arquitectura Cliente-Servidor aplicada en Wordpress
21
En cambio, en WordPress bastará con escribir todo el código del encabezado
dentro de header.php y luego solicitar el encabezado en cada sección que se requiera.
El proceso es igual para la barra lateral (sidebar.php) y el pie de página (footer.php). De
ese modo cuando se lista el index de un sitio WordPress, éste estará compuesto de los
archivos header.php, index.php, sidebar.php y footer.php.
“ Para el caso de listar una página los archivos serán: header.php, page.php,
sidebar.php y footer.php. Se diferencia en que el inicio utiliza index.php para mostrar
su contenido principal y una página utiliza el archivo page.php.” (Aguilar, 2021)
Nota. Por: (Aguilar, 2021)
Ilustración 5. Estructura WordPress
22
Referencias
Aguilar, J. (26 de 11 de 2021). WordPress Content. Obtenido de https://www.jose-
aguilar.com/blog/wp-content/uploads/2012/11/layout.jpg
CGRW01. (26 de 11 de 2021). Conceptos. Obtenido de
https://cgrw01.cgr.go.cr/rup/RUP.es/SmallProjects/core.base_rup/guidances/concepts/soft
ware_architecture_4269A354.html
Digital Learning. (26 de 11 de 2021). Cliente Servidor CMS. Obtenido de
http://www.digitallearning.es/wp-content/uploads/2017/08/ClienteServidorCMS_2.png
Top Related