# 🚀 Démarrage Rapide - Visual Workflow Builder

## ⚡ En 30 Secondes

```bash
cd visual_workflow_builder
./start_full.sh
```

Ouvrir http://localhost:3000 et c'est parti ! 🎉

## 📋 Prérequis

- Python 3.8+
- Node.js 14+
- npm ou yarn

## 🎯 Premier Workflow en 5 Minutes

### 1. Démarrer l'Application (30s)

```bash
./start_full.sh
```

### 2. Créer un Workflow (2min)

1. **Ajouter des étapes** :
   - Glisser "Navigate" depuis la palette
   - Glisser "Click" depuis la palette

2. **Connecter les étapes** :
   - Cliquer sur le port de sortie de "Navigate"
   - Glisser vers le port d'entrée de "Click"

3. **Configurer** :
   - **Navigate** : Entrer `https://example.com`
   - **Click** : Cliquer sur "Sélection visuelle" 📷, sélectionner un bouton

### 3. Sauvegarder et Exécuter (30s)

1. Cliquer sur **"Sauvegarder"** ✅
2. Cliquer sur **"Exécuter"** ▶️
3. Observer l'exécution en temps réel !

## 🎨 Interface

```
┌─────────────────────────────────────────────────────────────┐
│ [☰] Visual Workflow Builder  [+] [📁] [💾] [▶️]            │
├──────────┬──────────────────────────────────────┬───────────┤
│          │                                      │           │
│ Palette  │         Canvas                       │ Propriétés│
│          │                                      │           │
│ • Click  │    ┌──────┐                         │ Type: Click│
│ • Type   │    │Navigate│                       │           │
│ • Wait   │    └───┬──┘                         │ Élément:  │
│ • Loop   │        │                            │ [Sélection│
│ • ...    │    ┌───▼──┐                         │  visuelle]│
│          │    │Click │                         │           │
│          │    └──────┘                         │           │
└──────────┴──────────────────────────────────────┴───────────┘
```

## 🔧 Commandes Utiles

### Démarrage
```bash
./start_full.sh              # Tout en un
```

### Démarrage Manuel
```bash
# Terminal 1 - Backend
cd backend && python app.py

# Terminal 2 - Frontend
cd frontend && npm start
```

### Arrêt
```bash
Ctrl+C                       # Dans le terminal start_full.sh
```

### Logs
```bash
tail -f backend.log          # Logs backend
tail -f frontend.log         # Logs frontend
```

### Tests
```bash
./test_target_selector.sh    # Test du sélecteur
```

## 📚 Documentation

- **Guide complet** : `GUIDE_TEST_COMPLET.md`
- **Documentation technique** : `TASK_10_INTEGRATION_COMPLETE.md`
- **Résumé session** : `SESSION_04DEC_FINAL.md`

## 🐛 Problèmes Courants

### Backend ne démarre pas
```bash
pip install -r backend/requirements.txt
```

### Frontend ne démarre pas
```bash
cd frontend
rm -rf node_modules
npm install
```

### Port déjà utilisé
```bash
# Tuer le processus sur le port 5000
lsof -ti:5000 | xargs kill -9

# Tuer le processus sur le port 3000
lsof -ti:3000 | xargs kill -9
```

## ✅ Vérification Rapide

```bash
# Backend
curl http://localhost:5000/health

# Frontend
curl http://localhost:3000
```

## 🎯 Fonctionnalités Clés

✅ **Drag & Drop** : Glisser-déposer des étapes
✅ **Sélection Visuelle** : Capturer et sélectionner des éléments
✅ **Connexions** : Relier les étapes visuellement
✅ **Configuration** : Panneau de propriétés intuitif
✅ **Sauvegarde** : Persistance automatique
✅ **Exécution** : Feedback temps réel
✅ **Variables** : Gestion des données
✅ **Validation** : Vérification en temps réel

## 🚀 Prêt à Créer !

L'application est maintenant prête. Créez votre premier workflow d'automatisation en quelques minutes !

**Besoin d'aide ?** Consultez `GUIDE_TEST_COMPLET.md`

---

**Bon workflow ! 🎉**