El correo electrónico es un método esencial de comunicación comercial que es orgánico muy rápido, barato y gratuito. Al crear productos, los correos electrónicos pueden proporcionar a su empresa un medio eficaz y eficiente para transmitir varios tipos de datos de forma electrónica.

En este artículo, aprenderemos cómo crear un formulario para enviar correos electrónicos utilizando el servicio Mailgun. Para la aplicación frontend, usaremos React, en el backend, usaremos Node.js, para hacer solicitudes asíncronas, usaremos Axios, y para mostrar notificaciones, usaremos el paquete React-Toastify. . Al final del día, deberíamos haber creado un servicio de correo que funciona así:

Nota: Puede obtener acceso al repositorio para este proyecto que construirá poco a poco hoy y jugar con la implementación usando este enlace en GitHub.

¡Vamos a empezar!

Configuración del proyecto

Lo primero que desarrollaremos hoy es la aplicación frontend, utilizando React.

Comenzar con la biblioteca React es tan simple como incluir un archivo JavaScript (un CDN) en un archivo HTML. Pero para una aplicación del mundo real y a gran escala, React CLI es la mejor manera de comenzar. Usaremos React CLI en nuestro tutorial de hoy.

En este artículo, utilizaremos una herramienta CLI creada por el equipo de React para ayudar a facilitar el desarrollo rápido de aplicaciones React. Para instalar React CLI, ejecute el siguiente comando: npm install -g create-react-app.

Ahora, vamos a crear el proyecto y nombrarlo react-node-email-app, usando el siguiente comando:

$ npx create-react-app react-node-email-app

Esto creará una plantilla de inicio para construir nuestro proyecto. Puede ver esta plantilla ingresando al directorio de su proyecto y luego ejecutando el servidor de desarrollo:

$ cd react-node-email-app
$ yarn start

Luego podemos ver nuestra interfaz en el navegador en localhost:3000.

Creación de la interfaz de usuario del proyecto

Ahora, podemos comenzar a construir la interfaz de la aplicación. Comenzaremos creando el formulario a través del cual se pueden enviar correos electrónicos.

Haremos esto en el App.js archivo, para que se actualice y se convierta en:

import './App.css';
import { useState } from 'react'; function App() { const [email, setEmail] = 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;

Aquí hemos creado un formulario con tres campos de entrada, uno para ingresar el correo electrónico del destinatario, otro para el asunto del correo electrónico y el último para ingresar el mensaje principal del correo electrónico.

En los diversos campos de entrada, hemos configurado un estado para manejar el cambio en el cuadro de entrada: para detectar cualquier cambio realizado cuando un usuario ingresa un carácter en el campo de entrada usando el onChange oyente de eventos.

También hemos creado un botón con el fin de enviar un correo electrónico.

Para embellecer el formulario, hemos actualizado el App.css archivo con los siguientes estilos CSS, para que su contenido se vea así:

.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 mejorar el rendimiento de la aplicación, un onSubmit La función de evento del controlador debe definirse en el elemento de formulario para evitar el comportamiento predeterminado de los formularios que en realidad actualiza una página cuando se hace clic en su botón. No es ideal que nuestra página se actualice cuando se hace clic en el botón, ya que estamos enviando la solicitud en segundo plano, lo que es una mejor experiencia para el usuario.

También es ideal que un usuario no pueda enviar un correo electrónico si no ha ingresado ningún correo electrónico, asunto o mensaje. Para eso, tenemos alguna validación de entrada para verificar si esos campos están vacíos. Si lo son, devolvemos un error con el mensaje "Complete el correo electrónico, el asunto y el mensaje".

Para ello, hacemos uso de la tostar paquete en nuestra aplicación. Necesitamos instalarlo ejecutando el siguiente comando en la terminal del proyecto:

$ yarn add react-toastify

Luego, actualiza App.js con el submitHandler función:

import "./App.css";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css' function App() { const [email, setEmail] = 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;

Ahora, cada vez que un usuario hace clic en el botón para enviar un correo electrónico, sin completar previamente la dirección de correo electrónico, el asunto del correo electrónico y los campos de entrada del mensaje, el mensaje del brindis le solicita que haga todo lo necesario.

Como también necesitamos la axios librería para hacer solicitudes AJAX, también necesitaremos instalarla:

$ yarn add axios

A continuación, crea un try/catch bloque para manejar la solicitud asíncrona para enviar un correo electrónico.

App.js ahora se actualiza para convertirse en:

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 [email, setEmail] = 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;

Construyendo la aplicación backend usando Node

En este punto, hemos implementado con éxito la interfaz de la aplicación. Continuando, comenzaremos a trabajar en el backend usando Node.

Primero, cree un nuevo directorio en la raíz del proyecto llamado backend.

Ahora, cd en el directorio backend y ejecutar npm init desde la terminal para comenzar a crear una aplicación Node.

$ npm init --y

Note: Los --y opción le dice a NPM que responda "sí" a todas las preguntas planteadas por el init dominio. Básicamente, esto le proporciona la configuración predeterminada para su package.json archivo.

Esto crea un package.json archivo que permite la gestión de las dependencias de la aplicación del proyecto backend.

A continuación, instale los siguientes paquetes:

• express: crea un servidor web
• dotenv: lee datos de configuración y sirve como una excelente manera de mantener los datos confidenciales alejados del código accesible
• mailgun-js: Habilita el envío de correos electrónicos usando Mailgun

$ yarn add express dotenv mailgun-js

Con estos paquetes ahora instalados, cree dos nuevos archivos server.js y .env existentes backend carpeta.

En .env archivo, mantendremos el dominio y la clave API para Mailgun.

Construyendo el servidor

En este server.js archivo, el objetivo es crear un servidor usando Express.js. Allí, importamos el express, dotenvy mailgun-js paquetes

server.js se actualiza para convertirse en:

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 <[email protected]>", 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}`);
});

