Documento de Proyecto Alejandro Salas Casanova Terminado 4

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.................................................................................................... 5
Índice de Figuras...................................................................................................6
Índice de Anexos.................................................................................................10
1. Capítulo 1: Planteamiento del Tema................................................................11
Introducción..................................................................................................... 11
1.1 Antecedentes y Justificación del Anteproyecto..........................................12
1.1.1. Marco de Referencia Empresarial y Contextual.................................12
1.1.2 Justificación del Anteproyecto.............................................................13
1.2 Definición del problema.............................................................................15
1.2.1. Problemática......................................................................................15
1.2.2. Problema General..............................................................................16
1.2.3. Problemas Específicos.......................................................................17
1.3. Objetivo General y Objetivos Específicos.................................................18
1.3.1. Objetivo General................................................................................18
1.3.2 Objetivos específicos..........................................................................19
1.4. Alcance y Limitaciones..............................................................................20
1.4.1 Alcance del Proyecto...........................................................................20
1.4.2 Limitaciones del Proyecto...................................................................21

3
1.5 Cronograma del Proyecto..........................................................................22
Tabla 1 Cronograma del Proyecto.....................................................................24
2. Capítulo 2: Objetivo 1......................................................................................27
2.1 Definición de conceptos.............................................................................27
2.2 Diseño de la investigación.........................................................................28
2.3 Resultados.................................................................................................30
2.3.1 Infraestructura Tecnológica.................................................................31
2.3.1.1 Hardware..........................................................................................31
2.3.1.2 Software...........................................................................................31
2.3.1.3 Redes...............................................................................................31
2.3.2 Personal y Gestión..............................................................................31
2.3.3 Procesos............................................................................................. 32
2.3.4 Experiencia del Cliente y Expectativas...............................................32
2.4 Análisis y discusión....................................................................................32
3. Capítulo 3: Objetivo 2......................................................................................33
3.1 Definición de conceptos.............................................................................33
3.2 Desarrollo.................................................................................................. 35
3.2.1 Establecer los requerimientos.............................................................35
3.2.1.1 Requerimientos Funcionales............................................................35
3.2.1.2 Requerimientos No Funcionales......................................................37

4
3.2.2 Diagrama entidad relación..................................................................37
3.2.2.1 Entidades.........................................................................................37
3.2.2.2 Atributos........................................................................................... 38
3.2.2.3 Relaciones....................................................................................... 41
3.2.3 Diagrama de flujo................................................................................44
3.2.4 Diagrama de caso de uso...................................................................58
3.2.4.1 Actores............................................................................................. 58
3.2.4.2 Casos de uso...................................................................................58
3.2.4.3 Diagrama..........................................................................................59
3.2.5 Tecnologías y estilo.............................................................................71
3.3 Resultados.................................................................................................77
3.4 Análisis y discusión....................................................................................77
4. Capítulo 4: Desarrollo del sitio web.................................................................78
4.1 Preparación y primeros pasos...................................................................78
4.2 Apartado del cliente...................................................................................84
4.3 Apartado de administrador.......................................................................105
4.4 Resultados...............................................................................................122
5. Capítulo 5: Implementación...........................................................................122
5.1 Procedimiento..........................................................................................122
6. Capítulo 6: Conclusión.................................................................................128
5
Bibliografía........................................................................................................ 131
Anexos.............................................................................................................. 132
Anexo A. Presentación de anteproyecto (A mano)........................................132
Anexo B. Presentación de anteproyecto (Digital)..........................................138
Í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
6
Figura 1 Diagrama Causa - Efecto.....................................................................16
Figura 2 Diagrama entidad relación clásico........................................................41
Figura 3 Diagrama modelo relacional.................................................................43
Figura 4 Diagrama de flujo - Registro de usuario...............................................44
Figura 5 Diagrama de flujo - Inicio de sesión.....................................................46
Figura 6 Diagrama de flujo - Recuperación de contraseña................................47
Figura 7 Diagrama de flujo - Visualización de productos....................................48
Figura 8 Diagrama de flujo - Agregar productos al carrito..................................48
Figura 9 Diagrama de flujo - Realizar pedidos...................................................49
Figura 10 Diagrama de flujo - Notificación de cambio de estado de pedido.......51
Figura 11 Diagrama de flujo - CRUD de tabla de productos...............................53
Figura 12 Diagrama de flujo - CRUD de tabla usuarios......................................54
Figura 13 Diagrama de flujo - Gestión de pedidos.............................................56
Figura 14 Diagrama de flujo - Actualizar información de perfil...........................57
Figura 15 Diagrama de caso de uso...................................................................59
Figura 16 Creación de base de datos.................................................................78
Figura 17 Diagrama final de la base de datos....................................................79
Figura 18 Creación del proyecto.........................................................................80
Figura 19 Agregar paquete de EntityFramework................................................81
Figura 20 Agregar paquete de EntityFramework 2.............................................82
Figura 21 Creación de la cadena de conexión en "appsettings.json".................83
Figura 22 Creación del Builder Services en el "Program.cs"..............................83
Figura 23 Generar modelos mediante la estructura de la base de datos...........83

7
Figura 24 Carpeta con los modelos creados......................................................83
Figura 25 Modificación del "Layout.cshtml" Incluir importaciones......................84
Figura 26 Modificación del "Layout.cshtml" Agregar botones de navegación....84
Figura 27 Botones de navegación en "AdminLayout.cshtml".............................85
Figura 28 Configuración de los servicios de sesiones de ASP.NET Core..........86
Figura 29 Pantalla de inicio................................................................................86
Figura 30 Página de productos...........................................................................87
Figura 31 Configuración del DbContext en el "Program.cs"...............................88
Figura 32 Ejemplo de declaración del DbContext en una clase controladora....89
Figura 33 Método para desplegar lista de productos verificando si existe algún
filtro por categoría o nombre..........................................................................................89
Figura 34 Método "GetImage"............................................................................90
Figura 35 Método para mostrar los detalles de la cuenta...................................91
Figura 36 Métodos para editar información de la cuenta....................................91
Figura 37 Página para ver detalles de cuenta y cerrar sesión............................92
Figura 38 Página para editar información de la cuenta......................................92
Figura 39 Método para agregar productos al carrito..........................................93
Figura 40 Método para desplegar lista de productos en carrito..........................94
Figura 41 Método para eliminar objetos del carrito............................................95
Figura 42 Página del carrito................................................................................96
Figura 43 Pantalla de inicio de sesión................................................................96
Figura 44 Pantalla de registro.............................................................................97
Figura 45 Pantalla para recuperar contraseña...................................................99

