Universidad Hispanoamericana

Escuela de informática

Anteproyecto de bachillerato

Título del anteproyecto

Potenciando la Presencia Digital del Super Alfolí: Implementación de Estrategias

de Comercio Electrónico para Maximizar el Alcance y la Eficiencia

Sustentante:

Alejandro Salas Casanova

Marzo, 2024
 2

Tabla de Contenido

Índice de Tablas ………………………………………………………………………...3

Índice de Figuras ……………………………………………………………………….3

Índice de Anexos ……………………………………………………………………….3

Índice de Tablas.................................................................................................... 8

Índice de Figuras...................................................................................................8

Índice de Anexos...................................................................................................9

1. Capítulo 1: Planteamiento del Tema................................................................10

Introducción..................................................................................................... 10

1.1 Antecedentes y Justificación del Anteproyecto..........................................11

1.1.1. Marco de Referencia Empresarial y Contextual.................................11

1.1.2 Justificación del Anteproyecto.............................................................12

1.2 Definición del problema.............................................................................14

1.2.1. Problemática......................................................................................14

..................................................................................................................... 15

1.2.2. Problema General..............................................................................15

1.2.3. Problemas Específicos.......................................................................16

1.3. Objetivo General y Objetivos Específicos.................................................17

1.3.1. Objetivo General................................................................................17

 3

1.3.2 Objetivos específicos..........................................................................17

1.4. Alcance y Limitaciones..............................................................................19

1.4.1 Alcance del Proyecto...........................................................................19

1.4.2 Limitaciones del Proyecto...................................................................20

1.5 Cronograma del Proyecto..........................................................................20

2. Capítulo 2: Objetivo 1......................................................................................25

2.1 Definición de conceptos.............................................................................25

2.2 Diseño de la investigación.........................................................................26

2.3 Resultados.................................................................................................28

2.3.1 Infraestructura Tecnológica.................................................................29

2.3.1.1 Hardware..........................................................................................29

2.3.1.2 Software...........................................................................................29

2.3.1.3 Redes...............................................................................................29

2.3.2 Personal y Gestión..............................................................................29

2.3.3 Procesos............................................................................................. 30

2.3.4 Experiencia del Cliente y Expectativas...............................................30

2.4 Análisis y discusión....................................................................................30

3. Capítulo 3: Objetivo 2......................................................................................31

3.1 Definición de conceptos.............................................................................31

3.2 Desarrollo.................................................................................................. 33
 4

3.2.1 Establecer los requerimientos.............................................................33

3.2.1.1 Requerimientos Funcionales............................................................33

3.2.1.2 Requerimientos No Funcionales......................................................35

3.2.2 Diagrama entidad relación..................................................................35

3.2.2.1 Entidades.........................................................................................35

3.2.2.2 Atributos........................................................................................... 36

3.2.2.3 Relaciones....................................................................................... 39

3.2.3 Diagrama de flujo................................................................................43

3.2.4 Diagrama de caso de uso...................................................................57

3.2.4.1 Actores............................................................................................. 57

3.2.4.2 Casos de uso...................................................................................58

3.2.4.3 Diagrama..........................................................................................58

3.2.5 Tecnologías y estilo.................................................................................70

3.3 Resultados.................................................................................................71

3.4 Análisis y discusión....................................................................................71

Bibliografía.......................................................................................................... 72

Anexos................................................................................................................ 73
 5

Índice de Tablas

Tabla 1 Cronograma del Proyecto....................................................................17

Tabla 2 Diagrama caso de uso - Visualizar productos........................................54

Tabla 3 Diagrama caso de uso - Registrarse......................................................55

Tabla 4 Diagrama caso de uso - Iniciar sesión...................................................56

Tabla 5 Diagrama caso de uso - Agregar productos al carrito............................57

Tabla 6 Diagrama caso de uso - Realizar pedido...............................................58

Tabla 7 Diagrama caso de uso - Cambiar datos de perfil...................................59

Tabla 8 Diagrama caso de uso - Recuperar contraseña.....................................60

Tabla 9 Diagrama caso de uso - Gestionar productos........................................61

Tabla 10 Gestionar usuarios...............................................................................62

Tabla 11 Diagrama caso de uso - Ver pedidos...................................................63

Tabla 12 Diagrama caso de uso - Cambiar el estado del pedido........................64

Índice de Figuras

Figura 1 Diagrama Causa - Efecto.....................................................................10

Figura 2 Diagrama entidad relación clásico........................................................36

Figura 3 Diagrama modelo relacional.................................................................37

Figura 4 Diagrama de flujo - Registro de usuario...............................................39

Figura 5 Diagrama de flujo - Inicio de sesión.....................................................40

Figura 6 Diagrama de flujo - Recuperación de contraseña................................41

Figura 7 Diagrama de flujo - Visualización de productos....................................42

Figura 8 Diagrama de flujo - Agregar productos al carrito..................................43

 6

Figura 9 Diagrama de flujo - Realizar pedidos...................................................44

Figura 10 Diagrama de flujo - Notificación de cambio de estado de pedido.......45

Figura 11 Diagrama de flujo - CRUD de tabla de productos...............................46

Figura 12 Diagrama de flujo - CRUD de tabla usuarios......................................48

Figura 13 Diagrama de flujo - Gestión de pedidos.............................................50

Figura 14 Diagrama de flujo - Actualizar información de perfil...........................51

Figura 15 Diagrama de caso de uso...................................................................53

Índice de Anexos

Anexo A. Presentación de anteproyecto (A mano)..............................................67

Anexo B. Presentación de anteproyecto (Digital)................................................73

 7

1. Capítulo 1: Planteamiento del Tema

Introducción

En este capítulo se presentará un análisis detallado del tema a

desarrollar, brindando una base sólida del ámbito que envuelve la propuesta. Se

tratarán temas importantes como el contexto de la empresa, la definición del

problema y los objetivos del proyecto.

El análisis contextual brindará información sobre los factores internos y

externos de la empresa, lo que facilitará la comprensión del lector y ayudará en

el análisis de la problemática y la resolución.

Se clarificará la importancia de llevar a cabo este proyecto, demostrando

su impacto en la empresa.

Se identificará y detallará la problemática para fundamentar el desarrollo

del proyecto, para ello, se aplicarán diversas técnicas de análisis para encontrar

el problema principal.

Por último, se delinearán los objetivos generales los cuales formularan la

meta final del proyecto y los objetivos específicos que muestran el paso a paso

para llegar a ese fin.

 8

1.1 Antecedentes y Justificación del Anteproyecto

1.1.1. Marco de Referencia Empresarial y Contextual

El Super Alfolí es un abastecedor situado en Rio Segundo de Alajuela,

Costa Rica, este fue fundado por su actual dueño Jose Luis Porras Solís en el

año 1991; esta empresa cuenta con la cedula jurídica 502440240 y el número de

teléfono 24426856 y se dedica a proveer, de manera satisfactoria, una amplia

variedad de productos a los clientes de la comunidad y de otras zonas.

El mercado objetivo de este negocio son las personas que viven en las

cercanías del lugar, que buscan realizar sus comprar diarias, igualmente, se

intenta expandir a clientes de otras localidades.

Siempre se busca brindar la mayor calidad de productos, con un servicio

al cliente amable y operando de manera ética y transparente, el servicio se

diferencia de los competidores por su sensación de calidez y confianza al

momento de realizar la compra.

