Completar una trilogía completa sobre consumo de API Rest con JavaScript representa un salto profesional importante. Desde los fundamentos de las peticiones asíncronas hasta la implementación de optimizaciones avanzadas, el recorrido cubre todo lo necesario para construir aplicaciones web robustas que consuman datos externos y ofrezcan una experiencia de usuario fluida. Lo más valioso: ya tienes las herramientas para crear proyectos reales que llenen tu portafolio.
¿Qué aprendimos en la trilogía de consumo de API Rest?
El camino comenzó con las diferencias entre XMLHttpRequest y fetch, y cómo manejar peticiones asíncronas usando callbacks, promesas y async await [0:28]. Desde el primer curso se profundizó en conceptos como los headers, las API Keys y los métodos HTTP: get, post, put, entre otros [0:46]. Con esa base, se construyó una aplicación consumiendo una API real, incluyendo la subida de contenido propio.
En el segundo curso, la herramienta protagonista fue Axios para consumir la API de The Movie DB [1:10]. Se creó Platzi Movies, una aplicación con múltiples vistas dinámicas dentro de un solo archivo HTML. La técnica más destacada fue la navegación por hashes [1:30], que permite simular distintas páginas cambiando las rutas sin recargar el navegador, cargando información dinámica según la sección visible.
¿Cómo se optimizó el rendimiento desde el frontend?
Ya en el curso profesional, el foco estuvo en que la experiencia de carga fuera tolerable para el usuario [2:00]. La estrategia principal: evitar solicitudes repetidas aprovechando información cacheada o memorizada de peticiones anteriores.
- Lazy loading: las imágenes se cargan únicamente cuando aparecen en pantalla, no todas al mismo tiempo [2:15].
- Paginación con infinite scrolling: en lugar de mostrar solo los primeros veinte resultados, se cargan más datos a medida que el usuario hace scroll [2:30].
- Se eligió infinite scrolling porque el objetivo es retener al usuario en una aplicación de entretenimiento, no que busque algo específico y se vaya [2:45].
¿Por qué usar localStorage y cuáles son sus límites?
El localStorage permitió implementar almacenamiento local en el navegador [3:00], funcionando como sustituto de la autenticación para guardar preferencias por usuario. Se usó para guardar películas favoritas con un botón de like que persiste incluso al recargar la página [3:18].
Sin embargo, existe una regla fundamental: nunca guardes datos privados en localStorage [3:10]. Es accesible desde el navegador y cualquier script puede leerlo, por lo que no es apto para tokens sensibles ni información personal.
¿Cómo se hizo el deploy y qué precauciones tomar?
El deploy se realizó en GitHub Pages [3:55], creando una rama separada donde se eliminó el archivo secrets.js del .gitignore para que la API Key quedara disponible en el repositorio. Esto permitió tener una URL pública funcional.
Pero esta estrategia tiene una advertencia clara: no debe usarse en proyectos empresariales ni en aplicaciones con datos privados o pagos [4:08]. En esos casos, las API Keys deben guardarse en variables de ambiente controladas desde un backend propio, evitando la exposición desde el frontend.
¿Cuál es el siguiente paso para tu carrera?
El recurso clave mencionado es el repositorio de public APIs [4:50], una colección de APIs públicas que puedes consumir con o sin autenticación. La recomendación es directa:
- Elige una API de ese repositorio y conviértela en un proyecto completo.
- Aplica todas las técnicas aprendidas: lazy loading, infinite scrolling, localStorage y navegación por hashes.
- Agrega diseño responsive para que funcione tanto en dispositivos pequeños como en pantallas grandes [5:05].
- Usa localStorage como fuente de información adicional para enriquecer la experiencia.
El portafolio es tu carta de presentación. Cada proyecto que crees demuestra creatividad, dominio técnico y capacidad de resolver problemas. No necesitas que todo salga perfecto al primer intento; lo importante es dar el paso e intentarlo [5:40]. Si algo falla, las comunidades de aprendizaje están para apoyarte.
Cuéntanos en los comentarios: ¿cuál API vas a consumir para tu próximo proyecto y qué optimizaciones planeas implementar?
