Sujet synthèse-éval Pokémon

angular-pokedex.md

Angular Pokédex

1. Créer le squelette de l'application que vous allez appeler angular-pokedex.

2. Vous placer dans ce dossier (cd angular-pokedex) et lancer l'application

3. Vous aurez besoin de différents composants :

   • pokemon-list -> liste des pokémons
   • pokemon-card -> afficher un pokémon : son nom

4. Pour "remplir" votre application et pouvoir afficher quelque chose, vous n'allez pas directement faire des requêtes API. On avait directement écrit un tableau dans le composant. Voir "échantillon de données"

5. Vous aurez besoin d'une fonction pour récupérer l'image d'un Pokémon, par rapport à son URL. Comme elle repose sur la notion relativement avancée de "regex" (expression rationnelle en français), elle vous est fournie : voir "obtenir l'image".

6. Une fois que vous aurez réussi à afficher la liste, il faudra créer un service pour faire des requêtes HTTP et récupérer les données de l'API (au lieu d'utiliser l'échantillon ci-dessous).

   • Vous avez intérêt à créer un service avec ng g s suivi du nom du service (vous pouvez l'appeler pokemon tout simplement).
   • URL de l'API : https://pokeapi.co/api/v2/pokemon/.
   • Il y aura un petit "point d'attention" à avoir, par rapport au format des données. Voir "format des données"

Échantillon de données

pokemons = [
  {
    name: 'bulbasaur',
    url: 'https://pokeapi.co/api/v2/pokemon/1/',
  },
  {
    name: 'ivysaur',
    url: 'https://pokeapi.co/api/v2/pokemon/2/',
  },
  {
    name: 'venusaur',
    url: 'https://pokeapi.co/api/v2/pokemon/3/',
  },
  {
    name: 'charmander',
    url: 'https://pokeapi.co/api/v2/pokemon/4/',
  },
];

Typer les données

Dans l'exemple ci-dessus, on n'a pas typé le tableau d'objets "pokémon".

On peut créer une classe ou une interface pour définir les attributs d'un objet pokémon. Pour cela, on peut :

• Soit créer un fichier manuellement : par exemple l'appeler src/app/types.ts
• Soit créer le fichier avec ng g interface ou ng g class

Vous pouvez utiliser ng g interface pokemon pour générer un fichier d'interface pour typer les Pokémon, et y mettre ce contenu :

// Fichier src/app/pokemon.ts

export interface Pokemon {
  name: string;
  url: string;
}

Vous pourrez ensuite importer l'interface depuis le composant pokemon-list.component.ts, et typer le tableau de pokémons en ajoutant le type derrière le nom de l'attribut, séparé par : :

pokemons: Pokemon[] = [
  // les objets pokémon (inchangés)
];

Traduir en français, on indique qu'il s'agit d'un tableau d'objets "conformes" à l'interface Pokemon.

Obtenir l'image

On vous donne cette fonction, qui permet de calculer l'URL de l'image, à partir de l'attribut url du pokémon.

Ajouter ce code dans le composant pokemon-card.

getPokemonImage(pokemonUrl: string) {
  const pokemonUrlRegexp = /https:\/\/pokeapi\.co\/api\/v2\/pokemon\/(\d+)\//;
  const matches = pokemonUrl.match(pokemonUrlRegexp);
  if (!matches) {
    return 'https://cdn.icon-icons.com/icons2/1898/PNG/512/pokemon_121114.png';
  }
  return `https://raw.githubusercontent.com/PokeAPI/sprites/f301664fbbce6ccbe09f9561287e05653379f870/sprites/pokemon/${matches[1]}.png`;
}

Ensuite, pour afficher l'image d'un pokémon, depuis le "template" (en admettant que pokemon est l'objet contenant name et url) :

<img src="{{ getPokemonImage(pokemon.url) }}" />

Format des données

L'API renvoie les données sous ce format :

{
  "count": 1118,
  "next": "https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20",
  "previous": null,
  "results": [
    {
      "name": "bulbasaur",
      "url": "https://pokeapi.co/api/v2/pokemon/1/"
    },
    {
      "name": "ivysaur",
      "url": "https://pokeapi.co/api/v2/pokemon/2/"
    },
    // ...
  ]
}

Par rapport à d'autres API plus "classiques", elle ne renvoie pas directement un tableau, mais… un objet contenant le tableau sous l'attribut results.

De ce fait, vous aurez besoin de typer la réponse renvoyée par l'API. Pour cela :

En principe, vous devriez déjà avoir défini un "type" Pokemon via une classe ou une interface.

Vous pouvez alors définir ce type (le mettre par exemple dans src/app/types.ts) :

export interface PokemonListResponse {
  count: number;
  next: string | null;
  previous: string | null;
  results: Pokemon[]
}

Ainsi, dans la méthode de votre service, vous pourrez typer votre requête API (attention à ne pas copier coller tel quel) :

return this.http.get<PokemonListResponse>('<url-api-pokemon>')
  .toPromise()
  // Cette ligne permet de récupérer juste le tableau de Pokemon
  // dans la réponse reçue de l'API
  .then(pokemonResponse => pokemonResponse.results);