Un desarrollo moderno utilizando SvelteKit para el frontend y backend intermedio (API routes), integrado con Strapi CMS y consumiendo datos en tiempo real de The Movie Database (TMDB).
| Componente | Tecnologías Utilizadas |
|---|---|
| Frontend |  5 (Runes) + Chart.js |
| Backend Intermedio | SvelteKit API Routes (/api/generar, /api/peliculas) |
| CMS / Persistencia |  (Instancia compartida cátedra, Content-Type: canepa-pelicula) |
| API Externa |  (Películas en cartelera: now_playing) |
La aplicación realiza el siguiente flujo de datos:
-
Consumo y Sincronización: Obtiene las películas en cartelera actualizadas desde la API de TMDB.
-
Persistencia (Upsert): Sincroniza estos datos en Strapi (actualizando registros existentes por su
tmdb_idúnico o insertando nuevos). -
Filtro y Segmentación: En el frontend, se filtran las películas por una de 3 ciudades bonaerenses simuladas. La pertenencia a cada ciudad se calcula dinámicamente:
- Buenos Aires: Muestra todas las películas.
- La Plata: Películas con
tmdb_idpar (tmdb_id % 2 == 0). - 9 de Julio: Películas con
tmdb_idmúltiplo de 5 (tmdb_id % 5 == 0).
[!NOTE] Los IDs múltiples de 10 (por ejemplo, pares y múltiplos de 5) se mostrarán en ambas ciudades a la vez. Esto es un comportamiento esperado según las reglas matemáticas de la simulación.
Sigue estos pasos para configurar y ejecutar la aplicación en tu entorno local:
npm installCopia el archivo de ejemplo y completa los valores requeridos:
cp .env.example .envEdita el archivo .env configurando tus credenciales:
# TMDB API Token (Obtenelo de https://www.themoviedb.org/settings/api)
TMDB_API_TOKEN=<token_provisto_por_catedra>
# Modo de almacenamiento (json = simulación local, strapi = conexión real con Strapi)
STORAGE_MODE=strapi
# URL y Endpoint de Strapi
STRAPI_API_URL=https://gestionweb.frlp.utn.edu.ar
STRAPI_ENDPOINT=canepa-peliculas
# Token de API con permisos necesarios
STRAPI_API_TOKEN=<tu_token_de_strapi>npm run devUna vez iniciado:
- Abre http://localhost:5173 en tu navegador.
- Selecciona la ciudad y la cantidad de películas a mostrar (20, 40 o 60).
- Haz clic en "Cargar datos de APIs" para iniciar la sincronización y renderizado.
Para compilar para producción:
npm run buildEl Content-Type canepa-pelicula ya está configurado en la instancia de Strapi. A continuación se detallan sus campos:
| Campo | Tipo | Notas / Restricciones |
|---|---|---|
title |
Text | Título de la película |
overview |
Text largo | Sinopsis / Descripción |
poster_path |
Text | Ruta del poster en TMDB |
vote_average |
Number (Decimal) | Calificación promedio |
release_date |
Date | Fecha de lanzamiento |
tmdb_id |
Number (Integer) | Unique field (clave única para el Upsert) |
Important
- Sin campo de ciudad: La ciudad no se almacena en la base de datos de Strapi; se calcula dinámicamente en el frontend en base al
tmdb_id. - Permisos requeridos: El token de la API de Strapi debe tener habilitados los permisos
find,createyupdatesobre el Content-Typecanepa-pelicula. No se requiere permiso dedeleteya que la sincronización se realiza mediante una estrategia Upsert.
Los componentes principales del proyecto están organizados de la siguiente manera:
- 🧩 src/lib/ciudades.js - Contiene la lógica matemática para determinar a qué ciudad pertenece cada película.
- 💾 src/lib/server/strapiStorage.js - Abstracción para interactuar con Strapi y realizar la sincronización mediante
sincronizarPeliculas. - 🔌 src/routes/api/generar/+server.js - Endpoint del backend que consulta las páginas de TMDB, realiza la deduplicación y ejecuta la sincronización en Strapi.
- 📊 src/routes/api/peliculas/+server.js - Endpoint que expone la lista de películas almacenadas en Strapi para que el frontend las consuma.
- 💻 src/routes/+page.svelte - Interfaz principal del usuario. Contiene el selector de ciudad/cantidad, el gráfico estadístico (Chart.js), el motor de búsqueda y las tarjetas de películas.