Erstellen von Transaktions-E-Mail-Workflows für Versandbenachrichtigungen mit der Mailgun-API

Wenn Sie etwas online bestellen, erwarten Sie, dass Sie genau wissen, wo es sich befindet und wann es ankommt. Transaktions-E-Mail-Workflows machen diese Art der zeitnahen Kommunikation möglich.

Im Gegensatz zu Marketing-E-Mails, die Produkte bewerben, werden Transaktions-E-Mails als Reaktion auf die Aktion eines Nutzers gesendet, wie zum Beispiel die Aufgabe einer Bestellung oder der Erhalt eines Versand-Updates. Sie liefern Details in Echtzeit, die Nutzer auf jedem Schritt des Weges auf dem Laufenden halten.

In diesem Artikel erfahren Sie, wie Sie einen Transaktions-E-Mail-Workflow für Versandbenachrichtigungen mithilfe von der Mailgun-API. erstellen. Der Workflow integriert BullMQ, ein leistungsstarkes Job-Queue-System, um E-Mail-Benachrichtigungen getrennt von der Hauptanwendungslogik in die Warteschlange zu stellen und zu verarbeiten, was die Skalierbarkeit und Leistung verbessert. Dies ist nützlich für Anwendungen mit hohem Datenaufkommen, bei denen der direkte E-Mail-Versand innerhalb eines Anfrage-Antwort-Zyklus das System verlangsamen könnte.

Um den Schritten zu folgen, benötigen Sie diese Tools und Konten:

• Ein Mailgun-Konto
• Node.js und Docker , das auf Ihrem lokalen Rechner installiert ist
• Einen Code-Editor (dieses Tutorial verwendet VS Code) und einen Webbrowser

Bevor wir in die Implementierung eintauchen, werfen wir einen Blick auf den Workflow:

So funktioniert der Prozess:

• Das Versandteam (oder die Person, die für Versand-Updates zuständig ist) sendet eine HTTP-Anfrage, um den Bestellstatus zu aktualisieren
• Der Express-Server aktualisiert den Bestellstatus in der SQLite-Datenbank und stellt einen Job in BullMQ in die Warteschlange
• Ein BullMQ-Worker verarbeitet Jobs aus der Warteschlange und interagiert mit der Mailgun-API, um eine E-Mail an den Kunden zu senden
• Der Worker wiederholt fehlgeschlagene Jobs automatisch
• Mailgun stellt die E-Mail an den Kunden zu

Um die Mailgun-API zu nutzen, benötigen Sie eine Mailgun-Domain und einen API-Schlüssel zur Authentifizierung. Mailgun bietet zwei Arten von Domains: Sandbox-Domains für Testzwecke und benutzerdefinierte Domains für den Einsatz in Produktionsumgebungen.

In diesem Leitfaden verwenden Sie eine Sandbox-Domain. Jedes Mailgun-Konto wird automatisch mit einer solchen Domain bereitgestellt, sodass Sie sie nicht manuell erstellen müssen. Um Ihre Sandbox-Domain zu erhalten, loggen Sie sich in Ihr Mailgun-Konto ein und navigieren Sie in der Seitenleiste zu Send > Sending > Domains. Kopieren Sie Ihre Domain:

Standardmäßig kann eine Sandbox-Domain E-Mails nur an zugelassene Empfänger. Um eine E-Mail-Adresse für den Empfang zu autorisieren, klicken Sie auf der Seite Domains auf Ihren Domainnamen, um die Einstellungen anzuzeigen. Fügen Sie auf der Registerkarte Setup unter Add authorized recipients die E-Mail-Adresse hinzu, an die Sie E-Mails senden möchten. Befolgen Sie unbedingt die Anweisungen, die an die von Ihnen angegebene E-Mail-Adresse gesendet wurden, um sie für den Empfang zu autorisieren:

Um Ihren API-Schlüssel zu erhalten, navigieren Sie zur Seite API Keys und klicken Sie auf Add new key, um einen neuen API-Schlüssel zu erstellen. Geben Sie einen Namen für den Schlüssel ein und klicken Sie auf Create Key. Stellen Sie anschließend sicher, dass Sie den Wert Ihres Schlüssels kopieren, da dieser nur einmal angezeigt wird:

Damit sich dieses Tutorial auf die Erstellung von Transaktions-E-Mail-Workflows konzentrieren kann, haben wir eine Startvorlage für Sie vorbereitet, auf der Sie aufbauen können. Klonen Sie die Vorlage auf Ihren lokalen Rechner, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

