‫Instrutor: Terminada a parte da
‫seção de upload de
‫arquivos, vamos agora voltar nossa atenção para o envio de emails.
‫E na verdade já enviamos um
‫e-mail antes, para a redefinição da senha, mas nas próximas duas
‫palestras vamos levar isso a um nível totalmente novo.
‫E o que vamos fazer é construir templates
‫de email com pug e enviar emails
‫reais usando o serviço SendGrid.
‫E agora, nesta primeira aula, vamos
‫construir um gerenciador de e-mail mais robusto do
‫que o que tínhamos antes.
‫Então, vamos abrir nossa pasta de
‫utilitários, e aqui, lembre-se, já temos um arquivo de e-mail.
‫Mas agora o que
‫temos aqui é apenas um gerenciador de envio de e-mail muito
‫simples, que não é capaz de abranger muitas opções.
‫E agora vamos
‫construir uma solução muito mais robusta aqui.
‫Tudo bem?
‫Então, o que vou fazer é criar uma
‫classe, e essa classe se chamará e-mail.
‫Portanto, módulo. exportações, e
‫também esta classe é
‫o que vamos exportar deste arquivo.
‫E então, como sempre, uma classe precisa de uma função construtora, que
‫é basicamente a função que estará em execução
‫quando um novo objeto for criado por meio dessa classe.
‫Agora, vamos realmente dar uma
‫olhada em como usaríamos essa classe na prática.
‫E então a ideia,
‫basicamente, sempre que quisermos enviar um
‫novo e-mail, é importar essa classe de e-mail e depois usá-la assim.
‫Então, criando um novo
‫email, e nele, queremos colar um usuário, e
‫então esse usuário irá conter o endereço de
‫email, e também o nome, caso desejemos personalizar o email.
‫E também um URL.
‫E um bom exemplo
‫para este é, por exemplo, o URL de redefinição para redefinir a senha.
‫OK?
‫Então, um novo objeto de email, e aí
‫queremos chamar o método que vai
‫realmente enviar o email.
‫Então, vamos dizer sendWelcome.
‫E então esse será enviado sempre que
‫um novo usuário se cadastrar em nosso aplicativo.
‫Tudo bem?
‫Em seguida, também enviaremos a redefinição da senha.
‫E a maneira como
‫vamos configurar tudo isso tornará muito fácil
‫continuar adicionando novos e novos métodos semelhantes
‫a este para enviar e-mails diferentes para cenários diferentes.
‫Tudo bem?
‫De qualquer forma, como colamos o usuário e
‫a URL em um novo e-mail, nosso construtor
‫precisa considerá-los como argumentos.
‫Então, usuário e URL.
‫E então o que acontece nesse construtor é isso. para será
‫igual ao usuário. email Em seguida, também
‫queremos definir o primeiro nome do usuário, novamente
‫a fim de personalizar basicamente o email.
‫E então esse é o usuário. nome e vamos
‫dividi-lo e pegar apenas o primeiro elemento na matriz resultante.
‫Então já fizemos
‫isso antes, mas também isso. url é igual ao URL de entrada.
‫Finalmente, vamos definir isso também. daqui.
‫então, basicamente, no nível do objeto.
‫E então cada objeto criado a partir
‫dessa classe receberá essa propriedade.
‫E então este será semelhante ao que temos aqui.
‫Então é basicamente isso, vamos apenas
‫copiá-lo, mas é
‫bom tê-lo em um lugar central como este.
‫Agora, uma coisa que eu realmente
‫quero fazer, é basicamente definir este endereço de e-mail
‫aqui como uma
‫variável de configuração e, portanto, uma
‫variável de ambiente que podemos
‫alterar facilmente manipulando a configuração. arquivo env.
‫Tudo bem?
‫Então, vamos chamá-lo de EMAIL_FROM.
‫E então queremos apenas o próprio endereço de e-mail.
‫Tudo bem?
‫Outro caso em que é muito útil
‫usar variáveis de ambiente.
‫E agora vamos fazer disso uma string de modelo.
‫E, claro, conecte isso aqui.
‫Então esse é o processo. env. E-MAIL DE.
‫A seguir, vamos criar um método
‫aqui para criar o transporte.
‫Tão semelhante ao que temos aqui.
‫Portanto, crie o transporte.
‫E agora aqui nós realmente queremos ter transportes
‫diferentes, estejamos em produção ou não.
‫Então, quando
‫estamos em produção, queremos enviar emails
‫reais, e faremos isso um pouco mais tarde
‫usando SendGrid, mas se não estivermos
‫em produção, ainda queremos usar nosso aplicativo Mailtrap
‫exatamente como fazíamos antes, quando enviamos e-mails.
‫Portanto, em vez de o e-mail ir para um endereço de e-mail real,
‫ele ficará preso em nossa caixa de entrada do Mailtrap para que
‫possamos dar uma olhada
‫em nosso processo de desenvolvimento.
‫Então esse transportador será exatamente o mesmo que este, então vamos apenas copiá-lo,
‫mas primeiro vamos dizer if (processar.
‫env. NODE_ENV).
‫Então, lembre-se, é assim que verificamos se
‫estamos em produção ou não.
‫E se isso estiver
‫em produção, e
‫se estivermos em produção, queremos criar um transportador para SendGrid.
‫Então, vamos apenas colocar isso aqui
‫e faremos isso mais tarde.
‫Por enquanto, vamos apenas retornar algo daqui.
‫Não importa, vamos dizer um.
‫Tudo bem?
‫E então, basicamente, do contrário,
‫queremos retornar este nodemailer. createTransport.
‫OK?
‫Portanto,
‫este Transporte aqui basicamente retornará um novo transporte nodemailer como este.
‫Ou, por outro lado, quando estamos
‫em produção, então o que vai estar aqui.
‫OK?
‫Então, vamos realmente excluí-lo daqui.
‫Além disso, queremos excluir este.
‫E agora vamos criar o método send.
‫E então este será o
‫método que fará o envio real.
‫OK?
‫E este receberá um template e um assunto.
‫E você entenderá um pouco
‫melhor por que isso acontece quando toda a classe for concluída.
‫OK?
‫Portanto, modelo e assunto.
‫Portanto, vamos comentar aqui o que isso fará.
‫E agora, antes de realmente escrevermos essa
‫função, deixe-me mostrar como vamos usá-la
‫e por que precisamos do modelo e do assunto aqui.
‫Então, lembre-se de como
‫dissemos aqui que teremos um método chamado sendWelcome, e
‫também um método para enviar um e-mail de redefinição de senha.
‫E então, vamos agora realmente adicionar isso aqui, então envie Bem-vindo.
‫E este não recebe nenhum argumento e tudo o
‫que realmente faz é chamar send com o template
‫e o assunto
‫que queremos para este email.
‫OK?
‫E, novamente, isso torna realmente fácil criar
‫diferentes e-mails para
‫todos os tipos de situações diferentes.
‫OK?
‫Portanto, temos essa função de envio de uma rota aqui
‫e, em seguida, todas essas funções mais específicas,
‫que, por sua vez, chamarão a função de envio do roteador
‫que está fazendo o trabalho real.
‫OK?
‫E na verdade aqui é isso. enviar porque é
‫claro que esses métodos aqui,
‫eles serão definidos no objeto atual.
‫E então é isso.
‫Em seguida, colamos aqui o nome do modelo.
‫E então este nome de modelo que coloquei
‫aqui, será no futuro um modelo de pug
‫que iremos criar.
‫Então, na próxima aula, vamos criar
‫este template de pug para enviar
‫este e-mail de boas-vindas.
‫OK?
‫E então apenas a linha de assunto.
‫Vamos dizer 'Bem-vindo à Família Natours! 'E assim, assim,
‫não precisamos nos preocupar com nenhum dos
‫detalhes de implementação quando estamos
‫realmente enviando o e-mail.
‫Por exemplo, no ponto do nosso
‫código para onde queremos enviar o e-mail
‫de boas-vindas, não precisamos nos preocupar com os nomes
‫dos modelos ou com as linhas de assunto.
‫Tudo o que vamos fazer é mandar um e-mail de
‫boas-vindas e pronto.
‫E então nossa classe
‫se encarregará de lidar com a implementação.
‫Tudo bem?
‫De qualquer forma, vamos agora construir esta função de envio.
‫E então, o que vamos fazer nesta função, é
‫primeiro renderizar o HTML para o e-mail com base em
‫um template pug.
‫Então, basicamente aquele que
‫estamos colando aqui com o modelo.
‫Em seguida, defina as opções de e-mail, e
‫isso mais uma vez será muito parecido com este, e na verdade
‫deixe-me ir em frente
‫e cortar a partir daqui e colá-lo aqui.
‫OK?
‫Claro que não vai ser exatamente o mesmo, mas vamos
‫deixar isso para um pouco mais tarde.
‫Tudo bem?
‫E, por
‫fim, crie um transporte e envie e-mail.
‫OK?
‫E então, vou deixar esse para depois também.
‫Então, começando com o ponto número um.
‫E normalmente até este ponto, nós apenas usamos o pug
‫para criar um template,
‫e então passamos o nome do
‫template para a função render na resposta.
‫Direito.
‫Então, nós sempre usamos como
‫este res. render, e
‫aqui o nome do modelo.
‫Direito?
‫E o que esta função de renderização
‫faz nos bastidores é basicamente criar o HTML baseado no template
‫pug e então enviá-lo ao cliente.
‫Agora, neste caso, não queremos realmente renderizar, tudo o
‫que queremos fazer é basicamente criar o HTML a partir
‫do modelo para que possamos enviar esse HTML como
‫o e-mail.
‫Portanto, basicamente defini-lo aqui como uma opção HTML para
‫essas opções de e-mail.
‫OK?
‫Portanto, lembre-se de como podemos especificar texto e HTML.
‫E principalmente estamos interessados em enviar um email em HTML.
‫E é por isso que teremos um template pug
‫a partir do qual geraremos esse HTML.
‫OK?
‫Portanto, não vai funcionar assim, mas em
‫vez disso, precisamos exigir o
‫pacote pug aqui.
‫Então,
‫pug assim, e aí
‫a gente precisa usar pug.
‫renderFile.
‫OK?
‫E então isso vai pegar
‫o arquivo e então renderizar o código pug em HTML real.
‫OK?
‫E para que possamos salvar em um HTML variável.
‫Tudo bem?
‫Então, onde está esse arquivo?
‫Bem, está em dirname, então o nome
‫D-I-R, que lembra é a
‫localização do script
‫em execução no momento,
‫e isso é, agora, nesta pasta de utilitários.
‫OK?
‫A partir daí, precisamos avançar um passo, ir para
‫as visualizações e, a partir daí, ir para uma pasta de e-mails que
‫também criaremos em um segundo.
‫E aí
‫é onde teremos o arquivo de modelo.
‫Então, modelo}.
‫pug.
‫Então, para o e-mail de boas-vindas, este modelo será
‫chamado de welcome.
‫E agora vamos realmente criar isso aqui nas visualizações, criar uma
‫nova pasta, e-mail,
‫e então ali um novo arquivo,
‫bem-vindo. pug.
‫OK?
‫E não vamos realmente criar esse
‫modelo neste vídeo, mas eu só queria mostrar como
‫tudo isso vai funcionar.
‫OK?
‫Portanto, as boas-vindas serão coladas aqui no
‫modelo e, em seguida, ele irá obter esse arquivo da pasta de visualizações.
‫Direito?
‫Então, esse é o primeiro passo.
‫A seguir, vamos definir as opções de e-mail.
‫Então, de agora é isso. a partir de.
‫Lembrar?
‫Então, bem aqui.
‫Em
‫seguida, temos isso. para, e também temos o
‫assunto que é igual ao assunto que está vindo aqui,
‫e então, sim, na verdade nem precisamos definir este
‫e temos nosso HTML.
‫Então assim, ou claro, isso nem
‫é necessário porque é o mesmo nome.
‫Agora, a seguir, também queremos incluir uma versão em
‫texto do nosso e-mail no e-mail.
‫OK?
‫E isso é muito importante porque é melhor
‫para taxas de entrega de e-mail e também para pastas de spam.
‫Tudo bem?
‫E também algumas pessoas preferem e-mails de texto simples em
‫vez de e-mails em HTML mais formatados.
‫Tudo bem?
‫E então, basicamente, precisamos de uma maneira de
‫converter todo o HTML em texto simples.
‫Então, removendo todo o HTML deixando apenas o conteúdo.
‫E para isso, vamos
‫instalar
‫mais um pacote, e então este se chama html-to-text.
‫Tudo bem?
‫Vamos incluir isso aqui,
‫ToText.
‫require ('html-to-text'), assim.
‫OK?
‫Agora vamos usar isso para converter nosso HTML.
‫Portanto, usamos htmlToText. fromString e essa
‫string é armazenada em HTML.
‫Direito?
‫Então, essas são nossas opções de e-mail, e
‫na verdade eu esqueci algo muito, muito importante, aqui
‫nesta primeira etapa, então neste arquivo de renderização, porque assim
‫como com a resposta. renderizar, também podemos
‫colar dados no arquivo de renderização.
‫E, claro, isso é muito
‫importante se quisermos realmente fazer ou personalizar por email
‫com o nome e também colar a URL.
‫E então vamos fazer exatamente como fizemos normalmente na
‫função de renderização.
‫Então esse é firstName, envie-o para este. firstName e o
‫URL é este. url, e também vamos colar o
‫assunto e você verá um pouco
‫mais tarde porque precisamos disso.
‫OK?
‫Então, agora vamos finalmente criar um transporte
‫usando nossa função de transporte criar
‫e enviar o e-mail.
‫Então, justo, é isso. createTransport.
‫Então, lembre-se que este é apenas este método aqui, este, e
‫tem exatamente o
‫mesmo nome desta função vindo do nodemailer.
‫Isso é um
‫pouco confuso, então vamos chamá-lo de newTransport aqui.
‫Ok, e aqui também é newTransport, para que seja
‫um pouco menos confuso.
‫Tudo bem?
‫Agora vamos lembrar como fizemos aqui antes.
‫Então nós tivemos
‫nosso transportador, que criamos separadamente
‫neste caso, e então nele encadeamos sendMail com as opções.
‫Então, vamos pegar isso aqui, deletar todo o código restante.
‫Então, basicamente, coloque isso aqui como uma referência.
‫OK?
‫Então, este transportador agora é isso.
‫Tudo bem?
‫E assim por diante, enviamos e-mail em cadeia e depois
‫com as opções de e-mail que definimos aqui.
‫Então, precisamos aguardar tudo
‫isso, porque, claro, é uma função assíncrona.
‫E agora vamos marcar este aqui como assíncrono.
‫OK?
‫E agora, também precisamos aguardar a função aqui.
‫Tudo bem?
‫Porque isso. enviar agora é de fato uma função assíncrona.
‫E então aqui o aguardamos para que esta função só retorne assim
‫que o e-mail for realmente enviado.
‫E então, é claro, marque este também como assíncrono.
‫Incrível.
‫Isso é realmente tudo para esta classe.
‫Portanto, não precisamos mais deste exemplo.
‫OK?
‫E assim, no próximo vídeo, iremos em
‫frente e usaremos essa nova classe para enviar um e-mail de boas-vindas.
‫Portanto, recapitule rapidamente o que fizemos aqui.
‫Então, criamos uma nova classe de
‫e-mail a partir da qual podemos criar
‫objetos de e-mail que podemos usar para enviar e-mails reais.
‫E para criar um novo objeto de e-mail, vamos colar o usuário e
‫também uma URL que queremos que esteja nesse e-mail.
‫Então, atribuímos todas essas coisas ao objeto atual e
‫também algumas outras configurações que queremos
‫disponibilizar, como o nome e o e-mail do remetente.
‫Então, basicamente, abstrair essa informação
‫da função de envio
‫e ter tudo em um lugar central.
‫Então, temos aqui uma nova função de
‫transporte que torna realmente fácil criar diferentes transportes
‫para diferentes ambientes.
‫E assim, mais uma vez, abstraindo essa
‫lógica da função de envio real,
‫que deveria se preocupar apenas com o envio do e-mail.
‫OK?
‫Então aqui está aquela função de envio que leva em
‫um modelo e um assunto e, com base nisso, cria o HTML a
‫partir de um modelo pug que será definido
‫nas opções de e-mail, que irão,
‫no final da função, finalmente ser enviado nesta linha
‫de código.
‫OK?
‫Mas não será essa função de envio
‫que usaremos em nosso código.
‫Em vez disso, criaremos uma
‫função diferente para cada tipo de e-mail
‫que desejamos enviar.
‫E o primeiro que criei aqui é o sendWelcome.
‫Tudo bem?
‫E assim, para sendWelcome, basicamente predefinimos o nome
‫do modelo como
‫welcome e o assunto como esta string.
‫OK?
‫Espero que tenha feito sentido e vejo você em um segundo.