Fichiers de configuration et stores

Gestion d'état
Stores
Configuration
Apprenez à centraliser les données avec les fichiers de configuration et gérer l'état réactif avec les stores.
Tour des fonctionnalités (Épisode 7)
Retour à l'Académie

Fichiers de configuration et stores

Résumé rapide : Apprenez à centraliser les données avec les fichiers de configuration et gérer l'état réactif avec les stores pour un stockage persistant.

Introduction à la gestion des données

Ce tutoriel démontre comment utiliser les fichiers de configuration pour les valeurs statiques centralisées et les stores pour la gestion réactive et persistante des données dans votre application.

1. Bases des fichiers de configuration

Qu'est-ce qu'un fichier de configuration ?

Les fichiers de configuration permettent de centraliser des valeurs réutilisées dans toute votre application. Changez la valeur une fois, et elle se met à jour partout automatiquement.

Créer votre premier fichier de configuration

  1. Cliquez sur + pour ajouter un nouveau fichier de configuration
  2. Cliquez sur Key 0 pour le renommer (ex : "name")
  3. Définissez le Type : String
  4. Entrez une Valeur : ex. "mybilliondollarcompany"

Utiliser les valeurs de configuration dans les composants

  1. Créez un nouveau composant
  2. Ajoutez une variable et sélectionnez votre valeur de configuration
  3. Passez en Preview : La valeur s'affiche automatiquement
  4. Avantage clé : Cette valeur est maintenant centralisée et réutilisable

Utiliser la configuration en Visual Scripting

  1. Allez dans l'onglet Logic
  2. Ajoutez un nœud Get pour votre configuration (ex : "get new config")
  3. Décomposez l'objet pour accéder à ses propriétés
  4. Appuyez sur Ctrl + Espace pour vérifier la valeur
  5. Accédez à la propriété spécifique (ex : "name")

Tester la centralisation

  1. Retournez à votre fichier de configuration
  2. Changez la valeur (ex : de "mybilliondollarcompany" à "LunaPark")
  3. Retournez à votre composant
  4. Résultat : La valeur est automatiquement mise à jour partout où elle est utilisée

Cas d'usage : Parfait pour les noms d'applications, endpoints API, feature flags, ou toute valeur utilisée dans plusieurs composants.

2. Comprendre les stores

Qu'est-ce qui différencie les stores ?

Les stores sont comme des fichiers de configuration mais avec des capacités réactives et des options de persistance :

  • Memory : Se réinitialise au rechargement de la page
  • Session : Persiste dans le même onglet du navigateur
  • Local : Persiste entre les rechargements et sessions (stocké sur l'ordinateur de l'utilisateur)

Limitations de portée du stockage

  • Le stockage local est spécifique à l'ordinateur
  • Les données ne se synchronisent pas entre différents navigateurs
  • Les données restent uniquement dans le navigateur où elles ont été créées

3. Construire une to-do list avec les stores

Créer la structure du store

  1. Créez un nouveau store
  2. Ajoutez une propriété tasks de type : Array of Objects
  3. Définissez la structure de l'objet :
    • icon : String ou emoji
    • text : String

Comprendre les vues du store

  • Côté gauche : Valeurs par défaut (état initial)
  • Côté droit : Valeurs en temps réel (état actuel)

Définir les valeurs par défaut

  1. Ajoutez un objet de tâche par défaut :
    • icon : "📝"
    • text : "finish the tutorial"
  2. Cliquez sur Reset preview pour charger les valeurs par défaut

Différence clé avec les fichiers de configuration

Les stores sont réactifs : Quand vous changez une valeur, elle se met à jour partout instantanément.

4. Templates pour le rendu dynamique

Qu'est-ce que les templates ?

Les templates activent deux patterns de rendu puissants :

  1. Rendu conditionnel : Afficher du contenu seulement si une condition est vraie
  2. Rendu en boucle : Répéter du contenu pour chaque élément d'un tableau

Utiliser un template de type For

  1. Créez un composant
  2. Ajoutez un template de type : For
  3. Définissez la source de données sur le tableau tasks de votre store
  4. Résultat : Le template se répète pour chaque tâche

Accéder aux variables du template

Les templates génèrent automatiquement deux variables :

  • Index : Position dans le tableau (0, 1, 2, etc.)
  • Value : Les données de l'élément actuel

Afficher les données des tâches

  1. Dans le template, ajoutez un widget Card
  2. Ajoutez des éléments pour afficher :
    • L'icône depuis value.icon
    • Le texte depuis value.text
  3. Résultat : Chaque tâche s'affiche dans sa propre carte

5. Ajouter des tâches dynamiquement

