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

31 KiB
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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • * 6.1 Écrire les tests property-based pour les edges

    • Property 2: Validation de Connexion
    • Valide: Exigences 2.2

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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é

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • * 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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