Endpoint de detalles de una película

Curso de API REST con Javascript: Ejemplos con APIs reales

Contenido del curso

Presentación del proyecto: PlatziMovies

Configuración inicial y maquetación del proyecto

Consumiendo la API

Navegación

Views

Próximos pasos

17
Toma el Curso Profesional de Consumo de API REST con JavaScript
02:19 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0018:55

Endpoint de detalles de una película

Curso de API REST con Javascript: Ejemplos con APIs reales

Clase 15 de 17

Clase 15 / 17

Comentarios (19)19 comentarios

Carlos Rodríguez

Hace 4 años

Recuerden que si quieren optimizar aun más el código y no tener que crear un evento por cada película, pueden crear un sólo evento en la sección y con el e.target delegar el evento al nodo que quieren, ¿pero cmo detecto el id o la url de la imagen?, muy sencillo, usar los dataset para guardar esos datos en el html al momento de cargar los items don el módulo navigations. . Adjunto mi aporte con mi repositorio en el commit de la clase: Mi repositorio

Jorge Garcia

Hace 4 años

interesante tu respuesta y es muy eficiente a la hora de generar el codigo y la carga, pero podria ser mas explicito ya que aca andamos muchos que recien entramos al mundo de JS y la programacion, me interesa para poderlo implementar y entender

Carlos Rodríguez

Hace 4 años

@idanygr Te recomiendo este curso si quieres indigar más sobre la manipulación del DOM: Curso de Manipulación del DOM

Carlos Rodríguez

Hace 4 años

Para los puristas del CSS, recomiendo agregar un reset inicial a las imágenes de estas propiedades:

img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

. Existe también el object-fit: cover; que es más resumido pero no es compatible con IE. . El modificador header-container--long siempre al final de todos los estilos de esa sección, y eliminar los estilos que ya javascript los coloca. Además esta tenía una propiedad de background-size: cover !import;, si son muy maniáticos con el no colcoar el !import, pues en este caso era necesario ya que nunca CSS encontrará una especificdad de contenedor de imagen cuando dentro hay otros elementos como h1 o p. La solución es eliminar esa propiedad y agregarla internamente desde el código javascript.

.header-container--long {
    height: 480px;
    position: fixed;
    top: 0;
    width: 100%;
}

. JS

	headerSection.style.background = `
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.35) 19.27%,
                rgba(0, 0, 0, 0) 29.17%
            ),
            url(${movieImgUrl})
        `;
        headerSection.style.backgroundPosition = 'center';
        headerSection.style.backgroundRepeat = 'no-repeat';
        headerSection.style.backgroundSize = 'cover';

. Mi repositorio en este fix

Lautaro Strappazzon

Hace 4 años

Si a alguien más le sucedió que al entrar al detalle de una película y luego volver al home, el header le queda con el fondo del detalle como en la imagen:

Esto sucede porque al asignarle el background a headerSection en realidad se lo estamos asignando al header en general, no a la clase .header-container--long, por eso al volver al home el estilo se mantiene.

Sigo buscando la forma de optimizarlo, pero por el momento la solución que encontré fue agregarle a la función homePage del file navigation.js la siguiente línea:

    headerSection.style.background = '';

De esta forma, cada vez que regresemos al home le estamos borrando la propiedad. Voy a buscar una mejor solución y les comento si la encuentro. Si alguien más encuentra una solución mejor se los agradecería, o si fue sólo un error mío también.

Saludos y nunca paren de aprender 💪

Angel David Velasco Bonifaz

Hace 4 años

Se ve mejor. con la imagen de fondo.

Christian Velázquez

Hace 4 años

Me pasa lo mismo pero, creo que tiene que ver con el "live server" porque, cuando regreso lo vuelvo a cargar...se va la imagen de fondo. Igual y pondré tu solución, en lo que busco una. Gracias por el aporte.

Sebastián Andrés Sanhueza Tapia

Hace 4 años

Sí les aparece así el puntaje de la pelicula

se puede arregar colocando ".foFixed(1)" para truncar a un decimal

y quedará bien así:

Cayo Legal

Hace 4 años

Solución al string vacío en el form

searchFormBtn.addEventListener('click', 
e => searchFormInput.value !== "" ? location.hash = 'search=' + searchFormInput.value  : e.preventDefault())

Jose Castillo

Hace 4 años

Yo lo hice de esta manera:

