Strapi v4 : Envoyer un email personnalisé

Introduction

Notre objectif principal est de vous guider pas à pas pour créer un système automatisé qui enverra des emails personnalisés chaque fois qu’un événement particulier se produit dans votre application Strapi. Pour illustrer cela de manière concrète, nous allons créer un scénario d’utilisation pratique : la mise en place d’un tchat entre deux utilisateurs de notre instance Strapi via un content-type “message”. À chaque insertion d’un nouveau message, un email personnalisé sera envoyé au destinataire.

Prérequis

Avant de commencer, assurez-vous d’avoir installé Node.js et yarn. Vous pouvez installer Strapi globalement avec la commande suivante :

yarn create strapi-app my-project --ts --quickstart

Création du content-type Message

Pour le content-type Message nous aurons les champs ci-dessous :

  • Field: text, Type: text
  • sender: relation, Type: has many
  • recipient: relation, Type: has many

Exécutez la commande et suivez les instructions ci-dessous pour créer l’entité Message. Comme le type de champ relation n’est pas disponible dans la console, il sera ajouté ultérieurement via l’interface.

yarn strapi generate content-type Message

#Répondez de la manière suivante :
Content type singular name message
Content type plural name messages
Please choose the model type Collection Type
Use draft and publish? No
Do you want to add attributes? Yes
Name of attribute text
What type of attribute text
Do you want to add another attribute? No
Where do you want to add this model? Add model to new API
Name of the new API? message
Bootstrap API related files? Yes
✔  ++ /api/message/content-types/message/schema.json
✔  +- /api/message/content-types/message/schema.json
✔  ++ /api/message/controllers/message.ts
✔  ++ /api/message/services/message.ts
✔  ++ /api/message/routes/message.ts

Se rendre sur le menu “Content-type Builder” > “Message” afin d’ajouter deux champs de type relation, un pour l’expéditeur (sender) et un pour le destinataire (recipient).

Remplissage des données

Commencez par créer un compte utilisateur en insérant les informations nécessaires via le panneau d’administration Strapi. Il s’agit de la première étape pour permettre l’association ultérieure de Message à cet utilisateur.

Répétez cette étape pour créer un nouvel utilisateur qui sera utilisé comme destinataire des messages. Veuillez renseigner votre adresse e-mail dans les informations de cet utilisateur, car c’est lui qui recevra les e-mails.

Configurer les permissions

Pour configurer les autorisations d’accès pour l’entité “Message”, suivez ces étapes claires :

  1. Accédez à la section “Settings” > “Roles”.
  2. Sélectionnez le rôle “Public” pour simplifier le use case.
  3. Dans la section “User-Permissions > Message”, activez correctement les autorisations “findOne”, “create”.
  4. Ensuite, allez dans la section “Users-Permissions”.
  5. Sous “User”, assurez-vous que les autorisations “find” et “findOne” sont correctement activées.

Création du template de l’email

Nous avons choisi d’utiliser le plugin Strapi Email Designer pour la création de notre template d’e-mail, et ce choix est motivé par plusieurs avantages qui renforcent la gestion et la personnalisation de nos communications par e-mail. Ce plugin est conçu pour s’intégrer en toute harmonie avec l’écosystème Strapi. Son utilisation s’aligne naturellement avec l’interface utilisateur de Strapi, facilitant ainsi la création et la gestion des modèles d’e-mails directement dans l’administration de Strapi.

Pour l’installation de Strapi Email Designer, commencez par arrêter le serveur, puis exécutez la commande ci-dessous :

# Installation
yarn add strapi-plugin-email-designer@latest

Strapi Email Designer utilise des fichiers CSS et JavaScript qui sont stockés sur des serveurs distants (CDN, etc.). Afin de permettre au navigateur de télécharger ces fichiers depuis les serveurs nécessaires, il faut configurer la politique de sécurité de Strapi afin d’autoriser ces téléchargements.

Pour ce faire, vous devez remplacer la ligne relative à strapi::security dans le fichier config/middlewares.js par une configuration appropriée. Le fichier config/middlewares.js à la racine du projet devrait ressembler à ceci :

export default [
  'strapi::logger',
  'strapi::errors',
  //"strapi::security",
  // Début code ajouté
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        directives: {
          "script-src": ["'self'", "editor.unlayer.com", "'unsafe-inline'"],
          "script-src-elem": ["'self'", "editor.unlayer.com", "'unsafe-inline'"],
          "frame-src": ["'self'", "editor.unlayer.com"],
          "img-src": [
            "'self'",
            "data:",
            "cdn.jsdelivr.net",
            "editor.unlayer.com",
            "s3.amazonaws.com",
            "strapi.io",
            "market-assets.strapi.io",
          ],
        },
      },
    },
  },
  // Fin code ajouté
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

