rpa_vision_v3/visual_workflow_builder/DEMARRAGE_RAPIDE.md

🚀 Démarrage Rapide - Visual Workflow Builder

⚡ En 30 Secondes

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)

./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

./start_full.sh              # Tout en un

Démarrage Manuel

# Terminal 1 - Backend
cd backend && python app.py

# Terminal 2 - Frontend
cd frontend && npm start

Arrêt

Ctrl+C                       # Dans le terminal start_full.sh

Logs

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

Tests

./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

pip install -r backend/requirements.txt

Frontend ne démarre pas

cd frontend
rm -rf node_modules
npm install

Port déjà utilisé

# 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

# 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 ! 🎉