SendGrid API के साथ ईमेल न्यूज़लेटर भेजें: पूर्ण चरण-दर-चरण ट्यूटोरियल

वर्षों से, क्विंसी लार्सन ने freeCodeCamp के Mail for Good प्लेटफॉर्म के माध्यम से एक साप्ताहिक ईमेल न्यूज़लेटर भेजा, जो Amazon SES द्वारा संचालित है।

हाल ही में उन्होंने इस प्रक्रिया को SendGrid पर स्थानांतरित कर दिया। इस लेख में, मैं आपको दिखाऊंगा कि मैंने इसे पूरा करने के लिए एक टूल कैसे बनाया।

SendGrid अकाउंट कैसे सेट अप करें

पहला कदम SendGrid के लिए पंजीकरण करना और अपना अकाउंट सेट अप करना है। इस ट्यूटोरियल के उद्देश्यों के लिए, फ्री टियर पर्याप्त होना चाहिए।

जैसे-जैसे आप अपने एप्लिकेशन को स्केल करते हैं, आपको प्लेटफॉर्म के माध्यम से अपनी उपलब्ध ईमेल सीमाओं को बढ़ाने की आवश्यकता हो सकती है।

SendGrid पर डेडिकेटेड IP एड्रेस कैसे सेट अप करें

डिफ़ॉल्ट रूप से, SendGrid ईमेल भेजने के लिए शेयर्ड IP पतों का उपयोग करता है। यह छोटे पैमाने के ईमेल एप्लिकेशन के लिए स्वीकार्य हो सकता है, लेकिन जैसे-जैसे आप अपनी सेंड दरें बढ़ाते हैं, आपको एक डेडिकेटेड IP एड्रेस सेट अप करने की आवश्यकता होगी।

यह एक अच्छा विचार है, क्योंकि आपकी "सेंडर रेपुटेशन" (वह मीट्रिक जिसका उपयोग SendGrid ईमेल सेवा प्रदाताओं के साथ आपकी स्थिति का आकलन करने के लिए करता है) उसी IP को शेयर करने वाले अन्य उपयोगकर्ताओं के कार्यों से नकारात्मक रूप से प्रभावित नहीं होगी।

अपना स्वयं का डेडिकेटेड IP सेट अप करने के लिए, साइड नेविगेशन मेनू से "Settings" विकल्प चुनें, फिर "IP Addresses" चुनें। बस एक त्वरित नोट: यह विकल्प फ्री टियर पर अनुपलब्ध है।

आपके पेड प्लान के आधार पर, आपके पास पहले से ही एक डेडिकेटेड IP एड्रेस सेट अप हो सकता है। यदि आपके पास एक नहीं है, या यदि आप और जोड़ना चुनते हैं, तो आप एक नया IP कॉन्फ़िगर करने के लिए "Add an IP address" बटन का चयन कर सकते हैं।

SendGrid में ईमेल सेंडर को कैसे अधिकृत करें

नोट: यदि आप अपने ईमेल के लिए कस्टम डोमेन का उपयोग कर रहे हैं तो आप इस खंड को छोड़ सकते हैं।

अपने व्यक्तिगत ईमेल पते से ईमेल भेजने के लिए, आपको यह सत्यापित करना होगा कि ईमेल पता आपका है।

बाएं मेनू में, "Settings" चुनें, फिर "Sender Authentication"। "Verify a Single Sender" चुनें ताकि आप अपने एक ईमेल पते को जोड़ने के प्रवाह से गुजर सकें।

SendGrid में अपने कस्टम डोमेन को कैसे प्रमाणित करें

नोट: यदि आप अपने ईमेल के लिए कस्टम डोमेन का उपयोग नहीं कर रहे हैं तो आप इस खंड को छोड़ सकते हैं।

अपने कस्टम मेल डोमेन से ईमेल भेजने के लिए, आपको उस डोमेन को SendGrid के साथ प्रमाणित करना होगा। इस स्क्रीन पर पहुंचने के लिए, फिर से Settings मेनू चुनें, फिर "Sender Authentication" चुनें।

आपको "Domain Authentication" के विकल्प के साथ एक स्क्रीन दिखाई देनी चाहिए। "Authenticate Your Domain" विकल्प चुनें और SendGrid आपके DNS रिकॉर्ड को कॉन्फ़िगर करने की प्रक्रिया के माध्यम से आपका मार्गदर्शन करेगा (आपके DNS प्रदाता के आधार पर विशिष्ट निर्देशों के साथ)।

SendGrid में रिवर्स DNS कैसे सेट अप करें

नोट: यदि आप अपने ईमेल के लिए कस्टम डोमेन का उपयोग नहीं कर रहे हैं तो आप इस खंड को छोड़ सकते हैं।

रिवर्स DNS (डोमेन नेम सिस्टम) का उपयोग ईमेल प्रदाताओं द्वारा किसी दिए गए IP पते के मालिक को देखने के लिए किया जाता है। इसे सेट अप करने से ईमेल प्रदाताओं को यह सत्यापित करने की अनुमति मिलेगी कि आप जिस IP पते से ईमेल भेजते हैं वह आपके कस्टम डोमेन से जुड़ा हुआ है।

उपरोक्त सेंडर ऑथेंटिकेशन स्क्रीन में ही, आपको एक "Reverse DNS" अनुभाग दिखाई देगा। आपके खाते पर प्रत्येक डेडिकेटेड IP के लिए रिवर्स DNS कॉन्फ़िगर करने का विकल्प होगा - डोमेन ऑथेंटिकेशन की तरह, SendGrid का प्लेटफॉर्म इसे सेट अप करने के माध्यम से आपका मार्गदर्शन करेगा।

SendGrid में ईमेल प्रमाणीकरण कैसे सेट अप करें

नोट: यदि आप अपने ईमेल के लिए कस्टम डोमेन का उपयोग नहीं कर रहे हैं तो आप इस खंड को छोड़ सकते हैं।

प्रमुख ईमेल प्रदाता (जैसे Gmail, Yahoo, और Outlook) ईमेल के प्रेषक को प्रमाणित करने के लिए कई विधियों का उपयोग करते हैं: SPF, DKIM, और DMARC।

• SPF (सेंडर पॉलिसी फ्रेमवर्क) मान्य करता है कि आपके डोमेन से मेल भेजने वाला IP पता ऐसा करने के लिए अधिकृत है।
• DKIM (डोमेनकीज आइडेंटिफाइड मेल) यह प्रमाणित करने के लिए सार्वजनिक कुंजी स्ट्रिंग्स का उपयोग करता है कि एक ईमेल from पता सटीक है और स्पूफ/नकली नहीं है।
• DMARC (डोमेन-बेस्ड मैसेज ऑथेंटिकेशन, रिपोर्टिंग, एंड कंफॉरमेंस) निर्देशों का एक सेट है जो ईमेल प्रदाताओं को बताता है कि जब कोई ईमेल SPF या DKIM सत्यापन में विफल होता है तो कैसे प्रतिक्रिया दें।

SendGrid का प्रमाणीकरण प्रवाह डोमेन प्रमाणीकरण प्रक्रिया के हिस्से के रूप में SPF और DKIM सेट अप करने के माध्यम से आपका मार्गदर्शन करेगा, लेकिन आपको अपना DMARC मैन्युअल रूप से कॉन्फ़िगर करना होगा।

अपने DNS होस्टिंग प्रदाता पर जाएं और DNS प्रबंधन सेटिंग्स तक पहुंचें। वहां से, _dmarc.yourdomain.com नाम के साथ एक नया TXT रिकॉर्ड जोड़ें (yourdomain.com को अपने कस्टम डोमेन से बदलें)।

ध्यान दें कि कुछ प्रदाता, जैसे GoDaddy, स्वचालित रूप से आपके डोमेन को रिकॉर्ड में जोड़ देंगे - इस मामले में, नाम _dmarc होना चाहिए।

इस रिकॉर्ड का मान निम्न संरचना के समान होना चाहिए:

"v=DMARC1; p=none; pct=100; rua=mailto:dmarc@yourdomain.com"

• v=DMARC उपयोग करने के लिए DMARC नियमों के संस्करण को इंगित करता है (वर्तमान में केवल संस्करण 1 उपलब्ध है)।
• p=none वह कार्रवाई इंगित करता है जो एक ईमेल प्रदाता को तब करनी चाहिए जब कोई ईमेल DKIM या SPF में विफल होता है। इस सेटिंग को none से शुरू करना चाहिए, ताकि आपके ईमेल की डिलीवरी प्रभावित न हो। एक बार जब आप पुष्टि कर लें कि आपका DKIM और SPF सही ढंग से कॉन्फ़िगर किया गया है, तो आप इस मान को quarantine में अपडेट कर सकते हैं ताकि प्रदाता विफल ईमेल को स्पैम फ़ोल्डर में स्वचालित रूप से रूट कर सकें, या reject ताकि प्रदाता विफल ईमेल को अस्वीकार/बाउंस कर दें।
• pct=100 विफल ईमेल का प्रतिशत इंगित करता है जिस पर कार्रवाई लागू की जानी चाहिए।
• rua=mailto:dmarc@yourdomain.com वह ईमेल पता है जिस पर समग्र रिपोर्ट भेजी जाती हैं। इन रिपोर्ट्स में आपके IPs से सभी ईमेल के बारे में जानकारी होती है जो किसी दिए गए प्रदाता द्वारा प्राप्त किए गए थे। dmarc@yourdomain.com को उस ईमेल पते से बदलें जिस पर आप उन रिपोर्ट्स को प्राप्त करना चाहते हैं।

SendGrid में डायनामिक टेम्पलेट कैसे बनाएं

आज हम जो टूल बना रहे हैं, वह ईमेल के विषय और बॉडी टेक्स्ट को सेट करने के लिए SendGrid की डायनामिक टेम्पलेट सुविधा का उपयोग करता है। इसे सेट अप करने के लिए, साइड नेविगेशन मेनू में "Email API" विकल्प चुनें, फिर "Dynamic Templates" चुनें।

आपको अपना पहला डायनामिक टेम्पलेट बनाने के लिए एक संकेत के साथ एक स्क्रीन दिखाई देगी। "Create a Dynamic Template" विकल्प चुनें।

अपने नए टेम्पलेट को एक नाम दें: "freeCodeCamp SendGrid Tutorial"। SendGrid इस टेम्पलेट को उपलब्ध टेम्पलेट्स की सूची में जोड़ देगा। Template ID देखने के लिए टेम्पलेट का चयन करें (इसे नोट कर लें, क्योंकि हमें बाद में टूल के लिए इसकी आवश्यकता होगी) और "Add Version" बटन पर क्लिक करें।

दिखाई देने वाली स्क्रीन पर "Blank Template" चुनें, फिर "Code Editor" चुनें। अब आपको एडिटर व्यू दिखाई देना चाहिए। SendGrid का एडिटर ईमेल बॉडी बनाने के लिए HTML का उपयोग करता है - हालांकि, जब हम अपना टूल बनाएंगे तो हम प्लेन टेक्स्ट संस्करण भेजेंगे।

अभी के लिए, एडिटर की सामग्री को निम्न कोड से बदलें:

<p>This is a test email used with the freeCodeCamp SendGrid tutorial</p> <p>Unsubscribe: {{{unsubscribeId}}}</p>

आप देखेंगे कि हमने {{{unsubscribeId}}} जोड़ा है। SendGrid का टेम्पलेट मानों को गतिशील रूप से बदलने के लिए हैंडलबार्स का उपयोग करता है - हम टूल बनाते समय इस सुविधा का लाभ उठाएंगे।