8
Figura 46 Método "HashPassword" para encriptar contraseñas........................99
Figura 47 Método de inicio de sesión...............................................................100
Figura 48 Método para registrar usuario..........................................................101
Figura 49 Método para solicitar recuperación de contraseña...........................102
Figura 50 Método para cambiar la contraseña.................................................102
Figura 51 Configuración para enviar correos en el "appsetting.json"...............103
Figura 52 Ejemplo de correo recibido para recuperar la contraseña................104
Figura 53 Método para enviar correos en la clase "EmailService.cs"..............104
Figura 54 Método para realizar un pedido........................................................105
Figura 55 Estructura de clase "AdminAuthorizeAttribute.cs"............................106
Figura 56 Código Razor para desplegar lista de productos..............................106
Figura 57 Página para los administradores para manejar los productos..........107
Figura 58 Método para crear un nuevo producto.............................................107
Figura 59 Página para agregar un nuevo producto..........................................108
Figura 60 Código para verificar la existencia del producto...............................109
Figura 61 Código para eliminar producto después de confirmación.................109
Figura 62 Página de eliminación de producto...................................................110
Figura 63 Código para desplegar información actual del producto...................110
Figura 64 Código para guardar los nuevos datos ingresados...........................111
Figura 65 Página para editar datos de los productos........................................111
Figura 66 Código para generar lista de usuarios..............................................112
Figura 67 Pantalla con lista de usuarios...........................................................112
Figura 68 Método para crear usuario................................................................113

9
Figura 69 Página para crear un nuevo usuario.................................................113
Figura 70 Métodos para eliminar usuarios (solicitud de confirmación y
eliminación).................................................................................................................. 114
Figura 71 Página para eliminar usuario............................................................114
Figura 72 Código para editar usuarios..............................................................115
Figura 73 Página para editar usuarios..............................................................116
Figura 74 Código Razor para generar lista de pedidos y organizarlo según su
estado actual................................................................................................................ 116
Figura 75 Vista de lista de pedidos...................................................................117
Figura 76 Código para ver detalles del pedido seleccionado...........................118
Figura 77 Página para visualizar los detalles del pedido..................................118
Figura 78 Método para cambiar la cantidad de un producto en el pedido........119
Figura 79 Método para cambiar el estado del pedido a finalizado....................119
Figura 80 Método para cambiar el estado del pedido a cancelado..................120
Figura 81 Método para eliminar productos del pedido actual...........................121
Figura 82 Método para recalcular el total del pedido después de modificar la
cantidad de un producto o eliminarlo...........................................................................121
Figura 83 Creación de la base de datos en Azure............................................123
Figura 84 Instalación de la extensión Azure SQL Migration.............................124
Figura 85 Conexión y apartado de extensiones...............................................124
Figura 86 Proceso para migrar la base de datos local a la nube......................125
Figura 87 Obtener la nueva cadena de conexión en Azure..............................126

10
Figura 88 Implementación de la nueva cadena de conexión en el archivo
"appsettings.json".........................................................................................................127
"SuperAlfoliDbContext.cs"............................................................................................127
Figura 90 Opción "Publicar SuperAlfoliApp".....................................................127
Figura 91 Apartado para publicar el proyecto...................................................128
Índice de Anexos
Anexo A. Presentación de anteproyecto (A mano)..............................................67
Anexo B. Presentación de anteproyecto (Digital)................................................73

11
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 formularán la
meta final del proyecto y los objetivos específicos que muestran el paso a paso
para llegar a ese fin.

12
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 cédula jurídica 502440240 y el número de
teléfono 24426856; 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 compras diarias, igualmente, se
intenta expandir a clientes de otras localidades.
Siempre se busca brindar los productos de mejor calidad, 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.

13
Como menciona (GuellCom., 2023), que un super cuente con una página
web tiene distintas ventajas tales como: mayor alcance, información de
disponibilidad, facilitación en la realización de gestiones y una imagen más
profesional, por eso, muchas tiendas 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 afectarlo frente 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 y 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.

14
 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, fomentando 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 sistema puede ser una estrategia efectiva para
aumentar los ingresos de la empresa.

15
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 hace que los
compradores 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 puede 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.
El siguiente diagrama causa – efecto mostrará el problema principal y se
utilizará para visualizar las posibles causas de este:

16
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 mencionada y
se establece un enfoque principal.

17
1.2.3. Problemas Específicos
El problema general 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,
hay que realizar una investigación del 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í?
Esta pregunta 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 óptimo, para ello, se comparará distintas opciones disponibles y
se implementarán 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á

18
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?
Se debe encontrar la manera de poder implementar el servicio creado
teniendo en cuenta las limitaciones, el sistema debe ser capaz de soportar el
flujo de clientes.
1.3. Objetivo General y Objetivos Específicos
1.3.1. Objetivo General
Al analizar las problemáticas 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 este objetivo 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 detallarán las tareas
a desarrollar para lograr la finalización de este.

19
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.
20
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
servicios de alojamiento en la nube, 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
21
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 a 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é terminada 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
un enlace brindado gratuitamente por la herramienta que se utilice.
 El dueño de la empresa menciona que de momento prefiere mantener los
costos lo más bajo posible, por eso se debe buscar utilizar los servicios
22
de alojamiento en la nube más económicos, 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 del 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.
23
 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:

24
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,

25
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

26
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
27
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 es 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.
Será importante abordar temas como: infraestructura tecnológica (hardware y
software), redes y conectividad, personal y sus capacidades, procesos operativos y

28
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 sus
expectativas de 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)?
29
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?

30
Nos ayuda a entender cuales 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 compradores 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:

31
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
32
él 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 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 pérdida de conexión.

33
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.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.

34
 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 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.

35
Y por último el diagrama de casos de uso, es un tipo de diagrama UML que nos
permite ver cuáles 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 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 ayudarán 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 qué debe realizar la aplicación para que sea
satisfactoria.
3.2.1.1 Requerimientos Funcionales
Los requerimientos funcionales describen qué debe hacer el sistema:

36
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 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.

37
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 5 segundos.
2. El sistema debe soportar hasta 150 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:

38
 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 (PK): 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.

39
 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
administrador.
 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 utilizará en la página de
visualización de productos.
Pedidos:
 IDPedido (PK): sirve como identificador único para cada pedido.
 IDUsuario (FK): sirve para identificar a cuál usuario pertenece el pedido.
 Fecha: fecha en la que se ha realizado el pedido.

