2. Démarrer notre API Rest

Nous devons maintenant démarrer notre API Rest, afin de pouvoir ajouter et modifier des données dans notre petite base de données, depuis notre application. Pour cela, la librairie json-server met à notre disposition la commande suivante :

json-server --watch src/models/db.json --port=3001

Cette commande prend deux paramètres : watch et port. Le premier paramètre permet d’indiquer l’emplacement de notre fichier qui sert de base de données, nommée db.json dans notre cas. Ensuite, on indique le port dans lequel on veut démarrer notre API Rest. On précise « 3001 » dans notre cas, car rappelez-vous que notre application React tourne déjà sur le port 3000. 💡

Mais cette commande est peu longue non, on va devoir écrire tout ça à chaque fois qu’on veut démarrer une API ? 🤔

Effectivement, cela peut vite devenir pénible. À la place, on va définir une nouvelle instruction dans notre fichier package.json :

{
  "name": "react-pokemons-app",
  ...
  "dependencies": {
    ...
  },
  "scripts": {
    "start:api": "json-server --watch src/models/db.json --port=3001",
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  ...
  }
}

À la ligne 8, on définit un nouveau script start:api, qui sera chargé de démarrer notre API Rest simulée. Dans un terminal, lancez la commande suivante désormais :

npm run start:api

Si vous voyez un message similaire à celui-ci s’afficher dans votre navigateur, alors vous êtes sur la bonne voie :

Notre API Rest semble avoir démarré correctement.

Ensuite, retournez dans votre navigateur, et ouvrez un nouvel onglet. Nous allons tester que notre API est bien démarré correctement.

Saisissez l’adresse suivante :

http://localhost:3001/pokemons/1

Et vérifiez que votre navigateur vous renvoie l’écran suivant :

Voici « Bulbizarre », du point de vue du serveur !

Je vous présente notre pokémon Bulbizarre, du point de vue de notre serveur. Il s’agit simplement d’un objet JSON, c’est-à-dire un objet JavaScript composé de pair clef-valeur, tout simplement !

Mais avec ces quelques informations, nous pouvons construire une interface au top pour nos utilisateurs. 🙂

Bien, notre API Rest est correctement démarré sur notre poste de travail, on peut passer à la suite, c’est-à-dire utiliser cette API Rest depuis notre application de pokémons.

Pour la suite des développements, pensez à bien démarrer votre application React, et en plus votre API Rest. Concrètement, cela signifie ouvrir deux terminals, et lancez les commandes npm start et npm run start:api.

Notre API Rest fonctionne très bien sur notre poste de travail actuel, cependant si plus tard nous déployons notre API sur Internet, cela ne pourra pas fonctionner. En effet, rappelez-vous qu’une fois en ligne, notre application n’est qu’un ensemble de HTML, de CSS et de JavaScript. Il n’y a pas la place pour une API Rest et une base de données en plus ! Il faudra donc ruser à ce moment là pour sauvegarder les données de pokémons de l’utilisateur quelque part. Bien sûr, pour une « vraie » application, vous utiliserez un serveur distant, mais ce n’est pas l’objet de ce cours malheureusement.