Nous pouvons à présent créer notre template d’email depuis le menu “Email designer” :

Comme vous pouvez le constater, nous avons créé un modèle de base contenant des variables au niveau de l’objet, du corps de notre email et du bouton. Ces variables ont été extraites de l’objet du message envoyé, suivant ainsi naturellement la structure de notre content type “message”. Nous examinerons ultérieurement, lors de l’envoi de l’email au niveau du code, comment ces paramètres sont injectés dans notre modèle.

Configuration de l’envoi d’email

Pour l’envoi de l’email, nous utiliserons un service d’envoi d’e-mails appelé SendGrid. Vous pouvez créer un compte sur la plateforme, générer un token, et configurer une adresse e-mail expéditrice, car ces informations seront nécessaires pour la configuration de SendGrid dans Strapi.

Pour installer le plugin SendGrid, arrêtez le serveur puis exécutez la commande ci-dessous :

yarn add @strapi/provider-email-sendgrid

Ajoutez le token ainsi que l’adresse email expéditrice dans le fichier .env à la racine du projet comme ci-dessous :

#Sendgrid
SENDGRID_API_KEY=SG.9EJKHJHHGDQ-Os_Ay96ZIXUQ.NcJhZhjjkkhffgN9kO_KvUjjhfsAxxs
[email protected]
[email protected]

Créez le fichier config/plugins.ts et placez-y le code suivant :

export default ({ env }) => ({
    email: {
        config: {
            provider: 'sendgrid',
            providerOptions: {
                apiKey: env('SENDGRID_API_KEY'),
            },
            settings: {
                defaultFrom: env('SENDGRID_EMAIL_FROM'),
                defaultReplyTo: env('SENDGRID_EMAIL_REPLY'),
            },
        },
    }
});

Création du déclencheur

Dans cette section, nous allons écouter un événement déclenché à chaque nouvel enregistrement dans notre content-type “message”. Cela nous permettra d’automatiser l’envoi d’un e-mail pour informer le destinataire.

Pour ce faire créez le fichier src/api/message/content-types/message/lifecycles.ts placez-y le code suivant :

export default {
    async afterCreate(event) {
        const { result } = event;

        try {
            // Absence des relations dans result  
            // Récuperation du message avec les relations
            const message = await strapi.entityService.findOne(
                "api::message.message",
                result.id,
                { populate: ["sender", "recipient"] }
            );

            await strapi
                .plugin("email-designer")
                .service("email")
                .sendTemplatedEmail(
                    {
                        to: message.recipient.email,
                        attachments: [],
                    },
                    {
                        templateReferenceId: 1
                    },
                    message
                );
        } catch (error) {
            console.error("Erreur lors de l'envoi de l'email :", error);
        }
    }
};

Tester

# Démarrer le serveur
yarn develop

# Envoyer un message à l'utilisateur avec ID=2
curl -X POST -H "Content-Type: application/json" -d '{
  "data": {
    "text": "Bonjour John Doe",
    "sender": 1,
    "recipient": 2
  }
}' http://localhost:1337/api/messages

Conclusion

En conclusion, ce guide complet a couvert de manière approfondie la mise en place d’un système d’envoi d’e-mails personnalisés dans une application Strapi en utilisant des outils puissants tels que Strapi Email Designer et Strapi SendGrid. En adoptant cette approche, vous avez maintenant la capacité de créer des modèles d’e-mails visuellement attrayants directement depuis l’interface d’administration Strapi, tout en profitant de la robustesse du module Strapi SendGrid pour la gestion efficace de l’envoi d’e-mails.

Architecte logiciel & CTO * Plus de publications

Architecte logiciel, Développeur d'application diplomé d'ETNA, la filière d'alternance d'Epitech, j'ai acquis une expertise solide dans le développement d'applications, travaillant sur des projets complexes et techniquement diversifiés. Mon expérience englobe l'utilisation de divers frameworks et langages, notamment Symfony, Api Platform, Drupal, Zend, React Native, Angular, Vue.js, Shell, Pro*C...

Contributeurs

0 0 votes
Évaluation de l'article
guest
0 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires

Ingénierie informatique (SSII)

Applize crée des logiciels métiers pour accompagner les entreprises dans la transition vers le zéro papier.


Avez-vous un projet en tête ? Discutons-en.