Déploiement, tokens et export d'application

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