Maintenant, voyons comment mettre en place un API REST de développement. L’article suivant présente 2 solutions : Jsonplaceholder et json-server.
Jsonplaceholder
Jsonplaceholder est un service en ligne aussi disponible en installation locale. Par contre, il demeure en lecture seule et simule des réponses lorsque vos lancez les opérations de modification.
json-server
json-server doit être installé localement, mais permet les opérations de mise à jour.
json-server, lorsque vous avez besoin d’un API REST de développement
L’outil logiciel json-server est une solution simple pour simuler un API REST lors du développement de votre application. En moins de 30 secondes, il est possible de l’installer localement et de le configurer en fonction de vos besoins.
Installer json-server
|
1 |
$ sudo npm install -g json-server |
Créer le fichier de base
Dans ce fichier, vous n’avez qu’à spécifier, en format JSON, les données de votre API REST. Si des requêtes POST sont lancés, votre fichier sera modifié avec les données envoyées par votre client.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
db.json { "posts": [ { "title": "Title 1", "body": "New body 1", "userId": 1, "id": 1, "archived": true }, { "title": "Title 2 ", "body": "New body 2", "userId": 2, "id": 2 } ], "comments": [], } |
Lancer le serveur
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$ json-server --watch db.json \{^_^}/ hi! Loading db.json Resources http://localhost:3000/posts http://localhost:3000/comments Type s + enter at any time to create a snapshot of the database Watching... OPTIONS /posts/4 204 3.939 ms - - GET /posts 200 227.855 ms - 86 DELETE /posts/4 404 192.351 ms - 2 GET /posts/2 200 199.460 ms - 7 |
json-server en ligne de commande
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/usr/bin/json-server [options] <source> Options: --port, -p Set port [default: 3000] --host, -H Set host [default: "0.0.0.0"] --watch, -w Watch file(s) [boolean] --routes, -r Load routes file --static, -s Set static files directory --read-only, --ro Allow only GET requests [boolean] --no-cors, --nc Disable Cross-Origin Resource Sharing [boolean] --snapshots, -S Set snapshots directory [default: "."] --delay, -d Add delay to responses (ms) --id, -i Set database id property (e.g. _id) [default: "id"] --quiet, -q Suppress log messages from output [boolean] --help, -h Show help [boolean] --version, -v Show version number [boolean] Examples: /usr/bin/json-server db.json /usr/bin/json-server file.js |
https://github.com/typicode/json-server
Génération de données avec Faker
Encore mieux que d’écrire votre petit fichier .json, il est possible de composer un script qui se chargera de générer des données aléatoires avec l’aide de faker. La section suivante présente comment générer 100 enregistrements de personnes ayant un nom et un avatar unique.
Pour débuter, installer faker et lodash
|
1 |
$ npm install faker lodash |
Créer votre script de génération des enregistrements
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
module.exports = function(){ var faker = require("faker"); var _ = require("lodash"); return { users: _.times(100, function (n) { return { id: n, name: faker.name.findName(), avatar: faker.internet.avatar() } }) } } |
Lancer json-server
|
1 |
$ json-server generate.js |
Aller prendre un bon verre d’eau ou un fruit
Vous les méritez bien!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
[ { id: 0, name: "Junius O'Kon", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/homka/128.jpg" }, { id: 1, name: "Toy Harris", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/osmond/128.jpg" }, { id: 2, name: "Gilbert Kiehn", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/zacsnider/128.jpg" }, { id: 3, name: "Lillie Streich", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/kosmar/128.jpg" }, … { id: 99, name: "Providenci Mueller", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/benjamin_knight/128.jpg" } ] |
Jsonplaceholder, un API REST de développement
Jsonplaceholder est une autre solution basée sur json-server. Il offre plusieurs routes pré-configurées et supporte plusieurs méthodes HTTP. Vous pouvez l’utiliser en ligne, ou installer votre propre serveur localement.
Fonctionnalités de Jsonplaceholder
- Aucune configuration nécessaire
- API REST de base
- Relation « Has many »
- Filtres et ressources enfant.
- Support de CORS et JSONP
- Support pour les verbes HTTP suivants : GET, POST, PUT, PATCH, DELETE et OPTIONS
- Compatible avec Backbone, AngularJS et Ember
Attention
Les données de votre API REST ne seront pas modifiées. Suite à un POST, une réponse vous est retournée, mais la ressource n’est pas vraiment ajoutée ou modifiée.
Jsonplaceholder en ligne
- Posts http://jsonplaceholder.typicode.com/posts/1
- Albums http://jsonplaceholder.typicode.com/albums/1
- Photos http://jsonplaceholder.typicode.com/photos/1
- Users http://jsonplaceholder.typicode.com/users/1
Installer une version locale de Jsonplaceholder
Simple comme ‘Bonjour’, en 2 commandes :
|
1 2 |
$ npm install -g jsonplaceholder $ jsonplaceholder |
Votre API REST de développement est maintenant disponible à l’adresse http://localhost:3000
Jsonplaceholder sur GitHub
Conclusion
Plusieurs options s’offrent à vous lorsque vous désirez mettre en place un API REST de développement. Jsonplaceholder offre une solution en ligne et locale, mais les données ne sont pas sauvegardées. json-server doit être installé sur votre poste, mais offre beaucoup plus de flexibilité et sauvegarde réellement vos données suite à un POST ou à un PUT.
Voici d’autres solution qui pourraient être analysées :
- http://www.mocky.io/
- https://jsonstub.com/
- https://github.com/marmelab/FakeRest
- https://www.npmjs.com/package/fake-rest-api
- http://johansson.jp/angular-apimock/#/demo-simple
- https://github.com/seriema/angular-apimock
Ceci est un test.
PS: Nice site!