E-post on oluline ärisuhtlusmeetod, mis on väga kiire, odav ja tasuta orgaaniline. Toodete loomisel võivad meilid pakkuda teie ettevõttele tõhusat ja tõhusat andmekandjat mitmesuguste andmete elektrooniliseks edastamiseks.
Sellest artiklist õpime, kuidas koostada vorm meilide saatmiseks, kasutades teenust Mailgun. Esirakenduse jaoks kasutame Reacti, taustaprogrammis kasutame Node.js-i, asünkroonsete päringute tegemiseks kasutame Axiost ja teatiste kuvamiseks paketti React-Toastify . Lõppkokkuvõttes oleksime pidanud ehitama meiliteenuse, mis töötab täpselt järgmiselt:
Märge: Saate juurdepääsu selle projekti hoidlale, mille ehitate täna vähehaaval, ja saate selle abil realiseerimisega ringi mängida link GitHubis.
Hakkame pihta!
Projekti seadistamine
Esimene asi, mida me täna välja ehitame, on Reacti kasutav esirakendus.
Reacti teegiga alustamine on lihtne, lisades JavaScripti faili (CDN) HTML-faili. Kuid reaalse ja suuremahulise rakenduse jaoks on React CLI parem viis alustamiseks. Kasutame oma tänases õpetuses React CLI-d.
Selles artiklis kasutame Reacti meeskonna loodud CLI tööriista, mis aitab kaasa Reacti rakenduste kiirele arendamisele. React CLI installimiseks käivitage järgmine käsk -
npm install -g create-react-app
.
Nüüd loome projekti ja paneme sellele nime react-node-email-app
, kasutades allolevat käsku:
$ npx create-react-app react-node-email-app
See loob meie projekti koostamiseks stardimalli. Seda malli saate vaadata, kui sisenete oma projektikataloogi ja käivitate seejärel arendusserveri:
$ cd react-node-email-app
$ yarn start
Seejärel saame vaadata oma kasutajaliidest brauseris aadressil localhost:3000
.
Projekti kasutajaliidese loomine
Nüüd saame hakata koostama rakenduse esiosa. Alustuseks koostame vormi, mille kaudu saab e-kirju saata.
Teeme seda aastal App.js
faili, nii et seda värskendatakse järgmiselt:
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;
Siin oleme loonud kolme sisestusväljaga vormi, millest üks sisestab saaja meili, teine e-kirja teema ja viimane meili põhisõnumi sisestamiseks.
Erinevatel sisestusväljadel oleme seadistanud oleku, mis käsitleb sisestuskasti muudatusi – et tabada kõik muudatused, mis tehakse, kui kasutaja sisestab sisestusväljale tähemärgi, kasutades onChange
sündmuste kuulaja.
Oleme loonud ka nupu e-kirja esitamiseks.
Vormi kaunistamiseks oleme värskendanud App.css
fail järgmiste CSS-stiilidega, nii et selle sisu näeks välja järgmine:
.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;
}
Rakenduse jõudluse parandamiseks an onSubmit
Käsitleja sündmuse funktsioon tuleb vormielemendil määratleda, et vältida vormide vaikekäitumist, mis tegelikult värskendab lehte selle nupu klõpsamisel. Pole ideaalne, kui nupul klõpsamisel meie lehte värskendatakse, kuna saadame päringu taustal, mis on kasutajale parem kogemus.
Ideaalne on ka see, et kasutaja ei saa meili saata, kui ta pole sisestanud ühtegi meili, teemat või sõnumit. Selleks peame kontrollima, kas need väljad on tühjad. Kui need on nii, tagastame veateate sõnumiga "Palun täitke e-kiri, teema ja sõnum".
Selleks kasutame röstima pakett meie rakenduses. Peame selle installima, käivitades projekti terminalis järgmise käsu:
$ yarn add react-toastify
Järgmisena värskendage App.js
koos submitHandler
funktsioon:
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;
Nüüd, iga kord, kui kasutaja klõpsab meili saatmiseks nuppu, ilma e-posti aadressi, meili teema ja sõnumi sisestusvälju eeltäitmata, palub röstsõel tal teha kõik, mida nõutakse.
Kuna me vajame ka axios
teek AJAX-i päringute tegemiseks, peame selle ka installima:
$ yarn add axios
Järgmisena looge a try/catch
blokk, et käsitleda e-kirjade saatmise asünkroonset taotlust.
App.js
on nüüd värskendatud, et saada:
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;
Taustarakenduse loomine Node'i abil
Praeguseks oleme rakenduse esiosa edukalt juurutanud. Edasi liikudes hakkame Node'i kasutades töötama taustaprogrammi kallal.
Esiteks looge projekti juurtes uus kataloog nimega backend
.
Nüüd, cd
taustakataloogi ja käivitage npm init
terminalist, et alustada Node-rakenduse loomist.
$ npm init --y
Tutvuge meie praktilise ja praktilise Giti õppimise juhendiga, mis sisaldab parimaid tavasid, tööstusharus aktsepteeritud standardeid ja kaasas olevat petulehte. Lõpetage Giti käskude guugeldamine ja tegelikult õppima seda!
märkused: --y
valik käsib NPM-il vastata "jah" kõikidele esitatud küsimustele init
käsk. See annab teile sisuliselt teie jaoks vaikeseaded package.json
faili.
See loob a package.json
fail, mis võimaldab hallata taustaprojekti rakendussõltuvusi.
Järgmisena installige järgmised paketid:
express
: loob veebiserveridotenv
: loeb konfiguratsiooniandmeid ja on suurepärane võimalus hoida tundlikud andmed juurdepääsetavast koodist eemalmailgun-js
: Võimaldab meilisõnumite saatmist Mailguni abil
$ yarn add express dotenv mailgun-js
Kui need paketid on nüüd installitud, looge kaks uut faili server.js
ja .env
aasta backend
kausta.
aasta .env
faili, jätame domeeni ja Mailguni API-võtme alles.
Serveri ehitamine
Selle server.js
faili, eesmärk on luua server Express.js abil. Seal impordime express
, dotenv
ja mailgun-js
pakette.
server.js
on värskendatud, et saada:
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}`);
});
Siin oleme kutsunud mg
funktsiooni ja määras selle mailgun
. Aasta mg
funktsiooni, edastame API võtme ja domeeni keskkonnamuutujast ja kasutame mailgun
meilide saatmiseks.
Pärast seda luuakse rakendus Express ja kaks vahevara express.json()
ja express.urlencoded
kasutatakse API päringust Expressi abil kasuliku koormuse hankimiseks ja selle teisendamiseks req.body
.
Järgmisena a POST
marsruut koos rajaga /api/email
luuakse ja selles määratletakse päringu ja vastuse vastuvõtmise funktsioon. Seejärel saab meili, teema ja sõnumi eraldada req.body
objektiks. Need on andmed, mille kasutaja sisestab kasutajaliidese rakenduse sisestusväljadelt.
Kui see on välja võetud, messages
meetodist mailgun
kutsutakse välja algselt seadistatud funktsioon, mille järel send
meetodit nimetatakse. Saatmismeetodis edastatakse objekt, millel on järgmised omadused:
from
: nimi, mida kasutajad näevad meili jaotises „Saatja”.to
Meiliaadress, millele kiri saadetakse (sisestusväljale sisestatud e-kiri).subject
: teema sisestatud.html
: HTML-i märgistus, mis määrab e-posti aadressile saadetava sõnumi.
Teine parameeter edastati send
meetod on funktsioon, mis aktsepteerib viga ja keha. Selles funktsioonis me console.log
viga, määrake olekukood väärtusele 500
ja saatke sõnum "Viga meili saatmisel". Vastasel juhul logime kehasse ja saadame edu kohta teate „E-kiri saadeti edukalt”.
Faili lõpus saame pordi aadressilt .env
faili ja helista app.listen()
serveri käivitamiseks.
API võtmete määratlemine
Esimene samm rakenduses Mailguni kasutamiseks mõeldud API-võtmete määratlemisel on tasuta konto loomine, mis võtab vastavalt nende kontole aega 57 sekundit. ametlikul kodulehel.
Pärast konto loomist saadetakse teile loodud konto API-võti, samal ajal kui saate juurdepääsu domeenile, liikudes armatuurlaua külgmisel navigeerimispaneelil olevale saatmiskaardile.
Kopeerige nii liivakasti link kui ka API võti ja määrake oma väärtus .env
fail, nagu ma olen oma jaoks teinud:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
Järgmisena minge tagasi domeeni ülevaatelehele, klõpsates lingil. Leht peaks välja nägema selline:
Sisestage lehe paremas servas e-posti aadress, millele soovite meili saatmist testida – et luua volitatud adressaat.
Nupul „Salvesta adressaat” klõpsamine peaks käivitama e-kirja, mis näeb välja selline, nagu allpool näidatud, ja saadetakse:
Klõpsake nuppu "Nõustun" ja teid tuleks suunata välisele lehele:
Adressaadi aadressi aktiveerimiseks klõpsake nuppu "Jah". Nüüd saab sellel aadressil Mailguni kaudu e-kirju vastu võtta.
Lõpuks oleme Mailguni edukalt seadistanud ja Node'i abil taustaprogrammi loonud.
Nüüd saate Express-serverit mõnusalt üles keerata, käivitades taustakataloogist järgmise koodi:
$ node server.js
Rakenduse Node ühendamine rakendusega React
Esiosa ühendamiseks taustaprogrammiga minge aadressile package.json
faili, mis asub rakenduse React projekti juurkataloogis. Siis all name
vara, lisage uus vara nimega proxy
, millel peaks olema taustaserveri pordi väärtus. See peaks välja nägema umbes selline:
"proxy": "http://localhost:4000/"
Selle lisamisega suunatakse kõik kasutajaliidesest tehtud asünkroonsed päringud ümber meie loodud taustaserverisse.
Rakenduse uuesti laadimiseks taaskäivitage esiserveri arendusserver.
Jätkake ja testige kõiki meie seniseid rakendusi, sisestades e-posti aadressi (varem aktiveeritud saaja), meili teema ja sõnumi ning seejärel vajutades nuppu "Esita". See peaks näitama edu toosti, et öelda, et meil oli edukas.
Ja adressaadi aadressi postkasti peaksite saama ka meili, nagu minagi:
Pakke Up
Meilide saatmine on endiselt väga kasulik sellistel juhtudel nagu parooli lähtestamine, kasutaja tervitamine teie rakenduse juurde, tellimuse kinnitamine jne ning sellest artiklist oleme õppinud, kui lihtne on Node.js rakenduses e-kirju saata Mailguni abil. . Näeme, kui lihtne on Mailguniga töötada ning kui kasutajasõbralik ja kiire on alustamiseks konto loomine.
Järgmine kord, kui peate oma projekti jaoks e-posti infrastruktuuri üles ehitama, vaadake julgelt meili saatmise tööriistu, nagu Mailgun. Kui vajate tööriista kasutamisel abi, võtke julgelt ühendust minu või kellegagi arendajakogukonnast. Olen kindel, et nad aitaksid hea meelega.
Täiendavad ressursid
- SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
- Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
- Allikas: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- Võimalik
- aktsepteerima
- Nõustub
- juurdepääs
- juurdepääsetav
- Vastavalt
- konto
- tegelikult
- lisatud
- aadress
- pärast
- eespool
- Häire
- Materjal: BPA ja flataatide vaba plastik
- ja
- Teine
- vastus
- keegi
- API
- API VÕTMED
- app
- taotlus
- rakendused
- ümber
- artikkel
- määratud
- auto
- Axios
- tagasi
- Taustaprogramm
- tagapõhi
- sisse lööma
- muutuma
- on
- alla
- Parem
- Natuke
- Blokeerima
- keha
- piir
- Kast
- brauseri
- ehitama
- Ehitus
- ehitatud
- äri
- nupp
- helistama
- kutsutud
- Saab
- juhtudel
- maadlus
- keskus
- muutma
- iseloom
- odav
- kontrollima
- kood
- KOMMUNIKATSIOON
- kogukond
- konfiguratsioon
- Võta meiega ühendust
- sisu
- muutma
- looma
- loodud
- loob
- loomine
- CSS
- armatuurlaud
- andmed
- päev
- vaikimisi
- määratletud
- Määratleb
- määratlemisel
- arendaja
- & Tarkvaraarendus
- DID
- domeen
- iga
- Ajalugu
- Tõhus
- tõhus
- elektrooniliselt
- kirju
- võimaldab
- sisene
- sisenes
- Siseneb
- keskkond
- viga
- oluline
- põhiliselt
- jms
- sündmus
- kogemus
- ekspress
- väline
- hõlbustada
- KIIRE
- väli
- Valdkonnad
- fail
- Faile
- täitma
- leidma
- esimene
- Keskenduma
- Järel
- vorm
- vormid
- tasuta
- Alates
- Frontend
- funktsioon
- saama
- saamine
- gif
- Git
- annab
- Go
- suur
- suuresti
- suunata
- käepide
- käed-
- juhataja
- aitama
- Tulemus
- omab
- hõljuma
- Kuidas
- Kuidas
- HTML
- HTTPS
- ICON
- ideaalne
- täitmine
- rakendatud
- import
- parandama
- in
- lisatud
- Kaasa arvatud
- Infrastruktuur
- esialgu
- sisend
- paigaldama
- paigaldatud
- IT
- JavaScript
- John
- JOHN DOE
- hoidma
- Võti
- võtmed
- suuremahuline
- viimane
- Õppida
- õppinud
- õppimine
- LG
- Raamatukogu
- LINK
- laadimine
- Vaata
- näeb välja
- välimus
- tehtud
- põhiline
- tegema
- Tegemine
- juhtimine
- keskmine
- sõnum
- meetod
- liikuv
- nimi
- nav
- navigeerimine
- Vajadus
- Uus
- sõlme
- Node.js
- teated
- objekt
- eesmärk
- ONE
- valik
- et
- orgaaniline
- muidu
- ülevaade
- pakend
- pakette
- parameeter
- Vastu võetud
- Parool
- tee
- jõudlus
- Platon
- Platoni andmete intelligentsus
- PlatoData
- mängima
- palun
- Punkt
- Praktiline
- vältida
- protsess
- Toodet
- projekt
- omadused
- kinnisvara
- kaitstud
- anda
- volikiri
- eesmärk
- Küsimused
- kiire
- RE
- jõudma
- Reageerima
- päris maailm
- saama
- vastuvõtmine
- jäänused
- Hoidla
- taotleda
- Taotlusi
- nõutav
- vastus
- tagasipöördumine
- ring
- juur
- Marsruut
- jooks
- jooksmine
- liivakast
- Säästa
- ütleb
- Teine
- sekundit
- Osa
- saatmine
- tundlik
- teenima
- teenus
- komplekt
- seaded
- vari
- peaks
- näitama
- näidatud
- külg
- lihtne
- alates
- So
- tahke
- mõned
- midagi
- Spin
- Stackabus
- standardite
- algus
- alustatud
- riik
- olek
- Samm
- Peatus
- teema
- esitamine
- esitama
- edu
- edukas
- Edukalt
- selline
- SVG
- võtab
- sihtmärk
- meeskond
- ütleb
- šabloon
- terminal
- test
- .
- Liivakast
- oma
- selles
- asi
- kolm
- Läbi
- aeg
- et
- röstsai
- täna
- liiga
- tööriist
- töövahendid
- üleminek
- edastama
- vallandada
- tõsi
- juhendaja
- all
- Värskendused
- ajakohastatud
- us
- kasutama
- Kasutaja
- kasutajasõbralik
- Kasutajad
- kinnitamine
- väärtus
- eri
- Ve
- vaade
- web
- tervitades
- mis
- kuigi
- valge
- will
- ilma
- Töö
- töötab
- oleks
- XML
- sa
- Sinu
- ise
- sephyrnet