Aller au contenu
Projet de développement SGBD

API Pokémon

API Pokémon

Introduction à l'API RESTful

Qu'est-ce qu'une API RESTful et à quoi sert-elle ?

  • Définition : Une API (Application Programming Interface) RESTful est un service web qui permet la communication entre différentes applications via le protocole HTTP en respectant les principes de l'architecture REST (Representational State Transfer).

  • Utilité : Les API RESTful sont utilisées pour échanger des données entre un client et un serveur. Elles permettent aux développeurs d'accéder à des ressources web (comme les données des Pokémon) et de les manipuler en effectuant des requêtes HTTP standardisées (GET, POST, PUT, DELETE).

Exemple de requête à l’API Pokémon

Vous pouvez tester l’API en entrant cette URL dans votre navigateur :

Utilisation de l'API avec Fetch, Async/Await et Vue.js 3

Pour interagir avec une API RESTful en JavaScript moderne, on utilise souvent fetch avec async/await. Dans le contexte de Vue.js 3, voici comment intégrer ces concepts dans un composant.

Exemple de composant Vue.js 3 pour récupérer et afficher la liste des Pokémon avec un indicateur de chargement

<script setup>
import { ref, onMounted } from 'vue';

const pokemonList = ref([]);
const isLoading = ref(true);
const error = ref(null);

async function fetchPokemonList() {
  try {
    const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=151');
    const data = await response.json();
    pokemonList.value = data.results;
  } catch (err) {
    error.value = err;
  } finally {
    isLoading.value = false;
  }
}

onMounted(() => {
  fetchPokemonList();
});
</script>

<template>
  <div>
    <div v-if="isLoading">
      Chargement en cours...
    </div>
    <div v-else-if="error">
      Une erreur est survenue : {{ error.message }}
    </div>
    <ul v-else>
      <li v-for="pokemon in pokemonList" :key="pokemon.name">
        {{ pokemon.name }}
      </li>
    </ul>
  </div>
</template>

Explications

  • Imports et références :

    • ref : Permet de créer des variables réactives.
    • onMounted : Un hook du cycle de vie qui exécute une fonction lorsque le composant est monté.

  • Variables réactives :

    • pokemonList : Stocke la liste des Pokémon récupérés.
    • isLoading : Indique si la requête est en cours.
    • error : Stocke une éventuelle erreur survenue lors de la requête.

  • Fonction asynchrone fetchPokemonList :

    • Utilise await pour attendre la résolution de fetch et de response.json().
    • En cas de succès, stocke les résultats dans pokemonList.
    • En cas d'erreur, stocke l'erreur dans error.
    • Le bloc finally est exécuté dans tous les cas pour mettre isLoading à false.

  • Cycle de vie :

    • onMounted appelle fetchPokemonList lorsque le composant est monté.

  • Template :

    • Affiche "Chargement en cours..." tant que isLoading est true.
    • Affiche un message d'erreur si error n'est pas null.
    • Affiche la liste des Pokémon une fois les données chargées avec succès.

Description de l'exercice

Objectif

Créer un Pokédex interactif en utilisant Vue.js 3, Tailwind CSS pour le design, et l'API de PokéAPI. L'application doit être responsive pour une utilisation optimale sur différents appareils.

Étapes à réaliser

Initialisation du projet

  • Créer une nouvelle application Vue.js 3.
  • Installer Tailwind CSS et le configurer avec Vue.js.
  • S'assurer que l'application est responsive dès le départ.

Récupérer la liste des Pokémon

  • Utiliser l'endpoint suivant pour obtenir la liste des Pokémon :

    https://pokeapi.co/api/v2/pokemon?limit=151

    (Cela vous donnera les 151 premiers Pokémon.)

  • Afficher les noms et les images de chaque Pokémon dans une grille ou une liste.

Afficher les images des Pokémon

  • Chaque Pokémon possède des images accessibles via les données renvoyées.
  • Vous pouvez également utiliser les sprites officiels ou les artworks en haute résolution disponibles dans l'API.

Fonctionnalité de recherche (obligatoire)

  • Implémenter une barre de recherche permettant aux utilisateurs de trouver un Pokémon par son nom ou son numéro.
  • La recherche doit être dynamique et filtrer les résultats en temps réel.

Ajouter des filtres (optionnel mais encouragé)

  • Permettre aux utilisateurs de filtrer la liste des Pokémon par type (Feu, Eau, Plante, etc.).

  • Utiliser l'endpoint des types pour récupérer les informations nécessaires :

    https://pokeapi.co/api/v2/type/

Créer une fiche détaillée pour chaque Pokémon

  • Lorsque l'utilisateur clique sur un Pokémon, afficher une fiche complète avec :

    • Plusieurs images : Inclure différents sprites ou formes du Pokémon.
    • Taille et poids
    • Type(s)
    • Zones où il apparaît
    • Évolutions
    • Statistiques de base (attaque, défense, vitesse, etc.)

  • Utiliser les endpoints appropriés de l'API pour récupérer ces informations supplémentaires.

  • Permettre à l'utilisateur de naviguer facilement entre la liste principale et les fiches détaillées.
  • Ajouter des animations ou des transitions pour améliorer l'expérience utilisateur.

Responsive Design

  • Utiliser Tailwind CSS pour créer un design attrayant et responsive.
  • Tester l'application sur différents appareils (mobile, tablette, desktop).

Améliorations optionnelles

  • Pagination : Implémenter une pagination pour charger plus de Pokémon au-delà des 151 premiers.
  • Gestion des erreurs : Afficher des messages d'erreur conviviaux en cas de problème avec les requêtes API.
  • Optimisation des performances : Mettre en cache les requêtes ou utiliser le lazy loading pour les images.

Consignes techniques

  • Framework : Utiliser Vue.js 3 pour développer l'application.
  • Design : Utiliser Tailwind CSS pour le style et s'assurer que le site est responsive.
  • Composants : Structurer l'application en composants Vue pour une meilleure organisation (par exemple, un composant pour la liste, un pour la fiche détaillée, un pour la barre de recherche, un pour les filtres).
  • Appels API : Utiliser fetch avec async/await pour effectuer les requêtes HTTP.
  • Fonctionnalité de recherche : Implémenter une recherche efficace qui filtre les Pokémon en temps réel.
  • Filtres (optionnel) : Ajouter des filtres par type de Pokémon pour améliorer l'expérience utilisateur.
  • Images multiples : Inclure plusieurs images dans les fiches individuelles pour enrichir le contenu.

Ressources utiles