अब ऊपरी बाएं से सेटिंग्स विकल्प चुनें - आप वैकल्पिक रूप से अपने टेम्पलेट संस्करण को एक नाम दे सकते हैं, लेकिन "Subject" फ़ील्ड वह है जिसे हम संशोधित करना चाहते हैं। इस मान को {{{subject}}} पर सेट करें ताकि हमारे टूल से विषय मान गतिशील रूप से लोड हो सके।

डायनामिक टेम्पलेट का परीक्षण करने के लिए, शीर्ष मेनू से "Test Data" विकल्प चुनें। एडिटर में इस JSON डेटा को डालें:

{
  "unsubscribeId": "1",
  "subject": "Testing emails!"
}

अब आपको स्क्रीन के दाईं ओर पूर्वावलोकन में टेम्पलेट में इन मूल्यों को प्रतिबिंबित करते हुए देखना चाहिए। परिवर्तनों को सहेजने के लिए Save बटन दबाना याद रखें!

SendGrid में API Key कैसे जनरेट करें

हमारे टूल के उपयोग के लिए SendGrid अकाउंट को कॉन्फ़िगर करने का अंतिम चरण API key जनरेट करना है।

मुख्य SendGrid पेज पर लौटने के लिए ऊपरी बाएं में बैक एरो पर क्लिक करें। फिर "Settings" और "API keys" चुनें। एक नई key जनरेट करने के लिए "Create API Key" चुनें। आप वैकल्पिक रूप से अपनी key को "Full Access" प्रदान कर सकते हैं, लेकिन इस ट्यूटोरियल के उद्देश्य के लिए आपको केवल "Mail Send" एक्सेस की आवश्यकता होगी।

अपनी key को एक वर्णनात्मक नाम देना सुनिश्चित करें ताकि यदि आप इस स्क्रीन को फिर से एक्सेस करते हैं तो आप इसका उद्देश्य याद रख सकें। एक बार जब आप अपने परमिशन कॉन्फ़िगर कर लेते हैं, तो key जनरेट करने के लिए "Create and View" चुनें - इसे कहीं सुरक्षित सहेजें क्योंकि आप इसे फिर से नहीं देख पाएंगे।

ईमेल टूल कैसे बनाएं

अब वास्तव में कुछ ईमेल भेजने के लिए कोड लिखने का समय है। आप हमारे लाइव एप्लिकेशन के कोड को देख सकते हैं, लेकिन इस ट्यूटोरियल के उद्देश्यों के लिए हम SendGrid API का उपयोग करने पर मुख्य रूप से ध्यान केंद्रित करने के लिए थोड़ा कम संस्करण बना रहे हैं।

कस्टम ईमेल कैंपेन स्क्रिप्ट के लिए आवश्यक सॉफ्टवेयर

इस परियोजना पर काम करने के लिए आपको निम्नलिखित टूल इंस्टॉल करने की आवश्यकता होगी:

• Node.js - LTS संस्करण अनुशंसित
• एक IDE, जैसे VSCode या Atom

आप वैकल्पिक रूप से संस्करण नियंत्रण के लिए git भी चाह सकते हैं।

हमारा लाइव टूल MongoDB Atlas क्लस्टर का उपयोग करता है, लेकिन हमारा ट्यूटोरियल उदाहरण नहीं करेगा। यदि आप MongoDB से परिचित नहीं हैं, तो freeCodeCamp के पाठ्यक्रम में MongoDB को सेट अप और उपयोग करने पर एक उत्कृष्ट खंड शामिल है।

प्रोजेक्ट कैसे इनिशियलाइज़ करें

इस परियोजना पर काम करने के लिए एक डायरेक्टरी (फ़ोल्डर) बनाएं। फिर उस फ़ोल्डर को अपने पसंद के एडिटर और टर्मिनल के साथ खोलें।

शुरू करने के लिए, हमें इसे Node प्रोजेक्ट के रूप में सेट अप करने की आवश्यकता है। ऐसा करने का सबसे तेज़ तरीका आपके टर्मिनल में npm init है। यह आपको एक package.json बनाने के माध्यम से ले जाएगा जो Node एप्लिकेशन की मुख्य फ़ाइल है।

डिफ़ॉल्ट मान हमारे एप्लिकेशन के लिए ठीक काम करेंगे, लेकिन हम scripts अनुभाग को संशोधित करना चाहेंगे:

"scripts": {
  "build": "tsc",
  "send": "node ./prod/send.js"
},

build स्क्रिप्ट का उपयोग हमारे TypeScript को JavaScript में संकलित करने के लिए किया जाएगा, और send स्क्रिप्ट हमारे एप्लिकेशन को चलाएगी।

इसके बाद हम TypeScript इंस्टॉल और सेट अप करेंगे। यदि आप TypeScript से परिचित नहीं हैं, तो यह अनिवार्य रूप से मजबूत प्रकार परिभाषाओं और कंपाइल-टाइम त्रुटि जांच के साथ JavaScript का एक सुपरसेट है।

अपनी परियोजना पर TypeScript इंस्टॉल करने के लिए, अपने टर्मिनल में npm install --save-dev typescript चलाएं। (--save-dev फ्लैग इसे डेवलपमेंट डिपेंडेंसी के रूप में सहेजता है - TypeScript रनटाइम पर आवश्यक नहीं है इसलिए इसे प्रोडक्शन वातावरण में साफ किया जा सकता है)।

TypeScript को अपने स्वयं के कॉन्फ़िगरेशन फ़ाइल की आवश्यकता होती है ताकि यह नियम सेट कर सके कि JavaScript फ़ाइलें उत्पन्न करते समय इसका पालन किया जाना चाहिए। अपनी परियोजना की रूट डायरेक्टरी में tsconfig.json नामक एक फ़ाइल बनाएं और निम्नलिखित डालें:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./prod",
    "rootDir": "./src"
  }
}

संक्षिप्तता के लिए, हम इन कॉन्फ़िगरेशन सेटिंग्स में गोता नहीं लगाएंगे। यदि आप अतिरिक्त जानकारी चाहते हैं, तो TypeScript के पास बहुत गहन दस्तावेज़ीकरण है।

