Prototyper avec JSONServer et AngularCLI

écrit par guillaume.perouffe publié le jeudi 6 juillet 2017

Que vous soyez fâchés avec la programmation backend ou que vous ayez une POC rapide à effectuer, JSONServer et AngularCLI vous permettront d'accélérer les premières étapes du développement afin d'avoir au plus vite une application fonctionnelle.

Dans cet article nous allons voir comment mettre en place un projet Visual Studio 2017 combinant ces deux technologies. Une fois le socle posé, vous serez en mesure d'effectuer un prototype de l'application de vos rêves (ou ceux du client) sans avoir à vous soucier du backend. Qu'en dites-vous? Mais avant cela, la question que tout le monde se pose:

Qu'est-ce que JSONServer?

C'est assez simple, en fait. C'est un mini-serveur qui va mettre à disposition des données déclarées dans un fichier JSON au travers d'une API RESTful. Pour avoir un aperçu des conventions utilisées, voici l'exemple de base de données issu de la documentation :
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}
On voit ici deux types de définitions: des définitions au pluriel (qui seront utilisées majoritairement) et une définition au singulier. Comme vous l'aurez deviné, les définitions plurielles vous permettront de stocker une liste de tuples, contre un singleton pour les définitions au singulier. Lorsque vous créez des tables, vous devez spécifier un champ id qui fera office de clé primaire et qui sera auto-incrémenté. Vous pouvez également créer des relations de clé étrangère en définissant un champ dont le nom commence par celui de la table référencée au singulier suivi de Id. Par exemple ici, la table comments est liée à posts par le champ postId. Quand le serveur est lancé, il ne vous reste plus qu'à accéder à vos données grâce à des requêtes HTTP standards. Je vous laisse jeter un œil à la documentation pour voir les différentes routes et options disponibles.

Mise en place du projet

Nous allons utiliser AngularCLI, un outil qui générera notre projet Angular et nos composants afin d'être le plus rapidement face à une application opérationnelle. J'ai choisi l'IDE Visual Studio par habitude, et parce que la version 2017 apporte certaines améliorations sur le support de TypeScript, mais cela importe peu. Vous pourrez sans aucun doute appliquer les différentes étapes de cet article à votre IDE favori. Vous allez avoir besoin de node et npm pour récupérer AngularCLI et JSONServer, s'ils ne sont pas déjà sur votre machine, il est temps de les installer. Notez également que pour pouvoir lancer les paquets npm via la ligne de commande, il vous faudra rajouter le dossier des binaries npm à votre variable d'environnement PATH. Chez moi, le chemin est %appdata%/npm. Si vous suivez la route Visual Studio, je vous conseille l'extension NPM Task Runner. Elle vous permettra de lancer vos tâches npm d'un seul double-clic, ou de manière automatique à l'ouverture du projet. Dans Visual Studio, créons un nouveau projet test.cli dans une solution test. Comme il n'existe pas de modèle prédéfini pour ce que nous souhaitons faire, on choisira un projet console C#, et on supprimera l'unique fichier créé automatiquement nommé Program.cs. Nous n'allons de toute façon pas utiliser le débogueur de Visual, le langage choisi n'a donc pas d'importance. Ouvrez ensuite la Console du Gestionnaire de Package située dans Affichage > Autres Fenêtres > Console du gestionnaire de package. Celle-ci nous permettra d'avoir un hôte PowerShell au sein même de Visual Studio, pratique. Si votre installation npm est bien configurée, vous devriez pouvoir installer AngularCLI globalement avec la commande:
npm install -g "@angular/cli"
Vérifiez que vous êtes dans le répertoire racine de la solution avec ls, sinon naviguez vers celui-ci avec cd. Vous pouvez ensuite taper la commande suivante afin d'initialiser le projet Angular:
ng new test.cli --skip-git
Remarquez l'option skip-git qui empêche la création d'un nouveau référentiel git. En effet, nous en avons déjà créé un lorsque nous avons créé la solution. L'opération est un peu longue, le temps de télécharger tous les paquets nécessaires à Angular. Si tout s'est bien passé, vous devriez avoir un message du type Project 'test.cli' successfully created, et votre projet devrait désormais être bien peuplé: La première chose à faire est d'exclure le fichier node_modules du projet. On ne veut pas en effet que ce dossier puisse être commit dans le référentiel git. Quiconque récupérera ce projet aura la possibilité de restaurer les packages node grâce à npm. Une fois ceci fait, croyez-moi ou non (en fait si, croyez-moi), votre projet est déjà fonctionnel, vous pouvez même le lancer! Si vous avez l'extension NPM Task Runner, ouvrez l'Explorateur d'exécuteur de tâche avec Ctrl + Alt + Retour Arrière et double cliquez sur start. Patientez pendant le build et dirigez-vous vers http://localhost:4200 Et voilà une belle page par défaut!

JSONServer rejoint la partie

Remettez-vous de vos émotions, la mise en place JSONServer va être encore plus rapide. 5 minutes montre en main, c'est promis. Nous allons commencer par créer un fichier db.json qui contiendra notre fausse base de données. Le contenu sera celui de la documentation, pour faire simple.
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}
Maintenant, nous allons ajouter le paquet json-server à notre projet. Retournez dans la Console du gestionnaire de paquet, déplacez vous vers le répertoire du projet et installez le paquet avec npm:
cd .\test.cli
npm install json-server --save-dev
À la racine du projet, dans package.json, ajoutez une entrée dans le champ scripts qui vous permettra de lancer votre fausse API:
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "fake-api": "json-server --watch db.json"
}
Dans l'Explorateur d'exécuteur de tâche, actualisez et vous verrez apparaître votre nouvelle commande fake-api. Double-cliquez dessus, attendez la fin du chargement du db.json et essayez votre API toute fraîche en allant à l'adresse http://localhost:3000/posts. Votre application Angular tourne, ainsi que votre fausse API. Tout est désormais paré pour le développement.

La prochaine étape

Pour continuer, il va vous falloir implémenter un service Angular qui se chargera d'aller interroger JSONServer. Vous pourrez ensuite créer vos composants et construire petit à petit votre application. Là encore, AngularCLI pourra vous aider avec ng generate qui se chargera de générer pour vous des composants ou services de base, prêts à être remplis avec vos méthodes. D'ailleurs pourquoi ne pas l'essayer maintenant? Tapez la commande suivante, validez et voyez la magie opérer:
ng generate component test.component
En une seule petite commande, un dossier contenant quatre fichiers a été créé dans src/app: il contient votre composant, sa feuille de style, son template HTML et son fichier de specs avec un premier test écrit. Magnifique n'est-ce pas? En plus, ce nouveau composant a été automatiquement déclaré dans le fichier app.module.ts. Vous pourrez aussi de la même manière générer services et autres directives, mais je vous laisse vous référer au wiki de AngularCLI pour voir toutes les possibilités offertes. Si vous êtes intéressés de voir la bête en action, vous pouvez récupérer ce repo GitHub sur lequel j'ai déposé l'application que j'ai écrite pour rédiger cet article. Il s'agit d'un petit projet de test qui utilise Materialize et SASS pour la mise en forme. AngularCLI se charge d'importer Materialize et de transpiler le SASS de manière automatique. Pour voir comment se passe la configuration, tout se passe dans le fichier .angular-cli.json à la racine du projet. Allez, et pour la route, un petit aperçu du rendu final de ce test: