Endpoint de detalles de una película

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

Resumen

linear-gradient(
180deg, 
rgba(0, 0, 0, 0.35) 19.27%, 
rgba(0, 0, 0, 0) 29.17%
),

Carlos Rodríguez

student•

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

student•

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

student•

@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

student•

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

student•

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

student•

Se ve mejor. con la imagen de fondo.

Christian Velázquez

student•

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

student•

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

student•

Solución al string vacío en el form

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

Jose Castillo

student•

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

student•

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

student•

buena clase!

Dario Paladines

student•

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

student•

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

student•

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

student•

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

student•

Pensé lo mismo 😢

Cristian Paiva

student•

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

student•

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

Rubén Cuello

student•

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

teacher•

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

student•

alt + click

Henry Alexander Velásquez Rosas

student•

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

Juan Castro

teacher•

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/

Alejandro Laguna

student•

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

teacher•

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

student•

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

Juan Castro

teacher•

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

Alex Maurice

student•

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

teacher•

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

student•

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

student•

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);
};

Endpoint de detalles de una película

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