A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Creando un Servicio para Gravatar

18/29
Recursos

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.

Aportes 34

Preguntas 3

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Me cortaron el final!

return `${base}${hash}`

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

return ${base} ${hash}

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

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 ūüėÉ

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

export default gravatar;

ūü¶Ą 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

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;

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

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 @

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

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

¬ŅAlguien me podr√≠a explicar que es Gravatar y porque lo usamos en este proyecto?
No estoy entendiendo porque usarlo y que es.

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

npm i md5 --save

export default gravatar;

no olviden exportar siempre

Perdon una consulta extra, que es un HASH? lo que menciona el profe

Es bueno saber que dicho por el profesor, no siempre se debe usar todo el paquete. En ocasiones basta con saber cómo funciona e intentar hacer lo mismo. Nos ahorra espacio y soporta fluidez

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 traer esa información

import md5 from 'md5';

const gravatar = (email) => {
    const base = 'https://gravatar.com/avatar/';
    const formatEmail = (email).trim().toLoweCase();
    const hash = md5(formatEmail, { encoding: "binary" });
    return `${base}${hash}`;
}
export default gravatar;

muy buena recomendación saber que lo que se va a utilizar y reducirlo a lo max

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.

muy bueno ese servicio de Gravatar, no lo conocía

Good class

Es el avatar de la imagen del header.

Podemos usar gravatar desde su sitio web o instalarlo con NPM pero esta no es la mejor opción. El paquete de NPM contiene muchas funciones que no vamos a utilizar así que es mejor no instalarlo.

Dentro de ‚Äėsrc‚Äô creamos la carpeta ‚Äėutils‚Äô y dentro creamos el archivo gravatar.js

Lo que sí necesitamos es MD5, npm i md5 -D. MD5 es un servicio criptográfico para crear un hash a partir de un e-mail.

Documentación de Mozilla para el método trim (en resumen, elimina los espacios en blanco).

gravatar.js:

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

export default gravatar;

Creo que el profesor se referia a formattedEmail y no ha formatteEmail

el codigo final queda asi

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

mas reducido el comando npm seria : npm i md5 -S

hola alguien sabe , si yo estoy registrada en gravatar por que no me aparece en la pagina cuando inicio sesion… y me aparece es la imagende gravatar por defecto…

Excelente consejo el no estar instalando miles de paquetes.

import md5 from 'md5';

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

  return `${base}${hash}`;
};
import md5 from "md5";

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

Md5 es un algoritmo criptografico utilizado por gravatar para crear un hash a partir de un correo electrónico, con esto gravatar crea un hash y lo vincula a una imagen, la cual es tu avatar.

Trim: nos ayuda a eliminar espacios.
toLowerCase: Es la funci√≥n que nos va a ayudar a nosotros a crearlo todo en min√ļsculas.

pr√°ctica: