# Déploiement, tokens et export d'application

**Résumé rapide :** Apprenez à utiliser les tokens de design pour un style cohérent, personnaliser le thème de votre application et la déployer en application web ou de bureau.

---

## Introduction à la finalisation d'application

Ce tutoriel démontre comment peaufiner votre application en utilisant les tokens de design, personnaliser son thème visuel et la déployer dans plusieurs formats - de l'hébergement web aux applications de bureau autonomes.

## 1. Configuration de votre page principale

### Création du point d'entrée
1. Créez une nouvelle page avec un **chemin vide** ("/") - ce sera votre page principale
2. Ajoutez votre composant (renommez-le "main" pour plus de clarté)
3. **Bonne pratique** : Nommez toujours vos fichiers correctement pour une meilleure organisation du projet

### Amélioration de la mise en page
1. Ajoutez un **flex display** avec direction verticale
2. Ajoutez un **gap** entre les éléments
3. Ajoutez du **padding** pour l'espacement

**Problème** : Utiliser des valeurs aléatoires en pixels (comme 11px ici, 15px là) crée un espacement incohérent dans toute votre application.

## 2. Comprendre les tokens de design

### Qu'est-ce que les tokens de design ?
Les tokens de design sont des valeurs prédéfinies pour votre thème qui assurent la cohérence dans toute votre application. Au lieu d'utiliser des "nombres magiques", vous utilisez des valeurs standardisées.

### Le sélecteur de tokens
Cherchez l'**icône de chaîne** (troisième élément) dans les champs de propriété - cela ouvre le sélecteur de tokens.

### Utilisation des tokens d'espacement
1. Pour la propriété **gap** : sélectionnez le token "S" (12 pixels)
2. Pour la propriété **padding** : sélectionnez le token "M" (16 pixels)
3. **Avantage clé** : Ces valeurs sont cohérentes partout dans votre application

### Utilisation des tokens de couleur
1. Ajoutez une couleur de **background** à votre conteneur
2. Au lieu de choisir une couleur aléatoire, cliquez sur le **sélecteur de tokens**
3. Choisissez parmi les couleurs prédéfinies comme "background" ou "primary"
4. **Résultat** : Vos couleurs correspondent au thème général de l'application

## 3. Personnalisation de votre thème

### Accès aux paramètres du thème
Cliquez sur l'**icône de palette** dans la barre d'outils pour ouvrir la personnalisation du thème.

### Définition de votre couleur principale
1. Choisissez votre **couleur principale** (ex : orange au lieu du bleu par défaut)
2. Cette couleur est utilisée pour les boutons et les éléments UI principaux
3. **Magie automatique** : Toutes les variations de la couleur principale sont générées automatiquement
4. **Mise à jour instantanée** : Vérifiez vos tokens - toutes les couleurs primaires sont maintenant mises à jour

### Configuration des couleurs de fond
1. Définissez votre **couleur de fond** (deuxième couleur dans les paramètres de thème)
2. **Conseil de design** : N'utilisez pas de gris pur - ajoutez une teinte chaude ou froide
   - Les tons bleus créent une atmosphère froide
   - Les tons orange/rouge créent une atmosphère chaude
3. Trouvez un équilibre qui correspond à votre marque

### Options de thème supplémentaires
- **Match editor** : Synchronise les couleurs de l'éditeur avec le thème de votre app pour une meilleure cohérence visuelle
- **Mode clair/sombre** : Basculez entre les thèmes (mode sombre recommandé pour le confort)
- **Bordures** : Personnalisez les styles de bordure
- **Radius** : Ajustez l'arrondi des coins pour des designs plus nets ou plus doux

## 4. Déploiement de votre application

### Déploiement web
1. **Enregistrez votre projet** d'abord
2. Cliquez sur l'**icône de marteau** → **Deploy**
3. Attendez 2-3 secondes pour la compilation
4. **Résultat** : Votre application est maintenant en ligne et accessible via URL
5. **Performance** : La version déployée est optimisée pour la vitesse

### Options d'auto-hébergement
1. Cliquez sur **Download** pour obtenir les fichiers sources
2. Vous recevrez tous les fichiers CSS et JavaScript générés
3. **Téléversez ces fichiers sur n'importe quel service d'hébergement** :
   - GitHub Pages
   - Cloudflare
   - N'importe quel hébergeur web de votre choix

**Important** : L'hébergement Unapart est destiné aux tests et au débogage, pas à la distribution en production.

## 5. Export d'application de bureau

### Comprendre les deux formats

