1 00:00:01,350 --> 00:00:02,270 ‫Instructeur 2 00:00:02,270 --> 00:00:04,360 ‫: Utilisons maintenant une fonction 3 00:00:04,360 --> 00:00:06,880 ‫middleware tierce de npm appelée Morgan 4 00:00:06,880 --> 00:00:10,313 ‫afin de faciliter un peu notre vie de développement. 5 00:00:11,890 --> 00:00:14,450 ‫Donc, comme je l'ai mentionné, nous allons 6 00:00:14,450 --> 00:00:18,400 ‫utiliser un middleware appelé Morgan qui est un middleware de journalisation très populaire. 7 00:00:18,400 --> 00:00:21,960 ‫Donc, un middleware qui va nous permettre de voir les données des 8 00:00:21,960 --> 00:00:23,640 ‫requêtes directement dans la console. 9 00:00:23,640 --> 00:00:26,320 ‫D'accord, alors laissez-moi l'installer et vous verrez 10 00:00:26,320 --> 00:00:28,863 ‫ensuite comment cela fonctionne, d'accord ? 11 00:00:28,863 --> 00:00:33,340 ‫Donc, je ne veux pas maintenant terminer ce processus ici, donc je vais 12 00:00:33,340 --> 00:00:36,900 ‫créer un nouveau terminal ici dans VS Code et donc, 13 00:00:36,900 --> 00:00:40,300 ‫pour cela, j'ai appuyé sur ce bouton plus ici et 14 00:00:40,300 --> 00:00:42,750 ‫ainsi, maintenant nous obtenons un nouveau terminal 15 00:00:42,750 --> 00:00:44,390 ‫et je ne Je 16 00:00:44,390 --> 00:00:48,853 ‫ne veux pas mettre à jour, donc non, et maintenant, npm installe Morgan. 17 00:00:50,340 --> 00:00:52,500 ‫Bon, maintenant, comme je l'ai mentionné, 18 00:00:52,500 --> 00:00:54,330 ‫ce middleware de journalisation va 19 00:00:54,330 --> 00:00:57,340 ‫rendre notre vie de développement un peu plus facile. 20 00:00:57,340 --> 00:00:58,710 ‫Mais c'est toujours 21 00:00:58,710 --> 00:01:01,470 ‫du code que nous allons réellement inclure dans notre 22 00:01:01,470 --> 00:01:04,630 ‫application et donc, c'est pourquoi ce n'est pas une dépendance 23 00:01:04,630 --> 00:01:07,270 ‫de développement mais juste une simple dépendance régulière, 24 00:01:07,270 --> 00:01:10,800 ‫d'accord et donc, c'est pourquoi je n'ai pas spécifié save dev ici 25 00:01:10,800 --> 00:01:14,110 ‫car encore une fois, ce n'est pas un dépendance dev vraiment. 26 00:01:14,110 --> 00:01:18,640 ‫D'accord, nous l'avons donc dans notre paquet. json ici maintenant, morgan et 27 00:01:18,640 --> 00:01:21,763 ‫donc, allons-y et exigeons-le dans notre code. 28 00:01:23,190 --> 00:01:26,593 ‫Donc, encore une fois en haut, ici const morgan 29 00:01:29,500 --> 00:01:33,450 ‫est égal à exiger morgan et vous voyez à nouveau 30 00:01:33,450 --> 00:01:35,800 ‫ce genre de convention que l'exigence 31 00:01:35,800 --> 00:01:37,530 ‫va exposer si 32 00:01:37,530 --> 00:01:41,750 ‫vous utilisez le même nom que le nom du package lui-même. 33 00:01:41,750 --> 00:01:43,850 ‫Donc, nous avons nos middlewares ici, 34 00:01:43,850 --> 00:01:46,590 ‫alors ajoutons-le juste après cela ou écrivons en 35 00:01:46,590 --> 00:01:48,623 ‫fait comme le premier. 36 00:01:49,480 --> 00:01:52,150 ‫D'accord, et le code source grandit 37 00:01:52,150 --> 00:01:53,300 ‫un peu, 38 00:01:53,300 --> 00:01:55,670 ‫alors allons-y et ajoutons quelques commentaires 39 00:01:55,670 --> 00:01:57,603 ‫ici, donc d'abord les 40 00:02:01,170 --> 00:02:05,753 ‫middlewares, puis ici nous commençons à avoir nos gestionnaires de route. 41 00:02:11,510 --> 00:02:15,623 ‫Bon, alors disons que nous avons nos itinéraires. 42 00:02:20,050 --> 00:02:21,950 ‫Et puis enfin, ici, nous 43 00:02:21,950 --> 00:02:23,173 ‫démarrons le serveur. 44 00:02:28,405 --> 00:02:31,630 ‫D'accord, juste pour rendre notre code un peu plus lisible 45 00:02:31,630 --> 00:02:33,700 ‫et plus facile à scanner. 46 00:02:33,700 --> 00:02:35,980 ‫Donc, nous avons ce premier middleware mais 47 00:02:35,980 --> 00:02:38,453 ‫encore une fois, utilisons le nôtre avant cela. 48 00:02:39,520 --> 00:02:41,750 ‫Alors, bien sûr, l'application. utiliser et 49 00:02:41,750 --> 00:02:44,223 ‫maintenant ici, nous appelons morgan. 50 00:02:45,300 --> 00:02:47,040 ‫D'accord et dans cette fonction, nous 51 00:02:47,040 --> 00:02:48,460 ‫pouvons passer un argument qui 52 00:02:48,460 --> 00:02:49,684 ‫spécifiera en quelque 53 00:02:49,684 --> 00:02:52,310 ‫sorte à quoi nous voulons que la journalisation ressemble. 54 00:02:52,310 --> 00:02:54,920 ‫Nous pouvons donc utiliser des chaînes prédéfinies pour cela 55 00:02:54,920 --> 00:02:57,493 ‫et celle que je vais utiliser s'appelle dev. 56 00:02:58,550 --> 00:03:01,140 ‫Et en fait, vous pouvez voir ici les différentes 57 00:03:01,140 --> 00:03:03,180 ‫options, donc VS Code est vraiment intelligent 58 00:03:03,180 --> 00:03:04,613 ‫et peut me donner 59 00:03:04,613 --> 00:03:07,170 ‫les options que nous pouvons transmettre à cette fonction. 60 00:03:07,170 --> 00:03:08,500 ‫Bon, comme je l'ai 61 00:03:08,500 --> 00:03:11,080 ‫mentionné, je vais utiliser celui qui s'appelle dev. 62 00:03:11,080 --> 00:03:13,650 ‫D'accord et c'est en fait ça. 63 00:03:13,650 --> 00:03:15,180 ‫Donc, nous l'avons exigé 64 00:03:15,180 --> 00:03:16,960 ‫et puis ici nous l'avons utilisé. 65 00:03:16,960 --> 00:03:18,500 ‫Donc, des trucs très 66 00:03:18,500 --> 00:03:19,860 ‫simples mais je 67 00:03:19,860 --> 00:03:23,170 ‫pense qu'il est important d'essayer de comprendre comment cela fonctionne. 68 00:03:23,170 --> 00:03:25,260 ‫Donc, appeler cette fonction morgan renverra 69 00:03:25,260 --> 00:03:28,407 ‫une fonction similaire à celle-ci ici et ainsi, cela 70 00:03:28,407 --> 00:03:29,910 ‫a du sens car 71 00:03:29,910 --> 00:03:32,550 ‫même si c'est à cela qu'une fonction middleware 72 00:03:32,550 --> 00:03:36,010 ‫doit ressembler et donc, laissez-moi vous prouver cela en regardant 73 00:03:36,010 --> 00:03:37,720 ‫le code source pour 74 00:03:37,720 --> 00:03:38,810 ‫ce paquet 75 00:03:38,810 --> 00:03:41,170 ‫et c'est un autre très bel exercice 76 00:03:41,170 --> 00:03:43,513 ‫dont nous pouvons réellement apprendre un peu. 77 00:03:45,090 --> 00:03:50,090 ‫Alors, cherchons morgan sur GitHub, donc généralement tous ces packages sont 78 00:03:50,440 --> 00:03:53,430 ‫toujours sur GitHub et c'est là que 79 00:03:53,430 --> 00:03:55,620 ‫nous pouvons ensuite regarder leur 80 00:03:55,620 --> 00:03:57,463 ‫code open source. 81 00:03:58,410 --> 00:04:02,160 ‫Okay et Morgan est en fait un package très simple et donc, tout ce que nous 82 00:04:02,160 --> 00:04:05,930 ‫avons à faire est d'aller à cet index. js, c'est donc généralement le 83 00:04:05,930 --> 00:04:08,000 ‫point d'entrée et dans ce cas, 84 00:04:08,000 --> 00:04:11,233 ‫c'est en quelque sorte le seul fichier qui existe. 85 00:04:12,680 --> 00:04:16,020 ‫Bon, maintenant, je ne vais pas passer en revue tout 86 00:04:16,020 --> 00:04:18,510 ‫ce code, mais je tiens à souligner 87 00:04:18,510 --> 00:04:21,330 ‫que la principale exportation de ce fichier ici est 88 00:04:21,330 --> 00:04:23,780 ‫morgan, donc une fonction appelée morgan, alors 89 00:04:23,780 --> 00:04:24,880 ‫cherchons cela 90 00:04:26,070 --> 00:04:27,623 ‫et en fait la voici. 91 00:04:28,460 --> 00:04:31,960 ‫D'accord, et donc lorsque nous avons demandé le package dans notre 92 00:04:31,960 --> 00:04:35,520 ‫code, ce qui sera renvoyé est cette fonction morgan, n'est-ce pas ? 93 00:04:35,520 --> 00:04:38,190 ‫Encore une fois parce qu'ils utilisent module. export et c'est 94 00:04:38,190 --> 00:04:41,110 ‫l'exportation par défaut, tout comme nous l'avons 95 00:04:41,110 --> 00:04:44,650 ‫appris dans la conférence sur les modules exigeants il y 96 00:04:44,650 --> 00:04:47,650 ‫a une ou deux sections, n'est-ce pas ? 97 00:04:47,650 --> 00:04:49,720 ‫Donc, encore une fois, cette 98 00:04:49,720 --> 00:04:54,720 ‫fonction morgan ici sera cette fonction morgan ici dans ce code, d'accord ? 99 00:04:55,520 --> 00:04:57,490 ‫Alors, voyons ce que fait cette 100 00:04:57,490 --> 00:05:00,830 ‫fonction et je ne me soucie pas de cette implémentation 101 00:05:00,830 --> 00:05:02,150 ‫ici, ce 102 00:05:02,150 --> 00:05:06,000 ‫que je voulais vraiment vous montrer, c'est que cette fonction renvoie 103 00:05:06,000 --> 00:05:07,650 ‫en fait une autre 104 00:05:07,650 --> 00:05:09,850 ‫fonction qui est l'enregistreur et vous 105 00:05:09,850 --> 00:05:11,600 ‫voyez que cette fonction a 106 00:05:11,600 --> 00:05:14,630 ‫juste la nôtre les fonctions middleware ont cette signature 107 00:05:14,630 --> 00:05:17,020 ‫très typique de requête, réponse et suivant. 108 00:05:17,020 --> 00:05:18,200 ‫D'accord? 109 00:05:18,200 --> 00:05:22,120 ‫Ainsi, cette fonction est exactement comme nos propres fonctions middleware. 110 00:05:22,120 --> 00:05:24,060 ‫Et donc, vous voyez qu'à la 111 00:05:24,060 --> 00:05:26,620 ‫fin, quand c'est prêt, il appelle aussi ensuite, 112 00:05:26,620 --> 00:05:28,250 ‫donc comme nous le faisons. 113 00:05:28,250 --> 00:05:30,370 ‫Donc, c'est juste une fonction 114 00:05:30,370 --> 00:05:33,393 ‫middleware très régulière, tout comme celles que nous écrivons. 115 00:05:33,393 --> 00:05:35,078 ‫D'accord? 116 00:05:35,078 --> 00:05:37,067 ‫Alors, revenons ici et voyons maintenant 117 00:05:37,067 --> 00:05:40,430 ‫le résultat ici dans notre terminal, revenons donc à 118 00:05:40,430 --> 00:05:42,660 ‫ce premier, c'est ainsi que nous 119 00:05:42,660 --> 00:05:44,500 ‫passons entre les différents 120 00:05:44,500 --> 00:05:47,423 ‫terminaux que nous avons ouverts dans VS Code. 121 00:05:49,190 --> 00:05:51,190 ‫Donnez-nous un peu plus d'espace ici, 122 00:05:51,190 --> 00:05:52,460 ‫effacez-le car 123 00:05:52,460 --> 00:05:54,900 ‫vous ne pourrez peut-être pas aussi bien 124 00:05:54,900 --> 00:05:56,710 ‫voir le bas de l'écran. 125 00:05:56,710 --> 00:05:59,070 ‫Et donc oui, allons-y maintenant et 126 00:05:59,070 --> 00:06:00,893 ‫créons simplement une 127 00:06:04,200 --> 00:06:07,240 ‫demande, d'accord, revenons en arrière et c'est parti. 128 00:06:07,240 --> 00:06:09,730 ‫Donc, nous avons les informations sur la demande que 129 00:06:09,730 --> 00:06:11,170 ‫nous venons de faire. 130 00:06:11,170 --> 00:06:13,060 ‫Donc, on obtient la méthode 131 00:06:13,060 --> 00:06:16,250 ‫HTTP, on obtient l'URL, on obtient le code d'état, le 132 00:06:16,250 --> 00:06:18,637 ‫temps qu'il a fallu pour renvoyer la 133 00:06:18,637 --> 00:06:21,603 ‫réponse et aussi la taille de la réponse en octets. 134 00:06:22,440 --> 00:06:25,550 ‫Donc, rappelez-vous que nous aurions pu utiliser une autre 135 00:06:25,550 --> 00:06:28,183 ‫option ici, par exemple, minuscule en était une 136 00:06:28,183 --> 00:06:32,370 ‫autre, donc cela aurait alors probablement l'air un peu différent et cela semble 137 00:06:32,370 --> 00:06:34,680 ‫en fait un peu similaire ici. 138 00:06:34,680 --> 00:06:36,380 ‫Il ne fait tout simplement pas 139 00:06:36,380 --> 00:06:37,710 ‫cette coloration de ce 140 00:06:37,710 --> 00:06:40,923 ‫code d'état et il a également un ordre légèrement différent ici. 141 00:06:43,760 --> 00:06:46,893 ‫D'accord et si nous avons fait quelque chose, si nous 142 00:06:48,060 --> 00:06:50,880 ‫avons causé une erreur, par exemple, un 404, testons 143 00:06:50,880 --> 00:06:53,890 ‫cela en utilisant un ID invalide ici, afin que cela 144 00:06:56,380 --> 00:06:59,210 ‫obtiendra une autre couleur ici, n'est-ce pas, vous pouvez 145 00:06:59,210 --> 00:07:00,410 ‫le voir ? 146 00:07:01,246 --> 00:07:03,530 ‫Faisons cela à nouveau juste au cas où vous ne l'auriez pas vu. 147 00:07:03,530 --> 00:07:06,440 ‫Et donc, oui, cela nous donne une couleur différente. 148 00:07:06,440 --> 00:07:09,420 ‫Et donc, oui, cela peut être très utile pour le développement. 149 00:07:09,420 --> 00:07:11,100 ‫Vous pouvez même enregistrer ce journal 150 00:07:11,100 --> 00:07:13,960 ‫dans un fichier, mais c'est un peu trop pour ce 151 00:07:13,960 --> 00:07:15,060 ‫petit exemple, 152 00:07:15,060 --> 00:07:16,460 ‫donc c'est plus que suffisant 153 00:07:16,460 --> 00:07:17,800 ‫et vous verrez tout 154 00:07:17,800 --> 00:07:20,910 ‫au long du cours qu'il est plutôt utile de l'avoir ici. 155 00:07:20,910 --> 00:07:23,620 ‫D'accord, c'est ainsi que nous utilisons le middleware 156 00:07:23,620 --> 00:07:28,160 ‫tiers de npm et il y a beaucoup de middleware là-bas et 157 00:07:28,160 --> 00:07:30,010 ‫laissez-moi vous montrer cela. 158 00:07:31,970 --> 00:07:34,143 ‫Donc, sur le 159 00:07:37,850 --> 00:07:42,290 ‫site Express lui-même, donc expressjs. com et nous n'avons en fait 160 00:07:42,290 --> 00:07:44,170 ‫jamais visité ce site 161 00:07:44,170 --> 00:07:46,490 ‫Web, donc c'est en fait assez sympa, 162 00:07:46,490 --> 00:07:49,410 ‫donc vous avez ceci Mise en route avec quelques 163 00:07:49,410 --> 00:07:52,730 ‫articles expliquant les bases d'Express et ensuite vous avez une 164 00:07:52,730 --> 00:07:57,400 ‫belle référence API dans notre cas, 4. x et donc, ici vous avez toutes les méthodes 165 00:07:57,400 --> 00:07:58,713 ‫qui sont sur 166 00:07:59,970 --> 00:08:01,980 ‫la requête, donc les méthodes sur les 167 00:08:01,980 --> 00:08:03,980 ‫propriétés bien sûr, donc tout ce que 168 00:08:03,980 --> 00:08:07,294 ‫nous avons, par exemple, les requêtes. corps que nous avons déjà 169 00:08:07,294 --> 00:08:10,020 ‫utilisé ou ici sur la réponse, vous avez, 170 00:08:10,020 --> 00:08:12,920 ‫par exemple, réponse. json ou 171 00:08:12,920 --> 00:08:14,610 ‫réponse. envoyer et 172 00:08:14,610 --> 00:08:16,870 ‫il y a un tas d'autres 173 00:08:16,870 --> 00:08:19,587 ‫méthodes et nous en utiliserons beaucoup plus tard, 174 00:08:19,587 --> 00:08:22,840 ‫mais ici vous avez ces ressources et celle que je 175 00:08:22,840 --> 00:08:24,210 ‫veux vous montrer est 176 00:08:24,210 --> 00:08:27,280 ‫un middleware et donc, c'est un tas de middleware 177 00:08:27,280 --> 00:08:28,520 ‫que vous pouvez 178 00:08:28,520 --> 00:08:30,790 ‫utiliser et qui Express recommande, d'accord? 179 00:08:30,790 --> 00:08:33,890 ‫Et encore une fois, nous utiliserons certains d'entre eux un 180 00:08:33,890 --> 00:08:36,220 ‫peu plus tard et en fait Express 181 00:08:36,220 --> 00:08:39,510 ‫les recommande car beaucoup d'entre eux étaient intégrés dans Express 3, 182 00:08:39,510 --> 00:08:40,650 ‫donc dans 183 00:08:40,650 --> 00:08:43,550 ‫une version précédente, mais ont ensuite été retirés d'Express. 184 00:08:43,550 --> 00:08:46,170 ‫Par exemple, le corps. l'analyseur est l'un 185 00:08:46,170 --> 00:08:48,430 ‫d'entre eux mais en fait dans 186 00:08:48,430 --> 00:08:51,910 ‫la version quatre points, je crois 14 ou 16, 187 00:08:51,910 --> 00:08:56,260 ‫il a été rajouté et c'est pourquoi nous avons pu faire, voyons, 188 00:08:56,260 --> 00:08:57,380 ‫où est-il? 189 00:08:57,380 --> 00:09:00,830 ‫Oui, c'est pourquoi nous avons pu utiliser l'expression. json afin 190 00:09:00,830 --> 00:09:03,380 ‫d'analyser les données du corps. 191 00:09:03,380 --> 00:09:07,360 ‫Avant cela, nous devions en fait utiliser le corps. parser de npm et 192 00:09:07,360 --> 00:09:11,620 ‫utilisez celui-ci pour analyser les données du corps, mais encore une 193 00:09:11,620 --> 00:09:14,040 ‫fois, ils viennent de les rajouter récemment 194 00:09:14,040 --> 00:09:18,210 ‫pour réduire un peu la confusion pour les débutants comme vous. 195 00:09:18,210 --> 00:09:20,130 ‫D'accord, alors jouez un peu 196 00:09:20,130 --> 00:09:21,950 ‫avec cette référence. 197 00:09:21,950 --> 00:09:23,120 ‫Jetez un œil à 198 00:09:23,120 --> 00:09:26,032 ‫certaines des choses que nous avons peut-être déjà faites si vous 199 00:09:26,032 --> 00:09:28,660 ‫en avez envie ou si non, vous pouvez toujours passer 200 00:09:28,660 --> 00:09:29,963 ‫directement à la vidéo suivante.