Lista de películas en tendencia

Clase 5 de 17 • Curso de API REST con Javascript: Ejemplos con APIs reales

Clase anteriorSiguiente clase

Angel Hernandez

student•

Para los que quieren generar la API key:

entren a TMDB, luego hacen log in.
A la derecha arriba le dan click a su avatar
en settings o configuracion, se van a API
ingresan los campos que les piden
copian y pegan el API Key que se les genera en el archivo secrets.js

Juan David Reyes

student•

Gracias por el aporte n.n

José Ángel Soriano Soriano

student•

me salvastes la vida, por que nunca lo explica el maestro...

Oscar Fuentes Esteves

student•

Importante perderle el miedo a la documentación, yo sé que abruma de repente ver mucho texto y código.

JD lo hace ver fácil, pero si sabes que buscar, lo demás lo puedes ignorar... claro, hasta que algo falla.

Hiram Rodriguez Gomez

student•

De acuerdo. Desde hace varios cursos, he aprendido que la mejor manera de profundizar en el conocimiento es leyendo tanto la documentación como material adicional a las clases.

Yangetze González

company_admin•

De hecho, pienso que en la mayoría de los casos es la mejor manera de aprender.

Robinson Gonzalez

student•

La URL base de las imágenes:

https://image.tmdb.org/t/p/w300/

Maicol Hernandez

student•

Gracias!

John Caballero

student•

De momento uso esta forma para agregar el html.

Despues vere que problemas hay con esa forma.

   movies.forEach(movie => {

        trendingPreviewMoviesContainer.innerHTML += `
        <div class="movie-container">
            <img src="https://image.tmdb.org/t/p/w300${movie.poster_path}" class="movie-img"
            alt=${movie.title}/>
        </div>
        `;
        
    });```

Juan Becerra

student•

Hola, tuviste problemas ??

Ricardo Alfonso Chavez Vilcapoma

student•

Lo único malo de hacerlo así es que para eventos no reconoce los elementos de ese HTML 😪.

Fernando Francisco López Mauro

student•

Asi va quedando mi diseño :D

Guadalupe Monge Barale

student•

La url para las imágenes de las pelis. Es así, según la documentación . Para crear una URL de imagen, necesitará 3 datos. El base_url, sizey file_path. Simplemente, combínelos todos y tendrá una URL completamente calificada. Aquí hay una URL de ejemplo:

https://image.tmdb.org/t/p/w500/8uO0gUM8aNqYLs1OsTBQiXu0fEv.jpg

Por eso nuestro código queda así

img.setAttribute('src', `https://image.tmdb.org/t/p/w300/${movie.poster_path}`);

Julian David Alzate Cuervo

student•

gracias por tu ayuda , me funcionó

tiken .

student•

Enorme curso !!! Vamos a darle vida a Disney 💪🏼

Dario Paladines

student•

Le agregue a mi estructura el titulo de la pelicula y la puntuacion 😊

Eric Alvarez

student•

si quieren ocultar la barra de navegacion Horizontal solo apliquen esta propiedad al css

.trendingPreview-movieList::-webkit-scrollbar { display: none; }

Ricardo Alfonso Chavez Vilcapoma

student•

Gracias...pero si hago eso, no podré scrollear 😪

Carlos Rodríguez

student•

El nodo siguiente donde está contenido todas las imagenes debe estar fuera del forEach para que no seleccione dicho nodo cada vez que se pase por un elemento:

const rendingPreviewMoviesContainer = document.querySelector(
    '#trendingPreview .trendingPreview-movieList',
);

. Repositorio del Commit

Juan Castro

teacher•

Spoiler: lo hacemos en algunas clases más adelante. :wink:

Ricardo Alfonso Chavez Vilcapoma

student•

Ahí vamos...yo tomé el diseño del profe a manera de práctica, ya que al entrar a un trabajo, no se comienza un proyecto desde cero sino tenemos que acoplarnos a lo que se tiene hasta el momento.

Así que ya luego lo maquillaré cuando la funcionalidad esté hecha.

