Error: carga duplicada de datos

Clase 10 de 17 • 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

Comentarios

Carlos Rodríguez

student•

Esta es mi estructura de carpetas y código: . Mi repositorio . Commit Actual

Daniel Flores

student•

😃 Que ordenado se mira. En mi caso aún no acostumbro documentar de esa manera los proyectos de los cursos, quisiera pero no se ni por donde empezar o que debería escribir. ¿Algún consejo?

Carlos Rodríguez

student•

Seguir la ruta de aprendizaje que propone Platzi de esta escuela de desarrollo Web, me ha ayudado muchísimo, cada profesor tienen sus tips sobre como organizar proyectos.
La forma de organizar proyectos es muy subjetiva, no debe ser este orden, pero sí debe estar ordenado a tu criterio y experiencia en documentaciones sobre estructura de proyectos frontend. Existen muchas maneras de organizar un proyecto frontend y de tipo SPA.
El uso de linters como eslint y formateadores como prettier es de gran ayuda para organizar tu código de manera estricta, al principio de quiebras la cabeza pero después te adaptas!
La extensión Material Icons para VScode es muy util, si vez su documentación, verás los diferentes iconos adaptados a cada tipo de carpeta basado en las carpetas más comunes en estructura de proyectos, y de allí podrás ver que es lo que necesitas para tu proyecto.
El uso de git es muy importante y más aun documentarse sobre convenciones en nombres de ramas y commits para tu proyecto tenga un orden muy bueno, en el archivo readme verás toda esa convención y las referencias que he usado.

JOSE RANGEL

student•

Aunque esta solución evita el problema del duplicado, es un poco no muy óptimo porque cada vez que vuelves al home estás haciendo la petición a la api. Si es una app con miles de usuarios al mismo tiempo conectados, debemos tener un super back que pueda soportar toda esta cantidad de peticiones al mismo tiempo. . Una manera también muy sencilla es que el llamado a la api solo se haga una sola vez. ¿Cómo podemos implementar esto? Hay varias maneras de hacerlo. Una muy sencilla, sería, por ejemplo, preguntando si en nuestra section de categorías contamos con 'hijos' nodos. Si no contamos con hijos nodos quiere decir que es la primera carga y por ende se debe ejecutar la llamada a la api, de lo contrario, sí ya hay hijos nodos no es necesario hacer la petición. .

const childrenCategoriesPreview = Array.from(categoriesPreviewList.children);
  if(!childrenCategoriesPreview.length){
    getTrendingMoviesPreview();
    getCategoriesMoviesPreview();
  }

. Agregando este condicional evito el constante llamado a la api.

Matias Diaz

student•

Excelente Jose! Podrías mostrarnos como te quedo el código implementando ese condicional?

César Augusto Cortés Labrada

student•

Muy buena solución, evitas la consulta y la repetición de elementos. Al menos hasta que nos enseñen lo de la caché creo que haré uso de este aporte.

Jose Castillo

student•

Un pequeño aporte, nada relevante pero quizás a alguien le interese jaja..

Si usaron el parametro de lenguaje de la API, para colocarlo en español

params: {
        'api_key': API_KEY,
        'language': 'es-VE',
    },

Yo soy de Venezuela, por eso coloque el "VE", si son de México por ejemplo seria "es-MX", de este modo la API arrojara los datos en el idioma deseado, y también hace diferencia en las imágenes de las películas, como saben en otros paises las imágenes de las carteleras de las películas suelen variar, al igual que varia la tendencia de las películas.

Otro detalle es que cuando se traduce en la parte de categorias, la categoría de "Suspense".. no se traduce bien y queda igual. Si quieren arreglar esto pueden solucionarlo de la siguiente manera:

const categoryTitleText = document.createTextNode(`${
            category.name == 'Suspense' ? 'Suspenso' : category.name
        }`);

Santiago Velásquez Serna

student•

No se que tan buena practica sea, pero lo que hice desde el inicio fue utilizar los template literals para crear todo el html y de ahi hacer una unica inserción al Dom con el innerHtml

 let moviesInHtml=`${movies.map(movie=>`
    <div class="movie-container">
        <img src="https://image.tmdb.org/t/p/w300${movie.poster_path}" class="movie-img"
        alt="${movie.original_title}" />
    </div>
    
    `).join("")}`
    
    trendingMoviesPreviewList.innerHTML=moviesInHtml

Bryan Castano

student•

Yo he sabido que esto 'Literal Templates' NO es Bueno hacerlo en Producciion por razones de CyberSec y riesgos asociados Hacking a nuestros Sitios Web. Por tanto para Manipular el DOM es mejor hacerlo con las methodos desde JS como se ha hecho por aqui y en lso cursos pasados.

John Jairo Vera Pérez

student•

¿Es viable también si se mueven los llamados a las funciones getTrendingMoviesPreview y getCategoriesPreview al archivo main.js? Así cargaría la página home una sola vez al cargar el archivo main.js y no cada que se llama a la función homePage

