El buen @RetaxMaster
Qué se debe optimizar en el frontend (y qué no)
Tu responsabilidad como frontend developer
Caché vs. memoria
Debuggeando caché y networking
Quiz: Qué se debe optimizar en el frontend (y qué no)
Optimización de imágenes
Loading spinners vs. loading skeletons
Reto: pantalla de carga
Intersection Observer
Lazy Loading
Imágenes por defecto
Quiz: Optimización de imágenes
Paginación
Scroll infinito vs. paginación
Botón de cargar más
Infinite Scrolling: evento de scroll
Infinite Scrolling: limitando la carga de datos
Infinite Scrolling: closures de navegación
Quiz: Paginación
Almacenamiento local
Local Storage vs. API real
Botón de like
Guardando películas en Local Storage
Lista de películas favoritas
Quiz: Almacenamiento local
Bonus
Reto: selección de idioma
Deploy
Próximos pasos
Más proyectos para tu portafolio
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Un despliegue exitoso implica mantener la seguridad de las API Keys en nuestras aplicaciones. Al desplegar, siempre surge el desafío de cómo proteger estas claves sensibles, sobre todo en aplicaciones frontend. Desgraciadamente, cuando solo trabajamos con archivos estáticos, la protección de estas claves es limitada. Todo el código en el frontend es público, y con herramientas básicas como el inspector de elementos, cualquiera puede acceder a nuestras claves. Sin embargo, existen estrategias para mitigar este riesgo.
Uso consciente de The MovieDB: Esta plataforma permite monitorear el uso de la API Key, mostrando quiénes la están utilizando y cuántas solicitudes se realizan al día. Esto es una buena práctica para detectar usos no deseados.
Controlar el backend: En lugar de dejar la clave en el frontend, podríamos tener un backend que almacene la API Key y gestione las solicitudes a la API de forma privada. Esto se puede lograr utilizando servicios como:
Variables de entorno: En un backend personal, puedes establecer variables de entorno para almacenar la API Key de manera segura, de modo que no esté presente en el código visible del repositorio.
Para llevar a cabo un despliegue usando GitHub Pages, aquí tienes un proceso a seguir teniendo en cuenta las advertencias de seguridad:
Ignorar archivos sensibles: Añadir secrets.js
, donde guardas API Keys, en .gitignore
para evitar subirlo al repositorio público.
Crear una rama para deploy: Para desplegar, crea una nueva rama y quita el archivo secrets.js
de tu .gitignore
temporalmente para poder agregarlo a la rama de despliegue.
git checkout -b githubpages
git add --all
git commit -m "Despliegue de archivos estáticos"
git push origin githubpages
Configurar GitHub Pages: En la configuración de tu repositorio en GitHub, selecciona la rama githubpages
para el despliegue. Al desplegar, la aplicación estará disponible en una URL pública.
Para aquellos estudiantes interesados en llevar estos conocimientos a un nivel más profesional, es vital considerar el aprendizaje del backend, aunque sea en sus conceptos básicos. Esta habilidad no solo permite un control más seguro de API Keys, sino también mejora la capacidad de desplegar aplicaciones más complejas y profesionales. Si estás dispuesto a aprender, considera estos consejos:
El camino del desarrollo profesional es vasto, pero nunca olvides que cada paso pequeño contribuye a un conocimiento profundo y robusto. Tu seguridad en el despliegue y manejo de las API Keys es crucial, y con cada experiencia, te haces más competente en tu oficio. Así que anima, ¡y sigue aprendiendo!
Aportes 37
Preguntas 6
El buen @RetaxMaster
Aquí mi sitio en Netlify , espero no me roben la API-KEY, pero la vida es un riesgo XD
Reto 1 - Hacer responsive
Reto 2 - Cargar las favorites movies sin recargar la página con el evento window
Reto 3 - Agregar idiomas
Reto 4 - Arreglar espacio en blanco abajo
Prometo hacer todos los retos y responder este mensaje con los updates
¡Gracias por el magnífico curso!
He subido mi sitio a Netlify, espero que les guste la estructura del proyecto.
.
Url del proyecto: https://platzi-movie.netlify.app
.
Lo he subido usando las buenas prácticas de como proteger las variables de entornos usando archivos .env
y además empaquetando todo el proyecto con webpack, recomiendo hacer el Curso de Webpack con el profesor Oscar Barajas y si quieren ir al grano, esta clase me ayudó múcho a como desplegar un sitio web en netlify.
.
Les comparto mi proyecto en github: Click aquí
Buenísimos cursos, me enseñaron mucho, recomendados 100%. Aquí les dejo mi solución con reto completado https://pickone-free.netlify.app/
no lo subí pero así quedo
Les dejo mi proyecto https://devnielote.github.io/quick-watch/# 😁
No logré que funcionara el scroll infinito desde un celular, solo funcionaba correctamente desde el escritorio y las dev tools 😅
Les comparto mi deploy y mi repositorio 😉
Siento que puedo mejorar en CSS pero si fue gratificante que aunque no haya hecho un curso de CSS ya me puedo manejar mejor con tantos elementos y modificadores. Aquí les dejo el resultado, en un futuro le agregaré aún mas features 💚
Terminado, me encanta el resultado final, aunque aun hay detalles que pulir y animacion por añadir.
Aqui enlace The Moovies
Aquí les dejo mi app desplegada, aún tiene pequeños fallos(los cuales iré arreglando), pero es trabajo honesto, es el proyecto mas largo que he hecho 😃
MovieDP APP Cualquier retroalimentación es bienvenida
¡Que gran trilogia de cursos! Fue realmente un antes y un despues en mi forma de trabajar.
Después de una semana termine mi proyecto:
recibo cualquier comentario constructivo.
https://riszart.github.io/riszmovie-page/public/index.html
Creo que es hora de aprender un framework de JS luego de terminar esta trilogía de cursos…empezaré por REACT…espero haga una buena elección.
Así quedó mi aplicación, espero pronto aprender más de css y hacerla responsive:
https://diegotellezc.github.io/Moviepedia/
Este es mi repositorio: https://github.com/diegotellezc/Moviepedia/settings/pages
https://ghalliard.github.io/curso-api-rest-practico/
Dejo mi proyecto con muchos bugs y con muchas posibles mejoras. Falta implementar muchas cosas que tengo en mente, no sé cómo. Sin embargo, con lo que siga aprendiendo, encontraré la forma. Espero comentarios positivos y constructivos 😄 Excelente curso.
PSDT: solo tiene version mobile.
Les comparto el mio:
Me hace falta desarrollar el sistema de cambio de idiomas, mientras tanto les comparto el trabajo que realicé. La trilogía de consumo de API han sido de los mejores cursos que he tomado. Felicidades JuanDC
https://bespoke-lokum-907380.netlify.app/
Aqui esta mi proyecto
 el usuario ingrese su API_KEY.
