Az e-mail az üzleti kommunikáció egyik alapvető módja, amely nagyon gyors, olcsó és teljesen ingyenes. A termékek építése során az e-mailek nagymértékben hatékony és hatékony médiumot biztosíthatnak vállalkozásának különféle adatok elektronikus továbbításához.
Ebben a cikkben megtudjuk, hogyan készíthet űrlapot e-mailek küldéséhez a Mailgun szolgáltatás használatával. A frontend alkalmazáshoz a Reactet, a háttérben a Node.js-t, az aszinkron kérésekhez az Axiost, az értesítések megjelenítéséhez pedig a React-Toastify csomagot használjuk. . A nap végén létre kellett volna hoznunk egy levelezőszolgáltatást, amely pontosan így működik:
Jegyzet: Hozzáférhet ennek a projektnek a tárához, amelyet ma apránként fog építeni, és ezzel játszhat a megvalósítással link a GitHubon.
Lássunk neki!
Projekt beállítása
Az első dolog, amit ma kiépítünk, az a Reactot használó frontend alkalmazás.
A React könyvtár használatának megkezdése egyszerű: JavaScript-fájlt (CDN) kell beilleszteni egy HTML-fájlba. De valós és nagyszabású alkalmazásokhoz a React CLI a jobb módja az indulásnak. Mai oktatóanyagunkban a React CLI-t fogjuk használni.
Ebben a cikkben a React csapata által készített CLI-eszközt fogjuk használni, amely elősegíti a React alkalmazások gyors fejlesztését. A React CLI telepítéséhez futtassa a következő parancsot -
npm install -g create-react-app
.
Most hozzuk létre a projektet, és nevezzük el react-node-email-app
, az alábbi paranccsal:
$ npx create-react-app react-node-email-app
Ezzel létrehoz egy kezdősablont a projektünk elkészítéséhez. Ezt a sablont úgy tekintheti meg, ha belép a projektkönyvtárába, majd futtatja a fejlesztői kiszolgálót:
$ cd react-node-email-app
$ yarn start
Ezután megtekinthetjük a frontendünket a böngészőben a címen localhost:3000
.
A Project UI felépítése
Most elkezdhetjük az alkalmazás frontendjének felépítését. Kezdjük azzal, hogy elkészítjük az űrlapot, amelyen keresztül e-maileket küldhetünk.
Ezt a App.js
fájlt, így az a következőre frissül:
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;
Itt létrehoztunk egy három beviteli mezőt tartalmazó űrlapot, az egyik a címzett e-mail-címének, a másik az e-mail tárgyának, az utolsó pedig az e-mail fő üzenetének megadásához.
A különböző beviteli mezőkben beállítottunk egy állapotot, amely kezeli a beviteli mezőben bekövetkezett változásokat – hogy minden olyan változást észleljen, amely akkor történik, amikor a felhasználó a beviteli mezőbe a karaktert a onChange
eseményhallgató.
Létrehoztunk egy gombot is az e-mail küldéshez.
Az űrlap szebbé tétele érdekében frissítettük a App.css
fájl a következő CSS-stílusokkal, hogy a tartalma így nézzen ki:
.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;
}
Az alkalmazás teljesítményének javítása érdekében egy onSubmit
A kezelő esemény függvényt meg kell határozni az űrlapelemen, hogy megakadályozzuk az űrlapok alapértelmezett viselkedését, amely ténylegesen frissíti az oldalt, amikor a gombra kattintanak. Nem ideális, ha a gombra kattintva frissül az oldalunk, mert a háttérben küldjük el a kérést, ami jobb élményt jelent a felhasználónak.
Az is ideális, ha a felhasználó nem tud e-mailt küldeni, ha nem adott meg e-mailt, tárgyat vagy üzenetet. Ehhez bizonyos beviteli érvényesítést kell végrehajtanunk, hogy ellenőrizzük, üresek-e ezek a mezők. Ha igen, hibaüzenetet küldünk a „Kérjük, töltse ki az e-mailt, a tárgyat és az üzenetet” üzenettel.
Ehhez használjuk a pirítson csomagot az alkalmazásunkban. Telepítenünk kell a következő parancs futtatásával a projektterminálban:
$ yarn add react-toastify
Ezután frissítse App.js
a ... val submitHandler
funkció:
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;
Mostantól minden alkalommal, amikor a felhasználó rákattint a gombra e-mail küldéséhez, anélkül, hogy előre kitöltené az e-mail címet, az e-mail tárgyát és az üzenet beviteli mezőit, a pohárköszöntő üzenet arra kéri őt, hogy tegyen meg mindent, ami szükséges.
Mivel nekünk is szükségünk van a axios
könyvtár az AJAX-kérésekhez, akkor azt is telepítenünk kell:
$ yarn add axios
Ezután hozzon létre a try/catch
blokk az e-mail küldésére vonatkozó aszinkron kérés kezeléséhez.
App.js
most frissül a következőre:
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;
A háttéralkalmazás felépítése a Node segítségével
Ezen a ponton sikeresen implementáltuk az alkalmazás frontendjét. Ha tovább haladunk, elkezdünk dolgozni a háttéren a Node használatával.
Először hozzon létre egy új könyvtárat a projekt gyökerében backend
.
Most, cd
be a háttérkönyvtárba, és futtassa npm init
a terminálról egy Node alkalmazás létrehozásának megkezdéséhez.
$ npm init --y
Tekintse meg gyakorlatias, gyakorlati útmutatónkat a Git tanulásához, amely tartalmazza a bevált gyakorlatokat, az iparág által elfogadott szabványokat és a mellékelt csalólapot. Hagyd abba a guglizást a Git parancsokkal, és valójában tanulni meg!
Megjegyzések: A --y
Az opció azt mondja az NPM-nek, hogy „igen” választ adjon az általa feltett összes kérdésre init
parancs. Ez lényegében megadja az alapértelmezett beállításokat package.json
fájlt.
Ez létrehozza a package.json
fájl, amely lehetővé teszi a háttérprojekt alkalmazásfüggőségeinek kezelését.
Ezután telepítse a következő csomagokat:
express
: Webszervert hoz létredotenv
: Beolvassa a konfigurációs adatokat, és nagyszerű módja annak, hogy az érzékeny adatokat távol tartsa a hozzáférhető kódoktólmailgun-js
: Lehetővé teszi az e-mailek küldését a Mailgun segítségével
$ yarn add express dotenv mailgun-js
Miután telepítette ezeket a csomagokat, hozzon létre két új fájlt server.js
és a .env
a backend
mappát.
A .env
fájlt, megtartjuk a domaint és a Mailgun API-kulcsát.
A szerver építése
Ebben server.js
fájl, a cél egy szerver létrehozása Express.js használatával. Ebben importáljuk a express
, dotenv
és mailgun-js
csomagokat.
server.js
a következőre frissül:
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}`);
});
Itt hívtuk a mg
funkciót, és hozzárendelte mailgun
. Az mg
függvényt, átadjuk az API-kulcsot és a tartományt a környezeti változóból és használjuk mailgun
e-maileket küldeni.
Ezt követően létrejön az Express alkalmazás, és két köztes szoftver express.json()
és a express.urlencoded
arra szolgálnak, hogy a hasznos terhet Express segítségével lekérjék az API-kérésből, és konvertálják azt req.body
.
Ezután a POST
útvonalat az úttal /api/email
létrejön, és benne egy kérés és válasz elfogadására szolgáló függvény van meghatározva. Az e-mail, tárgy és üzenet ezután kivonható a req.body
tárgy. Ezek azok az adatok, amelyeket a felhasználó a frontend alkalmazás beviteli mezőiből ír be.
Miután ezt kivonták, a messages
módszer a mailgun
Az eredetileg beállított függvény meghívódik, majd a send
módszert hívják. A küldési metódusban a következő tulajdonságokkal rendelkező objektum kerül átadásra:
from
: Az a név, amelyet a felhasználók az e-mail „feladó” részében látnak.to
Az e-mail cím, amelyre az e-mailt küldik (a beviteli mezőben megadott e-mail).subject
: A tárgy beírva.html
: Az e-mail címre küldendő üzenetet meghatározó HTML-jelölés.
A második paraméter a send
A metódus egy olyan függvény, amely elfogadja a hibát és a törzset. Ebben a funkcióban mi console.log
a hibát, állítsa be az állapotkódot 500
, és küldjön egy üzenetet, amely szerint „Hiba az e-mail küldés során”. Ellenkező esetben naplózzuk a törzset, és egy üzenetet küldünk a „Sikeres e-mail elküldése” üzenettel.
A fájl legvégén megkapjuk a portot a .env
fájl és hívás app.listen()
a szerver elindításához.
Az API kulcsok meghatározása
Az első lépés a Mailgun alkalmazásban való használatához szükséges API-kulcsok meghatározásához egy ingyenes fiók létrehozása, amely 57 másodpercig tart. hivatalos honlapján.
A fiók létrehozása után a rendszer elküldi Önnek a létrehozott fiókhoz tartozó API-kulcsot, miközben az irányítópult oldalsó navigációs oldalán a küldés fülre lépve hozzáférhet a domainhez.
Másolja ki a sandbox hivatkozást és az API-kulcsot is, és állítsa be az értéket .env
fájl, ahogy az enyémnél is tettem:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
Ezután lépjen vissza a domain áttekintő oldalára a hivatkozásra kattintva. Az oldalnak így kell kinéznie:
Ott az oldal jobb oldalán adja meg azt az e-mail címet, amelyre az e-mail küldését tesztelni szeretné – a jogosult címzett létrehozásához.
A „Címzett mentése” gombra kattintva az alábbi e-mailt kell elküldenie:
Kattintson az „Elfogadom” gombra, és egy külső oldalra kell irányítania:
Kattintson az „Igen” gombra a címzett címének aktiválásához. Mostantól ez a cím képes e-maileket fogadni a Mailgunon keresztül.
Végül sikeresen beállítottuk a Mailgunt, és megépítettük a háttérrendszert a Node segítségével.
Most élvezetesen felpörgetheti az Express szervert a következő kód futtatásával a háttérkönyvtárból:
$ node server.js
A Node App csatlakoztatása a React alkalmazáshoz
Az előtér és a háttér összekapcsolásához lépjen a következőre: package.json
fájl, amely a React alkalmazás projektjének gyökérkönyvtárában található. Ezután a name
tulajdonság, adjon hozzá egy új tulajdonságot proxy
, amelynek a háttérkiszolgáló portjának értékével kell rendelkeznie. Valahogy így kell kinéznie:
"proxy": "http://localhost:4000/"
Ennek hozzáadásával minden aszinkron kérés, amelyet a frontendről küldünk, át lesz irányítva az általunk létrehozott háttérkiszolgálóra.
Az alkalmazás újratöltéséhez indítsa újra a frontend fejlesztőkiszolgálót.
Tesztelje az összes eddigi megvalósításunkat: adja meg az e-mail címét (a korábban aktivált címzettet), az e-mail tárgyát és üzenetét, majd nyomja meg a „Küldés” gombot. Ennek egy sikert kell mutatnia, ami azt jelenti, hogy az e-mail sikeres volt.
És a címzett címének postaládájába is kapnia kell egy e-mailt, ahogy én is:
Csomagolta
Az e-mailek küldése továbbra is nagyon hasznos olyan esetekben, mint például a jelszó visszaállítása, a felhasználó üdvözlése az alkalmazásban, a rendelés megerősítése stb., és ebből a cikkből megtudtuk, milyen egyszerű e-maileket küldeni egy Node.js alkalmazásban a Mailgun használatával. . Látjuk, milyen egyszerű a Mailgun-nal dolgozni, és milyen felhasználóbarát és gyors egy fiók létrehozása a kezdéshez.
Ha legközelebb e-mail infrastruktúrát kell kiépítenie projektjéhez, bátran nézze meg a levélküldő eszközöket, például a Mailgunt. Segítségre van szüksége az eszköz használatához, forduljon hozzám vagy a fejlesztői közösség bármely tagjához, biztos vagyok benne, hogy szívesen segítenek.
További források
- SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
- Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
- Forrás: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- Képes
- Elfogad!
- elfogadja
- hozzáférés
- hozzáférhető
- Szerint
- Fiók
- tulajdonképpen
- hozzáadott
- cím
- Után
- előre
- Éber
- Minden termék
- és a
- Másik
- válasz
- bárki
- api
- API KULCSOK
- app
- Alkalmazás
- alkalmazások
- körül
- cikkben
- kijelölt
- auto
- Axios
- vissza
- háttér
- háttér
- horpadás
- válik
- hogy
- lent
- Jobb
- Bit
- Blokk
- test
- határ
- Doboz
- böngésző
- épít
- Épület
- épült
- üzleti
- gomb
- hívás
- hívott
- Kaphat
- esetek
- Fogás
- Központ
- változik
- karakter
- olcsó
- ellenőrizze
- kód
- közlés
- közösség
- Configuration
- Csatlakozás
- tartalom
- megtérít
- teremt
- készítette
- teremt
- létrehozása
- CSS
- műszerfal
- dátum
- nap
- alapértelmezett
- meghatározott
- Annak meghatározása,
- meghatározó
- Fejlesztő
- Fejlesztés
- DID
- domain
- minden
- Korábban
- Hatékony
- hatékony
- elektronikusan
- e-mailek
- lehetővé teszi
- belép
- lépett
- belép
- Környezet
- hiba
- alapvető
- lényegében
- stb.
- esemény
- tapasztalat
- expressz
- külső
- megkönnyítése
- GYORS
- mező
- Fields
- filé
- Fájlok
- kitöltése
- Találjon
- vezetéknév
- Összpontosít
- következő
- forma
- formák
- Ingyenes
- ból ből
- frontend
- funkció
- kap
- szerzés
- gif
- megy
- ad
- Go
- nagy
- nagymértékben
- útmutató
- fogantyú
- hands-on
- fej
- segít
- Találat
- tart
- lebeg
- Hogyan
- How To
- HTML
- HTTPS
- ICON
- ideális
- végrehajtás
- végre
- importál
- javul
- in
- beleértve
- Beleértve
- Infrastruktúra
- alapvetően
- bemenet
- telepíteni
- telepítve
- IT
- JavaScript
- János
- GIPSZ JAKAB
- Tart
- Kulcs
- kulcsok
- nagyarányú
- keresztnév
- TANUL
- tanult
- tanulás
- LG
- könyvtár
- LINK
- betöltés
- néz
- hasonló
- MEGJELENÉS
- készült
- Fő
- csinál
- Gyártás
- vezetés
- közepes
- üzenet
- módszer
- mozgó
- név
- nav
- navigálás
- Szükség
- Új
- csomópont
- node.js
- értesítések
- tárgy
- célkitűzés
- ONE
- opció
- érdekében
- organikus
- másképp
- áttekintés
- csomag
- csomagok
- paraméter
- Elmúlt
- Jelszó
- ösvény
- teljesítmény
- Plató
- Platón adatintelligencia
- PlatoData
- játszani
- kérem
- pont
- Gyakorlati
- megakadályozása
- folyamat
- Termékek
- program
- ingatlanait
- ingatlan
- védett
- ad
- meghatalmazott
- cél
- Kérdések
- gyors
- RE
- el
- Reagál
- való Világ
- kap
- fogadó
- maradványok
- raktár
- kérni
- kéri
- kötelező
- válasz
- visszatérés
- Gyűrű
- gyökér
- Útvonal
- futás
- futás
- sandbox
- Megtakarítás
- azt mondja,
- Második
- másodperc
- Rész
- elküldés
- érzékeny
- szolgál
- szolgáltatás
- készlet
- beállítások
- árnyék
- kellene
- előadás
- mutatott
- oldal
- Egyszerű
- óta
- So
- szilárd
- néhány
- valami
- Centrifugálás
- Stackabus
- szabványok
- kezdet
- kezdődött
- Állami
- Állapot
- Lépés
- megáll
- tárgy
- benyújtása
- beküldése
- siker
- sikeres
- sikeresen
- ilyen
- SVG
- tart
- cél
- csapat
- megmondja
- sablon
- terminál
- teszt
- A
- A homokozó
- azok
- abban
- dolog
- három
- Keresztül
- idő
- nak nek
- pirítós
- Ma
- is
- szerszám
- szerszámok
- átmenet
- továbbít
- kiváltó
- igaz
- oktatói
- alatt
- Frissítések
- frissítve
- us
- használ
- használó
- barátságos felhasználói
- Felhasználók
- érvényesítés
- érték
- különféle
- Ve
- Megnézem
- háló
- barátságos
- ami
- míg
- fehér
- lesz
- nélkül
- Munka
- művek
- lenne
- XML
- te
- A te
- magad
- zephyrnet