Skip to content

2. Chapitre 1 - Mise en place de l’environnement de travail

2.1. Installer les outils

  1. Node.js : télécharger et installer la version 22 (ou plus récente) depuis nodejs.org. Vérifier l’installation dans un terminal : 
1
2
node --version
npm --version
  1. Visual Studio Code (VSCode) : téléchargeable gratuitement sur code.visualstudio.com. Installer l’extension « TypeScript and JavaScript Language Features » (généralement déjà intégrée).
  2. [NestJS] CLI, installé une bonne fois pour toutes (côté client, [Vite] ne nécessite aucune installation globale, cf. introduction). Dans un terminal de VSCode : 
1
npm install -g @nestjs/cli
  1. [MySQL] 8 : installer par exemple via XAMPP, Laragon (sous Windows) ou directement [MySQL] Community Server. Un outil d’administration graphique (phpMyAdmin, [MySQL] Workbench, DBeaver, HeidiSQL…) facilite la suite. Par la suite, l’outil Laragon est utilisé.
  2. Postman : téléchargeable gratuitement sur postman.com.

Si vous avez téléchargé les codes, ceux-ci sont présents dans deux dossiers :

Image

  • en [1], le client [Vue.js] ;
  • en [2], le serveur [NestJS] ;

Ouvrez le dossier [2] avec Visual Studio [File / Open Folder] :

Image

2.2. Créer la base de données

Pour créer la base de données [MySQL] utilisée par le serveur [NestJS], nous allons utiliser l’outil Laragon. En septembre 2026, Laragon est disponible à l’URL [Download Laragon – Fast & Modern Dev Environment ]. Laragon amène avec lui des outils qui permettent d’installer un serveur PHP et le SGBD [MySQL] :

