TechradarDev/docs/app/developpement.md

Guide de développement

Prérequis

• Node.js : Version 20 ou supérieure
• npm : Gestionnaire de paquets Node.js
• Git : Pour cloner et gérer le dépôt
• Python 3 : Pour les scripts de modification (optionnel, utilisé dans Docker)

Installation

Cloner le dépôt

git clone https://git.open.us.org/AJR/TechradarDev.git
cd TechradarDev

Installer les dépendances

npm install

Cette commande installe les dépendances racine (pour les scripts utilitaires). Le framework Next.js est déjà présent dans radar-app/ (code vendu dans le repo).

Développement local

Démarrer le serveur de développement (Radar Principal)

npm run serve

Le serveur démarre sur http://localhost:3000/techradar

Démarrer le serveur de développement (Radar Business)

npm run serve-business

Le serveur démarre sur http://localhost:3006

Note importante : Le script serve-business.sh :

• Sauvegarde temporairement config.json et le dossier radar/
• Copie radar-business/config-business.json vers config.json
• Copie radar-business/2025-01-15/ vers radar/
• Restaure la configuration originale à la sortie (Ctrl+C)

Le Radar Technologique Laplank est protégé par un mot de passe : laplank-radar

Build de production

Pour générer les fichiers statiques :

npm run build

Les fichiers générés sont créés dans le répertoire build/ (copiés depuis radar-app/out/).

Structure des fichiers radar

Créer un nouveau blip

1. Créer un nouveau fichier Markdown dans le dossier de release approprié :

   radar-business/2025-01-15/nom-technologie.md
   

2. Utiliser le format suivant :

---
title: "Nom de la technologie"
ring: adopt|trial|assess|hold
quadrant: technologies-differentiantes|technologies-commodite|technologies-risque|technologies-emergentes
tags: [tag1, tag2]
businessImpact: high|medium|low
costToReplace: 0
revenueImpact: indirect
riskLevel: medium
competencyLevel: beginner
maintenanceCost: 0
differentiation: high
teamCoverage: 1
skillGap: high
---

Description de la technologie en Markdown.

## Impact Business

Description de l'impact sur le business.

## Coûts

- Coût de remplacement : 0€
- Coût de maintenance annuel : 0€

## Compétences

- Nombre de personnes maîtrisant : 1
- Membres de l'équipe : pseudo
- Niveau moyen : beginner
- Risque de compétence manquante : high

## Recommandations

Recommandations stratégiques pour cette technologie.

Format des métadonnées

• title (obligatoire) : Nom de la technologie
• ring (obligatoire) : adopt, trial, assess, ou hold (voir configuration.md)
• quadrant (obligatoire) : Un des quatre quadrants définis dans radar-business/config-business.json
• tags (optionnel) : Tableau de tags pour le filtrage
• Métadonnées business : Voir radar-business/FORMAT-BLIP.md pour la liste complète

Important : Tous les blips doivent utiliser les rings standards (adopt, trial, assess, hold). Les anciens rings (core, strategic, support) ne sont plus utilisés.

Exemple complet

---
title: "Docker"
ring: adopt
quadrant: technologies-commodite
tags: [devops, ci/cd, infrastructure]
businessImpact: medium
costToReplace: 0
revenueImpact: indirect
riskLevel: low
competencyLevel: intermediate
maintenanceCost: 5000
differentiation: low
teamCoverage: 3
skillGap: low
---

Docker est une plateforme de conteneurisation qui permet de packager des applications avec leurs dépendances.

## Impact Business

Technologie essentielle pour le déploiement et la gestion des environnements.

## Coûts

- Coût de remplacement : 0€ (pas de remplacement prévu)
- Coût de maintenance annuel : 5 000€ (licences, support)

## Compétences

- Nombre de personnes maîtrisant : 3
- Membres de l'équipe : pseudo1, pseudo2, pseudo3
- Niveau moyen : intermediate
- Risque de compétence manquante : low

## Recommandations

Continuer à utiliser Docker pour tous les nouveaux projets. Standardiser les pratiques de conteneurisation.

Modifier un blip existant

1. Localiser le fichier dans radar-business/2025-01-15/
2. Modifier le contenu Markdown
3. Si nécessaire, modifier les métadonnées (ring, quadrant, tags)
4. Tester localement avec npm run serve-business

Créer une nouvelle release

1. Créer un nouveau dossier avec la date au format YYYY-MM-DD :

   mkdir radar-business/2025-07-15
   

2. Copier les blips pertinents depuis la release précédente ou créer de nouveaux blips

