() translation by (you can also view the original English article)
Dans ce tutoriel, vous verrez comment démarrer la configuration et l'utilisation d'un faux serveur REST API à l'aide de json-server, que vous pouvez utiliser lors du développement d'applications mobiles ou Web. Ce tutoriel suppose que vous avez une connaissance de base des requêtes JSON et HTTP.
Qu'est-ce REST?
REST signifie Transfert d'Etat Représentatif. C'est un style d'architecture pour la conception d'applications connectées. Il utilise un HTTP simple pour rendre la communication entre les machines possible. Ainsi, au lieu d'utiliser une URL pour manipuler certaines informations utilisateur, REST envoie une requête HTTP comme GET, POST, DELETE, etc. à une URL pour manipuler des données.
Par exemple, au lieu de faire une demande GET à une URL comme /deleteuser?id=10, la requête serait comme DELETE /user/10.
Pourquoi avons-nous besoin d'une fausse API REST?
Les API REST forment l'arrière-plan pour les applications mobiles et Web. Lors du développement d'applications, il est parfois impossible de disposer des API REST prêtes à être utilisées à des fins de développement. Pour voir l'application mobile ou Web en action, nous avons besoin d'un serveur qui jette des données JSON factices.
C'est alors que la fausse API REST entre en scène. json-server fournit la fonctionnalité pour configurer un faux serveur REST avec un minimum d'effort.
Mise en place
Pour commencer à utiliser json-server, installez le package à l'aide de Node Package Manager (npm).
1 |
npm install -g json-server |
Créez un fichier JSON fictif avec certaines données selon vos besoins. Par exemple, j'ai besoin de certaines données JSON avec des informations utilisateur comme id, nom, emplacement, etc. Je créerai donc un fichier appelé info.json avec les informations JSON suivantes:
1 |
{
|
2 |
"users": [{ |
3 |
"id": 1, |
4 |
"name": "roy", |
5 |
"location": "india" |
6 |
}, { |
7 |
"id": 2, |
8 |
"name": "sam", |
9 |
"location": "wales" |
10 |
}]
|
11 |
}
|
À partir du terminal, exécutez le serveur json avec info.json comme source de données et vous devriez avoir l'API REST en cours d'exécution à http://localhost:3000.
1 |
json-server info.json |
Test des points d'extrémité REST API
Depuis que notre faux serveur REST API est opérationnel, voyons comment accéder à l'API REST à l'aide d'un client. J'utilise le client Postman REST pour effectuer les appels API.
Requête GET
Commençons par faire une requête GET à l'URL REST. Dans le fichier json, nous avons défini des users de point final qui contiennent des informations relatives aux utilisateurs. Lors de la génération d'une requête GET à l'URL http://localhost:3000/users, elle doit afficher les données existantes.
1 |
[
|
2 |
{
|
3 |
"id": 1, |
4 |
"name": "roy", |
5 |
"location": "india" |
6 |
},
|
7 |
{
|
8 |
"id": 2, |
9 |
"name": "sam", |
10 |
"location": "wales" |
11 |
}
|
12 |
]
|
POST Requête
Afin d'ajouter de nouvelles données aux données existantes, nous ferons une requête POST à l'URL http://localhost:3000/users. Voici à quoi ressemblerait la requête POST:
Essayez de faire une requête GET et vous devriez avoir les nouvelles données ajoutées dans le fichier info.json.
1 |
[
|
2 |
{
|
3 |
"id": 1, |
4 |
"name": "roy", |
5 |
"location": "india" |
6 |
},
|
7 |
{
|
8 |
"id": 2, |
9 |
"name": "sam", |
10 |
"location": "wales" |
11 |
},
|
12 |
{
|
13 |
"name": "ii", |
14 |
"location": "la", |
15 |
"id": 7 |
16 |
},
|
17 |
{
|
18 |
"name": "Shona", |
19 |
"location": "LA", |
20 |
"id": 8 |
21 |
},
|
22 |
{
|
23 |
"name": "Shona", |
24 |
"location": "LA", |
25 |
"id": 9 |
26 |
}
|
27 |
]
|
DELETE Requête
Pour supprimer une entrée des données du json-server, vous devez envoyer une requête DELETE au point d'extrémité API avec l'Id utilisateur. Par exemple, pour supprimer l'utilisateur avec Id 1, vous devez envoyer une requête DELETE au point final http://localhost:3000/users/1. Une fois qu'il est supprimé, essayez de faire une requête GET, et l'utilisateur avec Id 1 ne devrait pas être dans le JSON retourné.
PATCH Requête
Pour mettre à jour une entrée existante, vous devez envoyer une demande PATCH avec les détails qui doivent être mis à jour pour cette entrée particulière. Par exemple, afin de mettre à jour les détails pour l'utilisateur avec Id 2, nous envoyons une demande de PATCH à l'URL http://localhost:3000/users/2 comme indiqué:
Recherche des API REST de json-server
En utilisant les API REST de json-server, vous pouvez effectuer une recherche dans les données pour trouver des données basées sur certains critères. Par exemple, pour trouver des utilisateurs avec un nom particulier, vous devez envoyer une requête GET à l'URL de l'API REST, comme indiqué ci-dessous:
Comme indiqué dans l'image ci-dessus, l'envoi d'une requête GET à l'URL http://localhost:3000/users?name=Shona renverrait les utilisateurs avec le nom Shona. De même, pour rechercher des utilisateurs avec d'autres champs, vous devez ajouter ce champ à la chaîne de requête.
Pour exécuter une recherche de texte intégral à travers le point d'extrémité REST API, vous devez ajouter la chaîne de recherche avec le paramètre q au point d'extrémité. Par exemple, pour rechercher des utilisateurs contenant des informations contenant des chaînes de recherche s, la requête ressemblerait à:
Gestion de la pagination
Lors de l'affichage d'une grille de données paginée, il serait nécessaire d'extraire certaines données en fonction de la pagination. Dans de tels scénarios, json-server fournit la fonctionnalité de pagination des données JSON. Par défaut, le nombre de données renvoyées par json-server est 10. Nous pouvons explicitement définir cette limite en utilisant le paramètre _limit.
1 |
http://localhost:3000/users?_limit=5
|
Une requête GET à l'URL ci-dessus renverrait cinq enregistrements. Maintenant, pour paginer les données, nous devons ajouter un autre paramètre _page à l'URL. _page définit la page qui doit être récupérée lors du renvoi des données.
1 |
http://localhost:3000/users?_limit=5&_page=2 |
Une requête GET à l'URL ci-dessus renverrait la deuxième page de l'ensemble de données avec cinq enregistrements par page. En changeant la variable _page, nous pouvons récupérer les enregistrements de page requis.
Gestion du tri
json-server fournit la fonctionnalité pour trier les données récupérées. Nous pouvons trier les données en fournissant le nom de la colonne qui doit être triée et l'ordre dans lequel les données doivent être triées. Par défaut, les données sont triées par ordre croissant. Nous pouvons fournir le nom de la colonne dans l'URL du point final en utilisant le mot-clé _sort et définir l'ordre à l'aide du mot-clé _order. Voici un exemple d'URL:
1 |
http://localhost:3000/users?_sort=id&_order=DESC |
L'URL ci-dessus devrait trier les données en fonction de la colonne Id, et elle serait triée par ordre décroissant.
Gestion d'opérateurs
json-server fournit également la fonctionnalité pour supporter des opérateurs comme trouver une entrée avec Id dans la gamme entre deux valeurs ou une entrée correspondant à une expression régulière particulière.
Pour trouver une entrée dans une range particulière, nous pouvons utiliser les opérateurs _gte et _lte. Par exemple, pour trouver des utilisateurs dont l'ID est supérieur à 1 et inférieur à 2, faites une requête GET à l'URL http://localhost:3000/users?id_gte=1&id_lte=2 comme indiqué:
Si nous voulons rechercher des noms commençant par une certaine lettre, nous pouvons utiliser des expressions régulières. Par exemple, pour rechercher des noms commençant par des lettres sa, nous allons utiliser l'opérateur _like et faire une requête GET à l'URL http://localhost:3000/users?name_like=^sa.
Conclusion
Dans ce tutoriel, vous avez vu comment utiliser les API REST json-server pour créer une base de données factice pour une utilisation rapide. Vous avez appris à utiliser json-server et à interroger l'URL pour ajouter, mettre à jour, modifier et supprimer des données. Vous avez vu comment paginer, trier et rechercher les données factices. Vous avez également vu comment utiliser les opérateurs pour rechercher des entrées en utilisant des expressions régulières.
Avez-vous utilisé json-server ou tout autre serveur d'API REST faux pour la création de données factices? Comment était votre expérience? Faites-nous savoir vos pensées dans les commentaires ci-dessous.
