\r\n\r\n <!DOCTYPE html>rn<html>rn<head>rn <meta charset="UTF-8" \/>rn <title>Out for Delivery<\/title>rn<\/head>rn<body style="font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 20px; text-align: center;">rnrn <div style="background: #ffffff; padding: 20px; border-radius: 8px; max-width: 600px; margin: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);">rnrn <div style="background-color: #28a745; color: white; padding: 15px; font-size: 22px; font-weight: bold; border-top-left-radius: 8px; border-top-right-radius: 8px;">rn Your Order Is Out for Delivery! \ud83d\ude9arn <\/div>rnrn <div style="padding: 20px; font-size: 16px; color: #333; text-align: left;">rn <p style="margin: 0 0 10px;">Hello, <%= name %><\/p>rn <p style="margin: 0 0 10px;">Good news! Your package is out for delivery and will arrive soon. \ud83d\udce6<\/p>rn <p style="margin: 0 0 10px;"><strong>Tracking Number:<\/strong> <%= trackingNumber %><\/p>rn <p style="margin: 0 0 10px;">We appreciate your business and can't wait for you to receive your order!<\/p>rnrn <a href="https:\/\/yourwebsite.com\/track?trackingNumber=<%= trackingNumber %>"rn style="background-color: #28a745; color: white; text-decoration: none; padding: 12px 18px; border-radius: 5px; display: inline-block; margin-top: 15px; font-weight: bold;">rn Track Your Packagern <\/a>rn <\/div>rnrn <div style="background-color: #f4f4f4; padding: 10px; font-size: 14px; color: #555; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;">rn Thank you for choosing us! \ud83d\udecd\ufe0frn <\/div>rn <\/div>rn<\/body>rn<\/html>\r\n <\/code>\r\n <\/pre>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\n\n\nErstellen Sie abschlie\u00dfend eine Vorlage, um Nutzer dar\u00fcber zu benachrichtigen, dass ihre Bestellung zugestellt wurde, indem Sie eine Datei namens delivered.html<\/code> im folder<\/code> src\/email-templates\/html<\/code> erstellen und den folgenden Code hinzuf\u00fcgen:<\/p>\n\n\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n HTML <\/button>\r\n <\/li>\r\n\r\n \r\n \r\n <\/ul>\r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n <\/svg>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n\r\n <!DOCTYPE html>rn<html>rn<head>rn <meta charset="UTF-8" \/>rn <title>Order Delivered<\/title>rn<\/head>rn<body style="font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 20px; text-align: center;">rnrn <div style="background: #ffffff; padding: 20px; border-radius: 8px; max-width: 600px; margin: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);">rnrn <div style="background-color: #ffc107; color: white; padding: 15px; font-size: 22px; font-weight: bold; border-top-left-radius: 8px; border-top-right-radius: 8px;">rn Your Order Has Been Delivered! \ud83c\udf89rn <\/div>rnrn <div style="padding: 20px; font-size: 16px; color: #333; text-align: left;">rn <p style="margin: 0 0 10px;">Hello, <%= name %><\/p>rn <p style="margin: 0 0 10px;">We're happy to inform you that your package has been successfully delivered. \ud83c\udf81<\/p>rn <p style="margin: 0 0 10px;"><strong>Tracking Number:<\/strong> <%= trackingNumber %><\/p>rn <p style="margin: 0 0 10px;">We hope you enjoy your purchase! If you have any questions, feel free to contact us.<\/p>rnrn <a href="https:\/\/yourwebsite.com\/track?trackingNumber=<%= trackingNumber %>"rn style="background-color: #ffc107; color: white; text-decoration: none; padding: 12px 18px; border-radius: 5px; display: inline-block; margin-top: 15px; font-weight: bold;">rn Track Your Orderrn <\/a>rn <\/div>rnrn <div style="background-color: #f4f4f4; padding: 10px; font-size: 14px; color: #555; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;">rn Thank you for shopping with us! \ud83d\udecd\ufe0frn <\/div>rn <\/div>rn<\/body>rn<\/html>\r\n <\/code>\r\n <\/pre>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\n\n\nUm E-Mail-Vorlagen dynamisch zu verwalten und zu rendern, m\u00fcssen Sie eine Klasse erstellen, die Vorlagen f\u00fcr verschiedene Bestellstatus l\u00e4dt und organisiert. Diese Klasse ruft die richtige Vorlage ab und rendert sie mit kundenspezifischen Daten. Erstellen Sie dazu eine neue Datei namens index.ts<\/code> im src\/email-templates folder <\/code> und f\u00fcgen Sie den folgenden Code hinzu:<\/p>\n\n\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n PHP <\/button>\r\n <\/li>\r\n\r\n \r\n \r\n <\/ul>\r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n <\/svg>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n\r\n import { readFileSync } from "fs";rnimport { EmailTemplate, OrderStatus } from "..\/types";rnimport ejs from "ejs";rnrnexport class EmailTemplateManager {rn private templates: Map<OrderStatus, EmailTemplate>;rnrn constructor() {rn this.templates = new Map();rn this.loadTemplates();rn }rnrn private loadTemplates() {rn \/\/ Load each template for different statusesrn const statuses: OrderStatus[] = [rn "shipped",rn "out_for_delivery",rn "delivered",rn ];rn const subjects: Record<OrderStatus, string> = {rn shipped: "Your Order Has Been Shipped! \u2708\ufe0f",rn out_for_delivery: "Your Order is Out for Delivery! \ud83d\ude9a",rn delivered: "Your Order Has Been Delivered! \ud83c\udf89",rn };rnrn statuses.forEach((status) => {rn const htmlTemplate = readFileSync(rn `src\/email-templates\/html\/${status}.html`,rn "utf-8"rn );rnrn this.templates.set(status, {rn subject: subjects[status],rn html: htmlTemplate,rn });rn });rn }rnrn getTemplate(status: OrderStatus): EmailTemplate {rn const template = this.templates.get(status);rn if (!template) {rn throw new Error(`No template found for status: ${status}`);rn }rn return template;rn }rnrn renderTemplate(templateString: string, data: Record<string, any>): string {rn return ejs.render(templateString, data); \/\/ Render the template with the provided datarn }rn}\r\n <\/code>\r\n <\/pre>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\n\n\nDiese Klasse initialisiert eine private Variable namens templates, die E-Mail-Vorlagen zur schnellen Suche basierend auf dem Bestellstatus in einer Map speichert. Die Verwendung einer Map stellt einen effizienten Abruf sicher und vermeidet das wiederholte Lesen von Dateien von der Festplatte. Die Klasse definiert au\u00dferdem die folgenden Methoden:<\/p>\n\n\n\n
\nloadTemplates<\/code> (privat) liest HTML-Vorlagen aus Dateien und speichert sie zusammen mit ihren entsprechenden Betreffzeilen in der templates-Map.<\/li>\n\n\n\ngetTemplate<\/code> ruft die E-Mail-Vorlage f\u00fcr einen bestimmten Bestellstatus ab und gibt einen Fehler aus, wenn keine Vorlage gefunden wird.<\/li>\n\n\n\nrenderTemplate<\/code> verwendet EJS, um eine Vorlage mit bereitgestellten Daten dynamisch zu rendern.<\/li>\n<\/ul>\n\n\n\nImplementierung der E-Mail-Versandfunktion<\/h2>\n\n\n\n Nachdem die E-Mail-Vorlagen eingerichtet sind, ist der n\u00e4chste Schritt die Implementierung der Funktion f\u00fcr den Versand von Benachrichtigungen. Dies beinhaltet das Einreihen von E-Mail-Jobs in die Warteschlange und deren asynchrone Verarbeitung.<\/p>\n\n\n\n
Bevor Sie dies tun k\u00f6nnen, m\u00fcssen Sie jedoch einige Abh\u00e4ngigkeiten installieren, indem Sie den folgenden Befehl ausf\u00fchren:<\/p>\n\n\n\n
npm i mailgun.js@11.1.0 form-data@4.0.2 bullmq@5.41.2 ioredis@5.5.0<\/code><\/p>\n\n\n\nHier ist ein \u00dcberblick \u00fcber jede dieser Abh\u00e4ngigkeiten:<\/p>\n\n\n\n
\nmailgun.js<\/code> ist ein Node.js-Client f\u00fcr die Interaktion mit der Mailgun-API. Sie verwenden dies, um Transaktions-E-Mails zu versenden.<\/li>\n\n\n\nform-data<\/code> ist ein Paket, das von mailgun.js<\/code> ben\u00f6tigt wird, um Formular\u00fcbermittlungen beim Versand von E-Mails zu verarbeiten.<\/li>\n\n\n\nbullmq<\/code> ist eine Job-Warteschlangen-Bibliothek zur Verarbeitung asynchroner Aufgaben. Dadurch k\u00f6nnen Sie E-Mail-Benachrichtigungen in die Warteschlange einreihen und im Hintergrund verarbeiten.<\/li>\n\n\n\nioredis<\/code> ist ein Redis-Client f\u00fcr Node.js, der von BullMQ verwendet wird, um Jobs in der Warteschlange zu speichern und zu verwalten.<\/li>\n<\/ul>\n\n\n\nAls N\u00e4chstes m\u00fcssen Sie einen Mailgun-API-Client definieren, den Sie zum Versenden von E-Mails verwenden. Erstellen Sie dazu eine neue Datei unter src\/config\/mailgun.config.ts<\/code> und f\u00fcgen Sie den folgenden Code hinzu:<\/p>\n\n\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n PHP <\/button>\r\n <\/li>\r\n\r\n \r\n \r\n <\/ul>\r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n <\/svg>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n\r\n import FormData from "form-data";rnimport Mailgun from "mailgun.js";rnrnconst mailgun = new Mailgun(FormData);rnexport const mgClient = mailgun.client({rn username: "api",rn key: process.env.MAILGUN_API_KEY,rn});\r\n <\/code>\r\n <\/pre>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\n\n\nDieser Code richtet einen Mailgun-Client mit der Bibliothek mailgun.js<\/code> und form-data<\/code> ein und exportiert ihn, sodass Ihre Anwendung E-Mails \u00fcber die Mailgun-API mit dem in Umgebungsvariablen gespeicherten API-Schl\u00fcssel versenden kann.<\/p>\n\n\n\nNun m\u00fcssen Sie eine Redis-Verbindung definieren, die von BullMQ zum Speichern und Verwalten von Hintergrundjobs verwendet wird. Erstellen Sie dazu eine neue Datei namens redis.config.ts<\/code> im Ordner src\/config<\/code> und f\u00fcgen Sie den unten stehenden Code hinzu:<\/p>\n\n\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n PHP <\/button>\r\n <\/li>\r\n\r\n \r\n \r\n <\/ul>\r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n <\/svg>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n\r\n import IORedis from "ioredis";rnrnexport const redisConfig = new IORedis({rn host: process.env.REDIS_HOST,rn port: parseInt(process.env.REDIS_PORT),rn maxRetriesPerRequest: null,rn});\r\n <\/code>\r\n <\/pre>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\n\n\nSie m\u00fcssen eine BullMQ-Warteschlange f\u00fcr die Versandbenachrichtigungen einrichten, die Hintergrundjobs f\u00fcr E-Mail-Benachrichtigungen unter Verwendung der im vorherigen Schritt definierten Redis-Verbindung verarbeitet. Erstellen Sie dazu eine neue Datei namens queues.config.ts<\/code> im Ordner src\/config<\/code> und f\u00fcgen Sie den folgenden Code hinzu:<\/p>\n\n\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n PHP <\/button>\r\n <\/li>\r\n\r\n \r\n \r\n <\/ul>\r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n <\/svg>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n\r\n import { Queue } from "bullmq";rnimport { redisConfig } from ".\/redis.config";rnrnexport const QUEUE_NAMES = {rn SHIPPING_NOTICATIONS: "shipping-notifications",rn};rnrnexport const JOB_NAMES = {rn SEND_NOTIFICATION: "send-notification",rn};rnrnexport const SHIPPING_NOTICATIONS_QUEUE = new Queue(rn QUEUE_NAMES.SHIPPING_NOTICATIONS,rn {rn connection: redisConfig,rn }rn);\r\n <\/code>\r\n <\/pre>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\n\n\nDieser Code definiert au\u00dferdem Namen f\u00fcr die Warteschlange und den Jobtyp, die in anderen Teilen der Anwendung verwendet werden k\u00f6nnen, um fest codierte Strings zu vermeiden.<\/p>\n\n\n\n
Erstellen Sie abschlie\u00dfend eine neue Datei unter src\/services\/notifications.service.ts<\/code> und f\u00fcgen Sie den folgenden Code hinzu:<\/p>\n\n\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n PHP <\/button>\r\n <\/li>\r\n\r\n \r\n \r\n <\/ul>\r\n