Créer le formulaire de saisie

  1. Créez deux variables de composant :
    • icon : String (pour l'emoji picker)
    • text : String (pour le text input)
  2. Ajoutez un nouveau conteneur Card
  3. Dans la carte, ajoutez des éléments de formulaire :
    • Emoji picker lié à la variable icon
    • Text input lié à la variable text
    • Button avec le label "Add task"

Améliorer la mise en page du formulaire

  1. Enveloppez les inputs dans un conteneur Flex
  2. Définissez la direction en horizontal
  3. Ajoutez un gap pour l'espacement entre les éléments
  4. Donnez au text input une largeur minimale

6. Implémenter la logique d'ajout de tâche

Configurer l'événement click

  1. Sélectionnez votre bouton "Add task"
  2. Ajoutez un événement Click
  3. Ouvrez l'éditeur de logique

Construire le flux d'ajout de tâche

  1. Ajoutez un nœud Get new store et décomposez-le
  2. Accédez à la propriété tasks
  3. Ajoutez un nœud Push pour ajouter au tableau
  4. Créez le nouvel objet de tâche :
    • Ajoutez un nœud Create Object
    • Ajoutez Get icon depuis le composant
    • Ajoutez Get text depuis le composant
  5. Connectez l'objet créé au nœud Push

Optionnel : Réinitialiser les champs de saisie

Après l'ajout d'une tâche, réinitialisez le formulaire :

  1. Ajoutez un nœud Set icon avec une chaîne vide
  2. Ajoutez un nœud Set text avec une chaîne vide
  3. Résultat : Le formulaire se vide après chaque ajout de tâche

7. Tester le système complet

Ajouter votre première tâche

  1. Entrez un emoji (ex : ✈️)
  2. Entrez du texte : "Go to Canada"
  3. Cliquez sur Add task
  4. Résultat : La tâche apparaît instantanément dans la liste ci-dessous

Vérifier la persistance

  1. Ajoutez plusieurs tâches
  2. Appuyez sur F5 pour recharger la page
  3. Résultat : Toutes les tâches restent car nous utilisons le stockage local
  4. Important : Cela fonctionne uniquement dans le même navigateur sur le même ordinateur

Comprendre le flux réactif

  1. Les inputs du formulaire mettent à jour les variables du composant
  2. L'événement click déclenche la logique
  3. La logique pousse le nouvel objet dans le store
  4. Le template se re-rend automatiquement avec les nouvelles données
  5. Les champs du formulaire se réinitialisent à l'état vide

Concepts clés

Fichiers de configuration

  • Valeurs statiques centralisées : Nom d'app, paramètres, constantes
  • Source unique de vérité : Mettre à jour une fois, changer partout
  • Pas de réactivité : Les valeurs ne changent pas pendant l'exécution
  • Accès via nœud Get : Récupération simple dans la logique

Stores

  • Stockage de données réactif : Les valeurs se mettent à jour partout automatiquement
  • Trois modes de persistance : Memory, Session, Local
  • Synchronisation temps réel : Les changements se reflètent immédiatement
  • État persistant : Les données survivent aux rechargements de page (avec stockage local)

Templates

  • Boucles For : Rendre des listes dynamiquement
  • Rendu conditionnel : Afficher/masquer selon des conditions
  • Variables auto-générées : Index et value pour chaque itération
  • Mises à jour réactives : Re-rendu quand les données changent

Persistance du stockage

  • Memory : Temporaire, se réinitialise au rechargement
  • Session : Par onglet, se réinitialise à la fermeture de l'onglet
  • Local : Permanent dans le navigateur, survit aux rechargements

Bonnes pratiques

Choisir entre configuration et stores

  • Utilisez les fichiers de configuration pour les valeurs statiques qui ne changent jamais à l'exécution
  • Utilisez les stores pour les données qui changent selon les interactions utilisateur
  • Utilisez les stores avec stockage local pour les données qui doivent persister entre les sessions

Conception de la structure des stores

  • Planifiez votre schéma de données avant de créer le store
  • Utilisez des noms de propriétés significatifs pour la clarté
  • Gardez les stores focalisés sur des fonctionnalités spécifiques (ex : un store pour les tâches, un autre pour les paramètres utilisateur)

Optimisation des templates

  • Utilisez les templates For pour les listes et tableaux
  • Utilisez les templates If pour le contenu conditionnel
  • Gardez le contenu du template simple pour de meilleures performances
  • Accédez uniquement aux propriétés nécessaires de l'objet value

Stratégie de persistance des données

  • Memory : Données de panier d'achat, état UI temporaire
  • Session : Données de formulaire lors de processus multi-étapes
  • Local : Préférences utilisateur, travail sauvegardé, to-do lists

Gestion des formulaires

  • Toujours réinitialiser les inputs après soumission réussie
  • Valider les données avant d'ajouter aux stores
  • Fournir du feedback aux utilisateurs quand les actions se terminent
  • Utiliser les types d'input appropriés (emoji picker pour les icônes, text input pour le texte)