Configuración del entorno de desarrollo

Clase 3 de 17 • Curso de API REST con Javascript: Ejemplos con APIs reales

Clase anteriorSiguiente clase

Oscar Fuentes Esteves

student•

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.

Pablo Humberto Arriola Agudelo

student•

oscarfuentes81 un saludo. Puedes ampliar el concepto de variables de entorno en javascript puro. Donde se ubicarían, ¿es posible encriptarlas?, su protección en general. Gracias.

Bramucci Candela

student•

Pablo no sé si te entendí bien, pero en el curso de webpack vemos como usar variables de entorno

Guadalupe Monge Barale

student•

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";

Jesús Álvarez

student•

A mi me funcionó así pero cambiando las extenciones .js a .mjs

Luis David Palomo

student•

Muchas gracias, tenia un error y su comentario de que el js sea tipo modulo me ayudo a resolverlo.

Carlos Rodríguez

student•

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
    }
}

Yangetze González

company_admin•

Primera forma de testing de cualquier web developer: background: red. La vieja confiable jajajaja

Marcos Joel Sánchez López

student•

gracias por siempre iniciar desde un principio los proyectos, ya que muchas veces se da por sentado que todos saben y puede inicializarlos. Gracias

Hiram Rodriguez Gomez

student•

Exacto, de igual manera también nos ayuda a repasar o aprendemos tips adicionales que no se han comentado en otros cursos.

Juan Castro

teacher•

En este curso práctico iniciamos el proyecto desde cero, pero en el curso profesional retomaremos un proyecto ya iniciado para optimizarlo tanto como podamos. Recuerda que, aunque sí es muy importante saber empezar proyectos desde cero (de hecho, es lo más recomendable para aprender algo nuevo), muchas veces NO tendrás esa oportunidad, sino que tendrás que colaborar en proyectos que ya empezaron hace mucho, por lo que será indispensable comprender su arquitectura y adaptarte al código a existente hasta que lo comprendas tan pero tan bien que puedas contribuir de la mejor manera posible. :D

Julian Franco

student•

Yo quiero saber que agentes existirán en Michiagencia 😎

Jorge Garcia

student•

jajaj ya somos dos.... que clase de tecnologia usan

Patricio Nally

student•

Estaría bueno ya que estamos trabajando desde el Frontend poder hacer un hide de la api-key ejemplo deploy a Netlify usando variables de entorno con Netlify functions. Me gustaría aprenderlo y no se como se hace! Gracias.

Juan Castro

teacher•

En el curso profesional vamos a hablar del deploy. Aaaaaunque en realidad faltaría un curso un tris más avanzado para que lo hagamos tal cual como dices con variables de entorno.

Patricio Nally

student•

Exacto me interesaría esa parte, hoy en día con la utilización del JAMStack y Serverless , y organizar un proyecto como una infraestructura de micro-servicios, en vez de hacer un backend en node.js para ocultar las apis, ya que muchas veces no queremos que sepan de donde consumimos la info, se pueda usar una cloud functions, o vi que Netlify o Vercel dejan guardar hasta 100 variables de entorno por proyecto que en el fondo usan AWS Amplify! Puntualmente no se como ocultar las apis de esa manera, tengo que aprenderlo. Quizás es un concepto avanzado. 💪🏻

Luis Dominguez

student•

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.

Usuario anónimo

user•

📒 Agregando variables de entorno para trabajar en React

Agrega un archivo .env en el nivel donde se encuentra tu .gitignore.

Declara tu(s) variable(s) de entorno dentro de tu archivo .env, dichas variables siempre deben comenzar por "REACT_APP_", sin las comillas y agregando el nombre de tu variable en mayúsculas espaciada por guiones bajos, posteriormente asígnale un valor a esta variable usando un "=".

Ejemplo de una variable de entorno: REACT_APP_API_KEY=abcd1726gy57

Para usar tu variable de entorno simplemente declara: "process.env." Sin las comillas y seguido del nombre de tu variable.

Ejemplo de uso:

console.log(process.env.REACT_APP_API_KEY)

Ahora en tu archivo .gitignore agrega: ".env", sin comillas y en cualquier parte del documento, eso ignorará los archivos .env y mantendrá a salvo tus secretos.

Nota:

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(￣▽￣)ブ💚

Misael Gomez

student•

Para activar la extensión de Peacock

F1
escribe: Peacock
Elige: Peacock: Change to a favorite color

Said Cueter

student•

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

Josue Samuel Castillo Cetino

student•

cuál es la forma más usada para verificar que el archivo css este bien? body{ background-color: red; }

Ricardo Andres Ojeda Silva

student•

Hola! ¿Qué alternativa podríamos usar desde el frontend si queremos hacer deploy a producción pero mantener nuestra API key "segura" ?

Juan Castro

teacher•

Lo respondemos en el curso profesional: https://platzi.com/cursos/api-profesional/

Maury Sugheiry Alcalá Romero

student•

Excelente explicaión para ocultar los archivos que no se deseen visualizar en el repositorio

Chema F

student•

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 :')

Ricardo Alfonso Chavez Vilcapoma

student•

YO NO LO HAGO PORQUE YA LO TENGO INSTALADO 🤣. Quién haya escuchado esa frase en alguna parte de sus vidas den su like.

Julian Franco

student•

Hay otra manera de implementar lo de la API Key del lado del cliente y no del lado de servidor ?

Juan Castro

teacher•

Sí y no. Todo en el frontend es público, eso nunca cambiará. Pero dependiendo del tipo de autenticación que quieras hacer, puede que cada usuario tenga su propio token / API KEY diferente y el resto del mundo no tenga por qué enterarse. En casos "básicos" como este no hay de otra, la API KEY tiene que ir con las peticiones. Punto.

Juan Castro

teacher•

Mi recomendación es que no evites al servidor. Aprende frontend con calma, desarrolla tus proyectos... pero si puedes, apenas puedas... aprende backend con Node para poder implementar todo este tipo de estrategias con mucho más control

Christian Velázquez

student•

"Simple" pero, necesario. Además, es una interesante introducción a seguridad.

Gonzalo Piñeiro Aleman Urquiza

student•

El único problema es que al momento de publicar la app, si inspeccionamos el código fuente los usuarios pueden ver la KEY

Juan Castro

teacher•

Yep. Precisamente. Lo vemos más a detalle en el curso profesional.

Henry Alexander Velásquez Rosas

student•

Recomendación 🤗💜

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.

Estudiante común en Platzi y fuera 🚀

Puedo seguir la clase con comodidad...

😢👇 espacio perdido, no se puede ver la clase con comodidad

Configuración del entorno de desarrollo

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