यदि आप संस्करण नियंत्रण के लिए git का उपयोग कर रहे हैं और इसे किसी रिपॉजिटरी (जैसे GitHub) पर अपलोड कर रहे हैं, तो आप अपनी परियोजना की रूट डायरेक्टरी में एक .gitignore फ़ाइल बनाना चाहेंगे। इस फ़ाइल में होना चाहिए:

/node_modules/
.env
/prod/

• /node_modules/ इंस्टॉल किए गए पैकेज को अनदेखा करेगा। संस्करण नियंत्रण के साथ काम करते समय इसे सर्वोत्तम अभ्यास माना जाता है।
• .env हमारे एनवायरनमेंट वेरिएबल्स फ़ाइल को अनदेखा करेगा। यह बहुत महत्वपूर्ण है क्योंकि आप कभी भी अपने रहस्यों को रिपॉजिटरी में कमिट नहीं करना चाहते।
• /prod/ हमारे संकलित JavaScript फ़ाइलों को अनदेखा करेगा। हम इस फ़ोल्डर का उपयोग अपनी ईमेल सूचियों के लिए भी करेंगे, इसलिए उस निजी पहचान योग्य जानकारी को गलती से कमिट करने से बचना महत्वपूर्ण है।

अपनी रूट प्रोजेक्ट डायरेक्टरी में एक .env फ़ाइल बनाएं। हम इस फ़ाइल के माध्यम से निम्नलिखित एनवायरनमेंट वेरिएबल्स लोड करेंगे:

SENDGRID_API_KEY=
SENDGRID_FROM=
SENDGRID_TEMPLATE_ID=
MAIL_SUBJECT=

• SENDGRID_API_KEY पिछले चरणों में आपके द्वारा जनरेट की गई API key होनी चाहिए।
• SENDGRID_FROM आपका ईमेल पता होना चाहिए (यह from फ़ील्ड के लिए उपयोग किया जाने वाला पता है)।
• SENDGRID_TEMPLATE_ID पहले बनाए गए डायनामिक टेम्पलेट के लिए id स्ट्रिंग होना चाहिए।
• MAIL_SUBJECT आपके द्वारा भेजे जाने वाले ईमेल की विषय पंक्ति होगी। अभी के लिए, इसे "fCC Tutorial Email" के रूप में सेट करें।

अंत में, अपनी रूट प्रोजेक्ट डायरेक्टरी में एक src फ़ोल्डर बनाएं, और उस फ़ोल्डर में एक send.ts फ़ाइल बनाएं।

अपनी निर्भरताएं कैसे इंस्टॉल करें

सबसे पहले हमें sendgrid Node.js पैकेज इंस्टॉल करने की आवश्यकता है। यह पैकेज SendGrid API के लिए एक रैपर के रूप में कार्य करता है और ईमेल भेजने के लिए API कॉल करने की हमारी प्रक्रिया को सुव्यवस्थित करेगा। npm install @sendgrid/mail चलाकर इस पैकेज को इंस्टॉल करें।

फिर हमें कुछ डेवलपमेंट डिपेंडेंसी की आवश्यकता है। npm install --save-dev dotenv @types/node चलाएं।

• dotenv हमें .env फ़ाइल से स्थानीय रूप से एनवायरनमेंट वेरिएबल्स लोड करने की अनुमति देगा।
• @types/node Node.js के लिए प्रकार परिभाषाएं प्रदान करता है - TypeScript इन परिभाषाओं पर अंतर्निहित विधियों और कार्यों की संरचना को समझने के लिए निर्भर करता है।

लॉजिक कैसे लिखें

अब हम अपने /src/send.ts फ़ाइल में काम करेंगे - यहीं हम अपने ऐप लॉजिक का बड़ा हिस्सा बना रहे हैं। हम अपने पैकेजों से आवश्यक मानों को आयात करके शुरू करेंगे।

सबसे पहले हम dotenv पैकेज लोड करना चाहते हैं और अपने एनवायरनमेंट वेरिएबल्स को पार्स करना चाहते हैं।

import dotenv from "dotenv";
dotenv.config();

dotenv.config() कॉल हमारी .env फ़ाइल को पढ़ता है और मानों को process.env Node ऑब्जेक्ट में लोड करता है।

अब SendGrid पैकेज से आवश्यक मॉड्यूल आयात करें:

import sgMail, { MailDataRequired } from "@sendgrid/mail";

sgMail प्राथमिक API रैपर है, और MailDataRequired एक प्रकार की परिभाषा है जिसकी हमें आवश्यकता होगी।

अंत में, हमारी फ़ाइलों को संभालने के लिए कुछ अंतर्निहित Node सुविधाओं को आयात करें:

import path from "path";
import { createWriteStream, readFile } from "fs";

• path का उपयोग सापेक्ष पथों के साथ हमारी ईमेल सूची फ़ाइलों का पता लगाने के लिए किया जाएगा
• fs उन फ़ाइलों को पढ़ने और लिखने के लिए उपयोग किया जाएगा

लॉजिक बनाना शुरू करने का समय! हमारा एप्लिकेशन .env फ़ाइल में सेट किए जाने वाले कुछ आवश्यक मूल्यों पर निर्भर करता है, इसलिए हमें उन वेरिएबल्स को मान्य करके शुरू करने की आवश्यकता है जो सही ढंग से सेट हैं। यदि कोई गायब है, तो हम अपने एप्लिकेशन को जल्दी से बाहर निकलना चाहते हैं ताकि ईमेल भेजते समय त्रुटियों से बचा जा सके।

// यहां हम एक वैध API key की जांच करते हैं
const apiKey = process.env.SENDGRID_API_KEY;
if (!apiKey) {
  console.error("Missing SendGrid Key");
  process.exit(1);
}

// यहां हम एक वैध from एड्रेस की जांच करते हैं
const fromAddress = process.env.SENDGRID_FROM;
if (!fromAddress) {
  console.error("Missing sender email address!");
  process.exit(1);
}