Fernando Meneses

student•

¿como enlazo la API key? me dice que sin el acces token no puedo. le agradeceira mucho si me ayudas

Ricardo Alfonso Chavez Vilcapoma

student•

Saludos estimado Diego. Si ya tienes tu API KEY, en la clase 3 del curso el profesor muestra que lo puedes hacer mediante query parameters.

jose zuñiga

student•

Les dejo mi función solución aplicando el método optimo de agregar varios nodos dado en el curso de manipulación del DOM.

const URL_API = 'https://api.themoviedb.org/3/trending/movie/day?api_key='+Api_key;
const URL_IMG = 'https://image.tmdb.org/t/p/w300'
async function getTrendingMoviesPreview(URL_API){
    const res = await fetch(URL_API);
    const data = await res.json();
    const movies = data.results;
    // console.log({data, movies});

    const nodosMovies = movies.map(movie => {
        const divMovieContainer = document.createElement('DIV');
        divMovieContainer.className = 'movie-container';

        const imgMovieContainer = document.createElement('IMG');
        imgMovieContainer.className = 'movie-img';
        imgMovieContainer.setAttribute('alt', 'original_title');
        imgMovieContainer.setAttribute('src',  URL_IMG+movie.poster_path);
        divMovieContainer.appendChild(imgMovieContainer);
    
        return divMovieContainer;
    });

    const trendingPreviewMovieList = document.querySelector('#trendingPreview .trendingPreview-movieList');
    trendingPreviewMovieList.append(...nodosMovies);

}
getTrendingMoviesPreview(URL_API)

Jeaneth Tafur Huaman

student•

Juan DC lo explica tan bien que todo parece tan facil 😁

Jonathan HERNANDEZ

student•

Pueda ser que muchos algunos no tengan una aplicación URL como le pide themoviedb a la hora de crear la API, Aquí. Le dejo lo que tienen que poner en ese campo. SOLO PONGAN: N/A

Orlando Leyva acosta

student•

Yo agrego el html de esta forma.

 movies.forEach(movie => {
        let htmlCode = `
        <div class="movie-container">
            <img src="https://image.tmdb.org/t/p/w300${movie.poster_path}" 
            class="movie-img" 
            alt="Nombre de la película"/>
        </div>
        `
        trendingListeTemplate.push(htmlCode);
    });

    trendingPreviewMovieList.innerHTML = trendingListeTemplate.join('')

Santiago Lopera Naranjo

student•

Con el fin de probar diversos endpoints, cree la funcion de forma que tuviera los parametros por defecto que usa Juanda, pero dejando con la posibilidad de pasarle otras categorías, y tiempos:

const VERSION = '3'
const API_BASE = `https://api.themoviedb.org/${VERSION}`

async function getTrendingMoviesPreview(media_type='movie',time_window='day') {
  const response = await fetch(`${API_BASE}/trending/${media_type}/${time_window}?api_key=${API_KEY}`)
  const data = await response.json();
}

Edgardo Andres Vargas Saenz

student•

Qué diferencia hay existe si creo los elementos con insertAdjacentHTML.

  movies.forEach(movie => {
    trendingPreviewMovieList.insertAdjacentHTML('beforeend', `
      <div class='movie-container'>
        <img src='https://image.tmdb.org/t/p/w300/${movie.poster_path}' class='movie-img' alt='${movie.title}' />
      </div>
    `)
  })

Juan Castro

teacher•

Es otra forma de llegar al mismo resultado. Personalmente también me gusta mucho. :D

Jonathan Alfonso

student•

Edgardo, yo intente hacer algo parecido, pero con innerHTML, pero no pude asignarle la función al hacer click en movie-container. Ya que no se puede seleccionar el elemento de forma directa como si fuese una variable, ni acceder a el creandolo en node, porque aún no existe, y al intentar hacerlo con un onclick(funcion) dentro de la funcion no reconoce la funcion porque aún no se a declarado y colocando la funcón por fuera no reconoce a movie porque esta dentro de la función. ¿Pudiste solucionar esto de alguna forma? Me gustaría saberlo

