API Rick et Morty

API
Components
Store
Types
Récupérer des données d'API externe et les afficher dans des composants avec conditions et boucles.
Explorateur Rick and Morty (Épisode 1)
Retour à l'Académie

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.