manual técnico del sistema para el proyecto publicitaria y

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 10. Caso de uso número 10 ................................................................................................. 16


Tabla 12.Caso de uso número 12 .................................................................................................. 17


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.



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


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


13


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


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.



Precondiciones Haber iniciado sesión con su usuario y

contraseña


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.


14


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.



Precondiciones Haber iniciado sesión

Haber agregado un pedido al Carrito.


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


Caso de uso Visualizar pedidos

Identificador 6

Descripción El cliente podrá visualizar los pedidos

realizados justo antes de finalizar la

compra




Haber agregado pedidos al 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.


15


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.




Haber agregado pedidos al 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.


Caso de uso Visualizar historiales

Identificador 8

Descripción El cliente podrá visualizar el historial de

compra registrado a su usuario y sesión.




Haber realizado y finalizado pedidos en 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.


Error al cargar la página Mi cuenta


16


Caso de uso Finalizar compra

Identificador 9

Descripción El cliente podrá finalizar su compra a

través de la tienda virtual




Haber agregado un pedido al Carrito


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


Error al agregar pedido

Error al finalizar compra.


Caso de uso Descargar

Identificador 10

Descripción El cliente podrá realizar la descarga de su

comprobante de compra si así lo quiere.




Haber finalizado al menos una compra


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.


Error al finalizar la compra

Error al generar recibo y descarga.


17


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


2- Iniciar sesión bajo el usuario

administrador

3- Agregar productos.

Post condiciones Lograr agregar los productos que se

deseen a la tienda virtual


Error al agregar productos.


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.



Precondiciones Haber iniciado sesión bajo el usuario del

administrador

Tener productos agregados los cuales

poder modificar


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.


Error en la modificación del o los

productos.


18


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.



Precondiciones Haber iniciado sesión con el usuario

administrador

Tener productos existentes dentro de 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.


Error al eliminar productos


• Modelo entidad – relación:


Ilustración 2. Modelo entidad-relación

19

• Diagrama de clases:

Ilustración 3. Diagrama de clases


• 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

manual técnico del sistema para el proyecto publicitaria y

Documents