Dom/rpa_vision_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a7de6a488b8269927a6eb78adea3c9632acc3f33
rpa_vision_v3/.kiro/specs/visual-workflow-builder/tasks.md
Dom a7de6a488b feat: replay E2E fonctionnel — 25/25 actions, 0 retries, SomEngine via serveur 
Validé sur PC Windows (DESKTOP-58D5CAC, 2560x1600) :
- 8 clics résolus visuellement (1 anchor_template, 1 som_text_match, 6 som_vlm)
- Score moyen 0.75, temps moyen 1.6s
- Texte tapé correctement (bonjour, test word, date, email)
- 0 retries, 2 actions non vérifiées (OK)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 14:04:41 +02:00

732 lines
31 KiB
Markdown
Raw Blame History

# Plan d'Implémentation: Visual Workflow Builder
## Vue d'Ensemble
Ce plan décompose l'implémentation du Visual Workflow Builder en tâches concrètes et incrémentales. Chaque tâche construit sur les précédentes pour aboutir à un système complet et fonctionnel.
---
## Phase 1: Fondations et Structure de Base
- [x] 1. Configurer la structure du projet
- Créer la structure de dossiers pour frontend (React/TypeScript) et backend (Flask)
- Configurer les outils de build (Webpack, TypeScript, ESLint)
- Configurer Flask avec Flask-SocketIO et Flask-CORS
- Créer les fichiers de configuration (package.json, requirements.txt, tsconfig.json)
- _Exigences: 18.1_
- [x] 2. Implémenter les modèles de données de base
- Créer les classes Python pour VisualWorkflow, VisualNode, VisualEdge
- Créer les interfaces TypeScript correspondantes
- Implémenter les méthodes de validation de base
- Ajouter les enums (NodeCategory, NodeStatus, ParameterType)
- _Exigences: 5.1, 5.3_
- [ ]* 2.1 Écrire les tests property-based pour les modèles
- **Property 5: Round-trip de Sérialisation**
- **Valide: Exigences 5.1, 5.2**
- [ ]* 2.2 Écrire les tests unitaires pour la validation
- Test de validation des champs requis
- Test de validation des types de paramètres
- _Exigences: 5.3_
- [x] 3. Créer l'API REST de base
- Implémenter les endpoints CRUD pour workflows (GET, POST, PUT, DELETE)
- Ajouter la sérialisation/désérialisation JSON
- Implémenter la validation des requêtes avec JSON Schema
- Ajouter la gestion d'erreurs et codes d'erreur
- _Exigences: 5.1, 5.2, 5.5_
- [ ]* 3.1 Écrire les tests d'API
- Test de création de workflow
- Test de récupération de workflow
- Test de mise à jour de workflow
- Test de suppression de workflow
- _Exigences: 5.1, 5.2_
- [x] 4. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 2: Interface Canvas de Base
- [x] 5. Implémenter le composant Canvas
- Intégrer react-flow-renderer pour le rendu du graphe
- Créer le composant Canvas avec props de base (nodes, edges, callbacks)
- Implémenter la sélection de nodes (clic simple)
- Implémenter le déplacement de nodes (drag)
- Ajouter la grille d'alignement en arrière-plan
- _Exigences: 1.1, 1.2, 1.3, 1.4_
- [ ] 5.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 5.2 Écrire les tests unitaires du Canvas
- Test de rendu des nodes
- Test de sélection de node
- Test de déplacement de node
- _Exigences: 1.2, 1.3, 1.4_
- [ ]* 5.3 Écrire les tests property-based pour le Canvas
- **Property 1: Suppression de Node Cascade**
- **Valide: Exigences 1.5, 2.4**
- [x] 6. Implémenter la gestion des edges
- Ajouter la création d'edges par drag entre ports
- Implémenter la validation des connexions (compatibilité des ports)
- Ajouter la sélection et suppression d'edges
- Implémenter la suppression automatique des edges lors de la suppression d'un node
- _Exigences: 2.1, 2.2, 2.3, 2.4_
- [x]* 6.1 Écrire les tests property-based pour les edges
- **Property 2: Validation de Connexion**
- **Valide: Exigences 2.2**
- [x] 7. Créer la palette de nodes
- Créer le composant Palette avec liste des types de nodes
- Organiser les nodes par catégorie (Action, Logic, Data, Flow)
- Implémenter le drag depuis la palette vers le canvas
- Ajouter les icônes et descriptions pour chaque type
- Implémenter la recherche/filtrage dans la palette
- _Exigences: 7.1, 7.2, 7.3, 7.4_
- [ ] 7.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 7.2 Écrire les tests property-based pour la palette
- **Property 30: Filtrage de Palette**
- **Valide: Exigences 7.2**
- [ ]* 7.3 Écrire les tests unitaires de la palette
- Test d'affichage des catégories
- Test de recherche et filtrage
- Test de drag depuis la palette
- _Exigences: 7.1, 7.2_
- [x] 8. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 3: Configuration et Propriétés
- [x] 9. Implémenter le panneau de propriétés
- Créer le composant PropertiesPanel
- Implémenter les éditeurs de paramètres (TextEditor, NumberEditor, BooleanEditor, SelectEditor)
- Ajouter la validation en temps réel des paramètres
- Afficher les indicateurs d'avertissement pour paramètres requis manquants
- Implémenter le pré-remplissage des valeurs par défaut
- _Exigences: 3.1, 3.2, 3.4, 3.5_
- [ ] 9.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 9.2 Écrire les tests property-based pour les propriétés
- **Property 8: Validation de Paramètres Requis**
- **Valide: Exigences 12.2**
- [ ]* 9.3 Écrire les tests property-based pour les valeurs par défaut
- **Property 9: Valeurs par Défaut**
- **Valide: Exigences 3.5**
- [ ]* 9.4 Écrire les tests unitaires du panneau de propriétés
- Test d'affichage des paramètres
- Test de validation en temps réel
- Test des avertissements pour champs requis
- _Exigences: 3.1, 3.2_
- [x] 10. Implémenter le sélecteur de cible interactif
- Créer le composant TargetSelector
- Implémenter la capture d'écran via l'API existante (ScreenCapturer)
- Créer le mode de sélection avec overlay interactif
- Implémenter la détection et surbrillance des éléments au survol
- Extraire les propriétés de l'élément sélectionné (texte, position, taille, embedding)
- Configurer automatiquement le paramètre target du node
- _Exigences: 4.1, 4.2, 4.3, 4.4, 4.5_
- [ ] 10.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 10.2 Écrire les tests property-based pour l'extraction de propriétés
- **Property 20: Extraction de Propriétés de Cible**
- **Valide: Exigences 4.5**
- [ ]* 10.3 Écrire les tests unitaires du sélecteur de cible
- Test de capture d'écran
- Test d'extraction de propriétés
- Test de configuration automatique
- _Exigences: 4.3, 4.5_
- [x] 11. Implémenter la gestion des variables
- Créer le composant VariableManager
- Implémenter l'ajout/suppression/modification de variables
- Ajouter la validation d'unicité des noms de variables
- Implémenter le VariableEditor pour les paramètres
- Ajouter la validation des références ${variable}
- _Exigences: 10.1, 10.2, 10.3_
- [ ] 11.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 11.2 Écrire les tests property-based pour les variables
- **Property 10: Validation de Variables**
- **Valide: Exigences 10.3**
- [ ]* 11.3 Écrire les tests property-based pour l'unicité des noms
- **Property 11: Unicité des Noms de Variables**
- **Valide: Exigences 10.2**
- [ ] 12. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 4: Validation et Vérification
- [x] 13. Implémenter le système de validation
- Créer le WorkflowValidator avec règles de validation
- Implémenter la détection de nodes déconnectés
- Implémenter la détection de cycles (dépendances circulaires)
- Ajouter la validation des paramètres requis
- Ajouter la validation des références de variables
- Afficher les erreurs visuellement sur le canvas (indicateurs rouges)
- Empêcher l'exécution si des erreurs critiques existent
- _Exigences: 12.1, 12.2, 12.3, 12.4, 12.5_
- [ ] 13.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 13.2 Écrire les tests property-based pour la validation
- **Property 3: Détection de Cycles**
- **Valide: Exigences 12.4**
- [ ]* 13.3 Écrire les tests property-based pour les nodes déconnectés
- **Property 4: Nodes Déconnectés**
- **Valide: Exigences 12.3**
- [ ]* 13.4 Écrire les tests unitaires de validation
- Test de détection de nodes déconnectés
- Test de détection de cycles
- Test de validation des paramètres requis
- Test de blocage d'exécution avec erreurs
- _Exigences: 12.1, 12.2, 12.3, 12.4, 12.5_
- [x] 14. Implémenter la sérialisation complète
- Ajouter la génération d'ID unique pour nouveaux workflows
- Implémenter la sérialisation complète (nodes, edges, variables, métadonnées)
- Implémenter la désérialisation avec validation
- Ajouter la gestion d'erreurs de désérialisation
- Implémenter la persistance dans la base de données
- _Exigences: 5.1, 5.2, 5.3, 5.4, 5.5_
- [ ]* 14.1 Écrire les tests property-based pour la sérialisation
- **Property 6: Génération d'ID Unique**
- **Valide: Exigences 5.4**
- [ ]* 14.2 Écrire les tests property-based pour les champs requis
- **Property 7: Validation de Champs Requis**
- **Valide: Exigences 5.3**
- [ ] 15. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 5: Conversion et Exécution
- [x] 16. Implémenter le convertisseur Visual → WorkflowGraph
- Créer la classe VisualToGraphConverter
- Implémenter la conversion des nodes de base (Click, Type, Wait, Navigate)
- Implémenter la conversion des edges avec conditions
- Ajouter la validation de la structure avant conversion
- Gérer les erreurs de conversion avec messages clairs
- _Exigences: 6.1, 18.1_
- [ ] 16.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 16.2 Écrire les tests property-based pour la conversion
- **Property 12: Conversion Valide**
- **Valide: Exigences 6.1, 18.1**
- [ ]* 16.3 Écrire les tests d'intégration pour la conversion
- Test de conversion d'un workflow simple
- Test de conversion avec conditions
- Test de conversion avec boucles
- Test de gestion d'erreurs de conversion
- _Exigences: 6.1, 18.1_
- [x] 17. Implémenter les nodes de logique (Condition et Loop)
- Créer les définitions de nodes pour Condition et Loop
- Implémenter la conversion de nodes Condition avec branches true/false
- Implémenter la conversion de nodes Loop (for-each, while, repeat)
- Ajouter la validation des expressions de condition
- Ajouter la configuration des paramètres de boucle
- _Exigences: 8.1, 8.2, 8.3, 8.5, 9.1, 9.2, 9.3, 9.5_
- [ ]* 17.1 Écrire les tests property-based pour les conditions
- **Property 15: Exécution de Conditions**
- **Valide: Exigences 8.3**
- [ ]* 17.2 Écrire les tests property-based pour les boucles
- **Property 16: Exécution de Boucles**
- **Valide: Exigences 9.3**
- [x] 18. Intégrer avec ExecutionLoop
- Créer l'endpoint d'exécution (/api/workflows/:id/execute)
- Implémenter la conversion et l'exécution via ExecutionLoop
- Ajouter la substitution des variables lors de l'exécution
- Implémenter la collecte des résultats d'exécution
- Ajouter la gestion d'erreurs d'exécution
- _Exigences: 6.1, 6.5, 10.4_
- [ ]* 18.1 Écrire les tests property-based pour la substitution de variables
- **Property 14: Substitution de Variables**
- **Valide: Exigences 10.4**
- [ ]* 18.2 Écrire les tests end-to-end d'exécution
- Test de création et exécution d'un workflow simple
- Test d'exécution avec variables
- Test d'exécution avec conditions
- Test d'exécution avec boucles
- _Exigences: 6.1, 6.5, 10.4_
- [x] 19. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 6: Feedback Temps Réel
- [x] 20. Implémenter WebSocket pour temps réel
- Configurer Flask-SocketIO sur le backend
- Créer les événements WebSocket (execution_status, node_status, execution_complete)
- Implémenter le client Socket.IO sur le frontend
- Ajouter la souscription aux mises à jour d'exécution
- _Exigences: 6.2, 6.3, 6.4_
- [ ] 20.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 20.2 Écrire les tests d'intégration WebSocket
- Test de connexion WebSocket
- Test de réception des événements
- Test de souscription/désouscription
- _Exigences: 6.2, 6.3_
- [x] 21. Implémenter la synchronisation d'état visuel
- Mettre à jour l'état des nodes pendant l'exécution (idle → running → success/failed)
- Ajouter l'animation des edges pendant l'exécution
- Afficher le node en cours d'exécution avec surbrillance
- Afficher les erreurs sur les nodes en échec
- Générer et afficher le résumé d'exécution (durée, taux de succès)
- _Exigences: 6.2, 6.3, 6.4, 6.5_
- [ ]* 21.1 Écrire les tests property-based pour la synchronisation
- **Property 13: Synchronisation d'État**
- **Valide: Exigences 6.3**
- [ ]* 21.2 Écrire les tests unitaires de synchronisation
- Test de mise à jour d'état des nodes
- Test d'affichage des erreurs
- Test de génération du résumé
- _Exigences: 6.3, 6.4, 6.5_
- [x] 22. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 7: Templates et Réutilisabilité
- [x] 23. Implémenter le système de templates
- Créer le modèle WorkflowTemplate avec paramètres configurables
- Créer les endpoints API pour templates (GET, POST, instantiate)
- Créer les templates de base (Login, Form Fill, Data Extraction, Navigation)
- Implémenter le chargement de template avec substitution de paramètres
- Ajouter l'UI de sélection de template lors de la création
- _Exigences: 11.1, 11.2, 11.3, 11.4_
- [ ] 23.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 23.2 Écrire les tests property-based pour les templates
- **Property 21: Chargement de Template**
- **Valide: Exigences 11.2, 11.3**
- [ ]* 23.3 Écrire les tests unitaires des templates
- Test de chargement de template
- Test de substitution de paramètres
- Test de personnalisation après chargement
- _Exigences: 11.2, 11.3_
- [x] 24. Implémenter la sauvegarde comme template
- Ajouter l'option "Sauvegarder comme template" dans l'UI
- Implémenter l'extraction des paramètres configurables
- Créer l'UI de configuration des paramètres du template
- Sauvegarder le template dans la base de données
- _Exigences: 11.5_
- [ ]* 24.1 Écrire les tests property-based pour la sauvegarde de template
- **Property 22: Sauvegarde comme Template**
- **Valide: Exigences 11.5**
- [x] 25. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 8: Fonctionnalités Avancées
- [x] 26. Implémenter Undo/Redo
- Créer la classe UndoManager avec piles undo/redo
- Implémenter les actions (AddNodeAction, DeleteNodeAction, MoveNodeAction, etc.)
- Ajouter l'enregistrement automatique des actions dans la pile
- Implémenter les méthodes undo() et redo()
- Supporter au moins 50 niveaux d'historique
- Vider la pile de redo lors d'une nouvelle action après undo
- _Exigences: 13.1, 13.2, 13.3, 13.4, 13.5_
- [ ] 26.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 26.2 Écrire les tests property-based pour Undo/Redo
- **Property 17: Annuler/Refaire Cohérence**
- **Valide: Exigences 13.2, 13.3**
- [ ]* 26.3 Écrire les tests property-based pour la pile
- **Property 18: Pile d'Annulation**
- **Valide: Exigences 13.1, 13.4**
- [ ]* 26.4 Écrire les tests property-based pour l'invalidation
- **Property 19: Invalidation de Refaire**
- **Valide: Exigences 13.5**
- [x] 27. Implémenter Zoom et Panoramique
- Ajouter le zoom avec la molette de souris (centré sur le curseur)
- Implémenter le panoramique par drag sur l'espace vide
- Ajouter les limites de zoom (25% à 200%)
- Implémenter la fonction "Fit to Screen"
- Optimiser les performances pour maintenir 60fps
- _Exigences: 14.1, 14.2, 14.3, 14.4_
- [ ]* 27.1 Écrire les tests property-based pour le zoom
- **Property 32: Zoom Centré**
- **Valide: Exigences 14.1**
- [ ]* 27.2 Écrire les tests property-based pour Fit-to-Screen
- **Property 33: Fit-to-Screen**
- **Valide: Exigences 14.3**
- [ ]* 27.3 Écrire les tests unitaires de zoom/pan
- Test de zoom avec molette
- Test de panoramique
- Test de limites de zoom
- Test de fit-to-screen
- _Exigences: 14.1, 14.2, 14.3, 14.4_
- [x] 28. Implémenter Export/Import
- Créer l'endpoint d'export (/api/workflows/:id/export)
- Implémenter l'export en JSON et YAML
- Créer l'endpoint d'import (/api/workflows/import)
- Implémenter la validation du format lors de l'import
- Ajouter la détection et migration de versions
- Créer l'UI d'export/import
- _Exigences: 15.1, 15.2, 15.3, 15.4, 15.5_
- [ ]* 28.1 Écrire les tests property-based pour l'export
- **Property 23: Complétude d'Export**
- **Valide: Exigences 15.1, 15.3**
- [ ]* 28.2 Écrire les tests property-based pour l'import
- **Property 24: Validation d'Import**
- **Valide: Exigences 15.2**
- [ ]* 28.3 Écrire les tests property-based pour la migration
- **Property 25: Migration de Version**
- **Valide: Exigences 15.4**
- [ ] 29. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 9: Raccourcis et UX
- [ ] 30. Implémenter les raccourcis clavier
- Ajouter Ctrl+Z pour annuler et Ctrl+Y pour refaire
- Ajouter Suppr pour supprimer les nodes sélectionnés
- Ajouter Ctrl+C et Ctrl+V pour copier/coller des nodes
- Ajouter Ctrl+S pour sauvegarder le workflow
- Ajouter Ctrl+F pour focus sur la recherche de palette
- Créer un système de gestion des raccourcis clavier
- _Exigences: 16.1, 16.2, 16.3, 16.4, 16.5_
- [ ] 30.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 30.2 Écrire les tests unitaires des raccourcis
- Test de tous les raccourcis clavier
- Test de prévention des conflits
- _Exigences: 16.1, 16.2, 16.3, 16.4, 16.5_
- [x] 31. Optimiser les performances
- Implémenter la virtualisation pour ne rendre que les nodes visibles
- Optimiser le rendu pour maintenir 60fps avec 100+ nodes
- Ajouter le debouncing pour les opérations coûteuses
- Optimiser la sérialisation/désérialisation
- Profiler et optimiser les points chauds
- _Exigences: 17.1, 17.2, 17.3, 17.4, 17.5_
- [x]* 31.1 Écrire les tests de performance
- Test de rendu avec 100 nodes
- Test de sérialisation de gros workflows
- Test de validation de workflows complexes
- _Exigences: 17.1, 17.3, 17.4_
- [x] 32. Améliorer l'accessibilité
- Ajouter les attributs ARIA pour tous les composants
- Implémenter la navigation au clavier complète
- Ajouter le support des screen readers
- Implémenter le mode high contrast
- Tester avec les outils d'accessibilité (axe, WAVE)
- _Exigences: Accessibilité générale_
- [x] 33. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 10: Intégration avec l'Écosystème
- [x] 34. Intégrer avec Self-Healing
- Ajouter les options de configuration Self-Healing dans les propriétés des nodes
- Configurer les stratégies de récupération lors de la conversion
- Intégrer les notifications de récupération dans l'UI
- Afficher les tentatives de récupération dans le résumé d'exécution
- _Exigences: 18.2_
- [ ]* 34.1 Écrire les tests property-based pour Self-Healing
- **Property 27: Intégration Self-Healing**
- **Valide: Exigences 18.2**
- [ ]* 34.2 Écrire les tests d'intégration Self-Healing
- Test de configuration des stratégies
- Test d'exécution avec récupération automatique
- _Exigences: 18.2_
- [x] 35. Intégrer avec Analytics
- Ajouter les hooks de collecte de métriques lors de l'exécution
- Envoyer les événements au système Analytics
- Afficher les métriques dans l'UI (taux de succès, durée moyenne)
- Créer un dashboard de métriques pour les workflows
- _Exigences: 18.3_
- [ ]* 35.1 Écrire les tests property-based pour Analytics
- **Property 28: Intégration Analytics**
- **Valide: Exigences 18.3**
- [ ]* 35.2 Écrire les tests d'intégration Analytics
- Test de collecte de métriques
- Test d'envoi des événements
- _Exigences: 18.3_
- [x] 36. Assurer la compatibilité de format
- Vérifier que les workflows visuels utilisent le même format que les workflows programmatiques
- Implémenter la conversion bidirectionnelle (visuel ↔ programmatique)
- Tester le chargement de workflows existants dans le Visual Builder
- Tester l'édition de workflows existants
- _Exigences: 18.4, 18.5_
- [ ]* 36.1 Écrire les tests property-based pour la compatibilité
- **Property 26: Compatibilité de Format**
- **Valide: Exigences 18.4**
- [ ]* 36.2 Écrire les tests property-based pour la rétrocompatibilité
- **Property 29: Rétrocompatibilité**
- **Valide: Exigences 18.5**
- [ ]* 36.3 Écrire les tests d'intégration de compatibilité
- Test de chargement de workflows programmatiques
- Test d'édition de workflows existants
- Test de sauvegarde et rechargement
- _Exigences: 18.4, 18.5_
- [ ] 37. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 11: Extensibilité et Documentation
- [x] 38. Franciser l'interface et ajouter l'aide contextuelle
- Traduire tous les termes techniques en français (Node → Étape, Edge → Connexion, Canvas → Espace de travail, etc.)
- Créer un fichier de traduction (i18n) avec tous les termes de l'interface
- Ajouter des infobulles explicatives sur tous les éléments interactifs
- Créer un système d'aide contextuelle avec icônes "?" cliquables
- Ajouter des descriptions simples pour chaque type d'étape (ex: "Cliquer" au lieu de "Click Node")
- Créer un guide de démarrage rapide intégré (tutoriel interactif)
- Ajouter des exemples visuels dans les infobulles (captures d'écran, animations)
- Implémenter un glossaire accessible depuis l'interface
- Ajouter des messages d'erreur en français clair et compréhensible
- Créer des vidéos tutorielles courtes (30s-1min) pour chaque fonctionnalité
- _Exigences: Accessibilité pour non-informaticiens_
- [ ] 38.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 38.2 Créer la documentation utilisateur en français
- Guide de démarrage rapide
- Tutoriels pas-à-pas avec captures d'écran
- FAQ en français
- Glossaire des termes
- _Exigences: Documentation utilisateur_
- [ ] 39. Implémenter le système d'aide intégré
- Créer un composant HelpTooltip réutilisable
- Ajouter un panneau d'aide contextuelle qui s'ouvre sur demande
- Implémenter la recherche dans l'aide
- Ajouter des liens vers la documentation détaillée
- Créer un mode "Découverte" qui met en surbrillance les fonctionnalités
- Ajouter des suggestions intelligentes basées sur le contexte
- _Exigences: Aide contextuelle_
- [ ] 39.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 39.2 Tester l'accessibilité avec des utilisateurs non-techniques
- Tests utilisateurs avec des profils non-informaticiens
- Recueillir les retours sur la compréhension
- Ajuster la terminologie selon les retours
- _Exigences: Validation utilisateur_
- [ ] 40. Créer des templates avec noms français explicites
- Renommer les templates avec des noms clairs (ex: "Connexion à un site web" au lieu de "Login")
- Ajouter des descriptions détaillées en français pour chaque template
- Créer des catégories en français (Automatisation Web, Traitement de Données, etc.)
- Ajouter des captures d'écran de résultat attendu pour chaque template
- _Exigences: 11.1, 11.4_
- [ ] 40.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ] 41. Checkpoint Final - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Exemples de Traductions Proposées
### Termes Techniques → Français Accessible
| Terme Technique | Traduction Française | Infobulle Explicative |
|----------------|---------------------|----------------------|
| Canvas | Espace de travail | "Zone où vous construisez votre automatisation en glissant-déposant des étapes" |
| Node | Étape | "Une action à effectuer (cliquer, taper du texte, attendre, etc.)" |
| Edge | Connexion / Flèche | "Relie deux étapes pour définir l'ordre d'exécution" |
| Palette | Boîte à outils | "Liste de toutes les actions disponibles que vous pouvez ajouter" |
| Properties Panel | Panneau de configuration | "Permet de configurer les détails de l'étape sélectionnée" |
| Target Selector | Sélecteur d'élément | "Cliquez pour sélectionner un bouton ou un champ sur votre écran" |
| Workflow | Scénario d'automatisation | "Ensemble d'étapes qui s'exécutent automatiquement" |
| Execute | Lancer / Démarrer | "Démarre l'exécution automatique de votre scénario" |
| Variable | Donnée mémorisée | "Permet de stocker une information pour la réutiliser plus tard" |
| Condition | Choix / Branchement | "Permet de faire différentes actions selon une condition (si... alors... sinon...)" |
| Loop | Répétition / Boucle | "Répète une série d'actions plusieurs fois" |
| Template | Modèle pré-fait | "Scénario déjà construit que vous pouvez personnaliser" |
| Validation | Vérification | "Vérifie que votre scénario est complet et correct avant de le lancer" |
| Undo/Redo | Annuler/Refaire | "Annule la dernière action (Ctrl+Z) ou la refait (Ctrl+Y)" |
### Catégories de la Palette en Français
| Catégorie Technique | Catégorie Française | Description |
|--------------------|-------------------|-------------|
| ACTION | Actions Web | "Interagir avec des sites web (cliquer, taper, naviguer)" |
| LOGIC | Logique | "Ajouter des choix et des répétitions" |
| DATA | Données | "Stocker et transformer des informations" |
| FLOW | Contrôle | "Démarrer, terminer, ou organiser votre scénario" |
| INTEGRATION | Intégrations | "Se connecter à des services externes (API, bases de données)" |
### Messages d'Erreur en Français Clair
| Erreur Technique | Message Français Accessible |
|-----------------|---------------------------|
| "Missing required parameter: target" | "⚠️ Il manque une information : vous devez sélectionner un élément à cliquer" |
| "Circular dependency detected" | "⚠️ Votre scénario forme une boucle infinie. Vérifiez que les étapes ne se renvoient pas les unes aux autres" |
| "Disconnected node found" | "⚠️ Cette étape n'est pas connectée au reste du scénario. Reliez-la avec une flèche" |
| "Invalid variable reference: ${username}" | "⚠️ La donnée '${username}' n'existe pas. Créez-la d'abord dans la gestion des données" |
| "Execution failed at node 'click-1'" | "❌ L'étape 'Cliquer sur le bouton' a échoué. L'élément n'a peut-être pas été trouvé" |
---
## Notes d'Implémentation
### Principes de Design pour Non-Informaticiens
1. **Langage Simple**: Éviter le jargon technique, utiliser des mots du quotidien
2. **Feedback Visuel**: Utiliser des couleurs, icônes et animations pour guider
3. **Aide Proactive**: Suggérer des actions, détecter les erreurs courantes
4. **Exemples Concrets**: Montrer des cas d'usage réels plutôt que des concepts abstraits
5. **Progression Guidée**: Tutoriel interactif pour les premiers pas
6. **Tolérance aux Erreurs**: Permettre l'expérimentation sans conséquences graves
### Infobulles Contextuelles
Chaque élément de l'interface doit avoir une infobulle qui apparaît au survol, contenant:
- **Titre court** en gras (ex: "Sélecteur d'élément")
- **Description simple** (1-2 phrases)
- **Exemple concret** si pertinent
- **Lien "En savoir plus"** vers la documentation détaillée
### Mode Découverte
Un mode spécial pour les nouveaux utilisateurs qui:
- Met en surbrillance les zones importantes
- Affiche des bulles d'aide automatiquement
- Propose un parcours guidé étape par étape
- Peut être désactivé une fois l'utilisateur à l'aise
Reference in New Issue View Git Blame Copy Permalink