#### Version portable
- **Aucune installation requise** - s'exécute immédiatement
- Utilise la technologie WebView
- **Limitation** : WebView doit être présent sur le système de l'utilisateur
- **Disponibilité** : Intégré dans Windows 11, peut nécessiter un logiciel supplémentaire sur les systèmes plus anciens
- **Mises à jour** : Les utilisateurs doivent remplacer manuellement l'ancienne version par la nouvelle

#### Version installeur
1. **Installe WebView** s'il n'est pas présent sur le système
2. **Gestion des versions** : Définissez les numéros de version (majeur.mineur.correctif)
3. **Mises à jour faciles** : Les utilisateurs peuvent installer de nouvelles versions par-dessus les anciennes
4. **Préserve les raccourcis** et l'intégration système

### Paramètres d'application expliqués

#### Paramètres de base
- **App name** : Nom d'affichage de votre application
- **PWA** : Activer les fonctionnalités Progressive Web App
- **Version** : Suivre les versions (mettre à jour les numéros majeur, mineur ou correctif)

#### Options de mode historique
1. **Mode hash** (recommandé) : Utilise des URLs comme `#/option`
   - Fonctionne partout sans configuration serveur
   - Option la plus fiable
2. **Mode web** : Utilise des URLs propres comme `/option`
   - Nécessite une configuration serveur pour rediriger toutes les routes vers index.html
   - Plus esthétique mais nécessite une configuration
3. **Mode mémoire** : Aucun changement d'URL visible
   - Fonctionne partout
   - Moins convivial (les utilisateurs ne peuvent pas mettre en favori des pages spécifiques)

#### Paramètres de fenêtre
- **Dimensions par défaut** : Définir la taille initiale de la fenêtre
- **Redimensionnable** : Autoriser/empêcher le redimensionnement de la fenêtre
- **Plein écran** : Lancer en mode plein écran par défaut

## 6. Exemple pratique : Jeu Snake

### Démonstration de performance
Le tutoriel inclut un jeu Snake entièrement fonctionnel construit entièrement sans code :
- Toutes les cellules utilisent des **valeurs calculées** pour un rendu dynamique
- Gameplay fluide avec performance rapide
- Éléments codés par couleur (bleu pour le serpent, gris pour les cellules vides)
- **Rendu conditionnel** : Styles différents pour le corps du serpent, la nourriture et la tête (avec yeux)

### Ce que cela prouve
- **Aucun codage requis** : Tout construit avec des outils visuels
- **Haute performance** : L'export optimisé gère des calculs complexes
- **Viabilité réelle** : Peut construire de vrais jeux et applications

## Concepts clés

### Tokens de design
- **Cohérence** : Mêmes valeurs dans toute l'application
- **Maintenabilité** : Changer une fois, mettre à jour partout
- **Tokens d'espacement** : S, M, L pour gaps, padding, margins
- **Tokens de couleur** : Couleurs primaires, de fond, de surface

### Personnalisation du thème
- **Couleur primaire** : Boutons et éléments interactifs
- **Couleur de fond** : Atmosphère générale de l'app (chaude/froide)
- **Variantes générées** : Création automatique de palette de couleurs
- **Correspondance éditeur** : Synchroniser l'espace de travail avec le thème de l'app

### Formats de déploiement
- **Web** : Hébergé sur n'importe quel serveur, accessible via navigateur
- **Portable** : Exécutable autonome, sans installation
- **Installeur** : Application complète avec gestion de versions

### Gestion des versions
- **Majeur** : Changements majeurs ou fonctionnalités importantes
- **Mineur** : Nouvelles fonctionnalités, compatible avec versions précédentes
- **Correctif** : Corrections de bugs et petites améliorations

## Bonnes pratiques

### Cohérence du design
- **Toujours utiliser les tokens** au lieu de valeurs arbitraires
- **Tester les deux thèmes** (clair/sombre) avant déploiement
- **Choisir un schéma de couleurs cohérent** qui reflète votre marque

### Stratégie de déploiement
- **Utiliser l'hébergement Unapart** pour les tests et le débogage uniquement
- **Auto-héberger pour la production** sur des plateformes fiables
- **Choisir la version installeur** pour les apps de bureau avec mises à jour
- **Utiliser la version portable** pour des distributions simples et ponctuelles

### Organisation du projet
- **Nommer tous les fichiers** de manière descriptive
- **Utiliser des chemins de page clairs** pour la navigation
- **Documenter les numéros de version** lors de la sortie de mises à jour

### Tests
- **Prévisualiser avant déploiement** pour détecter les problèmes visuels
- **Tester sur les plateformes cibles** (navigateurs web, versions Windows)
- **Vérifier que tous les éléments interactifs** fonctionnent dans la version déployée