E-mail to podstawowa metoda komunikacji biznesowej, która jest bardzo szybka, tania i całkowicie bezpłatna. Podczas tworzenia produktów e-maile mogą znacznie zapewnić Twojej firmie skuteczne i wydajne medium do elektronicznego przesyłania różnego rodzaju danych.
W tym artykule dowiemy się, jak zbudować formularz do wysyłania wiadomości e-mail za pomocą usługi Mailgun. Dla aplikacji frontendowej wykorzystamy React, na backendzie wykorzystamy Node.js, do wykonywania żądań asynchronicznych wykorzystamy Axios, a do wyświetlania powiadomień wykorzystamy pakiet React-Toastify . Na koniec dnia powinniśmy zbudować usługę pocztową, która działa mniej więcej tak:
Uwaga: Możesz uzyskać dostęp do repozytorium dla tego projektu, który będziesz dzisiaj budować kawałek po kawałku, i bawić się implementacją za pomocą tego link na GitHubie.
Zacznijmy!
Konfiguracja projektu
Pierwszą rzeczą, którą dzisiaj zbudujemy, będzie aplikacja frontendowa, wykorzystująca React.
Rozpoczęcie pracy z biblioteką React jest proste i polega na dołączeniu pliku JavaScript (CDN) do pliku HTML. Ale w przypadku rzeczywistych aplikacji na dużą skalę React CLI jest lepszym sposobem na rozpoczęcie pracy. W dzisiejszym tutorialu użyjemy React CLI.
W tym artykule użyjemy narzędzia CLI stworzonego przez zespół React, aby ułatwić szybkie tworzenie aplikacji React. Aby zainstalować React CLI, uruchom następujące polecenie –
npm install -g create-react-app
.
Teraz utwórzmy projekt i nazwijmy go react-node-email-app
, używając poniższego polecenia:
$ npx create-react-app react-node-email-app
Spowoduje to utworzenie szablonu startowego do zbudowania naszego projektu. Możesz wyświetlić ten szablon, przechodząc do katalogu projektu, a następnie uruchamiając serwer programistyczny:
$ cd react-node-email-app
$ yarn start
Możemy wtedy zobaczyć nasz frontend w przeglądarce pod adresem localhost:3000
.
Tworzenie interfejsu projektu
Teraz możemy przystąpić do budowy frontendu aplikacji. Zaczniemy od zbudowania formularza, za pomocą którego można wysyłać wiadomości e-mail.
Zrobimy to w App.js
plik, aby został zaktualizowany, aby stał się:
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;
Tutaj stworzyliśmy formularz z trzema polami wejściowymi, jedno do wpisania adresu e-mail odbiorcy, drugie do tematu wiadomości e-mail, a ostatnie do wpisania głównej treści wiadomości e-mail.
W różnych polach wprowadzania ustawiliśmy stan do obsługi zmian w polu wprowadzania — aby uchwycić każdą zmianę dokonaną, gdy użytkownik wprowadza znak do pola wprowadzania za pomocą onChange
słuchacz zdarzeń.
Stworzyliśmy również przycisk służący do wysyłania wiadomości e-mail.
Aby upiększyć formularz, zaktualizowaliśmy plik App.css
plik z następującymi stylami CSS, aby jego zawartość wyglądała tak:
.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;
}
Aby poprawić wydajność aplikacji, an onSubmit
Funkcja obsługi zdarzenia musi być zdefiniowana w elemencie formularza, aby zapobiec domyślnemu zachowaniu formularzy, które faktycznie odświeżają stronę po kliknięciu przycisku. Odświeżanie naszej strony po kliknięciu przycisku nie jest idealnym rozwiązaniem, ponieważ wysyłamy żądanie w tle, co jest wygodniejsze dla użytkownika.
Idealnie byłoby również, gdyby użytkownik nie mógł wysłać wiadomości e-mail, jeśli nie wprowadził żadnego adresu e-mail, tematu ani wiadomości. W tym celu musimy zweryfikować dane wejściowe, aby sprawdzić, czy te pola są puste. Jeśli tak, zwracamy błąd z komunikatem „Proszę wypełnić adres e-mail, temat i wiadomość”.
W tym celu korzystamy z opiekać pakiet w naszej aplikacji. Musimy go zainstalować, uruchamiając następujące polecenie w terminalu projektu:
$ yarn add react-toastify
Następnie zaktualizuj App.js
z submitHandler
funkcjonować:
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;
Teraz za każdym razem, gdy użytkownik kliknie przycisk, aby wysłać wiadomość e-mail, bez wstępnego wypełniania adresu e-mail, tematu wiadomości e-mail i pól wprowadzania wiadomości, wiadomość wyskakująca monituje go o zrobienie wszystkiego, co jest wymagane.
Ponieważ potrzebujemy również axios
bibliotekę do tworzenia żądań AJAX, będziemy również musieli ją zainstalować:
$ yarn add axios
Następnie utwórz plik try/catch
block do obsługi asynchronicznego żądania wysłania wiadomości e-mail.
App.js
jest teraz aktualizowany, aby stać się:
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;
Tworzenie aplikacji backendowej przy użyciu Node
W tym momencie pomyślnie wdrożyliśmy frontend aplikacji. Przechodząc dalej, zaczniemy pracować nad backendem przy użyciu Node.
Najpierw utwórz nowy katalog w katalogu głównym projektu o nazwie backend
.
Teraz, cd
do katalogu zaplecza i uruchom npm init
z terminala, aby rozpocząć tworzenie aplikacji Node.
$ npm init --y
Zapoznaj się z naszym praktycznym, praktycznym przewodnikiem dotyczącym nauki Git, zawierającym najlepsze praktyki, standardy przyjęte w branży i dołączoną ściągawkę. Zatrzymaj polecenia Google Git, a właściwie uczyć się to!
Note: the --y
Opcja mówi NPM, aby odpowiedział „tak” na wszystkie pytania zadane przez init
Komenda. Zasadniczo daje to domyślne ustawienia dla twojego package.json
plik.
To tworzy package.json
plik umożliwiający zarządzanie zależnościami aplikacji projektu backendowego.
Następnie zainstaluj następujące pakiety:
express
: Tworzy serwer WWWdotenv
: Odczytuje dane konfiguracyjne i służy jako doskonały sposób na trzymanie poufnych danych z dala od dostępnego kodumailgun-js
: Umożliwia wysyłanie e-maili za pomocą Mailgun
$ yarn add express dotenv mailgun-js
Po zainstalowaniu tych pakietów utwórz dwa nowe pliki server.js
i .env
backend
teczka.
W .env
zachowamy domenę i klucz API dla Mailgun.
Budowa serwera
W tym server.js
celem jest utworzenie serwera przy użyciu Express.js. W nim importujemy express
, dotenv
, mailgun-js
pakiety.
server.js
jest aktualizowany, aby stać się:
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}`);
});
Tutaj nazwaliśmy mg
funkcję i przypisać do niej mailgun
, w mg
funkcji przekazujemy klucz API i domenę ze zmiennej środowiskowej i używamy mailgun
wysyłać e-maile.
Następnie tworzona jest aplikacja Express i dwa oprogramowanie pośrednie express.json()
i express.urlencoded
są używane do pobrania ładunku za pomocą Express z żądania API i przekształcenia go w req.body
.
Następnie POST
trasa ze ścieżką /api/email
jest tworzony, a w nim zdefiniowana jest funkcja akceptująca żądanie i odpowiedź. E-mail, temat i wiadomość można następnie wyodrębnić z pliku req.body
obiekt. Są to dane, które użytkownik wprowadza z pól wejściowych w aplikacji frontendowej.
Po wydobyciu tego, messages
metoda z mailgun
wywoływana jest początkowo ustawiona funkcja, po czym wywoływana jest funkcja send
nazywa się metoda. W metodzie send przekazywany jest obiekt, który posiada następujące właściwości:
from
: nazwa, którą użytkownicy widzą w sekcji „od” e-maila.to
Adres e-mail, na który wysyłana jest wiadomość e-mail (adres e-mail wprowadzony w polu wprowadzania).subject
: Wprowadzono temat.html
: znacznik HTML definiujący wiadomość, która ma zostać wysłana na adres e-mail.
Drugi parametr przekazany w pliku send
metoda to funkcja, która akceptuje błąd i treść. W tej funkcji my console.log
błąd, ustaw kod stanu na 500
i wyślij wiadomość o treści „Błąd podczas wysyłania wiadomości e-mail”. W przeciwnym razie rejestrujemy treść i wysyłamy wiadomość z napisem „E-mail wysłany pomyślnie” w przypadku powodzenia.
Na samym końcu pliku otrzymujemy port z pliku .env
zapisz i zadzwoń app.listen()
aby uruchomić serwer.
Definiowanie kluczy API
Pierwszym krokiem do zdefiniowania kluczy API do korzystania z Mailgun w Twojej aplikacji jest utworzenie bezpłatnego konta, co zajmuje 57 sekund zgodnie z ich oficjalna strona internetowa.
Po utworzeniu konta zostanie do Ciebie wysłany klucz API dla utworzonego konta, a dostęp do domeny możesz uzyskać, przechodząc do zakładki wysyłania w bocznej nawigacji pulpitu nawigacyjnego.
Skopiuj zarówno link do piaskownicy, jak i klucz API, i ustaw wartość w swoim .env
plik, tak jak zrobiłem dla mojego:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
Następnie wróć do strony przeglądu domeny, klikając link. Strona powinna wyglądać tak:
Tam po prawej stronie wpisz adres e-mail, na który chcesz przetestować wysyłanie wiadomości e-mail – aby utworzyć autoryzowanego odbiorcę.
Kliknięcie przycisku „Zapisz odbiorcę” powinno spowodować wysłanie wiadomości e-mail, która wygląda tak, jak pokazano poniżej:
Kliknij przycisk „Zgadzam się” i powinieneś zostać przekierowany na zewnętrzną stronę:
Kliknij przycisk „Tak”, aby przejść do aktywacji adresu odbiorcy. Teraz ten adres może zacząć odbierać wiadomości e-mail za pośrednictwem Mailgun.
Wreszcie pomyślnie skonfigurowaliśmy Mailgun i zbudowaliśmy zaplecze za pomocą Node.
Teraz możesz cudownie rozkręcić serwer Express, uruchamiając następujący kod z katalogu zaplecza:
$ node server.js
Łączenie aplikacji Node z aplikacją React
Aby połączyć frontend z backendem, przejdź do package.json
plik, który znajduje się w katalogu głównym projektu dla aplikacji React. Następnie pod name
właściwość, dodaj nową właściwość o nazwie proxy
, który powinien mieć wartość portu dla serwera zaplecza. Powinno to wyglądać mniej więcej tak:
"proxy": "http://localhost:4000/"
Po dodaniu tego wszystkie asynchroniczne żądania, które wysyłamy z frontendu, są przekierowywane do utworzonego przez nas serwera zaplecza.
Uruchom ponownie frontendowy serwer programistyczny, aby ponownie załadować aplikację.
Śmiało, przetestuj całą naszą dotychczasową implementację, wprowadzając adres e-mail (odbiorca, którego aktywowałeś wcześniej), temat wiadomości e-mail i treść wiadomości, a następnie naciśnij przycisk „Prześlij”. To powinno pokazać toast sukcesu, aby powiedzieć, że wiadomość e-mail się powiodła.
A w skrzynce odbiorczej adresu odbiorcy również powinieneś otrzymać wiadomość e-mail, tak jak ja:
Owijanie w górę
Wysyłanie wiadomości e-mail pozostaje bardzo przydatne w przypadkach takich jak resetowanie hasła, powitanie użytkownika w aplikacji, potwierdzenie zamówienia itp. W tym artykule dowiedzieliśmy się, jak łatwo jest wysyłać wiadomości e-mail w aplikacji Node.js za pomocą Mailgun . Widzimy, jak łatwo jest pracować z Mailgunem oraz jak przyjazne dla użytkownika i szybkie jest utworzenie konta, aby rozpocząć.
Następnym razem, gdy będziesz potrzebować zbudować infrastrukturę poczty e-mail dla swojego projektu, wypróbuj narzędzia do wysyłania poczty, takie jak Mailgun. Potrzebujesz pomocy w korzystaniu z narzędzia, skontaktuj się ze mną lub z kimkolwiek ze społeczności programistów, jestem pewien, że chętnie Ci pomogą.
Dodatkowe zasoby
- Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
- Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
- Źródło: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- Zdolny
- Akceptuj
- Akceptuje
- dostęp
- dostępny
- Stosownie
- Konto
- faktycznie
- w dodatku
- adres
- Po
- przed
- Alarm
- Wszystkie kategorie
- i
- Inne
- odpowiedź
- ktoś
- api
- KLUCZE API
- Aplikacja
- Zastosowanie
- aplikacje
- na około
- artykuł
- przydzielony
- samochód
- Axios
- z powrotem
- Backend
- tło
- bash
- stają się
- jest
- poniżej
- Ulepsz Swój
- Bit
- Blokować
- ciało
- granica
- Pudełko
- przeglądarka
- budować
- Budowanie
- wybudowany
- biznes
- przycisk
- wezwanie
- nazywa
- Może uzyskać
- Etui
- zapasy
- Centrum
- zmiana
- charakter
- tani
- ZOBACZ
- kod
- Komunikacja
- społeczność
- systemu
- Skontaktuj się
- treść
- konwertować
- Stwórz
- stworzony
- tworzy
- Tworzenie
- CSS
- tablica rozdzielcza
- dane
- dzień
- Domyślnie
- zdefiniowane
- Definiuje
- definiowanie
- Deweloper
- oprogramowania
- ZROBIŁ
- domena
- każdy
- Wcześniej
- Efektywne
- wydajny
- elektronicznie
- e-maile
- Umożliwia
- Wchodzę
- wpisana
- Wchodzi
- Środowisko
- błąd
- niezbędny
- istotnie
- itp
- wydarzenie
- doświadczenie
- ekspresowy
- zewnętrzny
- ułatwiać
- FAST
- pole
- Łąka
- filet
- Akta
- wypełniać
- Znajdź
- i terminów, a
- Skupiać
- następujący
- Nasz formularz
- formularze
- Darmowy
- od
- frontend
- funkcjonować
- otrzymać
- miejsce
- gif
- git
- daje
- Go
- wspaniały
- bardzo
- poprowadzi
- uchwyt
- hands-on
- głowa
- pomoc
- Dobranie (Hit)
- posiada
- unosić
- W jaki sposób
- How To
- HTML
- HTTPS
- ICON
- idealny
- realizacja
- realizowane
- importować
- podnieść
- in
- włączony
- Włącznie z
- Infrastruktura
- początkowo
- wkład
- zainstalować
- zainstalowany
- IT
- JAVASCRIPT
- John
- JOHN DOE
- Trzymać
- Klawisz
- Klawisze
- na dużą skalę
- Nazwisko
- UCZYĆ SIĘ
- dowiedziałem
- nauka
- LG
- Biblioteka
- LINK
- załadunek
- Popatrz
- wygląda jak
- WYGLĄD
- zrobiony
- Główny
- robić
- Dokonywanie
- i konserwacjami
- średni
- wiadomość
- metoda
- przeniesienie
- Nazwa
- nav
- żeglujący
- Potrzebować
- Nowości
- węzeł
- node.js
- Powiadomienia
- przedmiot
- cel
- ONE
- Option
- zamówienie
- organiczny
- Inaczej
- przegląd
- pakiet
- Pakiety
- parametr
- minęło
- Hasło
- ścieżka
- jest gwarancją najlepszej jakości, które mogą dostarczyć Ci Twoje monitory,
- plato
- Analiza danych Platona
- PlatoDane
- Grać
- Proszę
- punkt
- Praktyczny
- zapobiec
- wygląda tak
- Produkty
- projekt
- niska zabudowa
- własność
- chroniony
- zapewniać
- pełnomocnik
- cel
- pytania
- szybki
- RE
- dosięgnąć
- React
- Prawdziwy świat
- otrzymać
- odbieranie
- szczątki
- składnica
- zażądać
- wywołań
- wymagany
- odpowiedź
- powrót
- Pierścień
- korzeń
- Trasa
- run
- bieganie
- piaskownica
- Zapisz
- mówią
- druga
- sekund
- Sekcja
- wysyłanie
- wrażliwy
- służyć
- usługa
- zestaw
- w panelu ustawień
- Shadow
- powinien
- pokazać
- pokazane
- bok
- Prosty
- ponieważ
- So
- solidny
- kilka
- coś
- Spin
- Nadużycie stosu
- standardy
- początek
- rozpoczęty
- Stan
- Rynek
- Ewolucja krok po kroku
- Stop
- przedmiot
- uległość
- Zatwierdź
- sukces
- udany
- Z powodzeniem
- taki
- SVG
- trwa
- cel
- zespół
- mówi
- szablon
- terminal
- test
- Połączenia
- Piaskownica
- ich
- w nim
- rzecz
- trzy
- Przez
- czas
- do
- tost
- już dziś
- także
- narzędzie
- narzędzia
- przejście
- przekazać
- wyzwalać
- prawdziwy
- Tutorial
- dla
- Aktualizacja
- zaktualizowane
- us
- posługiwać się
- Użytkownik
- łatwy w obsłudze
- Użytkownicy
- uprawomocnienie
- wartość
- różnorodny
- Ve
- Zobacz i wysłuchaj
- sieć
- powitanie
- który
- Podczas
- biały
- będzie
- bez
- Praca
- działa
- by
- XML
- You
- Twój
- siebie
- zefirnet