No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
6 Hrs
52 Min
37 Seg

Deploy

19/20
Recursos

¿Cómo proteger la API Key en un despliegue?

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.

¿Qué riesgos hay al exponer la API Key?

  • Visibilidad pública: Todas las peticiones HTTP en el frontend pueden revelar la API Key.
  • Requiere cambios en el repositorio: Al conectar Git con el sistema de deploy, tendríamos que incluir la API Key, exponiéndola más aún.

Estrategias para proteger la API Key

  1. 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.

  2. 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:

    • Heroku
    • Vercel
    • AWS, Google Cloud Platform, Azure (para opciones más avanzadas)
  3. 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.

¿Cómo desplegar en GitHub Pages sin comprometer la seguridad?

Para llevar a cabo un despliegue usando GitHub Pages, aquí tienes un proceso a seguir teniendo en cuenta las advertencias de seguridad:

  1. Ignorar archivos sensibles: Añadir secrets.js, donde guardas API Keys, en .gitignore para evitar subirlo al repositorio público.

  2. 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
    
  3. 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.

Recomendaciones adicionales para un proyecto profesional

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:

  • Cursos de backend: Aprende los fundamentos en lenguajes como Node.js, Python, o el que prefieras.
  • Practica en plataformas multi-lenguaje: Experimenta con Heroku, Vercel y similares que ofrecen soporte para varios lenguajes y configuraciones de backend.
  • Proyectos adicionales: Crea más aplicaciones para reforzar el conocimiento adquirido y explorar diferentes técnicas de seguridad y despliegue.

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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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 💚

Main section

Movie Detail

Internationalization

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.

APRENDI MUCHO! Gracias @JuanDc Dejo el link de mi proyecto: <https://movie-market-chi.vercel.app/> Agradezco el feedback :)
Aqui mi DEPLOY: <https://everlizarraga.github.io/personalProjects/theMovieDB.html>

mi pagina, se aprendio un monton

https://andres-montes.github.io/movie_page/

Creo que este es el primer curso de Juan que me gusta de verdad, el único que hice sin sufrir... Esta es la web que hice desde el primer curso de esta saga <https://alevroses.github.io/api__movies/> falta perfeccionar pero aprendí mucho.

Muy buen curso, aprendi mucho y desde hace un tiempo para aca queria hacer una app de peliculas. Aqui mi version del proyecto:

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.

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
![](

prometo mejorarlo…

https://dampdev.github.io/dampMovies/#home
agregue los trailer y el reparto de cada pelicula
y un preview antes de entrar a detalles

Un curso muy completo, este es mi proyecto, solo hice la versión mobile, después lo ire mejorando para versión tablet y desktop. Repo: <https://github.com/santiagodev10/Awesome-Movies/tree/github-pages> Proyecto: <https://santiagodev10.github.io/Awesome-Movies/>
Incluso podriamos usar un secret en github para guardar el api key y evitar exponerla. Hay varias maneras...
Environment variables y ya no hay que exponer la API KEY
Aquí les dejo mi proyecto llamado Theatron: [página](https://emilymenchu.github.io/theatron/#home) y [repositorio](https://github.com/emilymenchu/theatron). Hay muchas cosas que tengo que mejorar, además no es responsive y lo hice usando una pantalla muy grande, tal vez no se vea bien si lo ven en pantallas pequeñas. Pronto lo arreglaré!!!!! Home: ![](https://i.imgur.com/V4ECQPh.jpeg) Apartado para ver Series/Peliculas: ![](https://i.imgur.com/ltCZcJw.png) PlayList y Favoritos: ![](https://i.imgur.com/FAkAMSG.png) Preview de pelicula: ![](https://i.imgur.com/lOVrEuU.png) Búsqueda: ![](https://i.imgur.com/Msb5760.jpeg)
Un curso en el que aprendi un monton y me diverti muchisimo. Aqui mi deploy del proyecto: <https://kellbisj.github.io/MoviesKS/>
Les comparto el mio <https://ultisaer.github.io/Films.github.io/> ![](https://static.platzi.com/media/user_upload/image-095b315e-5028-434f-a010-e38885387e01.jpg)![](https://static.platzi.com/media/user_upload/image-449189a6-2654-4d6a-afde-5383ebb6d432.jpg)![](https://static.platzi.com/media/user_upload/image-123a8f76-c96c-4c85-8868-4c63ce2bf158.jpg)![](https://static.platzi.com/media/user_upload/image-7a308c96-4f82-40a1-a80b-30c91fb569d4.jpg)![](https://static.platzi.com/media/user_upload/image-4a2a5996-87b8-4c09-bcaf-07307f223ccc.jpg) ![](https://static.platzi.com/media/user_upload/image-7ec3ea8b-4fce-4e0e-ae75-8fc799cf405c.jpg)
Yo utilicé GitHub Pages para desplegar mi proyecto. [MovieLand (alangfelix.github.io)](https://alangfelix.github.io/movie-land/#home)

Para publicar tu repositorio público de GitHub en GitHub Pages sin exponer tu API key, puedes seguir los siguientes pasos:
.

  1. Crea un archivo de configuración llamado .env en la raíz de tu repositorio local. Este archivo será ignorado por Git y no se incluirá en tu repositorio remoto.
    .

  2. En el archivo .env, agrega la línea correspondiente a tu API key. Por ejemplo, si tu API key se llama API_KEY, agrega la siguiente línea al archivo:

    API_KEY=TU_API_KEY_AQUÍ
    
  3. Asegúrate de tener un archivo de configuración para tu aplicación que lea la API key de la variable de entorno en lugar de tenerla codificada en el código. Por ejemplo, si estás utilizando JavaScript, podrías tener algo como esto en tu archivo de configuración:

    const apiKey = process.env.API_KEY;
    
  4. Asegúrate de que el archivo .env se incluya en tu archivo .gitignore para que no se suba al repositorio remoto.
    .

  5. Genera una versión compilada de tu aplicación que incluya el archivo de configuración actualizado.
    .

  6. Crea un nuevo branch en tu repositorio local para GitHub Pages.
    .

  7. Realiza el commit y el push de la versión compilada y los archivos necesarios para GitHub Pages a ese branch.
    .

  8. Configura tu repositorio de GitHub para usar el branch de GitHub Pages como la fuente de publicación.
    .

  9. GitHub Pages utilizará los archivos del branch que has configurado y no expondrá la API key, ya que el archivo .env no se ha incluido en el repositorio remoto.
    .

De esta manera, tu repositorio de GitHub Pages estará publicado sin exponer tu API key. Recuerda actualizar tu archivo de configuración y volver a generar una versión compilada de tu aplicación si necesitas cambiar la API key en el futuro.

Comparto mi proyecto, muy feliz del resultado, aún faltan cositas, pero bueno, por ahora así va:
Para no publicar la API_KEY, le agregué un prompt para que por ahora (mientras aprendo a ocultarla desde el backend) 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/