🔧 Guide d'Installation - CrewDeck

Instructions complètes pour installer et démarrer CrewDeck sur différentes plateformes.

📋 Prérequis

Navigateur moderne: Chrome, Firefox, Edge, Safari (versions récentes)
Aucune dépendance backend requise
Connexion Internet (pour charger les CDN la première fois)

🚀 Installation Rapide (3 étapes)

Étape 1: Télécharger le Projet

Option A - Cloner via Git:

git clone https://github.com/votre-utilisateur/crewdeck.git
cd crewdeck

Option B - Télécharger le ZIP:

Visitez le repo GitHub
Cliquez "Code" → "Download ZIP"
Extrayez le fichier
Ouvrez le dossier CrewDeck

Étape 2: Ouvrir l'Application

Méthode Simple (Double-clic):

Localisez index.html
Double-cliquez dessus
Votre navigateur s'ouvre automatiquement ✅

Méthode Serveur (Recommandée):

Voir les instructions ci-dessous selon votre système.

Étape 3: Charger les Données (Optionnel)

Pour commencer avec des données de démo:

Appuyez sur F12 pour ouvrir la console
Tapez: loadDemoData()
Appuyez sur Entrée
La page se recharge avec des données 🎉

💻 Installation par Plateforme

Windows

Méthode 1: Serveur Python (Simple)

Python 3 (Recommandé):

# Ouvrir PowerShell dans le dossier CrewDeck
cd C:\chemin\vers\CrewDeck

# Lancer le serveur
python -m http.server 8000

# Puis ouvrir: http://localhost:8000

Python 2 (Ancien):

python -m SimpleHTTPServer 8000

Méthode 2: Serveur Node.js

# Installer http-server globally
npm install -g http-server

# Naviguer vers le dossier
cd C:\chemin\vers\CrewDeck

# Lancer le serveur
http-server

# Ouvrir: http://localhost:8080

Méthode 3: Live Server (VS Code)

Installez l'extension "Live Server" dans VS Code
Clic-droit sur index.html
Sélectionnez "Open with Live Server"
Le navigateur s'ouvre automatiquement ✅

Méthode 4: Double-clic Direct

Localisez index.html
Double-cliquez
S'ouvre dans le navigateur par défaut ✅

macOS

Méthode 1: Serveur Python (Simple)

# Naviguer vers le dossier
cd /path/to/CrewDeck

# Avec Python 3
python3 -m http.server 8000

# Puis ouvrir http://localhost:8000 dans le navigateur

Méthode 2: Utiliser open (Plus rapide)

cd /path/to/CrewDeck

# Ouvrir index.html dans le navigateur par défaut
open index.html

Méthode 3: Serveur HTTP Node.js

# Installer http-server
npm install -g http-server

# Naviguer vers le dossier
cd /path/to/CrewDeck

# Lancer le serveur
http-server

# Ouvrir http://localhost:8080

Méthode 4: Live Server (VS Code)

Installez l'extension "Live Server"
Clic-droit sur index.html
"Open with Live Server"

Linux

Méthode 1: Python HTTP Server

# Naviguer vers le dossier
cd ~/path/to/CrewDeck

# Avec Python 3
python3 -m http.server 8000

# Ouvrir http://localhost:8000

Méthode 2: Node.js HTTP Server

# Installer http-server si nécessaire
npm install -g http-server

# Naviguer vers le dossier
cd ~/path/to/CrewDeck

# Lancer le serveur
http-server -p 8000

# Ouvrir http://localhost:8000

Méthode 3: Serveur HTTP Simple (Python 2)

# Si vous utilisez Python 2 (rare maintenant)
cd ~/path/to/CrewDeck
python -m SimpleHTTPServer 8000

Méthode 4: Fichier Direct

# Ouvrir dans le navigateur par défaut
xdg-open index.html

🌐 Installation sur un Serveur Web

Apache

