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

Contenido del curso

Fundamentos HTTP

APIs y REST para consumidores

Setup y Arquitectura Base

Métodos HTTP en práctica con FakeStoreAPI

Optimización y próximos pasos

17
APIs REST con JavaScript dominadas
00:54 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:22

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

Curso de API REST con Javascript

Clase 9 de 17

Clase 9 / 17

Recursos

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.

Fundamentos HTTP

Cómo JavaScript habla con una API

Cómo funciona el protocolo HTTP entre JavaScript y APIs

Qué significan los códigos de estado HTTP

Headers HTTP: qué son y cómo funcionan

Peticiones HTTP reales en el navegador

APIs y REST para consumidores

Como APIs usam HTTP para conectar apps

Qué es REST y cómo organiza las APIs web

Documentación de API REST con editor de texto

Setup y Arquitectura Base

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

Peticiones HTTP con Fetch en JavaScript

Patrón repositorio para centralizar fetch

Métodos HTTP en práctica con FakeStoreAPI

Integración de productos y detalle con fetch

Filtrar productos por categoría con URLSearchParams

Crear productos con fetch y POST

Edición de productos con verbo PUT en JavaScript

Cómo implementar DELETE en un repositorio

Optimización y próximos pasos

APIs REST con JavaScript dominadas

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

Progreso del curso

Fundamentos HTTP

APIs y REST para consumidores

Setup y Arquitectura Base

Métodos HTTP en práctica con FakeStoreAPI

Optimización y próximos pasos

Recursos

Recursos