New Delhi

📚 Sommaire

🔧 Configuration du projet

🧩 Gestion des composants

📗 Guide d'installation

📋 Pré-requis

NodeJS version 14 to 16 : here (opens in a new tab)
NPM version supérieur ou égale à 6.x : here (opens in a new tab)

⚙️ Clonage / Dépendances / Docker

Vous devez générer un mot de passe application (opens in a new tab) sur BitBucket pour pouvoir cloner le projet

git clone https://{USERNAME_BITBUCKET}@bitbucket.org/CENSOR/CENSOR.git

Il faut créer un fichier .env dans le dossier back et y copier coller les mêmes valeures que le contenu du fichier .env.example
Installer les dépendances et setup docker

cd new-delhi/front && npm install
cd new-delhi/back && npm install
cd new-delhi && docker-compose -f .\docker-compose.yml -f .\docker-compose.dev.yml up --build

🚀 Lancement du projet en local

Il faut ouvrir deux terminals un pour le front et un pour le back et votre Docker en arrière plan qui tourne la base de donnée pour que Strapi fonctionne

Front (ReactJS)

cd new-delhi/front && npm start

Strapi (Back-Office)

cd new-delhi/back && npm run develop

Docker (base de donnée PostgreSQL)

⛔

DEMO CENSORED ! (sensitive informations)

🌐 Déploiement en production

⛔

DEMO CENSORED ! (sensitive informations)

💾 Faire un Backup/Restore de la base de données

⛔

DEMO CENSORED ! (sensitive informations)

📥 Faire un transfert de la base de donnée en production vers local (Avec Strapi)

ℹ️

Remarque : Cette méthode (beaucoup plus rapide) permet exclusivement de transférer les données de la base de données en production vers la base de données locale. Le processus inverse, c'est-à-dire transférer les données de la base de données locale vers la production, n'est pas pris en charge par cette procédure.

Aller dans le Back Office Strapi en production et générer un Token de Transfert

create_backup_pgadmin

Aller dans votre projet en local

cd new-delhi/back
npm run strapi transfer -- --from https://CENSOR_URL/

- Suivre les instructions

🔑 Réinitialiser un accès administrateur au panel Strapi (back-office)

Dans le cas où vous avez perdu les accès au back-office il existe une méthode pour réinitialiser votre accès administrateur (cela ne fait aucunement perdre les données de la base de donnée)

cd new-delhi/back && npm run strapi admin:reset-user-password --email=existing@user.com --password=NewPassword

Après avoir exécuté cette commande, vous serez à nouveau invité à fournir certaines informations, comme indiqué dans la capture d'écran ci-dessous.

create_backup_pgadmin

⚠️ Comprendre les composants et leur édition

Pour commencer qu'est-ce qu'un composant ?

Un composant est un élément HTML qui représente un élément de la newsletter

create_backup_pgadmin

Chaque composant comporte plusieurs propriétés les plus importantes et à notés sont :

