Integración de ratings con API usando Claude Code

Integra ratings por curso de forma confiable y rápida con Claude Code, swagger y un esquema de base de datos pensado para producción. Aquí verás cómo conectar el frontend con el backend, aprovechar el contexto de múltiples directorios y validar datos reales en el navegador. El resultado: un flujo end to end, full stack, que muestra ratings reales por curso.**

¿Cómo integrar ratings con api y frontend usando Claude Code?

Para completar la implementación, se parte de un esquema de base de datos que guarda ratings por curso y de los endpoints de la API ya disponibles. Se suma un componente en el frontend que muestra el rating en la lista de cursos, reemplazando el mock por datos reales.

¿Cómo preparar el contexto de múltiples proyectos?

Cuando frontend y backend viven en carpetas distintas, Claude Code permite agregar un directorio externo como contexto. Así el asistente entiende ambos proyectos y propone cambios coordinados.

• Obtener la dirección absoluta con pwd.
• Agregar el directorio externo con adddir.
• Confirmar que el contexto queda accesible en la conversación.

Ejemplo de comandos:

# dentro de la carpeta backend
pwd
# copia la ruta absoluta y en Claude Code ejecuta
adddir /ruta/absoluta/a/backend

Habilidad trabajada: configuración de contexto multi-repo para una integración coordinada.

¿Cómo conectar el componente de frontend al api de ratings?

Con el contexto listo, se solicita al asistente: integrar la API de ratings en el componente de la lista de cursos. Lee el modelo de datos, los endpoints y el esquema de respuesta, y reemplaza el mock por la llamada real.

• Usar el endpoint de ratings expuesto por el backend.
• Mapear el esquema de respuesta en el componente.
• Mostrar total de ratings y promedio en la lista de cursos.

¿Qué herramientas y comandos aceleran la integración del backend?

Cuando no hay acceso directo al código de una API externa, se usa su documentación. Aquí se aprovechó swagger y el archivo openapi.json que describe todos los endpoints.

¿Cómo usar swagger y openapi.json para documentar endpoints?

Desde el navegador, en localhost:8000/docs se abre swagger. Ahí se encuentra el enlace a openapi.json. Es texto, por lo que se puede copiar y dar como contexto a Claude Code para que entienda endpoints, parámetros y esquemas.

• Localhost en el puerto 8000 con /docs.
• Enlace a openapi.json disponible.
• Definiciones de endpoints y esquemas listas para reuso.

¿Cómo hacer curl para extraer contexto?

También se puede pedir que haga un curl y use el JSON como contexto automático. Así el asistente obtiene la definición completa de la API sin navegar manualmente.

curl http://localhost:8000/openapi.json

• Entrega el JSON de la API al asistente.
• Permite inferir rutas, respuestas y errores.
• Reduce ambigüedades al integrar.

¿Qué hacer cuando falta el rating en la lista de cursos?

El asistente detectó que el endpoint que trae la lista de cursos no incluía el rating. Conclusión práctica: para cerrar la integración, había que ajustar el backend y luego actualizar el frontend.

• Modificar el backend para exponer rating en la lista.
• Actualizar el frontend para consumir la nueva respuesta.
• Validar en el navegador con datos reales.

Habilidades aplicadas: lectura de swagger, análisis de endpoints, mapeo de esquemas de respuesta, cambios coordinados en ambos lados.

¿Qué resultados y próximos pasos obtendrás con la integración?

Tras ejecutar el plan, el navegador ya muestra datos reales del API. Para el curso de React se observó total ratings 4 con promedio 4.25; luego se visualizó 4.5 con cantidad 4. Para el curso de Python se vio cantidad 2. Esto confirma que el frontend consume correctamente el backend.

¿Qué datos reales debes verificar en el navegador?

• Total de ratings por curso.
• Promedio de rating recibida del API.
• Consistencia entre lista de cursos y detalle.

¿Qué reto final implementar para estudiantes?

Queda implementar que un estudiante guarde su propio rating y que el detalle del curso muestre el rating personal.

• Endpoint para guardar el rating del estudiante.
• Vista de detalle con el rating propio y el promedio global.
• Manejo de estado tras enviar el rating.

Cuéntame en comentarios: ¿qué features de Claude Code usaste y qué retos encontraste al integrar tu frontend con el backend?