Creando un Servicio para Gravatar

Clase 18 de 29 • Curso de React Router 5 y Redux

Resumen

Muchas veces la mejor opción no es descargar un paquete de npm ya que podemos ver la documentación, entender cómo funciona y nosotros implementar el código necesario para nuestro caso, ya que instalar todo el paquete puede volver más pesado nuestro proyecto.

Para nuestro servicio que llamará a Gravatar vamos a crear la carpeta utils y dentro añadir el archivo gravatar.js.

Seba Cardoso

student•

Me cortaron el final!

return `${base}${hash}`

Oscar Barajas Tavares

Team Platzi•

Reviso la clase para ver el corte que mencionas.

Bryan Aranda

student•

El profesor siempre dice en los comentarios de los cursos que va a revisar o reparar los problemas y me doy cuenta que como en este caso, ha pasado un año y no arreglan nada

Bruno Amadori

student•

Quería decir que gracias a estos cursos ahora tengo una manera de trabajar mucho más ordenada, tanto en css/html/js, como organizando scripts y archivos en proyectos, más allá del lenguaje

Joel Bello

student•

return ${base} ${hash}

Pablo Nicolás Alonso

student•

Y falta el export al final. Dejo el link del archivo gravatar.js del repositorio del profesor:

https://github.com/platzi/PlatziVideo/blob/feature/router-redux/src/utils/gravatar.js

Gabriel De Andrade

student•

const base = 'https://gravatar.com/avatar/';

Israel Urbina

student•

Como menciona el profesor es importante, leer la librería o lo que vayamos agregar externo al proyecto y solo usar lo necesario, y evitar tener cosas que nunca usaremos nomas ocupando espacio :)

Carmen Sánchez Salgado

student•

Me confundió no ver esta línea del export, pero sí es necesaria, la pone en la siguiente clase:

export default gravatar;

Juan Jose Vega

student•

Correcto En la siguiente clase se agrega, siempre hay que exportar

Andrés Campuzano Garzón

student•

🦄 Acá el código hasta el momento, noten que cambiado el devserver a una IP propia, en caso de que lo quieran implementar, deben de cambiar la IP del host, la encuentran abriendo la terminal y escriben ipconfig o en mac ifconfig. https://github.com/AndresCampuzano/React-Router-and-Redux/commit/f805cab5ee29f4f882dc13e4b26492b8efcbcc96

Jose Daniel Molina

student•

Genial...

import md5 from 'md5';

const gravatar = email => {
  const base = 'https://gravatar.com/avatar/';
  const formatEmail = email.trim().toLowerCase();
  /*
    Ya que no se pueden mandar @ debemos convertir el email
    a formato binario
  */
  const hast = md5(formatEmail, {encoding: "binary"});
  return `${base}${hash}`;
}

export default gravatar;

Daniel Esteban Santos Mendez

student•

Por qué usamos en parámetro email entre parentesis cuando lo estamos formateando?

Andrés Felipe Eslava Zuluaga

student•

Ejecutan lo mismo sea que esté con paréntesis o sin ellos. Pero realmente aún no encuentro el por qué :/

Juan Camilo Urbano Gómez

student•

Creo que únicamente lo colocó para que se viera un poco más ordenado

Joel Eduardo Sánchez Herrera

student•

Vamos a trabajar con gravatar que es un servicio de almacenamiento de imagenes que vamos a implementar dentro del proyecto para el avatar de nuestro header.

En nuestro editor de codigo en SRC crearemos la carpeta de UTILS donde crearemos el archivo gravatar.js, pero para continuar necesitamos de MD5 y lo tenemos que instalar en nuestro proyecto

npm install md5 --save

ya que lo tenemos vamos a importarlo en nuestro archivo con

import md5 from 'md5';

Ahora crearemos la constante donde tendremos nuestra funcion en donde va a recibir como parametro un email y va a retornar lo necesario para retornar la URL que vamos a usar por medio de nuestro hash por nuestro correo electronico

const gravatar = (email) => {
  const base = "https://gravatar.com/avatar";
  const formatteEmail = email.trim().toLowerCase();
  const hash = md5(formatteEmail, { encoding: "binner" });
  return `${base}${hash}`;
};

