E-post er en viktig metode for forretningskommunikasjon som er veldig rask, billig og toppfri organisk. Når du bygger produkter, kan e-post i stor grad gi bedriften din et effektivt og effektivt medium for å overføre ulike typer data elektronisk.
I denne artikkelen vil vi lære hvordan du bygger et skjema for å sende e-poster ved å bruke Mailgun-tjenesten. For frontend-applikasjonen vil vi bruke React, på backend vil vi bruke Node.js, for å gjøre asynkrone forespørsler, vi vil benytte oss av Axios, og for å vise varsler, vil vi bruke React-Toastify-pakken . På slutten av dagen burde vi ha bygget en e-posttjeneste som fungerer akkurat slik:
OBS: Du kan få tilgang til depotet for dette prosjektet du skal bygge bit for bit i dag, og leke med implementeringen ved hjelp av denne lenke på GitHub.
La oss komme i gang!
Prosjektoppsett
Det første vi skal bygge ut i dag er frontend-applikasjonen, ved hjelp av React.
Å komme i gang med React-biblioteket er enkelt som å inkludere en JavaScript-fil (en CDN) i en HTML-fil. Men for en reell og storskala applikasjon er React CLI den bedre måten å komme i gang på. Vi vil bruke React CLI i opplæringen vår i dag.
I denne artikkelen vil vi bruke et CLI-verktøy bygget av React-teamet for å hjelpe til med å lette den raske utviklingen av React-applikasjoner. For å installere React CLI, kjør følgende kommando -
npm install -g create-react-app
.
La oss nå lage prosjektet og gi det et navn react-node-email-app
, ved å bruke kommandoen nedenfor:
$ npx create-react-app react-node-email-app
Dette vil lage en startmal for å bygge prosjektet vårt. Du kan se denne malen ved å gå inn i prosjektkatalogen din og deretter kjøre utviklingsserveren:
$ cd react-node-email-app
$ yarn start
Vi kan deretter se vår frontend i nettleseren på localhost:3000
.
Bygge prosjektgrensesnittet
Nå kan vi begynne å bygge frontend av applikasjonen. Vi starter med å bygge skjemaet som e-poster kan sendes gjennom.
Vi vil gjøre dette i App.js
fil, slik at den oppdateres til å bli:
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;
Her har vi laget et skjema med tre inndatafelt, ett for å legge inn mottakerens e-post, et annet for emnet for e-posten, og det siste for å legge inn hovedmeldingen i e-posten.
I de ulike inndatafeltene har vi satt opp en tilstand for å håndtere endringen i inndataboksen – for å fange opp enhver endring som gjøres når en bruker skriver inn et tegn i inndatafeltet ved å bruke onChange
begivenhetslytter.
Vi har også laget en knapp for å sende inn en e-post.
For å forskjønne skjemaet har vi oppdatert App.css
fil med følgende CSS-stiler, slik at innholdet ser slik ut:
.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;
}
For å forbedre ytelsen til applikasjonen, en onSubmit
Behandlerhendelsesfunksjonen må defineres på skjemaelementet for å forhindre standardoppførselen til skjemaer som faktisk oppdaterer en side når knappen klikkes. Det er ikke ideelt at siden vår oppdateres når knappen klikkes, siden vi sender forespørselen i bakgrunnen, noe som er en bedre opplevelse for brukeren.
Det er også ideelt at en bruker ikke skal kunne sende en e-post hvis han/hun ikke har skrevet inn noen e-post, emne eller melding. For det må vi ha litt inndatavalidering for å sjekke om disse feltene er tomme. Hvis de er det, returnerer vi en feilmelding med meldingen "Vennligst fyll e-post, emne og melding".
For å gjøre dette bruker vi toastify pakken i vår søknad. Vi må installere den ved å kjøre følgende kommando i prosjektterminalen:
$ yarn add react-toastify
Neste, oppdater App.js
med submitHandler
funksjon:
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å, hver gang en bruker klikker på knappen for å sende en e-post, uten å forhåndsutfylle e-postadresse, e-postemne og meldingsinntastingsfelt, ber toast-meldingen ham/henne om å gjøre alt som kreves.
Siden vi også trenger axios
bibliotek for å lage AJAX-forespørsler, må vi også installere det:
$ yarn add axios
Deretter oppretter du en try/catch
blokker for å håndtere den asynkrone forespørselen om å sende en e-post.
App.js
er nå oppdatert til å bli:
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;
Bygge Backend-applikasjonen ved hjelp av Node
På dette tidspunktet har vi implementert frontend av applikasjonen. Når vi går videre, vil vi begynne å jobbe med backend ved å bruke Node.
Først oppretter du en ny katalog i roten til prosjektet kalt backend
.
Nå, cd
inn i backend-katalogen og kjør npm init
fra terminalen for å begynne å lage en Node-app.
$ npm init --y
Sjekk ut vår praktiske, praktiske guide for å lære Git, med beste praksis, bransjeaksepterte standarder og inkludert jukseark. Slutt å google Git-kommandoer og faktisk lære den!
Merknader: The --y
alternativet ber NPM svare "ja" på alle spørsmålene som stilles av init
kommando. Dette gir deg i hovedsak standardinnstillingene for din package.json
filen.
Dette skaper en package.json
fil som gjør det mulig å administrere applikasjonsavhengighetene til backend-prosjektet.
Installer deretter følgende pakker:
express
: Oppretter en webserverdotenv
: Leser konfigurasjonsdata og fungerer som en flott måte å holde sensitive data unna tilgjengelig kodemailgun-js
: Aktiverer sending av e-poster ved hjelp av Mailgun
$ yarn add express dotenv mailgun-js
Med disse pakkene installert, lag to nye filer server.js
og .env
i backend
mappe.
på .env
fil, vil vi beholde domenet og API-nøkkelen for Mailgun.
Bygge serveren
I dette server.js
fil, er målet å lage en server ved hjelp av Express.js. Der importerer vi express
, dotenv
og mailgun-js
pakker.
server.js
er oppdatert til å bli:
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}`);
});
Her har vi kalt mg
funksjon og tilordnet den til mailgun
. på mg
funksjon, sender vi API-nøkkelen og domenet fra miljøvariabelen og bruker mailgun
å sende e-poster.
Etter det opprettes Express-appen, og to mellomvare express.json()
og express.urlencoded
brukes til å hente nyttelasten ved hjelp av Express fra API-forespørselen og konvertere den til req.body
.
Neste, a POST
rute med stien /api/email
opprettes, og der er en funksjon for å akseptere en forespørsel og svar definert. E-posten, emnet og meldingen kan deretter trekkes ut fra req.body
gjenstand. Dette er dataene som brukeren legger inn fra inndatafeltene på frontend-applikasjonen.
Når dette er trukket ut, vil messages
metoden fra mailgun
funksjonen som opprinnelig ble satt opp kalles, hvoretter send
metode kalles. I sendemetoden sendes et objekt som har følgende egenskaper:
from
: Navnet som brukere ser i «fra»-delen av en e-post.to
E-postadressen som e-posten sendes til (e-posten angitt i inntastingsfeltet).subject
: Emnet angitt.html
: HTML-markeringen som definerer meldingen som skal sendes til e-postadressen.
Den andre parameteren passerte i send
metode er en funksjon som aksepterer feilen og kroppen. I denne funksjonen har vi console.log
feilen, sett statuskoden til 500
, og send en melding som sier "Feil ved sending av e-post". Ellers logger vi kroppen og sender en melding som sier "E-post sendt vellykket" ved suksess.
Helt på slutten av filen får vi porten fra .env
fil og ring app.listen()
for å starte serveren.
Definere API-nøklene
Det første trinnet for å definere API-nøklene for bruk av Mailgun i applikasjonen din er å opprette en gratis konto, som tar 57 sekunder i henhold til deres offesiell nettside.
Etter at du har opprettet en konto, vil en API-nøkkel for kontoen du opprettet bli sendt til deg, mens du kan få tilgang til domenet ved å navigere til sendefanen på sidenav på dashbordet.
Kopier både sandkassekoblingen og API-nøkkelen og angi verdien i din .env
fil, som jeg har gjort for min:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
Deretter går du tilbake til oversiktssiden for domenet ved å klikke på lenken. Siden skal se slik ut:
Der, til høyre på siden, skriv inn e-postadressen du ønsker å teste å sende en e-post til – for å opprette en autorisert mottaker.
Ved å klikke på "Lagre mottaker"-knappen skal en e-post som ser ut som vist nedenfor, sendes:
Klikk på "Jeg godtar"-knappen, og du skal bli omdirigert til en ekstern side:
Klikk på "Ja"-knappen for å fortsette for å aktivere mottakeradressen. Nå kan den adressen begynne å motta e-post via Mailgun.
Til slutt har vi satt opp Mailgun og bygget backend ved hjelp av Node.
Nå kan du herlig spinne opp Express-serveren ved å kjøre følgende kode fra backend-katalogen:
$ node server.js
Koble Node-appen til React-appen
For å koble frontend til backend, gå til package.json
fil som ligger i rotkatalogen til prosjektet for React-appen. Deretter, under name
eiendom, legg til en ny egenskap kalt proxy
, som skal ha verdien til porten for backend-serveren. Det skal se omtrent slik ut:
"proxy": "http://localhost:4000/"
Med det lagt til, blir alle asynkrone forespørsler vi gjør fra frontend omdirigert til backend-serveren som vi har opprettet.
Start frontend-utviklingsserveren på nytt for å laste appen på nytt.
Gå videre for å teste ut all implementeringen vår så langt, ved å skrive inn en e-postadresse (mottakeren du aktiverte tidligere), e-postemne og melding, og trykk deretter på "Send"-knappen. Dette bør vise en suksess for å si at e-posten var vellykket.
Og i innboksen til mottakeradressen bør du også motta en e-post, akkurat som jeg gjorde:
Innpakning Up
Å sende e-poster er fortsatt svært nyttig for tilfeller som å tilbakestille et passord, ønske en bruker velkommen til applikasjonen din, bekrefte en bestilling osv., og i denne artikkelen har vi lært hvor enkelt det er å sende e-poster i en Node.js-applikasjon ved å bruke Mailgun . Vi ser hvor enkelt det er å jobbe med Mailgun og hvor brukervennlig og raskt det er å opprette en konto for å komme i gang.
Neste gang du trenger å bygge en e-postinfrastruktur for prosjektet ditt, kan du gjerne sjekke ut e-postsendingsverktøy som Mailgun. Trenger du hjelp til å bruke verktøyet, ta gjerne kontakt med meg, eller noen i utviklerfellesskapet, jeg er sikker på at de gjerne vil hjelpe.
Tilleggsressurser
- SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
- Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. Tilgang her.
- kilde: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- I stand
- Aksepterer
- godtar
- adgang
- tilgjengelig
- Ifølge
- Logg inn
- faktisk
- la til
- adresse
- Etter
- fremover
- Varsle
- Alle
- og
- En annen
- besvare
- noen
- api
- API NØKLER
- app
- Søknad
- søknader
- rundt
- Artikkel
- tildelt
- auto
- Axios
- tilbake
- Backend
- bakgrunn
- bash
- bli
- være
- under
- Bedre
- Bit
- Blokker
- kroppen
- grensen
- Eske
- nett~~POS=TRUNC leseren~~POS=HEADCOMP
- bygge
- Bygning
- bygget
- virksomhet
- knapp
- ring
- som heter
- Kan få
- saker
- Catch
- sentrum
- endring
- karakter
- billig
- sjekk
- kode
- Kommunikasjon
- samfunnet
- Konfigurasjon
- Koble
- innhold
- konvertere
- skape
- opprettet
- skaper
- Opprette
- CSS
- dashbord
- dato
- dag
- Misligholde
- definert
- definerer
- definere
- Utvikler
- Utvikling
- gJORDE
- domene
- hver enkelt
- Tidligere
- Effektiv
- effektiv
- elektronisk
- emalje
- e-post
- muliggjør
- Enter
- kom inn
- Går inn
- Miljø
- feil
- avgjørende
- hovedsak
- etc
- Event
- erfaring
- ekspress
- utvendig
- legge til rette
- FAST
- felt
- Felt
- filet
- Filer
- fyll
- Finn
- Først
- Fokus
- etter
- skjema
- skjemaer
- Gratis
- fra
- Frontend
- funksjon
- få
- få
- gif
- gå
- gir
- Go
- flott
- sterkt
- veilede
- håndtere
- hands-on
- hode
- hjelpe
- hit
- holder
- hover
- Hvordan
- Hvordan
- HTML
- HTTPS
- ICON
- ideell
- gjennomføring
- implementert
- importere
- forbedre
- in
- inkludert
- Inkludert
- Infrastruktur
- i utgangspunktet
- inngang
- installere
- installerte
- IT
- Javascript
- John
- JOHN DOE
- Hold
- nøkkel
- nøkler
- storskala
- Siste
- LÆRE
- lært
- læring
- LG
- Bibliotek
- LINK
- lasting
- Se
- ser ut som
- UTSEENDE
- laget
- Hoved
- gjøre
- Making
- ledelse
- medium
- melding
- metode
- flytting
- navn
- nav
- navigere
- Trenger
- Ny
- node
- node.js
- varslinger
- objekt
- Målet
- ONE
- Alternativ
- rekkefølge
- organisk
- ellers
- oversikt
- pakke
- pakker
- parameter
- bestått
- Passord
- banen
- ytelse
- plato
- Platon Data Intelligence
- PlatonData
- Spille
- vær så snill
- Point
- Praktisk
- forebygge
- prosess
- Produkter
- prosjekt
- egenskaper
- eiendom
- beskyttet
- gi
- proxy
- formål
- spørsmål
- rask
- RE
- å nå
- Reager
- virkelige verden
- motta
- mottak
- forblir
- Repository
- anmode
- forespørsler
- påkrevd
- svar
- retur
- Ringe
- root
- Rute
- Kjør
- rennende
- sandkasse
- Spar
- sier
- Sekund
- sekunder
- Seksjon
- sending
- sensitive
- betjene
- tjeneste
- sett
- innstillinger
- Shadow
- bør
- Vis
- vist
- side
- Enkelt
- siden
- So
- solid
- noen
- noe
- Snurre rundt
- Stackabuse
- standarder
- Begynn
- startet
- Tilstand
- status
- Trinn
- Stopp
- emne
- innsending
- send
- suksess
- vellykket
- vellykket
- slik
- SVG
- tar
- Target
- lag
- forteller
- mal
- terminal
- test
- De
- Sandkassen
- deres
- deri
- ting
- tre
- Gjennom
- tid
- til
- ristet brød
- i dag
- også
- verktøy
- verktøy
- overgang
- overføre
- utløse
- sant
- tutorial
- etter
- Oppdater
- oppdatert
- us
- bruke
- Bruker
- brukervennlig
- Brukere
- validering
- verdi
- ulike
- Ve
- Se
- web
- velkommen
- hvilken
- mens
- hvit
- vil
- uten
- Arbeid
- virker
- ville
- XML
- Du
- Din
- deg selv
- zephyrnet