Image

  • en [1], un serveur web Apache ;
  • en [2], le SGBD [MySQL] ;
  • en [3], un outil de messagerie que nous n’utiliserons pas ;
  • en [4], lance tous les services (Apache, [MySQL], MailPit) ;
  • en [5], affiche la page web d’URL [http://localhost]. Par défaut, cette URL désigne le dossier <laragon-install>\www où <laragon-install> est le dossier d’installation de Laragon ;
  • en [6], lance l’Outil HeidiSQL qui permet de gérer des bases de données MySQL. C’est avec cet outil que nous créerons la base de données utilisée par le serveur de calcul de l’impôt ;
  • en [7], ouvre un terminal dans lequel tous les binaires utiles à Laragon sont dans le PATH ;
  • en [8], ouvre un explorateur windows dans le dossier associé à l’URL [http://localhost] ;

Le dossier d’installation de Laragon comporte les éléments suivants :

 
  • En [1], le dossier [bin] contient de nombreuses applications :
  • En [1], le serveur web Apache ;
  • en [2], un terminal de commandes ;
  • en [3], un client [git] permettant de versionner les différentes versions d’un projet ;
  • en [4], un gestionnaire de bases de données ;
  • en [5], un gestionnaire courrier ;
  • en [6], le SGBD [MySQL] ;
  • en [7], un autre serveur web ;
  • en [8], [node.js] pour exécuter des scripts Javascript ;
  • en [9], un éditeur de texte ;
  • en [10], l’interpréteur PHP ;
  • en [11], l’interpréteur [Python] ;
  • en [12], un serveur de cache ;

Laragon ramène avec lui un environnement de développement conséquent. Dans ce cours, nous n’utiliserons que le SGBD [MySQL] [6] et l’outil [heidisql] pour le gérer graphiquement ;

Pour créer la base de données [MySQL] nécessaire au serveur [NestJS], nous procédons de la façon suivante :

 
  • En [1], tous les services doivent être lancés ;
  • en [2], l’option [Database] vous permet de gérer la base de données ;

L’option [Database] lance un utilitaire appelé HeidiSQL :

  • En [1], vous pouvez sélectionner divers SGBD. La valeur par défaut proposée est le SGBD MySQL. Cela convient ;
  • en [2], vous ouvrez une session de HeidiSQL ;
  • En [1-2], exécutez un fichier SQL puis choisissez le fichier [dbrdvmedecins.sql] que vous trouverez dans le dossier [nestjs-etude-de-cas] :

Image

L’exécution du fichier [3] va créer la base [dbrdvmedecins] utilisée par le serveur [NestJS]. Pour le voir, faites F5 dans HeidiSQL pour rafraîchir l’affichage :

Image

La base de données [dbrdvmedecins] a été créée. On peut en voir le contenu :

Image

  • en [1-3], la table [clients] ;
    • [id] est la clé primaire de la table ;
    • [version] est le numéro de version de la ligne. Ce numéro augmente à chaque modification de la ligne ;
    • [titre, nom, prenom] identifient la personne ;

Image

  • en [1-3], la table [medecins] ;
    • [id] est la clé primaire de la table ;
    • [version] est le numéro de version de la ligne ;
    • [titre, nom, prenom] identifient la personne ;

Image

  • en [1-3], la table des créneaux horaires de consultation des médecins :
    • [id] : clé primaire ;
    • [version] : numéro de version de la ligne ;
    • [id-medecin] : clé étrangère ciblée sur la clé primaire du médecin ;
    • [hdebut, mdebut] : heure et minutes de début de la consultation. Ainsi [8,20] signifie 8h20.
    • [hfin, mfin] : heure et minutes de fin de la consultation.

Image

  • En [1-3], la table [rv] des rendez-vous pris ;
    • [id] : clé primaire ;
    • [version] : numéro de version ;
    • [jour] : jour du rendez-vous ;
    • [id_creneau] : clé étrangère vers la clé primaire du créneau horaire du rendez-vous. Comme un créneau horaire est lié à un médecin, on sait quel médecin assure ce rendez-vous ;
    • [id_client] : clé étrangère vers le numéro (clé primaire) du client qui consulte ;

Image

  • en [1-3], la table [users] qui liste les utilisateurs autorisés à utiliser l’application [NestJS] ;
    • [id, version] : clé primaire, numéro de version ;
    • [login, password] : identifiants de l’utilisateur ;
    • [nom] : nom donné à l’utilisateur ;
    • [role] : son rôle. [ADMIN] a tous les droits. [USER] n’a que des droits de lecture. Il pourra consulter l’agenda d’un médecin mais pas prendre / annuler un rendez-vous ;

2.3. Lancer le serveur [NestJS] pour la première fois

Dans le dossier [rdvmedecins-nestjs-server], tapez les commandes suivantes dans un terminal :

1
2
npm install
cp .env.example .env

Le fichier [.env] fixe des variables d’environnement :

 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
29
30
# -----------------------------------------------------------------------
# Fichier d'exemple de configuration.
# Copier ce fichier en [.env] puis adapter les valeurs à votre machine.
# Le fichier [.env] ne doit jamais être partagé ou commité (mots de passe).
# -----------------------------------------------------------------------

# port d'écoute du serveur NestJS (le serveur Spring original écoutait sur 8080)
PORT=8080

# paramètres de connexion à la base de données MySQL [dbrdvmedecins]
DB_HOST=localhost
DB_PORT=3306
DB_USERNAME=root
DB_PASSWORD=
DB_DATABASE=dbrdvmedecins

# en développement uniquement : TypeORM peut créer/mettre à jour automatiquement
# les tables à partir des entités. On le désactive ici car nous fournissons notre
# propre script SQL [database/dbrdvmedecins.sql], comme le faisait le projet Spring original.
DB_SYNCHRONIZE=false

# -----------------------------------------------------------------------
# authentification (cf. src/auth/)
# -----------------------------------------------------------------------
# clé secrète utilisée pour signer/vérifier les jetons JWT - à changer
# impérativement en production (une longue chaîne aléatoire, jamais commitée).
JWT_SECRET=change-moi-en-une-longue-chaine-aleatoire
# durée de validité d'un jeton JWT (cf. la documentation de la librairie [ms] :
# "60", "2h", "7d"...)
JWT_EXPIRES_IN=2h

Adaptez le fichier [.env] fraîchement créé à votre installation [MySQL] (utilisateur, mot de passe, port). Ce fichier contient aussi, depuis l’ajout de l’authentification (cf. chapitre 3), une clé JWT_SECRET : la valeur d’exemple convient pour suivre ce document, mais devra impérativement être remplacée par une chaîne aléatoire propre à vous avant tout usage réel.

Lancez tous les services de Laragon [Start All], si ce n’est déjà fait.

Démarrez ensuite le serveur :

1
npm run start:dev

La console affiche, dans l’ordre : le démarrage du module [NestJS], la liste des routes exposées par le contrôleur, puis la confirmation du démarrage :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
[Nest] RoutesResolver AuthController {/}:
[Nest] RouterExplorer Mapped {/login, POST} route
[Nest] RoutesResolver RdvMedecinsController {/}:
[Nest] RouterExplorer Mapped {/getAllMedecins, GET} route
[Nest] RouterExplorer Mapped {/getAllClients, GET} route
[Nest] RouterExplorer Mapped {/getAllCreneaux/:idMedecin, GET} route
[Nest] RouterExplorer Mapped {/getRvMedecinJour/:idMedecin/:jour, GET} route
[Nest] RouterExplorer Mapped {/getAgendaMedecinJour/:idMedecin/:jour, GET} route
[Nest] RouterExplorer Mapped {/getMedecinById/:id, GET} route
[Nest] RouterExplorer Mapped {/getClientById/:id, GET} route
[Nest] RouterExplorer Mapped {/getCreneauById/:id, GET} route
[Nest] RouterExplorer Mapped {/getRvById/:id, GET} route
[Nest] RouterExplorer Mapped {/ajouterRv, POST} route
[Nest] RouterExplorer Mapped {/supprimerRv, POST} route
[Nest] NestApplication Nest application successfully started
[RdvMedecins] serveur NestJS démarré sur http://localhost:8080

Ce relevé de console confirme que le serveur écoute bien sur le port 8080 - exactement le même port que le serveur Spring Boot du document original, choisi volontairement pour cette raison.

2.4. Tester le serveur avec un navigateur

Depuis l’ajout de l’authentification (chapitre 3), toutes les routes de [RdvMedecinsController] exigent un jeton JWT valide : un navigateur, seul, ne permet donc plus de les tester directement. Par exemple :

1
http://localhost:[8080/getAllMedecins]

renvoie désormais, sans jeton, une erreur 401 Unauthorized :

Image

C’est le comportement attendu : cette réponse confirme que le serveur protège bien ses routes. Postman (section suivante) est nécessaire pour obtenir un jeton, puis pour l’utiliser.

2.5. Tester le serveur [NestJS] avec Postman

L’outil Postman est disponible à l’URL [https://www.postman.com/downloads/]. Vous aurez peut-être à créer un compte.

Lancez tous les services de Laragon, puis ouvrez l’application de bureau Postman :

  • En [1-2], créez une requête HTTP pour interroger le serveur de gestion des rendez-vous des médecins ;

2.5.1. Se connecter et obtenir un jeton

  1. créer une nouvelle requête Postman, méthode POST, URL http://localhost:8080/login ;
  2. dans l’onglet [Body], choisir raw puis le format JSON, et saisir : {"login": "admin", "password": "admin"} (ou user/user pour tester le rôle USER) ;
  3. envoyer la requête.

Image

  • en [1-2], la requête POST au serveur [NestJS] qui oeuvre sur le port 8080 ;
  • en [3-5], le corps de la requête. Celle-ci transmet au serveur la chaîne JSON des identifiants de l’utilisateur qui veut se connecter, ici admin/admin ;
  • en [6], la réponse du serveur ;
  • en [7], le jeton d’authentification que les requêtes ultérieures doivent envoyer au serveur pour dire “je me suis déjà authentifié” ;

Copiez la valeur de accessToken : c’est ce jeton qu’il faut désormais présenter à chaque requête suivante. Ci-dessus le jeton à copier est “eyJ...zoM” (sans les “).

2.5.2. Appeler une route protégée avec le jeton

Pour GET /getAllMedecins (ou toute autre route de RdvMedecinsController), ajouter dans Postman, onglet Authorization, le type Bearer Token, et coller le jeton copié ci-dessus (Postman ajoute alors lui-même l’entête Authorization: Bearer <jeton>).

Image

  • en [1-2], la requête envoyée au serveur. Elle demande la liste des médecins en base de données ;
  • en [3-5], la requête doit envoyer le jeton d’authentification. En [4], choisissez [Bearer Token] et en [5] collez le jeton d’authentification que vous avez copié précédemment ;
  • en [7], la réponse du serveur ;

2.5.3. Tester les routes POST (/ajouterRv, /supprimerRv)

Même démarche que ci-dessus (méthode POST, corps JSON, jeton en Bearer Token), exactement comme le document original utilisait le complément Chrome « Advanced Rest [Client] » pour les mêmes routes.

Note : vous pouvez retrouver les requêtes Postman qui suivent dans la collection [rdvmedecins-nestJS.postman_collection.json] :

Image

Dans Postman, faire Ctrl-0 pour charger la collection :

Image

  • cliquez sur [1] pour charger la collection et sélectionnez le fichier de la collection. Une fois chargée la collection, celle-ci expose ses requêtes :

Image

Pour tester /ajouterRv avec le jeton d’un compte ADMIN :

  1. requête Postman, méthode POST, URL http://localhost:8080/ajouterRv ;
  2. onglet Authorization : Bearer Token, jeton de admin ;
  3. onglet [Body], raw, JSON : {"jour": "2026-09-13", "idClient": 1, "idCreneau": 5} ;
  4. envoyer la requête.

Image

Vous pouvez vérifier avec HeidiSQL qu’un rendez-vous a été ajouté en base :

Image

Pour tester /supprimerRv, la même démarche s’applique avec le corps {"idRv": 2} (l’identifiant du rendez-vous à annuler (8) ci-dessus).

Image

  • en [4], ci-dessus le numéro du rendez-vous à supprimer ;

Image

  • en [5-7], le jeton d’authentification ;
  • en [9], la réponse du serveur. [status=0] signifie que l’opération s’est bien déroulée. Vous pouvez le vérifier avec HeidiSQL :

Image

  • en [3], le rendez-vous n° 2 n’existe plus ;

À essayer : refaire cette même requête /ajouterRv avec le jeton du compte USER (user/user) plutôt que celui de admin : la réponse devient 403 Forbidden, avec le message le rôle [USER] ne permet pas cette action (rôle requis : ADMIN) - la démonstration concrète du contrôle d’accès par rôle mis en place au chapitre 3.

2.6. Lancer le client [Vue.js] pour la première fois

Dans le dossier rdvmedecins-vue-client (le serveur [NestJS] devant être démarré au préalable) :

1
2
npm install
npm start

Puis ouvrir http://localhost:4200 dans un navigateur : l’écran de connexion s’affiche en premier (cf. Chapitre 5).

Image

  • en [1], l’URL du serveur qui délivre l’application [Vue.js] ;
  • en [2], l’URL du serveur [NestJS] qui gère la base [rdvmedecins] ;

Il est important de comprendre qu’il y a ici deux serveurs web, l’un d’eux étant client de l’autre.

Deux boutons « FR »/« EN », en haut à droite, permettent de basculer l’interface en anglais, y compris avant toute connexion. Se connecter avec l’un des deux comptes de démonstration (admin/admin, accès complet, ou user/user, lecture seule) pour accéder au reste de l’application. Le chapitre 5 détaille l’utilisation complète de ce client, avec les captures d’écran de chaque étape.

https://stahe.github.io
Ce cours-tutoriel rédigé par l'IA Claude d'Anthropic et révisé par Serge Tahé est mis à la disposition du public selon les termes de la Licence Creative Commons Attribution – Pas d'utilisation commerciale – Partage dans les mêmes conditions 3.0 non modifiée.