// यहां हम एक डायनामिक टेम्पलेट ID की जांच करते हैं
const sgTemplate = process.env.SENDGRID_TEMPLATE_ID;
if (!sgTemplate) {
  console.error("Missing SendGrid Template ID");
  process.exit(1);
}

// यहां हम मेल विषय की जांच करते हैं, लेकिन अगर यह गायब है
// तो हमें बाहर निकलने की आवश्यकता नहीं है। इसके बजाय हम एक फॉलबैक मान उपयोग करते हैं।
const subjectValue = process.env.MAIL_SUBJECT || "Fallback value - check your env!";

आप प्रत्येक स्थिति जांच में जो process.exit(1) कॉल देखते हैं, वह Node को प्रक्रिया (हमारा एप्लिकेशन) को 1 के एक्जिट कोड के साथ समाप्त करने के लिए कहता है। यह इंगित करता है कि हमारा एप्लिकेशन इन जांचों में से एक के विफल होने के कारण क्रैश हो गया।

SendGrid को API key सेट करने की आवश्यकता है। अपने एनवायरनमेंट वेरिएबल लॉजिक के नीचे, key सेट करने के लिए फ़ंक्शन कॉल जोड़ें।

// यहां हम SendGrid API key सेट करते हैं
sgMail.setApiKey(apiKey);

आगे बढ़ने से पहले, अपने टर्मिनल में npm run build चलाएं - यह हमारे संकलित JavaScript को शामिल करने वाला एक prod फ़ोल्डर बनाएगा। अब आपको निम्न फ़ाइल संरचना दिखाई देनी चाहिए:

इस बिंदु पर, यदि आप git का उपयोग कर रहे हैं तो आप बहुत सुनिश्चित होना चाहते हैं कि prod फ़ोल्डर आपके रिपॉजिटरी में कमिट नहीं होगा।

prod फ़ोल्डर के भीतर, एक validEmails.csv फ़ाइल बनाएं। हमारा ऐप ईमेल सूची पढ़ने के लिए इस फ़ाइल का उपयोग करेगा। फ़ाइल को निम्न सामग्री के साथ इनिशियलाइज़ करें (अपने वास्तविक ईमेल पते से your@email.com को बदलें):

email,unsubscribeId
your@email.com,1
iama@fake.email,2

अब हम इसे ईमेल सूची में पार्स करने के लिए कोड लिख सकते हैं! अपने src/send.ts फ़ाइल में, यह कोड जोड़ें:

// यहां हम वैध ईमेल फ़ाइल के लिए अपना फ़ाइल पथ जोड़ते हैं
const filePath = path.join(__dirname + "/../validEmails.csv");
// यहीं से हम फ़ाइल पढ़ना शुरू करते हैं!
readFile(filePath, "utf8", (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(data)
});

अब यदि आप npm run build और npm run send चलाते हैं तो आपको टर्मिनल में हमारे validEmail.csv फ़ाइल की सामग्री दिखाई देनी चाहिए। यदि आप चाहें, तो आप इस बिंदु तक की हमारी वर्तमान प्रगति देख सकते हैं।

बहुत बढ़िया! अब हमें उस स्ट्रिंग को ऑब्जेक्ट्स की एक सरणी में पार्स करने की आवश्यकता है ताकि हम इसके माध्यम से पुनरावृति कर सकें और अपने ईमेल संदेश बना सकें। हमारे कॉलबैक फ़ंक्शन को अपडेट करें:

// यहीं से हम फ़ाइल पढ़ना शुरू करते हैं!
readFile(filePath, "utf8", (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  // यहां हम डेटा को ऑब्जेक्ट सरणी में पार्स करते हैं
  const emailList = data
    .split("\n")
    .slice(1)
    .map((el) => {
      const [email, unsubscribeId] = el.split(",");
      return { email, unsubscribeId };
    });
});

• .split("\n") स्ट्रिंग को लाइन ब्रेक द्वारा विभाजित करता है। नोट: यदि आप Windows पर हैं, तो आपको अपने validEmails.csv के लिए एंड-ऑफ-लाइन सेटिंग को CRLF से LF में बदलने की आवश्यकता हो सकती है (Windows अतिरिक्त लाइनब्रेक वर्ण डालता है जो हमारे डेटा हैंडलिंग को प्रभावित करेगा)
• .slice(1) उस सरणी के पहले तत्व को हटा देता है (हमारी email,unsubscribeId लाइन)।
• हमारा map फ़ंक्शन प्रत्येक email,unsubscribeId स्ट्रिंग को एक {email, unsubscribeId} ऑब्जेक्ट में परिवर्तित करेगा।

इस पार्सिंग फ़ंक्शन का अंतिम परिणाम email और unsubscribeId प्रॉपर्टीज के साथ ऑब्जेक्ट्स की एक सरणी होगी - एक स्ट्रिंग की तुलना में काम करने के लिए बहुत आसान।

अब कुछ ईमेल भेजने का समय है। अपने पार्सिंग फ़ंक्शन के नीचे (लेकिन अभी भी readFile कॉलबैक के भीतर) हमारे पुनरावृत्ति विधि के लिए संरचना जोड़ें। क्योंकि हम सरणी में प्रत्येक मान तक पहुंचना चाहते हैं, हम .forEach दृष्टिकोण का उपयोग करेंगे।

// यहां हम emailList सरणी के माध्यम से पुनरावृति करते हैं
emailList.forEach((user) => {});

.forEach के लिए कॉलबैक के भीतर, हम उस संदेश ऑब्जेक्ट का निर्माण कर सकते हैं जिसकी SendGrid API अपेक्षा करता है।

// यहां हम emailList सरणी के माध्यम से पुनरावृति करते हैं
emailList.forEach((user) => {
  // यह वह संदेश ऑब्जेक्ट है जिसकी SendGrid को आवश्यकता है
  const message: MailDataRequired = {
    to: user.email,
    from: fromAddress,
    subject: subjectValue,
    text: "This goes away!",
    templateId: sgTemplate,
    dynamicTemplateData: {
      subject: subjectValue,
      unsubscribeId: user.unsubscribeId
    }
  }
});

