Obviamente lo mejor es usar Variables de Entorno, pero creo que eso lo veremos más adelante.
Me parecen geniales estas clases, ya que nos muestran como se inicia de manera real un proyecto.
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 22
Preguntas 13
Obviamente lo mejor es usar Variables de Entorno, pero creo que eso lo veremos más adelante.
Me parecen geniales estas clases, ya que nos muestran como se inicia de manera real un proyecto.
Otra forma de exportar e importar
En el HTML decimos que nuestro js va a ser de tipo módulo.
<script type="module" src="./src/main.js"></script>
Nuestra api-key
export const API_KEY = 'soy la secreta api-key';
La importamos en el main.js
import { API_KEY } from "./key.js";
Un aporte a mi repositorio con un entorno podriamos decir más exigente, con linter eslint y formateador prettier, estas configuraciones puedes ajustarlas a tu gusto.
.
https://github.com/cerm88/platzi-movies
.
.
Si quieres que el autoformateo sea automático cada vez que guardes solo debes agregar esta configuración en tu setting.json
en tu espacio de trabajo en la carpeta .vscode
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.rulers": [100],
"editor.formatOnSave": true
}
}
Primera forma de testing de cualquier web developer: background: red. La vieja confiable jajajaja
gracias por siempre iniciar desde un principio los proyectos, ya que muchas veces se da por sentado que todos saben y puede inicializarlos. Gracias
Crear el archivo secrets.js y secrets.example.js me resulta útil, por ejemplo, cuando en entrevistas de trabajo te piden subir código que requiere un key que no debes compartir, así les dejas instrucciones claras para que ellos usen su propio key.
Yo quiero saber que agentes existirán en Michiagencia 😎
Ejemplo de una variable de entorno:
REACT_APP_API_KEY=abcd1726gy57
Ejemplo de uso:
console.log(process.env.REACT_APP_API_KEY)
Ten en cuenta que las variables de entorno se ejecutan al iniciar el servidor, así que no te alteres si tu variable no se muestra a la primera, esto puede pasar porque ya te encontrabas trabajando dentro de tu servidor antes de agregar las variables de entorno, la solución es detener el servidor y volverlo a iniciar con el clásico “npm start”.
Si quieres saber más sobre este tema, consulta la documentación aquí. 👈
Saludos, Poli. o( ̄▽ ̄)ブ💚
Para activar la extensión de Peacock
Por querer implementar Tailwind en el proyecto… una clase que debio durar 15 minutos, me tomo 3 horas. Vamos a decir que valio la pena
Excelente explicaión para ocultar los archivos que no se deseen visualizar en el repositorio
Si a alguien, aun haciendo lo que Juan no se le ‘oculta’ el secrets.js, lo que te tienes que hacer es colocar la ruta completa si lo has guardado en una carpeta a demás de en el src.
Ej:
moviesAPI > src > secrets.js
En el .gitignore tendrás que poner:
moviesAPI/src/secrets.js
Me he tirado horas intentado resolver porque no se ocultaba y era por la carpeta que tenia anterior al src :’)
YO NO LO HAGO PORQUE YA LO TENGO INSTALADO 🤣. Quién haya escuchado esa frase en alguna parte de sus vidas den su like.
“Simple” pero, necesario. Además, es una interesante introducción a seguridad.
El único problema es que al momento de publicar la app, si inspeccionamos el código fuente los usuarios pueden ver la KEY
Me encantaría que para nuevos cursos se optimice el espacio de VSC de la manera en que lo hace el profe Fernando Herrera.
Ya que de la manera que lo hacen en Platzi nos roba mucho espacio cuando tenemos pantallas pequeñas.
Puedo seguir la clase con comodidad…
😢👇 espacio perdido, no se puede ver la clase con comodidad
Debería haber una opción para ocultar los comentarios, así veo la pantalla en grande para ver solo el video.
Preferí usar el archivo .env, para guardar el valor de mi api_key
Me miré muy noob, tuve que volver a hacer todo el entorno, ya que me faltó una cosa, y por eso tuve que volver a reiniciar todo 😅
Me hubiera gustado como poder encriptarla la API_KEY de tal manera que sirviera en el github pages y mostrarla como portafolio =(
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?