Andrés Camilo Salgado

student•

![](

asi quedo mi primera funcion para mostar las peliculas en tendencia

Pablo Humberto Arriola Agudelo

student•

Requiero ayuda

Cómo subo el pantallazo del código para una pregunta, el editor me rechaza parte del contenido

Juan Castro

teacher•

Puedes arrastrar la imagen desde tu computadora hasta el editor de comentarios.

Daniel Alberto Méndez Pérez

student•

para subirlo a git pages, seria preferible configurar un archivo ENV??? ya que no carga la api al estar oculta

Juan Castro

teacher•

GitHub Pages no soporta variables de ambiente. En el curso profesional hablamos un poco más de ese tema: https://platzi.com/clases/2942-api-profesional/49656-deploy/

   movies.forEach(movie => {

        trendingPreviewMoviesContainer.innerHTML += `
        <div class="movie-container">
            <img src="https://image.tmdb.org/t/p/w300${movie.poster_path}" class="movie-img"
            alt=${movie.title}/>
        </div>
        `;
        
    });```

const URL_API = 'https://api.themoviedb.org/3/trending/movie/day?api_key='+Api_key;
const URL_IMG = 'https://image.tmdb.org/t/p/w300'
async function getTrendingMoviesPreview(URL_API){
    const res = await fetch(URL_API);
    const data = await res.json();
    const movies = data.results;
    // console.log({data, movies});

    const nodosMovies = movies.map(movie => {
        const divMovieContainer = document.createElement('DIV');
        divMovieContainer.className = 'movie-container';

        const imgMovieContainer = document.createElement('IMG');
        imgMovieContainer.className = 'movie-img';
        imgMovieContainer.setAttribute('alt', 'original_title');
        imgMovieContainer.setAttribute('src',  URL_IMG+movie.poster_path);
        divMovieContainer.appendChild(imgMovieContainer);
    
        return divMovieContainer;
    });

    const trendingPreviewMovieList = document.querySelector('#trendingPreview .trendingPreview-movieList');
    trendingPreviewMovieList.append(...nodosMovies);

}
getTrendingMoviesPreview(URL_API)

 movies.forEach(movie => {
        let htmlCode = `
        <div class="movie-container">
            <img src="https://image.tmdb.org/t/p/w300${movie.poster_path}" 
            class="movie-img" 
            alt="Nombre de la película"/>
        </div>
        `
        trendingListeTemplate.push(htmlCode);
    });

    trendingPreviewMovieList.innerHTML = trendingListeTemplate.join('')

const VERSION = '3'
const API_BASE = `https://api.themoviedb.org/${VERSION}`

async function getTrendingMoviesPreview(media_type='movie',time_window='day') {
  const response = await fetch(`${API_BASE}/trending/${media_type}/${time_window}?api_key=${API_KEY}`)
  const data = await response.json();
}

  movies.forEach(movie => {
    trendingPreviewMovieList.insertAdjacentHTML('beforeend', `
      <div class='movie-container'>
        <img src='https://image.tmdb.org/t/p/w300/${movie.poster_path}' class='movie-img' alt='${movie.title}' />
      </div>
    `)
  })

Lista de películas en tendencia

Presentación del proyecto: PlatziMovies

TheMovieDB: análisis de su API

Bocetos en papel y diseño en Figma

Configuración inicial y maquetación del proyecto

Configuración del entorno de desarrollo

Maquetación del proyecto: HTML y CSS

Consumiendo la API

Lista de películas en tendencia

Lista de categorías

Migración a Axios

Navegación

Location y hash navigation

Mostrando y ocultando secciones

Error: carga duplicada de datos

Views

Filtrando películas por categoría

Retos: scrollTop y DRY

Buscador de películas

Retos: historial de navegación y página de tendencias

Endpoint de detalles de una película

Lista de películas recomendadas

Próximos pasos

Toma el Curso Profesional de Consumo de API REST con JavaScript