React ای میل کا استعمال کرتے ہوئے Go میں متحرک ای میلز کیسے بنائیں

ایپلیکیشن انٹرفیس سے باہر اطلاعات کی فراہمی اور مواصلات کو برقرار رکھنے کے لیے صارفین کو ای میلز بھیجنے کے لیے بیک اینڈ ایپلی کیشن کی ضرورت ہے۔ یہ ای میلز متحرک ہیں، عام طور پر ہر صارف کے بارے میں مخصوص معلومات پر مشتمل ہوتی ہیں، جیسے صارف کا نام یا پتہ۔

یہ مضمون آپ کو React ای میل کا استعمال کرتے ہوئے ایک متحرک ای میل ٹیمپلیٹ بنانے، اسے HTML میں تبدیل کرنے، اور گو ٹیمپلیٹ کا استعمال کرتے ہوئے ڈیٹا کو انجیکشن کرنے کے بارے میں بتاتا ہے۔ اس میں ایک اختیاری سیکشن بھی شامل ہے جو آپ کو دکھاتا ہے کہ میل ہاگ کے ساتھ ای میل فارورڈنگ کو کیسے بھیجنا اور جانچنا ہے۔

اس مضمون کی پیروی کرنے کے لیے، آپ کو اپنے کمپیوٹر پر Go اور Node.js انسٹال کرنے کی ضرورت ہوگی۔ آپ کو React کی بنیادی سمجھ اور Go ٹیمپلیٹس سے کچھ واقفیت بھی ہونی چاہیے۔ تاہم، یہ ایک سخت ضرورت نہیں ہے کیونکہ آپ مشق کے ساتھ ہینگ حاصل کرسکتے ہیں۔

انڈیکس

React ای میل کیا ہے؟

React ای میل ایک JavaScript لائبریری ہے جو آپ کو React کا استعمال کرتے ہوئے متحرک ای میل ٹیمپلیٹس بنانے میں مدد کرتی ہے۔ اگر آپ پہلے سے ہی بنیادی React کو جانتے ہیں تو React ای میل متحرک ای میل ٹیمپلیٹس بنانے کے لیے ایک بہتر ڈویلپر کا تجربہ فراہم کرتا ہے۔ یہاں کیوں ہے:

• رد عمل کا مانوس نحو: اگر آپ React کو پہلے سے جانتے ہیں تو React ای میل آپ کو ایک الگ ٹیمپلیٹ لینگویج سیکھنے، ایک غیر موثر ڈریگ اینڈ ڈراپ UI کا استعمال کرتے ہوئے، یا HTML ٹیبلز کا استعمال کرتے ہوئے شروع سے ای میل ٹیمپلیٹس بنانے کی پریشانی سے بچاتا ہے۔

• بلٹ میں دوبارہ قابل استعمال اجزاء: React ای میل بٹن اور فوٹر جیسے آؤٹ آف دی باکس UI اجزاء فراہم کرتا ہے، جو آپ کے ای میل کی ترقی کو ہموار اور تیز بناتا ہے کیونکہ آپ کو شروع سے شروع کرنے کی ضرورت نہیں ہے۔

• ای میل کلائنٹس میں مطابقت: React ای میل ای میل ٹیمپلیٹس بناتا ہے جن کا تجربہ کیا جاتا ہے اور مشہور ای میل کلائنٹس میں اچھی طرح کام کرتے ہیں۔ اس سے ای میل کلائنٹس میں آپ کی ای میلز کو متضاد طور پر پیش کیے جانے کے خدشات کو ختم کرنے میں مدد ملتی ہے۔

• ای میل کی ترقی کے اوزار: React ای میل تحریری ای میلز کا جائزہ لینے اور جانچنے کی صلاحیت رکھتی ہے۔ ان خصوصیات میں سے کچھ شامل ہیں:

  • ایک مقامی ڈویلپمنٹ سرور جو ویب براؤزر میں آپ کی ای میلز کے موبائل اور ڈیسک ٹاپ ویوز کا پیش نظارہ کرتے ہوئے آپ کو حقیقی وقت میں اپنی ای میلز تیار کرنے دیتا ہے۔

  • پیش نظارہ کے لیے حقیقی ای میل پتے پر ای میل بھیجنے کے لیے ای میل فارورڈنگ کی خصوصیت

  • مطابقت چیکر جو ظاہر کرتا ہے کہ مشہور ای میل کلائنٹس کے ذریعہ آپ کی ای میل کو کتنی اچھی طرح سے سپورٹ کیا جاتا ہے۔

  • سپیم سکور میٹر جو آپ کی ای میلز کا تجزیہ کرتا ہے تاکہ یہ تعین کیا جا سکے کہ آیا ان پر سپیم کے بطور نشان زد ہونے کا امکان ہے۔