Aquí hemos llamado a la mg función y la asignó a mailgun. En la mg función, pasamos la clave API y el dominio de la variable de entorno y usamos mailgun para enviar correos electrónicos.

Después de eso, se crea la aplicación Express y dos middleware express.json() y express.urlencoded se utilizan para obtener la carga útil utilizando Express de la solicitud de API y convertirla en req.body.

A continuación, un POST ruta con el camino /api/email se crea, y en él, se define una función para aceptar una solicitud y respuesta. El correo electrónico, el asunto y el mensaje se pueden extraer del req.body objeto. Estos son los datos que el usuario ingresa desde los campos de entrada en la aplicación frontend.

Una vez extraído este, el messages método del mailgun se llama a la función configurada inicialmente, después de lo cual se send se llama el método. En el método de envío, se pasa un objeto que tiene las siguientes propiedades:

• from: El nombre que los usuarios ven en la sección "de" de un correo electrónico.
• to La dirección de correo electrónico a la que se envía el correo electrónico (el correo electrónico ingresado en el campo de entrada).
• subject: El asunto ingresó.
• html: el marcado HTML que define el mensaje que se enviará a la dirección de correo electrónico.

El segundo parámetro pasado en el send El método es una función que acepta el error y el cuerpo. En esta función nos console.log el error, establezca el código de estado en 500y enviar un mensaje que diga “Error al enviar correo electrónico”. De lo contrario, registramos el cuerpo y enviamos un mensaje que dice "Correo electrónico enviado con éxito" en caso de éxito.

Al final del archivo, obtenemos el puerto del .env archivar y llamar app.listen() para iniciar el servidor.

Definición de las claves API

El primer paso para definir las claves API para usar Mailgun en tu aplicación es crear una cuenta gratuita, lo que lleva 57 segundos según su página web oficial.

Una vez que haya creado una cuenta, se le enviará una clave API para la cuenta que creó, mientras que puede obtener acceso al dominio navegando a la pestaña de envío en el lado de navegación del tablero.

Copie tanto el enlace de sandbox como la clave API y establezca el valor en su .env archivo, como he hecho para el mío:

// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org

A continuación, vuelva a la página de descripción general del dominio haciendo clic en el enlace. La página debería verse así:

Allí, en el lado derecho de la página, ingrese la dirección de correo electrónico a la que desea probar el envío de un correo electrónico para crear un destinatario autorizado.

Al hacer clic en el botón "Guardar destinatario", se debe enviar un correo electrónico como el que se muestra a continuación:

Haga clic en el botón "Acepto" y debería ser redirigido a una página externa:

Haga clic en el botón “Sí” para proceder a activar la dirección del destinatario. Ahora esa dirección puede comenzar a recibir correos electrónicos a través de Mailgun.

Finalmente, configuramos correctamente Mailgun y construimos el backend usando Node.

Ahora, puede hacer girar deliciosamente el servidor Express ejecutando el siguiente código desde el directorio back-end:

$ node server.js

Conexión de la aplicación Node a la aplicación React

Para conectar el frontend al backend, diríjase a la package.json archivo que se encuentra en el directorio raíz del proyecto para la aplicación React. Entonces, bajo el name propiedad, agregue una nueva propiedad llamada proxy, que debe tener el valor del puerto para el servidor backend. Debería verse algo como esto:

"proxy": "http://localhost:4000/"

Con eso agregado, todas las solicitudes asincrónicas que hacemos desde el frontend se redireccionan al servidor backend que hemos creado.

Reinicie el servidor de desarrollo frontend para recargar la aplicación.

Continúe para probar toda nuestra implementación hasta el momento, ingresando una dirección de correo electrónico (el destinatario que activó anteriormente), el asunto del correo electrónico y el mensaje, luego presione el botón "Enviar". Esto debería mostrar un brindis exitoso para decir que el correo electrónico fue exitoso.

Y en la bandeja de entrada de la dirección del destinatario, también debería recibir un correo electrónico, tal como lo hice yo:

Resumen

El envío de correos electrónicos sigue siendo muy útil para casos como restablecer una contraseña, dar la bienvenida a un usuario a su aplicación, confirmar un pedido, etc., y en este artículo hemos aprendido lo fácil que es enviar correos electrónicos en una aplicación Node.js usando Mailgun. . Vemos lo fácil que es trabajar con Mailgun y lo sencillo y rápido que es crear una cuenta para empezar.

La próxima vez que necesite construir una infraestructura de correo electrónico para su proyecto, no dude en consultar herramientas de envío de correo como Mailgun. Si necesita ayuda para usar la herramienta, no dude en comunicarse conmigo o con cualquier miembro de la comunidad de desarrolladores, estoy seguro de que estarán encantados de ayudar.

Recursos adicionales

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
• Fuente: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/