Proyecto parcial 2 - Programación III - S6A
Descripción
🏆 En el siguiente proyecto desarrollamos una aplicación web funcional que integre los conocimientos
adquiridos durante el semestre: HTML5, CSS, JavaScript, Node.js con Express, y conexión a base de datos MySQL.
Contenido📚
⚠ Requisitos previos
- Node.js (v18 o superior)
- npm (gestor de paquetes)
- Editor de código (VS Code recomendado)
- Extensión Thunder Client o Postman para probar endpoints
📲 Instalación
- Clona o descarga este proyecto.
- Abre una terminal en la carpeta del proyecto.
- Instala las dependencias:
npm install
🛠 Estructura del proyecto
1️⃣ Tema 1: Ciclo Petición-Respuesta
Objetivo: crear una página HTML5 que contenga:
- Un encabezado principal con el nombre de los participantes
- Una lista ordenada con 3 tecnologías web
- Una imagen con atributo alt
- Un formulario con campos: nombre, email y botón envia
🖼 Resultado visual:
2️⃣ Tema 2: CSS
Objetivo: Crear estilos CSS para un diseño responsive que:
- Tenga un contenedor centrado de máximo 1000px
- Use Flexbox para organizar 3 tarjetas en fila
- En pantallas menores a 768px, las tarjetas se apilen verticalmente
🖼 Resultado visual:
⬇ Algo de código:
3️⃣ Tema 3: JavaScript y fundamentos
Objetivo: Escribe una función en JavaScript que:
- Reciba un array de números
- Retorne la suma de todos los números pares
- Use el método filter() y reduce()
🖼 Resultado visual:
⬇ Algo de código:
4️⃣ Tema 4: JavaScript POO y eventos
Objetivo: Crea una clase Producto con:
- Propiedades: nombre, precio, stock
- Método para calcular el precio con IVA (19%)
- Método para verificar si hay stock disponible
🖼 Resultado visual:
⬇ Algo de código:
5️⃣ Tema 5: Introducción a Node.js y Express
Objetivo: Crea una aplicación Express que:
- Tenga una ruta /inicio que responda con "Bienvenido"
- Una ruta /api/hora que retorne la hora actual en formato JSON
- Configure el puerto 3000
🖼 Resultado visual:
⬇ Algo de código:
6️⃣ Tema 6: Rutas y controladores
Objetivo: Implementa un CRUD completo para "productos" con rutas:
- GET /productos - Listar todos
- GET /productos/:id - Obtener uno
- POST /productos - Crear
- PUT /productos/:id - Actualizar
- DELETE /productos/:id - Elimina
🖼 Resultado visual:
💥 Resultados vsibles de consultas con Thunder Client:
⬇ Algo de código:
7️⃣ Tema 7: Ciclo Petición-Respuesta
Objetivo: Comprender cómo Express maneja las solicitudes (req) y respuestas (res).
Archivo: middlewareActualizado.js
🔹 Endpoint /registro
Valida los campos nombre, email y password.
Si faltan datos → responde con código 400 Bad Request.
Si todo está correcto → responde con 201 Created.
Ejemplo de prueba en Thunder Client:
Método: POST
URL: http://localhost:3000/registro
Body (JSON):
Respuesta esperada:
8️⃣ Tema 8: Plantillas de Vista (EJS)
Objetivo: Usar el motor de plantillas EJS para renderizar vistas dinámicas.
Archivo: views/productos.ejs
🔹 Ruta /productos
Renderiza una tabla con una lista de productos y precios formateados en pesos colombianos.
Ejemplo de datos:
🔹 Resultado visual:
Una tabla HTML con los productos renderizados dinámicamente.
9️⃣ Tema 9: Sesiones y cookies
Objetivo: Implementar un sistema de login que:
- Guarde el usuario en sesión al hacer login
- Cree un middleware que verifique si hay sesión activa
- Proteja una ruta /admin que solo usuarios autenticados puedan acceder
🔹 Sistema de Autenticación con Sesiones
🖥 Funcionalidades Implementadas:
- Login/logout con express-session
- Middleware de autenticación (requireAuth)
- Rutas protegidas (/admin, /dashboard)
- Cookies para preferencias
⬇ Código:
🔟 Tema 10: Conexión a base de datos
Objetivo: Implementar funciones para:
- Obtener todos los productos de la tabla productos
- Buscar un producto por ID
- Actualizar el precio de un producto
- Usar async/await y manejo de errores
🔹 API de Productos con MySQL
🖥 Funcionalidades Implementadas:
- CRUD completo de productos
- Conexión MySQL con mysql2
- Consultas preparadas para seguridad
- Async/await y manejo de errores
⬇ Código:
🔧 Tecnologías usadas
- VisualStudio Code
- Node.js (npm install)
- Thunder Client
👩💻 Team
- Esteban Suárez
- Natalia Cifuentes
- Mariangel Beltrán
- Carolina Gutiérrez
- María Chávez