E-mail is een essentiële methode voor zakelijke communicatie die erg snel, goedkoop en gratis organisch is. Bij het bouwen van producten kunnen e-mails uw bedrijf een effectief en efficiënt medium bieden om verschillende soorten gegevens elektronisch te verzenden.
In dit artikel leren we hoe we een formulier kunnen bouwen voor het verzenden van e-mails met behulp van de Mailgun-service. Voor de frontend applicatie gaan we React gebruiken, voor de backend maken we gebruik van Node.js, voor het doen van asynchrone requests gaan we gebruik maken van Axios, en voor het tonen van notificaties maken we gebruik van het React-Toastify pakket . Uiteindelijk hadden we een mailservice moeten bouwen die precies zo werkt:
Opmerking: Je kunt toegang krijgen tot de repository voor dit project dat je vandaag beetje bij beetje gaat bouwen, en hiermee spelen met de implementatie koppeling op GitHub.
Laten we beginnen!
Project Setup
Het eerste dat we vandaag gaan uitbouwen, is de frontend-applicatie, met behulp van React.
Aan de slag gaan met de React-bibliotheek is eenvoudig door een JavaScript-bestand (een CDN) in een HTML-bestand op te nemen. Maar voor een real-world en grootschalige toepassing is de React CLI de betere manier om aan de slag te gaan. We zullen de React CLI vandaag gebruiken in onze tutorial.
In dit artikel gebruiken we een CLI-tool die is gebouwd door het React-team om de snelle ontwikkeling van React-applicaties te vergemakkelijken. Voer de volgende opdracht uit om de React CLI te installeren:
npm install -g create-react-app
.
Laten we nu het project maken en het een naam geven react-node-email-app
, met behulp van de onderstaande opdracht:
$ npx create-react-app react-node-email-app
Hiermee wordt een startsjabloon gemaakt om ons project te bouwen. U kunt deze sjabloon bekijken door naar uw projectdirectory te gaan en vervolgens de ontwikkelserver uit te voeren:
$ cd react-node-email-app
$ yarn start
We kunnen dan onze frontend bekijken in de browser op localhost:3000
.
De projectinterface bouwen
Nu kunnen we beginnen met het bouwen van de frontend van de applicatie. We beginnen met het bouwen van het formulier waarmee e-mails kunnen worden verzonden.
Dit doen we in de App.js
bestand, zodat het wordt bijgewerkt om te worden:
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;
Hier hebben we een formulier gemaakt met drie invoervelden, een voor het invoeren van de e-mail van de ontvanger, een ander voor het onderwerp van de e-mail en de laatste voor het invoeren van het hoofdbericht van de e-mail.
In de verschillende invoervelden hebben we een status ingesteld om de wijziging in het invoervak te verwerken - om elke wijziging op te vangen die wordt aangebracht wanneer een gebruiker een teken invoert in het invoerveld met behulp van de onChange
gebeurtenis luisteraar.
We hebben ook een knop gemaakt om een e-mailinzending te doen.
Om het formulier mooier te maken, hebben we de App.css
bestand met de volgende CSS-stijlen, zodat de inhoud er als volgt uitziet:
.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;
}
Om de prestaties van de applicatie te verbeteren, een onSubmit
handlergebeurtenisfunctie moet worden gedefinieerd op het formulierelement om te voorkomen dat het standaardgedrag van formulieren daadwerkelijk een pagina ververst wanneer op de knop wordt geklikt. Het is niet ideaal dat onze pagina wordt vernieuwd wanneer op de knop wordt geklikt, aangezien we het verzoek op de achtergrond verzenden, wat een betere ervaring is voor de gebruiker.
Het is ook ideaal dat een gebruiker geen e-mail kan versturen als hij/zij geen e-mail, onderwerp of bericht heeft ingevoerd. Daarvoor hebben we wat invoervalidatie nodig om te controleren of die velden leeg zijn. Als dit het geval is, geven we een foutmelding met het bericht "Vul e-mail, onderwerp en bericht in".
Hiervoor maken we gebruik van de roosteren pakket in onze applicatie. We moeten het installeren door de volgende opdracht uit te voeren in de projectterminal:
$ yarn add react-toastify
Update vervolgens App.js
met de submitHandler
functie:
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;
Nu, elke keer dat een gebruiker op de knop klikt om een e-mail te verzenden, zonder vooraf het e-mailadres, het e-mailonderwerp en de berichtinvoervelden in te vullen, vraagt het toastbericht hem/haar om alles te doen wat nodig is.
Omdat we ook de axios
bibliotheek voor het maken van AJAX-aanvragen, we zullen deze ook moeten installeren:
$ yarn add axios
Maak vervolgens een try/catch
blok om het asynchrone verzoek voor het verzenden van een e-mail af te handelen.
App.js
is nu bijgewerkt om te worden:
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;
De backend-applicatie bouwen met behulp van Node
Op dit moment hebben we met succes de frontend van de applicatie geïmplementeerd. Verderop zullen we beginnen te werken aan de backend met behulp van Node.
Maak eerst een nieuwe map aan in de hoofdmap van het project met de naam backend
.
Nu, cd
in de backend-directory en voer het uit npm init
vanaf de terminal om te beginnen met het maken van een Node-app.
$ npm init --y
Bekijk onze praktische, praktische gids voor het leren van Git, met best-practices, door de industrie geaccepteerde normen en bijgevoegd spiekbriefje. Stop met Googlen op Git-commando's en eigenlijk leren het!
NoteDe --y
optie vertelt NPM om "ja" te antwoorden op alle vragen van de init
commando. Dit geeft u in wezen de standaardinstellingen voor uw package.json
bestand.
Dit creëert een package.json
bestand dat het beheer van de toepassingsafhankelijkheden van het backend-project mogelijk maakt.
Installeer vervolgens de volgende pakketten:
express
: Creëert een webserverdotenv
: Leest configuratiegegevens en dient als een geweldige manier om gevoelige gegevens weg te houden van toegankelijke codemailgun-js
: Maakt het verzenden van e-mails met Mailgun mogelijk
$ yarn add express dotenv mailgun-js
Nu deze pakketten zijn geïnstalleerd, maakt u twee nieuwe bestanden server.js
en .env
in de backend
map.
In het .env
bestand, behouden we het domein en de API-sleutel voor Mailgun.
De server bouwen
In deze server.js
bestand, is het doel om een server te maken met behulp van Express.js. Daarin importeren we de express
, dotenv
en mailgun-js
pakketjes.
server.js
wordt bijgewerkt om te worden:
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}`);
});
Hier hebben we de mg
functie en wees het toe mailgun
. In de mg
functie, geven we de API-sleutel en het domein van de omgevingsvariabele door en gebruiken mailgun
e-mails te verzenden.
Daarna wordt de Express-app gemaakt, en twee middleware express.json()
en express.urlencoded
worden gebruikt om de payload met behulp van Express uit het API-verzoek te halen en om te zetten in req.body
.
Vervolgens een POST
route met het pad /api/email
wordt gemaakt en daarin wordt een functie gedefinieerd om een verzoek en antwoord te accepteren. De e-mail, het onderwerp en het bericht kunnen vervolgens uit de req.body
voorwerp. Dit zijn de gegevens die de gebruiker invoert vanuit de invoervelden op de frontend-applicatie.
Zodra dit is geëxtraheerd, de messages
methode uit de mailgun
functie die aanvankelijk is ingesteld, wordt aangeroepen, waarna de send
methode wordt genoemd. Bij de verzendmethode wordt een object met de volgende eigenschappen doorgegeven:
from
: de naam die gebruikers zien in het gedeelte 'van' van een e-mail.to
Het e-mailadres waarnaar de e-mail wordt verzonden (het e-mailadres dat is ingevoerd in het invoerveld).subject
: Het onderwerp is ingevoerd.html
: De HTML-opmaak die het bericht definieert dat naar het e-mailadres moet worden verzonden.
De tweede parameter doorgegeven in de send
methode is een functie die de fout en body accepteert. In deze functie zijn wij console.log
de fout, stel de statuscode in op 500
en stuur een bericht met de tekst 'Fout bij het verzenden van e-mail'. Anders loggen we de body en sturen we een bericht met de tekst "E-mail succesvol verzonden" bij succes.
Helemaal aan het einde van het bestand halen we de poort uit de .env
indienen en bellen app.listen()
om de server te starten.
De API-sleutels definiëren
De eerste stap bij het definiëren van de API-sleutels voor het gebruik van Mailgun in uw applicatie is het aanmaken van een gratis account, wat 57 seconden duurt volgens hun officiële website.
Nadat je een account hebt aangemaakt, wordt een API-sleutel voor het account dat je hebt gemaakt naar je verzonden, terwijl je toegang tot het domein kunt krijgen door naar het tabblad Verzenden aan de zijkant van het dashboard te gaan.
Kopieer zowel de sandbox-link als de API-sleutel en stel de waarde in uw .env
bestand, zoals ik heb gedaan voor de mijne:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
Ga vervolgens terug naar de overzichtspagina van het domein door op de link te klikken. De pagina zou er zo uit moeten zien:
Voer daarin aan de rechterkant van de pagina het e-mailadres in waarnaar u een e-mail wilt testen om een geautoriseerde ontvanger aan te maken.
Als u op de knop "Ontvanger opslaan" klikt, moet er een e-mail worden verzonden die eruit ziet zoals hieronder weergegeven:
Klik op de knop "Ik ga akkoord" en u wordt doorgestuurd naar een externe pagina:
Klik op de knop "Ja" om door te gaan met het activeren van het adres van de ontvanger. Nu kan dat adres e-mails ontvangen via Mailgun.
Ten slotte hebben we Mailgun succesvol opgezet en de backend gebouwd met behulp van Node.
Nu kunt u de Express-server heerlijk laten draaien door de volgende code uit de backend-directory uit te voeren:
$ node server.js
De Node-app verbinden met de React-app
Om de frontend met de backend te verbinden, gaat u naar de package.json
bestand dat in de hoofdmap van het project voor de React-app ligt. Dan, onder de name
eigenschap, voeg een nieuwe eigenschap toe met de naam proxy
, die de waarde van de poort voor de backendserver zou moeten hebben. Het zou er ongeveer zo uit moeten zien:
"proxy": "http://localhost:4000/"
Als dat is toegevoegd, worden alle asynchrone verzoeken die we vanuit de frontend doen, omgeleid naar de backend-server die we hebben gemaakt.
Start de frontend-ontwikkelingsserver opnieuw op om de app opnieuw te laden.
Ga je gang om al onze implementatie tot nu toe uit te testen door een e-mailadres in te voeren (de ontvanger die je eerder hebt geactiveerd), e-mailonderwerp en bericht, en klik vervolgens op de knop "Verzenden". Dit zou een succestoost moeten tonen om te zeggen dat de e-mail succesvol was.
En in de inbox van het adres van de ontvanger zou je ook een e-mail moeten ontvangen, net als ik:
Afsluiten
Het verzenden van e-mails blijft erg handig voor zaken als het resetten van een wachtwoord, het verwelkomen van een gebruiker bij uw applicatie, het bevestigen van een bestelling, enz. In dit artikel hebben we geleerd hoe gemakkelijk het is om e-mails te verzenden in een Node.js-applicatie met Mailgun . We zien hoe gemakkelijk het is om met Mailgun te werken en hoe gebruiksvriendelijk en snel het is om een account aan te maken om aan de slag te gaan.
De volgende keer dat u merkt dat u een e-mailinfrastructuur voor uw project moet bouwen, kunt u eens kijken naar tools voor het verzenden van e-mail, zoals Mailgun. Heb je hulp nodig bij het gebruik van de tool, neem dan gerust contact met mij op, of met iemand in de ontwikkelaarsgemeenschap. Ik weet zeker dat ze je graag willen helpen.
Aanvullende informatiebronnen
- Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
- Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
- Bron: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- in staat
- ACCEPTEREN
- Accepteert
- toegang
- beschikbaar
- Volgens
- Account
- werkelijk
- toegevoegd
- adres
- Na
- vooruit
- Alarm
- Alles
- en
- Nog een
- beantwoorden
- iedereen
- api
- API-SLEUTELS
- gebruiken
- Aanvraag
- toepassingen
- rond
- dit artikel
- toegewezen
- auto
- Axios
- terug
- backend
- achtergrond
- slaan
- worden
- wezen
- onder
- Betere
- Beetje
- Blok
- lichaam
- grens
- Box camera's
- browser
- bouw
- Gebouw
- bebouwd
- bedrijfsdeskundigen
- Bellen
- Dit betekent dat we onszelf en onze geliefden praktisch vergiftigen.
- Kan krijgen
- gevallen
- het worstelen
- Centreren
- verandering
- karakter
- goedkoop
- controle
- code
- Communicatie
- gemeenschap
- Configuratie
- Verbinden
- inhoud
- converteren
- en je merk te creëren
- aangemaakt
- creëert
- Wij creëren
- CSS
- dashboards
- gegevens
- dag
- Standaard
- gedefinieerd
- definieert
- het definiëren van
- Ontwikkelaar
- Ontwikkeling
- DEED
- domein
- elk
- Vroeger
- effectief
- doeltreffend
- elektronisch
- e-mails
- maakt
- Enter
- ingevoerd
- Komt binnen
- Milieu
- fout
- essentieel
- in wezen
- etc
- Event
- ervaring
- uitdrukkelijk
- extern
- vergemakkelijken
- SNELLE
- veld-
- Velden
- Dien in
- Bestanden
- vullen
- VIND DE PLEK DIE PERFECT VOOR JOU IS
- Voornaam*
- Focus
- volgend
- formulier
- formulieren
- Gratis
- oppompen van
- Frontend
- functie
- krijgen
- het krijgen van
- gif
- Git
- geeft
- Go
- groot
- sterk
- gids
- handvat
- hands-on
- hoofd
- hulp
- Hit
- houdt
- zweven
- Hoe
- How To
- HTML
- HTTPS
- ICON
- ideaal
- uitvoering
- geïmplementeerd
- importeren
- verbeteren
- in
- inclusief
- Inclusief
- Infrastructuur
- eerste
- invoer
- installeren
- geïnstalleerd
- IT
- JavaScript
- John
- JOHN DOE
- Houden
- sleutel
- toetsen
- grootschalig
- Achternaam*
- LEARN
- geleerd
- leren
- LG
- Bibliotheek
- LINK
- het laden
- Kijk
- ziet eruit als
- LOOKS
- gemaakt
- Hoofd
- maken
- maken
- management
- Medium
- Bericht
- methode
- bewegend
- naam
- nav
- navigeren
- Noodzaak
- New
- knooppunt
- Node.js
- meldingen
- object
- doel van de persoon
- EEN
- Keuze
- bestellen
- organisch
- anders-
- overzicht
- pakket
- Paketten
- parameter
- voorbij
- Wachtwoord
- pad
- prestatie
- Plato
- Plato gegevensintelligentie
- PlatoData
- Spelen
- dan
- punt
- PRAKTISCH
- voorkomen
- Producten
- project
- vastgoed
- eigendom
- beschermd
- zorgen voor
- volmacht
- doel
- Contact
- snel
- RE
- bereiken
- Reageren
- echte wereld
- ontvangen
- ontvangende
- stoffelijk overschot
- bewaarplaats
- te vragen
- verzoeken
- nodig
- antwoord
- terugkeer
- Ring
- wortel
- weg
- lopen
- lopend
- zandbak
- Bespaar
- zegt
- Tweede
- seconden
- sectie
- verzending
- gevoelig
- dienen
- service
- reeks
- settings
- Shadow
- moet
- tonen
- getoond
- kant
- Eenvoudig
- sinds
- So
- solide
- sommige
- iets
- spinnen
- Stapelmisbruik
- normen
- begin
- gestart
- Land
- Status
- Stap voor
- stop
- onderwerpen
- voorlegging
- voorleggen
- succes
- geslaagd
- Met goed gevolg
- dergelijk
- SVG
- neemt
- doelwit
- team
- vertelt
- sjabloon
- terminal
- proef
- De
- De zandbak
- hun
- daarin
- ding
- drie
- Door
- niet de tijd of
- naar
- toast
- vandaag
- ook
- tools
- tools
- overgang
- overdragen
- leiden
- waar
- zelfstudie
- voor
- bijwerken
- bijgewerkt
- us
- .
- Gebruiker
- gebruiksvriendelijke
- gebruikers
- bevestiging
- waarde
- divers
- Ve
- Bekijk
- web
- verwelkomen
- welke
- en
- wit
- wil
- zonder
- Mijn werk
- Bedrijven
- zou
- XML
- You
- Your
- jezelf
- zephyrnet