Composants modulaires

Components
Architecture
Transformer les cartes en composants réutilisables avec propriétés personnalisables.
Premiers pas avec une vraie app (Épisode 2)
Retour à l'Académie

Composants modulaires

Résumé express : Transformer les cartes en composants réutilisables avec propriétés personnalisables pour optimiser la maintenance et la lisibilité du code.

Problématique : Code difficile à maintenir

Avec la structure actuelle, nous avons déjà plusieurs éléments qui rendent l'application difficile à maintenir. Si nous devions créer une application plus grande, le code deviendrait rapidement illisible. La solution : créer des composants réutilisables.

Qu'est-ce qu'un composant ?

Les composants sont de petits objets que nous pouvons réutiliser plusieurs fois dans notre application. Par exemple, une carte peut devenir un composant que nous instancions autant de fois que nécessaire.

1. Créer le composant Card

Étapes de création

  1. Faire clic droit dans l'explorateur
  2. Sélectionner Component
  3. Nommer le composant "Card"
  4. Aller sur la page main et copier une carte complète (clic droit → Copy)
  5. Retourner dans le composant Card et coller la carte

Nettoyer la page principale

  1. Retourner sur la page main
  2. Supprimer les deux cartes créées précédemment
  3. À la place, ajouter un nouveau bloc
  4. Transformer ce bloc en composant Card via le sélecteur

2. Ajouter des propriétés au composant

Problème : cartes identiques

Actuellement, toutes nos cartes affichent le même contenu. Pour les personnaliser, nous devons ajouter des propriétés.

Créer une propriété "title"

  1. Aller dans le composant Card
  2. Créer une nouvelle propriété :
    • Nom : title
    • Type : string
  3. Double-cliquer sur le texte du titre de la carte
  4. Remplacer le texte par une variable : {title}
  5. Fermer les accolades

Configurer la propriété

  1. Un champ de propriété apparaît dans l'inspecteur
  2. Cliquer sur le champ "title variable"
  3. Le lier à la propriété title

Définir une valeur par défaut

Par défaut, la propriété est vide. Pour éviter des titres vides :

  1. Dans le composant, définir une valeur par défaut (ex: "Hello")
  2. Cette valeur s'affichera si aucune propriété n'est définie

3. Utiliser le composant avec différentes propriétés

Personnaliser chaque instance

  1. Retourner sur la page main
  2. Sélectionner le premier composant Card
  3. Dans les propriétés, définir title : "À faire"
  4. Dupliquer le composant (Ctrl+C / Ctrl+V)
  5. Sélectionner le second composant
  6. Définir title : "En cours"

4. Créer le composant CreateButton

Factoriser le bouton d'ajout

  1. Créer un nouveau composant "CreateButton"
  2. Copier le bloc bouton depuis la page main
  3. Coller dans le composant CreateButton
  4. Supprimer l'ancien bouton de la page main
  5. Ajouter le composant CreateButton à sa place

Avantages de cette approche

  • Maintenance facilitée : modifier un composant met à jour toutes ses instances
  • Code plus lisible : structure claire et organisée
  • Réutilisabilité : un composant peut être utilisé partout dans l'application
  • Personnalisation : chaque instance peut avoir ses propres propriétés

Préparation pour l'épisode suivant

Dans le prochain épisode, nous verrons comment rendre les cartes encore plus modulaires en gérant les éléments internes (tâches) qui seront des tableaux d'objets plutôt que de simples propriétés string.

Prochainement : Gestion avancée des propriétés et tableaux d'objets dans les composants.