आगे बढ़ने से पहले, आइए इस संदेश ऑब्जेक्ट को अधिक बारीकी से देखें। हमने पहले जो MailDataRequired आयात किया था, उसका उपयोग यहां प्रकार परिभाषा के रूप में किया जाता है, इसलिए TypeScript हमें सचेत कर सकता है यदि हम एक आवश्यक प्रॉपर्टी को भूल जाते हैं। शुक्र है, हमारे पास सभी आवश्यक प्रॉपर्टीज हैं। लेकिन उनका क्या मतलब है?

• to: वह ईमेल पता जिस पर संदेश भेजा जाना है। यह हमारे validEmails.csv फ़ाइल की प्रत्येक पंक्ति से email होगा
• from: वह ईमेल पता जिससे संदेश भेजा जाना है। यह पहले हमारे .env में सेट किया गया है (यह आपका ईमेल पता होना चाहिए)।
• subject: यह फ़ील्ड आवश्यक नहीं है, लेकिन हमें एक फॉलबैक मान देता है यदि डायनामिक टेम्पलेट हमारे विषय को सही ढंग से पार्स नहीं करता है।
• text: यह टेक्स्ट मान टेम्पलेट द्वारा ओवरराइट हो जाता है। हालांकि, इसका उपयोग करना अभी भी महत्वपूर्ण है। SendGrid ईमेल को plaintext या html के रूप में भेज सकता है - html प्रॉपर्टी के बजाय text प्रॉपर्टी का उपयोग करके, हम सुनिश्चित करते हैं कि हमारा टेम्पलेट plaintext के रूप में भेजा जाता है। ईमेल प्रदाता HTML संदेशों को स्पैम के रूप में फ़्लैग करने की अधिक संभावना रखते हैं, इसलिए यह हमारी डिलीवरी दर को बढ़ाने में मदद करता है।
• templateId: यह वह ID है जिस डायनामिक टेम्पलेट का उपयोग SendGrid को ईमेल में करना चाहिए।
• dynamicTemplateData: ये वे मान हैं जो हमारे हैंडलबार्स स्ट्रिंग्स से मेल खाते हैं जिन्हें हमने पहले डायनामिक टेम्पलेट में सेट किया था।

बहुत बढ़िया! हमारा अगला कदम इस निर्मित संदेश को लेना और इसे भेजना है। संदेश ऑब्जेक्ट के नीचे (लेकिन अभी भी .forEach कॉलबैक के भीतर), आइए अपना सेंड कॉल जोड़ें:

// यहां हम वह संदेश भेजते हैं जिसे हमने अभी बनाया है!
sgMail.send(message);

यह संदेश को हमारे validEmails.csv में प्रत्येक ईमेल पर भेज देगा। दुर्भाग्य से, हमारा कोड चुपचाप चलेगा और हमें पता नहीं चलेगा कि प्रत्येक सेंड सफल रहा या नहीं। आइए कुछ त्रुटि हैंडलिंग जोड़ें।

.send() कॉल एक Promise लौटाता है, इसलिए हम रिटर्न को संभालने के लिए .then().catch() का उपयोग कर सकते हैं।

// यहां हम वह संदेश भेजते हैं जिसे हमने अभी बनाया है!
sgMail.send(message)
  .then(() => {
    // यहां हम सफल सेंड अनुरोधों को लॉग करते हैं
    console.info(`Message send success: ${user.email}`)
  })
  .catch((err) => {
    // यहां हम त्रुटिपूर्ण सेंड अनुरोधों को लॉग करते हैं
    console.error(err);
    console.error(`Message send failed: ${user.email}`)
  });

अब यदि आप npm run build और npm run send चलाते हैं तो आपको अपने इनबॉक्स में एक सुंदर ईमेल देखना चाहिए!

इस बिंदु पर, आपके पास अब एक कार्यात्मक ईमेल भेजने वाला एप्लिकेशन है। बधाई हो! यदि आप चाहें तो इस बिंदु तक हमारी प्रगति देख सकते हैं।

पढ़ते रहें यह देखने के लिए कि SendGrid में बाउंस ईमेल और सेंड विफलताओं के लिए अतिरिक्त लॉजिक कैसे संभालें, जिस पर हम आगे चर्चा करेंगे।

SendGrid में बाउंस ईमेल कैसे संभालें

आपने देखा होगा कि iama@fake.email बहुत अधिक वास्तविक ईमेल पता नहीं है। SendGrid आपकी पिछले दिन की गतिविधि के लिए दैनिक बाउंस रिपोर्ट जनरेट करेगा।

प्रत्येक बाउंस ईमेल आपकी SendGrid प्रतिष्ठा को नुकसान पहुंचाता है और ईमेल प्रदाताओं को आपके मेल को स्पैम के रूप में चिह्नित करने का कारण बन सकता है। इसलिए, हमें पहले से बाउंस होने वाले पतों पर भेजने से रोकने के लिए लॉजिक जोड़ने की आवश्यकता है।

अपने prod फ़ोल्डर में एक bouncedEmails.csv फ़ाइल बनाकर शुरू करें (यह आपके validEmails.csv के बगल में होना चाहिए)। हमें यहां unsubscribeId मानों की आवश्यकता नहीं है, इसलिए इसे इसके साथ इनिशियलाइज़ करें:

email
iama@fake.email

अब वापस हमारी send.ts फ़ाइल पर। लाइन 38 पर, हमारे मौजूदा filePath घोषणा के ठीक नीचे, नए bouncedEmails.csv फ़ाइल के लिए पथ कॉन्फ़िगर करें।

// यहां हम CSV फ़ाइलों के लिए अपने फ़ाइल पथ जोड़ते हैं
const filePath = path.join(__dirname + "/validEmails.csv");
const bouncePath = path.join(__dirname + "/bouncedEmails.csv");