• ٹیل ونڈ انضمام: Tailwind ایک مقبول CSS فریم ورک ہے جو HTML کو اسٹائل کرنے اور اسے ریسپانسیو بنانے کے لیے کلاسز فراہم کرتا ہے۔ React ای میل خوبصورت ای میلز بنانے کے لیے Tailwind کے ساتھ آسانی سے ضم ہوجاتی ہے۔

یہ تمام خصوصیات مفت میں دستیاب ہیں۔

اس آرٹیکل میں، آپ جانیں گے کہ ری ایکٹ ای میل ٹیمپلیٹ سے HTML فائل کیسے بنانا ہے، اسے گو ٹیمپلیٹ میں تبدیل کرنا ہے، اور پیش نظارہ کے لیے ٹیمپلیٹ میں ڈیٹا داخل کرنا ہے۔

ٹیمپلیٹ منتقل کریں۔

Go html/template پیکیج آپ کو دوبارہ استعمال کے قابل HTML ٹیمپلیٹس کی وضاحت کرنے کی اجازت دیتا ہے جو متحرک ڈیٹا سے بھرے جا سکتے ہیں۔ ان ٹیمپلیٹس میں پلیس ہولڈرز (جسے ایکشن کہتے ہیں) پر مشتمل ہوتا ہے جن کی جانچ گو کے ٹیمپلیٹ انجن کے ذریعے کی جاتی ہے اور عمل درآمد کے دوران اصل قدروں سے بدل دی جاتی ہے۔

سب سے پہلے، ہم پیکج کو Go-specific تشریحات کے ساتھ HTML مواد فراہم کرتے ہیں۔ HTML مواد کو Go HTML ٹیمپلیٹ میں تبدیل کرتا ہے اور گو کے مخصوص تبصروں کو ٹیمپلیٹ میں کارروائیوں میں تبدیل کرتا ہے۔ اس کے بعد ٹیمپلیٹ کو ڈیٹا کے ساتھ چلایا جاتا ہے تاکہ ڈیٹا پر مشتمل HTML آؤٹ پٹ تیار کیا جا سکے۔

package main

import (
	"html/template"
	"os"
)

func main() {
	tmpl := template.New("hello")
	tmpl, _ = tmpl.Parse(`
Hello {{.}}
`)
	tmpl.Execute(os.Stdout, "Gopher")
}

// Output: 
Hello Gopher
// Playground: https://goplay.tools/snippet/KxbkWPIArz5

اوپر کوڈ کے ٹکڑوں میں:

• template.New "ہیلو” کے نام سے ایک خالی ٹیمپلیٹ آبجیکٹ بنائیں۔

• tmpl.Parse(`

  Hello {{.}}

  `) HTML سٹرنگ کو پارس کریں۔

  Hello {{.}}

  Go HTML ٹیمپلیٹ بنائیں اور محفوظ کریں۔ tmpl . کہ {{.}} HTML سٹرنگ کے حصے ڈیٹا کے لیے پلیس ہولڈرز کے طور پر کام کرتے ہیں۔ {{ اور }} اسے الگ کرنے والا کہتے ہیں۔ . ڈیٹا تک رسائی کا شناخت کنندہ۔

