Configuración de template de tienda virtual para consumir API REST

Aprende a implementar API REST y los verbos HTTP en una tienda virtual realista, paso a paso y con un template listo para correr. Conecta la teoría con la práctica: trabaja con recursos, interpreta la especificación de un API y prepara el terreno para consumir endpoints con JavaScript Vanilla.

¿Cómo aplicaremos HTTP y API REST en una tienda virtual?

La idea central es usar un template de tienda virtual para ejercitar los verbos GET, POST, PUT y DELETE sobre el recurso principal: productos. Así utilizamos en contexto la anatomía de una petición HTTP, el concepto de API y el modelo REST.

• Implementarás operaciones CRUD con verbos HTTP sobre productos.
• Trabajarás con recursos REST e ID para consultar, crear, actualizar y eliminar.
• Usarás una fake store API de Platzi con documentación oficial.

¿Qué recursos REST usaremos?

El API documenta el recurso de productos con acciones clave: listar, ver por ID, crear, actualizar y eliminar. Esto cubre el ciclo CRUD completo y permite validar el flujo con datos de una tienda.

¿Por qué la documentación es clave?

La especificación del API muestra, en la barra izquierda, los recursos y operaciones disponibles. Es esencial porque define rutas, formatos y expectativas de respuesta: justo lo que necesitas para integrar de forma correcta y segura.

¿Qué incluye el template y cómo está estructurado?

En la sección de archivos encontrarás el repositorio con el código base y un README con instrucciones de instalación y ejecución. La estructura está pensada para enfocarse en el consumo del API, no en el frontend.

• Archivo principal: server.js. Usa "Jono", un framework ligero que sirve estáticos.
• Carpeta de estáticos: public. Cualquier ruta entrega estos archivos.
• Sin React ni Svelte: todo en HTML y JavaScript Vanilla.
• Entrada principal: index.html.
• Scripts importados: mock_data, base.js e index.js.

¿Qué rol cumple mock_data?

Mientras no se consuma el API, mock_data provee productos estáticos. Permite pintar la interfaz y validar el comportamiento inicial sin depender de la red. Así preparas la lógica antes de conectar los endpoints reales.

¿Qué habilidades refuerzas con este setup?

• Lectura de especificaciones de API para identificar recursos y rutas.
• Manejo de recursos REST y uso de ID en operaciones.
• Organización de un proyecto con servidor de estáticos en server.js.
• Integración progresiva: de mock a consumo de API real.

¿Cómo ejecutar el proyecto y qué puedes hacer en la interfaz?

Sigue el README: instala dependencias y ejecuta el comando indicado para levantar el servidor en localhost puerto 3000. Verás la tienda corriendo con funcionalidades suficientes para practicar los verbos HTTP.

• Ver listado de productos con precios e imágenes.
• Abrir el detalle: título, imagen y descripción.
• Editar un producto desde un formulario y cancelar cambios.
• Eliminar un producto desde la vista de detalle.
• Usar filtros para administrar mejor el catálogo.

¿Qué endpoints implementarás a continuación?

Con la interfaz lista, conectarás cada acción a su endpoint del API de productos: listar, obtener por ID, crear, actualizar y eliminar. Así pasarás del mock a datos reales manteniendo la misma experiencia visual.

Te invito a descargar el repositorio, abrirlo en tu editor y explorar la estructura. Comenta qué parte te gustaría integrar primero o qué duda tienes sobre los recursos del API de productos.