Santa Monica

Santa Monica

📚 Sommaire

🔧 Configuration du projet

📡 Gestion des sondes

📗 Guide d'installation

📋 Pré-requis

⚙️ 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 fixsantamonica/front && npm install
cd fixsantamonica/back && npm install
cd fixsantamonica/consumer && npm install
cd fixsantamonica && docker-compose -f .\docker-compose.yml -f .\docker-compose.dev.yml up --build

🚀 Lancement du projet en local

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

Front (ReactJS)

cd fixsantamonica/front && npm start

Strapi (Back-Office)

cd fixsantamonica/back && npm run develop

RabbitMQ (Consumer)

cd fixsantamonica/consumer && npm start

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 fixsantamonica/back
npm run strapi transfer -- --from https://CENSOR_URL/

DEMO CENSORED ! (sensitive informations)

- 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 ce qu'est une sonde

Pour commencer qu'est-ce qu'une sonde ?

Une sonde, également appelée moniteur, est un itinéraire préalablement défini qui déclenche l'exécution d'un robot Puppeteer chargé de parcourir un site (une URL) de manière exhaustive. Elle interrompt son parcours dès qu'un problème est détecté, tel qu'un élément non affiché, générant ainsi une alerte. Cette alerte remonte directement dans les journaux du back-office et est ensuite transmise à Slack.

🎨 Comment créer une sonde ?

🗺️ Mise en place de l'architecture d'un parcours de A à Z

  • Direction le back-office de Santa-Monica pour y créer un nouveau parcours, imaginons que celui-ci soit pour une sonde pour Carrefour Voyages

create_sonde

create_sonde

  • Les étapes (steps) représentent les actions que le robot effectuera pour compléter le parcours, telles que cliquer sur des boutons spécifiques, saisir des informations dans des champs d'entrée, etc. Pour ce faire, il est nécessaire d'utiliser des sélecteurs DOM (querySelector). Chaque balise (div/select/input) dispose de ses propres méthodes d'utilisation avec Puppeteer.

🖱️ Les différentes actions possibles

  • La navigation 🗺️ :

navigation_step

  • Les clicks 🖱️ : (par exemple ici on va fermer la modal du cookie quand on arrive sur Carrefour Voyages) :

usequeryselector

click_step

  • Type ⌨️ (écrire du texte) :

type_step

  • waitForTimeout / waitForNavigation ⏳ (permet de rajouter du délai avant d'effectuer certaines actions etc..) :

waitfor_step

  • Select ▼ :

select_step

⚠️

Il est ESSENTIEL de sélectionner des noms de steps pertinents afin de faciliter la lecture de la sonde et de garantir la compréhension pour tout administrateur afin d'éviter toute confusion.

✏️ Comment modifier une sonde ?

🔍 Retrouver la sonde sur le back-office Strapi

  • Utilisez les différentes fonctionnalités pour retrouver la sonde que vous souhaitez modifier (screen new-delhi ci-dessous mais ça reste le même fonctionnement).

find_component

  • Selectionnez votre sonde, 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 débuger une sonde ? (méthode)

ℹ️

Il n y a pas de solution miracle pour débuger un parcours, mais il y a des manières de procéder beaucoup plus simple que d'autre, et là je vais te montrer ma manière de faire

  • Nous allons utiliser la médiathèque qui est disponible sur le back-office, lorsque Puppeteer va rencontrer un problème lors de son parcours, il va trigger une alerte et renvoyer un rapport, mais en plus de ça il va envoyer un screenshot de la page où l'erreur s'est produite, et c'est ça qui va nous être utile !

Accéder à la médiathèque sur Strapi

  • Direction Strapi !

path_to_mediatheque

Voir l'Image

  • Tu vas te retrouver face à une liste des 10 screenshot les plus récents (en fonction des rapports dans l'ordre), configure la vue que tu préfères

mediathequeview

  • Selectionne le screenshot du rapport en question, puis pour le voir en grand écran, suit ces étapes :

DEMO CENSORED ! (sensitive informations)

🗑️ Comment supprimer ou désactiver une sonde ?

❌ Supprimer une sonde

  • Retrouver votre sonde

  • Supprimer la sonde depuis le layout de création voir ici pour confirmer qu'il s'agit de la bonne sonde avant de la supprimer.

delete_component

🚫 Désactiver une sonde

  • Retrouver votre sonde

  • Pour désactiver votre sonde 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