Donde al email lo formateamos haciendo todo minussculas y quitandole todos los espacios, despues a esto lo convertimos en un hash con la funcion pero le agregamos el encoding binner para quitar ese @

Franklin Gerardo Pimentel Hernández

student•

Buen resumen :3

Edgar Ramón Elías Castorena

student•

Tengan:

import md5 from 'md5';

const gravatar = (email) => {

  const base = 'https://gravatar.com/avatar';
  const formatEmail = (email).trim().toLowerCase();
  const hash = md5(formatEmail, { encoding: 'binary' });

  return `${base}${hash}`;
};

Carlos Javier Bazan Huaman

student•

falto un slash al final de la URL. xD

Patrick Jhonatan Hernandez Blanco

student•

En el curso de React también usamos gravatar, pero la explicación de Oscar es mucho mejor...

Alan David R.L.

student•

¿Alguien me podría explicar que es Gravatar y porque lo usamos en este proyecto? No estoy entendiendo porque usarlo y que es.

Daniel Esteves

student•

Gravatar es un servicio que sirve para las imágenes de perfil asociadas a un correo electrónico, muchas páginas utilizan Gravatar en lugar de un servidor propio para jalar esa información

Oscar Barajas Tavares

Team Platzi•

2 finalidades,

La primera nos permite entender como no debemos de depender de paquetes de terceros solo por que los necesitamos en nuestro proyecto.

Segunda, nos permite añadirle una imagen al proyecto cuando iniciamos sesión.

Usuario anónimo

user•

Para nuestro servicio que llamará a Gravatar vamos a crear la carpeta utils y dentro añadir el archivo gravatar.js.

Rabi Leonel Leon Chan

student•

Repositorio del curso https://github.com/platzi/PlatziVideo/tree/feature/router-redux

Andrés Campuzano Garzón

student•

npm i md5 --save

Samuel Jose Vega Do Lugar

student•

No sé por qué después de instalar md5 me salía un error de que los módulos de react-redux no se encontraban; me tocó volver a correr npm install redux react-redux --save

Javier Romero

student•

compañeros una pregunta el código que esta en el archivo de gravatar.js lo puedo utilizar como configuración en cualquier proyecto que yo haga o ese código es solamente para esta clase ? quería saber eso porque me gustaría utilizar ese código en otros proyectos pero primero quiero que ustedes me confirmen por favor, gracias.

Luis Lira

student•

Pues realmente podrías utilizarlos en más proyectos, solo tendrías que asegurarte de pasarles los parámetros que necesite para que ese código pueda funcionar :) Normalmente todos los "utils" son reutilizables.

Alejandro González Reyes

student•

Revisando al documentación de la librería md5 en npm, indica que solo recibe un parámetro, que es el contenido a hashear. Sin embargo Oscar pasa un segundo parámetro argumentando que no deben aparecer @ en el resultado final. De donde sacó esa información.

Daniel Esteves

student•

¡Hola! Te comento que eso no se encuentra en la documentación oficial pero es un parámetro que se le pasa extra a MD5 cuando se necesita hacer este tipo de encoding del texto :muscl

Jose Giovanni Vargas Rueda

student•

tambn puedes ir a la definición de la libraria dentro del node_modules para ver q paramatros puede recibir

Juan Diego Garin

student•

export default gravatar;

no olviden exportar siempre

Creando un Servicio para Gravatar

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found

Componente: Layout

Manejando enlaces y configuraciones

¿Qué es Redux?

Qué es Redux

¿Qué es Redux? Profundizando en la herramienta

Instalación de Redux

Creando el Store de Redux

Aplicando Redux a nuestra aplicación

Creando los reducers

Finalizando reducers y eliminar favoritos

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Crear Formulario de Login

Formulario de Login con Redux

Creando un Servicio para Gravatar

Uso de gravatar en nuestro proyecto

Validación para LogIn LogOut

Register

Register con Redux

Vista general del player

Arreglando la funcionalidad del player

Terminando de detallar nuestro player

Validaciones

Validaciones de UI

Debug con Redux Devtools

Cierre del curso

Cierre del Proyecto