Copiez le dossier CrewDeck dans /var/www/html/
Assurez-vous que Apache a les permissions de lecture
Visitez: http://localhost/CrewDeck/

sudo cp -r CrewDeck /var/www/html/
sudo chown -R www-data:www-data /var/www/html/CrewDeck

Nginx

Copiez le dossier dans le répertoire web
Configurez le virtual host

server {
    listen 80;
    server_name crewdeck.local;

    root /var/www/crewdeck;

    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

GitHub Pages

Poussez le code sur une branche gh-pages
Activez GitHub Pages dans les paramètres
Accédez à: https://username.github.io/crewdeck/

git checkout -b gh-pages
git push origin gh-pages

# Activez GitHub Pages dans les paramètres du repo

🔒 Installation Sécurisée (HTTPS)

Utiliser HTTPS Localement (Python)

# Créer un certificat auto-signé
openssl req -x509 -newkey rsa:4096 -nodes -out cert.pem -keyout key.pem -days 365

# Lancer le serveur HTTPS (Python 3.7+)
python3 -m http.server --certificate cert.pem --key key.pem 8443

# Ouvrir https://localhost:8443

Utiliser Certbot (Serveur de Production)

# Installer Certbot
sudo apt-get install certbot python3-certbot-nginx

# Générer le certificat
sudo certbot certonly --standalone -d crewdeck.com

# Configurer Nginx avec le certificat
# (Voir configuration Nginx ci-dessus)

📦 Installation via Docker (Optionnel)

Créez un Dockerfile:

FROM nginx:alpine

COPY . /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Puis lancez:

# Construire l'image
docker build -t crewdeck .

# Lancer le container
docker run -d -p 8000:80 crewdeck

# Ouvrir http://localhost:8000

✅ Vérifier l'Installation

Checklist Post-Installation

L'application se charge sans erreurs
Le logo créwDeck est visible
La navigation fonctionne (4 onglets)
Les boutons répondent aux clics
Les formulaires s'ouvrent (+ Ajouter Pilote)
Pas d'erreur console (F12 → Console)
L'effet Vanta Waves est visible en arrière-plan

Test Fonctionnel

Ouvrir la console (F12)
Charger les données de démo:
```
loadDemoData()
```
Vérifier le dashboard se remplit
Cliquer sur les onglets (Pilotes, Sessions, Analytics)
Vérifier les graphiques s'affichent

Test de Performance

Ouvrir DevTools (F12)
Onglet "Performance"
Enregistrer une action simple (clic)
Vérifier les temps de réaction < 100ms

🔧 Configuration Avancée

Modifier le Port

Python:

python3 -m http.server 9000  # Au lieu de 8000

Node.js:

http-server -p 9000

Activer CORS

Pour les développeurs qui intègrent une API:

# http.server avec CORS
python3 -c "import http.server, socketserver; \
handler = http.server.SimpleHTTPRequestHandler; \
handler.do_OPTIONS = lambda s: (s.send_response(200), s.send_header('Access-Control-Allow-Origin', '*')); \
httpd = socketserver.TCPServer(('', 8000), handler); \
print('Serveur sur http://localhost:8000'); \
httpd.serve_forever()"

Compresser les Fichiers

Pour réduire la taille de transfert:

# Gzip les fichiers
gzip -9 index.html styles.css app.js

🐛 Dépannage d'Installation

Erreur: "Port 8000 déjà utilisé"

# Trouver quel processus utilise le port
lsof -i :8000    # Linux/macOS
netstat -ano | findstr :8000  # Windows

# Utiliser un autre port
python3 -m http.server 8001

Erreur: "Command not found: python3"

# Installer Python
# Windows: Télécharger depuis python.org
# macOS: brew install python3
# Linux: sudo apt-get install python3

Erreur: "Permission denied"

# Donner les permissions
chmod -R 755 /chemin/to/CrewDeck

La page ne se charge pas

Vérifiez que vous accédez à index.html
Vérifiez la console (F12) pour les erreurs
Vérifiez les fichiers existent: styles.css, app.js
Essayez un autre navigateur

Les styles sont bizarres

Actualisez la page (Ctrl+Shift+R)
Videz le cache du navigateur
Vérifiez que styles.css est bien dans le dossier
Vérifiez la connexion Internet (CDN Tailwind)

localStorage ne fonctionne pas

Vérifiez que vous n'êtes pas en mode privé/incognito
Vérifiez que localStorage est activé dans les paramètres du navigateur
Essayez dans un autre navigateur

🚀 Déploiement en Production

Checklist Pré-Déploiement

Minifier CSS et JS
Configurer CORS si nécessaire
Ajouter des headers de sécurité
Tester tous les navigateurs cibles
Vérifier la performance (PageSpeed)
Configurer les redirects HTTPS

Optimiser pour la Production

Minifier les fichiers:

# Utiliser un minificateur CSS/JS
# Exemple: terser pour JS, clean-css pour CSS

# Ou en ligne:
# https://www.minifycode.com/

Ajouter des headers HTTP:

Cache-Control: public, max-age=31536000
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN

Monitoring

Mettez en place Google Analytics
Monitorer les erreurs JavaScript
Vérifier les performances régulièrement

🔗 Ressources Utiles

Python HTTP Server: https://docs.python.org/3/library/http.server.html
Node.js HTTP Server: https://www.npmjs.com/package/http-server
Docker Setup: https://docs.docker.com/
Nginx Config: https://nginx.org/en/docs/
Apache VirtualHost: https://httpd.apache.org/docs/

✨ Installation Complétée !

Une fois installé, consultez:

GETTING_STARTED.md pour les premières étapes
README.md pour la documentation complète
demo-data.json pour des données d'exemple

Bon pilotage ! 🏁⚡

Besoin d'aide ? Consultez la FAQ dans GETTING_STARTED.md ou ouvrez un issue sur GitHub.

FilesExpand file tree

INSTALLATION.md

Latest commit

History

INSTALLATION.md

File metadata and controls

🔧 Guide d'Installation - CrewDeck

📋 Prérequis

🚀 Installation Rapide (3 étapes)

Étape 1: Télécharger le Projet

Étape 2: Ouvrir l'Application

Étape 3: Charger les Données (Optionnel)

💻 Installation par Plateforme

Windows

Méthode 1: Serveur Python (Simple)

Méthode 2: Serveur Node.js

Méthode 3: Live Server (VS Code)

Méthode 4: Double-clic Direct

macOS

Méthode 1: Serveur Python (Simple)

Méthode 2: Utiliser open (Plus rapide)

Méthode 3: Serveur HTTP Node.js

Méthode 4: Live Server (VS Code)

Linux

Méthode 1: Python HTTP Server

Méthode 2: Node.js HTTP Server

Méthode 3: Serveur HTTP Simple (Python 2)

Méthode 4: Fichier Direct

🌐 Installation sur un Serveur Web

Apache

Nginx

GitHub Pages

🔒 Installation Sécurisée (HTTPS)

Utiliser HTTPS Localement (Python)

Utiliser Certbot (Serveur de Production)

📦 Installation via Docker (Optionnel)

✅ Vérifier l'Installation

Checklist Post-Installation

Test Fonctionnel

Test de Performance

🔧 Configuration Avancée

Modifier le Port

Activer CORS

Compresser les Fichiers

🐛 Dépannage d'Installation

Erreur: "Port 8000 déjà utilisé"

Erreur: "Command not found: python3"

Erreur: "Permission denied"

La page ne se charge pas

Les styles sont bizarres

localStorage ne fonctionne pas

🚀 Déploiement en Production

Checklist Pré-Déploiement

Optimiser pour la Production

Monitoring

🔗 Ressources Utiles

✨ Installation Complétée !