searchFormBtn.addEventListener('click', () => {
    let regex = /\w/g;
    regex.test(searchFormInput.value) ? location.hash = '#search=' : location.hash &&  alert('Desbes ingresar algun caracter en la busqueda')

con el regex filtro caracteres validos de busqueda y evito que envien la consulta si esta el campo solo con espacios como " ".

Eduardo Rodriguez Yapur

Hace 4 años

Para que el detalle y titulo de la pelicula se muestren en español podemos añadir a los parametros que enviamos a la API el lenguage:

api=axios.create({
    baseURL: 'https://api.themoviedb.org/3/',
    headers:{
        'Content-Type': 'application/json;charset=utf-8',
    },
    params:{
        'api_key': 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
        'language':'es',
    }
});

Miguel Angel Hernandez Colombo

Hace 4 años

buena clase!

Dario Paladines

Hace 4 años

Amable recordatorio que para que les cargue la película correctamente si o si tienen que colocarle los string literals en el style.background

Luis Donaldo Talavera Covarrubias

Hace 4 años

Dejo mi repositorio, no use axios y algunas cosas las hice un poco diferente ya que las hacia antes de ver la clase, si gustan le pueden echar un ojo: https://github.com/Doni-Metal/Movie-Data-Viewer

Gregory Muñoz

Hace 4 años

Mi solución al fondo en las otras vistas que no son la de vista detallada de la pelicula:

navigation.js:

arrowBtn.addEventListener('click', () => {

    headerSection.style = '';

    const stateLoad = history.state ? history.state.loadUrl : '';

    if (stateLoad.includes('#')) {
        location.hash = '#home';
    } else {
        history.back();
    }
});

Basicamente al agregar headerSection.style = ''; se estan eliminando los estilos del headerSection, al cambiar de vista al presionar la flecha de retorno. Así nos ahorramos eliminar la imagen de headerSection por cada vista.

Juan Pablo Vargas Ramirez

Hace 3 años

Yo viendo un !important en el minuto 17:51 y recordando las enseñanzas de De Granda: La traición, la decepción hermano

Henry Alexander Velásquez Rosas

Hace 3 años

Pensé lo mismo 😢

Cristian Paiva

Hace 3 años

jajajaja me hiciste reir con tu cara cuando pusiste batman para ver los detalles y en categorias veias romance. Por otro lado, realmente este curso tiene una calidad increíble de contenido. Gracias

Ricardo Alfonso Chavez Vilcapoma

Hace 3 años

¿Llegaron aquí?...enorgullezcanse amigos...son LEYENDA

Henry Alexander Velásquez Rosas

Hace 3 años

Todo va bien, pero hay pelis que no tienen imagen, ¿A alguien más le paso?

Juan Castro

Profesor

Hace 3 años

Pasa en muchas películas. Lo que se puede hacer ahí es poner un fallback (una imagen por defecto que solo cargue cuando falle o no haya imagen de alguna película).

Mira: https://platzi.com/clases/2942-api-profesional/49631-imagenes-por-defecto/

Rubén Cuello

Hace 4 años

Pregunta de novato porque no me acuerdo. ¿Cómo se hace para seleccionar varios elementos clickeándolos así como hace Juan en 10:20 ? Probé de varias formas y no me sale :smile:

Juan Castro

Profesor

Hace 4 años

Busca "vscode shortcuts [so]" y cambia [so] por tu sistema operativo para encontrar la lista completa de atajos. :D

Sebastián Andrés Sanhueza Tapia

Hace 4 años

alt + click

Alejandro Laguna

Hace 4 años

hola, cuando entro a ver los detalles de una pelicula sale todo bien, pero cuando intento regresar con la flecha me aparece la imagen de deadpool de fondo.

![](

Juan Castro

Profesor

Hace 4 años

Revisa por fa tu archivo navigation.js: https://platzi.com/clases/2986-api-practico/48454-mostrando-y-ocultando-secciones/

Con el código de esa clase se debería quitar la clase --long del header para que deje de salir el deadpool.

Santiago Barón Castaño

Hace 4 años

Failed to load resource: the server responded with a status of 403 (Forbidden), ayuda con este error por favor.

Juan Castro

Profesor

Hace 4 años

A qué endpoint o incluso URL completa hiciste la solicitud? Sigues teniendo el mismo error?

Alex Maurice

Hace 4 años

Hola gente me gustaría un poco de ayuda, ya que me sale error al intentar ver la descripcion de una peli, pero si pongo un id manualmente aparece todo los datos

![](

Juan Castro

Profesor

Hace 4 años

Parece que tu función getMovieById no está recibiendo correctamente el parámetro id porque en al consulta lo está convirtiendo a undefined. ¿Nos muestras por fa la sección donde ejecutas esa función?

Alex Maurice

Hace 4 años

Sí!

function navigator() {

    if(location.hash.startsWith('#movie=')) {
        moviesPages();
    } 
    else if(location.hash.startsWith('#search=')) {
        searchOp();
    }  
    else if(location.hash.startsWith('#tvshow=')){
        TVPages();
    } 
    else if(location.hash.startsWith('#description=')){
        movietvDeatailsPage();
    } else if (location.hash.startsWith('#category=')){
        categorypages_view()
    } else if(location.hash.startsWith('#Categories')){
        categoryPage();
    }
    else{
        homePage();
    }

async function getMovieById(id) {
    const { data: movie } = await api('movie/' + id);
    
    title_description.textContent = movie.title;
    overview_description .textContent = movie.overview;
    average_description.textContent = movie.vote_average;
  
}

function movietvDeatailsPage(){
    headerSection.classList.add('active-size');
    headerSectionBack.classList.add('inactiveback');
    formSection.classList.add('inactive');
    homeOp.classList.remove('inactive');
    categoryOp.classList.add('inactive');
    tvOp.classList.remove('inactive-color');
    home_section.classList.add('inactive');
    moviePage_section.classList.add('inactive');
    tvPage_section.classList.add('inactive');
    description_section.classList.remove('inactive');
    search_section.classList.add('inactive');
    formSection.classList.add('inactive');
    headerSection.classList.remove('active-size-search');
    categoryNav.classList.add('inactive');
    category_section.classList.add('inactive');
    moviesCategoriesOp.classList.remove('inactive');
    tvsCategoriesOp.classList.remove('inactive'); 


    // ['#movie', 'id]
    const [_, movieId] = location.hash.split('=');
    getMovieById(movieId);
};

Andy Simancas

Hace 3 años

Epaaaa! porque el css tiene un "!important" ??? 👀👀

	headerSection.style.background = `
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.35) 19.27%,
                rgba(0, 0, 0, 0) 29.17%
            ),
            url(${movieImgUrl})
        `;
        headerSection.style.backgroundPosition = 'center';
        headerSection.style.backgroundRepeat = 'no-repeat';
        headerSection.style.backgroundSize = 'cover';

searchFormBtn.addEventListener('click', () => {
    let regex = /\w/g;
    regex.test(searchFormInput.value) ? location.hash = '#search=' : location.hash &&  alert('Desbes ingresar algun caracter en la busqueda')

api=axios.create({
    baseURL: 'https://api.themoviedb.org/3/',
    headers:{
        'Content-Type': 'application/json;charset=utf-8',
    },
    params:{
        'api_key': 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
        'language':'es',
    }
});

arrowBtn.addEventListener('click', () => {

    headerSection.style = '';

    const stateLoad = history.state ? history.state.loadUrl : '';

    if (stateLoad.includes('#')) {
        location.hash = '#home';
    } else {
        history.back();
    }
});

function navigator() {

    if(location.hash.startsWith('#movie=')) {
        moviesPages();
    } 
    else if(location.hash.startsWith('#search=')) {
        searchOp();
    }  
    else if(location.hash.startsWith('#tvshow=')){
        TVPages();
    } 
    else if(location.hash.startsWith('#description=')){
        movietvDeatailsPage();
    } else if (location.hash.startsWith('#category=')){
        categorypages_view()
    } else if(location.hash.startsWith('#Categories')){
        categoryPage();
    }
    else{
        homePage();
    }

async function getMovieById(id) {
    const { data: movie } = await api('movie/' + id);
    
    title_description.textContent = movie.title;
    overview_description .textContent = movie.overview;
    average_description.textContent = movie.vote_average;
  
}

function movietvDeatailsPage(){
    headerSection.classList.add('active-size');
    headerSectionBack.classList.add('inactiveback');
    formSection.classList.add('inactive');
    homeOp.classList.remove('inactive');
    categoryOp.classList.add('inactive');
    tvOp.classList.remove('inactive-color');
    home_section.classList.add('inactive');
    moviePage_section.classList.add('inactive');
    tvPage_section.classList.add('inactive');
    description_section.classList.remove('inactive');
    search_section.classList.add('inactive');
    formSection.classList.add('inactive');
    headerSection.classList.remove('active-size-search');
    categoryNav.classList.add('inactive');
    category_section.classList.add('inactive');
    moviesCategoriesOp.classList.remove('inactive');
    tvsCategoriesOp.classList.remove('inactive'); 


    // ['#movie', 'id]
    const [_, movieId] = location.hash.split('=');
    getMovieById(movieId);
};

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

Endpoint de detalles de una película

Progreso del curso

Presentación del proyecto: PlatziMovies

Configuración inicial y maquetación del proyecto

Consumiendo la API

Navegación

Views

Próximos pasos

Recursos

Recursos