‫Instructor: En este video, usaremos
‫el poder de Pug para crear una plantilla de correo electrónico realmente agradable
‫y luego enviaremos un correo electrónico de bienvenida basado en esa plantilla.
‫Y esa plantilla es bienvenida. pug aquí.
‫Bien, ahora como antes, ya tengo una plantilla aquí en
‫plantillas de datos de desarrollo.
‫Entonces, la plantilla de correo electrónico y todo este
‫código aquí con el CSS también está alineado.
‫Así que un montón de CSS.
‫Copiemos todo eso aquí como bienvenido. doguillo.
‫De acuerdo, y aquí arriba, en la parte inferior, verá esta
‫nota donde digo que en realidad adaptó esta plantilla de correo
‫electrónico de esta.
‫Así que abramos eso muy rápidamente.
‫Está bien.
‫Entonces, nuestro correo electrónico se parecerá un poco a este.
‫Ahora, por supuesto, adapté un poco el diseño a nuestra marca.
‫Entonces, para este botón
‫aquí, usé nuestro color verde, por ejemplo.
‫Pero algo de lo que usé es esta plantilla HTML.
‫Luego, de hecho, convertí ese HTML con esta herramienta.
‫Entonces HTML a Pug.
‫De nuevo, echemos un vistazo rápido a eso.
‫Y entonces, básicamente, lo que esto
‫le permite hacer es pegar algo de HTML
‫aquí, luego hacer clic en Convertir y generará el código Pug para usted.
‫Eso puede ser muy útil cuando
‫intentas convertir algunas páginas existentes que ya tienes un HTML a Pug.
‫De todos modos, cuando estamos creando un correo electrónico
‫HTML, siempre necesitamos integrar todos los estilos.
‫Y es por eso que tienes esta tonelada de CSS
‫aquí dentro de este archivo.
‫Pero, por supuesto, esto hace que este archivo
‫sea un poco ruidoso, así que tomemos todo eso y exportémoslo.
‫Está bien, entonces, sí.
‫Eso es todo.
‫Así que
‫córtelo, y aquí cree un nuevo archivo, y
‫luego, como antes, con los archivos que voy a incluir, uso el guión
‫bajo y luego el estilo. doguillo.
‫Así que pega eso aquí.
‫Y ahora también tenemos que ajustar todo este recuadro aquí
‫y otra vez, Comando + Mayús +
‫P o probablemente en Windows, Ctrl + Mayús + P.
‫Y luego simplemente escribe pug para embellecer pug.
‫Y eso hace que nuestro código sea agradable.
‫Cierra ese de aquí,
‫y ahora include_style.
‫Bien, y ahora ves todos estos códigos aquí abajo, lo que parece
‫realmente confuso y esa es en realidad la razón
‫por la que copié esta plantilla de ese repositorio de GitHub que
‫te mostré antes.
‫Así que hay muchas tablas en marcha y
‫eso se debe a que muchos
‫clientes de correo electrónico en realidad solo entienden las tablas para formatear.
‫Entonces tenemos todas estas cosas aquí que no son realmente
‫significativas con filas de tablas dentro de tablas dentro de tablas.
‫Estoy en lo cierto?
‫Pero lo que importa aquí es esta área de contenido.
‫Y esta es la
‫parte de la plantilla donde colocaremos todo nuestro contenido.
‫Ahora bien, la cosa es que, por
‫supuesto, tendremos muchas plantillas diferentes.
‫En el caso
‫de este proyecto, en realidad solo crearemos
‫dos nosotros mismos, pero puede haber muchos correos electrónicos para muchas
‫situaciones y, por lo tanto, por supuesto, necesitaremos una forma
‫de reutilizar todo este código que está fuera de este contenido.
‫Entonces, básicamente, todos estos aquí deberían ser reutilizables y, de
‫hecho, eso es exactamente lo que hicimos antes
‫con nuestra plantilla base aquí.
‫Está bien.
‫Así que colocamos todo lo que es reutilizable para
‫todas las plantillas dentro de esta base, luego tenemos nuestro bloque allí
‫y todas las demás
‫plantillas, luego simplemente extendimos este bloque.
‫Y eso es exactamente lo que haremos ahora.
‫Así que vayamos y cortemos todos estos desde aquí, creemos
‫una nueva plantilla llamada baseEmail y luego
‫colóquela aquí.
‫Y ahora, para el contenido en sí, por supuesto,
‫lo eliminamos de la base.
‫Así que corte ese de
‫aquí, y aquí creemos un bloque
‫llamado contenido, nuevamente.
‫Está bien.
‫Y ahora aquí, en nuestra plantilla de bienvenida, colocamos ese
‫contenido dentro de ese
‫bloque de contenido.
‫Bueno.
‫Y ahora, para terminar, tenemos que decir que se
‫extiende, de modo que esta plantilla aquí
‫extiende el correo electrónico base.
‫Formateemos esto nuevamente con este comando y
‫eso es hermoso.
‫Excelente.
‫Ahora, aquí en nuestra
‫plantilla base, ahora tenemos el tema como título.
‫Y esa es la razón por
‫la que pasé eso a la plantilla.
‫Así que eso es aquí mismo, ¿recuerdas?
‫Entonces, en la plantilla, pasamos el asunto,
‫la URL y el nombre.
‫Y ahora sigamos adelante y usemos esto en nuestra plantilla.
‫Entonces, el tema ya lo usamos aquí en la base,
‫pero eso es todo para este archivo, así
‫que no lo volveremos a tocar.
‫Y ahora aquí está nuestra plantilla real.
‫Así que tenemos aquí el nombre y, por lo tanto, lo reemplazamos
‫con la variable de nombre.
‫Así que firstName aquí, luego tenemos todos estos buenos textos aquí.
‫Bienvenidos a la familia, todas esas cosas.
‫Y luego aquí tenemos ese botón verde
‫del que hablé cuando les mostré la plantilla en
‫GitHub y así sucesivamente ese botón, decimos subir foto de usuario.
‫Y aquí necesitamos especificar esa URL que pasamos.
‫Muy bien, entonces se llama URL, correcto.
‫Y entonces, ahora ponemos eso en este botón aquí y
‫eso es todo.
‫Todo el resto aquí es solo
‫contenido estático que no necesitamos cambiar en absoluto, ¿de acuerdo?
‫Entonces, esta plantilla de bienvenida aquí ahora se usará cada
‫vez que llamemos a sendWelcome.
‫Y ahora, de hecho, sigamos adelante y hagamos eso.
‫Entonces, ¿desde dónde queremos enviar el correo electrónico de bienvenida?
‫Bueno, eso está en el authController y creo
‫que hay una función de registro o registro
‫o algo así, y está
‫aquí mismo.
‫Así que regístrate.
‫Y entonces, en esto, necesitamos importar el correo electrónico y
‫luego usarlo.
‫Y, de hecho, ya tenemos sendEmail, pero ahora recuerda
‫que se llama Email, así que con
‫una E mayúscula como esta.
‫Ahora usamos esa variable antes en algún lugar de aquí, así
‫que vayamos allí.
‫Muy bien, y este código aquí en
‫este punto ya no funciona, pero lo arreglaremos en el siguiente video.
‫Entonces, por ahora, comentémoslo
‫para que no cause ningún daño.
‫Pero de todos modos, ahora usemos esta clase de correo electrónico aquí.
‫Entonces, el nuevo correo electrónico, y luego recuerde, primero es el usuario y, en realidad,
‫el código VS lo sabe y muestra que aquí
‫y, por lo tanto, el usuario es el nuevo usuario que tenemos aquí
‫y luego la URL que vamos a crear aquí en un segundo.
‫Así que const url es igual, pongámoslo a cero, por ahora.
‫De acuerdo, y luego envíaBienvenido.
‫Y ahora todo lo que tenemos que hacer es
‫esperar esta función sendWelcome.
‫Muy bien, hacemos eso, que solo avanzamos aquí
‫al siguiente paso después de que el correo electrónico haya sido enviado.
‫Y podemos hacer eso,
‫por supuesto, porque sendWelcome es una función asincrónica, recuérdalo.
‫Entonces, cuando realmente
‫lo usamos, esperamos hasta que termine.
‫Está bien, y esto es todo
‫lo que necesitamos hacer para
‫enviar correos electrónicos ahora, pero aún necesitamos especificar nuestra URL aquí.
‫Ahora, ¿qué URL queremos realmente aquí?
‫Bueno, recuerda que
‫aquí en el botón, dice Upload_user_photo, ¿verdad?
‫Básicamente, queremos apuntar a
‫esa página de cuenta de usuario.
‫Entonces, básicamente, aquí mismo.
‫Entonces, por ahora, copiemos, pero luego lo cambiaremos.
‫Y podríamos dejarlo
‫así, pero entonces solo funcionaría en
‫desarrollo y no en producción, porque, por supuesto,
‫esto aquí no existe cuando estamos en producción.
‫Entonces, en lugar de codificarlo básicamente de esta manera, obtendremos
‫estos datos de la solicitud.
‫Entonces, básicamente, obtendremos qué protocolo estamos usando,
‫si usamos HTTP o HTTPS, y luego también este host.
‫De acuerdo, y ambos podemos obtener de la solicitud.
‫Así que reemplacemos todos estos aquí y hagamos
‫de esto una cadena
‫de plantilla y luego podemos decir solicitud. protocolo, luego dos
‫puntos, barra, barra y
‫luego solicitar. obtener.
‫Entonces necesitamos usar esta función
‫getter y lo que queremos obtener es el host.
‫Entonces, cuando estemos en desarrollo,
‫por supuesto, este será el host local en
‫el puerto 3000.
‫Bien, consolémoslo solo para
‫asegurarnos.
‫Bien, y ahora, probémoslo.
‫Y todo lo que tenemos que hacer para eso es simplemente crear un nuevo usuario.
‫Así que hagámoslo aquí en Postman.
‫Así que Regístrese, y
‫ahora en nuestro Cuerpo, creemos un nuevo nombre, digamos
‫Test User.
‫Y aquí, todo esto realmente no importa, así que
‫digamos test @ natours. io y
‫con la misma contraseña estándar.
‫Y ahora, cuando creamos este nuevo usuario, deberíamos
‫obtener un nuevo correo electrónico en nuestro Mailtrap, para que
‫podamos echarle un vistazo.
‫Intentémoslo y tenemos un buen error aquí.
‫Así que echemos un vistazo a eso.
‫Y dice que no pudo encontrar este archivo.
‫Entonces, hay algún error en nuestro controlador de correo electrónico aquí.
‫Así que intentemos encontrar dónde está eso.
‫Ah, está aquí abajo.
‫Entonces, el problema es que la carpeta
‫aquí se llama correo electrónico y aquí la llamé correos electrónicos.
‫Así que digamos correo electrónico,
‫prefiero ese.
‫Y ahora debería funcionar.
‫Ah, y ahora recibimos el
‫siguiente error, porque este correo electrónico aquí ya existe.
‫Y eso se debe a que en
‫el paso anterior creamos el error, el único problema
‫fue enviar el correo electrónico.
‫Así que hagámoslo de nuevo aquí, prueba dos.
‫Y un error más.
‫Esta vez viniendo directamente de Pug.
‫Por lo tanto, solo los bloques con nombre y los mixins pueden aparecer en el nivel superior
‫de una plantilla de extensión.
‫Y entonces algo anda
‫mal aquí, y de hecho lo está.
‫Así que ese es exactamente
‫el error que nos dijo que teníamos y que solo podemos tener
‫extensiones y bloques, pero aquí tenemos
‫este párrafo también en el nivel superior.
‫Entonces eso no está permitido.
‫Así que pongámoslo donde pertenece, que es aquí mismo.
‫Guarde eso, inténtelo una vez más y, por supuesto,
‫ahora obtenemos este error.
‫Así que digamos la prueba tres.
‫Bien, ahora estamos listos para irnos.
‫Así que creamos con éxito el nuevo usuario,
‫ha iniciado sesión.
‫Y ahora echemos un vistazo a Mailtrap para
‫ver si realmente recibimos nuestro correo electrónico.
‫Entonces Mailtrap.
‫Déjame iniciar sesión aquí muy rápido.
‫Y aquí está nuestra bandeja de entrada de
‫Natours, y de hecho, aquí está este nuevo correo electrónico de hace
‫un minuto que dice bienvenido a la familia de Natours.
‫Excelente.
‫Y realmente se ve muy bien, ¿verdad?
‫Así que esos son todos los textos que teníamos en nuestra plantilla.
‫También podemos ver el HTML completo aquí.
‫También aquí tenemos el texto.
‫Y recuerde que creamos este aquí desde
‫el HTML al paquete de
‫texto y así podemos confirmar que también funciona bien.
‫Y, uh, sí.
‫Intentemos hacer clic aquí en este botón
‫y, de hecho, nos lleva a la página de nuestra cuenta.
‫Ahora, en este momento estamos realmente conectados como Aarav
‫porque ya estábamos conectados como ese usuario, pero ese
‫no es realmente
‫el punto porque este correo electrónico aquí
‫supone que te estás registrando desde el sitio web, ¿verdad?
‫Ahora, eso no funciona en este
‫punto, por lo que no tenemos ningún formulario de registro
‫en nuestro sitio web, pero la parte
‫realmente importante aquí es que nuestro correo electrónico aquí ahora funciona bien, el
‫botón aquí también funciona.
‫Y ese gran controlador de correo
‫electrónico que creamos en la última conferencia está haciendo su trabajo
‫tan bien como la plantilla de correo electrónico
‫que creamos en este video.
‫Entonces, estoy muy contento con este resultado.
‫A continuación, hagamos algo similar para los
‫correos electrónicos de restablecimiento de contraseña.