git clone --single-branch -b starter-template https://github.com/kimanikevin254/mailgun-transactional-email-workflows.git

Hier sind die wichtigsten Dateien im Projekt:

• src/controllers/order.controller.ts enthält zwei Methoden:
  • index rendert die Admin-Benutzeroberfläche, die in src/views/admin.ejs definiert ist
  • updateOrderStatus aktualisiert den Bestellstatus in der Datenbank
• src/database/entity/order.entity.ts definiert die Bestell-Entität
• src/database/entity/user.entity.ts definiert die Nutzer-Entität
• src/database/seed.ts befüllt die Datenbank mit einem Beispielnutzer und einer Beispielbestellung
• docker-compose.yml führt Redis in Docker aus, was von BullMQ benötigt wird

npm install

Benennen Sie als Nächstes die Datei .env.example in .env um und ersetzen Sie die Platzhalterwerte für MAILGUN_DOMAIN und MAILGUN_API_KEY durch die Anmeldedaten, die Sie über das Mailgun-Dashboard erhalten haben. Geben Sie für die Variable MAIL_FROM Ihre E-Mail-Adresse als Wert ein.

Öffnen Sie als Nächstes die Datei src/database/seed.ts und ersetzen Sie die Platzhalterdetails in der userInfo-Konstante durch Ihre Angaben. Stellen Sie bei der E-Mail-Adresse sicher, dass Sie eine angeben, die Sie für den Empfang autorisiert haben.

Befüllen Sie schließlich die Datenbank, indem Sie den Befehl npm run db:seed in Ihrem Terminal ausführen. Sie können das Projekt nun mit dem Befehl npm run dev ausführen und zu http://localhost:3000 in Ihrem Browser navigieren, um den Bestellstatus anzuzeigen und zu aktualisieren:

Im nächsten Abschnitt implementieren Sie einen Workflow, der automatisch eine E-Mail an den Nutzer sendet, sobald der Bestellstatus aktualisiert wird.

Gut gestaltete E-Mail-Vorlagen verbessern die Lesbarkeit, steigern das Nutzererlebnis und stellen sicher, dass Ihre E-Mails auf verschiedenen Geräten professionell aussehen. In diesem Abschnitt erstellen Sie Vorlagen, die Ihre Transaktions-E-Mails klar, ansprechend und effektiv machen.

Eine Bestellung durchläuft drei Status (versandt, in Zustellung und zugestellt), wie im OrderStatus type in src/types/index.ts. definiert. Sie erstellen für jeden Status eine entsprechende E-Mail-Vorlage, um Ihre Kunden bei jedem Schritt auf dem Laufenden zu halten.

Erstellen Sie dazu eine Datei unter src/email-templates/html/shipped.html und fügen Sie den folgenden Code hinzu:

                                

                                    <!DOCTYPE html>rn<html>rn<head>rn    <meta charset="UTF-8" />rn    <title>Order Shipped</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: #007bff; 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 Shipped! ✈️rn        </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;">Your order has been shipped and is on its way to you. 📦</p>rn            <p style="margin: 0 0 10px;"><strong>Tracking Number:</strong> <%= trackingNumber %></p>rn            <p style="margin: 0 0 10px;">You can track your package below. We hope you enjoy your purchase!</p>rnrn            <a href="https://yourwebsite.com/track?trackingNumber=<%= trackingNumber %>"rn               style="background-color: #007bff; color: white; text-decoration: none; padding: 12px 18px; border-radius: 5px; display: inline-block; margin-top: 15px; font-weight: bold;">rn                Track Your Shipmentrn            </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! 🛒rn        </div>rn    </div>rn</body>rn</html>rn
                                
                            

Diese E-Mail-Vorlage dient dazu, Kunden darüber zu benachrichtigen, dass ihre Bestellung versandt wurde. Sie enthält Platzhalter für den Kundennamen und die Tracking-Nummer, die dynamisch ausgefüllt werden von EJS beim Rendern der Vorlage. Die Vorlagen für die anderen beiden Bestellstatus folgen demselben Format.

Erstellen Sie eine Vorlage, um Nutzer darüber zu benachrichtigen, dass sich ihre Bestellung in Zustellung befindet, indem Sie eine Datei namens out_for_delivery.html im Ordner src/email-templates/html erstellen und den folgenden Code hinzufügen:

                                

                                    <!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! 🚚rn        </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. 📦</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! 🛍️rn        </div>rn    </div>rn</body>rn</html>
                                
                            

