Santa Monica
📚 Sommaire
🔧 Configuration du projet
- 📗 Guide d'installation
- 🚀 Lancement en local
- 🌐 Déploiement en production
- 💾 Faire un Backup/Restore de la base de données
- 📥 Faire un transfert de la base de données en production vers local (Avec Strapi)
- 🔑 Réinitialiser un accès administrateur au panel Strapi (back office)
📡 Gestion des sondes
📗 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 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)
- Aller dans le Back Office Strapi en production et générer un Token de Transfert
- Aller dans votre projet en local
cd fixsantamonica/back
npm run strapi transfer -- --from https://CENSOR_URL/
DEMO CENSORED ! (sensitive informations)
🔑 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.
⚠️ 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
- 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 🗺️ :
- Les clicks 🖱️ : (par exemple ici on va fermer la modal du cookie quand on arrive sur Carrefour Voyages) :
- Type ⌨️ (écrire du texte) :
- waitForTimeout / waitForNavigation ⏳ (permet de rajouter du délai avant d'effectuer certaines actions etc..) :
- Select ▼ :
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).
-
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 !
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
- 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.
🚫 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.