En el área existen otros centros de ventas los cuales buscan competir

contra el Super Alfolí, los más cercanos suelen ser pequeños negocios los

cuales son mayormente concurridos por los consumidores de esas zonas,

suelen tener inventarios reducidos y poca variedad; en las partes más alejadas

se encuentran competidores de mayor índole los cuales tiene diversidad de

productos y clientes fijos, además de que cuentan con sistemas digitales (como

páginas web con información del local y los artículos en venta) que les permiten

atraer clientes más allá de su ubicación física.

 9

Como menciona (GuellCom., 2023), que un super cuente con una página

web tiene distintas ventajas tales como: mayor alcance, información de

disponibilidad, de gestiones y una imagen más profesional, por eso, muchas

tiendas facilitación en la realización buscan establecer su propio entorno digital

para competir con las otras empresas; El Super Alfolí es carente de un sistema

electrónico lo cual puede afectar a la competencia y reducir el número de

compradores a largo plazo.

1.1.2 Justificación del Anteproyecto

A pesar de que el Super Alfolí tenga una sólida reputación y clientes

leales, este carece de presencia en línea, esto podría reducir el crecimiento del

negocio. Con el aumento de los establecimientos que han aplicado por sistemas

digitales es importante que esta empresa se adapte a estos cambios.

Según lo indicado por (Ecommerce Costa Rica, 2023) tener un sistema en

línea ayuda en la competitividad del negocio mejorando muchas de sus

características como:

 Servicio:

Los clientes pueden navegar a gusto cuando quieran, donde deseen en la

página, sin tener que preocuparse por los horarios del local, permitiéndoles

comprar a su propio ritmo y mejorando su experiencia.

 10

 Posicionamiento y alcance:

Permite a usuarios de distintas zonas enterarse de sus precios y ofertas

sin la necesidad de que acudan al local, esto es perfecto para los clientes que

prefieren realizar compras en línea o que no acudan a diario al establecimiento;

además, la presencia en línea mejora la imagen de la empresa.

 Reducción de costos:

Mejorar los sistemas de inventario optimizaría el proceso de gestión de

este lo que llevaría a una mejor eficiencia operativa y una reducción de costos

en personal extra, también, se reduce el coste de entrega y logística del sistema

de envío de pedidos convencional.

 Incremento en ventas:

Al ofrecer un sistema de pedidos en línea con recolección al local y contar

con un inventario actualizado permite a los clientes acceder a estos servicios de

manera más conveniente, fomentado las compras en el supermercado.

Además, el servicio de retiro en la tienda o “Pick up” tiene varios casos de

éxito en el mundo, como menciona el estudio de (Huayana, 2022) un ejemplo

destacado es el de Victoria’s Secret en Chile, el cual alcanzó un porcentaje

elevado en ventas mediante su sitio web al implementar este servicio, este caso

demuestra que aplicar este servicio puede ser una estrategia efectiva para

aumentar los ingresos de la empresa.

 11

1.2 Definición del problema

1.2.1. Problemática

En la era digital actual es necesario que los negocios tengan participación

en línea, El Super Alfolí, una tienda bien establecida, carece de presencia en la

web. Esta ausencia no solo limita su alcance y visibilidad, si no que afecta su

capacidad de satisfacer las necesidades de los clientes.

Esta dificultad para atraer y retener clientes puede deberse a la falta de

presencia en línea y opciones de compra más convenientes, esto impide que los

clientes se sientan más desconectados del local y sientan una barrera a la hora

de comprar debido a sus preferencias de compra, algunos prefieren evitar

multitudes o tienen horarios ocupados, lo que los lleva a buscar otras

alternativas que potencialmente lleven a la pérdida de clientes.

Esto también puede afectar la eficiencia interna, la gestión manual de

inventarios puedes llevar a cometer errores, generando una falta de existencia

de productos o una sobrecompra de algunos otros, esto no solo afecta al

usuario, sino que, puede resultar en pérdidas económicas para el super.

En el siguiente diagrama causa – efecto mostrará el problema principal y

se utilizará para visualizar las posibles causas de este:

 12

Figura 1 Diagrama Causa - Efecto

Escases o excesos de Clientes desinformados Perdida de usuarios que

productos sobre el negocio busquen otras

alternativas

Dificultad para atraer y

retener clientes

Errores de manejo Falta de presencia en Ausencia de otros

manual de inventarios línea métodos de venta

1.2.2. Problema General

La falta de presencia en línea y estrategias de comercio electrónico del

Super Alfolí plantea una serie de desafíos que afectan tanto su capacidad para

satisfacer las necesidades de los clientes como su eficiencia interna. Con esta

información, se plantea la siguiente pregunta ¿Cómo puede el Super Alfolí

mejorar su presencia en línea y estrategias de comercio electrónico para

aumentar su alcance, visibilidad, satisfacción del cliente y eficiencia interna?

De esta manera se resume la problemática anteriormente menciona y se

establece un enfoque principal.

13
 14

1.2.3. Problemas Específicos

El problema general anteriormente identificado se puede desglosar para

obtener un enfoque más detallado, generando cuatro problemáticas de la

siguiente manera:

¿Cuáles son las mejores estrategias para establecer una presencia en

línea efectiva para el Super Alfolí?

Se debe buscar la manera de incluir a esta empresa en un entorno virtual,

se debe investigar el estado actual de la empresa para identificar las fortalezas y

desafíos y, de esta manera, saber cuál es la mejor manera de abordar este

problema.

¿Qué herramientas y tecnologías pueden implementarse para optimizar la

gestión de inventarios y procesos internos del Super Alfolí?

Este problema nos plantea la necesidad de buscar las herramientas para

solucionar el problema, se debe diseñar un sistema considerando los aspectos

técnicos, diseño, funcionalidades y tecnologías correctas para garantizar el

funcionamiento optimo, para ello, se comparará distintas opciones disponibles y

se implementaran distintos diagramas para especificar el proceso de

implementaciones de las tecnologías elegidas.

¿Cuál es el enfoque más adecuado para el desarrollo y la programación

de la página web del Super Alfolí?

Este problema se centra en el desarrollo, de qué manera se aplicarán las

tecnologías y diagramas generados para solventar la problemática, se buscará

 15

la manera más eficiente para completar los objetivos, este enfoque permitirá

avanzar con la creación de una página web funcional y efectiva.

¿Cuál es la mejor manera de implementar el aplicativo desarrollado en el

internet para permitir que los clientes la utilicen?

Esta pregunta plantea la necesidad de encontrar la manera de poder

implementar el servicio creado teniendo en cuenta las limitaciones.

1.3. Objetivo General y Objetivos Específicos

1.3.1. Objetivo General

Analizar la problemática expuestas en el punto anterior, podemos llegar a

la formulación del siguiente objetivo:

Desarrollar un sistema digital que permita gestionar inventarios y recibir

pedidos de recolección al local mediante técnicas de desarrollo de aplicaciones

para aumentar la presencia en línea del Super Alfolí y así mejorar el alcance y la

satisfacción al cliente en el segundo semestre del año 2024.

Mediante el cumplimiento de estos objetivos se espera poder mejorar la

situación actual de la empresa solucionando su problema principal; para abordar

este propósito se dividirá en objetivos específicos los cuales especifican las

tareas a desarrollar para lograr la finalización de este.

 16

1.3.2 Objetivos específicos

Teniendo en mente el objetivo general podemos formular los objetivos