Le agregué el selector de idioma, y le puse los títulos de las secciones para que de forma dinámica cambien también de acuerdo a la selección de idioma del usuario.
https://lizzcoldev.github.io/curso-api-rest/#home
Repositorio: https://github.com/LizzColDev/curso-api-rest/tree/github-pages
Gracias Juan☺
Hola!!! he estado viendo las soluciones y me gustaron mucho, pero vi un tema que se repetía en muchas. Al momento de cambiar el idioma, cambian los nombres de todas las películas menos las que están agregadas a favoritos en LocalStorage.
Para solucionar esto, agregue en el método de createMovies, que al recorrer la lista de películas a dibujar buscara si esta ya se encontraba en la lista de favoritos, en caso de encontrarse, se actualiza la información con la película en el idioma nuevo, esto permitirá que a medida que se vayan cargando películas en distintos idiomas de vayan actualizando los idiomas de las películas de la lista de favoritos.
no se si se entienda, tampoco si es la forma correcta, pero dejo el código por si a alguien le sirve.
function createMovies(movies, container, { lazyLoad = false, cleanContainer = true, updateFav = false } = {})
{
...
if(likedMoviesList()[movie.id] && updateFav) {
const likedMovies = likedMoviesList();
if(likedMovies[movie.id])
likedMovies[movie.id] = movie;
localStorage.setItem('liked_movies', JSON.stringify(likedMovies));
// Se actualiza la visualización de favoritos
getLikedMovies();
}
...
}
Asi se mira mi app
Le agregue un registro y un login, tambien agregue la watchlist y favoritos, todo con la misma api, próximamente se podrá calificar las películas, todo hecho con React.
repositorio: https://github.com/Takeout85/movie-app
pagina: https://takeout85.github.io/movie-app/
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?