• tmpl.Execute(os.Stdout, "Gopher") ڈیٹا ("گوفر”، ایک سٹرنگ) کے ساتھ کام کو آباد کریں اور نتیجے میں آنے والے HTML آؤٹ پٹ کو کنسول میں لکھیں۔

ٹیمپلیٹ سیپریٹر پر جائیں۔

پچھلے کوڈ کے ٹکڑے میں، ڈبل منحنی خطوط وحدانی ({{ اور }}) گو ٹیمپلیٹس میں حد بندی کے طور پر۔ حد بندی ایک علامت ہے جسے Go اس بات کا تعین کرنے کے لیے استعمال کرتا ہے کہ ان پٹ سٹرنگ کا کون سا حصہ آپریشن کی نمائندگی کرتا ہے، یعنی جس بیان کا جائزہ لیا جانا ہے۔

آپ اس کا استعمال کرتے ہوئے حد بندی کو تبدیل کر سکتے ہیں: Delims ٹیمپلیٹ پر طریقہ۔ ایک مثال ذیل کے ٹکڑوں میں دکھائی گئی ہے۔

package main

import (
	"html/template"
	"os"
)

func main() {
	tmpl := template.New("hello")
	tmpl, _ = tmpl.Delims("((", "))").Parse(`
Hello ((.))
`)
	tmpl.Execute(os.Stdout, "Gopher")
}

// Output: 
Hello Gopher
// Playground: https://goplay.tools/snippet/00RuDzvZYwN

اوپر کے ٹکڑوں میں (( اور )) جداکار کے طور پر استعمال کیا جاتا ہے۔ hello ٹیمپلیٹ

یہ اہم ہے کیونکہ یہ React ای میل ٹیمپلیٹس میں Go کے ڈیفالٹ ڈیلیمیٹر اور React منحنی خطوط وحدانی کے درمیان تنازعات کو روکنے کے لیے ڈیلیمیٹر سیٹ کرتا ہے۔

React ای میل کا استعمال کرتے ہوئے Go میں متحرک ای میلز بنانا

نیچے دی گئی تصویر خلاصہ کرتی ہے کہ ہم اس مضمون میں جو نمونہ ایپلیکیشن بنائیں گے وہ کیسے کام کرتی ہے۔

گو ٹیمپلیٹ تشریحات کے ساتھ ایک ری ایکٹ ای میل ٹیمپلیٹ بنائیں۔ اگلا، ہم Node.js کا استعمال کرتے ہوئے ایک HTML فائل بناتے ہیں۔ گو HTML فائل کو پارس کرتا ہے، گو ٹیمپلیٹ تیار کرتا ہے، اسے چلاتا ہے اور بھیجتا ہے۔

اختیاری طور پر، آپ گو میل کا استعمال کرتے ہوئے ای میلز بھیج سکتے ہیں اور میل ہاگ، ایک مقامی SMTP سرور کا استعمال کرتے ہوئے اپنے براؤزر میں ان کا جائزہ لے سکتے ہیں۔

پروجیکٹ کی ترتیبات

سب سے پہلے، یقینی بنائیں کہ آپ کے کمپیوٹر پر پہلے سے ہی Go اور Node.js انسٹال ہیں۔ اس freeCodeCamp-go-react-email ذخیرہ کو کلون کریں اور اسے چیک کریں۔ 01-setup برانچ کا استعمال کرتے ہوئے git checkout 01-setup.

منصوبے میں main.go فائل cmd ڈائریکٹری اور go.mod فائل یہ بھی .gitignore ایک فائل جو گٹ کو ہر چیز کو نظر انداز کرنے کو کہتی ہے۔ node_modules ڈائریکٹری۔

چلائیں go run cmd/main.go آپ کے پروجیکٹ ٹرمینل میں۔ اگر آپ کو پیغام نظر آتا ہے "یہ کام کر رہا ہے!”، کنسول میں لاگ ان کریں، آپ صحیح طریقے سے سیٹ اپ ہیں اور اگلے حصے میں جا سکتے ہیں۔

جوابی ای میل ترتیب دیں۔

پروجیکٹ روٹ ڈائرکٹری میں mailer وہ ڈائرکٹری جو میلر پیکج کے طور پر کام کرے گی۔ اس میں میل بنانے اور بھیجنے سے متعلق تمام افعال ہیں۔

پر mailer ایک ڈائریکٹری بنائی جائے گی۔ emails ایک Node.js پروجیکٹ جو React ای میل کی فعالیت کو سنبھالے گا۔ ایک پروجیکٹ بنانے کے لیے:

• نامی ایک ڈائریکٹری بنائیں _emails پر mailer ڈائریکٹری ڈائرکٹری کے نام انڈر سکور سے شروع ہوتے ہیں۔ کیونکہ ڈائریکٹری کے ناموں کو نظر انداز کر دینا چاہیے۔ go build حکم پر عمل کیا جاتا ہے۔ لہذا، یہ گو کمپائلڈ ایگزیکیوٹیبلز میں شامل نہیں ہے۔

• چلائیں npm init -y جڑ ٹرمینل میں _emails ڈائریکٹری جس میں Node.js پروجیکٹ کو شروع کرنا ہے۔ اگر آپ ایسا کرتے ہیں۔ package.json یہ ڈائریکٹری میں ایک فائل ہے۔

• نام کے خانے میں قدر کو اپ ڈیٹ کریں۔ package.json پیکیج کا نام "ای میل” پر سیٹ کریں تاکہ اسے مزید عام بنایا جا سکے۔ اس قدم کی ضرورت نہیں ہے۔

پھر اپنے روٹ ٹرمینل میں درج ذیل کمانڈ کو چلا کر مطلوبہ React ای میل لائبریریاں انسٹال کریں۔ _emails ڈائریکٹری:

npm install @react-email/ui @types/react -D -E
npm install react-email react react-dom -E

انسٹالیشن مکمل ہونے کے بعد تبدیل کریں۔ scripts میدان package.json ذیل میں کوڈ کا ٹکڑا استعمال کرتے ہوئے ایک فائل بنائیں۔

  "scripts": {
    "dev": "email dev --dir ./src",
    "export": "email export --pretty --dir ./src --outDir ../templates"
  },

کہ dev براؤزر میں ری ایکٹ ای میل ٹیمپلیٹس کا پیش نظارہ کرنے کے لیے اسکرپٹ شروع ہوتا ہے اور سرور چلاتا ہے۔ React کے ساتھ ایک ٹیمپلیٹ بنائیں اور اسے استعمال کریں۔ src نیچے ڈائریکٹری _emails. کہ export اسکرپٹ درج ذیل ٹیمپلیٹ فائلوں کو منتقل کرتا ہے۔ src ڈائریکٹری کو JSX (یا TSX) سے HTML میں تبدیل کریں اور اسے درج ذیل ڈائریکٹری میں محفوظ کریں: templatesکا براہ راست بچہ mailer ڈائرکٹری – ایک بچہ نہیں _emails ڈائریکٹری

کہ templates ڈائریکٹریز کو ذیلی ڈائریکٹریز کے طور پر محفوظ کیا جاتا ہے۔ mailer کیونکہ گو پروجیکٹ کو صرف اس میں ذخیرہ شدہ HTML آؤٹ پٹ کی ضرورت ہے: templates غیر ڈائریکٹری مواد _emails.

اگر آپ نے یہ تمام مراحل مکمل کر لیے ہیں، تو آپ نے React ای میل ترتیب دی ہے: emails Node.js پروجیکٹ۔ پروجیکٹ کی موجودہ صورتحال دیکھنے کے لیے، freeCodeCamp-go-react-email/02-setup-react-email ملاحظہ کریں۔

اگلے حصے میں، ہم ایک React ای میل ٹیمپلیٹ بنائیں گے اور براؤزر میں اس کا جائزہ لیں گے۔

ایک React ای میل ٹیمپلیٹ بنائیں

اس سیکشن میں، آپ ایک React ای میل ٹیمپلیٹ بنائیں گے اور براؤزر میں اس کا جائزہ لیں گے۔ آپ ٹیمپلیٹس بھی بنا سکتے ہیں اور انہیں HTML فائلوں کے بطور ایکسپورٹ بھی کر سکتے ہیں۔

نامی ایک ڈائریکٹری بنائیں src میں _emails ڈائریکٹری اندرونی src ڈائریکٹری کے نام سے ایک فائل بنائیں۔ welcome.tsx. ذیل کے ٹکڑوں کے مواد کو کاپی اور پیسٹ کریں۔ welcome.tsx.

import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Img,
  Preview,
  Section,
  Tailwind,
  Text,
} from "react-email";

