Ejercicio de programación con JavaScript: Proyecto carrito compra agoodshop
Proyecto
1h 30m
En esta actividad, desarrollarás un componente esencial para cualquier tienda online: el carrito de compra. Este ejercicio simula un caso de uso real en el desarrollo web comercial, donde implementarás la funcionalidad completa de un carrito de compras que permite a los usuarios añadir productos, modificar cantidades y ver el total de su pedido.
1. Arquitectura del carrito (40%)
El núcleo del proyecto es una clase Carrito
que debe:
- Estar completamente separada de la interfaz de usuario (no debe manipular directamente el DOM)
- Encargarse de almacenar información de productos seleccionados
- Realizar todos los cálculos necesarios (unidades, precios, totales)
- Implementar como mínimo los siguientes métodos:
class Carrito {
constructor(productos) {
// Inicializar el carrito con la lista de productos disponibles
// productos es un array con todos los productos de la tienda
}
actualizarUnidades(sku, unidades) {
// Actualiza la cantidad de un producto específico en el carrito
// Si unidades = 0, el producto debe eliminarse del carrito
// Devuelve true si la operación fue exitosa, false en caso contrario
}
obtenerInformacionProducto(sku) {
// Devuelve la información completa de un producto y sus unidades seleccionadas
// Ejemplo de retorno:
// {
// "sku": "0K3QOSOV4V",
// "title": "iFhone 13 Pro",
// "price": "938.99",
// "quantity": 3
// }
}
obtenerCarrito() {
// Devuelve un objeto con la información completa del carrito
// Debe incluir el total calculado y la lista de productos
// Ejemplo de retorno:
// {
// "total": "5820",
// "currency": "€",
// "products": [
// {
// "sku": "0K3QOSOV4V",
// "title": "iFhone 13 Pro",
// "price": "938.99",
// "quantity": 3
// },
// ...
// ]
// }
}
}
2. Interfaz y funcionalidad (40%)
La interfaz de usuario debe incluir:
- Listado de productos disponibles obtenidos de la API
- Controles para añadir productos y modificar cantidades (botones +/-, input numérico, etc.)
- Visualización del carrito con los productos seleccionados
- Sección que muestre el total actual del carrito
- Actualización automática del total cuando se modifica cualquier cantidad
Requisitos específicos:
- El DOM debe actualizarse dinámicamente sin recargar la página
- Los productos deben mostrarse con su nombre, precio y controles de cantidad
- El total debe recalcularse y mostrarse en tiempo real con cada cambio
3. Integración con API (10%)
- Crear un endpoint utilizando jsonblob.com con el JSON proporcionado
- Implementar una función para recuperar los productos mediante fetch o axios
- Mostrar los productos obtenidos de la API en la interfaz
- Manejar posibles errores en la comunicación con la API
JSON para la API:
{
"currency": "€",
"products": [
{
"SKU": "0K3QOSOV4V",
"title": "iFhone 13 Pro",
"price": "938.99"
},
{
"SKU": "TGD5XORY1L",
"title": "Cargador",
"price": "49.99"
},
{
"SKU": "IOKW9BQ9F3",
"title": "Funda de piel",
"price": "79.99"
}
]
}
4. Presentación y experiencia de usuario (10%)
- Diseño limpio y funcional que permita visualizar claramente productos y carrito
- Indicadores visuales cuando se añade/modifica un producto (opcional)
- Mensajes informativos cuando el carrito está vacío o cuando ocurre un error
- Responsive design básico que funcione en diferentes tamaños de pantalla
Instrucciones de implementación paso a paso
- Configuración inicial:
- Crear los archivos básicos: index.html, styles.css, app.js, carrito.js
- Estructurar el HTML con secciones para productos y carrito
- Desarrollo de la clase Carrito:
- Implementar la clase Carrito con todos sus métodos
- Probar la funcionalidad de cálculo independientemente de la interfaz
- Configuración de la API:
- Crear un jsonblob con los datos proporcionados
- Obtener la URL de la API para consumirla
- Implementación de la interfaz:
- Crear la función para obtener y mostrar productos de la API
- Implementar los manejadores de eventos para los botones de cantidad
- Desarrollar la función de actualización del DOM cuando cambia el carrito
- Integración y pruebas:
- Conectar la clase Carrito con la interfaz de usuario
- Verificar que todos los cálculos son correctos
- Comprobar que el DOM se actualiza correctamente
Formato de entrega
- Estructura de archivos recomendada:
/index.html
/js/
- app.js
- carrito.js
/css/
- styles.css
- El archivo principal debe ser
index.html
en la raíz del proyecto. - El proyecto debe funcionar al abrir el
index.html
en cualquier navegador moderno.
Más ejercicios de programación con JavaScript
Evalúa tus conocimientos en JavaScript con más ejercicios de programación de tipo Test, Puzzle, Código y Proyecto con VSCode.
Array
Puzzle
Modificación de elementos DOM
Proyecto
Encapsulación
Puzzle
Manipulación DOM
Proyecto
Clases y objetos
Código
Uso de operadores
Puzzle
Uso de operadores
Test
Estructuras de control
Test
Funciones
Código
Excepciones
Test
Transformación con map()
Código
Arrays y Métodos
Código
Transformación con map()
Puzzle
Funciones flecha
Test
Async / Await
Código
Polimorfismo
Código
Variables
Código
Selección de elementos DOM
Puzzle
API Fetch
Código
Encapsulación
Test
Tecnologías de este ejercicio de programación
Entornos de desarrollo para este ejercicio

Visual Studio Code

GitHub