L'e-mail è un metodo essenziale di comunicazione aziendale che è molto veloce, economico e organico. Durante la creazione di prodotti, le e-mail possono fornire alla tua azienda un mezzo efficace ed efficiente per trasmettere elettronicamente vari tipi di dati.
In questo articolo impareremo come costruire un modulo per l'invio di email utilizzando il servizio Mailgun. Per l'applicazione frontend utilizzeremo React, sul backend utilizzeremo Node.js, per effettuare richieste asincrone utilizzeremo Axios e per mostrare le notifiche utilizzeremo il pacchetto React-Toastify . Alla fine della giornata, avremmo dovuto creare un servizio di posta che funziona proprio così:
Nota: Puoi accedere al repository per questo progetto che costruirai poco a poco oggi e giocare con l'implementazione usando questo collegamento su GitHub.
Cominciamo!
Impostazione del progetto
La prima cosa che costruiremo oggi è l'applicazione frontend, utilizzando React.
Iniziare con la libreria React è semplice come includere un file JavaScript (un CDN) in un file HTML. Ma per un'applicazione reale e su larga scala, la CLI di React è il modo migliore per iniziare. Useremo la CLI di React nel nostro tutorial di oggi.
In questo articolo utilizzeremo uno strumento CLI creato dal team React per facilitare il rapido sviluppo delle applicazioni React. Per installare la CLI di React, esegui il seguente comando:
npm install -g create-react-app
.
Ora, creiamo il progetto e gli diamo un nome react-node-email-app
, utilizzando il comando seguente:
$ npx create-react-app react-node-email-app
Questo creerà un modello iniziale per costruire il nostro progetto. Puoi visualizzare questo modello accedendo alla directory del tuo progetto e quindi eseguendo il server di sviluppo:
$ cd react-node-email-app
$ yarn start
Possiamo quindi visualizzare il nostro frontend nel browser all'indirizzo localhost:3000
.
Creazione dell'interfaccia utente del progetto
Ora possiamo iniziare a costruire il frontend dell'applicazione. Inizieremo costruendo il modulo attraverso il quale è possibile inviare le email.
Lo faremo nel App.js
file, in modo che venga aggiornato per diventare:
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;
Qui abbiamo creato un modulo con tre campi di input, uno per l'inserimento dell'e-mail del destinatario, un altro per l'oggetto dell'e-mail e l'ultimo per l'inserimento del messaggio principale dell'e-mail.
Nei vari campi di input, abbiamo impostato uno stato per gestire la modifica nella casella di input, per rilevare qualsiasi modifica apportata quando un utente immette un carattere nel campo di input utilizzando il onChange
ascoltatore di eventi
Abbiamo anche creato un pulsante allo scopo di inviare un'e-mail.
Per abbellire il modulo, abbiamo aggiornato il file App.css
file con i seguenti stili CSS, in modo che il suo contenuto assomigli a questo:
.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;
}
Per migliorare le prestazioni dell'applicazione, an onSubmit
la funzione di evento del gestore deve essere definita sull'elemento del modulo per impedire il comportamento predefinito dei moduli che aggiorna effettivamente una pagina quando si fa clic sul suo pulsante. Non è l'ideale che la nostra pagina venga aggiornata quando si fa clic sul pulsante poiché inviamo la richiesta in background, il che è un'esperienza migliore per l'utente.
È inoltre ideale che un utente non sia in grado di inviare un'e-mail se non ha inserito alcuna e-mail, oggetto o messaggio. Per questo, dobbiamo eseguire una convalida dell'input per verificare se quei campi sono vuoti. Se lo sono, restituiamo un errore con il messaggio "Si prega di compilare l'e-mail, l'oggetto e il messaggio".
Per fare ciò, utilizziamo il tostare pacchetto nella nostra applicazione. Dobbiamo installarlo eseguendo il seguente comando nel terminale del progetto:
$ yarn add react-toastify
Quindi, aggiorna App.js
con la submitHandler
funzione:
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;
Ora, ogni volta che un utente fa clic sul pulsante per inviare un'e-mail, senza precompilare l'indirizzo e-mail, l'oggetto dell'e-mail e i campi di immissione del messaggio, il messaggio brindisi gli chiede di fare tutto ciò che è richiesto.
Dal momento che abbiamo bisogno anche del file axios
libreria per effettuare richieste AJAX, dovremo anche installarla:
$ yarn add axios
Quindi, crea un try/catch
blocco per gestire la richiesta asincrona per l'invio di un'e-mail.
App.js
è ora aggiornato per diventare:
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;
Creazione dell'applicazione di back-end utilizzando Node
A questo punto, abbiamo implementato con successo il frontend dell'applicazione. Andando avanti, inizieremo a lavorare sul backend utilizzando Node.
Innanzitutto, crea una nuova directory nella radice del progetto chiamato backend
.
Adesso, cd
nella directory di backend ed esegui npm init
dal terminale per iniziare a creare un'app Node.
$ npm init --y
Dai un'occhiata alla nostra guida pratica e pratica per l'apprendimento di Git, con le migliori pratiche, gli standard accettati dal settore e il cheat sheet incluso. Smetti di cercare su Google i comandi Git e in realtà imparare esso!
Note:: Il --y
opzione dice a NPM di rispondere "sì" a tutte le domande poste dal init
comando. Questo essenzialmente ti dà le impostazioni predefinite per il tuo package.json
file.
Questo crea a package.json
file che abilita la gestione delle dipendenze applicative del progetto di backend.
Successivamente, installa i seguenti pacchetti:
express
: Crea un server webdotenv
: legge i dati di configurazione e rappresenta un ottimo modo per mantenere i dati sensibili lontani dal codice accessibilemailgun-js
: Abilita l'invio di email tramite Mailgun
$ yarn add express dotenv mailgun-js
Con questi pacchetti ora installati, crea due nuovi file server.js
ed .env
nel backend
cartella.
Nel .env
file, conserveremo il dominio e la chiave API per Mailgun.
Costruire il server
In questa server.js
file, l'obiettivo è creare un server utilizzando Express.js. In esso, importiamo il file express
, dotenv
e mailgun-js
Pacchetti.
server.js
si aggiorna per diventare:
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}`);
});
Qui, abbiamo chiamato il mg
funzione e gli è stata assegnata mailgun
. Nel mg
funzione, passiamo la chiave API e il dominio dalla variabile di ambiente e usiamo mailgun
per inviare e-mail.
Successivamente, viene creata l'app Express e due middleware express.json()
ed express.urlencoded
vengono utilizzati per ottenere il payload utilizzando Express dalla richiesta API e convertirlo in req.body
.
Successivamente, a POST
percorso con il percorso /api/email
viene creato e in esso viene definita una funzione per accettare una richiesta e una risposta. L'e-mail, l'oggetto e il messaggio possono quindi essere estratti dal file req.body
oggetto. Questi sono i dati che l'utente inserisce dai campi di input sull'applicazione frontend.
Una volta estratto questo, il messages
metodo dal mailgun
viene chiamata la funzione inizialmente impostata, dopodiché il send
metodo è chiamato. Nel metodo send viene passato un oggetto che contiene le seguenti proprietà:
from
: il nome che gli utenti vedono nella sezione "da" di un messaggio di posta elettronica.to
L'indirizzo e-mail a cui viene inviata l'e-mail (l'e-mail inserita nel campo di immissione).subject
: L'oggetto inserito.html
: il markup HTML che definisce il messaggio da inviare all'indirizzo email.
Il secondo parametro passato nel file send
method è una funzione che accetta l'errore e il corpo. In questa funzione noi console.log
l'errore, impostare il codice di stato su 500
e invia un messaggio che dice "Errore nell'invio di email". Altrimenti registriamo il corpo e inviamo un messaggio che dice "Email inviata con successo" in caso di successo.
Alla fine del file, otteniamo la porta dal file .env
archiviare e chiamare app.listen()
per avviare il server.
Definizione delle chiavi API
Il primo passo per definire le chiavi API per l'utilizzo di Mailgun nella tua applicazione è creare un account gratuito, che richiede 57 secondi in base al loro Sito ufficiale.
Dopo aver creato un account, ti verrà inviata una chiave API per l'account che hai creato, mentre puoi accedere al dominio accedendo alla scheda di invio nella barra di navigazione laterale della dashboard.
Copia sia il collegamento sandbox che la chiave API e imposta il valore nel tuo .env
file, come ho fatto per il mio:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
Successivamente, torna alla pagina di panoramica del dominio facendo clic sul collegamento. La pagina dovrebbe essere simile a questa:
Qui, sul lato destro della pagina, inserisci l'indirizzo e-mail a cui desideri testare l'invio di un'e-mail per creare un destinatario autorizzato.
Facendo clic sul pulsante "Salva destinatario" dovrebbe essere inviata un'e-mail simile a quella mostrata di seguito:
Fai clic sul pulsante "Accetto" e dovresti essere reindirizzato a una pagina esterna:
Fare clic sul pulsante "Sì" per procedere all'attivazione dell'indirizzo del destinatario. Ora quell'indirizzo è in grado di iniziare a ricevere e-mail tramite Mailgun.
Infine, abbiamo configurato con successo Mailgun e creato il backend utilizzando Node.
Ora puoi avviare deliziosamente il server Express eseguendo il seguente codice dalla directory di back-end:
$ node server.js
Connessione dell'app Node all'app React
Per connettere il frontend al backend, vai al file package.json
file che si trova nella directory principale del progetto per l'app React. Poi, sotto il name
proprietà, aggiungi una nuova proprietà chiamata proxy
, che dovrebbe avere il valore della porta per il server back-end. Dovrebbe assomigliare a qualcosa di simile a questo:
"proxy": "http://localhost:4000/"
Con l'aggiunta di ciò, tutte le richieste asincrone che facciamo dal frontend vengono reindirizzate al server di backend che abbiamo creato.
Riavvia il server di sviluppo front-end per ricaricare l'app.
Procedi a testare tutta la nostra implementazione fino a quel momento, inserendo un indirizzo e-mail (il destinatario che hai attivato in precedenza), l'oggetto dell'e-mail e il messaggio, quindi premi il pulsante "Invia". Questo dovrebbe mostrare un brindisi di successo per dire che l'email ha avuto successo.
E nella casella di posta dell'indirizzo del destinatario, dovresti ricevere anche un'e-mail, proprio come ho fatto io:
Avvolgere Up
L'invio di e-mail rimane molto utile per casi come reimpostare una password, dare il benvenuto a un utente nella tua applicazione, confermare un ordine, ecc. E in questo articolo abbiamo imparato quanto sia facile inviare e-mail in un'applicazione Node.js utilizzando Mailgun . Vediamo quanto sia facile lavorare con Mailgun e quanto sia facile e veloce creare un account per iniziare.
La prossima volta che ti trovi nella necessità di creare un'infrastruttura di posta elettronica per il tuo progetto, sentiti libero di controllare strumenti di invio di posta come Mailgun. Hai bisogno di aiuto per utilizzare lo strumento, sentiti libero di contattare me o chiunque altro nella comunità degli sviluppatori, sono sicuro che sarebbero lieti di aiutarti.
Risorse addizionali
- Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
- Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
- Fonte: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- capace
- Accetta
- accetta
- accesso
- accessibile
- Secondo
- Il mio account
- effettivamente
- aggiunto
- indirizzo
- Dopo shavasana, sedersi in silenzio; saluti;
- avanti
- Mettere in guardia
- Tutti
- ed
- Un altro
- rispondere
- chiunque
- api
- CHIAVI API
- App
- Applicazioni
- applicazioni
- in giro
- articolo
- addetto
- auto
- Axios
- precedente
- BACKEND
- sfondo
- bash
- diventare
- essendo
- sotto
- Meglio
- Po
- Bloccare
- stile di vita
- sistema
- Scatola
- del browser
- costruire
- Costruzione
- costruito
- affari
- pulsante
- chiamata
- detto
- Può ottenere
- casi
- lotta
- centro
- il cambiamento
- carattere
- economico
- dai un'occhiata
- codice
- Comunicazione
- comunità
- Configurazione
- Connettiti
- testuali
- convertire
- creare
- creato
- crea
- Creazione
- CSS
- cruscotto
- dati
- giorno
- Predefinito
- definito
- definisce
- definizione
- Costruttori
- Mercato
- DID
- dominio
- ogni
- In precedenza
- Efficace
- efficiente
- elettronicamente
- Abilita
- entrare
- inserito
- entra
- Ambiente
- errore
- essential
- essenzialmente
- eccetera
- Evento
- esperienza
- esprimere
- esterno
- facilitare
- FAST
- campo
- campi
- Compila il
- File
- riempire
- Trovate
- Nome
- Focus
- i seguenti
- modulo
- forme
- Gratis
- da
- Frontend
- function
- ottenere
- ottenere
- gif
- Idiota
- dà
- Go
- grande
- molto
- guida
- maniglia
- mani su
- capo
- Aiuto
- Colpire
- detiene
- librarsi
- Come
- Tutorial
- HTML
- HTTPS
- ICON
- ideale
- implementazione
- implementato
- importare
- competenze
- in
- incluso
- Compreso
- Infrastruttura
- inizialmente
- ingresso
- install
- installato
- IT
- JavaScript
- John
- JOHN DOE
- mantenere
- Le
- Tasti
- larga scala
- Cognome
- IMPARARE
- imparato
- apprendimento
- LG
- Biblioteca
- LINK
- Caricamento in corso
- Guarda
- una
- SEMBRA
- fatto
- Principale
- make
- Fare
- gestione
- medie
- messaggio
- metodo
- in movimento
- Nome
- nav
- navigazione
- Bisogno
- New
- nodo
- Node.js
- notifiche
- oggetto
- obiettivo
- ONE
- Opzione
- minimo
- biologico
- altrimenti
- panoramica
- pacchetto
- Packages
- parametro
- Passato
- Password
- sentiero
- performance
- Platone
- Platone Data Intelligence
- PlatoneDati
- Giocare
- per favore
- punto
- Pratico
- prevenire
- processi
- Prodotti
- progetto
- proprietà
- proprietà
- protetta
- fornire
- delega
- scopo
- Domande
- veloce
- RE
- raggiungere
- Reagire
- mondo reale
- ricevere
- ricevente
- resti
- deposito
- richiesta
- richieste
- necessario
- risposta
- ritorno
- Anello
- radice
- strada
- Correre
- running
- sandbox
- Risparmi
- dice
- Secondo
- secondo
- Sezione
- invio
- delicata
- servire
- servizio
- set
- impostazioni
- Shadow
- dovrebbero
- mostrare attraverso le sue creazioni
- mostrato
- lato
- Un'espansione
- da
- So
- solido
- alcuni
- qualcosa
- Spin
- Impilamento
- standard
- inizia a
- iniziato
- Regione / Stato
- Stato dei servizi
- step
- Fermare
- soggetto
- sottomissione
- inviare
- il successo
- di successo
- Con successo
- tale
- SVG
- prende
- Target
- team
- dice
- modello
- terminal
- test
- Il
- The Sandbox
- loro
- in essa
- cosa
- tre
- Attraverso
- tempo
- a
- toast
- oggi
- pure
- strumenti
- transizione
- trasmettere
- innescare
- vero
- lezione
- per
- Aggiornanento
- aggiornato
- us
- uso
- Utente
- user-friendly
- utenti
- convalida
- APPREZZIAMO
- vario
- Ve
- Visualizza
- sito web
- accoglienza
- quale
- while
- bianca
- volere
- senza
- Lavora
- lavori
- sarebbe
- XML
- Tu
- Trasferimento da aeroporto a Sharm
- te stesso
- zefiro