4. Mettre en place un vrai jeu de données
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 :
- On déclare une constante pokemons à la ligne 1, qui est un tableau de pokémons.
- On exporte cette constante sous forme d’un module CommonJS, en dernier, à la ligne 112.
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. 💪