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
276
visual_workflow_builder/PROJECT_SETUP.md
Normal file
276
visual_workflow_builder/PROJECT_SETUP.md
Normal file
@@ -0,0 +1,276 @@
|
||||
# Visual Workflow Builder - Project Setup Complete ✅
|
||||
|
||||
## Configuration Terminée
|
||||
|
||||
La structure du projet Visual Workflow Builder a été configurée avec succès. Tous les fichiers de configuration et la structure de base sont en place.
|
||||
|
||||
## Structure Créée
|
||||
|
||||
```
|
||||
visual_workflow_builder/
|
||||
├── README.md # Documentation principale
|
||||
├── PROJECT_SETUP.md # Ce fichier
|
||||
├── .gitignore # Configuration Git
|
||||
├── start.sh # Script de démarrage rapide
|
||||
│
|
||||
├── frontend/ # Application React + TypeScript
|
||||
│ ├── src/
|
||||
│ │ ├── components/
|
||||
│ │ │ ├── Canvas/ # Composant Canvas (Phase 2)
|
||||
│ │ │ ├── Palette/ # Composant Palette (Phase 2)
|
||||
│ │ │ ├── PropertiesPanel/ # Panneau de propriétés (Phase 3)
|
||||
│ │ │ └── TargetSelector/ # Sélecteur de cible (Phase 3)
|
||||
│ │ ├── models/ # Types TypeScript
|
||||
│ │ ├── services/ # Services API
|
||||
│ │ ├── store/ # Redux store
|
||||
│ │ ├── utils/ # Utilitaires
|
||||
│ │ ├── App.tsx # Composant principal
|
||||
│ │ ├── index.tsx # Point d'entrée
|
||||
│ │ └── index.css # Styles globaux
|
||||
│ ├── public/
|
||||
│ │ ├── index.html # Template HTML
|
||||
│ │ └── favicon.ico # Icône
|
||||
│ ├── tests/
|
||||
│ │ └── setup.ts # Configuration Jest
|
||||
│ ├── package.json # Dépendances npm
|
||||
│ ├── tsconfig.json # Configuration TypeScript
|
||||
│ ├── webpack.config.js # Configuration Webpack
|
||||
│ ├── .eslintrc.json # Configuration ESLint
|
||||
│ └── jest.config.js # Configuration Jest
|
||||
│
|
||||
└── backend/ # API Flask + Python
|
||||
├── api/
|
||||
│ ├── __init__.py
|
||||
│ ├── workflows.py # Endpoints workflows
|
||||
│ ├── templates.py # Endpoints templates
|
||||
│ ├── node_types.py # Endpoints types de nodes
|
||||
│ ├── executions.py # Endpoints exécutions
|
||||
│ └── websocket_handlers.py # Handlers WebSocket
|
||||
├── models/ # Modèles de données
|
||||
│ └── __init__.py
|
||||
├── services/ # Logique métier
|
||||
│ └── __init__.py
|
||||
├── utils/ # Utilitaires
|
||||
│ └── __init__.py
|
||||
├── tests/
|
||||
│ ├── __init__.py
|
||||
│ └── conftest.py # Configuration Pytest
|
||||
├── app.py # Point d'entrée Flask
|
||||
├── requirements.txt # Dépendances Python
|
||||
├── .env.example # Template variables d'environnement
|
||||
└── pytest.ini # Configuration Pytest
|
||||
```
|
||||
|
||||
## Technologies Configurées
|
||||
|
||||
### Frontend
|
||||
- ✅ **React 18** avec TypeScript
|
||||
- ✅ **Webpack 5** pour le build
|
||||
- ✅ **ESLint** pour le linting
|
||||
- ✅ **Jest** + React Testing Library pour les tests
|
||||
- ✅ **Redux Toolkit** pour la gestion d'état
|
||||
- ✅ **Material-UI** pour les composants UI
|
||||
- ✅ **react-flow-renderer** pour le canvas
|
||||
- ✅ **Socket.IO client** pour le temps réel
|
||||
|
||||
### Backend
|
||||
- ✅ **Flask** avec Flask-SocketIO
|
||||
- ✅ **Flask-CORS** pour CORS
|
||||
- ✅ **SQLAlchemy** pour la base de données
|
||||
- ✅ **Redis** pour le cache (optionnel en dev)
|
||||
- ✅ **Pytest** pour les tests
|
||||
- ✅ **Hypothesis** pour les tests property-based
|
||||
- ✅ **Pydantic** pour la validation
|
||||
|
||||
## Démarrage Rapide
|
||||
|
||||
### Option 1: Script Automatique
|
||||
|
||||
```bash
|
||||
cd visual_workflow_builder
|
||||
./start.sh
|
||||
```
|
||||
|
||||
Ce script démarre automatiquement le backend et le frontend.
|
||||
|
||||
### Option 2: Démarrage Manuel
|
||||
|
||||
#### Backend
|
||||
```bash
|
||||
cd visual_workflow_builder/backend
|
||||
python3 -m venv venv
|
||||
source venv/bin/activate # Windows: venv\Scripts\activate
|
||||
pip install -r requirements.txt
|
||||
cp .env.example .env
|
||||
python app.py
|
||||
```
|
||||
|
||||
Le backend sera accessible sur http://localhost:5001
|
||||
|
||||
#### Frontend
|
||||
```bash
|
||||
cd visual_workflow_builder/frontend
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
Le frontend sera accessible sur http://localhost:3000
|
||||
|
||||
## Vérification de l'Installation
|
||||
|
||||
### Backend
|
||||
```bash
|
||||
cd backend
|
||||
source venv/bin/activate
|
||||
pytest # Devrait passer (aucun test pour l'instant)
|
||||
python app.py # Devrait démarrer sans erreur
|
||||
curl http://localhost:5001/health # Devrait retourner {"status": "healthy"}
|
||||
```
|
||||
|
||||
### Frontend
|
||||
```bash
|
||||
cd frontend
|
||||
npm run type-check # Devrait passer
|
||||
npm run lint # Devrait passer
|
||||
npm test # Devrait passer (aucun test pour l'instant)
|
||||
npm start # Devrait ouvrir le navigateur
|
||||
```
|
||||
|
||||
## Prochaines Étapes
|
||||
|
||||
### Phase 1: Fondations et Structure de Base (Tâches 2-4)
|
||||
1. **Tâche 2**: Implémenter les modèles de données de base
|
||||
- Classes Python pour VisualWorkflow, VisualNode, VisualEdge
|
||||
- Interfaces TypeScript correspondantes
|
||||
- Tests property-based pour la sérialisation
|
||||
|
||||
2. **Tâche 3**: Créer l'API REST de base
|
||||
- Endpoints CRUD pour workflows
|
||||
- Validation JSON Schema
|
||||
- Tests d'API
|
||||
|
||||
3. **Tâche 4**: Checkpoint - Vérifier que les tests passent
|
||||
|
||||
### Phase 2: Interface Canvas de Base (Tâches 5-8)
|
||||
4. **Tâche 5**: Implémenter le composant Canvas
|
||||
5. **Tâche 6**: Implémenter la gestion des edges
|
||||
6. **Tâche 7**: Créer la palette de nodes
|
||||
7. **Tâche 8**: Checkpoint
|
||||
|
||||
### Phases Suivantes
|
||||
- Phase 3: Configuration et Propriétés (Tâches 9-12)
|
||||
- Phase 4: Validation et Vérification (Tâches 13-15)
|
||||
- Phase 5: Conversion et Exécution (Tâches 16-19)
|
||||
- Phase 6: Feedback Temps Réel (Tâches 20-22)
|
||||
- Phase 7: Templates et Réutilisabilité (Tâches 23-25)
|
||||
- Phase 8: Fonctionnalités Avancées (Tâches 26-29)
|
||||
- Phase 9: Raccourcis et UX (Tâches 30-33)
|
||||
- Phase 10: Intégration avec l'Écosystème (Tâches 34-37)
|
||||
- Phase 11: Extensibilité et Documentation (Tâches 38-41)
|
||||
|
||||
## Configuration des Outils de Développement
|
||||
|
||||
### VS Code (Recommandé)
|
||||
|
||||
Extensions recommandées:
|
||||
- ESLint
|
||||
- Prettier
|
||||
- Python
|
||||
- Pylance
|
||||
- Jest Runner
|
||||
|
||||
### Configuration Git
|
||||
|
||||
```bash
|
||||
cd visual_workflow_builder
|
||||
git init
|
||||
git add .
|
||||
git commit -m "Initial project setup - Visual Workflow Builder"
|
||||
```
|
||||
|
||||
## Dépendances Système
|
||||
|
||||
### Prérequis
|
||||
- **Node.js**: 18.x ou supérieur
|
||||
- **Python**: 3.10 ou supérieur
|
||||
- **npm**: 9.x ou supérieur
|
||||
- **pip**: 23.x ou supérieur
|
||||
|
||||
### Optionnel (pour production)
|
||||
- **Redis**: 7.x ou supérieur (pour le cache)
|
||||
- **PostgreSQL**: 15.x ou supérieur (pour la base de données)
|
||||
- **Nginx**: Pour le reverse proxy
|
||||
|
||||
## Commandes Utiles
|
||||
|
||||
### Frontend
|
||||
```bash
|
||||
npm start # Développement avec hot reload
|
||||
npm run build # Build de production
|
||||
npm test # Tests
|
||||
npm run lint # Linting
|
||||
npm run lint:fix # Fix automatique du linting
|
||||
npm run type-check # Vérification TypeScript
|
||||
```
|
||||
|
||||
### Backend
|
||||
```bash
|
||||
python app.py # Démarrer le serveur
|
||||
pytest # Tous les tests
|
||||
pytest -v # Tests verbeux
|
||||
pytest --cov # Avec couverture
|
||||
pytest -m unit # Tests unitaires seulement
|
||||
pytest -m property # Tests property-based seulement
|
||||
black . # Formater le code
|
||||
flake8 . # Vérifier le style
|
||||
mypy . # Vérifier les types
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Port déjà utilisé
|
||||
Si le port 3000 ou 5000 est déjà utilisé:
|
||||
- Frontend: Modifier `webpack.config.js` (devServer.port)
|
||||
- Backend: Modifier `.env` (PORT=5001)
|
||||
|
||||
### Erreurs d'installation npm
|
||||
```bash
|
||||
rm -rf node_modules package-lock.json
|
||||
npm cache clean --force
|
||||
npm install
|
||||
```
|
||||
|
||||
### Erreurs d'installation pip
|
||||
```bash
|
||||
rm -rf venv
|
||||
python3 -m venv venv
|
||||
source venv/bin/activate
|
||||
pip install --upgrade pip
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
### Base de données verrouillée
|
||||
```bash
|
||||
rm backend/*.db
|
||||
python backend/app.py # Recrée la base
|
||||
```
|
||||
|
||||
## Support et Documentation
|
||||
|
||||
- **Design Document**: `.kiro/specs/visual-workflow-builder/design.md`
|
||||
- **Requirements**: `.kiro/specs/visual-workflow-builder/requirements.md`
|
||||
- **Tasks**: `.kiro/specs/visual-workflow-builder/tasks.md`
|
||||
- **README**: `visual_workflow_builder/README.md`
|
||||
|
||||
## Statut du Projet
|
||||
|
||||
- ✅ **Tâche 1**: Configuration de la structure du projet - **TERMINÉE**
|
||||
- ⏳ **Tâche 2**: Implémenter les modèles de données de base
|
||||
- ⏳ **Tâche 3**: Créer l'API REST de base
|
||||
- ⏳ Phases suivantes...
|
||||
|
||||
---
|
||||
|
||||
**Date de création**: 2 décembre 2024
|
||||
**Version**: 1.0.0
|
||||
**Statut**: Configuration initiale terminée ✅
|
||||
Reference in New Issue
Block a user