AudiOhm/archives/docs/QUICKSTART_WEB.md

🌐 Quick Start - Web Mode

Guide rapide pour lancer l'application en mode Web (recommandé pour le développement).

🚀 Installation Rapide

1. Prérequis

• Flutter SDK (3.19.0 ou supérieur)

  • Windows: https://docs.flutter.dev/get-started/install/windows
  • Linux: https://docs.flutter.dev/get-started/install/linux
  • macOS: https://docs.flutter.dev/get-started/install/macos

• Chrome ou Edge navigateur

• Le backend doit être démarré (voir section backend)

---

🎯 Lancer l'application Web

Windows (PowerShell)

cd D:\Developpement\audiohm\frontend

# Première fois uniquement
flutter config --enable-web
flutter create --platforms=web .
flutter pub get

# Lancer l'app
flutter run -d chrome

Linux / macOS

cd frontend

# Première fois uniquement
flutter config --enable-web
flutter create --platforms=web .
flutter pub get

# Lancer l'app
flutter run -d chrome

L'application s'ouvrira automatiquement : http://localhost:8080

---

🔧 Démarrer le Backend (Obligatoire)

Sur le serveur :

cd /opt/audiOhm/backend
source venv/bin/activate
uvicorn app.main:app --host 0.0.0.0 --port 8000

Le backend sera accessible sur : http://VOTRE-SERVER-IP:8000

---

🌍 Configurer l'URL du Backend

Si le backend n'est pas en local, modifiez l'URL dans le frontend :

Fichier : frontend/lib/core/constants/api_constants.dart

const String baseUrl = 'http://VOTRE-SERVER-IP:8000/api/v1';

Exemple :

const String baseUrl = 'http://192.168.1.100:8000/api/v1';
// ou
const String baseUrl = 'http://audiOhm.lanro.eu:8000/api/v1';

Puis relancez :

flutter run -d chrome

---

🐛 Debuggage

Ouvrir les DevTools

1. L'application web inclut automatiquement une bannière de debug en bas
2. Cliquez sur "Open DevTools" pour ouvrir l'inspecteur Chrome

Raccourcis utiles

• r + Entrée - Hot reload (rafraîchir sans redémarrer)
• R + Entrée - Hot restart (redémarrer l'app)
• o + Entrée - Open DevTools
• q + Entrée - Quitter

---

📦 Compiler pour le Web (Production)

Pour créer une version de production web :

cd frontend
flutter build web --release

Les fichiers générés seront dans : frontend/build/web/

Vous pouvez les déployer sur :

• Nginx
• Apache
• GitHub Pages
• Netlify
• Vercel
• Tout serveur web statique

---

⚠️ Problèmes Courants

"No connected devices"

Solution :

flutter devices
# Devrait afficher Chrome ou Edge

Si Chrome n'apparaît pas, installez Chrome ou utilisez Edge :

flutter run -d edge

"Backend not responding"

Vérifiez que :

1. Le backend est démarré sur le serveur
2. L'URL dans api_constants.dart est correcte
3. Le firewall du serveur autorise le port 8000
4. Vous pouvez accéder à : http://VOTRE-SERVER-IP:8000/docs

CORS Error

Si vous avez une erreur CORS dans le navigateur, vérifiez que le backend autorise votre origine dans backend/.env :

BACKEND_CORS_ORIGINS=["http://localhost:8080","http://VOTRE-IP:8080"]

---

🎨 Développement

Hot Reload

Pendant le développement, Flutter détecte automatiquement les changements et recharge l'application.

1. Modifiez un fichier
2. Sauvegardez
3. L'application se met à jour automatiquement en ~1 seconde

Voir les logs

Les logs Flutter s'affichent dans la console où vous avez lancé flutter run.

Les logs du backend sont sur le serveur dans /tmp/uvicorn.log ou directement dans la console.

---

📝 Note importante

Le mode Web est parfait pour le développement car :

• ✅ Pas besoin de Visual Studio
• ✅ Débugage facile avec Chrome DevTools
• ✅ Hot reload ultra-rapide
• ✅ Fonctionne sur Windows, Linux, macOS
• ✅ Pas de compilation native

Pour la production, vous pourrez créer des exécutables natifs plus tard.

---

Bon développement ! 🚀