Erstellen Sie abschließend eine Vorlage, um Nutzer darüber zu benachrichtigen, dass ihre Bestellung zugestellt wurde, indem Sie eine Datei namens delivered.html im folder src/email-templates/html erstellen und den folgenden Code hinzufügen:

                                

                                    <!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! 🎉rn        </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. 🎁</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! 🛍️rn        </div>rn    </div>rn</body>rn</html>
                                
                            

Um E-Mail-Vorlagen dynamisch zu verwalten und zu rendern, müssen Sie eine Klasse erstellen, die Vorlagen für verschiedene Bestellstatus lädt und organisiert. Diese Klasse ruft die richtige Vorlage ab und rendert sie mit kundenspezifischen Daten. Erstellen Sie dazu eine neue Datei namens index.ts im src/email-templates folder und fügen Sie den folgenden Code hinzu:

                                

                                    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! ✈️",rn            out_for_delivery: "Your Order is Out for Delivery! 🚚",rn            delivered: "Your Order Has Been Delivered! 🎉",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}
                                
                            

Diese 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ßerdem die folgenden Methoden:

• loadTemplates (privat) liest HTML-Vorlagen aus Dateien und speichert sie zusammen mit ihren entsprechenden Betreffzeilen in der templates-Map.
• getTemplate ruft die E-Mail-Vorlage für einen bestimmten Bestellstatus ab und gibt einen Fehler aus, wenn keine Vorlage gefunden wird.
• renderTemplate verwendet EJS, um eine Vorlage mit bereitgestellten Daten dynamisch zu rendern.

Nachdem die E-Mail-Vorlagen eingerichtet sind, ist der nächste Schritt die Implementierung der Funktion für den Versand von Benachrichtigungen. Dies beinhaltet das Einreihen von E-Mail-Jobs in die Warteschlange und deren asynchrone Verarbeitung.

Bevor Sie dies tun können, müssen Sie jedoch einige Abhängigkeiten installieren, indem Sie den folgenden Befehl ausführen:

npm i mailgun.js@11.1.0 form-data@4.0.2 bullmq@5.41.2 ioredis@5.5.0

Hier ist ein Überblick über jede dieser Abhängigkeiten:

• mailgun.js ist ein Node.js-Client für die Interaktion mit der Mailgun-API. Sie verwenden dies, um Transaktions-E-Mails zu versenden.
• form-data ist ein Paket, das von mailgun.js benötigt wird, um Formularübermittlungen beim Versand von E-Mails zu verarbeiten.
• bullmq ist eine Job-Warteschlangen-Bibliothek zur Verarbeitung asynchroner Aufgaben. Dadurch können Sie E-Mail-Benachrichtigungen in die Warteschlange einreihen und im Hintergrund verarbeiten.
• ioredis ist ein Redis-Client für Node.js, der von BullMQ verwendet wird, um Jobs in der Warteschlange zu speichern und zu verwalten.

Als Nächstes müssen 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 und fügen Sie den folgenden Code hinzu:

                                

                                    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});
                                
                            

Dieser Code richtet einen Mailgun-Client mit der Bibliothek mailgun.js und form-data ein und exportiert ihn, sodass Ihre Anwendung E-Mails über die Mailgun-API mit dem in Umgebungsvariablen gespeicherten API-Schlüssel versenden kann.

Nun müssen 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 im Ordner src/config und fügen Sie den unten stehenden Code hinzu:

                                

                                    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});
                                
                            

Sie müssen eine BullMQ-Warteschlange für die Versandbenachrichtigungen einrichten, die Hintergrundjobs für E-Mail-Benachrichtigungen unter Verwendung der im vorherigen Schritt definierten Redis-Verbindung verarbeitet. Erstellen Sie dazu eine neue Datei namens queues.config.ts im Ordner src/config und fügen Sie den folgenden Code hinzu:

                                

                                    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);
                                
                            

Dieser Code definiert außerdem Namen für die Warteschlange und den Jobtyp, die in anderen Teilen der Anwendung verwendet werden können, um fest codierte Strings zu vermeiden.

