\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\nEnfin, cr\u00e9ez un mod\u00e8le pour informer les utilisateurs que leur commande a \u00e9t\u00e9 livr\u00e9e, en cr\u00e9ant un fichier nomm\u00e9 delivered.html<\/code> dans le dossier<\/code> src\/email-templates\/html<\/code> et en ajoutant le code suivant\u00a0:<\/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\nPour g\u00e9rer et g\u00e9n\u00e9rer des mod\u00e8les d’emails de mani\u00e8re dynamique, vous devez cr\u00e9er une classe qui charge et organise les mod\u00e8les pour les diff\u00e9rents statuts de commande. Cette classe r\u00e9cup\u00e9rera le mod\u00e8le appropri\u00e9 et en effectuera le rendu avec les donn\u00e9es sp\u00e9cifiques au client. Pour ce faire, cr\u00e9ez un nouveau fichier nomm\u00e9 index.ts<\/code> dans le dossier src\/email-templates <\/code> et ajoutez le code suivant\u00a0:<\/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\nCette classe initialise une variable priv\u00e9e nomm\u00e9e templates, qui stocke les mod\u00e8les d’emails dans une structure Map pour une recherche rapide en fonction du statut de la commande. L’utilisation d’une structure Map garantit une r\u00e9cup\u00e9ration efficace et \u00e9vite de lire les fichiers de mani\u00e8re r\u00e9p\u00e9t\u00e9e \u00e0 partir du disque. La classe d\u00e9finit \u00e9galement les m\u00e9thodes suivantes\u00a0:<\/p>\n\n\n\n
\nloadTemplates<\/code> (priv\u00e9e) lit les mod\u00e8les HTML \u00e0 partir de fichiers et les stocke dans la structure Map templates, avec leurs objets d’email correspondants.<\/li>\n\n\n\ngetTemplate<\/code> r\u00e9cup\u00e8re le mod\u00e8le d’email pour un statut de commande donn\u00e9 et renvoie une erreur si aucun mod\u00e8le n’est trouv\u00e9.<\/li>\n\n\n\nrenderTemplate<\/code> utilise EJS pour effectuer un rendu dynamique d’un mod\u00e8le avec les donn\u00e9es fournies.<\/li>\n<\/ul>\n\n\n\nImpl\u00e9mentation de la fonctionnalit\u00e9 d’envoi d’emails<\/h2>\n\n\n\n Une fois les mod\u00e8les d’emails configur\u00e9s, l’\u00e9tape suivante consiste \u00e0 impl\u00e9menter la fonctionnalit\u00e9 d’envoi des notifications. Cela implique de mettre les t\u00e2ches d’email en file d’attente et de les traiter de mani\u00e8re asynchrone.<\/p>\n\n\n\n
Mais avant de pouvoir le faire, vous devez installer quelques d\u00e9pendances en ex\u00e9cutant la commande suivante\u00a0:<\/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\nVoici un aper\u00e7u de chacune de ces d\u00e9pendances\u00a0:<\/p>\n\n\n\n
\nmailgun.js<\/code> est un client Node.js permettant d’interagir avec l’API de Mailgun. Vous l’utiliserez pour envoyer des emails transactionnels.<\/li>\n\n\n\nform-data<\/code> est un package requis par mailgun.js<\/code> pour g\u00e9rer les envois de formulaires lors de l’envoi d’emails.<\/li>\n\n\n\nbullmq<\/code> est une biblioth\u00e8que de file d’attente de t\u00e2ches permettant de g\u00e9rer les t\u00e2ches asynchrones. Elle vous permet de mettre les notifications par email en file d’attente et de les traiter en arri\u00e8re-plan.<\/li>\n\n\n\nioredis<\/code> est un client Redis pour Node.js utilis\u00e9 par BullMQ pour stocker et g\u00e9rer les t\u00e2ches mises en file d’attente.<\/li>\n<\/ul>\n\n\n\nEnsuite, vous devez d\u00e9finir un client de l’API de Mailgun que vous utiliserez pour envoyer des emails. Pour ce faire, cr\u00e9ez un nouveau fichier dans src\/config\/mailgun.config.ts<\/code> et ajoutez le code suivant\u00a0:<\/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\nCe code configure et exporte un client Mailgun \u00e0 l’aide de la biblioth\u00e8que mailgun.js<\/code> et de form-data<\/code>, ce qui permet \u00e0 votre application d’envoyer des emails via l’API de Mailgun avec la cl\u00e9 API stock\u00e9e dans les variables d’environnement.<\/p>\n\n\n\nVous devez maintenant d\u00e9finir une connexion Redis qui sera utilis\u00e9e par BullMQ pour stocker et g\u00e9rer les t\u00e2ches en arri\u00e8re-plan. Pour ce faire, cr\u00e9ez un nouveau fichier nomm\u00e9 redis.config.ts<\/code> dans le dossier src\/config<\/code> et ajoutez le code ci-dessous\u00a0:<\/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\nVous devez configurer une file d’attente BullMQ pour les notifications d’exp\u00e9dition, qui g\u00e9rera les t\u00e2ches de notification par email en arri\u00e8re-plan en utilisant la connexion Redis d\u00e9finie \u00e0 l’\u00e9tape pr\u00e9c\u00e9dente. Pour ce faire, cr\u00e9ez un nouveau fichier nomm\u00e9 queues.config.ts<\/code> dans le dossier src\/config<\/code> et ajoutez le code suivant\u00a0:<\/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\nCe code d\u00e9finit \u00e9galement des noms pour la file d’attente et le type de t\u00e2che, qui peuvent \u00eatre utilis\u00e9s dans d’autres parties de l’application pour \u00e9viter les cha\u00eenes de caract\u00e8res cod\u00e9es en dur.<\/p>\n\n\n\n
Enfin, cr\u00e9ez un nouveau fichier dans src\/services\/notifications.service.ts<\/code> et ajoutez le code suivant\u00a0:<\/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