interface WelcomeEmailProps {
  username?: string;
  company?: string;
  gophers?: string[];
}

const WelcomeEmail = ({
  username = "Nicole",
  company = "GoWorld",
  gophers = ["Tinky Winky", "Dipsy", "Laa-Laa", "Po"],
}: WelcomeEmailProps) => {
  const previewText = `Welcome to ({company}, ){username}!`;

  return (
    
      
      {previewText}
      
        
          
            

              
            
            
              Welcome to {company}, {username}!
            
            Hello {username},
            
              We're excited to have you onboard at {company}.
              We hope you enjoy your journey with us. If you have any questions
              or need assistance, feel free to reach out to any of the following
              gophers:
            
            

              

                {gophers.map((gopher) => (
                  
{gopher}
                ))}
              
            
            

              
                Get Started
              
            
            
              Cheers,
              
The {company} Team
            
          
        
      
    
  );
};

export default WelcomeEmail;

اوپر کوڈ کا ٹکڑا React ای میل ٹیمپلیٹ ہے جسے ہم اس مضمون میں استعمال کریں گے۔ پیش نظارہ کرنے کے لیے ٹرمینل پر جائیں۔ _emails روٹ ڈائرکٹری اور چلائیں۔ npm run dev . اپنے ٹرمینل میں دکھائے گئے پیش نظارہ URL کو دیکھنے کے لیے اپنا ویب براؤزر استعمال کریں۔ بائیں سائڈبار میں "خوش آمدید” لنک ​​پر کلک کریں اور آپ کو نیچے اسکرین شاٹ جیسا UI نظر آئے گا۔

مندرجہ بالا UI میں، React Email فراہم کردہ ڈیفالٹ اقدار کے ساتھ ای میل پیش کرتا ہے۔ welcome ای میل ٹیمپلیٹ۔

سرور کو چلانے والے ٹرمینل میں نیکسٹ پر کلک کرکے سرور کو روکیں۔ CTRL + C. HTML آؤٹ پٹ بنائیں۔ src چلا کر ڈائریکٹری برآمد کریں: npm run export ٹرمینل میں _emails روٹ ڈائرکٹری۔ یہ ہے templates اندر اندر ڈائریکٹری mailer ڈائریکٹری جہاں برآمد شدہ HTML فائلوں کو محفوظ کیا جاتا ہے۔ پر templates ڈائریکٹری کو دیکھ رہے ہیں۔ welcome.html فائل – HTML آؤٹ پٹ welcome.tsx.

