Interfaz de la Aplicación
Vista principal de la aplicación: Lista de contactos con colores personalizados, botones de acción (favorito, editar, eliminar) y diseño responsive optimizado para todos los dispositivos.
Aplicación web moderna desarrollada con Node.js y Express para gestión completa de contactos. Implementa CRUD completo, persistencia en archivos de texto y enfoque en UX/UI.
Vista principal de la aplicación: Lista de contactos con colores personalizados, botones de acción (favorito, editar, eliminar) y diseño responsive optimizado para todos los dispositivos.
Objetivo General: Desarrollar una aplicación web utilizando Node.js y Express para gestionar contactos. La aplicación debe permitir agregar, editar, eliminar y listar contactos. Los datos deben almacenarse en archivos de texto plano, y la aplicación debe utilizar un motor de plantillas para renderizar vistas dinámicas.
Siguiendo las 6 fases establecidas en el reto académico, cada una con objetivos específicos de aprendizaje
Objetivo: Configurar el entorno de desarrollo Node.js
npm init - Inicializar proyectonpm install express - Framework webnpm install ejs - Motor de plantillasObjetivo: Crear servidor Express con rutas CRUD
express.static() - Archivos estáticosapp.get() - Ruta principalapp.post() - Crear contactosapp.put() - Actualizar contactosapp.delete() - Eliminar contactosObjetivo: Implementar almacenamiento en archivos de texto
fs.readFileSync() - Leer contactosfs.writeFileSync() - Guardar contactosObjetivo: Crear vistas dinámicas con EJS
<%= %> - Renderizar datos<% %> - Lógica JavaScript/editar/:idObjetivo: Implementar manejo robusto de errores
Objetivo: Organizar código y mejorar experiencia
¿Qué hace este código?
Configura el servidor web principal de la aplicación. Establece Express como framework,
configura el motor de plantillas EJS para renderizar vistas dinámicas, y define los
middleware necesarios para manejar archivos estáticos y datos de formularios.
¿Para qué se usa?
Es el punto de entrada de la aplicación que permite crear un servidor web funcional,
servir archivos estáticos (CSS, JS, imágenes), procesar formularios y enrutar las
peticiones a las diferentes secciones de la aplicación.
¿Qué hace este código?
Implementa las funciones de persistencia de datos para leer y escribir contactos en
archivos de texto plano. Utiliza el módulo `fs` de Node.js para manejar operaciones
de archivos de forma síncrona, con manejo de errores para casos donde el archivo no existe.
¿Para qué se usa?
Permite almacenar y recuperar la información de contactos de forma persistente.
La función `leerContactos()` carga los datos al iniciar la aplicación, mientras que
`guardarContactos()` actualiza el archivo cada vez que se agrega, edita o elimina un contacto.
Búsqueda instantánea con debouncing para optimizar performance y resultados inmediatos.
15 colores pasteles únicos para cada contacto, creando identidad visual.
Soporte completo para navegación por teclado con atajos y ARIA labels.
Gestos táctiles, diseño responsive y botones optimizados para touch.
Todos los archivos requeridos fueron entregados según las especificaciones del reto
gestor-contactos/
├── app.js # Servidor principal (ENTREGABLE)
├── package.json # Dependencias del proyecto
├── README.md # Documentación completa (ENTREGABLE)
├── data/
│ ├── contactos.txt # Base de datos de contactos (ENTREGABLE)
│ └── contactosManager.js # Lógica de gestión (EXTRA)
├── routes/
│ └── contactos.js # Rutas de la API (EXTRA)
├── views/
│ ├── index.ejs # Página principal (ENTREGABLE)
│ ├── formulario.ejs # Formulario de contacto (ENTREGABLE)
│ ├── landing.ejs # Página de inicio (EXTRA)
│ └── error.ejs # Página de errores (ENTREGABLE)
└── public/
├── css/
│ ├── style.css # Estilos principales (EXTRA)
│ └── landing.css # Estilos de landing (EXTRA)
├── js/
│ ├── app.js # JavaScript principal (EXTRA)
│ └── landing.js # JavaScript de landing (EXTRA)
└── images/
└── contact.png # Imagen por defecto (EXTRA)