específicos, estos detallarán las tareas a realizar a lo largo del proyecto; también

tendremos en cuenta los problemas específicos como guía para la formulación

de estos objetivos.

El primer objetivo debe estar relacionado con el estudio de la situación

actual de la empresa, saber las fortalezas y las debilidades del negocio nos

ayudará a decidir cuál es el mejor camino para solucionar este problema lo que

nos lleva a formular el siguiente objetivo:

Determinar la situación actual del Super Alfolí mediante herramientas de

recaudación de información para entender las fortalezas y debilidades del

negocio.

El segundo se enfocará en el diseño del sistema, se debe analizar las

necesidades de la empresa y establecer las funciones que se implementarán,

además, se debe identificar las herramientas y tecnologías que se van a utilizar

en el proyecto, con todo eso aclarado, se formularán diagramas para facilitar el

desarrollo del aplicativo en el futuro, con esto en mente, podemos redactar el

siguiente objetivo:

Diseñar la estructura del proyecto utilizando como base las necesidades

de la empresa mediante diagramas y otras técnicas para facilitar el proceso de

desarrollo.
 17

El tercer objetivo se va enfocado en el tema de desarrollo, en este, se

buscará desarrollar el sistema intentando que sea fácil de usar, con una

estructura sólida y que cumpla las necesidades de la empresa, el planteamiento

del objetivo sería:

Desarrollar el sistema digital utilizando la estructura y tecnologías

planificadas para cumplir con los requisitos del aplicativo expuestos por la

empresa.

El cuarto objetivo consiste en implementar el sistema a la web mediante

para que sea accesible para la clientela de la tienda y los miembros de la

empresa:

Integrar el sistema informático al internet mediante herramientas de

alojamiento en la nube con el fin de que esté disponible para los clientes.

1.4. Alcance y Limitaciones

1.4.1 Alcance del Proyecto

El primer entregable de proyecto es un informe de la situación actual, en

él se incluye los resultados de las herramientas de recaudación de información,

con estos datos se determinará la mejor manera de desarrollar el diseño del

sistema.

El segundo entregable consiste en la elaboración de diagramas como

entidad - relación, de flujo, de casos de uso, entre otros; además de otros

planeamientos para definir la estructura del sistema, se busca diseñar un

sistema el cual permita a los clientes visualizar los productos vendidos por la
 18

tienda y permitirles realizar pedido tipo recoger en el local o “Pick up” (es

importante aclarar que el servicio de recolección al local no contará con ningún

sistema de envíos ni con ningún tipo de pago electrónico, el cliente deberá

acudir la tienda para recoger sus productos y cancelar el monto); del lado del

local debe permitir a los empleados identificarse para poder cambiar la

disponibilidad de los productos y atender los encargos del servicio de

recolección en el local.

El tercer entregable abarcaría la elaboración del sistema utilizando los

planeamientos propuestos en el segundo entregable como base, se desarrollará

la aplicación web de la manera más eficiente que cumpla con los requisitos

necesarios por la empresa, se desarrollará la base de datos y cada módulo

anteriormente descritos; cuando la página esté termina será subida a la web

utilizando las herramientas escogidas a la hora de realizar el diseño.

1.4.2 Limitaciones del Proyecto

En el proyecto existen ciertas limitaciones para tener en cuenta, que, aun

que no puedan ser evitadas, no impiden la realización del proyecto.

Tercer entregable:

 No se espera comprar un nombre de dominio por lo cual habrá que utilizar

una herramienta de nube gratuita.

El dueño de la empresa menciona que de momento prefiere mantener los

costos lo más bajo posible, por eso se recurre a la idea de utilizar los
 19

servicios de alojamiento en la nube gratuitos, igualmente, según el flujo

de usuarios esperado, estos servicios deberían funcionar sin problemas.

 Al buscar un servicio gratuito o de bajo costo se espera que la velocidad

de la página se pueda ver impactada según el flujo de usuarios en la

página.

En caso de que el flujo de usuarios supere el esperado se podría ver

reflejado en la velocidad de carga de servicio.

1.5 Cronograma del Proyecto

Para completar este proyecto se estima un total de doce semanas, las

cuales tres serán para el primer entregable, tres para el segundo y seis para el

tercero, estos entregables se dividen en subetapas las cuales son:

Primer entregable:

 Crear una entrevista para realizar al dueño del Super Alfolí, buscando las

preguntas necesarias, para recaudar información del estado actual del

negocio.

 Aplicar la entrevista realizada para obtener los datos de la empresa

necesarios para el diagnóstico.

 Utilizar la información obtenida para realizar un informe del estado de la

empresa.

Segundo entregable:

 Escoger las tecnologías y herramientas que se utilizarán en el desarrollo

del proyecto.
 20

 Creación de diagrama de entidad relación y de flujo.

 Creación del diagrama de casos de uso y corrección de errores

existentes.

Tercer entregable:

 Crear la base de datos del aplicativo.

 Confeccionar el módulo principal de la página.

 Realizar el sistema de pedidos de recolección en el local de la página.

 Realizar el sistema de modificación de inventarios del aplicativo.

 Realizar el sistema de visualización de pedidos.

 Aplicar los últimos detalles y realizar pruebas.

Se plantearán como objetivos semanales de la siguiente manera:

 21

Tabla 1

Cronograma del Proyecto

Semanas Objetivo Actividades

Crear una entrevista para Crear preguntas para

realizar al dueño del Super realizarlas al dueño del

Alfolí, buscando las establecimiento que

1 preguntas necesarias, ayuden a entender la

para recaudar información situación de la empresa.

del estado actual del

negocio.

Aplicar la entrevista Acudir al local para aplicar

realizada para obtener los la entrevista al dueño del

datos de la empresa Super Alfolí apuntando las

2
necesarios para el respuestas en una hoja de

diagnóstico. preguntas.

Utilizar la información Desarrollar un plan

obtenida para realizar un estratégico aprovechando

3 informe del estado de la la información obtenida a

empresa. través de los resultados de

la encuesta.

4 Escoger las tecnologías y Realizar una investigación,

 22

herramientas que se basándose en los

utilizarán en el desarrollo resultados de la encuesta

del proyecto. para escoger las

tecnologías y herramientas

a utilizar.

Creación de diagrama de Realizar el diagrama

entidad relación y de flujo. entidad relación para

facilitar la creación de la

base de datos y el
5
diagrama de flujo para que

sea más fácil la

comprensión de los

procesos

Creación del diagrama de Realizar diagramas de

casos de uso y corrección caso de uso para los

6 de errores existentes. diversos procesos para

entender la interacción de

los actores con el sistema

Crear la base de datos del Crear la base de datos del

7 aplicativo. programa en la tecnología

seleccionada.

8 Confeccionar los módulos Crear la página principal

de página principal y de en donde se pueden ver

 23

página de información. los productos y la página

de información en donde

se vean diversos datos del

local.

Realizar la página de inicio Crear la página en donde

de sesión y el sistema de los usuarios puedan iniciar

pedidos de recolección en sesión y el módulo donde

9
el local de la página. los clientes con sesión

iniciada puedan realizar

los productos.

Realizar el sistema de Crear el módulo donde los

modificación de inventarios usuarios empleados, que

del aplicativo. hayan iniciado sesión,

10
puedan modificar la

disponibilidad actual de los

productos.

11 Realizar el sistema de Crear el módulo donde los

