‫Instructor: Con la parte de carga
‫de archivos de la
‫sección terminada, ahora dirijamos nuestra atención al envío de correos electrónicos.
‫Y en realidad ya enviamos un
‫correo electrónico antes para restablecer la contraseña, pero en las próximas
‫conferencias llevaremos eso a un nivel completamente nuevo.
‫Y lo que vamos a hacer es crear plantillas
‫de correo electrónico con pug y enviar correos electrónicos
‫reales utilizando el servicio SendGrid.
‫Y ahora, en esta primera conferencia,
‫crearemos un controlador de correo electrónico más sólido
‫que el que teníamos antes.
‫Entonces, abramos nuestra carpeta de utilidades, y
‫luego aquí, recuerde, ya tenemos un archivo de correo electrónico.
‫Pero en este momento
‫lo que tenemos aquí es solo un controlador de envío de
‫correo electrónico muy simple, que no puede admitir muchas opciones.
‫Y ahora vamos a
‫construir aquí una solución mucho más robusta.
‫¿Está bien?
‫Entonces, lo que voy a hacer es crear una
‫clase, y esa clase se llamará correo electrónico.
‫Entonces módulo. exportaciones, por lo
‫que también esta clase es
‫lo que vamos a exportar desde este archivo.
‫Y luego, como siempre, una clase necesita una función constructora, que es
‫básicamente la función que se ejecutará cuando se
‫cree un nuevo objeto a través de esta clase.
‫Ahora echemos un vistazo
‫a cómo usaríamos esta clase en la práctica.
‫Entonces, la idea, básicamente, cada
‫vez que queremos enviar un nuevo
‫correo electrónico, es importar esta clase de correo electrónico y luego usarla así.
‫Entonces, al crear un nuevo
‫correo electrónico, y luego en él, queremos pegar un
‫usuario, y ese usuario contendrá la dirección de correo electrónico
‫y también el nombre en caso de que queramos personalizar el correo electrónico.
‫Y también una URL.
‫Y un buen ejemplo
‫de este es, por ejemplo, la URL de restablecimiento para restablecer la contraseña.
‫¿Okey?
‫Entonces, un nuevo objeto de correo electrónico, y luego
‫queremos llamar al método que realmente va a
‫enviar el correo electrónico.
‫Entonces, digamos sendWelcome.
‫Y ese será enviado cada vez que
‫un nuevo usuario se registre en nuestra aplicación.
‫¿Está bien?
‫Luego, también tendremos que enviar el restablecimiento de la contraseña.
‫Y la forma en que
‫configuraremos todo esto hará que sea realmente
‫fácil seguir agregando nuevos y nuevos métodos similares
‫a este para enviar diferentes correos electrónicos para diferentes escenarios.
‫¿Está bien?
‫De todos modos, dado que pegamos el usuario
‫y la URL en un nuevo correo electrónico, nuestro
‫constructor necesita tomarlos como argumentos.
‫Entonces usuario y URL.
‫Entonces, lo que sucede en este constructor es que this. a será
‫igual al usuario. email Luego también
‫queremos definir el nombre del usuario, nuevamente
‫para personalizar básicamente el correo electrónico.
‫Y ese es el usuario. name y vamos
‫a dividirlo y tomar solo el primer elemento en la matriz resultante.
‫Así que hicimos
‫esto antes, pero también esto. url es igual a la URL entrante.
‫Finalmente, configuremos también esto. desde aquí.
‫así que básicamente a nivel de objeto.
‫Y así, cada objeto creado a partir de
‫esta clase obtendrá esta propiedad.
‫Y entonces este será similar al que tenemos aquí.
‫Básicamente es esto de, así que
‫copiémoslo, pero es
‫bueno tenerlo en un lugar central como este.
‫Ahora, una cosa que realmente quiero hacer
‫es básicamente definir esta dirección de correo electrónico aquí
‫como una variable de
‫configuración y, por lo tanto, una
‫variable de entorno que podemos
‫cambiar muy fácilmente manipulando la configuración. env archivo.
‫¿Está bien?
‫Así que llamemos a este EMAIL_FROM.
‫Y luego solo queremos la dirección de correo electrónico en sí.
‫¿Está bien?
‫Entonces, otro caso en el que es muy
‫útil usar variables de entorno.
‫Y ahora hagamos de esto una cadena de plantilla.
‫Y, por supuesto, conéctelo aquí.
‫Así que ese es el proceso. env. EMAIL DE.
‫A continuación, creemos un método aquí
‫para crear el transporte.
‫Muy similar a lo que tenemos aquí.
‫Así que createTransport.
‫Y ahora aquí realmente queremos tener diferentes transportes, ya
‫sea que estemos en producción o no.
‫Entonces, cuando estamos
‫en producción, queremos enviar correos electrónicos
‫reales, y lo haremos un poco más tarde usando
‫SendGrid, pero si no estamos en producción,
‫aún queremos usar nuestra aplicación Mailtrap tal como
‫lo hicimos antes cuando enviamos correos electrónicos.
‫Entonces, en lugar de que el correo electrónico vaya a una dirección de
‫correo electrónico real, quedará atrapado en nuestra bandeja de entrada de Mailtrap para
‫que podamos echarle un
‫vistazo en nuestro proceso de desarrollo.
‫Entonces ese transportador será exactamente el mismo que este, así que copiémoslo,
‫pero primero digamos if (process.
‫env. NODE_ENV).
‫Entonces, recuerde, así es como verificamos si
‫estamos en producción o no.
‫Entonces, si eso está
‫en producción, y
‫si estamos en producción, queremos crear un transportador para SendGrid.
‫Así que pongamos eso aquí, y
‫nuevamente lo haremos más tarde.
‫Por ahora, devolvamos algo de aquí.
‫No importa, digamos uno.
‫¿Está bien?
‫Y luego, básicamente, de lo contrario,
‫queremos devolver este nodemailer. createTransport.
‫¿Okey?
‫Entonces, este
‫Transporte aquí básicamente devolverá un nuevo transporte de nodemailer como este.
‫O, por otro lado, cuando estemos
‫en producción, entonces el que estará aquí.
‫¿Okey?
‫Así que eliminémoslo de aquí.
‫Además, queremos eliminar este.
‫Y ahora creemos el método de envío.
‫Y este será el
‫método que hará el envío real.
‫¿Okey?
‫Y este recibirá una plantilla y un tema.
‫Y comprenderá un poco mejor
‫por qué es así una vez que se complete toda la clase.
‫¿Okey?
‫Entonces plantilla y tema.
‫Así que pongamos un comentario aquí de lo que hará esto.
‫Y ahora, antes de escribir esta función,
‫permítanme mostrarles cómo la usaremos y
‫por qué necesitamos la plantilla y el tema aquí.
‫Entonces, recuerde cómo dijimos
‫aquí arriba que tendremos un método llamado sendWelcome, y también
‫como un método para enviar un correo electrónico de restablecimiento de contraseña.
‫Y ahora agreguemos eso aquí, así que envíenWelcome.
‫Y este no recibe ningún argumento y todo lo
‫que realmente hace es llamar a enviar con la plantilla
‫y el asunto que
‫queremos para este correo electrónico.
‫¿Okey?
‫Y nuevamente, esto hace que sea realmente
‫fácil crear diferentes correos
‫electrónicos para todo tipo de situaciones diferentes.
‫¿Okey?
‫Entonces tenemos esta función de envío de una ruta
‫aquí y luego todas estas más específicas, que
‫a su vez llamarán a la función de envío del enrutador
‫que está haciendo el trabajo real.
‫¿Okey?
‫Y de hecho aquí está esto. enviar porque, por
‫supuesto, estos métodos aquí,
‫se definirán en el objeto actual.
‫Y eso es esto.
‫Luego aquí pegamos el nombre de la plantilla.
‫Entonces, este nombre de plantilla que puse aquí,
‫en el futuro será una plantilla pug que
‫vamos a crear.
‫Entonces, de hecho, en la próxima conferencia,
‫crearemos esta plantilla de pug para enviar
‫este correo electrónico de bienvenida.
‫¿Okey?
‫Y luego solo la línea de asunto.
‫Digamos '¡Bienvenido a la familia Natours! 'Y así, de esta
‫manera, no tenemos que preocuparnos por ninguno de los
‫detalles de implementación cuando en realidad
‫estamos enviando el correo electrónico.
‫Entonces, por ejemplo, en el punto de
‫nuestro código donde queremos enviar el correo electrónico
‫de bienvenida, no tenemos que preocuparnos por los nombres
‫de las plantillas ni por las líneas de asunto.
‫Todo lo que vamos a hacer es enviar un correo electrónico
‫de bienvenida y listo.
‫Y luego nuestra clase
‫se encargará de ocuparse de la implementación.
‫¿Está bien?
‫De todos modos, ahora construyamos esta función de envío.
‫Entonces, lo que vamos a hacer en esta función,
‫es primero renderizar el HTML para el correo electrónico basado en
‫una plantilla pug.
‫Básicamente, el que
‫estamos pegando aquí con plantilla.
‫Luego, defina las opciones de correo electrónico
‫y, una vez más, será muy similar a este, y de
‫hecho, déjeme seguir
‫adelante, cortarlo de aquí y pegarlo aquí.
‫¿Okey?
‫Por supuesto que no va a ser exactamente lo mismo, pero
‫lo dejaremos para un poco más adelante.
‫¿Está bien?
‫Y finalmente,
‫cree un transporte y envíe un correo electrónico.
‫¿Okey?
‫Y eso es, lo dejo también para más tarde.
‫Entonces, comenzando con el punto número uno.
‫Y, por lo general, hasta este punto, solo usamos pug para
‫crear una plantilla, y
‫luego pasamos el nombre de la plantilla
‫a la función de renderizado en la respuesta.
‫Derecha.
‫Así que siempre lo usamos
‫así res. render, y
‫luego aquí el nombre de la plantilla.
‫¿Derecha?
‫Y lo que hace esta función de renderizado
‫detrás de escena es básicamente crear el HTML basado en la plantilla
‫pug y luego enviarlo al cliente.
‫Ahora, en este caso, realmente no queremos renderizar, todo
‫lo que queremos hacer es básicamente crear el HTML a partir
‫de la plantilla para que luego podamos enviar ese HTML como
‫el correo electrónico.
‫Básicamente, definirlo aquí como una opción HTML en estas
‫opciones de correo.
‫¿Okey?
‫Entonces, recuerde cómo podemos especificar texto y HTML.
‫Y principalmente nos interesa enviar un correo electrónico HTML.
‫Y es por eso que vamos a tener una plantilla
‫pug a partir de la cual generaremos este HTML.
‫¿Okey?
‫Entonces no va a funcionar así, sino
‫que en realidad necesitamos requerir el
‫paquete pug aquí.
‫Entonces,
‫pug así, y
‫luego necesitamos usar pug.
‫renderFile.
‫¿Okey?
‫Y entonces esto tomará el
‫archivo y luego convertirá el código pug en HTML real.
‫¿Okey?
‫Y para que luego podamos guardar en una variable HTML.
‫¿Está bien?
‫Entonces, ¿dónde está ese archivo?
‫Bueno, está en dirname, entonces D-I-R name, que
‫recuerda es la ubicación del
‫script que se
‫está ejecutando actualmente, y eso
‫es, ahora mismo, en esta carpeta de utilidades.
‫¿Okey?
‫Entonces, a partir de ahí, debemos avanzar un paso, luego
‫ir a las vistas, y desde allí ir a una carpeta de correos electrónicos
‫que también crearemos en un segundo.
‫Y luego ahí
‫es donde vamos a tener el archivo de plantilla.
‫Entonces plantilla}.
‫doguillo.
‫Entonces, para el correo electrónico de bienvenida, esta plantilla
‫se llamará bienvenida.
‫Y ahora creemos eso aquí en las vistas, creemos una nueva
‫carpeta, un correo
‫electrónico y luego un nuevo archivo,
‫bienvenido. doguillo.
‫¿Okey?
‫Y no vamos a crear realmente esta
‫plantilla en este video, pero solo quería mostrarles cómo
‫va a funcionar todo esto.
‫¿Okey?
‫Entonces, esta bienvenida se pegará aquí en
‫la plantilla y luego tomará ese archivo de la carpeta de vistas.
‫¿Derecha?
‫Entonces, ese es el primer paso.
‫A continuación, definamos las opciones de correo electrónico.
‫Entonces, de ahora es esto. de.
‫¿Recordar?
‫Así que aquí mismo.
‫A
‫continuación, tenemos esto. a, y también tenemos el
‫tema que es igual al tema que viene aquí, y
‫entonces, yah, en realidad ni siquiera necesitamos definir este
‫y tenemos nuestro HTML.
‫Así que, o por supuesto, eso
‫ni siquiera es necesario porque es el mismo nombre.
‫Ahora, a continuación, también queremos incluir una versión de texto de
‫nuestro correo electrónico en el correo electrónico.
‫¿Okey?
‫Y eso es realmente importante porque es mejor para las
‫tasas de entrega de correo electrónico y también para las carpetas de correo no deseado.
‫¿Está bien?
‫Y también algunas personas prefieren los correos electrónicos de texto simple en
‫lugar de tener los correos electrónicos HTML con más formato.
‫¿Está bien?
‫Básicamente, necesitamos una forma de convertir todo
‫el HTML en texto simple.
‫Así que eliminando todo el HTML dejando solo el contenido.
‫Y para hacer eso,
‫vamos
‫a instalar otro paquete, y este se llama html-to-text.
‫¿Está bien?
‫Incluyémoslo aquí,
‫ToText.
‫require ('html-to-text'), así.
‫¿Okey?
‫Ahora usemos eso para convertir nuestro HTML.
‫Entonces usamos htmlToText. fromString y luego
‫esa cadena se almacena en HTML.
‫¿Derecha?
‫Entonces, estas son nuestras opciones de correo, y
‫de hecho, olvidé algo muy, muy importante, aquí en este
‫primer paso, en este archivo de renderizado, porque al igual
‫que con la respuesta. render, también podemos
‫pegar datos en el archivo de render.
‫Y, por supuesto, eso es
‫muy importante si realmente queremos personalizar o enviar un correo
‫electrónico con el nombre y también pegar la URL.
‫Y hagámoslo como lo hacíamos normalmente en la
‫función de renderizado.
‫Así que ese es FirstName, envíalo a esto. firstName, y la
‫URL es esta. url, y también peguemos el asunto
‫y verá un poco más adelante
‫por qué lo necesitamos.
‫¿Okey?
‫Entonces, ahora finalmente creemos un transporte usando
‫nuestra función de crear transporte, y
‫luego enviemos el correo electrónico.
‫Entonces, bastante justo, eso es esto. createTransport.
‫Entonces, recuerde que este es solo este método aquí, este, y tiene
‫exactamente el mismo nombre
‫que esta función aquí proveniente de nodemailer.
‫Así que eso
‫es un poco confuso, así que llamémoslo newTransport aquí.
‫Bien, y aquí también es newTransport, para que sea
‫un poco menos confuso.
‫¿Está bien?
‫Ahora recordemos cómo lo hicimos aquí antes.
‫Así que teníamos
‫nuestro transportador, que creamos por
‫separado en este caso, y luego encadenamos sendMail con las opciones.
‫Así que tomemos eso aquí, eliminemos todo el código restante.
‫Así que básicamente pon eso aquí como referencia.
‫¿Okey?
‫Entonces este transportador es ahora esto.
‫¿Está bien?
‫Y luego a eso, enviamos en cadena el correo electrónico y luego
‫con las opciones de correo que definimos aquí.
‫Entonces, debemos esperar todo
‫esto, porque, por supuesto, es una función asincrónica.
‫Y ahora marquemos este aquí como asíncrono.
‫¿Okey?
‫Y ahora, también debemos esperar la función aquí.
‫¿Está bien?
‫Porque esto. enviar ahora es de hecho una función asíncrona.
‫Y aquí esperamos eso para que esta función solo regrese tan pronto
‫como se haya enviado el correo electrónico.
‫Y así, por supuesto, marque este también como asíncrono.
‫Impresionante.
‫Eso es todo para esta clase.
‫Entonces ya no necesitamos este ejemplo.
‫¿Okey?
‫Entonces, en el siguiente video, seguiremos adelante
‫y usaremos esta nueva clase para enviar un correo electrónico de bienvenida.
‫Entonces, recapitulemos muy rápidamente lo que hicimos aquí.
‫Así que creamos una nueva clase de correo
‫electrónico a partir de la cual podemos crear objetos
‫de correo electrónico que luego podemos usar para enviar correos electrónicos reales.
‫Y para crear un nuevo objeto de correo electrónico, pegaremos el usuario y también
‫una URL que queremos que esté en ese correo electrónico.
‫Entonces, aquí asignamos todas esas cosas al objeto actual, y
‫también algunas otras configuraciones que queremos
‫tener disponibles, como el nombre y el correo electrónico del remitente.
‫Básicamente, abstraer esta información de
‫la función de envío
‫y tenerlo todo en un lugar central.
‫Entonces tenemos aquí una nueva función de transporte
‫que hace que sea realmente fácil crear diferentes
‫transportes para diferentes entornos.
‫Y así, una vez más, abstrayendo esa
‫lógica de la función de envío
‫real, que solo debería preocuparse por enviar el correo electrónico.
‫¿Okey?
‫Entonces aquí está esa función de envío que toma una
‫plantilla y un asunto, y en base a eso crea el HTML a partir
‫de una plantilla pug que luego se configurará en
‫las opciones de correo electrónico, que,
‫al final de la función, finalmente enviarse en esta
‫línea de código.
‫¿Okey?
‫Pero no será esta función de envío la
‫que usaremos en nuestro código.
‫Entonces, en cambio, crearemos una función
‫diferente para cada tipo de correo electrónico
‫que queremos enviar.
‫Y el primero que creé aquí es sendWelcome.
‫¿Está bien?
‫Entonces, para sendWelcome, básicamente preestablecemos el nombre de
‫la plantilla como
‫bienvenido y el asunto como esta cadena.
‫¿Okey?
‫Entonces, espero que tenga sentido, y los veo en un segundo.