Erstellen Sie abschließend eine neue Datei unter src/services/notifications.service.ts und fügen Sie den folgenden Code hinzu:

                                

                                    import { Job, Queue, Worker } from "bullmq";rnimport {rn    QUEUE_NAMES,rn    SHIPPING_NOTICATIONS_QUEUE,rn    JOB_NAMES,rn} from "../config/queues.config";rnimport { redisConfig } from "../config/redis.config";rnimport { mgClient } from "../config/mailgun.config";rnimport { IMailgunClient } from "mailgun.js/Interfaces";rnimport { EmailTemplateManager } from "../email-templates";rnimport { MailgunMessageData } from "mailgun.js";rnimport { NotificationJob } from "../types";rnrnexport class NotificationService {rn    private queue: Queue;rn    private mailgunClient: IMailgunClient;rn    private templateManager: EmailTemplateManager;rnrn    constructor() {rn        this.queue = SHIPPING_NOTICATIONS_QUEUE;rn        this.mailgunClient = mgClient;rn        this.templateManager = new EmailTemplateManager();rn        this.setupWorker();rn    }rnrn    private setupWorker() {rn        const worker = new Worker(rn            QUEUE_NAMES.SHIPPING_NOTICATIONS,rn            async (job) => {rn                console.log(`Processing job: ${job.id}`);rn                await this.processNotification(job);rn            },rn            {rn                connection: redisConfig,rn            }rn        );rnrn        worker.on("completed", (job) => {rn            console.log(`Job ${job.id} completed successfully`);rn        });rnrn        worker.on("failed", (job, error) => {rn            console.log(`Job ${job?.id} failed`, error);rn        });rn    }rnrn    private async processNotification(job: Job<NotificationJob>) {rn        const { email, trackingNumber, status, metadata } = job.data;rnrn        try {rn            const template = this.templateManager.getTemplate(status);rn            const emailData: MailgunMessageData = {rn                from: process.env.MAIL_FROM,rn                to: email,rn                subject: template.subject,rn                html: this.templateManager.renderTemplate(template.html, {rn                    trackingNumber,rn                    ...metadata,rn                }),rn            };rnrn            await this.mailgunClient.messages.create(rn                process.env.MAILGUN_DOMAIN,rn                emailDatarn            );rn        } catch (error) {rn            console.log(error);rn            throw error;rn        }rn    }rnrn    async queueNotification(data: NotificationJob) {rn        await this.queue.add(JOB_NAMES.SEND_NOTIFICATION, data, {rn            attempts: 5, // number of retry attempts before failing permanentlyrn            backoff: {rn                type: "exponential", // Retry using exponential backoffrn                delay: 5000, // Delay in ms before retryingrn            },rn        });rn        console.log("Job queued successfully");rn    }rn}
                                
                            

Dieser Code definiert eine NotificationService-Klasse, die E-Mail-Benachrichtigungen mithilfe eines Job-Warteschlangensystems mit BullMQ und Mailgun verarbeitet. Diese Klasse initialisiert drei private Eigenschaften: queue, die Warteschlange, in die E-Mail-Jobs eingereiht werden; mailgunClient, den Mailgun-Client zum Versenden von E-Mails; und templateManager, eine Instanz der zuvor erstellten TemplateManager-Klasse zur Verwaltung und zum Abruf von E-Mail-Vorlagen. Diese Klasse definiert außerdem die folgenden Methoden:

• setupWorker erstellt einen Worker, der auf neue E-Mail-Jobs wartet und diese verarbeitet. Er protokolliert den Abschluss oder das Fehlschlagen von Jobs.
• processNotification ruft die richtige E-Mail-Vorlage ab, füllt sie mit dynamischen Daten und versendet die E-Mail über Mailgun.
• queueNotification fügt der Warteschlange einen neuen E-Mail-Job hinzu, mit Wiederholungsversuchen und exponentiellem Backoff für fehlgeschlagene Versuche. Diese Methode kann aus anderen Teilen der Anwendung aufgerufen werden, um Jobs zur Warteschlange hinzuzufügen.

Um E-Mail-Benachrichtigungen zu versenden, wenn ein Bestellstatus aktualisiert wird, müssen Sie einen Job in das Benachrichtigungssystem einreihen. Öffnen Sie dazu die Datei src/controllers/order.controller.ts und fügen Sie die folgende Importanweisung hinzu, um die NotificationService-Klasse zu importieren:

import { NotificationService } from "../services/notifications.service";

Definieren Sie als Nächstes eine private Eigenschaft innerhalb der OrderController-Klasse, um eine Instanz der NotificationService-Klasse zu speichern:

private notificationService: NotificationService;

Initialisieren Sie diese Eigenschaft, indem Sie den folgenden Code in die constructor-Methode einfügen:

this.notificationService = new NotificationService();

Fügen Sie abschließend den folgenden Code innerhalb der updateOrderStatus-Methode nach await this.orderRepository.save(order); hinzu, um einen Job in die Warteschlange einzureihen, sobald der Bestellstatus erfolgreich aktualisiert wurde:

                                

                                    // Send notificationrnthis.notificationService.queueNotification({rn    email: order.user.email,rn    trackingNumber: order.trackingNumber,rn    status,rn    metadata: {rn        name: order.user.name.split(" ")[0],rn    },rn});
                                
                            

Der Transaktions-E-Mail-Workflow ist nun abgeschlossen. Fahren Sie nun fort und testen Sie, ob alles wie erwartet funktioniert.

Um sicherzustellen, dass alles korrekt funktioniert, starten Sie Redis, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

docker compose up -d

Nach dem Ausführen dieses Befehls überprüfen Sie, ob Redis aktiv ist, indem Sie die Container auflisten:

docker ps

Dieser Befehl zeigt eine Liste der aktiven Container an, und Sie sollten den ausgeführten redis-Container sehen.

Starten Sie als Nächstes den Express-Server mit dem Befehl npm run dev und navigieren Sie zu http://localhost:3000 in Ihrem Browser. Aktualisieren Sie im Dashboard der Anwendung den Bestellstatus auf eine der verfügbaren Optionen. Sobald dieser aktualisiert ist, erhalten Sie eine sofortige Antwort:

In Ihrem Terminal erhalten Sie ein Protokoll, das Sie darüber benachrichtigt, dass der E-Mail-Versandjob erfolgreich in die Warteschlange eingereiht wurde und verarbeitet wird:

Job queued successfully
Processing job: 1

Und wenn er abgeschlossen ist:

Job 1 completed successfully

Sie erhalten dann eine E-Mail mit dem aktualisierten Bestellstatus:

Jedes Mal, wenn Sie den Status einer Bestellung aktualisieren, sendet das System automatisch eine entsprechende E-Mail an den Nutzer, um diesen auf dem Laufenden zu halten:

Der vollständige Code der Anwendung ist verfügbar auf GitHub.

Um sicherzustellen, dass Ihre Transaktions-E-Mails Kunden effektiv erreichen, müssen Sie deren Zustellstatus und Öffnungsraten überwachen und etwaige Fehler beheben. Mailgun bietet ein Dashboard, in dem Sie gesendete E-Mails nachverfolgen, überprüfen, ob sie zugestellt, geöffnet oder angeklickt wurden, und Bounce-Berichte einsehen.

Greifen Sie auf dieses Dashboard zu, indem Sie in Mailgun zu Send > Reporting > Metrics navigieren:

Öffnungsraten werden jedoch nicht automatisch nachverfolgt, und Sie müssen diese manuell über den Tab Settings Ihrer Absenderdomain konfigurieren:

Weitere Informationen zum Nachverfolgen von Öffnungs- und Klickraten finden Sie in der offiziellen Dokumentation.

Verwenden Sie zusätzlich Webhooks , um Echtzeit-Benachrichtigungen über fehlgeschlagene Zustellungen zu erhalten und entsprechende Maßnahmen zu ergreifen, wie zum Beispiel den erneuten Versand der E-Mail.

Durch die aktive Überwachung Ihrer E-Mail-Performance verbessern Sie die Zustellbarkeit, reduzieren Bounces und stellen sicher, dass wichtige Benachrichtigungen Ihre Kunden erreichen.

In diesem Artikel haben Sie erfahren, wie Sie einen Transaktions-E-Mail-Workflow für Versandbenachrichtigungen mit Mailgun, BullMQ und Redis einrichten. Sie haben gelernt, wie Sie Mailgun für den E-Mail-Versand einrichten, eine Job-Warteschlange mit BullMQ konfigurieren und in ein System zur Aktualisierung von Bestellungen integrieren, um sicherzustellen, dass Kunden E-Mail-Benachrichtigungen in Echtzeit erhalten. Dieser Ansatz verbessert die Kommunikation und steigert das gesamte Kundenerlebnis.

War das hilfreich? Abonnieren Sie unseren Newsletter für weitere Tutorials und detaillierte Einblicke wie diesen.

Autor: Kevin Kiman