Xavier Medina Veintimilla

student•

¡Hola! 👋

Si cargaría más rápido, pero para nosotros como desarrolladores es iportante que el código esté limpio para otros desarrolladores. Para optimizar código como lo que dices tenemos el Curso de Webpack donde nos enseñan que con un comando lo optimiza para producción. Pásate por allí y cuéntanos que te pareció. :D

Nunca pares de aprender. 💚

Jonnier Martinez

student•

Estas clases me encantan. Pero tengo una pregunta. ¿Cómo hago para que en producción me funcione la API key? , en mi caso estoy usando netlify. ¿Cuáles son las mejores prácticas para manejar estas variables privadas? Hay un curso en platzi sobre esto?

Edgardo Andres Vargas Saenz

student•

Hola Jonnier_Martinez, eso lo podrías solucionar con variables de entorno. Las variables de entorno son variables externas que residen en el sistema operativo o en el contenedor de la aplicación que se está ejecutando. Para eso necesitas saber un poco de Node.js (muy poco). En el curso de Webpack, hacen un deploy a producción usando variables de entorno.

Manuel Araujo

student•

En este video veo que el profesor respondió la segunda pregunta que hice en el video anterior: borrar las variables que estaban dentro de getTrendingMoviesPreview() y getCategoriresPreview() porque ya habían sido establecidas en el archivo node.js.

Jean Bustamante

student•

Yo lo había solucionado antes de ver esta clase, simplemente con una variable llamada isLoaded en el archivo navigation.js ¿Tiene desventajas mi solución?

Inicializo la variable como falsa y después la vuelvo true y de ahí ya no vuelve a cambiar y no actualiza ni duplica el contenido hasta que se recargue la página. fn mainpage()

function mainPage(){
    console.log('Estás en la main page');
    hideFromDom('movie-page');
    //hideFromDom('trending-page');
    //hideFromDom('search-page');
    //hideFromDom('category-page');
    showElementsOnDom('main-page');

    if (!isLoaded) {
        getTrendingMoviesPreview('main-trending-movies');
        getLatestMoviesPreview('main-latest-movies');

        isLoaded = true; //evitar volver a cargar cuando se navega de vuelta.
    }
}

Ricardo Alfonso Chavez Vilcapoma

student•

Consejo si es que han copiado el proyecto desde un inicio del profesor:

Respira y no te rindas, es díficll acomodar la vista desktop pero si respiras por 5 segundos lo lograrás estilizar a tu manera.

Gabriel Fernandez

student•

Hola! Yo solucione eso sin darme cuenta del error. Solo puse el getTrendingMoviesPreview(); getCategoriesPreview(); al final del navigation.js cuando estaba ordenando el codigo sin darme cuenta que se repetian antes de cambiarlo. y fue en esta clase que me entere que se repetian si no lo hubiera puesto al final.

Vanessa Cardenas

student•

¿Ese error de carga no se puede solucionar con Redis? Tengo entendido que funciona como memoria caché y que podemos establecer vencimiento. Por ejemplo si busqué Batman, y luego vuelvo a buscarla, me aparece más rápido la respuesta pero si en 5 minutos (ejemplo del tiempo limitado) lo vuelvo a buscar cuando ya se venció el tiempo, accede a la base de datos de tmdb.

No sé muy bien si es buena idea.

Juan Castro

teacher•

Algo así Redis efectivamente funciona como una base de datos temporal mucho más rápida que una db con persistencia permanente (o al menos a largo plazo) Pero eso depende del back, no del front Si no puedes controlar el back, habría que usar alguna otra estrategia

Xavier Flores

student•

estoy podríamos llamarla una SPA vanilla, ya que la navegacion de la pagina web se mantiene en el mismo URL

Jose Luis Bedoya

student•

lo solucione así: categoriesPreviewList.innerHTML = '';

Gianluca Enzo Procopio

student•

No se si está mal, pero antes de ver la clase solucioné el bug poniendo el innerHTML = "" en la funcion de homePage en navigation.js

 let moviesInHtml=`${movies.map(movie=>`
    <div class="movie-container">
        <img src="https://image.tmdb.org/t/p/w300${movie.poster_path}" class="movie-img"
        alt="${movie.original_title}" />
    </div>
    
    `).join("")}`
    
    trendingMoviesPreviewList.innerHTML=moviesInHtml

function mainPage(){
    console.log('Estás en la main page');
    hideFromDom('movie-page');
    //hideFromDom('trending-page');
    //hideFromDom('search-page');
    //hideFromDom('category-page');
    showElementsOnDom('main-page');

    if (!isLoaded) {
        getTrendingMoviesPreview('main-trending-movies');
        getLatestMoviesPreview('main-latest-movies');

        isLoaded = true; //evitar volver a cargar cuando se navega de vuelta.
    }
}

Error: carga duplicada de datos

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