Ejercicio FastAPI: listado de productos con archivos estáticos

Ejercicio de programación: Reto listado productos

Este ejercicio de programación está diseñado para poner a prueba tus conocimientos en FastAPI. Es un ejercicio de nivel intermedio que requiere conocimientos sólidos de la tecnología.

Tipo: Ejercicio de código 5 minutos estimados 200 puntos de experiencia

Información adicional del ejercicio

Configura FastAPI para servir archivos estáticos y crear una página que muestre un listado de productos con estilos CSS.

Contenido del ejercicio

Crea una aplicación FastAPI que sirva archivos estáticos y muestre una página con un listado de productos.

Pasos a seguir:

Configura FastAPI para servir archivos estáticos desde un directorio llamado static
Configura Jinja2Templates para usar un directorio llamado templates
Crea una ruta GET en /productos que renderice un template llamado productos.html
El template debe mostrar una lista de 3 productos con la siguiente información:

Producto 1: "Laptop Gaming" - Precio: "€1,299"
Producto 2: "Mouse Inalámbrico" - Precio: "€45"
Producto 3: "Teclado Mecánico" - Precio: "€89"

Enlaza un archivo CSS llamado productos.css desde el directorio static/css/ usando url_for
El CSS debe aplicar los siguientes estilos:

Fuente Arial para todo el body
Color de fondo #f8f9fa para el body
Contenedor centrado con ancho máximo de 800px
Lista sin viñetas con padding de 20px para cada elemento
Color azul (#007bff) para los nombres de productos
Color verde (#28a745) para los precios

Recuerda instalar python-multipart para que StaticFiles funcione correctamente.

Estructura de archivos esperada:

main.py (tu código principal)
templates/productos.html
static/css/productos.css

Lección relacionada

Este ejercicio está relacionado con la lección "Servir archivos estáticos" de FastAPI. Te recomendamos revisar la lección antes de comenzar.

Ver lección relacionada

Más ejercicios de FastAPI

Explora más ejercicios de programación en FastAPI para mejorar tus habilidades y obtener tu certificación.

Ver más ejercicios de FastAPI

Solución al ejercicio de programación en FastAPI

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el ejercicio de programación en FastAPI para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js

JavaScript

1 function solveChallenge ( input ) {

2 // Algoritmo optimizado O(n log n)

3 const data = parseInput ( input );

4 const sorted = data . sort (( a , b ) => a - b );

6 // Aplicar técnica de dos punteros

7 let left = 0 , right = sorted . length - 1 ;

8 const result = [];

10 while ( left < right ) {

11 const sum = sorted [ left ] + sorted [ right ];

12 if ( sum === target ) {

13 result . push ([ sorted [ left ], sorted [ right ]]);

14 left ++; right --;

15 } else if ( sum < target ) {

16 left ++;

17 } else {

18 right --;

19 }

20 }

22 return result ;

23 }

Código completo

Explicaciones

Mejores prácticas

+1.200 developers han resuelto este ejercicio de programación

Practica con ejercicios de programación en FastAPI

Mejora tus habilidades con cientos de ejercicios de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Asistente de IA

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Comenzar a programar

Únete a miles de desarrolladores mejorando sus habilidades en FastAPI

⭐⭐⭐⭐⭐

4.9/5 valoración