PelfSollution / PopularFilms-to-HTML

Práctica sobre Typescript del Posgrado de Fullstack de la UPC

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Popular Films [Just Watch] to HTML - Generador de HTML en Typescript

Generador que utiliza TypeScript y se encarga de generar un sitio web estático que muestra una lista de películas populares y sus detalles. Obtiene la información de las películas desde la API de The Movie Database (TMDb) y crea un archivo HTML principal con una lista de películas y archivos HTML individuales para cada película con más detalles.

Instalación

  • Descarga el repositorio, ex git clone https://github.com/PelfSollution/p2-typescript-2023.git

Ejecución

  • bun run main.ts

Funcionalidades

  • Información de provedores de streaming donde se pueda ver la película (API Just Watch)

"Integrar con plataformas de streaming en españa: enlaces a plataformas de streaming (como Netflix, Movistar, hbo, Amazon Prime... ) donde el usuario pueda ver la película"

[UPDATE]: La API de Just Watch no esta abierta, ni gratuita, con la API que se habia usado de The Movie Database API como es partnership de JustWatch puedes conseguir la información de proovedores de servicios físicos y en streaming que operan en cada pais para poder ver la película TMDB Movie Watch Providers API.

El tema es que no se puede obtener el enlace directo a la plataforma desde la API de TMDB, eso lo tiene capado Just Watch, entiendo que por modelo de negocio, les interesa que pases por su página Web.

[FIX]: 🙁 usando un "hack" un poco tosco ya que la api de Just Watch no esta abierta. commit 4077c63

El código verifica si el nombre del proveedor incluye palabras clave como "netflix", "hbo", "amazon", "prime", etc o finalmente en google, y luego construye la URL de búsqueda correspondiente a la plataforma utilizando el título codificado de la película. La solución es más o menos efectiva si deseas realizar búsquedas básicas en diferentes plataformas de streaming sin depender de la API de JustWatch.

  • Paginación

"Permitir al usuario navegar a través de varias páginas de películas, en lugar de mostrar solo las películas más populares en una sola página."

Problemas ya que la API solo permite 20 peliculas por página, asi que con esta API debere hacer paginación para ir cargando cada vez 20 películas.

[UPDATE]: Para la páginacion y poder cargar más de 20 películas, se hace un bucle, en cada iteracion se llama a la funcion loadFilms y se renderiza ese bloque los listados de 20 películas más populares, la primera index.html y las siguientes en index{número_página}.html y añadiendo los las peliculas en bloque en el array allFilms con concat. Cuando acaba se ejecuta una promesa para procesar los detalles de cada pelicula del array de forma asíncrona.

About

Práctica sobre Typescript del Posgrado de Fullstack de la UPC


Languages

Language:HTML 43.7%Language:TypeScript 37.1%Language:CSS 19.2%