# Scripts Full-Stack Complétés

## Date
2 décembre 2024

## Résumé
Création de scripts shell pour gérer l'ensemble de l'application Visual Workflow Builder (backend + frontend) de manière unifiée.

## Scripts Créés

### Scripts Racine (Full-Stack)

#### 1. `start.sh` (Racine)
**Fonction**: Démarre tous les services (backend + frontend)

**Comportement**:
- ✅ Démarre le backend Flask (port 5001)
- ✅ Démarre le frontend React (port 3000) si configuré
- ✅ Gère gracieusement l'absence du frontend (Phase 1)
- ✅ Affiche les URLs d'accès
- ✅ Vérifie que les services démarrent correctement

**Utilisation**:
```bash
cd visual_workflow_builder
./start.sh
```

#### 2. `stop.sh` (Racine)
**Fonction**: Arrête tous les services

**Comportement**:
- ✅ Arrête le frontend (port 3000)
- ✅ Arrête le backend (port 5001)
- ✅ Nettoie tous les processus sur ces ports
- ✅ Fonctionne même sans fichiers PID

**Utilisation**:
```bash
cd visual_workflow_builder
./stop.sh
```

#### 3. `status.sh` (Racine)
**Fonction**: Affiche l'état de tous les services

**Comportement**:
- ✅ Vérifie l'état du backend
- ✅ Vérifie l'état du frontend
- ✅ Affiche les informations des processus
- ✅ Effectue des health checks HTTP
- ✅ Affiche les derniers logs
- ✅ Affiche les URLs d'accès rapide

**Utilisation**:
```bash
cd visual_workflow_builder
./status.sh
```

#### 4. `restart.sh` (Racine)
**Fonction**: Redémarre tous les services

**Comportement**:
- ✅ Arrête tous les services
- ✅ Attend 2 secondes
- ✅ Redémarre tous les services

**Utilisation**:
```bash
cd visual_workflow_builder
./restart.sh
```

### Scripts Backend

#### 1. `backend/start.sh`
- Démarre le serveur Flask sur port 5001
- Crée `.server.pid` et `server.log`
- Vérifie le démarrage

#### 2. `backend/stop.sh`
- Arrête le serveur Flask gracieusement
- Nettoie le port 5001
- Supprime le fichier PID

#### 3. `backend/status.sh`
- Affiche l'état du backend
- Informations processus
- Health check HTTP
- Derniers logs

#### 4. `backend/restart.sh`
- Redémarre le backend

### Scripts Frontend

#### 1. `frontend/start.sh`
- Démarre le serveur React sur port 3000
- Crée `.frontend.pid` et `frontend.log`
- Vérifie node_modules

#### 2. `frontend/stop.sh`
- Arrête le serveur React gracieusement
- Nettoie le port 3000
- Supprime le fichier PID

#### 3. `frontend/status.sh`
- Affiche l'état du frontend
- Informations processus
- Health check HTTP
- Derniers logs

## Architecture des Scripts

```
visual_workflow_builder/
├── start.sh              ✅ Démarre tout
├── stop.sh               ✅ Arrête tout
├── status.sh             ✅ État de tout
├── restart.sh            ✅ Redémarre tout
├── backend/
│   ├── start.sh          ✅ Démarre backend
│   ├── stop.sh           ✅ Arrête backend
│   ├── status.sh         ✅ État backend
│   ├── restart.sh        ✅ Redémarre backend
│   ├── .server.pid       (généré)
│   └── server.log        (généré)
└── frontend/
    ├── start.sh          ✅ Démarre frontend
    ├── stop.sh           ✅ Arrête frontend
    ├── status.sh         ✅ État frontend
    ├── .frontend.pid     (généré)
    └── frontend.log      (généré)
```

## Tests Effectués

### Test 1: Démarrage Full-Stack
```bash
./start.sh
```
**Résultat**: ✅ Backend démarré, Frontend géré gracieusement (Phase 1)

### Test 2: Vérification du Statut
```bash
./status.sh
```
**Résultat**: ✅ Affichage correct des deux services
- Backend: RUNNING ✓
- Frontend: État affiché correctement

### Test 3: Arrêt Full-Stack
```bash
./stop.sh
```
**Résultat**: ✅ Tous les services arrêtés proprement
- Frontend arrêté
- Backend arrêté
- Ports libérés

### Test 4: Redémarrage
```bash
./restart.sh
```
**Résultat**: ✅ Tous les services redémarrés

## Ports Utilisés

| Service  | Port | URL                      |
|----------|------|--------------------------|
| Backend  | 5001 | http://localhost:5001    |
| Frontend | 3000 | http://localhost:3000    |

## Fichiers Générés

### Backend
- `.server.pid` - PID du processus backend
- `server.log` - Logs du backend

### Frontend
- `.frontend.pid` - PID du processus frontend
- `frontend.log` - Logs du frontend