बहुत बढ़िया! अब हमें उस फ़ाइल को पढ़ने की आवश्यकता है। इन फ़ाइल पथ घोषणाओं के तुरंत नीचे (हमारे मौजूदा readFile कॉल से पहले), बाउंस फ़ाइलों को पढ़ने के लिए लॉजिक जोड़ें।

// बाउंस सूची के माध्यम से पढ़ें, सरणी में पार्स करें
readFile(bouncePath, "utf8", (err, data) => {
  if (err) {
    console.error(err);
    process.exit(1);
  }
  bounceList = data.split("\n").slice(1);

readFile एसिंक्रोनस है - इसलिए हमें इस कॉलबैक फ़ंक्शन को हमारे मौजूदा सभी सेंड लॉजिक के चारों ओर लपेटना होगा। सुनिश्चित करें कि इस कॉलबैक के लिए आपका समापन }) हमारी फ़ाइल के बहुत अंत में ले जाया गया है।

हम bouncedEmails.csv फ़ाइल पढ़ते हैं, इसे नई लाइन पर विभाजित करते हैं (याद रखें कि आपको यह सुनिश्चित करने की आवश्यकता होगी कि आपके लाइन एंडिंग्स LF हैं), और email लाइन को हटा देते हैं। अंत में, हम अपने मौजूदा सेंड लॉजिक के साथ जारी रखते हैं।

हमारे सेंड लॉजिक पर वापस। हमारे .forEach फ़ंक्शन के भीतर, ब्लॉक किए गए ईमेल को छोड़ने के लिए लॉजिक जोड़ें (हम इसे संदेश ऑब्जेक्ट बनाने से पहले जोड़ेंगे ताकि अनावश्यक वेरिएबल्स बनाने से बचा जा सके)।