visualización de pedidos, usuarios empleados, que

realizar pruebas y corregir hayan iniciado sesión,

los últimos detalles. puedan visualizar los

pedidos realizados

recientemente.

Realizar pruebas al
 24

sistema y refinar los

detalles pendientes.

Implementar el sistema en Subir el aplicativo a la web

12 la web. mediante las herramientas

elegidas.

Las actividades de este cronograma pueden estar sujetas a cambios en

caso de que surjan nuevos requerimientos o situaciones imprevistas.

2. Capítulo 2: Objetivo 1

2.1 Definición de conceptos

Es importante para el proyecto conocer el estado actual de la empresa para

saber sus fortalezas y debilidades, además, es necesario saber algunos datos extra

para tenerlos en cuenta a la hora de realizar el diseño.

Como menciona (Lopez, 2021) realizar una entrevista un método sencillo para

recopilar datos a la hora de realizar un proyecto, aprovechando el fácil acceso que se

tiene con el dueño del local, se utilizará este método para obtener información valiosa.

Igualmente hay que tener distintas cosas en mente como: realizar preguntas

directas, y preguntar por hechos y no por opiniones.

Sera importante abordar temas como: infraestructura tecnológica (hardware y

software), redes y conectividad, personal y sus capacidades, procesos operativos y

 25

expectativas de la empresa; estas cuestiones las tendremos en cuenta a la hora de

estructurar la entrevista.

Una vez completada la lista de preguntas, se deberá acudir al super para

obtener las respuestas, las cuales serán analizadas y utilizadas para facilitar el diseño

del sistema y evitar errores futuros.

2.2 Diseño de la investigación

Esta entrevista buscará recaudar datos con un enfoque mixto para utilizar esta

información en el diseño del sistema, se necesita saber la cantidad y calidad de los

equipos del local, la cantidad de empleados, la calidad de las conexiones a la red,

información de cómo trabajan de momentos algunos temas como los inventarios y que

esperan ellos que cumpla la aplicación, para ello, se realizará las entrevistas al dueño

del Super Alfolí el cual conoce perfectamente esta información.

Se acudirá al local con las preguntas y se escribirán las respuestas que el brinde

para posteriormente analizarlas.

A continuación, se escribirán las preguntas planteadas y el objetivo o información

esperada de ellas:

1- ¿Cuántas computadoras y otros equipos tecnológicos tiene la empresa

actualmente?

Es importante saber cuántas computadoras o equipos tiene la empresa para

saber si el equipo es suficiente para la aplicación.

2- ¿Cuál es la capacidad y estado de las computadoras (procesador, memoria

RAM, almacenamiento)?
 26

Es necesario ver si los equipos necesitaran alguna actualización en sus

componentes.

3- ¿Qué software utilizan actualmente para la gestión de inventarios, ventas y

administración?

Esta pregunta nos ayuda a identificar integraciones y a evitar redundancias

de software.

4- ¿Cuál es la infraestructura de red actual (tipo de conexión a internet,

velocidad, cobertura Wi-Fi)?

La velocidad y estabilidad de la conexión a internet son cruciales para el

rendimiento de una aplicación web.

5- ¿Tienen problemas frecuentes de conectividad o interrupciones del servicio?

En caso de haber un problema frecuente de red se debe solucionar ya que la

aplicación será un servicio web.

6- ¿Cuántos empleados trabajan en la empresa y cuál es la estructura del

personal?

Entender la estructura de la empresa nos ayuda a crear una aplicación que

se adapte a todas las necesidades de los usuarios.

7- ¿Cuántos empleados tienen acceso y utilizan regularmente las computadoras

y cuentan con un nivel de competencia tecnológica?

Permite dimensionar el uso mínimo de la aplicación, a planificar el diseño de

una aplicación sencilla de usar y nos ayuda a saber si los usuarios

necesitaran una capacitación

8- ¿Cómo gestionan actualmente los catálogos de productos?

 27

Nos ayuda a entender que distintas áreas podemos mejorar y que funciones

nuevas debemos integrar a nuestra aplicación.

9- ¿Qué tipo de comentarios han recibido sobre la experiencia de compra y el

catálogo de productos por parte de los clientes?

Nos ayuda a identificar las necesidades de los clientes para satisfacer sus

necesidades.

10-¿Qué características y funcionalidades les gustaría tener en una nueva

aplicación web?

Saber que se espera de la aplicación nos ayudará a priorizar las

funcionalidades solicitadas.

11- ¿Tiene alguna sugerencia específica sobre cómo debería ser el proceso de

implementación de la nueva aplicación web?

Nos permite ver la perspectiva del dueño y como se espera que sea la

implementación, en caso de que haya algún inconveniente o tema no tratado

en la entrevista, se espera que sea mencionado en esta pregunta.

2.3 Resultados

Con la lista terminada se acude al Super Alfolí y se le pregunta al actual dueño

del local Jose Luis Porras Solís, se realizaron las preguntas y se apuntaron las

respuestas recibidas transcribiendo la información importante.

Los resultados se han dividido en subgrupos para facilitar su análisis:

 28

2.3.1 Infraestructura Tecnológica

2.3.1.1 Hardware

Mencionan que en el local cuentan con dos computadoras una se suele utilizar

para un software de cobro y cajas y el otro equipo se utiliza para gestiones del banco

como pagos electrónicos, depósitos y retiros de dinero.

Mencionan que, aunque no cuenta con la información exacta de los

componentes del equipo creen que son gama media y que funcionan de manera

óptima.

2.3.1.2 Software

Tienen un programa que habían comprado hace unos años el cual registra los

productos por códigos de barra y permite realizar facturas de manera más sencilla, se

utiliza en el día a día para realizar las ventas.

2.3.1.3 Redes

Cuentan con un internet de fibra óptica con una velocidad de 50Mbs, en el local

se conectan mediante wifi y una infraestructura cableada para las dos computadoras,

afirman que el servicio suele ser estable y que pocas veces tienen problemas de

conectividad.

2.3.2 Personal y Gestión

Actualmente cuentan con seis empleados los cuales son, un encargado de caja,

una persona de limpieza, un panadero, dos abarroteros y él, que, aunque es el jefe,

realiza las funciones que se necesiten en el día, menciona que tres de sus empleados y
 29

el saben utilizar una computadora y serían los encargados de gestionar el inventario y

recibir los pedidos.

2.3.3 Procesos

Al momento de realizar la entrevista gestionan el inventario de productos en un

cuaderno el en cual apuntan que suelen comprar y en donde, además, cuales

productos están empezando a escasear para hacer un nuevo pedido.

2.3.4 Experiencia del Cliente y Expectativas

Muchos clientes han mencionado que les gustaría poder revisar los productos

disponibles mediante una página web y al mencionarles la idea del servicio de

recolección al local, se reciben comentarios positivos sobre lo útil que podría llegar a

ser.

El señor Jose nos comenta que le gustaría que él se pudiera ver que productos

están agotados para poder realizar un nuevo pedido, además, de que la aplicación se

sencilla de utilizar, menciona que espera poder implementarla en el último cuatrimestre

del año 2024.

2.4 Análisis y discusión

Las respuestas obtenidas nos dejan claro ciertos puntos, el local cuenta con la

tecnología suficiente para poder implementar la aplicación web, los dos equipos son

capaces de ejecutar sin problemas un navegador web con un sistema como el que se