پروجیکٹ کی موجودہ صورتحال دیکھنے کے لیے، freeCodeCamp-go-react-email/03-create-react-email-template ملاحظہ کریں۔

HTML فائل میں گو ٹیمپلیٹ ترتیب دینا

آپ نے ایک HTML فائل کے طور پر ایک React ای میل ٹیمپلیٹ بنایا، پیش نظارہ کیا، بنایا اور برآمد کیا۔ اس سیکشن میں، آپ React کے گھنگھریالے منحنی خطوط وحدانی کے بجائے اپنے سیٹ کردہ ڈیلیمیٹر کو استعمال کرنے کے لیے اپنے React ای میل ٹیمپلیٹ کو اپ ڈیٹ کریں گے۔ یہ HTML فائلوں سے گو ٹیمپلیٹس بھی بناتا ہے۔

شروع کرنے کے لیے welcome.tsx ذیل میں کوڈ کا ٹکڑا استعمال کرتے ہوئے (( اور )) اسے حد بندی کے طور پر استعمال کریں اور TypeScript کی اقسام کو ہٹا دیں۔

import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Img,
  Preview,
  Section,
  Tailwind,
  Text,
} from "react-email";

const WelcomeEmail = () => {
  const previewText = `Welcome to ((.Company)), ((.Username))!`;

  return (
    
      
      {previewText}
      
        
          
            

              
            
            
              Welcome to ((.Company)), ((.Username))!
            
            Hello ((.Username)),
            
              We're excited to have you onboard at ((.Company))
              . We hope you enjoy your journey with us. If you have any
              questions or need assistance, feel free to reach out to any of the
              following Gophers:
            
            

              

                ((range .Gophers))
                
((.))
                ((end))
              
            
            

              
                Get Started
              
            

            
              Cheers,
              
The ((.Company)), Team
            
          
        
      
    
  );
};

export default WelcomeEmail;

چلائیں npm run export جڑ ٹرمینل میں _emails یہ وہ ڈائریکٹری ہے جہاں ہم React ای میل ٹیمپلیٹ کا یہ ورژن بناتے ہیں اور اسے HTML میں ایکسپورٹ کرتے ہیں۔ تیار کردہ HTML میں Go ٹیمپلیٹ کے تبصرے ہوتے ہیں جن پر Go HTML ٹیمپلیٹ بنانے کے لیے گو کے ذریعے تجزیہ کرنے پر عمل کیا جاتا ہے۔

پر mailer ایک ڈائریکٹری، نام کی ایک فائل بناتا ہے۔ fs.go. فائل میں موجود کوڈ کو اگلی فائل میں فائل کو شامل کرنے کے لیے استعمال کیا جاتا ہے۔ templates گو ایپلیکیشن کے ذریعے استعمال کی جانے والی ڈائریکٹری۔ ذیل کے ٹکڑوں کے مواد کو کاپی اور پیسٹ کریں۔ fs.go:

package mailer

import (
	"embed"
	"io/fs"
)

//go:embed templates/*
var embedded embed.FS
var templateFS, _ = fs.Sub(embedded, "templates")

//go:embed templates/* گو کمپائلر کو موجودہ ڈائرکٹری سے فائلیں شامل کرنے کی ہدایت کرتا ہے (mailer) گو ایپلیکیشن کی مرتب کردہ بائنری میں۔ آپ کو اپنی گو ایپلیکیشن سے HTML ٹیمپلیٹ فائل تک رسائی کے لیے اس معلومات کی ضرورت ہوگی۔ templateFS میں فائلوں تک رسائی کے لیے استعمال کیا جاتا ہے۔ templates ذیلی ڈائرکٹری۔

براہ کرم ایک اور فائل بنائیں۔ mailer ڈائریکٹری اور نام mailer.go. mailer.go Go HTML ٹیمپلیٹس بنانے اور ای میلز بھیجنے کے لیے HTML فائلوں کو پارس کرنے کے لیے استعمال ہونے والے کوڈ پر مشتمل ہے۔ ذیل میں کوڈ کے ٹکڑوں کے مواد کو کاپی کریں۔ mailer.go:

package mailer

import (
	"html/template"
	"io"
)

const (
	welcomeMailKey = "welcome_mail"
)

func setUpTemplates() (map[string]*template.Template, error) {
	templates := make(map[string]*template.Template)

	tmpl := template.New("welcome.html").Delims("((", "))")
	welcomeEmailTmpl, err := tmpl.ParseFS(templateFS, "welcome.html")
	if err != nil {
		return nil, err
	}

	templates[welcomeMailKey] = welcomeEmailTmpl

	return templates, nil
}

type Mailer struct {
	templates map[string]*template.Template
}