3. Mettre à jour les blips existants si nécessaire (changement de ring, quadrant, description)

Gestion des profils équipe

Créer un profil équipe

1. Créer un fichier Markdown dans docs/data/team/ :

   docs/data/team/pseudo.md
   

2. Utiliser le format suivant :

---
name: "pseudo"
fullName: "Nom complet"
role: "Rôle"
availability: 50
seniorityLevel: expert
yearsExperience: 8
joinDate: "2016-01"
interests: ["Mobile", "Infrastructure"]
skills:
  - name: "Flutter"
    level: expert
    years: 4
    lastUsed: "2024-12"
  - name: "Python"
    level: intermediate
    years: 5
    lastUsed: "2024-11"
softSkills:
  - "Autonomie"
  - "Pédagogie"
projects:
  - "Projet1"
  - "Projet2"
---

Description du membre de l'équipe.

Générer les données de visualisation

Après avoir modifié les profils équipe ou les technologies, régénérer les données :

node scripts/generate-team-visualization-data.js

Ce script génère public/team-visualization-data.json utilisé par la page /team.

Ajouter des images

1. Placer les images dans public/images/
2. Référencer dans les fichiers Markdown :

![Description](images/nom-image.png)

Personnalisation CSS

Le fichier custom.css permet d'ajouter des styles personnalisés. Les styles sont appliqués globalement à l'application.

Scripts disponibles

Extraction des technologies

npm run extract-tech
# ou
node scripts/extract-technologies.js

Extrait les technologies depuis docs/data/technologies-duniter.md et génère les blips dans radar-business/2025-01-15/.

Analyse des métriques business

npm run analyze-business
# ou
node scripts/analyze-business-metrics.js

Analyse les métriques business et génère un rapport dans docs/data/analyse-strategique.md.

Génération des données équipe

node scripts/generate-team-visualization-data.js

Génère public/team-visualization-data.json à partir des profils équipe et des technologies.

Débogage

Vérifier les erreurs de format

Le framework valide les fichiers Markdown. En cas d'erreur :

• Vérifier la syntaxe YAML front matter
• Vérifier que les valeurs de ring et quadrant correspondent aux valeurs définies dans radar-business/config-business.json
• Vérifier la syntaxe Markdown

Problèmes courants

1. Erreur de parsing YAML : Vérifier les guillemets et l'indentation
2. Blip non affiché : Vérifier que le quadrant et le ring sont corrects (adopt, trial, assess, hold)
3. Images non chargées : Vérifier le chemin relatif depuis public/
4. Rings invalides : Vérifier que tous les blips utilisent les rings standards

Vérifier les rings utilisés

cd radar-business/2025-01-15
grep -h "^ring:" *.md | sort | uniq -c

Doit retourner uniquement : adopt, trial, assess, hold

Workflow recommandé

1. Créer une branche Git pour vos modifications
2. Ajouter/modifier les fichiers radar dans radar-business/2025-01-15/
3. Modifier les profils équipe dans docs/data/team/ si nécessaire
4. Régénérer les données équipe : node scripts/generate-team-visualization-data.js
5. Tester localement avec npm run serve-business
6. Vérifier l'affichage et le formatage
7. Commiter et pousser les changements
8. Créer une pull request si applicable

Commandes utiles

# Installer les dépendances
npm install

# Démarrer le serveur de développement (business)
npm run serve-business

# Build de production
npm run build

# Extraire les technologies
npm run extract-tech

# Analyser les métriques
npm run analyze-business

# Générer les données équipe
node scripts/generate-team-visualization-data.js

# Vérifier les fichiers modifiés
git status

# Voir les différences
git diff

Intégration continue

Le projet utilise Drone CI pour l'intégration continue. Voir .drone.yml pour la configuration.

Les builds automatiques :

• Construisent l'image Docker
• Déploient sur l'environnement de test
• Envoient des notifications Telegram

Tests locaux avant déploiement

Avant de déployer, vérifier :

1. Tous les blips utilisent les rings standards :

   cd radar-business/2025-01-15
   grep -h "^ring:" *.md | sort | uniq
   

2. Les données équipe sont à jour :

   node scripts/generate-team-visualization-data.js
   

3. La page équipe fonctionne :

   • Démarrer npm run serve-business
   • Accéder à http://localhost:3006/team
   • Vérifier que les visualisations se chargent

4. La navigation est correcte :

   • Vérifier qu'il n'y a qu'un seul lien "Équipe"
   • Vérifier que tous les liens fonctionnent