espera diseñar, además, cuenta con un sistema de redes suficientemente estable para

evitar problemas de perdida de conexión.

 30

Los empleados son capaces de utilizar aplicativos en las computadoras con una

capacitación básica sobre el funcionamiento.

Se debe implementar una mejor manera de poder administrar el inventario de

productos, el cual es una de las funciones esperadas en la aplicación, ya que el

sistema actual es lento, poco fiable y confuso.

Los clientes esperan la página web ya que facilita algunos de los procesos a la

hora de realizar una compra, según el cronograma propuesto la aplicación estaría lista

para el tercer cuatrimestre del año 2024, lo que encaja con el deseo del dueño de

implementarlo al final de este año.

3. Capítulo 3: Objetivo 2

3.1 Definición de conceptos

Antes de iniciar con la programación es importante definir la estructura del

programa, esto nos ayuda a identificar las funciones necesarias y como interactúan

entre ellas.

Para el trabajo se busca crear un diagrama de entidad relación, un diagrama de

flujo y un diagrama de casos de uso, cada uno con su función e importancia, además,

brindar una especificación clara de las tecnologías que se planean utilizar a lo largo del

proyecto.

Como menciona (Navarro, 2019) el modelo entidad relación nos ayuda a

identificar como las entidades se relacionan entre ellos, esto se hace mediante

componentes los cuales son los elementos básicos del modelo.

 31

 Las entidades se representan como un rectángulo y son los objetivos de los

cuales se recoge la información.

 Las relaciones muestran la conexión entre las entidades, suelen ser verbos

dentro de rombos los cuales asocian a las entidades según su interacción

 Los atributos son las propiedades de una entidad, se escriben dentro de un

círculo, siempre debe existir uno que funcione como identificador único.

 La cardinalidad indica la cantidad máxima o mínima de ocurrencias en cada

relación.

El diagrama de flujo nos ayuda a diseñar la base de datos para la aplicación,

cada entidad representa una tabla, los atributos son sus columnas y la relaciones y

la cardinalidad representa que como se relacionan las tablas entre ellas.

Identificar los pasos de una tarea para poder completarla, de esta manera

podemos diseñar un proceso, corroborar que se están cumpliendo las tareas y

mejorar los pasos para que sea más eficiente.

Según escribió (Etecé, 2024) el diagrama está formado por símbolos y líneas,

los rectángulos con esquinas redondeadas marcan el inicio y el final de la tarea, los

rectángulos con esquinas normales son los procesos, los rombos son decisiones las

cuales dividen el curso en dos caminos posibles y el romboide representa cuando el

proceso requiere entradas de datos o genera salidas de datos, las líneas sirven

para definir el flujo del proceso.

 32

Y por último el diagrama de casos de uso, es un tipo de diagrama UML que nos

permite ver los cuales son los roles de un sistema y como interactúan con la

aplicación, este está conformado por:

 El actor el cual es la entidad que interactúa con el sistema, se dibuja como un

esqueleto.

 El caso de uso el cual es una acción dentro del sistema se dibuja con un

óvalo con la función escrita dentro de él.

 El sistema es todo el aplicativo, se representa con un gran rectángulo.

Todas estas herramientas nos ayudaran a crear un diseño del sistema que se

tiene en mente y facilitará la creación de la aplicación web cuando comience la

programación.

3.2 Desarrollo

3.2.1 Establecer los requerimientos

El primer paso a la hora de diseñar el proyecto será definir los requerimientos,

estos nos ayudan a que el proyecto siga un camino claro y se comprenda que se

espera del proyecto; los requerimientos se dividen en dos tipos, funcionales y no

funcionales, juntos representan que debe realizar la aplicación para que sea

satisfactoria.

3.2.1.1 Requerimientos Funcionales

Los requerimientos funcionales describen qué debe hacer el sistema:

 33

1. El sistema debe permitir al usuario registrarse mediante un correo electrónico,

una contraseña, su nombre y apellidos y su teléfono.

2. El usuario debe poder iniciar sesión con sus credenciales.

3. Los usuarios pueden actualizar la información de su perfil como el nombre, el

teléfono o la contraseña.

4. El sistema tiene que mostrar la dirección, números de teléfono y horario de

atención.

5. El usuario debe poder visualizar una lista de productos desplegada y su

cantidad actual.

6. El usuario debe poder buscar un producto utilizando una parte del nombre.

7. El usuario podrá añadir productos al carrito de compra.

8. El usuario debe poder realizar pedidos de recolección al local.

9. El sistema debe notificar mediante correo electrónico cuando el pedido esté

listo.

10. El sistema debe notificar mediante correo electrónico en caso de que le pedido

sea cancelado.

11. Permitir a los administradores crear, leer, actualizar y eliminar los datos en la

tabla de usuarios.

12. Permitir a los administradores crear, leer, actualizar y eliminar los datos en la

tabla de productos.

13. El sistema debe mostrar el contenido de los carritos.

14. Permitir a los administradores ver los pedidos.

15. Permitir a los administradores cambiar el estado del pedido.

 34

16. Permitir a los administradores modificar la cantidad de productos solicitados en

un pedido.

17. Permitir a los administradores eliminar un pedido en caso de que no haya

disponibilidad.

3.2.1.2 Requerimientos No Funcionales

Describen como debe comportarse el sistema; incluye aspectos como

rendimiento, usabilidad, seguridad, mantenimiento y más.

1. El sistema debe responder a cualquier solicitud en menos de 4 segundos.

2. El sistema debe soportar hasta 200 usuarios sin degrado de rendimiento.

3. El sistema debe estar disponible al menos un 90% del horario de atención.

4. Los datos de inicio de sesión deben estar encriptados.

5. El sistema debe ser compatible con los navegadores más utilizados.

6. El sistema debe ser sencillo de utilizar.

7. El sistema debe tener un diseño responsivo.

Con esta lista creada se pueden empezar a diseñar los diagramas asegurando que

todos cumplan y sigan los requerimientos citados.

3.2.2 Diagrama entidad relación

Para realizar el diagrama de entidad relación se deben definir ciertos elementos:

3.2.2.1 Entidades

Las entidades representan los elementos de los cuales se debe recaudar

información, para este trabajo se identificaron las siguientes entidades:

 35

 Usuarios: almacena la información del usuario de la aplicación, guarda registros

como el nombre y los datos de inicio de sesión y de contacto.

 Productos: contiene la información sobre el inventario de la tienda, cuales y

cuantos productos tiene.

 Pedidos: guarda la información de los pedidos realizados por los usuarios como

el monto total, la fecha en que se realiza y el estado del pedido.

 Detalle de Pedidos: tiene el detalle de cada producto comprado en un pedido,

guarda su cantidad de productos comprados para poder calcular un total.

 Carritos: almacena los datos de los carritos existentes, el usuario al que

pertenecen y su fecha de creación.

 Objetos de carrito: contiene todos los productos que estén en el carrito de un

usuario y su cantidad.

 Sesión: posee datos necesarios para manejar la sesión del usuario como la

fecha de expiración o el token de sesión.

3.2.2.2 Atributos

Usuarios:

 IDUsuario: sirve como identificador único para cada usuario.

 Nombre: nombre del usuario.

 Apellidos: apellidos del usuario.

 Correo: correo electrónico del usuario, se utiliza para iniciar sesión y para

contactarlo en caso de ser necesario para informar sobre el estado de los