// NewMailer creates a new mailer
func NewMailer() (*Mailer, error) {
	tpls, err := setUpTemplates()
	if err != nil {
		return nil, err
	}

	return &Mailer{
		templates: tpls,
	}, nil
}

type WelcomEmailData struct {
	Username string
	Company  string
	Gophers  []string
}

func (mailer *Mailer) WriteWelcomeMail(w io.Writer, data WelcomEmailData) error {
	tmpl := mailer.templates[welcomeMailKey]
	err := tmpl.Execute(w, data)

	return err
}

اوپر کوڈ کے ٹکڑوں میں:

• setUpTemplates ایک ٹیمپلیٹ آبجیکٹ بنائیں، tmplالگ کرنے والا سیٹ کریں۔ tmpl تعبیر کرنا welcome.html اسے گو ٹیمپلیٹ میں تبدیل کریں اور ٹیمپلیٹ کو اس طرح محفوظ کریں: welcomeEmailTmpl شناخت کنندہ کے طور پر استعمال کیا جاتا ہے۔ جب سے، welcomeEmailTmpl میں شامل کیا جائے گا۔ templates نقشہ welcomeMailKey اس چابی کے ساتھ templates واپس کر دیا جاتا ہے.

• NewMailer بنائیں اور واپس کریں۔ Mailer ایک ایسی چیز جس میں ٹیمپلیٹ کے نقشے اور میل ٹیمپلیٹس کے ساتھ کام کرنے کے طریقے ہوتے ہیں۔

• WriteWelcomeMail اس طرح کا طریقہ ہے: Mailer یہ اصل ڈیٹا کے ساتھ ویلکم ای میل ٹیمپلیٹ کو چلانے کے لیے استعمال ہوتا ہے۔

موجودہ کوڈبیس کی موجودہ حالت دیکھنے کے لیے، freeCodeCamp-go-react-email/04-create-golang-template ملاحظہ کریں۔

براؤزر میں متحرک ای میل رینڈرنگ

اس سیکشن میں، ہم ایک سادہ ویب سرور بنائیں گے تاکہ ایک پیش کردہ ای میل ٹیمپلیٹ کو دیکھنے کے لیے متحرک اقدار کے ساتھ اس پر منتقل کیا جائے۔

درج ذیل کو تبدیل کریں: main.go ذیل میں کوڈ کا ٹکڑا استعمال کرتے ہوئے:

package main

import (
	"fmt"
	"net/http"
	"os"

	pkgMailer "github.com/orimdominic/freeCodeCamp-go-react-email/mailer"
)

func main() {
	mailer, err := pkgMailer.NewMailer()
	if err != nil {
		fmt.Fprint(os.Stderr, err)
		os.Exit(1)
	}

	http.HandleFunc("/mail", func(w http.ResponseWriter, r *http.Request) {
		username := r.URL.Query().Get("username")
		company := r.URL.Query().Get("company")
		gophers := []string{"Tinky Winky", "Dipsy", "Laa-Laa", "Po"}

		err := mailer.WriteWelcomeMail(w, pkgMailer.WelcomEmailData{
			Username: username,
			Company:  company,
			Gophers:  gophers,
		})
		if err != nil {
			http.Error(w, err.Error(), http.StatusInternalServerError)
			return
		}
	})

	port := ":8888"
	err = http.ListenAndServe(port, nil)
	if err != nil {
		fmt.Fprint(os.Stderr, err)
		os.Exit(1)
	}
}

اوپر کوڈ کا ٹکڑا پہلے استعمال کرتے ہوئے میلر آبجیکٹ بناتا ہے: NewMailer فنکشن mailer.go. ایک سادہ ویب سرور بناتا ہے جو غلطی سے نمٹنے کے بعد پورٹ پر چلتا ہے۔ 8888 اور GET /mail راستہ

کہ GET /mail راستہ دو استفسار پیرامیٹرز کو قبول کرتا ہے: username اور companyیہ ای میلز میں متحرک ڈیٹا کے طور پر استعمال ہوتا ہے۔ ٹیمپلیٹ چلانے کے نتائج WriteWelcomeMail یہ براؤزر کو HTML جواب کے طور پر لکھا جاتا ہے۔ اس راستے کا استعمال کرتے ہوئے mailer پیکج

سرور شروع کرنے سے پہلے، آپ کو اپنے React ای میل ٹیمپلیٹس بنانے اور برآمد کرنے کی ضرورت ہے تاکہ آپ کی HTML فائلوں میں ہمیشہ آپ کے React ای میل ٹیمپلیٹس میں تازہ ترین تبدیلیاں موجود ہوں۔ اپنے سرور کو بنانے، برآمد کرنے اور چلانے کے لیے متعدد ڈائریکٹریوں کے درمیان منتقل ہونے کے بجائے، آپ میک فائل استعمال کر سکتے ہیں۔

