O e-mail é um método essencial de comunicação comercial muito rápido, barato e orgânico gratuito. Ao criar produtos, os e-mails podem fornecer à sua empresa um meio eficaz e eficiente para transmitir vários tipos de dados eletronicamente.
Neste artigo, aprenderemos como criar um formulário para envio de e-mails usando o serviço Mailgun. Para a aplicação frontend usaremos o React, no backend faremos uso do Node.js, para fazer requisições assíncronas faremos uso do Axios, e para mostrar as notificações faremos uso do pacote React-Toastify . No final das contas, deveríamos ter construído um serviço de correio que funcionasse assim:
Observação: Você pode obter acesso ao repositório para este projeto que você construirá pouco a pouco hoje e brincar com a implementação usando este link no GitHub.
Vamos começar!
Configuração do Projeto
A primeira coisa que desenvolveremos hoje é o aplicativo de front-end, usando o React.
Começar com a biblioteca React é simples como incluir um arquivo JavaScript (um CDN) em um arquivo HTML. Mas para um aplicativo do mundo real e de grande escala, o React CLI é a melhor maneira de começar. Usaremos o React CLI em nosso tutorial de hoje.
Neste artigo, usaremos uma ferramenta CLI criada pela equipe React para ajudar a facilitar o rápido desenvolvimento de aplicativos React. Para instalar o React CLI, execute o seguinte comando –
npm install -g create-react-app
.
Agora, vamos criar o projeto e nomeá-lo react-node-email-app
, usando o comando abaixo:
$ npx create-react-app react-node-email-app
Isso criará um modelo inicial para construir nosso projeto. Você pode visualizar este modelo acessando o diretório do projeto e executando o servidor de desenvolvimento:
$ cd react-node-email-app
$ yarn start
Podemos então visualizar nosso front-end no navegador em localhost:3000
.
Construindo a interface do usuário do projeto
Agora, podemos começar a construir o front-end do aplicativo. Começaremos construindo o formulário através do qual os e-mails podem ser enviados.
Faremos isso no App.js
arquivo, para que seja atualizado para se tornar:
import './App.css';
import { useState } from 'react'; function App() { const = useState('') const [subject, setSubject] = useState('') const [message, setMessage] = useState('') return ( <div className="App"> <section> <form> <h1>Send Email</h1> <div className='form-wrapper'> <div> <label htmlFor='email'>Email Address</label> <input onChange={(e)=>setEmail(e.target.value)} type="email" id="email"></input> </div> <div> <label htmlFor='subject'>Email Subject</label> <input onChange={(e)=>setSubject(e.target.value)} type="text" id="subject"></input> </div> <div> <label htmlFor='message'>Message Body</label> <textarea onChange={(e)=>setMessage(e.target.value)} type="text" id="message"></textarea> </div> <div> <button type='submit'>Send Email</button> </div> </div> </form> </section> </div> );
} export default App;
Aqui criamos um formulário com três campos de entrada, um para inserir o e-mail do destinatário, outro para o assunto do e-mail e o último para inserir a mensagem principal do e-mail.
Nos vários campos de entrada, configuramos um estado para lidar com a alteração na caixa de entrada - para capturar qualquer alteração feita quando um usuário insere um caractere no campo de entrada usando o onChange
ouvinte de eventos.
Também criamos um botão com a finalidade de fazer um envio de e-mail.
Para embelezar o formulário, atualizamos o App.css
arquivo com os seguintes estilos CSS, para que seu conteúdo fique assim:
.App { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #282c34;
}
.App section form { min-width: 25rem; margin: 0 auto; border: solid 1px #bdbdbd; border-radius: 8px; padding: 2rem;
}
form h1 { text-align: center; color: #ffffff;
}
form .form-wrapper { margin: 0 auto;
} form .form-wrapper > div { margin-bottom: 1rem;
}
form .form-wrapper > div > label { margin-bottom: 0.5rem; color: #ffffff; display: block;
}
form .form-wrapper > div > input, form .form-wrapper > div > textarea { padding: 0.5rem; border-radius: 4px; border: none; outline: none; min-width: 20rem; font-family: Arial, Helvetica, sans-serif;
}
form .form-wrapper > div > button { padding: 1rem 2.5rem; color: white; background: rgb(4, 144, 199); border-radius: 4px; border: none; cursor: pointer;
}
Para melhorar o desempenho do aplicativo, um onSubmit
A função de evento do manipulador deve ser definida no elemento de formulário para evitar o comportamento padrão dos formulários que realmente atualizam uma página quando seu botão é clicado. Não é ideal que nossa página seja atualizada quando o botão é clicado, pois estamos enviando a solicitação em segundo plano, o que é uma experiência melhor para o usuário.
Também é ideal que um usuário não consiga enviar um e-mail se não tiver inserido nenhum e-mail, assunto ou mensagem. Para isso, temos que fazer alguma validação de entrada para verificar se esses campos estão vazios. Se estiverem, retornamos um erro com a mensagem “Preencha e-mail, assunto e mensagem”.
Para isso, utilizamos o brindar pacote em nosso aplicativo. Precisamos instalá-lo executando o seguinte comando no terminal do projeto:
$ yarn add react-toastify
Em seguida, atualize App.js
com o submitHandler
função:
import "./App.css";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css' function App() { const = useState(""); const [subject, setSubject] = useState(""); const [message, setMessage] = useState(""); const submitHandler = async (e) => { e.preventDefault(); if (!email || !subject || !message) return toast.error( "Please make sure to fill the email address, email subject, and message" ); }; return ( <div className="App"> <section> <ToastContainer position="top-center" limit={1} /> <form onSubmit={submitHandler}> <h1>Send Email</h1> <div className="form-wrapper"> <div> <label htmlFor="email">Email Address</label> <input onChange={(e) => setEmail(e.target.value)} type="email" id="email" ></input> </div> <div> <label htmlFor="subject">Email Subject</label> <input onChange={(e) => setSubject(e.target.value)} type="text" id="subject" ></input> </div> <div> <label htmlFor="message">Message Body</label> <textarea onChange={(e) => setMessage(e.target.value)} type="text" id="message" ></textarea> </div> <div> <button type="submit">Send Email</button> </div> </div> </form> </section> </div> );
} export default App;
Agora, cada vez que um usuário clica no botão para enviar um e-mail, sem preencher previamente o endereço de e-mail, o assunto do e-mail e os campos de entrada da mensagem, a mensagem do sistema solicita que ele faça tudo o que for necessário.
Como também precisamos do axios
biblioteca para fazer solicitações AJAX, também precisaremos instalá-la:
$ yarn add axios
Em seguida, crie um try/catch
bloco para lidar com a solicitação assíncrona para enviar um e-mail.
App.js
agora é atualizado para se tornar:
import "./App.css";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import axios from "axios"; function App() { const = useState(""); const [subject, setSubject] = useState(""); const [message, setMessage] = useState(""); const [loading, setLoading] = useState(""); const submitHandler = async (e) => { e.preventDefault(); if (!email || !subject || !message) return toast.error( "Please make sure to fill the email address, email subject, and message" ); try { setLoading(true); const { data } = await axios.post(`/api/email`, { email, subject, message, }); setLoading(false); toast.success(data.message); } catch (error) { setLoading(false); toast.error( error.response && error.response.data.message ? error.response.data.message : error.message ); } }; return ( <div className="App"> <section> <ToastContainer position="top-center" limit={1} /> <form onSubmit={submitHandler}> <h1>Send Email</h1> <div className="form-wrapper"> <div> <label htmlFor="email">Email Address</label> <input onChange={(e) => setEmail(e.target.value)} type="email" id="email" ></input> </div> <div> <label htmlFor="subject">Email Subject</label> <input onChange={(e) => setSubject(e.target.value)} type="text" id="subject" ></input> </div> <div> <label htmlFor="message">Message Body</label> <textarea onChange={(e) => setMessage(e.target.value)} type="text" id="message" ></textarea> </div> <div> <button disabled={loading} type="submit"> {loading ? "Sending..." : "Send Email"} </button> </div> </div> </form> </section> </div> );
} export default App;
Construindo o aplicativo de back-end usando o Node
Neste ponto, implementamos com sucesso o front-end do aplicativo. Seguindo em frente, começaremos a trabalhar no back-end usando Node.
Primeiro, crie um novo diretório na raiz do projeto chamado backend
.
Agora, cd
no diretório de back-end e execute npm init
do terminal para começar a criar um aplicativo Node.
$ npm init --y
Confira nosso guia prático e prático para aprender Git, com práticas recomendadas, padrões aceitos pelo setor e folha de dicas incluída. Pare de pesquisar comandos Git no Google e realmente aprender -lo!
Note: O --y
A opção diz ao NPM para responder “sim” a todas as perguntas feitas pelo init
comando. Isso basicamente fornece as configurações padrão para o seu package.json
arquivo.
Isso cria um package.json
arquivo que permite o gerenciamento das dependências do aplicativo do projeto de back-end.
Em seguida, instale os seguintes pacotes:
express
: Cria um servidor webdotenv
: Lê os dados de configuração e serve como uma ótima maneira de manter os dados confidenciais longe do código acessívelmailgun-js
: Habilita o envio de e-mails usando o Mailgun
$ yarn add express dotenv mailgun-js
Com esses pacotes agora instalados, crie dois novos arquivos server.js
e .env
no backend
pasta.
No .env
arquivo, manteremos o domínio e a chave API para Mailgun.
Construindo o servidor
Neste curso server.js
arquivo, o objetivo é criar um servidor usando Express.js. Nela, importamos o express
, dotenv
e mailgun-js
pacotes.
server.js
é atualizado para se tornar:
const express = require("express");
const dotenv = require("dotenv");
const mg = require("mailgun-js"); dotenv.config(); const mailgun = () => mg({ apiKey: process.env.MAILGUN_API_KEY, domain: process.env.MAILGUN_DOMAIN, });
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true })); app.post("/api/email", (req, res) => { const { email, subject, message } = req.body; mailgun() .messages() .send( { from: "John Doe <>", to: `${email}`, subject: `${subject}`, html: `<p>${message}</p>`, }, (error, body) => { if (error) { console.log(error); res.status(500).send({ message: "Error in sending email" }); } else { console.log(body); res.send({ message: "Email sent successfully" }); } } );
}); const port = process.env.PORT || 4000;
app.listen(port, () => { console.log(`App is served at port ${port}`);
});
Aqui, chamamos o mg
função e atribuí-la a mailgun
. No mg
função, passamos a chave de API e o domínio da variável de ambiente e usamos mailgun
para enviar e-mails.
Depois disso, o aplicativo Express é criado e dois middlewares express.json()
e express.urlencoded
são usados para obter a carga usando o Express da solicitação da API e convertê-la em req.body
.
Em seguida, um POST
rota com o caminho /api/email
é criado, e nele é definida uma função para aceitar um pedido e uma resposta. O e-mail, o assunto e a mensagem podem ser extraídos do req.body
objeto. Esses são os dados que o usuário insere nos campos de entrada do aplicativo front-end.
Uma vez extraído, o messages
método do mailgun
função inicialmente configurada é chamada, após o que o send
método é chamado. No método send, é passado um objeto que contém as seguintes propriedades:
from
: o nome que os usuários veem na seção "de" de um e-mail.to
O endereço de e-mail para o qual o e-mail está sendo enviado (o e-mail inserido no campo de entrada).subject
: O assunto entrou.html
: a marcação HTML que define a mensagem a ser enviada para o endereço de e-mail.
O segundo parâmetro passado no send
O método é uma função que aceita o erro e o corpo. Nesta função nós console.log
o erro, defina o código de status para 500
, e envie uma mensagem que diz “Erro ao enviar e-mail”. Caso contrário, registramos o corpo e enviamos uma mensagem que diz “Email enviado com sucesso” em caso de sucesso.
No final do arquivo, obtemos a porta do .env
arquivo e chamada app.listen()
para iniciar o servidor.
Definindo as chaves de API
O primeiro passo para definir as chaves de API para usar o Mailgun em seu aplicativo é criar uma conta gratuita, que leva 57 segundos de acordo com website oficial.
Depois de criar uma conta, uma chave de API para a conta que você criou será enviada para você, enquanto você pode obter acesso ao domínio navegando até a guia de envio na navegação lateral do painel.
Copie o link do sandbox e a chave de API e defina o valor em seu .env
arquivo, como fiz para o meu:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
Em seguida, volte para a página de visão geral do domínio clicando no link. A página deve ficar assim:
Nela, no lado direito da página, digite o endereço de e-mail para o qual deseja testar o envio de um e-mail – para criar um destinatário autorizado.
Clicar no botão “Salvar destinatário” deve acionar um e-mail semelhante ao mostrado abaixo, a ser enviado:
Clique no botão “I Agree” e você será redirecionado para uma página externa:
Clique no botão “Sim” para prosseguir para ativar o endereço do destinatário. Agora esse endereço pode começar a receber e-mails através do Mailgun.
Por fim, configuramos o Mailgun com sucesso e construímos o back-end usando o Node.
Agora, você pode ativar o servidor Express com prazer executando o seguinte código no diretório de back-end:
$ node server.js
Conectando o aplicativo Node ao aplicativo React
Para conectar o front-end ao back-end, vá para o package.json
arquivo que está no diretório raiz do projeto para o aplicativo React. Em seguida, sob o name
propriedade, adicione uma nova propriedade chamada proxy
, que deve ter o valor da porta para o servidor de back-end. Deve ser algo como isto:
"proxy": "http://localhost:4000/"
Com isso adicionado, todas as solicitações assíncronas que fazemos do front-end são redirecionadas para o servidor back-end que criamos.
Reinicie o servidor de desenvolvimento de front-end para recarregar o aplicativo.
Vá em frente para testar toda a nossa implementação até agora, inserindo um endereço de e-mail (o destinatário que você ativou anteriormente), assunto do e-mail e mensagem e, em seguida, clique no botão "Enviar". Isso deve mostrar um brinde de sucesso para dizer que o e-mail foi bem-sucedido.
E na caixa de entrada do endereço do destinatário, você deve receber um e-mail também, assim como eu:
Resumindo
O envio de e-mails continua sendo muito útil para casos como redefinir uma senha, dar as boas-vindas a um usuário em seu aplicativo, confirmar um pedido etc., e neste artigo aprendemos como é fácil enviar e-mails em um aplicativo Node.js usando o Mailgun . Vemos como é fácil trabalhar com o Mailgun e como é fácil e rápido criar uma conta para começar.
Da próxima vez que precisar construir uma infraestrutura de e-mail para o seu projeto, sinta-se à vontade para verificar as ferramentas de envio de e-mail como o Mailgun. Precisa de ajuda para usar a ferramenta, sinta-se à vontade para entrar em contato comigo ou com qualquer pessoa da comunidade de desenvolvedores. Tenho certeza de que eles ficarão felizes em ajudar.
Recursos adicionais
- Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
- Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
- Fonte: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- Capaz
- ACEITAR
- Aceita
- Acesso
- acessível
- Segundo
- Conta
- adicionado
- endereço
- Depois de
- à frente
- Alertar
- Todos os Produtos
- e
- Outro
- responder
- qualquer um
- api
- CHAVES DE API
- app
- Aplicação
- aplicações
- por aí
- artigo
- atribuído
- auto
- Axios
- em caminho duplo
- Backend
- fundo
- bater
- tornam-se
- ser
- abaixo
- Melhor
- Pouco
- Bloquear
- corpo
- fronteira
- Caixa
- navegador
- construir
- Prédio
- construído
- negócio
- botão
- chamada
- chamado
- Pode obter
- casos
- luta
- Centralização de
- alterar
- personagem
- barato
- verificar
- código
- Comunicação
- comunidade
- Configuração
- Contato
- conteúdo
- converter
- crio
- criado
- cria
- Criar
- APF
- painel de instrumentos
- dados,
- dia
- Padrão
- definido
- Define
- definição
- Developer
- Desenvolvimento
- DID
- domínio
- cada
- Mais cedo
- Eficaz
- eficiente
- eletronicamente
- e-mails
- permite
- Entrar
- entrou
- Entra
- Meio Ambiente
- erro
- essencial
- essencialmente
- etc.
- Evento
- vasta experiência
- expresso
- externo
- facilitar
- RÁPIDO
- campo
- Campos
- Envie o
- Arquivos
- preencher
- Encontre
- Primeiro nome
- Foco
- seguinte
- formulário
- formas
- Gratuito
- da
- Frontend
- função
- ter
- obtendo
- gif
- Git
- dá
- Go
- ótimo
- grandemente
- guia
- manipular
- mãos em
- cabeça
- ajudar
- Acertar
- detém
- pairar
- Como funciona o dobrador de carta de canal
- Como Negociar
- HTML
- HTTPS
- ÍCONE
- ideal
- implementação
- implementado
- importar
- melhorar
- in
- incluído
- Incluindo
- Infraestrutura
- inicialmente
- entrada
- instalar
- instalado
- IT
- JavaScript
- banheiro
- JOHN DOE
- Guarda
- Chave
- chaves
- em grande escala
- Sobrenome
- APRENDER
- aprendido
- aprendizagem
- LG
- Biblioteca
- LINK
- carregamento
- olhar
- parece
- OLHARES
- moldadas
- a Principal
- fazer
- Fazendo
- de grupos
- média
- mensagem
- método
- em movimento
- nome
- nav
- navegação
- você merece...
- Novo
- nó
- Node.js
- notificações
- objeto
- objetivo
- ONE
- Opção
- ordem
- orgânico
- de outra forma
- Visão geral
- pacote
- pacotes
- parâmetro
- passou
- Senha
- caminho
- atuação
- platão
- Inteligência de Dados Platão
- PlatãoData
- Jogar
- por favor
- ponto
- Prática
- evitar
- processo
- Produtos
- projeto
- Propriedades
- propriedade
- protegido
- fornecer
- procuração
- propósito
- Frequentes
- rápido
- RE
- alcançar
- Reagir
- mundo real
- receber
- receber
- permanece
- repositório
- solicitar
- pedidos
- requeridos
- resposta
- retorno
- Anel
- raiz
- Rota
- Execute
- corrida
- sandbox
- Salvar
- diz
- Segundo
- segundo
- Seção
- envio
- sensível
- servir
- serviço
- conjunto
- Configurações
- Shadow
- rede de apoio social
- mostrar
- mostrando
- lado
- simples
- desde
- So
- sólido
- alguns
- algo
- Spin
- Abuso de pilha
- padrões
- começo
- começado
- Estado
- Status
- Passo
- Dê um basta
- sujeito
- submissão
- enviar
- sucesso
- bem sucedido
- entraram com sucesso
- tal
- SVG
- toma
- Target
- Profissionais
- conta
- modelo
- terminal
- teste
- A
- The Sandbox
- deles
- lá no
- coisa
- três
- Através da
- tempo
- para
- brinde
- hoje
- também
- ferramenta
- ferramentas
- transição
- transmite
- desencadear
- verdadeiro
- tutorial
- para
- Atualizar
- Atualizada
- us
- usar
- Utilizador
- user-friendly
- usuários
- validação
- valor
- vário
- Ve
- Ver
- web
- acolhedor
- qual
- enquanto
- branco
- precisarão
- sem
- Atividades:
- trabalho
- seria
- XML
- Vocês
- investimentos
- você mesmo
- zefirnet