דוא"ל הוא שיטה חיונית לתקשורת עסקית שהיא מהירה מאוד, זולה ואורגנית ללא עלות. בעת בניית מוצרים, מיילים יכולים לספק לעסק שלך אמצעי יעיל ויעיל להעברת סוגים שונים של נתונים, באופן אלקטרוני.
במאמר זה נלמד כיצד לבנות טופס לשליחת מיילים באמצעות שירות Mailgun. עבור אפליקציית החזית, נשתמש ב-React, ב-backend נשתמש ב-Node.js, כדי לבצע בקשות אסינכרוניות, נשתמש ב-Axios, וכדי להציג התראות, נשתמש בחבילת React-Toastify . בסופו של יום, היינו צריכים לבנות שירות דואר שעובד בדיוק כך:
הערה: אתה יכול לקבל גישה למאגר עבור הפרויקט הזה שתבנה טיפין טיפין היום, ולשחק עם היישום באמצעות זה קישור ב-GitHub.
בואו נתחיל!
הגדרת פרויקט
הדבר הראשון שנבנה היום הוא אפליקציית החזית, באמצעות React.
תחילת העבודה עם ספריית React היא פשוטה כמו הכללת קובץ JavaScript (CDN) לתוך קובץ HTML. אבל עבור יישום בעולם האמיתי ובקנה מידה גדול, ה-React CLI הוא הדרך הטובה יותר להתחיל. נשתמש ב-React CLI במדריך שלנו היום.
במאמר זה נשתמש בכלי CLI שנבנה על ידי צוות React כדי לסייע בפיתוח מהיר של אפליקציות React. כדי להתקין את React CLI, הפעל את הפקודה הבאה -
npm install -g create-react-app
.
כעת, הבה ניצור את הפרויקט ונקרא לו react-node-email-app
, באמצעות הפקודה למטה:
$ npx create-react-app react-node-email-app
זה ייצור תבנית התחלה לבניית הפרויקט שלנו. אתה יכול להציג תבנית זו על ידי כניסה לספריית הפרויקט שלך ולאחר מכן הפעלת שרת הפיתוח:
$ cd react-node-email-app
$ yarn start
לאחר מכן נוכל להציג את החזית שלנו בדפדפן בכתובת localhost:3000
.
בניית ממשק המשתמש של הפרויקט
כעת, אנו יכולים להתחיל לבנות את החזית של האפליקציה. נתחיל בבניית הטופס שדרכו ניתן לשלוח מיילים.
נעשה זאת ב- App.js
קובץ, כך שהוא מעודכן להיות:
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;
כאן יצרנו טופס עם שלושה שדות קלט, אחד להזנת המייל של המקבל, אחר לנושא המייל והאחרון להזנת ההודעה הראשית של המייל.
בשדות הקלט השונים, הגדרנו מצב לטפל בשינוי בתיבת הקלט - לתפוס כל שינוי שנעשה כאשר משתמש מזין תו לשדה הקלט באמצעות onChange
מאזין לאירועים.
כמו כן יצרנו כפתור לצורך הגשת דוא"ל.
כדי לייפות את הטופס, עדכנו את ה App.css
קובץ עם סגנונות ה-CSS הבאים, כך שהתוכן שלו ייראה כך:
.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;
}
כדי לשפר את ביצועי האפליקציה, א onSubmit
יש להגדיר את פונקציית אירוע המטפל ברכיב הטופס כדי למנוע את התנהגות ברירת המחדל של טפסים המרעננים למעשה עמוד כאשר לוחצים על הכפתור שלו. זה לא אידיאלי שהדף שלנו יתרענן בלחיצה על הכפתור מכיוון שאנו שולחים את הבקשה ברקע, וזו חוויה טובה יותר למשתמש.
זה גם אידיאלי שמשתמש לא יוכל לשלוח דוא"ל אם הוא/היא לא הזינו שום דוא"ל, נושא או הודעה. לשם כך, עלינו לבצע אימות קלט כדי לבדוק אם השדות הללו ריקים. אם כן, אנו מחזירים שגיאה עם ההודעה "נא למלא דוא"ל, נושא והודעה".
לשם כך, אנו עושים שימוש ב- לטוסט חבילה באפליקציה שלנו. עלינו להתקין אותו על ידי הפעלת הפקודה הבאה במסוף הפרויקט:
$ yarn add react-toastify
הבא, עדכון App.js
עם submitHandler
פוּנקצִיָה:
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;
כעת, בכל פעם שמשתמש לוחץ על הכפתור כדי לשלוח דוא"ל, מבלי למלא מראש את כתובת הדוא"ל, נושא הדוא"ל ושדות הזנת ההודעה, הודעת הטוסט מבקשת ממנו/ה לעשות את כל מה שנדרש.
מאז אנחנו גם צריכים את axios
ספרייה לביצוע בקשות AJAX, נצטרך גם להתקין אותה:
$ yarn add axios
בשלב הבא, צור א try/catch
לחסום כדי לטפל בבקשה האסינכרונית לשליחת אימייל.
App.js
מעודכן כעת להיות:
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;
בניית אפליקציית Backend באמצעות Node
בשלב זה, יישמנו בהצלחה את חזית האפליקציה. בהמשך, נתחיל לעבוד על ה-backend באמצעות Node.
ראשית, צור ספרייה חדשה בשורש הפרויקט שנקרא backend
.
עכשיו, cd
לתוך ספריית הקצה האחורי והפעל npm init
מהמסוף כדי להתחיל ליצור אפליקציית Node.
$ npm init --y
עיין במדריך המעשי והמעשי שלנו ללימוד Git, עם שיטות עבודה מומלצות, סטנדרטים מקובלים בתעשייה ודף רמאות כלול. תפסיק לגוגל פקודות Git ולמעשה ללמוד זה!
הערות: --y
option אומר ל-NPM לענות "כן" לכל השאלות שהוצגו על ידי init
פקודה. זה בעצם נותן לך את הגדרות ברירת המחדל עבורך package.json
קובץ.
זה יוצר א package.json
קובץ המאפשר ניהול של תלות היישומים של פרויקט הקצה האחורי.
לאחר מכן, התקן את החבילות הבאות:
express
: יוצר שרת אינטרנטdotenv
: קורא נתוני תצורה ומשמש כדרך מצוינת להרחיק נתונים רגישים מקוד נגישmailgun-js
: מאפשר שליחת מיילים באמצעות Mailgun
$ yarn add express dotenv mailgun-js
כאשר חבילות אלו מותקנות כעת, צור שני קבצים חדשים server.js
ו .env
ב backend
תיקייה.
ב .env
קובץ, נשמור את הדומיין ואת מפתח ה-API עבור Mailgun.
בניית השרת
בחודש זה server.js
הקובץ, המטרה היא ליצור שרת באמצעות Express.js. לשם, אנו מייבאים את express
, dotenv
, ו mailgun-js
חבילות.
server.js
מתעדכן להיות:
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}`);
});
הנה, קראנו ל- mg
פונקציה והקצה אותה ל mailgun
. ב mg
פונקציה, אנו מעבירים את מפתח ה-API והדומיין ממשתנה הסביבה ומשתמשים mailgun
לשלוח מיילים.
לאחר מכן נוצרת אפליקציית Express, ושתי תוכנות ביניים express.json()
ו express.urlencoded
משמשים כדי לקבל את המטען באמצעות Express מבקשת ה-API ולהמיר אותו ל req.body
.
הבא, א POST
מסלול עם השביל /api/email
נוצר, ובו מוגדרת פונקציה לקבלת בקשה ותגובה. לאחר מכן ניתן לחלץ את האימייל, הנושא וההודעה מה- req.body
לְהִתְנַגֵד. אלו הם הנתונים שהמשתמש מזין משדות הקלט באפליקציה הקדמית.
לאחר חילוץ זה, ה messages
שיטה מתוך mailgun
הפונקציה שהוגדרה לראשונה נקראת, ולאחר מכן send
שיטה נקראת. בשיטת השליחה מועבר אובייקט שמחזיק במאפיינים הבאים:
from
: השם שהמשתמשים רואים בקטע "מאת" של הודעת דוא"ל.to
כתובת המייל שאליה נשלח המייל (המייל שהוזן בשדה הקלט).subject
: הנושא נכנס.html
: סימון ה-HTML שמגדיר את ההודעה שתישלח לכתובת הדואר האלקטרוני.
הפרמטר השני עבר ב- send
שיטה היא פונקציה שמקבלת את השגיאה והגוף. בפונקציה זו אנחנו console.log
השגיאה, הגדר את קוד המצב ל 500
, ושלח הודעה שאומרת "שגיאה בשליחת אימייל". אחרת אנחנו רושמים את הגוף ושולחים הודעה שאומרת "אימייל נשלח בהצלחה" על הצלחה.
בסוף הקובץ, אנו מקבלים את היציאה מה- .env
להגיש ולהתקשר app.listen()
כדי להפעיל את השרת.
הגדרת מפתחות ה-API
הצעד הראשון להגדרת מפתחות ה-API לשימוש ב-Mailgun באפליקציה שלך הוא יצירת חשבון חינמי, שלוקח 57 שניות בהתאם אתר רשמי.
לאחר שיצרתם חשבון, מפתח API עבור החשבון שיצרתם יישלח אליכם, בעוד שתוכלו לקבל גישה לדומיין על ידי ניווט ללשונית השליחה בניווט הצד של לוח המחוונים.
העתק גם את הקישור של ארגז החול וגם את מפתח ה-API והגדר את הערך שלך .env
קובץ, כפי שעשיתי עבור שלי:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
לאחר מכן, חזור לדף הסקירה הכללית של הדומיין על ידי לחיצה על הקישור. העמוד אמור להיראות כך:
שם, בצד ימין של הדף, הזן את כתובת האימייל שאליה ברצונך לבדוק שליחת אימייל - כדי ליצור נמען מורשה.
לחיצה על כפתור "שמור נמען" אמורה להפעיל דוא"ל שנראה כמו שמוצג למטה, להישלח:
לחץ על כפתור "אני מסכים", ואתה אמור להיות מופנה לדף חיצוני:
לחץ על כפתור "כן" כדי להמשיך להפעלת כתובת הנמען. כעת הכתובת הזו יכולה להתחיל לקבל מיילים דרך Mailgun.
לבסוף, הגדרנו בהצלחה את Mailgun ובנינו את הקצה האחורי באמצעות Node.
כעת, אתה יכול להעלות את שרת ה-Express בהנאה על ידי הפעלת הקוד הבא מספריית הקצה האחורי:
$ node server.js
חיבור אפליקציית ה-Node לאפליקציית React
כדי לחבר את הקצה הקדמי לקצה האחורי, עבור אל ה- package.json
קובץ שנמצא בספריית השורש של הפרויקט עבור אפליקציית React. ואז, מתחת ל name
מאפיין, הוסף מאפיין חדש בשם proxy
, שאמור להיות בעל הערך של היציאה עבור שרת הקצה האחורי. זה אמור להיראות בערך כך:
"proxy": "http://localhost:4000/"
עם זה מתווסף, כל הבקשות האסינכרוניות שאנו מבצעים מה-frontend מופנים לשרת ה-backend שיצרנו.
הפעל מחדש את שרת הפיתוח הקדמי כדי לטעון מחדש את האפליקציה.
המשך לבדוק את כל היישום שלנו עד כה, על ידי הזנת כתובת דוא"ל (הנמען שהפעלת קודם לכן), נושא הדוא"ל וההודעה, ואז לחץ על כפתור "שלח". זה אמור להראות הנחת הצלחה כדי לומר שהמייל הצליח.
ובתיבת הדואר הנכנס של כתובת הנמען, אתה אמור לקבל גם מייל, בדיוק כמוני:
עטיפת Up
שליחת מיילים נשארת שימושית מאוד במקרים כמו איפוס סיסמה, קבלת פנים של משתמש לאפליקציה שלך, אישור הזמנה וכו', ובמאמר זה למדנו כמה קל לשלוח מיילים באפליקציית Node.js באמצעות Mailgun . אנו רואים כמה קל לעבוד עם Mailgun וכמה זה ידידותי ומהיר ליצור חשבון כדי להתחיל.
בפעם הבאה שתמצא את עצמך זקוק לבניית תשתית אימייל עבור הפרויקט שלך, אל תהסס לבדוק את הכלים לשליחת דואר כמו Mailgun. זקוק לעזרה בשימוש בכלי, אל תהסס לפנות אלי, או לכל אחד בקהילת המפתחים, אני בטוח שהם ישמחו לעזור.
משאבים נוספים
- הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
- Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
- מקור: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- יכול
- לְקַבֵּל
- מקבל
- גישה
- נגיש
- פי
- חֶשְׁבּוֹן
- למעשה
- הוסיף
- כתובת
- לאחר
- קדימה
- ערני
- תעשיות
- ו
- אחר
- לענות
- כל אחד
- API
- מפתחות API
- האפליקציה
- בקשה
- יישומים
- סביב
- מאמר
- שהוקצה
- המכונית
- אקסיו
- בחזרה
- קצה אחורי
- רקע
- לחבוט
- להיות
- להיות
- להלן
- מוטב
- קצת
- לחסום
- גוּף
- גבול
- אריזה מקורית
- דפדפן
- לִבנוֹת
- בִּניָן
- נבנה
- עסקים
- לַחְצָן
- שיחה
- נקרא
- יכול לקבל
- מקרים
- היאבקות
- מרכז
- שינוי
- אופי
- זול
- לבדוק
- קוד
- תקשורת
- קהילה
- תְצוּרָה
- לְחַבֵּר
- תוכן
- להמיר
- לִיצוֹר
- נוצר
- יוצר
- יוצרים
- CSS
- לוח מחוונים
- נתונים
- יְוֹם
- בְּרִירַת מֶחדָל
- מוגדר
- מגדיר
- הגדרה
- מפתח
- צעצועי התפתחות
- DID
- תחום
- כל אחד
- מוקדם יותר
- אפקטיבי
- יעיל
- אלקטרונית
- אמייל
- מיילים
- מאפשר
- זן
- נכנס
- נכנס
- סביבה
- שגיאה
- חיוני
- למעשה
- וכו '
- אירוע
- ניסיון
- אקספרס
- חיצוני
- לְהַקֵל
- מהר
- שדה
- שדות
- שלח
- קבצים
- למלא
- ראשון
- להתמקד
- הבא
- טופס
- צורות
- חופשי
- החל מ-
- ממשק
- פונקציה
- לקבל
- מקבל
- gif
- Git
- נותן
- Go
- גדול
- מאוד
- מדריך
- לטפל
- ידות על
- ראש
- לעזור
- מכה
- מחזיק
- לרחף
- איך
- איך
- HTML
- HTTPS
- ICON
- אידאל
- הפעלה
- יושם
- לייבא
- לשפר
- in
- כלול
- כולל
- תשתית
- בהתחלה
- קלט
- להתקין
- מותקן
- IT
- JavaScript
- ג'ון
- ג 'ון DOE
- שמור
- מפתח
- מפתחות
- בקנה מידה גדול
- אחרון
- לִלמוֹד
- למד
- למידה
- LG
- סִפְרִיָה
- קשר
- טוען
- נראה
- נראה כמו
- נראה
- עשוי
- ראשי
- לעשות
- עשייה
- ניהול
- בינוני
- הודעה
- שיטה
- נע
- שם
- NAV
- מנווט
- צורך
- חדש
- צומת
- Node.js
- הודעות
- אובייקט
- מטרה
- ONE
- אפשרות
- להזמין
- אורגני
- אַחֶרֶת
- סקירה
- חבילה
- חבילות
- פרמטר
- עבר
- סיסמה
- נתיב
- ביצועים
- אפלטון
- מודיעין אפלטון
- אפלטון נתונים
- לְשַׂחֵק
- אנא
- נקודה
- מעשי
- למנוע
- תהליך
- מוצרים
- פּרוֹיֶקט
- נכסים
- רכוש
- מוּגָן
- לספק
- פרוקסי
- מטרה
- שאלות
- מהיר
- RE
- לְהַגִיעַ
- להגיב
- עולם אמיתי
- לקבל
- קבלה
- שְׂרִידִים
- מאגר
- לבקש
- בקשות
- נדרש
- תגובה
- לַחֲזוֹר
- טַבַּעַת
- שורש
- מסלול
- הפעלה
- ריצה
- ארגז חול
- שמור
- אומר
- שְׁנִיָה
- שניות
- סעיף
- שליחה
- רגיש
- לשרת
- שרות
- סט
- הגדרות
- Shadow
- צריך
- לְהַצִיג
- הראה
- צד
- פָּשׁוּט
- since
- So
- מוצק
- כמה
- משהו
- לְסוֹבֵב
- Stackabuse
- תקנים
- התחלה
- החל
- מדינה
- מצב
- שלב
- עצור
- נושא
- כְּנִיעָה
- להגיש
- הצלחה
- מוצלח
- בהצלחה
- כזה
- SVG
- לוקח
- יעד
- נבחרת
- אומר
- תבנית
- מסוף
- מבחן
- השמיים
- ארגז חול
- שֶׁלָהֶם
- בו
- דבר
- שְׁלוֹשָׁה
- דרך
- זמן
- ל
- הרמת כוסית
- היום
- גַם
- כלי
- כלים
- מַעֲבָר
- לְהַעֲבִיר
- להפעיל
- נָכוֹן
- הדרכה
- תחת
- עדכון
- מְעוּדכָּן
- us
- להשתמש
- משתמש
- ידידותי למשתמש
- משתמשים
- אימות
- ערך
- שונים
- Ve
- לצפיה
- אינטרנט
- בברכה
- אשר
- בזמן
- לבן
- יצטרך
- לְלֹא
- תיק עבודות
- עובד
- היה
- XML
- אתה
- עצמך
- זפירנט