اپنے پروجیکٹ روٹ ڈائرکٹری میں ٹرمینل پر جائیں اور اس طرح کی فائل بنائیں: Makefile. ذیل میں کوڈ کے ٹکڑوں کے مواد کو کاپی اور پیسٹ کریں۔

run: email-build
	go run cmd/main.go

email-build: mailer/_emails
	npm --prefix mailer/_emails run export

کہ run اوپر دی گئی میک فائل اسکرپٹ HTML میں ایک React ای میل ٹیمپلیٹ بناتی اور برآمد کرتی ہے۔ mailer/templates ڈائریکٹری منتخب کریں اور پھر گو ایپلیکیشن شروع کریں۔ درج ذیل کو چیک کریں: Makefile انڈینٹیشن کے لیے سخت ٹیبز استعمال کریں، خالی جگہ نہیں۔

چلائیں make run اپنے پروجیکٹ کی روٹ ڈائرکٹری کے ٹرمینل میں، ملاحظہ کریں: http://localhost:8888/mail?username=Nicole&company=GoWorld آپ کے براؤزر میں۔ آپ اپنے براؤزر UI میں اپنا ای میل پیش کردہ دیکھیں گے۔

قدر کو تبدیل کریں۔ username اور company URL میں مختلف اقدار کے ساتھ اپنے ای میل کی جانچ کریں۔

یہ ترتیب آپ کو ٹیمپلیٹ کے عمل کے نتائج کو اپنے میل کلائنٹ کے ساتھ مربوط کرنے کی اجازت دیتی ہے اور ای میل وصول کنندگان کو ان کے براؤزر میں دکھائی جانے والی ای میل دیکھنے کی اجازت دیتی ہے۔

موجودہ کوڈبیس کی موجودہ حالت دیکھنے کے لیے، freeCodeCamp-go-react-email/05-render-dynamic-email ملاحظہ کریں۔

گو میل اور میل ہاگ کا استعمال کرتے ہوئے ای میل بھیجنا اور جانچنا

پچھلے حصے میں ٹیمپلیٹ کو چلانے کے لیے ڈیٹا فراہم کیا گیا تھا، لیکن یہ براؤزر میں پیش کیا گیا تھا، ای میل کلائنٹ میں نہیں۔ اس سیکشن میں ہم ای میلز بھیجنے کے لیے گو میل اور ان کو روکنے اور دیکھنے کے لیے میل ہاگ کا استعمال کریں گے۔

یہ سیکشن اختیاری ہے۔ اگر میل ہاگ مقامی طور پر انسٹال نہیں ہے، تو آپ کو اس پروجیکٹ کے لیے اسے ترتیب دینے کے لیے ڈوکر کمپوز کی ضرورت ہوگی۔ جاری رکھنے سے پہلے، یقینی بنائیں کہ آپ کے کمپیوٹر پر Docker Compose انسٹال ہے۔

ٹرمینل میں، اپنے پروجیکٹ کی روٹ ڈائرکٹری پر جائیں اور چلائیں: go get github.com/wneessen/go-mail Gomail انسٹال کریں۔ بنانا compose.yml فائل کو اپنے پروجیکٹ کی روٹ ڈائرکٹری میں کاپی کریں اور نیچے کوڈ کے ٹکڑوں کے مواد کو پیسٹ کریں۔

services:
  mailhog:
    image: mailhog/mailhog
    restart: no
    logging:
      driver: "none" # disable saving logs
    ports:
      - 1025:1025 # smtp server
      - 8025:8025 # web ui

ٹرمینل میں، اپنے پروجیکٹ کی روٹ ڈائرکٹری پر جائیں اور چلائیں: docker compose up میل ہاگ SMTP سرور کو گھسیٹیں اور شروع کریں۔ میل ہاگ بندرگاہ پر ای میلز سنتا ہے۔ 1025 ویب UI کو بے نقاب کریں۔ http://localhost:8025 یہ وہ جگہ ہے جہاں آپ مسدود ای میلز دیکھ سکتے ہیں۔ آپ کے انٹرنیٹ کنکشن پر منحصر ہے، ابتدائی تصویر کی درآمد میں کئی منٹ لگ سکتے ہیں۔

تبدیلی mailer.go ذیل میں کوڈ کے ٹکڑوں کا مواد مندرجہ ذیل ہے:

package mailer

import (
	"html/template"
	"io"

	"github.com/wneessen/go-mail"
)

const (
	welcomeMailKey = "welcome_mail"
    sender = "noreply@localhost.com"
)

