v1.0 - Version stable: multi-PC, détection UI-DETR-1, 3 modes exécution
- Frontend v4 accessible sur réseau local (192.168.1.40) - Ports ouverts: 3002 (frontend), 5001 (backend), 5004 (dashboard) - Ollama GPU fonctionnel - Self-healing interactif - Dashboard confiance Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Dom
281
visual_workflow_builder/README.md
Normal file
281
visual_workflow_builder/README.md
Normal file
@@ -0,0 +1,281 @@
|
||||
# Visual Workflow Builder
|
||||
|
||||
Interface graphique pour créer des workflows RPA par glisser-déposer, sans écrire de code.
|
||||
|
||||
## 🚀 Démarrage Ultra-Rapide
|
||||
|
||||
### Méthode Simple (Recommandée)
|
||||
|
||||
```bash
|
||||
# Configuration initiale (une seule fois)
|
||||
./launch.sh setup
|
||||
|
||||
# Démarrer l'application complète
|
||||
./launch.sh start
|
||||
|
||||
# Ouvrir http://localhost:3000 dans votre navigateur
|
||||
```
|
||||
|
||||
**Sur Windows :**
|
||||
```cmd
|
||||
# Configuration initiale (une seule fois)
|
||||
launch.bat setup
|
||||
|
||||
# Démarrer l'application complète
|
||||
launch.bat start
|
||||
```
|
||||
|
||||
### Prérequis
|
||||
- Python 3.8+
|
||||
- Node.js 16+
|
||||
- npm
|
||||
|
||||
## 🎮 Commandes Principales
|
||||
|
||||
### Script de Lancement Unifié
|
||||
|
||||
Le script `launch.sh` (ou `launch.bat` sur Windows) simplifie toutes les opérations :
|
||||
|
||||
```bash
|
||||
# Démarrer en mode développement (avec hot reload)
|
||||
./launch.sh start --dev
|
||||
|
||||
# Démarrer en mode production
|
||||
./launch.sh start --prod
|
||||
|
||||
# Arrêter l'application
|
||||
./launch.sh stop
|
||||
|
||||
# Redémarrer
|
||||
./launch.sh restart
|
||||
|
||||
# Voir le statut
|
||||
./launch.sh status
|
||||
|
||||
# Voir les logs en temps réel
|
||||
./launch.sh logs
|
||||
|
||||
# Lancer tous les tests
|
||||
./launch.sh test
|
||||
|
||||
# Configuration initiale
|
||||
./launch.sh setup
|
||||
|
||||
# Nettoyer les fichiers temporaires
|
||||
./launch.sh clean
|
||||
|
||||
# Aide complète
|
||||
./launch.sh --help
|
||||
```
|
||||
|
||||
### Ports Personnalisés
|
||||
|
||||
```bash
|
||||
# Frontend sur port 3001, backend sur port 5002
|
||||
./launch.sh start --port 3001 --backend-port 5002
|
||||
```
|
||||
|
||||
## 🧪 Tests
|
||||
|
||||
### Tests Automatisés
|
||||
|
||||
```bash
|
||||
# Tous les tests
|
||||
./launch.sh test
|
||||
|
||||
# Tests spécifiques
|
||||
./test_import_export.sh # Test import/export
|
||||
./test_zoom_pan.sh # Test zoom et panoramique
|
||||
```
|
||||
|
||||
### Tests Manuels
|
||||
|
||||
1. **Interface utilisateur** : http://localhost:3000
|
||||
2. **API Health Check** : http://localhost:5001/health
|
||||
3. **Import/Export** : Utilisez les boutons dans l'interface
|
||||
4. **Zoom/Pan** : Molette de souris + Ctrl+Drag
|
||||
|
||||
## Architecture
|
||||
|
||||
Le projet est divisé en deux parties principales :
|
||||
|
||||
### Frontend (React + TypeScript)
|
||||
- **Framework**: React 18 avec TypeScript
|
||||
- **Canvas**: react-flow-renderer pour le rendu des graphes avec zoom/pan personnalisé
|
||||
- **State Management**: Hooks personnalisés avec Undo/Redo
|
||||
- **UI Components**: Composants personnalisés + Material-UI
|
||||
- **Real-time**: Socket.IO client pour synchronisation d'exécution
|
||||
- **Import/Export**: Support JSON/YAML avec validation
|
||||
- **Build**: Create React App avec TypeScript
|
||||
|
||||
### Backend (Flask + Python)
|
||||
- **Framework**: Flask avec Flask-SocketIO
|
||||
- **Database**: SQLAlchemy (SQLite pour dev, PostgreSQL pour prod)
|
||||
- **Validation**: JSON Schema + validation personnalisée
|
||||
- **Import/Export**: API REST avec support multi-formats
|
||||
- **Cache**: Redis (optionnel)
|
||||
- **Testing**: Pytest + tests d'intégration
|
||||
|
||||
## Structure du Projet
|
||||
|
||||
```
|
||||
visual_workflow_builder/
|
||||
├── launch.sh # 🚀 Script de lancement principal (Linux/Mac)
|
||||
├── launch.bat # 🚀 Script de lancement principal (Windows)
|
||||
├── backend/ # API Flask
|
||||
│ ├── api/
|
||||
│ │ ├── workflows.py # CRUD workflows
|
||||
│ │ ├── import_export.py # Import/Export
|
||||
│ │ ├── templates.py # Templates
|
||||
│ │ └── websocket_handlers.py # WebSocket
|
||||
│ ├── models/ # Modèles de données
|
||||
│ ├── services/ # Logique métier
|
||||
│ └── app.py # Point d'entrée
|
||||
├── frontend/ # Interface React + TypeScript
|
||||
│ ├── src/
|
||||
│ │ ├── components/
|
||||
│ │ │ ├── Canvas/ # Canvas principal avec zoom/pan
|
||||
│ │ │ ├── ZoomControls/ # Contrôles de zoom
|
||||
│ │ │ ├── ImportExport/ # Import/Export UI
|
||||
│ │ │ └── UndoRedoToolbar/ # Undo/Redo
|
||||
│ │ ├── hooks/
|
||||
│ │ │ ├── useZoomPan.ts # Hook zoom/panoramique
|
||||
│ │ │ ├── useWorkflowWithUndo.ts # Workflow + Undo
|
||||
│ │ │ └── useExecutionSync.ts # Sync exécution
|
||||
│ │ ├── utils/
|
||||
│ │ │ ├── ImportExport.ts # Logique import/export
|
||||
│ │ │ └── UndoManager.ts # Gestionnaire Undo/Redo
|
||||
│ │ └── types/ # Types TypeScript
|
||||
│ └── public/
|
||||
├── test_import_export.sh # Tests import/export
|
||||
├── test_zoom_pan.sh # Tests zoom/panoramique
|
||||
└── docs/ # Documentation
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
### Prérequis
|
||||
- Node.js 18+ et npm
|
||||
- Python 3.10+
|
||||
- Redis (optionnel pour dev, requis pour prod)
|
||||
|
||||
### Frontend
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
npm install
|
||||
npm start # Démarre le serveur de développement sur http://localhost:3000
|
||||
```
|
||||
|
||||
### Backend
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
python -m venv venv
|
||||
source venv/bin/activate # Sur Windows: venv\Scripts\activate
|
||||
pip install -r requirements.txt
|
||||
cp .env.example .env # Configurer les variables d'environnement
|
||||
python app.py # Démarre le serveur Flask sur http://localhost:5001
|
||||
```
|
||||
|
||||
## Développement
|
||||
|
||||
### Frontend
|
||||
|
||||
```bash
|
||||
npm start # Serveur de développement avec hot reload
|
||||
npm run build # Build de production
|
||||
npm test # Exécuter les tests
|
||||
npm run lint # Vérifier le code avec ESLint
|
||||
npm run type-check # Vérifier les types TypeScript
|
||||
```
|
||||
|
||||
### Backend
|
||||
|
||||
```bash
|
||||
python app.py # Démarrer le serveur
|
||||
pytest # Exécuter tous les tests
|
||||
pytest tests/unit # Tests unitaires seulement
|
||||
pytest -m property # Tests property-based seulement
|
||||
pytest --cov # Tests avec couverture de code
|
||||
black . # Formater le code
|
||||
flake8 . # Vérifier le style
|
||||
mypy . # Vérifier les types
|
||||
```
|
||||
|
||||
## Tests
|
||||
|
||||
### Frontend
|
||||
- **Tests unitaires**: Jest + React Testing Library
|
||||
- **Coverage**: Minimum 70% requis
|
||||
|
||||
### Backend
|
||||
- **Tests unitaires**: Pytest
|
||||
- **Tests d'intégration**: Pytest avec fixtures
|
||||
- **Tests property-based**: Hypothesis
|
||||
- **Coverage**: Minimum 70% requis
|
||||
|
||||
## Configuration
|
||||
|
||||
### Variables d'Environnement Backend
|
||||
|
||||
Voir `.env.example` pour la liste complète. Les principales :
|
||||
|
||||
- `FLASK_ENV`: development ou production
|
||||
- `SECRET_KEY`: Clé secrète pour les sessions
|
||||
- `DATABASE_URL`: URL de la base de données
|
||||
- `REDIS_URL`: URL Redis pour le cache
|
||||
- `CORS_ORIGINS`: Origines autorisées pour CORS
|
||||
|
||||
### Configuration Frontend
|
||||
|
||||
Le frontend se configure via `webpack.config.js` et les variables d'environnement peuvent être passées au build.
|
||||
|
||||
## Déploiement
|
||||
|
||||
### Production
|
||||
|
||||
1. **Frontend**: Build et déploiement sur CDN ou serveur web
|
||||
```bash
|
||||
npm run build
|
||||
# Les fichiers sont dans dist/
|
||||
```
|
||||
|
||||
2. **Backend**: Déploiement avec Gunicorn + Nginx
|
||||
```bash
|
||||
gunicorn -k geventwebsocket.gunicorn.workers.GeventWebSocketWorker -w 1 app:app
|
||||
```
|
||||
|
||||
3. **Base de données**: Migrer vers PostgreSQL
|
||||
4. **Cache**: Configurer Redis
|
||||
5. **Monitoring**: Configurer logs et métriques
|
||||
|
||||
## Roadmap
|
||||
|
||||
### Phase 1: MVP (4-6 semaines)
|
||||
- ✅ Structure du projet configurée
|
||||
- ⏳ API REST de base
|
||||
- ⏳ Canvas avec drag & drop
|
||||
- ⏳ Nodes essentiels
|
||||
- ⏳ Exécution simple
|
||||
|
||||
### Phase 2: Fonctionnalités Avancées (4-6 semaines)
|
||||
- ⏳ WebSocket temps réel
|
||||
- ⏳ Templates avancés
|
||||
- ⏳ Undo/Redo
|
||||
- ⏳ Zoom/Pan optimisé
|
||||
- ⏳ Variables management
|
||||
|
||||
### Phase 3: Production (2-4 semaines)
|
||||
- ⏳ Optimisations performance
|
||||
- ⏳ Sécurité renforcée
|
||||
- ⏳ Documentation complète
|
||||
- ⏳ Déploiement production
|
||||
|
||||
## Contribution
|
||||
|
||||
Voir le document de design complet dans `.kiro/specs/visual-workflow-builder/design.md` pour les détails d'architecture et les propriétés de correction à respecter.
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Reference in New Issue
Block a user