E-Mail ist eine wesentliche Methode der Geschäftskommunikation, die sehr schnell, billig und top-frei organisch ist. Bei der Entwicklung von Produkten können E-Mails Ihrem Unternehmen ein effektives und effizientes Medium bieten, um verschiedene Arten von Daten elektronisch zu übertragen.
In diesem Artikel erfahren Sie, wie Sie ein Formular zum Senden von E-Mails mit dem Mailgun-Dienst erstellen. Für die Frontend-Anwendung verwenden wir React, im Backend verwenden wir Node.js, um asynchrone Anfragen zu stellen, verwenden wir Axios, und um Benachrichtigungen anzuzeigen, verwenden wir das React-Toastify-Paket . Am Ende des Tages hätten wir einen Maildienst bauen sollen, der genau so funktioniert:
Hinweis: Sie können Zugriff auf das Repository für dieses Projekt erhalten, das Sie heute nach und nach erstellen werden, und damit an der Implementierung herumspielen Link auf GitHub.
Lass uns loslegen!
Projektaufbau
Das erste, was wir heute bauen werden, ist die Frontend-Anwendung mit React.
Der Einstieg in die React-Bibliothek ist einfach, da Sie eine JavaScript-Datei (ein CDN) in eine HTML-Datei einfügen. Aber für eine reale und groß angelegte Anwendung ist die React-CLI der bessere Einstieg. Wir werden die React-CLI heute in unserem Tutorial verwenden.
In diesem Artikel verwenden wir ein CLI-Tool, das vom React-Team entwickelt wurde, um die schnelle Entwicklung von React-Anwendungen zu erleichtern. Um die React-CLI zu installieren, führen Sie den folgenden Befehl aus –
npm install -g create-react-app
.
Lassen Sie uns nun das Projekt erstellen und benennen react-node-email-app
, mit dem folgenden Befehl:
$ npx create-react-app react-node-email-app
Dadurch wird eine Startvorlage zum Erstellen unseres Projekts erstellt. Sie können diese Vorlage anzeigen, indem Sie in Ihr Projektverzeichnis wechseln und dann den Entwicklungsserver ausführen:
$ cd react-node-email-app
$ yarn start
Wir können unser Frontend dann im Browser unter anzeigen localhost:3000
.
Erstellen der Projekt-Benutzeroberfläche
Jetzt können wir damit beginnen, das Frontend der Anwendung zu erstellen. Wir beginnen mit dem Erstellen des Formulars, über das E-Mails gesendet werden können.
Das machen wir im App.js
Datei, sodass sie aktualisiert wird zu:
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 haben wir ein Formular mit drei Eingabefeldern erstellt, eines für die Eingabe der E-Mail des Empfängers, eines für den Betreff der E-Mail und das letzte für die Eingabe der Hauptnachricht der E-Mail.
In den verschiedenen Eingabefeldern haben wir einen Zustand eingerichtet, um die Änderung im Eingabefeld zu behandeln – um jede Änderung abzufangen, die vorgenommen wird, wenn ein Benutzer ein Zeichen in das Eingabefeld mit eingibt onChange
Ereignis-Listener.
Wir haben auch eine Schaltfläche zum Senden einer E-Mail erstellt.
Um das Formular zu verschönern, haben wir die aktualisiert App.css
Datei mit den folgenden CSS-Stilen, sodass ihr Inhalt wie folgt aussieht:
.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;
}
Um die Leistung der Anwendung zu verbessern, an onSubmit
Die Handler-Ereignisfunktion muss für das Formularelement definiert werden, um das Standardverhalten von Formularen zu verhindern, bei dem eine Seite tatsächlich aktualisiert wird, wenn auf ihre Schaltfläche geklickt wird. Es ist nicht ideal, dass unsere Seite aktualisiert wird, wenn auf die Schaltfläche geklickt wird, da wir die Anfrage im Hintergrund senden, was eine bessere Erfahrung für den Benutzer darstellt.
Es ist auch ideal, dass ein Benutzer nicht in der Lage sein sollte, eine E-Mail zu senden, wenn er/sie keine E-Mail, keinen Betreff oder keine Nachricht eingegeben hat. Dazu müssen wir eine Eingabevalidierung durchführen, um zu überprüfen, ob diese Felder leer sind. Wenn dies der Fall ist, geben wir einen Fehler mit der Meldung „Bitte E-Mail, Betreff und Nachricht ausfüllen“ zurück.
Dazu bedienen wir uns der toasten Paket in unserer Anwendung. Wir müssen es installieren, indem wir den folgenden Befehl im Projektterminal ausführen:
$ yarn add react-toastify
Als nächstes aktualisieren App.js
an. Nach der Installation können Sie HEIC-Dateien mit der submitHandler
Funktion:
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;
Jedes Mal, wenn ein Benutzer auf die Schaltfläche klickt, um eine E-Mail zu senden, ohne die E-Mail-Adresse, den E-Mail-Betreff und die Nachrichteneingabefelder vorab auszufüllen, fordert die Popup-Nachricht ihn/sie auf, alles Erforderliche zu tun.
Da brauchen wir auch die axios
Bibliothek zum Erstellen von AJAX-Anfragen, müssen wir sie auch installieren:
$ yarn add axios
Als nächstes erstellen Sie eine try/catch
-Block, um die asynchrone Anfrage zum Senden einer E-Mail zu verarbeiten.
App.js
wird jetzt aktualisiert zu:
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;
Erstellen der Backend-Anwendung mit Node
An diesem Punkt haben wir das Frontend der Anwendung erfolgreich implementiert. Als nächstes beginnen wir mit der Arbeit am Backend mit Node.
Erstellen Sie zunächst ein neues Verzeichnis im Stammverzeichnis des aufgerufenen Projekts backend
.
Jetzt, cd
in das Backend-Verzeichnis und ausführen npm init
vom Terminal aus, um mit dem Erstellen einer Node-App zu beginnen.
$ npm init --y
Sehen Sie sich unseren praxisnahen, praktischen Leitfaden zum Erlernen von Git an, mit Best Practices, branchenweit akzeptierten Standards und einem mitgelieferten Spickzettel. Hören Sie auf, Git-Befehle zu googeln und tatsächlich in Verbindung, um es!
Note: Das --y
Option weist NPM an, alle Fragen, die von der gestellt werden, mit „Ja“ zu beantworten init
Befehl. Dies gibt Ihnen im Wesentlichen die Standardeinstellungen für Ihre package.json
Datei.
Dies schafft ein package.json
Datei, die die Verwaltung der Anwendungsabhängigkeiten des Backend-Projekts ermöglicht.
Als nächstes installieren Sie die folgenden Pakete:
express
: Erstellt einen Webserverdotenv
: Liest Konfigurationsdaten und dient als hervorragende Möglichkeit, vertrauliche Daten von zugänglichem Code fernzuhaltenmailgun-js
: Aktiviert das Versenden von E-Mails mit Mailgun
$ yarn add express dotenv mailgun-js
Wenn diese Pakete jetzt installiert sind, erstellen Sie zwei neue Dateien server.js
und .env
der backend
-Ordner.
Im .env
-Datei behalten wir die Domain und den API-Schlüssel für Mailgun.
Aufbau des Servers
In diesem server.js
-Datei besteht das Ziel darin, einen Server mit Express.js zu erstellen. Darin importieren wir die express
, dotenv
und mailgun-js
Pakete.
server.js
wird aktualisiert zu:
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 haben wir die aufgerufen mg
Funktion und zugewiesen mailgun
. In dem mg
-Funktion übergeben wir den API-Schlüssel und die Domäne aus der Umgebungsvariable und verwenden sie mailgun
E-Mails zu versenden.
Danach wird die Express-App erstellt und zwei Middleware express.json()
und express.urlencoded
werden verwendet, um die Nutzlast mit Express aus der API-Anforderung zu erhalten und in zu konvertieren req.body
.
Als nächstes a POST
Strecke mit dem Pfad /api/email
erstellt, und darin wird eine Funktion zum Akzeptieren einer Anfrage und Antwort definiert. Die E-Mail, der Betreff und die Nachricht können dann aus extrahiert werden req.body
Objekt. Dies sind die Daten, die der Benutzer aus den Eingabefeldern der Frontend-Anwendung eingibt.
Sobald dies extrahiert ist, wird die messages
Methode aus dem mailgun
Die anfänglich eingerichtete Funktion wird aufgerufen, wonach die send
Methode aufgerufen wird. In der send-Methode wird ein Objekt übergeben, das die folgenden Eigenschaften enthält:
from
: Der Name, den Benutzer im Abschnitt „Von“ einer E-Mail sehen.to
Die E-Mail-Adresse, an die die E-Mail gesendet wird (die im Eingabefeld eingegebene E-Mail).subject
: Der eingegebene Betreff.html
: Das HTML-Markup, das die an die E-Mail-Adresse zu sendende Nachricht definiert.
Der zweite übergebene Parameter in der send
Methode ist eine Funktion, die den Fehler und den Körper akzeptiert. In dieser Funktion wir console.log
den Fehler, setzen Sie den Statuscode auf 500
, und senden Sie eine Nachricht mit der Aufschrift „Fehler beim Senden der E-Mail“. Andernfalls protokollieren wir den Text und senden bei Erfolg eine Nachricht mit der Aufschrift „E-Mail erfolgreich gesendet“.
Ganz am Ende der Datei erhalten wir den Port von der .env
ablegen und anrufen app.listen()
um den Server zu starten.
Definieren der API-Schlüssel
Der erste Schritt zum Definieren der API-Schlüssel für die Verwendung von Mailgun in Ihrer Anwendung besteht darin, ein kostenloses Konto zu erstellen, was laut eigenen Angaben 57 Sekunden dauert offiziellen Website.
Nachdem Sie ein Konto erstellt haben, wird Ihnen ein API-Schlüssel für das von Ihnen erstellte Konto gesendet, während Sie Zugriff auf die Domain erhalten, indem Sie zur Registerkarte „Senden“ in der Seitennavigation des Dashboards navigieren.
Kopieren Sie sowohl den Sandbox-Link als auch den API-Schlüssel und legen Sie den Wert in Ihrer fest .env
Datei, wie ich es für meine getan habe:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
Gehen Sie anschließend zurück zur Übersichtsseite der Domain, indem Sie auf den Link klicken. Die Seite sollte so aussehen:
Geben Sie dort rechts auf der Seite die E-Mail-Adresse ein, an die Sie das Versenden einer E-Mail testen möchten – um einen autorisierten Empfänger zu erstellen.
Wenn Sie auf die Schaltfläche „Empfänger speichern“ klicken, sollte eine E-Mail gesendet werden, die wie unten gezeigt aussieht:
Klicken Sie auf die Schaltfläche „Ich stimme zu“, und Sie sollten auf eine externe Seite weitergeleitet werden:
Klicken Sie auf die Schaltfläche „Ja“, um mit der Aktivierung der Empfängeradresse fortzufahren. Jetzt kann diese Adresse E-Mails über Mailgun empfangen.
Schließlich haben wir Mailgun erfolgreich eingerichtet und das Backend mit Node erstellt.
Jetzt können Sie den Express-Server wunderbar hochfahren, indem Sie den folgenden Code aus dem Backend-Verzeichnis ausführen:
$ node server.js
Verbinden der Node-App mit der React-App
Um das Frontend mit dem Backend zu verbinden, gehen Sie zu package.json
Datei, die sich im Stammverzeichnis des Projekts für die React-App befindet. Dann unter der name
Eigenschaft, fügen Sie eine neue Eigenschaft namens hinzu proxy
, die den Wert des Ports für den Backend-Server haben sollte. Es sollte etwa so aussehen:
"proxy": "http://localhost:4000/"
Damit werden alle asynchronen Anfragen, die wir vom Frontend stellen, an den von uns erstellten Backend-Server umgeleitet.
Starten Sie den Front-End-Entwicklungsserver neu, um die App neu zu laden.
Fahren Sie fort, um unsere gesamte bisherige Implementierung zu testen, indem Sie eine E-Mail-Adresse (den Empfänger, den Sie zuvor aktiviert haben), einen E-Mail-Betreff und eine Nachricht eingeben und dann auf die Schaltfläche „Senden“ klicken. Dies sollte einen Erfolgstoast anzeigen, um zu sagen, dass die E-Mail erfolgreich war.
Und im Posteingang der Empfängeradresse sollten Sie auch eine E-Mail erhalten, genau wie ich:
Fazit
Das Versenden von E-Mails bleibt sehr nützlich für Fälle wie das Zurücksetzen eines Passworts, das Begrüßen eines Benutzers in Ihrer Anwendung, das Bestätigen einer Bestellung usw., und in diesem Artikel haben wir gelernt, wie einfach es ist, E-Mails in einer Node.js-Anwendung mit Mailgun zu senden . Wir sehen, wie einfach es ist, mit Mailgun zu arbeiten und wie benutzerfreundlich und schnell es ist, ein Konto zu erstellen, um loszulegen.
Wenn Sie das nächste Mal eine E-Mail-Infrastruktur für Ihr Projekt aufbauen müssen, können Sie sich E-Mail-Versand-Tools wie Mailgun ansehen. Wenn Sie Hilfe bei der Verwendung des Tools benötigen, können Sie sich gerne an mich oder andere Mitglieder der Entwickler-Community wenden. Ich bin mir sicher, dass sie Ihnen gerne helfen würden.
Weitere Informationen
- SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
- Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
- Quelle: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- Fähig
- Akzeptieren
- Akzeptiert
- Zugang
- zugänglich
- Nach
- Konto
- berührt das Schneidwerkzeug
- hinzugefügt
- Adresse
- Nach der
- voraus
- Aufmerksam
- Alle
- und
- Ein anderer
- beantworten
- jemand
- Bienen
- API-SCHLÜSSEL
- App
- Anwendung
- Anwendungen
- um
- Artikel
- zugewiesen
- Auto
- Axios
- Zurück
- Backend
- Hintergrund
- bash
- werden
- Sein
- unten
- Besser
- Bit
- Blockieren
- Körper
- Grenze
- Box
- Browser
- bauen
- Building
- erbaut
- Geschäft
- Taste im nun erscheinenden Bestätigungsfenster nun wieder los.
- rufen Sie uns an!
- namens
- Kann bekommen
- Fälle
- Ringen
- Center
- Übernehmen
- Charakter
- billig
- aus der Ferne überprüfen
- Code
- Kommunikation
- community
- Konfiguration
- Vernetz Dich
- Inhalt
- verkaufen
- erstellen
- erstellt
- schafft
- Erstellen
- CSS
- Armaturenbrett
- technische Daten
- Tag
- Standard
- definiert
- Definiert
- Definition
- Entwickler:in / Unternehmen
- Entwicklung
- DID
- Domain
- jeder
- Früher
- Effektiv
- effizient
- elektronisch
- E-Mails
- ermöglicht
- Enter
- eingegeben
- Tritt ein
- Arbeitsumfeld
- Fehler
- essential
- im Wesentlichen
- etc
- Event
- ERFAHRUNGEN
- express
- extern
- erleichtern
- FAST
- Feld
- Felder
- Reichen Sie das
- Mappen
- füllen
- Finden Sie
- Vorname
- Setzen Sie mit Achtsamkeit
- Folgende
- unten stehende Formular
- Formen
- Frei
- für
- Frontend
- Funktion
- bekommen
- bekommen
- gif
- Git
- gibt
- Go
- groß
- sehr
- Guide
- Griff
- praktische
- ganzer
- Hilfe
- Hit
- hält
- schweben
- Ultraschall
- Hilfe
- HTML
- HTTPS
- ICON
- ideal
- Implementierung
- umgesetzt
- importieren
- zu unterstützen,
- in
- inklusive
- Einschließlich
- Infrastruktur
- anfänglich
- Varianten des Eingangssignals:
- installieren
- installiert
- IT
- JavaScript
- Peter
- JOHN DOE
- Behalten
- Wesentliche
- Tasten
- großflächig
- Nachname
- LERNEN
- gelernt
- lernen
- LG
- Bibliothek
- LINK
- Laden
- aussehen
- aussehen wie
- SIEHT AUS
- gemacht
- Main
- um
- Making
- Management
- mittlere
- Nachricht
- Methode
- ziehen um
- Name
- nav
- navigieren
- Need
- Neu
- Knoten
- Node.js
- Benachrichtigungen
- Objekt
- Ziel
- EINEM
- Option
- Auftrag
- bio
- Andernfalls
- Überblick
- Paket
- Pakete
- Parameter
- Bestanden
- Passwort
- Weg
- Leistung
- Plato
- Datenintelligenz von Plato
- PlatoData
- Play
- Bitte
- Points
- Praktisch
- verhindern
- Prozessdefinierung
- Produkte
- Projekt
- immobilien
- Resorts
- geschützt
- die
- Stellvertreter
- Zweck
- Fragen
- schnell
- RE
- erreichen
- Reagieren
- realen Welt
- erhalten
- Empfang
- bleibt bestehen
- Quelle
- Anforderung
- Zugriffe
- falls angefordert
- Antwort
- Rückkehr
- Ring
- Wurzel
- Straße
- Führen Sie
- Laufen
- Sandkasten
- Speichern
- sagt
- Zweite
- Sekunden
- Abschnitt
- Sendung
- empfindlich
- brauchen
- kompensieren
- Einstellungen
- Shadow
- sollte
- erklären
- gezeigt
- Seite
- Einfacher
- da
- So
- solide
- einige
- etwas
- Wirbelsäule ... zu unterstützen.
- Stapelmissbrauch
- Normen
- Anfang
- begonnen
- Bundesstaat
- Status
- Schritt
- Stoppen
- Fach
- Einreichung
- abschicken
- Erfolg
- erfolgreich
- Erfolgreich
- so
- SVG
- nimmt
- Target
- Team
- erzählt
- Vorlage
- Terminal
- Test
- Das
- Der Sandkasten
- ihr
- darin
- Ding
- nach drei
- Durch
- Zeit
- zu
- Toast
- heute
- auch
- Werkzeug
- Werkzeuge
- Übergang
- übertragen
- auslösen
- was immer dies auch sein sollte.
- Lernprogramm
- für
- Aktualisierung
- aktualisiert
- us
- -
- Mitglied
- benutzerfreundlich
- Nutzer
- Bestätigung
- Wert
- verschiedene
- Ve
- Anzeigen
- Netz
- Begrüßung
- welche
- während
- Weiß
- werden wir
- ohne
- Arbeiten
- Werk
- würde
- XML
- Du
- Ihr
- sich selbst
- Zephyrnet