pedidos que se realicen.

 36

 Teléfono: se utiliza para contactar al usuario en caso de ser necesario hacer un

cambio en el pedido o informar un inconveniente.

 Clave: contraseña encriptada del usuario.

 Rol: nos ayuda a identificar si la cuenta del usuario es de cliente o de

administrado.

 Estado: muestra si la cuenta está actualmente activa o desactivada.

Productos:

 IDProducto (PK): sirve como identificador único para cada producto.

 Nombre: nombre del producto.

 Descripción: texto que muestra los detalles de un producto como su tamaño,

peso, cantidad, envasado entre otras cosas.

 Cantidad: cantidad del producto disponible estimada actual.

 Precio: precio del producto.

 Categoría: categoría del producto, sirve para poder organizar los productos

por categorías.

 Imagen: imagen representativa del producto que se utilizara en la página de

visualización de productos.

Pedidos:

 IDPedido (PK): sirve como identificador único para cada pedido.

 IDUsuario (FK): sirve como identificar a cuál usuario pertenece el pedido.

 Fecha: fecha en la que se realizado el pedido.

 37

 Estado: estado actual del pedido, este puede ser Pendiente - Aceptado -

Completado - Cancelado.

 Total: cantidad total a pagar por el cliente.

Detalles de pedidos:

 IDDetalle (PK): sirve como identificador único para cada detalle de pedido.

 IDPedido (FK): sirve como identificar a cuál pedido pertenece el detalle.

 IDProducto (FK): sirve como identificar a cuál producto fue comprado.

 Cantidad: cantidad del producto comprado, se utiliza para calcular el total

multiplicando cantidad por precio.

 Precio: precio del producto a la hora de la compra se utiliza para calcular el

total multiplicando cantidad por precio.

 Total: resultado de la cantidad comprada por el precio por unidad.

Carritos:

 IDCarrito (PK): sirve como identificador único para cada carrito.

 IDUsuario (FK): sirve como identificar a cuál usuario pertenece el carrito.

 Fecha: fecha en la que se creó el carrito, sirve para saber cuándo eliminar el

carrito por falta de uso.

Objetos de carrito:

 IDObjetos (PK): sirve como identificador único para cada objeto en carrito.

 IDCarrito (FK): sirve como identificar a cuál carrito pertenece el objeto.

 IDProducto (FK): sirve como identificar cuál producto fue agregado al carrito.

 Cantidad: cantidad del producto agregado al carrito.

 38

 Precio: precio del producto a la hora de ser agregado al carrito.

 FechaAgregado: fecha en la que se agregó al carrito.

Sesión:

 IDUsuario (FK): sirve como identificar a cuál usuario pertenece la sesión.

 IDSesion (PK): sirve como identificador único para cada sesión.

 FechaExpiracion: sirve para saber cuándo expira la sesión.

 Token: clave que sirve para verificar la sesión.

3.2.2.3 Relaciones

 Usuarios a Pedidos: un usuario puede hacer varios pedidos, pero un pedido solo

pertenece a un usuario. N:1

 Usuarios a Carritos: un usuario puede tener solo un carrito y un carrito solo

puede pertenecer a un usuario. 1:1

 Usuarios a Sesión: un usuario solo puede tener una sesión y una sesión solo

puede pertenecer a un usuario. 1:1

 Pedidos a DetallePedidos: un pedido puede tener muchos detalles, pero un

detalle solo un pedido. N:1

 Productos a DetallePedidos: un producto puede ser parte de distintos detalles,

pero cada detalle tiene solo un producto. N:1

 Carritos a ObjetosCarritos: un carrito puede tener varios objetos, pero un objeto

solo pertenece a un carrito. N:1

 Productos a ObjetosCarritos: un producto puede aparecer en muchos objetos,

pero cada objeto solo tiene un producto N:1

 39

Una vez definidas estas partes se puede crear el siguiente diagrama para

resumir lo mencionado:

Figura 2 Diagrama entidad relación clásico

 40

El diagrama de entidad relación clásico es útil para resumir la información

obtenida en el paso anterior mediante una visión general y abstracta, es perfecta para

utilizarla con usuario con poco conocimiento técnico.

Si se busca una implementación más técnica, se opta por el diagrama del

modelo relacional, esta transforma a las entidades en tablas, a los atributos en

 41

columnas y las relaciones en uniones de llaves foráneas y muestra el tipo de dato que

se espera almacenar, es perfecta para facilitar el trabajo a la hora de crear bases de

datos.

Figura 3 Diagrama modelo relacional

 42

Con el diagrama realizado será más fácil la creación de la base de datos a la

hora de realizar el desarrollo.

3.2.3 Diagrama de flujo

El diagrama de flujo es una herramienta que nos permite ver el flujo de un

proceso, esto nos permite entender cómo se desarrolla un algoritmo sin la necesidad

de leer largos textos y ayuda a los programadores a definir la estructura del código

antes de iniciar a programar.

El primer paso para crear los diagramas es definir los procesos principales los

cuales se quieren representar, para ayudarnos con esto podemos ver los

requerimientos anteriormente redactados para tener una idea de que algoritmos debe

realizar la aplicación.

Después se procede a diagramar. Para ello, como se explicó anteriormente, se

utilizan figuras para representar los procesos, las decisiones, las salidas e ingresos de

datos, el comienzo y el fin, además, se brinda una breve explicación de la

representación para esclarecer cualquier duda.

En este proyecto destacan los siguientes procesos:

1. Proceso de registro de usuario:

 43

Figura 4 Diagrama de flujo - Registro de usuario

Este proceso comienza desde la pantalla de registro de usuario en donde el

ingresa sus datos personales, luego el sistema confirma que los datos sean validos
 44

(en caso de no serlos se notifica para que el usuario los modifique) y después

procede a guardar la información en la base de datos.

2. Inicio de sesión

Figura 5 Diagrama de flujo - Inicio de sesión

 45

Empezando desde la pantalla de inicio de sesión el usuario ingresa sus

credenciales (correo electrónico y contraseña), el sistema valida que los datos sean

válidos y en caso de serlos crea una sesión y permite el acceso.

3. Recuperación de contraseña

Figura 6 Diagrama de flujo - Recuperación de contraseña

 46

En la opción de recuperación de contraseña el navegante ingresa el correo

electrónico con el cual está registrado, a este correo se envía un enlace de

restablecimiento de credenciales, en donde se debe ingresar la nueva clave y se

actualiza en la base de datos.

4. Visualización de productos

Figura 7 Diagrama de flujo - Visualización de productos

Se solicita la información de los productos a la base de datos, después, estos se

despliegan en una lista en donde se puede ver sus atributos y si el producto está

actualmente disponible.

5. Agregar productos al carrito

 47

Figura 8 Diagrama de flujo - Agregar productos al carrito

Al seleccionar “Agregar al carrito” sobre algún producto el sistema consulta si

existe algún carrito (si no existe uno se crea) y se agrega el identificador del producto al

carrito.

6. Realización de pedidos
 48

Figura 9 Diagrama de flujo - Realizar pedidos

 49

Al intentar realizar un pedido el sistema verificar la cantidad agregada al carrito con

la existente en inventario, en caso de ser distinta, se elimina el excedente de productos

y se notifica el detalle, después, se solicita una confirmación para realizar el pedido, en

caso de ser aceptada se procede a crear el registro del pedido en la base de datos y se

notifica al usuario mediante un correo electrónico.

