‫Instructeur
‫: Utilisons maintenant une fonction
‫middleware tierce de npm appelée Morgan
‫afin de faciliter un peu notre vie de développement.
‫Donc, comme je l'ai mentionné, nous allons
‫utiliser un middleware appelé Morgan qui est un middleware de journalisation très populaire.
‫Donc, un middleware qui va nous permettre de voir les données des
‫requêtes directement dans la console.
‫D'accord, alors laissez-moi l'installer et vous verrez
‫ensuite comment cela fonctionne, d'accord ?
‫Donc, je ne veux pas maintenant terminer ce processus ici, donc je vais
‫créer un nouveau terminal ici dans VS Code et donc,
‫pour cela, j'ai appuyé sur ce bouton plus ici et
‫ainsi, maintenant nous obtenons un nouveau terminal
‫et je ne Je
‫ne veux pas mettre à jour, donc non, et maintenant, npm installe Morgan.
‫Bon, maintenant, comme je l'ai mentionné,
‫ce middleware de journalisation va
‫rendre notre vie de développement un peu plus facile.
‫Mais c'est toujours
‫du code que nous allons réellement inclure dans notre
‫application et donc, c'est pourquoi ce n'est pas une dépendance
‫de développement mais juste une simple dépendance régulière,
‫d'accord et donc, c'est pourquoi je n'ai pas spécifié save dev ici
‫car encore une fois, ce n'est pas un dépendance dev vraiment.
‫D'accord, nous l'avons donc dans notre paquet. json ici maintenant, morgan et
‫donc, allons-y et exigeons-le dans notre code.
‫Donc, encore une fois en haut, ici const morgan
‫est égal à exiger morgan et vous voyez à nouveau
‫ce genre de convention que l'exigence
‫va exposer si
‫vous utilisez le même nom que le nom du package lui-même.
‫Donc, nous avons nos middlewares ici,
‫alors ajoutons-le juste après cela ou écrivons en
‫fait comme le premier.
‫D'accord, et le code source grandit
‫un peu,
‫alors allons-y et ajoutons quelques commentaires
‫ici, donc d'abord les
‫middlewares, puis ici nous commençons à avoir nos gestionnaires de route.
‫Bon, alors disons que nous avons nos itinéraires.
‫Et puis enfin, ici, nous
‫démarrons le serveur.
‫D'accord, juste pour rendre notre code un peu plus lisible
‫et plus facile à scanner.
‫Donc, nous avons ce premier middleware mais
‫encore une fois, utilisons le nôtre avant cela.
‫Alors, bien sûr, l'application. utiliser et
‫maintenant ici, nous appelons morgan.
‫D'accord et dans cette fonction, nous
‫pouvons passer un argument qui
‫spécifiera en quelque
‫sorte à quoi nous voulons que la journalisation ressemble.
‫Nous pouvons donc utiliser des chaînes prédéfinies pour cela
‫et celle que je vais utiliser s'appelle dev.
‫Et en fait, vous pouvez voir ici les différentes
‫options, donc VS Code est vraiment intelligent
‫et peut me donner
‫les options que nous pouvons transmettre à cette fonction.
‫Bon, comme je l'ai
‫mentionné, je vais utiliser celui qui s'appelle dev.
‫D'accord et c'est en fait ça.
‫Donc, nous l'avons exigé
‫et puis ici nous l'avons utilisé.
‫Donc, des trucs très
‫simples mais je
‫pense qu'il est important d'essayer de comprendre comment cela fonctionne.
‫Donc, appeler cette fonction morgan renverra
‫une fonction similaire à celle-ci ici et ainsi, cela
‫a du sens car
‫même si c'est à cela qu'une fonction middleware
‫doit ressembler et donc, laissez-moi vous prouver cela en regardant
‫le code source pour
‫ce paquet
‫et c'est un autre très bel exercice
‫dont nous pouvons réellement apprendre un peu.
‫Alors, cherchons morgan sur GitHub, donc généralement tous ces packages sont
‫toujours sur GitHub et c'est là que
‫nous pouvons ensuite regarder leur
‫code open source.
‫Okay et Morgan est en fait un package très simple et donc, tout ce que nous
‫avons à faire est d'aller à cet index. js, c'est donc généralement le
‫point d'entrée et dans ce cas,
‫c'est en quelque sorte le seul fichier qui existe.
‫Bon, maintenant, je ne vais pas passer en revue tout
‫ce code, mais je tiens à souligner
‫que la principale exportation de ce fichier ici est
‫morgan, donc une fonction appelée morgan, alors
‫cherchons cela
‫et en fait la voici.
‫D'accord, et donc lorsque nous avons demandé le package dans notre
‫code, ce qui sera renvoyé est cette fonction morgan, n'est-ce pas ?
‫Encore une fois parce qu'ils utilisent module. export et c'est
‫l'exportation par défaut, tout comme nous l'avons
‫appris dans la conférence sur les modules exigeants il y
‫a une ou deux sections, n'est-ce pas ?
‫Donc, encore une fois, cette
‫fonction morgan ici sera cette fonction morgan ici dans ce code, d'accord ?
‫Alors, voyons ce que fait cette
‫fonction et je ne me soucie pas de cette implémentation
‫ici, ce
‫que je voulais vraiment vous montrer, c'est que cette fonction renvoie
‫en fait une autre
‫fonction qui est l'enregistreur et vous
‫voyez que cette fonction a
‫juste la nôtre les fonctions middleware ont cette signature
‫très typique de requête, réponse et suivant.
‫D'accord?
‫Ainsi, cette fonction est exactement comme nos propres fonctions middleware.
‫Et donc, vous voyez qu'à la
‫fin, quand c'est prêt, il appelle aussi ensuite,
‫donc comme nous le faisons.
‫Donc, c'est juste une fonction
‫middleware très régulière, tout comme celles que nous écrivons.
‫D'accord?
‫Alors, revenons ici et voyons maintenant
‫le résultat ici dans notre terminal, revenons donc à
‫ce premier, c'est ainsi que nous
‫passons entre les différents
‫terminaux que nous avons ouverts dans VS Code.
‫Donnez-nous un peu plus d'espace ici,
‫effacez-le car
‫vous ne pourrez peut-être pas aussi bien
‫voir le bas de l'écran.
‫Et donc oui, allons-y maintenant et
‫créons simplement une
‫demande, d'accord, revenons en arrière et c'est parti.
‫Donc, nous avons les informations sur la demande que
‫nous venons de faire.
‫Donc, on obtient la méthode
‫HTTP, on obtient l'URL, on obtient le code d'état, le
‫temps qu'il a fallu pour renvoyer la
‫réponse et aussi la taille de la réponse en octets.
‫Donc, rappelez-vous que nous aurions pu utiliser une autre
‫option ici, par exemple, minuscule en était une
‫autre, donc cela aurait alors probablement l'air un peu différent et cela semble
‫en fait un peu similaire ici.
‫Il ne fait tout simplement pas
‫cette coloration de ce
‫code d'état et il a également un ordre légèrement différent ici.
‫D'accord et si nous avons fait quelque chose, si nous
‫avons causé une erreur, par exemple, un 404, testons
‫cela en utilisant un ID invalide ici, afin que cela
‫obtiendra une autre couleur ici, n'est-ce pas, vous pouvez
‫le voir ?
‫Faisons cela à nouveau juste au cas où vous ne l'auriez pas vu.
‫Et donc, oui, cela nous donne une couleur différente.
‫Et donc, oui, cela peut être très utile pour le développement.
‫Vous pouvez même enregistrer ce journal
‫dans un fichier, mais c'est un peu trop pour ce
‫petit exemple,
‫donc c'est plus que suffisant
‫et vous verrez tout
‫au long du cours qu'il est plutôt utile de l'avoir ici.
‫D'accord, c'est ainsi que nous utilisons le middleware
‫tiers de npm et il y a beaucoup de middleware là-bas et
‫laissez-moi vous montrer cela.
‫Donc, sur le
‫site Express lui-même, donc expressjs. com et nous n'avons en fait
‫jamais visité ce site
‫Web, donc c'est en fait assez sympa,
‫donc vous avez ceci Mise en route avec quelques
‫articles expliquant les bases d'Express et ensuite vous avez une
‫belle référence API dans notre cas, 4. x et donc, ici vous avez toutes les méthodes
‫qui sont sur
‫la requête, donc les méthodes sur les
‫propriétés bien sûr, donc tout ce que
‫nous avons, par exemple, les requêtes. corps que nous avons déjà
‫utilisé ou ici sur la réponse, vous avez,
‫par exemple, réponse. json ou
‫réponse. envoyer et
‫il y a un tas d'autres
‫méthodes et nous en utiliserons beaucoup plus tard,
‫mais ici vous avez ces ressources et celle que je
‫veux vous montrer est
‫un middleware et donc, c'est un tas de middleware
‫que vous pouvez
‫utiliser et qui Express recommande, d'accord?
‫Et encore une fois, nous utiliserons certains d'entre eux un
‫peu plus tard et en fait Express
‫les recommande car beaucoup d'entre eux étaient intégrés dans Express 3,
‫donc dans
‫une version précédente, mais ont ensuite été retirés d'Express.
‫Par exemple, le corps. l'analyseur est l'un
‫d'entre eux mais en fait dans
‫la version quatre points, je crois 14 ou 16,
‫il a été rajouté et c'est pourquoi nous avons pu faire, voyons,
‫où est-il?
‫Oui, c'est pourquoi nous avons pu utiliser l'expression. json afin
‫d'analyser les données du corps.
‫Avant cela, nous devions en fait utiliser le corps. parser de npm et
‫utilisez celui-ci pour analyser les données du corps, mais encore une
‫fois, ils viennent de les rajouter récemment
‫pour réduire un peu la confusion pour les débutants comme vous.
‫D'accord, alors jouez un peu
‫avec cette référence.
‫Jetez un œil à
‫certaines des choses que nous avons peut-être déjà faites si vous
‫en avez envie ou si non, vous pouvez toujours passer
‫directement à la vidéo suivante.