FACULTAD DE CIENCIAS E INGENIERÍA
CARRERA DE INGENIERÍA DE SOFTWARE
TEMA:
Componente Practico
INTEGRANTES:
Sonnia Patricia Narváez Herrera
Uber Alexi Olivo Arteaga
Cristhian Ariel Abad Figueroa
ASIGNATURA:
Estructura de Datos
DOCENTE:
Ing. Rodrigo Josue Guevara Reyes
FECHA DE ENTREGA:
16/07/2025
PERIODO:
2026-04-13 2026-08-08
MILAGRO-ECUADOR
COMPONENTE PRÁCTICO 2
Índice de Contenidos
1. Objetivo del Proyecto
2. Descripción del Problema
3. Diseño y Arquitectura de la Solución
4. Implementación de Funcionalidades Obligatorias
4.1. Representación de la Información (Modelo de Datos)
4.2. Registrar y Mostrar Contactos (CRUD - Create & Read)
4.3. Búsqueda de Contactos en Tiempo Real
4.4. Edición de un Contacto (Update)
4.5. Eliminación de un Contacto (Delete)
5. Sistema de Validaciones Obligatorias
6. Código Fuente
7. Conclusión
1. Objetivo del Proyecto
Desarrollar una aplicación web interactiva utilizando el framework Django que
permita gestionar de forma digital y eficiente la agenda de contactos de los
empleados de una empresa. El sistema debe garantizar operaciones completas
de gestión (CRUD), validación estricta de datos y una experiencia de usuario
fluida mediante búsquedas y actualizaciones en tiempo real.
2. Descripción del Problema
Actualmente, la empresa administra los contactos de sus empleados de
manera manual. Este enfoque tradicional genera dificultades para encontrar
información rápidamente, ralentiza la actualización de datos cuando existen
cambios y es propenso a errores humanos. Para solucionar esto, se ha
construido un sistema web centralizado que automatiza el proceso, organiza la
información y facilita el acceso inmediato a los datos del personal.
3. Diseño y Arquitectura de la Solución
Para cumplir con las recomendaciones de "separación clara entre lógica de
negocio e interfaz" y crear un entorno intuitivo, el grupo decidió implementar
una arquitectura moderna basada en una API RESTful interna:
Backend (Lógica de Negocio): Construido en Python con Django. Se encarga
de la conexión a la base de datos (SQLite), el modelado de datos y las
validaciones de seguridad mediante ModelForm. Expone endpoints (rutas) que
devuelven información en formato JSON.
Frontend (Interfaz): Construido en un único archivo ([Link]) utilizando
HTML5, CSS puro (con variables y diseño responsivo) y JavaScript nativo
(Vanilla JS). Se comunica con el servidor utilizando la función fetch(), lo que
evita recargas de página y hace que la aplicación sea extremadamente rápida.
4. Implementación de Funcionalidades Obligatorias
A continuación, se detalla cómo se resolvió cada requerimiento del proyecto:
4.1. Representación de la Información (Modelo de Datos)
Cada contacto es tratado como un objeto único. Se creó el modelo Contacto en
[Link] almacenando:
id: Autogenerado por Django (Primary Key).
nombre: Campo de texto (CharField).
correo: Campo específico de email (EmailField).
telefono: Campo de texto validado (CharField).
Se incluyó un método to_dict() para serializar el objeto a formato JSON
fácilmente.
4.2. Registrar y Mostrar Contactos (CRUD - Create & Read)
La interfaz cuenta con un formulario principal y, justo debajo, una cuadrícula
reactiva que lista los contactos almacenados.
Al llenar los datos y presionar el botón "Guardar", JavaScript captura la
información y la envía de forma asíncrona mediante peticiones POST al
servidor.
Una vez guardado exitosamente, la lista inferior se re-dibuja al instante
consumiendo la ruta GET /api/contactos/ e incluyendo botones de "Editar" y
"Eliminar" en cada tarjeta.
4.3. Búsqueda de Contactos en Tiempo Real
Se implementó una caja de búsqueda dinámica en la parte superior sin botón
de "Buscar".
Innovación técnica: Para evitar saturar el servidor con múltiples consultas
rápidas mientras el usuario escribe, se implementó una función debounce en
JavaScript. Esta función crea un micro-retraso (150ms) que espera a que el
usuario termine de tipear para enviar la consulta.
El backend recibe el texto, filtra los registros ignorando mayúsculas y
minúsculas (ej. "ju" encuentra a "Juan"), y la lista se actualiza
automáticamente.
4.4. Edición de un Contacto (Update)
Al hacer clic en el botón "Editar" de cualquier tarjeta:
Los datos del contacto seleccionado se cargan automáticamente de vuelta en
el formulario superior.
La interfaz alerta al usuario mostrando un banner amarillo informativo, y el
botón principal cambia su texto a "Actualizar".
Se utiliza un campo oculto (<input type="hidden" id="contacto-id">) para que el
sistema sepa que no debe crear un registro nuevo, sino modificar un ID
existente a través de la ruta /api/contactos/<id>/actualizar/.
4.5. Eliminación de un Contacto (Delete)
Al presionar el botón "Eliminar", el sistema intercepta el clic y lanza una
ventana nativa de confirmación (confirm()). Si el usuario acepta, se envía una
petición segura al backend, el registro se borra de la base de datos y la tarjeta
del contacto desaparece visualmente de la lista de inmediato sin necesidad de
recargar la página.
5. Sistema de Validaciones Obligatorias
Para garantizar la integridad de los datos, el grupo implementó un sistema de
validación de doble capa (Frontend y Backend):
Campos vacíos: Se restringe el envío si falta algún dato.
Formato de Correo: Se utiliza una expresión regular en JS y el [Link]
nativo de Django para asegurar la estructura usuario@[Link].
Teléfono sin letras: En el archivo [Link], se implementó una poderosa
Expresión Regular (TELEFONO_REGEX = [Link](r"^\+?[0-9\s\-()]+$")) que
bloquea el paso de cualquier letra, permitiendo solo números y el símbolo de
extensión de país (+).
Mensajes amigables: Si ocurre un error, en lugar de mostrar códigos extraños,
la aplicación ilumina el borde del campo en rojo y despliega un texto explicativo
claro (Ej: "El teléfono no debe contener letras ni caracteres inválidos") justo
debajo del input afectado.
6. Código Fuente:
Repositorio publico
[Link]
7. Conclusión
Se logró desarrollar una solución web completa, intuitiva y a prueba de errores.
Se cumplieron todos los requerimientos solicitados por la rúbrica, aplicando
buenas prácticas de programación, previniendo la duplicación de código y
logrando una separación impecable entre la lógica profunda en Django y una
interfaz de usuario altamente interactiva y profesional gestionada por
JavaScript.