func setUpTemplates() (map[string]*template.Template, error) {
	templates := make(map[string]*template.Template)

	tmpl := template.New("welcome.html").Delims("((", "))")
	welcomeEmailTmpl, err := tmpl.ParseFS(templateFS, "welcome.html")
	if err != nil {
		return nil, err
	}

	templates[welcomeMailKey] = welcomeEmailTmpl

	return templates, nil
}

type Mailer struct {
	client    *mail.Client
	templates map[string]*template.Template
}

// NewMailer creates a new mailer
func NewMailer() (*Mailer, error) {
	tpls, err := setUpTemplates()
	if err != nil {
		return nil, err
	}

	c, err := mail.NewClient(
		"localhost",
		mail.WithPort(1025),
		mail.WithTLSPolicy(mail.NoTLS),
	)

	if err != nil {
		return nil, err
	}

	return &Mailer{
		client:    c,
		templates: tpls,
	}, nil
}

type WelcomEmailData struct {
	Username string
	Company  string
	Gophers  []string
}

func (mailer *Mailer) WriteWelcomeMail(w io.Writer, data WelcomEmailData) error {
	tmpl := mailer.templates[welcomeMailKey]
	err := tmpl.Execute(w, data)

	return err
}

func (mailer *Mailer) SendWelcomeMail(to string, data WelcomEmailData) error {
	m := mail.NewMsg()
	m.From(sender)
	m.To(to)
	m.Subject("Welcome to " + data.Company)
	m.SetBodyHTMLTemplate(mailer.templates[welcomeMailKey], data)

	err := mailer.client.DialAndSend(m)
	return err
}

نئی تبدیلیوں میں شامل ہیں: mailer.go شامل ہیں:

• گو میل آمدنی

• کی تخلیق sender بھیجنے والے کے ای میل کی مستقل نمائندگی کرتا ہے۔

• گو میل کا استعمال کرتے ہوئے میل کلائنٹ بنانا

• کی تخلیق SendWelcomeMail کیسے؟ mailer ڈھانچہ جو ای میل بناتا ہے۔ welcomeEmailTmplاسے چلائیں اور وصول کنندہ کو بھیجیں۔

میں main.goاپ ڈیٹ GET /mail استعمال کرنے کا راستہ SendWelcomeMail اس کے بجائے WriteWelcomeMail. آپ اپنی مرضی کے مطابق کوئی بھی ای میل ایڈریس استعمال کر سکتے ہیں۔ ذیل کا ٹکڑا استعمال کرتا ہے: fcc@go.dev:

		err := mailer.SendWelcomeMail("fcc@go.dev", pkgMailer.WelcomEmailData{
			Username: username,
			Company:  company,
			Gophers:  gophers,
		})
		if err != nil {
			http.Error(w, err.Error(), http.StatusInternalServerError)
			return
		}

		fmt.Fprint(w, "Email sent")

اپنے ویب براؤزر میں http://localhost:8025 پر جا کر تصدیق کریں کہ آپ کا میل سرور چل رہا ہے۔ دوسرے ٹرمینل میں پروجیکٹ روٹ ڈائرکٹری سے چلائیں: make run سرور شروع کریں۔ تشریف لائیں اور اپنے راستے کی فعالیت کی جانچ کریں۔ http://localhost:8888/mail?username=Nicole&company=GoWorld ایک بار پھر۔ اس کے بعد، http://localhost:8025 پر جا کر اپنا ای میل سرور چیک کریں۔ آپ نیچے اسکرین شاٹ کی طرح ایک UI دیکھیں گے۔

اپنا ای میل دیکھنے کے لیے "Helix میں خوش آمدید” پر کلک کریں۔

موجودہ کوڈبیس کی موجودہ صورتحال دیکھنے کے لیے، freeCodeCamp-go-react-email/06-send-email ملاحظہ کریں۔

نتیجہ

اس ٹیوٹوریل پر عمل کرنے سے آپ کو درج ذیل فوائد حاصل ہوں گے۔

• آپ نے React ای میل ٹیمپلیٹس سے Go ای میل ٹیمپلیٹس بنانے کا طریقہ سیکھا۔

• آپ نے میک فائلز کا استعمال کرتے ہوئے اپنی مرضی کے مطابق اسکرپٹ چلانے کا طریقہ سیکھا۔

• میں نے براؤزر میں ای میل کا پیش نظارہ کرکے میل ہاگ کا استعمال کرتے ہوئے اس کا تجربہ کیا۔

اب آپ خام HTML ای میل ٹیبل بنانے یا نئی ٹیمپلیٹ کی زبان سیکھنے کی پریشانی کو چھوڑ سکتے ہیں۔ ری ایکٹ ای میل اور گو ٹیمپلیٹس آپ کو صاف ستھرے، زیادہ ڈویلپر کے موافق طریقے سے زبردست ای میلز بنانے اور بھیجنے میں مدد کرتے ہیں۔