7. Notificación de cambio de estado del pedido

Figura 10 Diagrama de flujo - Notificación de cambio de estado de pedido

 50

Un administrador puede modificar la cantidad de productos en el pedido en caso

de que hubiera una confusión con la cantidad en bodega, después de eso puede

actualizar el estado del pedido a listo cuando este pueda ser recogido o a cancelado en

caso de que algo salga mal, independiente de la nueva condición el cliente recibe una

notificación de cambio de estado por correo electrónico.

8. Proceso de CRUD de la tabla productos

Figura 11 Diagrama de flujo - CRUD de tabla de productos

 51

El administrador selecciona que operación del “CRUD” desea realizar (crear,

leer, actualizar o eliminar), en el caso de crear un nuevo producto debe escribir la

información de este, después de una verificación se agrega los datos en la base y se

notifica al usuario.
 52

En caso de querer leer se desplegará los detalles de producto y el usuario podrá

visualizarlo.

Para la operación de “Actualiza” igualmente se muestra el registro de la

mercancía y el usuario puede cambiar los datos necesarios y, una vez confirmado,

estos de actualizan en la base de datos.

Y, por último, la opción de eliminar permite, después de una aprobación, borrar

el todo el registro del objeto seleccionado.

9. Proceso de CRUD de la tabla de usuarios

Figura 12 Diagrama de flujo - CRUD de tabla usuarios

 53

El administrador selecciona que operación del “CRUD” desea realizar (crear,

leer, actualizar o eliminar), en el caso de crear un nuevo usuario debe escribir la

información de este, después de una verificación se agrega los datos en la base y se

notifica al usuario.
 54

En caso de querer leer se desplegará los detalles de usuario y estos se podrán

visualizar.

Para la operación de “Actualiza” igualmente se muestra el registro del miembro y

el usuario puede cambiar los datos necesarios y, una vez confirmado, estos de

actualizan en la base de datos.

Y, por último, la opción de eliminar permite, después de una aprobación, borrar

el todo el registro del objeto seleccionado.

10. Gestión de pedidos

Figura 13 Diagrama de flujo - Gestión de pedidos

 55

Se solicita los pedidos registrados y estos se despliegan como una lista con los

encargos pendientes de primero.

11. Actualización de información de perfil

Figura 14 Diagrama de flujo - Actualizar información de perfil

 56

Se muestra la información actual del usuario para que el decidida que desea

cambiar, al terminar de modificar y después de una confirmación, el registro se

actualiza en la base datos.

3.2.4 Diagrama de caso de uso

El diagrama de caso de uso nos ayuda a tener una referencia clara de cómo

funciona el sistema y como interactúa con los usuarios.

Para crear un diagrama se deben definir los actores y los casos de uso, después

mostrar de manera grafica como interactúan estos mediante figuras para que sea

sencillo de entender, además, se debe explicar cada caso de uso. Esta exposición

debe mostrar datos como: el nombre del proceso, el nombre del autor, la fecha de

creación, los actores, las precondiciones, el flujo normal y alternativo y las

postcondiciones.

3.2.4.1 Actores

Se pueden detectar dos actores principales.

1. Cliente: un cliente es cualquier usuario que visita la página y no tiene privilegios

de administrador, ya sea que haya iniciado sesión o no. Crear una cuenta e

ingresar les permite acceder a más funciones en la plataforma.

2. Administrador: son los usuarios que hayan iniciado sesión con una cuenta tipo

administrador. Ellos pueden gestionar el inventario, visualizar datos de los

usuarios y manejar los pedidos recibidos.

 57

3.2.4.2 Casos de uso

Un caso de uso se puede interpretar como la manera en la que un usuario

interactúa con el sistema, cada actor suele tener sus propios casos.

1. Cliente: Ver productos, registrarse, iniciar sesión, agregar producto al carrito,

realizar pedido, actualizar datos de perfil, recuperar contraseña.

2. Administrador: gestionar productos, gestionar usuarios, ver pedidos, actualizar

estado de pedidos, notificar al cliente.

3.2.4.3 Diagrama

Al unir a los actores con los casos de uso podemos formar el siguiente diagrama
 58

Figura 15 Diagrama de caso de uso

Ahora se procede a explicar cada caso de uso:

 59

Tabla 2 Diagrama caso de uso - Visualizar productos

Nombre: Visualizar productos

Autor: Alejandro Salas C

Fecha: 15/07/2024
Descripción: permite a los clientes ver una listo de productos en venta y su
disponibilidad.

Actores: cliente

Precondiciones: el cliente debe estar en la pestaña de productos.

Flujo normal:
1. El cliente entra a la pestaña de productos.
2. El sistema muestra una lista de productos y su disponibilidad.

Flujo alternativo: no hay flujo alternativo.

Postcondiciones: no hay postcondiciones.

 60

Tabla 3 Diagrama caso de uso - Registrarse

Nombre: Registrarse

Autor: Alejandro Salas C

Fecha: 15/07/2024
Descripción:
Permite a los clientes poder registrar un usuario en la base de datos.

Actores:
Cliente

Precondiciones:
El cliente no debe tener una cuenta, el cliente debe estar en la pestaña de registro

Flujo normal:
1. El cliente ingresa su nombre, apellidos, correo electrónico, contraseña y teléfono.
2. El sistema verifica los datos y crea una nueva cuenta si son válidos.
3. El sistema notifica al cliente que la cuenta ha sido creada

Flujo alternativo:
2. Los datos ingresados no válidos, el sistema muestra un mensaje de error.

Postcondiciones:
Se agrega un nuevo usuario a la base de datos.
 61

Tabla 4 Diagrama caso de uso - Iniciar sesión

Nombre: Iniciar sesión

Autor: Alejandro Salas C

Fecha: 15/07/2024
Descripción:
Permite a los clientes iniciar sesión.

Actores:
Cliente.

Precondiciones:
El cliente debe tener una cuenta y saber sus credenciales.

Flujo normal:
1. El cliente accede a la página de inicio de sesión.
2. El cliente ingresa su correo electrónico y su contraseña.
3. El sistema verifica las credenciales y permite el acceso si son correctas.

Flujo alternativo:
3. Las credenciales son incorrectas, el sistema muestra un mensaje de error.

Postcondiciones:
Se crea una nueva sesión en la base de datos.
 62

Tabla 5 Diagrama caso de uso - Agregar productos al carrito

Nombre: Agregar productos al carrito

Autor: Alejandro Salas C

Fecha: 15/07/2024
Descripción:
Permite a los clientes agregar productos al carrito de compras.

Actores:
Cliente.

Precondiciones:
El cliente debe haber iniciado sesión.

Flujo normal:
1. El cliente selecciona un producto.
2. El cliente selecciona agregar a el carrito.
3. El sistema actualiza el carrito del cliente.

Flujo alternativo:
No hay flujo alternativo.

Postcondiciones:
 63

Se agrega un nuevo registro de carrito a la base de datos.

Tabla 6 Diagrama caso de uso - Realizar pedido

Nombre: Realizar pedido

Autor: Alejandro Salas C

Fecha: 15/07/2024
Descripción:
Permite al cliente realizar un pedido para recoger en la tienda.

Actores:
Cliente.

Precondiciones:
El cliente debe haber iniciado sesión.
El cliente debe tener al menos un artículo en el carrito.