Son nom
Son type (texte, image, séparateur, etc.)
Sa langue (dans quelle newsletter il sera disponible à l'utilisation)
S'il est editable ou non (nous examinerons cette partie plus en détail par la suite)
Son content (sous format JSON qui est ensuite transformé en HTML grâce à une fonction)

Prenons l'exemple du composant 🔤 Titre Centré V2

Il est de type : text
Sa langue est défini sur : ALL (c'est-à-dire que le composant apparaîtra sur toutes les langues donc FR/BE/NL)
Il est éditable : true (c'est-à-dire qu'il y a du contenu que l'utilisateur peut éditer, ici en l'occurence il va pouvoir éditer le texte)
Voici le contenu du composant (format JSON) :

{
  "balise": "div",
  "childrens": [
    {
      "balise": "table",
      "childrens": [
        {
          "balise": "tbody",
          "childrens": [
            {
              "balise": "tr",
              "childrens": [
                {
                  "balise": "td",
                  "attributes": [
                    {
                      "style": "font-size:0",
                      "height": "12",
                      "valign": "top"
                    }
                  ]
                }
              ],
              "attributes": [{}]
            },
            {
              "balise": "tr",
              "childrens": [
                {
                  "balise": "td",
                  "childrens": [
                    {
                      "balise": "div",
                      "attributes": [
                        {
                          "class": "editable"
                        }
                      ],
                      "contentTxt": "TITRE TITRE TITRE"
                    }
                  ],
                  "attributes": [
                    {
                      "align": "center",
                      "style": "text-align: center;\n  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;\n  font-weight: bold;\n  font-size: 22px;\n  color: #0E3368;"
                    }
                  ]
                }
              ],
              "attributes": [{}]
            },
            {
              "balise": "tr",
              "childrens": [
                {
                  "balise": "td",
                  "attributes": [
                    {
                      "style": "font-size:0",
                      "height": "10",
                      "valign": "top"
                    }
                  ]
                }
              ],
              "attributes": [{}]
            }
          ],
          "attributes": [{}]
        }
      ],
      "attributes": [
        {
          "align": "center",
          "class": "container",
          "width": "690",
          "border": "0",
          "cellpadding": "0",
          "cellspacing": "0"
        }
      ]
    }
  ],
  "attributes": [{}]
}

Qui est directement injecté dans le rendu visuel de la newsletter dans une fonction récursive nommée parseJsonToHtml(component.content) qui permet de transformer le contenu JSON d'un composant en HTML.

Avec l'exemple du composant ci-dessus du composant 🔤 Titre Centré V2 Le JSON une fois transformé devient du HTML :

<div>
  <table
    class="container"
    border="0"
    cellspacing="0"
    cellpadding="0"
    width="690"
    align="center"
  >
    <tbody>
      <tr>
        <td height="12" valign="top" style="font-size:0"></td>
      </tr>
      <tr>
        <td
          style="text-align: center;
      font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 22px;
      color: #0E3368;"
          align="center"
        >
          <div class="editable">TITRE TITRE TITRE</div>
        </td>
      </tr>
      <tr>
        <td height="10" valign="top" style="font-size:0"></td>
      </tr>
    </tbody>
  </table>
</div>

Alors, pourquoi ne pas simplement inclure le code HTML directement dans la propriété .content du composant au lieu de passer par la transformation de l'objet JSON ?

Le format JSON offre une gestion optimale et simplifiée du système d'édition.

En récupérant directement les propriétés et clés de l'objet JSON, telles que les src, alt et href, nous pouvons les modifier spécifiquement.

Cette approche évite la manipulation complète d'un composant HTML, réduisant ainsi le risque de bugs et d'actions indésirables.

De plus, le format JSON facilite l'ajout de contrôleurs, permettant de définir les clés à récupérer dans des conditions spécifiques (par exemple il peut y avoir des endroits de mon composant où je souhaite que l'utilisateur ne puisse PAS le modifier).

🎨 Comment créer un composant de A à Z ?

Maintenant que vous comprenez la structure et la modélisation d'un composant, la question qui se pose est comment aborder efficacement la conception d'un composant, du début à sa mise en production sur le CMS.

📐 Modélisation du composant HTML

Créez rapidement votre composant HTML en utilisant un fichier HTML classique avec Live Server.
Importez les styles de la newsletter et développez votre composant jusqu'à obtenir le rendu souhaité.

💡

Simplifiez le processus en téléchargeant une newsletter, en l'ouvrant dans votre IDE, en supprimant le contenu <body></body> existant, puis créez votre composant. Vous bénéficiez ainsi d'un environnement de newsletter préconfiguré avec les styles.

🔀 Transformation du HTML en JSON

Transformez votre composant HTML en composant JSON nécessaire pour le fonctionnement et l'édition en utilisant la fonction htmlToObject(html).

Exemple :

const html = `
<div>
  <table
    class="container"
    border="0"
    cellspacing="0"
    cellpadding="0"
    width="690"
    align="center"
  >
    <tbody>
      <tr>
        <td height="12" valign="top" style="font-size:0"></td>
      </tr>
      <tr>
        <td
          style="text-align: center;
      font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 22px;
      color: #0E3368;"
          align="center"
        >
          <div class="editable">TITRE TITRE TITRE</div>
        </td>
      </tr>
      <tr>
        <td height="10" valign="top" style="font-size:0"></td>
      </tr>
    </tbody>
  </table>
</div>
`;
console.log(htmlToObject(html));

{
  "balise": "div",
  "attributes": [{}],
  "childrens": [
    {
      "balise": "table",
      "attributes": [
        {
          "class": "container",
          "border": "0",
          "cellspacing": "0",
          "cellpadding": "0",
          "width": "690",
          "align": "center"
        }
      ],
      "childrens": [
        {
          "balise": "tbody",
          "attributes": [{}],
          "childrens": [
            {
              "balise": "tr",
              "attributes": [{}],
              "childrens": [
                {
                  "balise": "td",
                  "attributes": [
                    { "height": "12", "valign": "top", "style": "font-size:0" }
                  ]
                }
              ]
            },
            {
              "balise": "tr",
              "attributes": [{}],
              "childrens": [
                {
                  "balise": "td",
                  "attributes": [
                    {
                      "style": "text-align: center;\n      font-family: 'Segoe UI', Arial, Helvetica, sans-serif;\n      font-weight: bold;\n      font-size: 22px;\n      color: #0E3368;",
                      "align": "center"
                    }
                  ],
                  "childrens": [
                    {
                      "balise": "div",
                      "attributes": [{ "class": "editable" }],
                      "contentTxt": "TITRE TITRE TITRE"
                    }
                  ]
                }
              ]
            },
            {
              "balise": "tr",
              "attributes": [{}],
              "childrens": [
                {
                  "balise": "td",
                  "attributes": [
                    { "height": "10", "valign": "top", "style": "font-size:0" }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

🏗️ Création du composant sur le back-office Strapi

Rendez vous sur le back-office Strapi
Gestion du contenu
componentv2, puis créer une nouvelle entrée

create_component

Vous devez ensuite configurer votre nouveau composant
💡
Ajoutez un emoji pertinent au nom du composant pour une lecture facilitée lors de la création de la newsletter.

ℹ️
Assurez-vous de mettre la propriété "InputEditable": true dans le même objet que les "contextTxt" que vous souhaitez rendre éditables.
Sinon, ils ne seront pas visibles lors de la phase d'édition pour les utilisateurs.

✅

Votre composant est désormais disponible à l'utilisation

✏️ Comment modifier un composant ?

🔍 Retrouver le composant sur le back-office Strapi

Utilisez les différentes fonctionnalités pour retrouver le composant que vous souhaitez modifier.

find_component

Selectionnez votre composant, vous arriverez alors sur le même layout que lors de la phase de création voir ici
Faites les modifications voulu, puis n'oubliez pas de valider.

🗑️ Comment supprimer ou désactiver un composant ?

❌ Supprimer un composant

Retrouver votre composant
Supprimer le composant depuis le layout de création voir ici pour confirmer qu'il s'agit du bon composant avant de le supprimer.

delete_component

🚫 Désactiver un composant

Retrouver votre composant
Pour désactiver votre composant depuis le layout de création voir ici la fonctionnalité de Draft (brouillon) est disponible depuis le back-office, choissisez alors de désactiver ou non le composant.

disable_component

Introduction Santa Monica