## Utilisation Quotidienne

### Démarrage Complet
```bash
cd visual_workflow_builder
./start.sh
```

### Vérifier l'État
```bash
./status.sh
```

### Arrêter Tout
```bash
./stop.sh
```

### Redémarrer Après Modifications
```bash
./restart.sh
```

### Démarrer Seulement le Backend
```bash
cd backend
./start.sh
```

### Démarrer Seulement le Frontend
```bash
cd frontend
./start.sh
```

## Workflow de Développement

### Développement Backend
```bash
# Démarrer seulement le backend
cd visual_workflow_builder/backend
./start.sh

# Voir les logs
tail -f server.log

# Après modifications
./restart.sh

# Arrêter
./stop.sh
```

### Développement Frontend (Phase 2+)
```bash
# Démarrer seulement le frontend
cd visual_workflow_builder/frontend
./start.sh

# Voir les logs
tail -f frontend.log

# Après modifications
./restart.sh

# Arrêter
./stop.sh
```

### Développement Full-Stack
```bash
# Démarrer tout
cd visual_workflow_builder
./start.sh

# Vérifier l'état
./status.sh

# Voir les logs backend
tail -f backend/server.log

# Voir les logs frontend
tail -f frontend/frontend.log

# Redémarrer tout
./restart.sh

# Arrêter tout
./stop.sh
```

## Tests Automatisés

### Script de Test Complet
```bash
#!/bin/bash
cd visual_workflow_builder

# Démarrer tous les services
./start.sh
sleep 3

# Vérifier l'état
./status.sh

# Lancer les tests backend
cd backend
python test_api_manual.py
TEST_RESULT=$?

# Arrêter tous les services
cd ..
./stop.sh

exit $TEST_RESULT
```

## Avantages

### Pour le Développement
1. **Démarrage Rapide**: Un seul script pour tout démarrer
2. **Gestion Unifiée**: Contrôle centralisé de tous les services
3. **Logs Séparés**: Logs backend et frontend dans des fichiers distincts
4. **Flexibilité**: Possibilité de démarrer services individuellement

### Pour les Tests
1. **Environnement Propre**: Arrêt/démarrage complet pour tests isolés
2. **Automatisation**: Facile d'intégrer dans des scripts de test
3. **Vérification**: Script status pour diagnostiquer rapidement

### Pour la Production
1. **Gestion de Processus**: Fichiers PID pour monitoring
2. **Logs Persistants**: Historique complet des événements
3. **Arrêt Gracieux**: Pas de perte de données
4. **Health Checks**: Vérification automatique de l'état

## Compatibilité

### Phase 1 (Actuelle)
- ✅ Backend complètement fonctionnel
- ✅ Frontend géré gracieusement (pas encore implémenté)
- ✅ Scripts prêts pour Phase 2

### Phase 2+ (Future)
- ✅ Frontend React sera automatiquement géré
- ✅ Aucune modification des scripts nécessaire
- ✅ Démarrage/arrêt automatique des deux services

## Dépannage

### Le backend ne démarre pas
```bash
# Vérifier si le port est occupé
lsof -i:5001

# Tuer le processus
kill $(lsof -ti:5001)

# Réessayer
./start.sh
```

### Le frontend ne démarre pas
```bash
# Vérifier si le port est occupé
lsof -i:3000

# Tuer le processus
kill $(lsof -ti:3000)

# Vérifier node_modules
cd frontend
npm install

# Réessayer
cd ..
./start.sh
```

### Les services ne s'arrêtent pas
```bash
# Forcer l'arrêt
./stop.sh

# Si ça ne fonctionne pas
kill -9 $(lsof -ti:5001)
kill -9 $(lsof -ti:3000)
```

### Fichiers PID obsolètes
```bash
# Supprimer les fichiers PID
rm backend/.server.pid
rm frontend/.frontend.pid

# Vérifier l'état
./status.sh
```

## Commandes Rapides

```bash
# Racine du projet
cd visual_workflow_builder

# Démarrer tout
./start.sh

# État
./status.sh

# Arrêter tout
./stop.sh

# Redémarrer tout
./restart.sh

# Logs backend
tail -f backend/server.log

# Logs frontend
tail -f frontend/frontend.log

# Health check backend
curl http://localhost:5001/health

# Health check frontend
curl http://localhost:3000
```

## Conclusion

Les scripts full-stack sont maintenant opérationnels et testés. Ils fournissent une interface unifiée pour gérer l'ensemble de l'application Visual Workflow Builder, facilitant grandement le développement et les tests.

**Avantages clés**:
- 🚀 Démarrage/arrêt en une commande
- 📊 Monitoring centralisé
- 🔄 Redémarrage automatique
- 📝 Logs séparés et accessibles
- ✅ Prêt pour Phase 2 (frontend React)

**Prochaine étape**: Continuer avec la Phase 2 du projet (Interface Canvas de Base).