Flujo normal:
1. El cliente revisa su carrito.
2. El sistema actualiza los productos en carrito según la disponibilidad actual.
3. El cliente confirma el pedido.
4. El sistema envía un correo de confirmación con el resumen del pedido al cliente.
5. El sistema notifica al administrado sobre un nuevo pedido.
 64

Flujo alternativo:
2. No hay ningún artículo disponible y el sistema no puede realizar el pedido.

Postcondiciones:
Se crea un nuevo pedido en la base de datos.

Tabla 7 Diagrama caso de uso - Cambiar datos de perfil

Nombre: Cambiar datos de perfil

Autor: Alejandro Salas C

Fecha: 15/07/2024
Descripción:
Permite a los clientes actualizar su información personal en su perfil.

Actores:
Cliente.

Precondiciones:
El cliente debe haber iniciado sesión.

Flujo normal:
1. El cliente accede a la página de perfil.
2. El cliente selecciona editar perfil.
3. El cliente actualizar su información (nombre, apellidos, teléfono).
4. El cliente guarda los cambios.
5. El sistema verifica y actualiza la información del perfil en la base de datos.
 65

6. El sistema notifica al cliente que los cambios se han realizado exitosamente.

Flujo alternativo:
3. Si los datos ingresados no son válidos, el sistema muestra un mensaje de error y no
guarda los cambios.
Postcondiciones:
La información del usuario se actualiza en la base de datos.

Tabla 8 Diagrama caso de uso - Recuperar contraseña

Nombre: Recuperar contraseña

Autor: Alejandro Salas C

Fecha: 15/07/2024
Descripción:
Permite a los clientes recuperar su contraseña en caso de olvido.

Actores:
Cliente.

Precondiciones:
El cliente debe tener una cuenta registrada en el sistema.

Flujo normal:
 66

1. El cliente accede a la página de inicio de sesión y selecciona la opción de “Olvidé mi

contraseña”.
2. El cliente ingresa a su correo electrónico registrado.
3. El sistema verifica la existencia de una cuenta con ese correo electrónico.
4. El sistema enviar un correo electrónico con un enlace para reestablecer la
contraseña.
5. El cliente abre el enlace.
6. El cliente es redirigido a una página para ingresar una nueva contraseña.
7. El cliente ingresa y confirma la contraseña.
8. El sistema actualiza la contraseña.
9. El sistema notifica al cliente que la contraseña se ha actualizado.
Flujo alternativo:
3. Si el correo digitado no presenta ninguna cuenta existente el sistema muestra un
mensaje de error.
7. Si la nueva contraseña no es válida el sistema muestra un mensaje de error.
Postcondiciones:
La contraseña del usuario es actualizada en la base de datos

Tabla 9 Diagrama caso de uso - Gestionar productos

Nombre: Gestionar productos

Autor: Alejandro Salas C

Fecha: 15/07/2024
Descripción:
Permite al administrador realizar un CRUD en la tabla de productos.

Actores:
Administrador.
 67

Precondiciones:
El administrador debe haber iniciado sesión.

Flujo normal:
1. El administrador accede a la página de gestión de productos.
2. El administrador puede crear un nuevo producto.
3. El administrador selecciona el producto con el que desea trabajar.
4. El administrador puede editar o eliminar el producto.
5. El sistema actualiza la lista de productos en consecuencia.

Flujo alternativo:
2. Los datos ingresados no son válidos, el sistema muestra un mensaje de error.

Postcondiciones:
La base de datos de productos se ve actualizada.

Tabla 10 Gestionar usuarios

Nombre: Gestionar usuarios

Autor: Alejandro Salas C

Fecha: 15/07/2024
Descripción:
Permite al administrador realizar un CRUD en la tabla de usuarios.
 68

Actores:
Administrador.

Precondiciones:
El administrador debe haber iniciado sesión.

Flujo normal:
1. El administrador accede a la página de gestión de usuarios.
2. El administrador puede crear un nuevo usuario.
3. El administrador selecciona el usuario con el que desea trabajar.
4. El administrador puede editar o eliminar el usuario.
5. El sistema actualiza la lista de usuarios en consecuencia.

Flujo alternativo:
2. Los datos ingresados no son válidos, el sistema muestra un mensaje de error.

Postcondiciones:
La base de datos de usuarios se ve actualizada.

Tabla 11 Diagrama caso de uso - Ver pedidos

Nombre: Ver pedidos

Autor: Alejandro Salas C

 69

Fecha: 15/07/2024
Descripción:
Permite al administrador ver una lista de pedidos realizados.

Actores:
Administrador.

Precondiciones:
El administrador debe haber iniciado sesión.
Debe haber al menos un pedido.

Flujo normal:
1. El administrador accede a la página de pedidos.
2. El sistema muestra la lista de pedidos con sus estados teniendo como prioridad los
pedidos en curso.

Flujo alternativo:
No hay flujo alternativo.

Postcondiciones:
No hay postcondiciones.

Tabla 12 Diagrama caso de uso - Cambiar el estado del pedido

 70

Nombre: Cambiar el estado del pedido

Autor: Alejandro Salas C

Fecha: 15/07/2024
Descripción:
Permite al administrador actualizar el estado del pedido.

Actores:
Administrador.

Precondiciones:
El administrador debe haber iniciado sesión.
Debe haber al menos un pedido.

Flujo normal:
1. El administrador accede a la página de pedidos.
2. El sistema muestra la lista de pedidos con sus estados teniendo como prioridad los
pedidos en curso.
3. El administrador selecciona un pedido.
4. El administrador actualiza el estado del pedido (pendiente, listo, cancelado).
5. El sistema notifica al cliente sobre el cambio de estado.

Flujo alternativo:
4. Si el pedido no puede ser actualizado, el sistema muestra un mensaje de error.

Postcondiciones:
Se actualiza el registro del pedido en la base de datos.

3.2.5 Tecnologías y estilo

 71

3.3 Resultados

3.4 Análisis y discusión

 72

Bibliografía

Ecommerce Costa Rica. (28 de enero de 2023). Ecommerce Costa Rica. Obtenido de

Ventajas de tener un sistema ecommerce en Costa Rica:

https://ecommercecostarica.com/index.php/2023/01/28/ventajas-de-tener-un-

sistema-ecommerce-en-costa-rica/

Etecé, E. (9 de Abril de 2024). concepto. Obtenido de concepto:

https://concepto.de/diagrama-de-flujo/

GuellCom. (15 de Noviembre de 2023). ¿Por qué tu supermercado debe tener una

página web? Obtenido de GuellCom: https://guellcom.com/por-que-tu-

supermercado-debe-tener-una-pagina-web

Huayana, Y. (15 de agosto de 2022). Linkedin.com. Obtenido de Linkedin.com:

https://www.linkedin.com/pulse/click-collect-una-oportunidad-para-generar-m

%C3%A1s-ventas-yuriko-huayana/?originalSubdomain=es

Lopez, R. (19 de 12 de 2021). PMCOLLEGE. Obtenido de PMCOLLEGE:

https://pmcollege.edu.ni/la-entrevista-tecnica-eficaz-para-recopilar-

requerimientos/

Navarro, M. (12 de Noviembre de 2019). Ilerna. Obtenido de Ilerna:

https://www.ilerna.es/blog/modelo-entidad-relacion-base-datos
73
 74

Anexos

Anexo A. Presentación de anteproyecto (A mano)

75
76
77
78
 79

Anexo B. Presentación de anteproyecto (Digital)

80
81
82