Esta es mi estructura de carpetas y código:
.
Mi repositorio
.
Commit Actual
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 5
Preguntas 2
Esta es mi estructura de carpetas y código:
.
Mi repositorio
.
Commit Actual
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.
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
}`);
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
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.