## Introduction au projet

Ce tutoriel couvre l'intégration d'une API externe (Rick and Morty) pour afficher une liste de personnages dans des cartes stylisées avec Luna Park.

## 1. Préparation des données

### API Rick and Morty
1. Aller sur l'API Rick and Morty
2. Section **Characters** pour lister tous les personnages
3. Examiner la structure : results contenant les données des personnages
4. Copier l'URL de l'API : `https://rickandmortyapi.com/api/character`

## 2. Récupération des données

### Configuration de la page Main
1. Créer une page **Main**
2. Ajouter la logique avec **Manual Play** (bouton de test)
3. Créer un nœud **Fetch** avec l'URL de l'API
4. **Ctrl + Espace** après exécution pour voir les données

### Test de récupération
- Avant clic : "Undefined" (normal)
- Après clic sur Manual Play : données complètes de l'API visible

## 3. Typage automatique des données

### Génération de type
1. Cliquer sur le bloc **Fetch**
2. **Custom Types** → **Type** → **Generate**
3. Génération automatique du type pour toute la réponse API

### Création du type Character
1. Copier la structure générée pour un personnage (objet avec id, name, status, etc.)
2. **New** → **Type** → nommer "Character"
3. **Clic droit** → **Paste** pour coller la structure copiée

## 4. Configuration du Store

### Structure de données globale
1. Dans le **Store**, créer un schéma "Characters"
2. **Type** : Array de Character (tableau de personnages)
3. Liste vide par défaut

### Remplissage du Store
1. Retour à la page Main
2. **Spread** le JSON de l'API pour extraire "results"
3. **GetNewStore** → **SetProperty**
4. Target : store, Property : "Characters", Value : results
5. Connecter à l'exécution avec Manual Play

## 5. Composant Card

### Propriétés de base
1. Créer un composant **Card**
2. Trois propriétés :
   - **image** (string) : URL de l'image
   - **name** (string) : nom du personnage
   - **status** (string) : alive/dead/unknown

### Valeurs par défaut
Utiliser les données de Rick Sanchez pour tester :
- Image : URL de l'image de Rick
- Name : "Rick Sanchez"
- Status : "Alive"

### Structure du composant
1. **Block** principal (conteneur)
2. **Media** pour l'image (source = propriété image réactive)
3. **Custom Text** pour le nom (variable = propriété name)
4. **Component Status** (à créer) pour l'état

## 6. Composant Status avec conditions

### Création du composant Status
1. Nouveau composant avec propriété **status** (string, défaut "Alive")
2. Utiliser **Template** avec condition **If**

### Logique conditionnelle
**Template 1** : `if status equals "Alive"`
- Background vert (success lightest)
- Texte blanc lisible

**Template 2** : `if status equals "Dead"`
- Background rouge (error)

**Template 3** : `if status equals "Unknown"`
- Background gris

### Intégration dans Card
1. Sélectionner le composant Status dans Card
2. Propriété **status** → réactif → lier à la propriété status de Card

## 7. Affichage de la liste complète

### Boucle sur les données
1. Page Main → **Template** avec **For**
2. Itérer sur `newstore.characters`
3. Composant **Card** dans la boucle

### Liaison des données dynamiques
Pour chaque propriété de Card :
- **Image** : `template.value.image`
- **Name** : `template.value.name`
- **Status** : `template.value.status`

Toutes les cartes s'affichent avec leurs données respectives.

## 8. Stylisation avancée

### Style du composant Card
**Block principal :**
- Background : lightest token
- Width : 200px, Height : 260px
- Display : flex, Direction : column
- Border radius pour coins arrondis
- Overflow hidden

**Position du Status :**
- Card : `position: relative`
- Status : `position: absolute`
- Inset top/left pour positionnement
- Padding, border radius, rotation légère

**Media et texte :**
- Height/width 100% pour l'image
- Display flex center pour le nom
- Font bold

### Style de la grille principale
**Page Main :**
- Display : flex avec wrap
- Gap pour espacement
- Justify content center
- Padding pour aération

## Concepts techniques

### API Integration
- **Fetch** : récupération de données externes
- **Spread** : extraction de propriétés d'objets
- **SetProperty** : mise à jour du store global

### Types et Store
- **Génération automatique** de types depuis API
- **Store global** pour partage de données
- **Arrays typés** pour collections

### Composants conditionnels
- **Templates avec If** : affichage conditionnel
- **Propriétés réactives** : liaison dynamique
- **Réutilisabilité** : même composant, données différentes

### Boucles et affichage
- **Template avec For** : itération sur collections
- **template.value** : accès à l'élément courant
- **Grilles responsives** avec flexbox

## Résultat final

Application complète affichant tous les personnages Rick and Morty dans une grille de cartes stylisées, avec statuts colorés et mise à jour automatique depuis l'API.