Pour le moment, nous avons encore un soucis, c’est que nous renvoyons de simples chaînes de caractères statiques. Que ferons-nous demain si le pokémon Bulbizzare doit être supprimé, par exemple ? Nous ne pouvons pas tout le temps renvoyer le même pokémon, « en dur ».
Il est donc peut-être temps de mettre en place un vrai jeu de donnée dans notre API Rest, contenant une liste de quelques pokémons, avec lesquels nous allons pouvoir commencer à mettre en place une API Rest digne de ce nom.
Pour cela, pas besoin de se faire mal à la tête, nous pouvons tout à fait placer les données de nos pokémons dans un simple module JavaScript. Créez-donc un nouveau fichier mock-pokemon.js :
const pokemons = [
{
id: 1,
name: "Bulbizarre",
hp: 25,
cp: 5,
picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/001.png",
types: ["Plante", "Poison"],
created: new Date()
},
{
id: 2,
name: "Salamèche",
hp: 28,
cp: 6,
picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/004.png",
types: ["Feu"],
created: new Date()
},
{
id: 3,
name: "Carapuce",
hp: 21,
cp: 4,
picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/007.png",
types: ["Eau"],
created: new Date()
},
{
id: 4,
name: "Aspicot",
hp: 16,
cp: 2,
picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/013.png",
types: ["Insecte", "Poison"],
created: new Date()
},
{
id: 5,
name: "Roucool",
hp: 30,
cp: 7,
picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/016.png",
types: ["Normal", "Vol"],
created: new Date()
},
{
id: 6,
name: "Rattata",
hp: 18,
cp: 6,
picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/019.png",
types: ["Normal"],
created: new Date()
},
{
id: 7,
name: "Piafabec",
hp: 14,
cp: 5,
picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/021.png",
types: ["Normal", "Vol"],
created: new Date()
},
{
id: 8,
name: "Abo",
hp: 16,
cp: 4,
picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/023.png",
types: ["Poison"],
created: new Date()
},
{
id: 9,
name: "Pikachu",
hp: 21,
cp: 7,
picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/025.png",
types: ["Electrik"],
created: new Date()
},
{
id: 10,
name: "Sabelette",
hp: 19,
cp: 3,
picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/027.png",
types: ["Normal"],
created: new Date()
},
{
id: 11,
name: "Mélofée",
hp: 25,
cp: 5,
picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/035.png",
types: ["Fée"],
created: new Date()
},
{
id: 12,
name: "Groupix",
hp: 17,
cp: 8,
picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/037.png",
types: ["Feu"],
created: new Date()
}
]
module.exports = pokemons;
Alors, le fichier est très long, mais c’est simplement parce qu’il contient les données de plus de 12 pokémons ! En dehors de cela, le code est assez simple :
Et voilà. Maintenant, on peut utiliser cette liste de pokémons partout ailleurs dans toute notre application. Enfin, comme nous avons qu’un seul véritable fichier pour le moment, ce sera dans app.js : 😄
const express = require('express')
let pokemons = require('./mock-pokemon')
const app = express()
const port = 3000
app.get('/', (req, res) => res.send('Hello, Express!'))
// On utilise la liste de pokémons dans notre point de terminaison :
app.get('/api/pokemons/:id', (req, res) => {
const id = req.params.id
const pokemon = pokemons.find(pokemon => pokemon.id === id)
res.send(`Vous avez demandé le pokémon ${pokemon.name}.`)
})
// ...
On importe ici notre liste de pokémons, à la ligne 2. Ensuite, on s’en sert dans notre point de terminaison, un peu plus bas.
À la ligne 12, on utilise la méthode JavaScript ES6 find, pour récupérer un pokémon en fonction d’une certaine condition. Dans notre cas, on cherche le pokémon qui a le même identifiant que celui issue de l’url, soit: *pokemon.id === id*.
Ensuite, une fois que l’on a récupéré le pokémon voulu, on le retourne dans la réponse.
Il ne nous reste plus qu’à tester tout ça !
Retournez dans votre navigateur, et saisissez l’adresse suivante : http://localhost:3000/api/pokemons/1.
Et là… c’est le drame.
Un message d’erreur devrai apparaître :
TypeError: Cannot read property 'name' of undefined
Bon ne paniquons pas, il doit bien y avoir une raison. D’autant plus que notre code à l’air correct.
Dans la prochaine étape, nous allons essayer de trouver une solution à ce désagréable message. 💪