// यहां हम emailList सरणी के माध्यम से पुनरावृति करते हैं
emailList.forEach((user) => {
  // यहां हम जांचते हैं कि क्या ईमेल बाउंस हुआ है
  if (bounceList.length && bounceList.includes(user.email)) {
    console.info(`Message send skipped: ${user.email}`);
    return;
  }

एक प्रारंभिक return स्टेटमेंट का लाभ उठाकर, हम उस विशेष .forEach पुनरावृत्ति को समाप्त करते हैं जब bounceList में वह ईमेल शामिल होता है। यह हमें उन ईमेल पतों पर भेजने का प्रयास करने से रोकता है जो पहले बाउंस हो चुके हैं। अब यदि आप npm run build और npm run start चलाते हैं, तो आपको अपने टर्मिनल में यह आउटपुट देखना चाहिए:

इस बिंदु तक हमारी प्रगति देखें।

SendGrid में विफल ईमेल कैसे कैप्चर करें

वर्तमान में हमारा एप्लिकेशन एक त्रुटि लॉग करेगा यदि कोई ईमेल भेजने में विफल रहता है। यह छोटे उपयोग के मामलों के लिए काम कर सकता है, लेकिन जैसे-जैसे आप अपने एप्लिकेशन को स्केल करते हैं, आप उन विफलताओं की पहचान करना और फिर से भेजने का प्रयास करना तेजी से मुश्किल पाएंगे।

लेकिन इसके बजाय, हम अपने एप्लिकेशन को उन ईमेल को एक नई फ़ाइल में सहेजने के लिए बना सकते हैं।

अपने prod फ़ोल्डर में एक failedEmails.csv फ़ाइल बनाएं। यह फ़ाइल खाली हो सकती है। हम हेडर पंक्ति जोड़ने के लिए कोड लिखेंगे।

वापस हमारी send.ts फ़ाइल पर, लाइन 38 पर हमारे पथ घोषणाओं पर जाएं। आइए अपने नए failedEmails.csv के लिए एक और जोड़ें:

// यहां हम CSV फ़ाइलों के लिए अपने फ़ाइल पथ जोड़ते हैं
const filePath = path.join(__dirname + "/validEmails.csv");
const bouncePath = path.join(__dirname + "/bouncedEmails.csv");
const failedPath = path.join(__dirname + "/failedEmails.csv");

हमारे अन्य पथों के विपरीत, इस पथ का उपयोग write ऑपरेशन के लिए किया जाएगा। क्योंकि हम ईमेल प्रोसेस होने के साथ-साथ लगातार लिखना चाहते हैं, हमें ऐसा करने के लिए एक स्ट्रीम बनाने की आवश्यकता है। इन पथ घोषणाओं के ठीक नीचे, आइए वह स्ट्रीम बनाएं और अपनी प्रारंभिक हेडर पंक्ति जोड़ें।

// यहां हम विफल ईमेल के लिए अपनी राइट स्ट्रीम बनाते हैं
const failedStream = createWriteStream(failedPath);
// यहां हम हेडर पंक्ति जोड़ते हैं
failedStream.write("email,unsubscribeId\n")

हमारी त्रुटि हैंडलिंग लॉजिक को इस नई स्ट्रीम को शामिल करने के लिए सुधारने का समय। हमें send कॉल में अपनी त्रुटि हैंडलिंग में एक और write ऑपरेशन जोड़ने की आवश्यकता है।

// यहां हम वह संदेश भेजते हैं जिसे हमने अभी बनाया है!
sgMail
  .send(message)
  .then(() => {
    // यहां हम सफल सेंड अनुरोधों को लॉग करते हैं
    console.info(`Message send success: ${user.email}`);
  })
  .catch((err) => {
    // यहां हम त्रुटिपूर्ण सेंड अनुरोधों को लॉग करते हैं
    console.error(err);
    console.error(`Message send failed: ${user.email}`);
    // और यहां हम उस ईमेल को failedEmails.csv में जोड़ते हैं
    failedStream.write(`${user.email},${user.unsubscribeId}\n`)
  });

यह email और unsubscribeId को हमारे नए failedEmails.csv में उचित प्रारूप में लिखेगा - जिससे हम उस डेटा को validEmails.csv में कॉपी करके एक और सेंड प्रयास कर सकें।

बधाई हो! आपने अब ईमेल ब्लास्ट भेजने के लिए एक सफल और पूरी तरह कार्यात्मक टूल बना लिया है। यदि आप अपने काम की पुष्टि करना चाहते हैं तो आप पूर्ण कोड देख सकते हैं। लेकिन कुछ वैकल्पिक, "अच्छा होगा" सुविधाओं के लिए पढ़ते रहें।

आपके ईमेल टूल के लिए वैकल्पिक सुविधाएं

क्योंकि हमारा टूल CLI-आधारित है (अर्थात यह कमांड-लाइन इंटरफ़ेस, या टर्मिनल में उपयोग किया जाता है), अधिक उपयोगकर्ता फीडबैक नहीं है। हम स्क्रिप्ट की प्रगति के बारे में अधिक जानकारी प्रदान करने के लिए कुछ अतिरिक्त कंसोल फ़ंक्शन का लाभ उठा सकते हैं।

आइए कुछ "चेकपॉइंट्स" जोड़कर शुरू करें। हमारे एनवायरनमेंट वेरिएबल सत्यापन से पहले, आइए एक संदेश प्रिंट करें कि स्क्रिप्ट शुरू हो गई है और वेरिएबल्स की जांच कर रही है:

console.info('Script started. Validating environment variables...')

फिर, हमारे सत्यापन के बाद, हम एक सफलता संदेश प्रिंट कर सकते हैं।

// यहां हम SendGrid API key सेट करते हैं
sgMail.setApiKey(apiKey);
console.info('Variables confirmed!')

हमारी बाउंस फ़ाइल पढ़ने के फ़ंक्शन के भीतर, हम शुरुआत, विफलता और सफलता के लिए कुछ संदेश जोड़ सकते हैं।

console.info('Reading bounced email list...')
// बाउंस सूची के माध्यम से पढ़ें, सरणी में पार्स करें
readFile(bouncePath, "utf8", (err, data) => {
  if (err) {
    console.error(err);
    console.error('Failed to read bounced emails!')
    process.exit(1);
  }
  bounceList = data.split("\n").slice(1);
  console.info('Bounced emails read!')

और हमारी वैध ईमेल सूची के लिए भी ऐसा ही:

console.info('Reading send list...')
// यहीं से हम फ़ाइल पढ़ना शुरू करते हैं!
readFile(filePath, "utf8", (err, data) => {
  if (err) {
    console.error(err);
    console.error('Failed to read send list!')
    return;
  }

अब, ऑपरेशन पूरा होने पर एक संदेश प्रिंट करना बहुत अच्छा होगा। हालांकि, यदि हम अपने .forEach लूप के बाद एक console.info जोड़ते हैं, तो यह वास्तव में ईमेल भेजने समाप्त होने से पहले प्रिंट होगा!

ऐसा इसलिए है क्योंकि .send विधि एक नेटवर्क कॉल बनाती है और एक Promise लौटाती है, और वह Promise हमारे पुनरावृत्ति समाप्त होने से पहले हल/अस्वीकृत नहीं हो सकती है।

इसके बजाय हम भेजे गए ईमेल की संख्या बनाम कुल ईमेल की संख्या को ट्रैक करने के लिए एक काउंटर बना सकते हैं। हमारे .forEach लूप से ठीक पहले, इन वेरिएबल्स को जोड़ें:

// यहां हम गिनती के लिए वेरिएबल्स बनाते हैं
const emailTotal = emailList.length;
let emailCount = 0;

हम बाउंस ईमेल को प्रोसेस्ड के रूप में गिनना चाहते हैं, भले ही हम उन्हें छोड़ रहे हों।

// यहां हम emailList सरणी के माध्यम से पुनरावृति करते हैं
emailList.forEach((user) => {
  // यहां हम जांचते हैं कि क्या ईमेल बाउंस हुआ है
  if (bounceList.includes(user.email)) {
    console.info(`Message send skipped: ${user.email}`);
    emailCount++;
    if (emailCount === emailTotal) {
      console.info(
        `Sending complete! Sent ${emailTotal} emails. Have a nice day!`
      );
      return;
    }
  }

अंत में हमें यह देखने के लिए लॉजिक जोड़ने की आवश्यकता है कि क्या हमने जो ईमेल भेजा है वह अंतिम ईमेल है। यह लॉजिक हमारे सेंड कॉल के सफलता और त्रुटि हैंडलर में जाता है:

// यहां हम वह संदेश भेजते हैं जिसे हमने अभी बनाया है!
sgMail
  .send(message)
  .then(() => {
    // यहां हम सफल सेंड अनुरोधों को लॉग करते हैं
    console.info(`Message send success: ${user.email}`);
    // यहां हम ईमेल काउंट संभालते हैं
    emailCount++;
    if (emailCount === emailTotal) {
      console.info(
        `Sending complete! Sent ${emailTotal} emails. Have a nice day!`
      );
    }
  })
  .catch((err) => {
    // यहां हम त्रुटिपूर्ण सेंड अनुरोधों को लॉग करते हैं
    console.error(err);
    console.error(`Message send failed: ${user.email}`);
    // और यहां हम उस ईमेल को failedEmails.csv में जोड़ते हैं
    failedStream.write(`${user.email},${user.unsubscribeId}\n`);
    // यहां हम ईमेल काउंट संभालते हैं
    emailCount++;
    if (emailCount === emailTotal) {
      console.info(
        `Sending complete! Sent ${emailTotal} emails. Have a nice day!`
      );
    }
  });

और इसके साथ, हमारा ऐप पूरी तरह से पूरा हो गया है! यदि आप npm run build और npm run send स्क्रिप्ट चलाते हैं, तो आपको अपने टर्मिनल में यह आउटपुट देखना चाहिए:

और आपको कुछ ईमेल प्राप्त होने चाहिए जो इससे मिलते-जुलते दिखते हैं:

आप हमारा अंतिम कोड यहां देख सकते हैं, या freeCodeCamp के लिए बनाए गए विस्तारित संस्करण को देख सकते हैं।