40
 Estado: estado actual del pedido, este puede ser Pendiente - 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 para identificar a cuál pedido pertenece el detalle.
 IDProducto (FK): sirve para saber que 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 para 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 para identificar a cuál carrito pertenece el objeto.
 IDProducto (FK): sirve para identificar cuál producto fue agregado al carrito.
 Cantidad: cantidad del producto agregado al carrito.

41
 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

42
Una vez definidas estas partes se puede crear el siguiente diagrama para
resumir lo mencionado:
Figura 2 Diagrama entidad relación clásico

43
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
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

44
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 cómo se desarrolla
un proceso, esto nos permite entender cómo avanza 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.
45
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:
Figura 4 Diagrama de flujo - Registro de usuario

46
Este proceso comienza desde la pantalla de registro de usuario en donde él
ingresa sus datos personales, luego el sistema confirma que los datos sean válidos
(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.

47
2. Inicio de sesión
Figura 5 Diagrama de flujo - Inicio de sesión
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
correctos y en caso de serlos crea una sesión y permite el acceso.

48
3. Recuperación de contraseña
Figura 6 Diagrama de flujo - Recuperación de contraseña
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

49
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
Figura 8 Diagrama de flujo - Agregar productos al carrito

50
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
Figura 9 Diagrama de flujo - Realizar pedidos

51
52
Al intentar realizar un pedido el sistema verifica 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

53
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

54
Figura 11 Diagrama de flujo - CRUD de tabla de productos
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

55
información de este, después de una verificación se agrega los datos en la base y se
notifica al usuario.
En caso de querer leer se desplegará los detalles de producto y el usuario podrá
visualizarlo.
Para la operación de “Actualizar” 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
del todo el registro del objeto seleccionado.
9. Proceso de CRUD de la tabla de usuarios
Figura 12 Diagrama de flujo - CRUD de tabla usuarios

56
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.
57
En caso de querer leer se desplegará los detalles de usuario y estos se podrán
visualizar.
Para la operación de “Actualizar” 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
del todo el registro del objeto seleccionado.
10. Gestión de pedidos
Figura 13 Diagrama de flujo - Gestión de pedidos

58
Se solicita los pedidos registrados y estos se despliegan como una lista con los
encargos con estado pendiente de primero.
11. Actualización de información de perfil
Figura 14 Diagrama de flujo - Actualizar información de perfil

59
Se muestra la información actual del usuario para que él decida que desea
cambiar, al terminar de modificar y después de una confirmación, el registro se
actualiza en la base de 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 cómo 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.

60
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
Figura 15 Diagrama de caso de uso

61
Ahora se procede a explicar cada caso de uso:
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.
62
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.
Tabla 3 Diagrama caso de uso - Registrarse
Nombre: Registrarse

63
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.
Tabla 4 Diagrama caso de uso - Iniciar sesión

64
Nombre: Iniciar sesión
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.
65
Tabla 5 Diagrama caso de uso - Agregar productos al carrito
Nombre: Agregar productos al carrito
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:
Se agrega un nuevo registro de carrito a la base de datos.
66
Tabla 6 Diagrama caso de uso - Realizar pedido
Nombre: Realizar pedido
Fecha: 15/07/2024
Descripción:
Permite al cliente realizar un pedido para recoger en la tienda.
Actores:
Cliente.
Precondiciones:
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 administrador sobre un nuevo pedido.
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.
67
Tabla 7 Diagrama caso de uso - Cambiar datos de perfil
Nombre: Cambiar datos de perfil
Fecha: 15/07/2024
Descripción:
Permite a los clientes actualizar su información personal en su perfil.
Actores:
Cliente.
Precondiciones:
Flujo normal:
1. El cliente accede a la página de perfil.
2. El cliente selecciona editar perfil.
3. El cliente actualiza su información (nombre, apellidos, teléfono, contraseña).
4. El cliente guarda los cambios.
5. El sistema verifica y actualiza la información del perfil en la base de datos.
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:
68
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
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:
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.
69
8. El sistema actualiza la contraseña.

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
Fecha: 15/07/2024
Descripción:
Permite al administrador realizar un CRUD en la tabla de productos.
Actores:
Administrador.
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.
70
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
Fecha: 15/07/2024
Descripción:
Permite al administrador realizar un CRUD en la tabla de usuarios.
Actores:
Administrador.
Precondiciones:
71
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
Fecha: 15/07/2024
Descripción:
Permite al administrador ver una lista de pedidos realizados.
Actores:
Administrador.
72
Precondiciones:
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
Nombre: Cambiar el estado del pedido
Fecha: 15/07/2024
73
Descripción:
Permite al administrador actualizar el estado del pedido.
Actores:
Administrador.
Precondiciones:
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
Es importante plantear las tecnologías que se utilizarán para desarrollar la
aplicación, hay que buscar que estas cumplan con los requerimientos del sistema y que
faciliten la programación.
Con esto en mente se escogieron las siguientes tecnologías:

74
ASP.NET Core Web App MVC .NET 8.0: moderno el cual se utiliza para construir
aplicaciones web empleando el patrón de diseño MVC (Model -View - Controller). Es
completamente modular, lo que significa que se pueden incluir solo los componentes
necesarios, lo que resulta en aplicaciones más ligeras, escalables y eficientes.
NET 8.0 representa la versión del marco de trabajo siendo una de las últimas
versiones lanzadas, este vino con mayor rendimiento, posibilidad de utilizar Blazor,
consultas de Lazy Loading, entre otras cosas.
ASP.NET Core es la plataforma de desarrollo, tiene muchas ventajas como ser
modular y más ligero, además cuenta con integraciones a ciertas tecnologías, se puede
utilizar código tipo Razor y es una de las plataformas más rápidas de desarrollo web.
El patrón de diseño MVC es un diseño arquitectónico ampliamente utilizado en el
desarrollo de software, divide la aplicación en tres partes las cuales cumplen distintas
funciones, esto facilita su mantenimiento de código y la escalabilidad del proyecto:
Model: es la parte lógica de los datos de la aplicación, suelen estar vinculados
con la base de datos donde interactúan con las entidades y manejan la persistencia de
datos, esto se logra mediante clases de C# las cuales representan las tablas.
View: gestiona la presentación y las interfaces del usuario, suelen utilizar Razor
el cual es un motor de vista que permite combinar código C# con HTML de manera
sencilla, normalmente no contienen lógica del negocio, solo se encarga de mostrar
información al usuario.
Controller: procesa las solicitudes del usuario e interactúa con las vistas y el
modelo, gestiona la lógica de la página, al recibir una petición interactúa con el modelo
75
para obtener los datos necesarios y luego selecciona la vista para presentarla al
usuario.
Se eligió esta tecnología debido a que cumple con las necesidades para la
aplicación, es una tecnología con mucha documentación y una comunidad activa lo
cual garantiza un acceso a recursos para resolver problemas y, también, es el lenguaje
que más domino en la actualidad se traduce en un desarrollo más rápido y eficiente, si
bien tecnologías como NodeJS ofrecen mayor velocidad, esta opción ofrece más
rendimiento en aplicaciones de esta escala.
Ventajas:
1. El diseño divido de MVC mantiene ordenado el código facilitando su creación y
mantenimiento.
2. Ayuda a tener URLs más ordenadas.
3. Se pueden utilizar tecnologías como Entity Framework Core, Blazor y Razor.
4. Hay abundante documentación en línea en caso de ser necesaria una
investigación.
Desventajas:
1. Se necesitan muchas configuraciones para los inicios de los proyectos.
2. Algunos aspectos como lo interactividad avanzada o lograr ciertas
funcionalidades pueden requerir un mayor esfuerzo.
Microsoft SQL Server 2022:

76
Microsoft SQL Server es un sistema de gestión de base la cual puede almacenar
y administrar grandes cantidades de datos de forma segura y eficiente, además posee
sistemas de autentificación, cifrado y auditoría.
Es muy utilizadas en pequeñas y medianas empresas en sistemas de gestión y
en sitios web, además de todas estas ventajas se eligió principalmente debido a su
integración con tecnologías como.NET y Visual Studio. Su combinación de seguridad,
rendimiento, escalabilidad y fácil integración con herramientas de desarrollo hace que
sea una opción preferida.
Cuenta con la posibilidad de utilizar SQL Server Management Studio la cual es
una herramienta de administración de SQL Server que proporciona una interfaz gráfica
sencilla e intuitiva reduciendo la cantidad de comandos necesarios para realizar el
banco de datos, permite analizar los tiempos de respuesta, generar copias de
seguridad y cuenta con editor de consultas y autocompletado para facilitar el trabajo.
Ventajas:
1. La integración con ASP.NET y otros productos de Microsoft lo convierte
en una opción interesante.
2. La interfaz gráfica de permite gestionar la base de datos de manera
sencilla acelerando la creación de esta.
3. Al ser un sistema muy utilizado se cuenta con mucha documentación en
caso de ser necesaria.
Desventajas:
1. Puede ser muy exigente en temas de recursos del servidor.

77
2. Se requiere amplio conocimiento de la tecnología para usarlo de manera
correcta.
Bootstrap v5.1.0:
Es un framework front-end el cual se utiliza en el desarrollo de sitios web, es
modular, ligero, ayuda a crear diseños responsivos, lo cual es importante para este
proyecto, posee clases utilitarias como “mt-{n}” las cuales permiten aplicar estilos
directamente en HTML sin tener que crear un CCS adicional e incluye una amplia
variedad de componentes como botones, formularios, modales entre otros.
Además, el sistema de Flexbox y CSS permiten crear sistemas que se adapten a
las pantallas de distintos tamaños y como los componentes son estilizados por defecto
se garantiza una apariencia coherente en todo el proyecto.
Bootstrap será utilizado en elementos simples como botones o en la barra de
navegación, además se utilizarán las clases utilitarias, lo cual lo hace una excelente
opción.
Ventajas:
1. Acelera el desarrollo evitando tener que crear estilos desde cero para
cada componente
2. Permite el uso de clases utilitarias las cuales ayudan a mantener el
código limpio.
3. Garantiza el diseño responsivo de la página sin esfuerzo adicional.
Desventajas:
78
1. Las interfases creadas con Bootstrap pueden tener un estilo similar dando
sensación de producto genérico.
2. Se requiere conocimiento extra para poder utilizar Bootstrap de manera
adecuada.
Google Fonts:
Permite utilizar fuentes personalizadas las cuales no están de manera
predeterminada en los sistemas, mejorando el diseño y la identidad de la marca.
Para el proyecto se espera utilizar la fuente “Work Sans” cargándola desde
Google Fonts, se aplicará en toda la página brindando una mejor calidad grafica.
Este servicio es muy utilizado por su accesibilidad, facilidad de integración y por
ser un recurso optimizado para la web. Las fuentes de Google Fonts son de código
abierto, lo que permite su uso sin restricciones comerciales ni licencias costosas.
Ventajas:
1. Se puede agregar fácilmente al proyecto con una línea de código.
2. Posee soporte para múltiples idiomas.
3. Funciona en la mayoría de los navegadores modernos.
4. Están optimizadas para tener el mínimo impacto en el rendimiento del
sitio web.
Desventajas:
1. Requiere acceso a internet, en caso de que un usuario tenga problemas
de conectividad obliga al navegador a utilizar fuentes predeterminadas.

79
Con estas tecnologías se espera cumplir con todas las necesidades, ahorrar
tiempo en el desarrollo y mejorar el diseño del sitio aumentando la sensación de
calidad.
Servicio en la nube de Microsoft Azure:
Para poder implementar el servicio para que todos los usuarios puedan acceder
se utilizará la plataforma de servicios en la nube de Microsoft Azure ya que cuenta con
una infraestructura estable e integraciones con las otras tecnologías seleccionadas.
Mediante esta herramienta podremos migrar la base de datos local creada para
el desarrollo y utilizarla en la aplicación, además, se puede exportar la solución del
proyecto para garantizar su publicación en la web.
Ventajas:
1. Posee una amplia gama de servicios lo cual permite administrar toda la
infraestructura con una misma aplicación.
2. Se integra fácilmente con otras herramientas de Microsoft como Visual
Studio y SQL Server.
3. Se paga solamente por los recursos utilizados, lo cual permite reducir
gastos en sitios web que no son muy concurridos.
Desventajas:
1. Es un programa complejo de utilizar con diversas opciones por lo cual
requiere un conocimiento avanzado para poder utilizarlo.

80
2. Aunque el modelo de pago sea ventajoso, igualmente es un servicio de
pago.
3. Depende de los servidores de Microsoft, en caso de que estos presenten
problemas afectarían directamente a la aplicación.
3.3 Resultados
Con todos estos componentes listos podemos comenzar con la creación del
sistema, todos los elementos guiaran el desarrollo de la página web, esto ayudara a
visualizar la estructura del proyecto facilitando la comprensión de la interacción de los
módulos y alinear las expectativas del proyecto para que todas las partes estén en la
misma página.
3.4 Análisis y discusión
Se ha creado una estructura sólida para empezar a trabajar, se espera respetar
la mayoría del diseño creado para respetar la concordancia, pero el proyecto aún
puede cambiar en el desarrollo.
Los diagramas obtenidos muestran que el proyecto es viable, siguiendo la guía
se logrará que el desarrollo avance sin inconvenientes y en caso de que hubiera uno,
con unos ligeros cambios, se podrán resolver.
4.1 Preparación y primeros pasos
Para comenzar a trabajar debemos descargar una aplicación que nos sirva
como ambiente de desarrollo, se utilizará Visual Studio 2022, este cuenta con
81
herramientas que ayudan con la creación, depuración y mantenimiento de aplicaciones,
esto nos ayudara a mejorar la productividad.
El primer paso es crear la base de datos, la cual, almacena la información de
nuestro programa, con SQL Server Management Studio 19 podemos realizar consultas
directamente para facilitar la creación de esta.
Mediante el comando “create database” podemos crear el banco de datos, para
este proyecto le asignaremos el nombre “SuperAlfoliDB”, después debemos ingresar
para poder crear las tablas; basándonos en el diagrama de entidad relación, podemos
utilizar el “create table” para estructurar cada una de las tablas necesarias, hay que
incluir los campos requeridos y su tipo de dato a almacenar, es importante que los
campos identificadores sean “identity (1,1)” (1,1 representa que el campo incrementa
de 1 en 1) y que sea “primary key”, además, los campos de llaves foráneas deben
utilizar el “foreign key references Tabla(Campo)” para especificar a que tabla hacen
referencia. No se utilizará la tabla de sesión ya que el manejo de sesiones se manejará
con una librería de ASP.NET.
Figura 16 Creación de base de datos

82
Figura 17 Diagrama final de la base de datos

83
Ahora en Visual Studio debemos crear un proyecto, este debe ser con la plantilla
de “ASP.NET Core Web App (Model – View - Controller)” y le ponemos como nombre
“SuperAlfoliWebApp”.
Figura 18 Creación del proyecto

84
En el proyecto debemos realizar la línea de conexión a la base de datos, esta
se realiza en el archivo “appsettings.json” y debe estar compuesta del: nombre del
servidor, el nombre de la base de datos y el tipo de conexión, es importante mencionar
que hay que cambiar este texto cuando se suba a la nube.
Debemos agregar en el archivo `Program.cs` un
“builder.Services.AddDbContext”, el cual nos ayuda a crear el contexto de la conexión a
la base de datos, para ello debemos enviar como parámetro el objeto json creado
anteriormente.
Ahora debemos instalar el paquete de EntityFramework con el cual podremos
crear los modelos utilizando nuestra base de datos como apoyo, debemos escribir en la
consola de administración de paquetes el siguiente comando “Scaffold-DbContext
“Server=NombreServer Database=NombreBaseDeDatos Trusted_Connection=True”
Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models” esto nos permite crear
los modelos que hacen referencia a cada tabla en nuestra base de datos.
Figura 19 Agregar paquete de EntityFramework

85
Figura 20 Agregar paquete de EntityFramework 2

86
Figura 21 Creación de la cadena de conexión en "appsettings.json"
Figura 22 Creación del Builder Services en el "Program.cs"
Figura 23 Generar modelos mediante la estructura de la base de datos
Con esto listo tenemos el proyecto con una conexión a la base de datos
mediante el DbContext y una carpeta con los modelos que hacen referencia a cada
tabla.
87
Figura 24 Carpeta con los modelos creados
4.2 Apartado del cliente
Ahora modificamos el “Layout.cshtml” el cual contiene la barra de navegación, e
importa los archivos requeridos para que funcione la página (hojas de estilo, fuentes de
Google Fonts, Scripts, entre otros), cambiamos las opciones predeterminadas y
agregamos los hipervínculos necesarios (Inicio, Lista de productos, Cuenta, Carrito),
además implementamos una función que verifica si el usuario ha iniciado sesión, si es
el caso mostrará el botón para acceder al carrito
Figura 25 Modificación del "Layout.cshtml" Incluir importaciones

88
Figura 26 Modificación del "Layout.cshtml" Agregar botones de navegación
Para modificar ciertos estilos fijos o agregar algunos necesarios se crea el
archivo “site.css” ubicado en la carpeta css en la raíz del proyecto, aquí se añadirán
configuraciones para los elementos que deseamos cambiar.
Es importante mencionar que se necesita dos layout en el proyecto, una para
usuarios clientes y otra para administradores, los botones del administrador son
distintos y dan acceso a opciones como el inicio de administrador, gestión de la tabla
productos, gestión de la tabla de usuarios y un apartado para ver los pedidos
realizados.
Figura 27 Botones de navegación en "AdminLayout.cshtml"

89
La página se divide en dos partes, una en donde los clientes podrán ver una lista
de productos e información del local y al iniciar sesión poder crear pedidos de tipo
recolección al local, y otra que, si al ingresar al sistema, la cuenta es de tipo
administrador, el usuario podrá realizar funciones típicas de gestión de la página como
las mencionadas anteriormente, para verificar el tipo de cuenta actual se lleva registro
de la sesión mediante el bloque de configuración de ASP.NET Core el cual permite
almacenar y mantener datos temporales, este se coloca en el archivo “Program.cs”,
funciona mediante la creación de una cookie de sesión y le asocia valores como, el
tiempo de inactividad, si es necesario las cookies y los datos a guardar, en cada
solicitud la cookie se envía al servidor permitiendo que se acceda a los datos
almacenados.
Figura 28 Configuración de los servicios de sesiones de ASP.NET Core

90
En la pantalla de inicio se escribió un texto descriptivo para que el navegante
entienda el contexto de la empresa, hay un marco donde se puede ver la ubicación del
local en el mapa y un apartado donde se muestra los horarios de atención y el teléfono.
Figura 29 Pantalla de inicio
En el apartado de “PRODUCTOS” se ve una lista de todos los productos
disponibles con un botón de “Agregar al carrito”, se puede filtrar los resultados por
categorías, o buscar por nombre, al intentar agregar al carrito solicita al cliente iniciar
sesión para poder continuar; los clientes autentificados podrán agregar artículos a su
carrito digitando la cantidad deseada.
Figura 30 Página de productos

91
Para poder desplegar la lista de los productos usaremos el “_context” la cual es
una instancia del contexto de la base de datos, esta se utiliza para interactuar con ella
directamente, para esto es que creamos el “DbContext” y los modelos, mediante la
cadena de conexión este se conecta a la base de datos, cuando se llama a los
métodos correspondientes, el Entity Framework Core construye los SQL
correspondientes a la consulta generada y los ejecuta, esto nos facilita las tareas de
CRUD (Crear, Leer, Actualizar y Eliminar) y nos ayuda a manejar la gestión de cambios;
esta clase será muy usada a lo largo del proyecto cada vez que necesitemos realizar
una consulta a la base de datos.
Figura 31 Configuración del DbContext en el "Program.cs"

92
Figura 32 Ejemplo de declaración del DbContext en una clase controladora
Con lo anterior en mente solo debemos solicitar todos los registros de los
productos y enviarlos al “view” para darles un formato; pero, debido a que en la página
se puede filtrar por categoría o por búsqueda, hay que agregar otros procesos en caso
de que se haya optado por una de estas opciones. Se crea una variable que almacena
la consulta que se vaya a realizar y se pasa por un grupo de consultas, si existe una
categoría seleccionada el valor será la solicitud de todos los artículos correspondientes,
si no, verifica si se ha escrito un término de búsqueda, si es así, busca productos
donde el nombre contenga la cadena escrita; se crea una función llamada “GetImage”
que nos ayuda a transformar la imagen de un bitmap a una foto completa.
Figura 33 Método para desplegar lista de productos verificando si existe algún filtro por
categoría o nombre
93
Figura 34 Método "GetImage"
En la parte de “CUENTA” permite iniciar sesión utilizando las credenciales de la
cuenta, en caso de que no recuerde la contraseña podrá recuperarla accediendo al
vinculo “Recuperar contraseña” en la cual al ingresar el correo se envía un enlace de
recuperación para poder cambiar la clave. O en caso de que no se posea una cuenta
pueda crear una con unos simples pasos. Al ingresar al sistema se puede acceder al
94
apartado de “CUENTA” en donde vienen nuestros datos registrados, podemos cambiar
ciertos datos en caso de que sean erróneos o desactualizados o se puede cerrar
sesión si es necesario; Además, nos abre el apartado de “CARRITO” en donde
podemos ver los artículos que hemos añadido y realizar un pedido.
Figura 35 Método para mostrar los detalles de la cuenta
Figura 36 Métodos para editar información de la cuenta

95
Figura 37 Página para ver detalles de cuenta y cerrar sesión
Figura 38 Página para editar información de la cuenta

96
Figura 39 Método para agregar productos al carrito

97
Figura 40 Método para desplegar lista de productos en carrito

98
Figura 41 Método para eliminar objetos del carrito

99
Figura 42 Página del carrito
El inicio de sesión y el registro utiliza una encriptación tipo SHA256 el cual
genera una salida de 32 bytes a partir de una entrada de cualquier tamaño, es un
algoritmo muy seguro en general, funciona de manera rápida y precisa y viene
integrada en las bibliotecas de C#. Para su uso creamos un método llamado
“HashPassword” la cual encripta la clave a la hora de guardarla o de realizar una
consulta.
Figura 43 Pantalla de inicio de sesión

100
Figura 44 Pantalla de registro

101
102
Figura 45 Pantalla para recuperar contraseña
Figura 46 Método "HashPassword" para encriptar contraseñas

103
Para iniciar sesión busca un usuario con el cual concuerde el correo y después
verifica la contraseña, en caso de ser correcto, redirecciona a su correspondiente
página inicial (depende si es administrador o cliente) y se crea la sesión, si no
encuentra coincidencias muestra un error.
Figura 47 Método de inicio de sesión

104
Para registrar muestra una nueva vista formulario donde se deben agregar datos
como, nombre, apellidos, correo, teléfono y contraseña, en caso de que la información
brindada sea válida se guarda el usuario nuevo en la base de datos.
Figura 48 Método para registrar usuario
Para recuperar la contraseña se solicita al usuario el correo con el cual se
registró, luego se envía un enlace de recuperación el cual se crea mediante una ficha
aleatoria; si el usuario entra en el enlace del correo su clave será cambiada a una
nueva generada por un método el cual selecciona aleatoriamente seis caracteres entre
letras (mayúsculas y minúsculas) y números (del 0 al 9) para que la persona pueda
ingresar con este código a su cuenta y cambiarlo por una nueva.

105
Figura 49 Método para solicitar recuperación de contraseña
Figura 50 Método para cambiar la contraseña
Al realizar el pedido se envía un correo de confirmación de pedido al correo.
Para lograr esto se utiliza la clase “SmtpClient” de la biblioteca “System.Net.Mail” la
cual permite enviar estos mensajes mediante el protocolo SMTP (Simple Mail Transfer
106
Protocol), para ello debemos brindar las credenciales y configurar ciertas opciones para
lograr el objetivo.
En el “appsetting.json” debemos establecer las configuraciones que se van a
utilizar como: el host, el puerto, el nombre, el email y la contraseña, para este sistema
creamos el correo [email protected] el cual es el encargado de notificar a los
usuarios el estado de su pedido. Es importante activar ciertas opciones en la cuenta
para que permita ser usada en aplicaciones.
Figura 51 Configuración para enviar correos en el "appsetting.json"
Con esto listo solo debemos crear un método que envié los correos los cuales
estarán en la clase “EmailService.cs” en donde se debe verificar las credenciales,
después crear el correo, agregar los destinatarios e intentar enviar el correo de manera
asincrónica, esta clase será usada cada vez que se necesite enviar un correo a un
usuario (notificando el estado del pedido, para cambiar de contraseña, cuando se
registra un cliente).
107
Figura 52 Ejemplo de correo recibido para recuperar la contraseña
Figura 53 Método para enviar correos en la clase "EmailService.cs"

108
Figura 54 Método para realizar un pedido
4.3 Apartado de administrador
Si la cuenta es de tipo administrador será llevado al apartado de gestión en
donde tiene otras opciones; esto se verifica mediante la clase
“AdminAuthorizeAttribute.cs” la cual es un atributo personalizado que se utiliza para
restringir el acceso a las acciones que solo debería realizar los super usuarios, esta
109
verifica el rol del usuario y en caso de no tener rol (no ha iniciado sesión) o ser cliente
será redirigido a la página de acceso restringido, para aplicar el atributo debemos ir a
las acciones en el controlador y añadir la siguiente línea de código “[AdminAuthorize]”.
Figura 55 Estructura de clase "AdminAuthorizeAttribute.cs"
Una vez verificado el usuario este podrá acceder a distintas funciones. En el
apartado de “PRODUCTOS” se podrá agregar productos nuevos y eliminar, modificar o
ver detalles de los ya existentes, se utiliza de nuevo el “DbContext” para interactuar con
la base de datos, primero se hace una solicitud para desplegar todos los productos en
una lista.
Figura 56 Código Razor para desplegar lista de productos

110
Figura 57 Página para los administradores para manejar los productos
Para crear un nuevo registro, se solicita la información del artículo y una imagen
la cual debe ser transformada a un stream de memoria y después a un arreglo, de esta
manera podemos guardarla sin problema en la base de datos, con el método
“SaveChangesAsync” se crea el producto.
Figura 58 Método para crear un nuevo producto

111
Figura 59 Página para agregar un nuevo producto

112
Para eliminar un artículo se envía el número identificador por método POST,
después, se busca la existencia de este registro en la base de datos, cuando el usuario
confirma la eliminación se utiliza el “.Remove(producto)” para borrar los datos.
Figura 60 Código para verificar la existencia del producto
Figura 61 Código para eliminar producto después de confirmación

113
Figura 62 Página de eliminación de producto
Y por último para editar se solicitan los datos actuales para desplegarlos, cuando
el administrador termina de modificar la información presiona el botón guardar en
donde con el comando “.SetValues(producto)” se actualiza la información.
Figura 63 Código para desplegar información actual del producto

114
Figura 64 Código para guardar los nuevos datos ingresados
Figura 65 Página para editar datos de los productos

115
En la parte de “USUARIOS” permite realizar las mismas acciones de CRUD
(Create, Read, Update, Delete) con las cuentas de las personas registradas,
claramente no podrá cambiar datos como el correo o la contraseña de un usuario, pero
si su rol, nombre, apellidos, teléfono y estado de la cuenta (En caso de que desee
suspenderla por algún motivo especial), el proceso es el mismo que con la tabla de
productos con algunas variaciones como, al crear un usuario se envía al correo una
contraseña temporal.
Figura 66 Código para generar lista de usuarios
Figura 67 Pantalla con lista de usuarios

116
Figura 68 Método para crear usuario
Figura 69 Página para crear un nuevo usuario

117
Figura 70 Métodos para eliminar usuarios (solicitud de confirmación y eliminación)
Figura 71 Página para eliminar usuario

118
Figura 72 Código para editar usuarios

119
Figura 73 Página para editar usuarios
En la pestaña de “PEDIDOS” se puede ver una lista de pedidos, esta está
organizada en colores según su estado actual (verde: pendiente, negro: finalizado, rojo:
cancelado).
Figura 74 Código Razor para generar lista de pedidos y organizarlo según su estado
actual.
120
Figura 75 Vista de lista de pedidos

121
Al acceder a un pedido se pueden ver datos de interés como la fecha y hora en
el que se realizó, el estado, el total, la información del cliente y los productos
solicitados; en caso de que no haya disponibilidad del producto se puede cambiar la
cantidad o directamente eliminarlo, cuando se termine de armar el pedido se presiona
el botón “Finalizar Pedido” el cual cambia el estado actual de la solicitud y envía un
mensaje al cliente indicando que ya puede acudir al local a recoger el pedido, además
incluye todos los cambios realizados al pedido y el nuevo total. También, según la
necesidad lo requiera (el pedido está mal, lo hicieron dos veces, no hay ningún artículo,
no se pudo contactar al cliente, entre otros) se puede presionar la opción de “Cancelar
pedido” la cual lo asigna como cancelado y se envía un mensaje al usuario avisando
que su pedido ha sido denegado.
Figura 76 Código para ver detalles del pedido seleccionado
Figura 77 Página para visualizar los detalles del pedido

122
Figura 78 Método para cambiar la cantidad de un producto en el pedido
Figura 79 Método para cambiar el estado del pedido a finalizado

123
Figura 80 Método para cambiar el estado del pedido a cancelado

124
Figura 81 Método para eliminar productos del pedido actual
Figura 82 Método para recalcular el total del pedido después de modificar la cantidad
de un producto o eliminarlo
125
4.4 Resultados
Con esto finalizado la aplicación está lista para empezar a funcionar, se ha
cumplido con todos los requerimientos establecidos en el planteamiento del proyecto,
se cuenta con una página web la cual permite a los clientes visualizar los productos
disponibles en la tienda y realizar pedidos de recolección al local, estos pueden iniciar
sesión, registrarse, cambiar su información de cuenta y administrar su carrito; al
realizar un pedido reciben un correo electrónico que les avisa cuando su pedido esté en
curso, listo para recoger o haya sido cancelado.
Además, permite a los administradores poder gestionar el inventario y a los
usuarios registrados; visualizar y administrar los pedidos recibidos, permitiendo
modificar la estructura del pedido en caso de ser necesario y notificando al cliente de
estos cambios y cuando puede venir a retirar su pedido.
Se espera que el sitio web cumpla con todas las necesidades de manera
efectiva y con un uso intuitivo.
5. Capítulo 5: Objetivo 4 Implementación
5.1 Procedimiento
Con la página web lista solo falta hacerla accesible para el público, para ello
utilizaremos la herramienta Microsoft Azure la cual nos permite alojar los distintos
componentes de la aplicación en la nube y publicar la solución para que los usuarios
pueden interactuar con el sistema.

126
El primer paso es crearnos una cuenta en Azure, para ello utilizaremos el correo
electrónico [email protected] el cual se entregará junto a sus credenciales de
ingreso al dueño del super al finalizar. Debemos migrar la estructura de la base de
datos que utilizamos en el ambiente de prueba a una nueva base creada en la nube,
para ello debemos crear el banco de datos en Azure, para lograrlo nos dirigimos al
apartado de “Bases de datos SQL” y seleccionamos crear; después llenamos el
formulario con la información necesaria, entre ellos se encuentra, el nombre de la base,
el servidor donde se alojará, la suscripción y las opciones de seguridad como la
creación del superadministrador el cual se nombrará “sys_superalfoli” y su contraseña
también se compartirá con el dueño del local.
Figura 83 Creación de la base de datos en Azure

127
Ahora debemos instalar la aplicación de “Azure Data Studio” y junto a ella la
extensión “Azure SQL Migration” la cual nos facilita la migración de la base de datos
con un formulario.
Figura 84 Instalación de la extensión Azure SQL Migration
Ahora debemos conectarnos a la base de datos que creamos mediante el
superadministrador y ahí seleccionaremos la opción de “Nueva migración” en el
apartado de extensiones en el administrador de la conexión.
Figura 85 Conexión y apartado de extensiones

128
Llenando los campos con la información que se solicita como la base de datos a
migrar, la cuenta de Azure destino, el nombre de la base en la nube, las credenciales
del superadministrador y las tablas a migrar el proceso se vuelve casi automático,
logrando así, tener la réplica de la base en la nube.
Figura 86 Proceso para migrar la base de datos local a la nube

129
El siguiente paso es subir la aplicación a Azure, pero primero debemos realizar
algunos cambios al código de la página. Debemos obtener la nueva cadena de
conexión que se utilizará para interactuar con la base de datos, Azure nos brinda una
cadena ya hecha en el apartado de “Connection Strings"; esta debe reemplazar a la
utilizada en el ambiente de prueba, de esta manera el “ContextDb” interactuará con la
nueva base creada.
Figura 87 Obtener la nueva cadena de conexión en Azure

130
"appsettings.json"
"SuperAlfoliDbContext.cs"
Con estos cambios solo debemos exportar el proyecto a la nube, primero
debemos revisar que todo ande correctamente y después nos seleccionamos la opción
“Publicar SuperAlfoliApp”, al iniciar sesión podemos publicar directamente el proyecto
en Azure; además nos genera el enlace a la página que debemos brindar a los clientes
para que empiecen a utilizar la herramienta (enlace de la página: https://super-alfoli-
azd0b9gahebza3bb.eastus2-01.azurewebsites.net).
Figura 90 Opción "Publicar SuperAlfoliApp"

131
Figura 91 Apartado para publicar el proyecto
6. Capítulo 6: Conclusión
Este trabajo logró desarrollar un sistema que permite la gestión de inventarios y
realizar pedidos de recolección al local de manera satisfactoria, proporcionando

132
herramientas para aumentar la presencia en línea del Super Alfolí. El sistema cuenta
con un apartado de visualización de artículos para los clientes, un inicio de sesión con
encriptación de claves, sistema para recuperar contraseñas, módulo de carrito, gestión
de productos y usuarios y manejo de pedidos, lo cual cumple con todo lo expuesto en
los alcances del proyecto.
Durante el desarrollo uno de los principales desafíos fue la constante
investigación para agregar ciertas funciones como el bloqueo a usuarios no
autorizados, los métodos para enviar correos, sistema de encriptación de contraseñas
con SHA-256, despliegue de listas en formatos específicos y aprendizaje sobre manejo
de aplicaciones en la nube, todo este esfuerzo no solo mejoró la calidad de la página,
sino que, también fortaleció el conocimiento en estas áreas de ASP.NET MVC.
Se espera que, con la implementación del sistema, se manejen los recursos del
inventario de una manera más eficiente, aumente la cantidad de clientes de áreas
lejanas que visiten la página y encuentren los productos que necesitan, que mejoren
las ventas gracias al sistema de pedidos de recolección al local y que facilite a los
compradores el proceso de adquirir artículos.
Si bien el sistema cumple de manera satisfactoria todos los requerimientos, aun
se necesita algunas gestiones para poder ser utilizada, se brindará una capacitación a
los empleados del Super Alfolí para que sepan de qué manera utilizar la aplicación, de
esta manera los miembros podrán incluir a los usuarios administradores y los productos
que posean actualmente para que los usuarios lo puedan visualizar sin ningún
problema, además, ellos deberán difundir la existencia del sistema para que los nuevos
clientes puedan aprovechar estas herramientas.

133
En conclusión, este proyecto ha cumplido con los objetivos propuestos,
logrando, implementar una aplicación que satisfaga las necesidades planteadas por la
información obtenida mediante una entrevista, diseñando un sistema que cumple con
los requisitos mencionados para facilitar el desarrollo de este mediante el uso de las
tecnologías planeadas completando así una página web que realiza todas las acciones
necesarias para aumentar la presencia en línea del Super Alfolí.

134
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
135
136
Anexos
Anexo A. Presentación de anteproyecto (A mano)

137
138
139
140
141
142
Anexo B. Presentación de anteproyecto (Digital)

143
144
145

Documento de Proyecto Alejandro Salas Casanova Terminado 4

Cargado por

Copyright:

Formatos disponibles

Documento de Proyecto Alejandro Salas Casanova Terminado 4

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Documento de Proyecto Alejandro Salas Casanova Terminado 4

Cargado por

Copyright:

Formatos disponibles

Universidad Hispanoamericana

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

Alejandro Salas Casanova

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

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

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

1.1.2 Justificación del Anteproyecto.............................................................13

1.2 Definición del problema.............................................................................15

1.2.2. Problema General..............................................................................16

1.2.3. Problemas Específicos.......................................................................17

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

1.3.1. Objetivo General................................................................................18

1.3.2 Objetivos específicos..........................................................................19

1.4. Alcance y Limitaciones..............................................................................20

1.4.1 Alcance del Proyecto...........................................................................20

1.4.2 Limitaciones del Proyecto...................................................................21

1.5 Cronograma del Proyecto..........................................................................22

Tabla 1 Cronograma del Proyecto.....................................................................24

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

2.1 Definición de conceptos.............................................................................27

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

2.3.1 Infraestructura Tecnológica.................................................................31

2.3.2 Personal y Gestión..............................................................................31

2.3.4 Experiencia del Cliente y Expectativas...............................................32

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

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

3.1 Definición de conceptos.............................................................................33

3.2.1 Establecer los requerimientos.............................................................35

3.2.1.1 Requerimientos Funcionales............................................................35

3.2.1.2 Requerimientos No Funcionales......................................................37

3.2.2 Diagrama entidad relación..................................................................37

3.2.3 Diagrama de flujo................................................................................44

3.2.4 Diagrama de caso de uso...................................................................58

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

3.2.5 Tecnologías y estilo.............................................................................71

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

4. Capítulo 4: Desarrollo del sitio web.................................................................78

4.1 Preparación y primeros pasos...................................................................78

4.2 Apartado del cliente...................................................................................84

4.3 Apartado de administrador.......................................................................105

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

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

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

Figura 1 Diagrama Causa - Efecto.....................................................................16

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

Figura 3 Diagrama modelo relacional.................................................................43

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