‫Instrutor: Então, neste vídeo, vamos
‫usar o poder do Pug para criar um modelo de e-mail muito bom
‫e, em seguida, enviar um e-mail de boas-vindas com base nesse modelo.
‫E esse modelo é bem-vindo. pug aqui.
‫Ok, agora como antes, eu já tenho um modelo
‫aqui nos modelos dev-data.
‫Então, modelo de email e todo esse código
‫aqui com o CSS também está alinhado.
‫Então, uma tonelada de CSS.
‫Então, vamos copiar tudo isso aqui para boas-vindas. pug.
‫Ok, e aqui no final, você verá esta nota
‫onde digo que na verdade ele adaptou este modelo de
‫e-mail deste.
‫Então, vamos abri-lo rapidamente.
‫Tudo bem.
‫E então nosso e-mail será um pouco parecido com este.
‫Agora, claro, adaptei um pouco o design à nossa marca.
‫Então, para este botão
‫aqui, usei nossa cor verde, por exemplo.
‫Mas meio que usei esse template HTML.
‫Então, na verdade, converti esse HTML usando esta ferramenta.
‫Então, HTML para Pug.
‫Então, novamente, vamos dar uma olhada rápida nisso.
‫Basicamente, o que isso permite que
‫você faça é colar um pouco de HTML aqui
‫e, em seguida, clicar em Converter e o código Pug será gerado para você.
‫Isso pode ser muito útil quando você
‫tenta converter algumas páginas existentes que você já tem um HTML para Pug.
‫De qualquer forma, quando estamos construindo um e-mail em
‫HTML, sempre precisamos embutir todos os estilos.
‫E é por isso que você tem essa tonelada de
‫CSS bem aqui dentro deste arquivo.
‫Mas, é claro, isso torna o arquivo
‫um pouco barulhento, então vamos pegar tudo isso e exportar.
‫Tudo bem, então, sim.
‫Então é isso.
‫Corte-o e
‫crie aqui um novo arquivo e,
‫como antes, com os arquivos que irei incluir, uso o estilo
‫sublinhado e, em seguida,. pug.
‫Então cole isso aqui.
‫E agora precisamos ajustar também toda essa inserção aqui e
‫outra vez, Command + Shift +
‫P ou provavelmente no Windows, Ctrl + Shift + P.
‫E então é só escrever pug para embelezar pug.
‫E isso torna nosso código bom.
‫Feche aquele aqui, e
‫agora include_style.
‫Ok, e agora você vê todos esses códigos aqui embaixo, o
‫que parece muito confuso e essa é a
‫razão pela qual copiei este modelo daquele repositório do GitHub
‫que mostrei antes.
‫Portanto, há muitas tabelas acontecendo porque
‫muitos clientes de
‫e-mail, na verdade, só entendem tabelas para formatação.
‫Portanto, temos todas essas coisas aqui que não são realmente
‫significativas com linhas de tabelas dentro de tabelas dentro de tabelas.
‫Estou certo?
‫Mas o que importa aqui é esta área de conteúdo aqui.
‫E esta é a
‫parte do modelo onde colocaremos todo o nosso conteúdo.
‫Agora, a questão é que, é
‫claro, teremos muitos modelos diferentes.
‫No caso deste
‫projeto, na verdade só criaremos dois
‫nós mesmos, mas pode haver muitos e-mails para muitas situações
‫e, portanto, é claro, vamos precisar de uma forma
‫de reutilizar todos esses códigos que estão fora deste conteúdo.
‫Então, basicamente, tudo isso aqui deve ser reutilizável e, na
‫verdade, é exatamente o que fizemos antes com
‫nosso modelo base aqui.
‫Tudo bem.
‫Então colocamos tudo que é reutilizável para todos
‫os templates dentro dessa base, aí temos nosso bloco e todos
‫os outros templates,
‫então simplesmente estende esse bloco.
‫E é exatamente isso que faremos agora.
‫Então, vamos realmente cortar tudo isso a partir daqui, criar um
‫novo modelo chamado baseEmail e, em seguida,
‫colocá-lo aqui.
‫E agora, para o conteúdo em si, é
‫claro, removemos isso da base.
‫Então corte aquele aqui, e
‫aqui vamos criar um bloco
‫chamado conteúdo, novamente.
‫Tudo bem.
‫E agora aqui, em nosso modelo de boas-vindas, colocamos
‫esse conteúdo dentro desse
‫bloco de conteúdo.
‫OK.
‫E agora só para finalizar, precisamos então dizer
‫que estende, de forma que este
‫template aqui estende o baseEmail.
‫Vamos formatar isso de novo com esse comando
‫e isso é lindo.
‫Excelente.
‫Agora, aqui em nosso
‫template base, temos agora o assunto como título.
‫E essa é a razão
‫pela qual passei isso para o modelo.
‫Então é isso mesmo, lembra?
‫Então, no modelo, passamos o assunto, a
‫URL e o primeiroNome.
‫Então, vamos agora usar isso em nosso modelo.
‫E então o assunto que já usamos aqui na base,
‫mas é realmente isso para este arquivo,
‫então não vamos tocá-lo novamente.
‫E agora aqui está nosso modelo real.
‫Portanto, temos aqui o nome e vamos substituí-lo pela
‫primeira variável de nome.
‫Então, primeiroNome aqui, então temos todos esses bons textos aqui.
‫Então, bem-vindo à família, todas essas coisas.
‫E aqui embaixo temos aquele botão verde
‫de que falei quando mostrei o modelo no GitHub
‫e assim por diante, dizemos fazer upload da foto do usuário.
‫E aqui precisamos especificar o URL que passamos.
‫Tudo bem, então é chamado de URL, certo.
‫E então, agora colocamos isso neste botão aqui e
‫é realmente isso.
‫Todo o resto aqui é
‫apenas conteúdo estático que não precisamos alterar, certo?
‫Portanto, este modelo de boas-vindas aqui será usado
‫sempre que chamarmos sendWelcome.
‫E então vamos realmente prosseguir e fazer isso.
‫Então, de onde queremos enviar o e-mail de boas-vindas?
‫Bem, isso está no authController e, acredito que
‫haja uma função de inscrição ou registro ou
‫algo parecido, e está
‫bem aqui.
‫Então, este se inscreve.
‫E para isso, precisamos importar o e-mail
‫e usá-lo.
‫E, na verdade, já temos sendEmail, mas agora
‫lembre-se que se chama Email, então
‫com E maiúsculo assim.
‫Agora usamos essa variável antes em algum lugar aqui, então
‫vamos lá.
‫Tudo bem, então este código aqui neste
‫ponto não está mais funcionando, mas vamos consertar isso no próximo vídeo.
‫Então, por enquanto, vamos apenas
‫comentar para que não cause nenhum dano.
‫De qualquer forma, vamos usar esta aula de e-mail bem aqui.
‫Então, o novo e-mail e, em seguida, lembre-se primeiro é o usuário e, na verdade,
‫o código do VS sabe disso e mostra isso
‫aqui e então o usuário é o novo usuário que temos aqui
‫e, em seguida, a URL que criaremos aqui em um segundo.
‫Portanto, url const é igual a, vamos colocá-lo em zero, por enquanto.
‫Ok e, em seguida, envie Bem-vindo.
‫E agora tudo o que precisamos fazer é realmente
‫aguardar essa função sendWelcome.
‫Tudo bem, então fazemos isso, só passaremos
‫para a próxima etapa depois que o e-mail for realmente enviado.
‫E podemos fazer isso,
‫é claro, porque sendWelcome é uma função assíncrona, lembre-se disso.
‫E então, quando realmente
‫o usamos, esperamos até que ele termine.
‫Tudo bem, isso é tudo que
‫precisamos fazer para enviar
‫e-mails agora, mas ainda precisamos especificar nosso URL aqui.
‫Agora, que URL realmente queremos aqui?
‫Bem, lembre-se que
‫aqui no botão está escrito Upload_user_photo, certo?
‫Basicamente, queremos apontar para
‫a página da conta do usuário.
‫Então, basicamente, bem aqui.
‫Por enquanto, vamos copiá-lo, mas depois vamos alterá-lo.
‫E poderíamos deixar
‫assim mas aí só funcionaria no
‫desenvolvimento e não na produção, porque, claro,
‫isso aqui não existe quando estamos em produção.
‫E então, em vez de basicamente codificar assim,
‫obteremos esses dados da solicitação.
‫Então, basicamente, obteremos qual protocolo estamos usando,
‫se estivermos usando HTTP ou HTTPS, e também este host.
‫Ok, e ambos podemos obter a partir do pedido.
‫Então, vamos substituir tudo isso aqui e fazer
‫disso uma string de
‫modelo e então podemos dizer pedido. protocolo, dois pontos,
‫barra, barra e, a
‫seguir, solicitação. pegue.
‫Portanto, precisamos usar essa função
‫getter e o que queremos é o host.
‫E então, quando estivermos em desenvolvimento,
‫então, é claro, este aqui será o host local
‫na porta 3000.
‫Ok, então vamos apenas consolá-lo
‫para ter certeza.
‫Ok, e agora, vamos realmente testá-lo.
‫E tudo o que precisamos fazer para isso é apenas criar um novo usuário.
‫Então vamos fazer isso aqui no Postman.
‫Então Cadastre-se, e agora
‫em nosso Corpo, vamos criar um novo nome, digamos Usuário
‫de Teste.
‫E aqui, tudo isso realmente não importa, então vamos apenas
‫dizer test @ natours. io e
‫com a mesma senha padrão.
‫E agora, quando criamos esse novo usuário, devemos
‫colocar um novo e-mail em nosso Mailtrap, para que possamos
‫dar uma olhada nele.
‫Então, vamos tentar isso e temos um bom erro aqui.
‫Então, vamos dar uma olhada nisso.
‫E diz que não foi possível encontrar este arquivo.
‫Portanto, há algum erro em nosso gerenciador de e-mail aqui.
‫E então vamos tentar descobrir onde fica.
‫Ah, é aqui embaixo.
‫E então o problema é que a pasta
‫aqui se chama e-mail e aqui eu a chamo de e-mails.
‫Então, digamos apenas e-mail, eu
‫prefiro esse.
‫E agora deve funcionar.
‫Ah, e agora temos o
‫próximo erro, porque este e-mail aqui já existe.
‫E isso porque na etapa anterior,
‫nós realmente criamos o erro, o único problema era
‫com o envio do e-mail.
‫Então, vamos fazer isso de novo aqui, teste dois.
‫E mais um erro.
‫Desta vez vindo diretamente de Pug.
‫Portanto, apenas blocos nomeados e mixins podem aparecer no nível superior de
‫um modelo de extensão.
‫E então algo está
‫errado aqui, e de fato está.
‫Então, esse é exatamente o
‫erro que ele nos disse que tínhamos e que só podemos
‫ter extensões e blocos, mas aqui
‫temos este parágrafo também no nível superior.
‫Então isso não é permitido.
‫Então, vamos colocá-lo onde ele pertence, que é bem aqui.
‫Salve isso, tente mais uma vez e, claro,
‫agora obteremos esse erro.
‫Então, digamos que teste três.
‫Ok, agora estamos prontos para ir.
‫Então, criamos com sucesso o novo usuário,
‫ele está logado.
‫E agora vamos dar uma olhada no Mailtrap
‫para ver se realmente recebemos nosso e-mail.
‫Então Mailtrap.
‫Deixe-me entrar aqui bem rápido.
‫E aqui está a nossa caixa de
‫entrada Natours e, de facto, aqui está este novo e-mail de
‫um minuto atrás a dizer bem-vindo à família Natours.
‫Excelente.
‫E realmente parece muito bom, certo?
‫Então, esses são todos os textos que tínhamos em nosso modelo.
‫Também podemos ver o HTML completo aqui.
‫Também aqui temos o texto.
‫Portanto, lembre-se de que criamos este
‫aqui do pacote HTML para
‫texto e, portanto, podemos confirmar que funciona bem também.
‫E, uh, sim.
‫Vamos tentar clicar aqui neste botão e,
‫de fato, ele nos levará para a página de nossa conta.
‫Agora, agora estamos realmente logados como Aarav porque já
‫estávamos logados como esse usuário, mas esse não é
‫o ponto, porque
‫este e-mail aqui meio que supõe que
‫você está se inscrevendo a partir do site, certo?
‫Agora, isso não funciona neste
‫momento, então não temos nenhum formulário de inscrição
‫em nosso site, mas a parte
‫realmente importante aqui é que nosso e-mail funciona perfeitamente, o botão
‫aqui também funciona.
‫E aquele grande gerenciador de e-mail
‫que criamos na última aula está fazendo seu trabalho tão
‫bem quanto o modelo de e-mail
‫que criamos neste vídeo.
‫Então, estou muito feliz com esse resultado.
‫Em seguida, vamos fazer algo semelhante para
‫os e-mails de redefinição de senha.