# 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)