1 00:00:01,350 --> 00:00:02,270 ‫Instructor: 2 00:00:02,270 --> 00:00:04,360 ‫Usemos ahora una función de 3 00:00:04,360 --> 00:00:06,880 ‫middleware de terceros de npm llamada 4 00:00:06,880 --> 00:00:10,313 ‫Morgan para facilitar un poco nuestra vida de desarrollo. 5 00:00:11,890 --> 00:00:14,450 ‫Entonces, como mencioné, usaremos un middleware 6 00:00:14,450 --> 00:00:18,400 ‫llamado Morgan, que es un middleware de registro muy popular. 7 00:00:18,400 --> 00:00:21,960 ‫Entonces, un middleware que nos permitirá ver los datos de la 8 00:00:21,960 --> 00:00:23,640 ‫solicitud directamente en la consola. 9 00:00:23,640 --> 00:00:26,320 ‫Bien, déjame instalarlo y luego verás 10 00:00:26,320 --> 00:00:28,863 ‫cómo funciona, ¿de acuerdo? 11 00:00:28,863 --> 00:00:33,340 ‫Entonces, no quiero terminar este proceso aquí, así que voy a 12 00:00:33,340 --> 00:00:36,900 ‫crear una nueva terminal aquí en VS Code 13 00:00:36,900 --> 00:00:40,300 ‫y, para eso, presiono este botón más aquí 14 00:00:40,300 --> 00:00:42,750 ‫y ahora obtenemos una nueva 15 00:00:42,750 --> 00:00:44,390 ‫terminal y no 16 00:00:44,390 --> 00:00:48,853 ‫No quiero actualizar, así que no, y ahora npm install morgan. 17 00:00:50,340 --> 00:00:52,500 ‫Bien, como mencioné, este middleware de 18 00:00:52,500 --> 00:00:54,330 ‫registro hará que nuestra 19 00:00:54,330 --> 00:00:57,340 ‫vida de desarrollo sea un poco más fácil. 20 00:00:57,340 --> 00:00:58,710 ‫Pero todavía es 21 00:00:58,710 --> 00:01:01,470 ‫un código que realmente incluiremos en nuestra 22 00:01:01,470 --> 00:01:04,630 ‫aplicación y, por eso, no es una dependencia 23 00:01:04,630 --> 00:01:07,270 ‫de desarrollo, sino una simple dependencia regular, 24 00:01:07,270 --> 00:01:10,800 ‫está bien, es por eso que no especifiqué save dev 25 00:01:10,800 --> 00:01:14,110 ‫aquí porque, nuevamente, no es un dependencia dev realmente. 26 00:01:14,110 --> 00:01:18,640 ‫Bien, lo tenemos en nuestro paquete. json aquí ahora, morgan y 27 00:01:18,640 --> 00:01:21,763 ‫así, sigamos adelante y lo solicitemos en nuestro código. 28 00:01:23,190 --> 00:01:26,593 ‫Entonces, de nuevo en la parte superior 29 00:01:29,500 --> 00:01:33,450 ‫aquí const morgan equals require morgan y verá nuevamente 30 00:01:33,450 --> 00:01:35,800 ‫este tipo de convención que 31 00:01:35,800 --> 00:01:37,530 ‫el require expondrá 32 00:01:37,530 --> 00:01:41,750 ‫si usa el mismo nombre que el nombre del paquete. 33 00:01:41,750 --> 00:01:43,850 ‫Entonces, tenemos nuestros middlewares aquí, así 34 00:01:43,850 --> 00:01:46,590 ‫que agregémoslo justo después de esto o 35 00:01:46,590 --> 00:01:48,623 ‫escribamos como el primero. 36 00:01:49,480 --> 00:01:52,150 ‫De acuerdo, y el código fuente está 37 00:01:52,150 --> 00:01:53,300 ‫creciendo un 38 00:01:53,300 --> 00:01:55,670 ‫poco, así que sigamos adelante y 39 00:01:55,670 --> 00:01:57,603 ‫agreguemos algunos comentarios aquí, 40 00:02:01,170 --> 00:02:05,753 ‫primero middlewares, luego aquí abajo comenzamos a tener nuestros controladores de ruta. 41 00:02:11,510 --> 00:02:15,623 ‫Bien, entonces digamos que tenemos nuestras rutas. 42 00:02:20,050 --> 00:02:21,950 ‫Y finalmente aquí abajo iniciamos 43 00:02:21,950 --> 00:02:23,173 ‫el servidor. 44 00:02:28,405 --> 00:02:31,630 ‫Bien, solo para hacer nuestro código un poco más legible 45 00:02:31,630 --> 00:02:33,700 ‫y más fácil de escanear. 46 00:02:33,700 --> 00:02:35,980 ‫Entonces, tenemos este primer middleware, pero 47 00:02:35,980 --> 00:02:38,453 ‫nuevamente usemos el nuestro antes de eso. 48 00:02:39,520 --> 00:02:41,750 ‫Entonces, por supuesto, la aplicación. uso 49 00:02:41,750 --> 00:02:44,223 ‫y ahora aquí llamamos Morgan. 50 00:02:45,300 --> 00:02:47,040 ‫De acuerdo, en esta función, 51 00:02:47,040 --> 00:02:48,460 ‫podemos pasar un argumento 52 00:02:48,460 --> 00:02:49,684 ‫que especifique 53 00:02:49,684 --> 00:02:52,310 ‫cómo queremos que se vea el registro. 54 00:02:52,310 --> 00:02:54,920 ‫Entonces, podemos usar algunas cadenas predefinidas para eso y 55 00:02:54,920 --> 00:02:57,493 ‫la que voy a usar se llama dev. 56 00:02:58,550 --> 00:03:01,140 ‫Y de hecho, puedes ver aquí las diferentes opciones, 57 00:03:01,140 --> 00:03:03,180 ‫por lo que VS Code es realmente 58 00:03:03,180 --> 00:03:04,613 ‫inteligente y me puede 59 00:03:04,613 --> 00:03:07,170 ‫dar las opciones que podemos pasar a esta función. 60 00:03:07,170 --> 00:03:08,500 ‫Bien, como mencioné, 61 00:03:08,500 --> 00:03:11,080 ‫usaré el que se llama dev. 62 00:03:11,080 --> 00:03:13,650 ‫Está bien y eso es todo. 63 00:03:13,650 --> 00:03:15,180 ‫Entonces, lo requerimos 64 00:03:15,180 --> 00:03:16,960 ‫y luego aquí lo usamos. 65 00:03:16,960 --> 00:03:18,500 ‫Entonces, cosas muy simples, 66 00:03:18,500 --> 00:03:19,860 ‫pero creo que 67 00:03:19,860 --> 00:03:23,170 ‫es importante tratar de comprender cómo funciona esto. 68 00:03:23,170 --> 00:03:25,260 ‫Entonces, llamar a esta función 69 00:03:25,260 --> 00:03:28,407 ‫morgan devolverá una función similar a esta aquí y 70 00:03:28,407 --> 00:03:29,910 ‫entonces, eso tiene sentido 71 00:03:29,910 --> 00:03:32,550 ‫porque si bien así es como debe 72 00:03:32,550 --> 00:03:36,010 ‫verse una función de middleware, permítanme demostrarles eso mirando 73 00:03:36,010 --> 00:03:37,720 ‫el código fuente de 74 00:03:37,720 --> 00:03:38,810 ‫este paquete 75 00:03:38,810 --> 00:03:41,170 ‫y ese es otro ejercicio muy 76 00:03:41,170 --> 00:03:43,513 ‫agradable del que podemos aprender bastante. 77 00:03:45,090 --> 00:03:50,090 ‫Entonces, busquemos morgan en GitHub, por lo que generalmente todos estos 78 00:03:50,440 --> 00:03:53,430 ‫paquetes están siempre en GitHub y ahí 79 00:03:53,430 --> 00:03:55,620 ‫es donde podemos ver su 80 00:03:55,620 --> 00:03:57,463 ‫código fuente abierto. 81 00:03:58,410 --> 00:04:02,160 ‫De acuerdo, Morgan es en realidad un paquete muy simple y, por lo tanto, todo lo que 82 00:04:02,160 --> 00:04:05,930 ‫tenemos que hacer es ir a este índice. js, por lo que generalmente 83 00:04:05,930 --> 00:04:08,000 ‫ese es el punto de entrada 84 00:04:08,000 --> 00:04:11,233 ‫y, en este caso, es el único archivo que existe. 85 00:04:12,680 --> 00:04:16,020 ‫Bien, ahora, no voy a repasar todo este código, 86 00:04:16,020 --> 00:04:18,510 ‫pero quiero resaltar que la exportación principal 87 00:04:18,510 --> 00:04:21,330 ‫de este archivo aquí es morgan, así que 88 00:04:21,330 --> 00:04:23,780 ‫una función llamada morgan, así que busquemos 89 00:04:23,780 --> 00:04:24,880 ‫eso y 90 00:04:26,070 --> 00:04:27,623 ‫en realidad aquí está. 91 00:04:28,460 --> 00:04:31,960 ‫Bien, y cuando solicitamos el paquete en nuestro código, 92 00:04:31,960 --> 00:04:35,520 ‫lo que se devolverá es esta función de Morgan, ¿verdad? 93 00:04:35,520 --> 00:04:38,190 ‫Nuevamente porque usan module. exportar y 94 00:04:38,190 --> 00:04:41,110 ‫esa es la exportación predeterminada tal 95 00:04:41,110 --> 00:04:44,650 ‫como aprendimos en la lección de módulos requeridos 96 00:04:44,650 --> 00:04:47,650 ‫hace una sección o dos secciones, ¿verdad? 97 00:04:47,650 --> 00:04:49,720 ‫Entonces, nuevamente, esta función 98 00:04:49,720 --> 00:04:54,720 ‫morgan aquí será esta función morgan aquí en este código, ¿de acuerdo? 99 00:04:55,520 --> 00:04:57,490 ‫Entonces, veamos qué hace esta 100 00:04:57,490 --> 00:05:00,830 ‫función y no me importa nada de esta implementación 101 00:05:00,830 --> 00:05:02,150 ‫aquí, lo 102 00:05:02,150 --> 00:05:06,000 ‫que realmente quería mostrarles es que esta función en realidad devuelve 103 00:05:06,000 --> 00:05:07,650 ‫otra función que es 104 00:05:07,650 --> 00:05:09,850 ‫el registrador y ven que esta 105 00:05:09,850 --> 00:05:11,600 ‫función solo tiene la nuestra. 106 00:05:11,600 --> 00:05:14,630 ‫Las funciones de middleware tienen esta firma muy 107 00:05:14,630 --> 00:05:17,020 ‫típica de solicitud, respuesta y siguiente. 108 00:05:17,020 --> 00:05:18,200 ‫¿Okey? 109 00:05:18,200 --> 00:05:22,120 ‫Entonces, esta función es como nuestras propias funciones de middleware. 110 00:05:22,120 --> 00:05:24,060 ‫Y entonces, ves que al final, 111 00:05:24,060 --> 00:05:26,620 ‫cuando está listo, también llama a continuación, al 112 00:05:26,620 --> 00:05:28,250 ‫igual que lo hacemos nosotros. 113 00:05:28,250 --> 00:05:30,370 ‫Entonces, es solo una función 114 00:05:30,370 --> 00:05:33,393 ‫de middleware muy regular como las que escribimos. 115 00:05:33,393 --> 00:05:35,078 ‫¿Okey? 116 00:05:35,078 --> 00:05:37,067 ‫Entonces, regresemos aquí y ahora 117 00:05:37,067 --> 00:05:40,430 ‫veamos el resultado aquí en nuestra terminal, así que 118 00:05:40,430 --> 00:05:42,660 ‫regresemos a la primera, así es 119 00:05:42,660 --> 00:05:44,500 ‫como cambiamos entre las 120 00:05:44,500 --> 00:05:47,423 ‫diferentes terminales que tenemos abiertas en VS Code. 121 00:05:49,190 --> 00:05:51,190 ‫Danos un poco más de espacio aquí, 122 00:05:51,190 --> 00:05:52,460 ‫en realidad borra esto 123 00:05:52,460 --> 00:05:54,900 ‫porque es posible que no puedas ver tan bien 124 00:05:54,900 --> 00:05:56,710 ‫la parte inferior de la pantalla. 125 00:05:56,710 --> 00:05:59,070 ‫Y sí, sigamos adelante y 126 00:05:59,070 --> 00:06:00,893 ‫simplemente creemos alguna 127 00:06:04,200 --> 00:06:07,240 ‫solicitud, está bien, regresemos y aquí vamos. 128 00:06:07,240 --> 00:06:09,730 ‫Entonces, tenemos la información sobre la solicitud 129 00:06:09,730 --> 00:06:11,170 ‫que acabamos de hacer. 130 00:06:11,170 --> 00:06:13,060 ‫Entonces, obtenemos el método 131 00:06:13,060 --> 00:06:16,250 ‫HTTP, obtenemos la URL, obtenemos el código de estado, 132 00:06:16,250 --> 00:06:18,637 ‫el tiempo que tomó enviar la respuesta 133 00:06:18,637 --> 00:06:21,603 ‫y también el tamaño de la respuesta en bytes. 134 00:06:22,440 --> 00:06:25,550 ‫Entonces, recuerde que podríamos haber usado otra opción 135 00:06:25,550 --> 00:06:28,183 ‫aquí, por ejemplo, diminuto era otra, por 136 00:06:28,183 --> 00:06:32,370 ‫lo que probablemente se vería un poco diferente y en realidad 137 00:06:32,370 --> 00:06:34,680 ‫se vería algo similar aquí. 138 00:06:34,680 --> 00:06:36,380 ‫Simplemente no hace esta coloración 139 00:06:36,380 --> 00:06:37,710 ‫de este código 140 00:06:37,710 --> 00:06:40,923 ‫de estado y también tiene un orden ligeramente diferente aquí. 141 00:06:43,760 --> 00:06:46,893 ‫De acuerdo, y si hicimos algo, si causamos 142 00:06:48,060 --> 00:06:50,880 ‫un error, por ejemplo, un 404, probémoslo 143 00:06:50,880 --> 00:06:53,890 ‫usando una ID no válida aquí, para que 144 00:06:56,380 --> 00:06:59,210 ‫luego obtenga otro color aquí, ¿verdad, puedes 145 00:06:59,210 --> 00:07:00,410 ‫ver eso? 146 00:07:01,246 --> 00:07:03,530 ‫Hagámoslo de nuevo en caso de que no lo hayas visto. 147 00:07:03,530 --> 00:07:06,440 ‫Y entonces, sí, nos da un color diferente. 148 00:07:06,440 --> 00:07:09,420 ‫Y entonces, sí, eso puede ser bastante útil para el desarrollo. 149 00:07:09,420 --> 00:07:11,100 ‫De hecho, podría incluso guardar este 150 00:07:11,100 --> 00:07:13,960 ‫registro en un archivo, pero eso es demasiado para 151 00:07:13,960 --> 00:07:15,060 ‫este pequeño 152 00:07:15,060 --> 00:07:16,460 ‫ejemplo, por lo que es 153 00:07:16,460 --> 00:07:17,800 ‫más que suficiente y 154 00:07:17,800 --> 00:07:20,910 ‫verá a lo largo del curso que es útil tenerlo aquí. 155 00:07:20,910 --> 00:07:23,620 ‫De acuerdo, así es como usamos 156 00:07:23,620 --> 00:07:28,160 ‫middleware de terceros de npm y hay mucho middleware allí 157 00:07:28,160 --> 00:07:30,010 ‫y déjame mostrarte eso. 158 00:07:31,970 --> 00:07:34,143 ‫Entonces, en el 159 00:07:37,850 --> 00:07:42,290 ‫sitio Express en sí, expressjs. com y en realidad nunca visitamos este 160 00:07:42,290 --> 00:07:44,170 ‫sitio web, por lo que 161 00:07:44,170 --> 00:07:46,490 ‫en realidad es bastante bueno, por lo 162 00:07:46,490 --> 00:07:49,410 ‫que tiene este Primeros pasos con un par de artículos 163 00:07:49,410 --> 00:07:52,730 ‫que explican los conceptos básicos de Express y luego tiene una 164 00:07:52,730 --> 00:07:57,400 ‫buena referencia de API en nuestro caso, 4. xy así, aquí tienes todos los métodos que 165 00:07:57,400 --> 00:07:58,713 ‫están en la 166 00:07:59,970 --> 00:08:01,980 ‫solicitud, así que los métodos en las 167 00:08:01,980 --> 00:08:03,980 ‫propiedades, por supuesto, todas estas cosas que 168 00:08:03,980 --> 00:08:07,294 ‫tenemos, por ejemplo, las solicitudes. cuerpo que ya usamos 169 00:08:07,294 --> 00:08:10,020 ‫o aquí en la respuesta, tiene, por 170 00:08:10,020 --> 00:08:12,920 ‫ejemplo, respuesta. json o 171 00:08:12,920 --> 00:08:14,610 ‫respuesta. send 172 00:08:14,610 --> 00:08:16,870 ‫y hay un montón de otros 173 00:08:16,870 --> 00:08:19,587 ‫métodos y usaremos muchos de ellos más 174 00:08:19,587 --> 00:08:22,840 ‫adelante, pero aquí tienes estos recursos y el que 175 00:08:22,840 --> 00:08:24,210 ‫quiero mostrarte es middleware, 176 00:08:24,210 --> 00:08:27,280 ‫por lo que este es un montón de 177 00:08:27,280 --> 00:08:28,520 ‫middleware que puedes 178 00:08:28,520 --> 00:08:30,790 ‫usar y Express recomienda, ¿de acuerdo? 179 00:08:30,790 --> 00:08:33,890 ‫Y nuevamente, usaremos algunos de ellos un poco más tarde 180 00:08:33,890 --> 00:08:36,220 ‫y, de hecho, Express los recomienda porque 181 00:08:36,220 --> 00:08:39,510 ‫muchos de ellos solían estar integrados en Express 3, por lo 182 00:08:39,510 --> 00:08:40,650 ‫que en 183 00:08:40,650 --> 00:08:43,550 ‫una versión anterior, pero luego se eliminaron de Express. 184 00:08:43,550 --> 00:08:46,170 ‫Por ejemplo, cuerpo. parser es uno 185 00:08:46,170 --> 00:08:48,430 ‫de ellos, pero en realidad 186 00:08:48,430 --> 00:08:51,910 ‫en la versión cuatro, creo que 14 o 187 00:08:51,910 --> 00:08:56,260 ‫16, se agregó nuevamente y por eso pudimos hacer, veamos, 188 00:08:56,260 --> 00:08:57,380 ‫¿dónde está? 189 00:08:57,380 --> 00:09:00,830 ‫Sí, por eso pudimos usar la expresión. json para 190 00:09:00,830 --> 00:09:03,380 ‫analizar los datos del cuerpo. 191 00:09:03,380 --> 00:09:07,360 ‫Antes de eso, en realidad tendríamos que usar el cuerpo. analizador de npm y 192 00:09:07,360 --> 00:09:11,620 ‫use ese para analizar los datos del cuerpo, pero 193 00:09:11,620 --> 00:09:14,040 ‫nuevamente, lo agregaron recientemente para 194 00:09:14,040 --> 00:09:18,210 ‫reducir un poco la confusión para principiantes como usted. 195 00:09:18,210 --> 00:09:20,130 ‫Bien, entonces juega un poco 196 00:09:20,130 --> 00:09:21,950 ‫con esta referencia. 197 00:09:21,950 --> 00:09:23,120 ‫Echa un vistazo 198 00:09:23,120 --> 00:09:26,032 ‫a algunas de las cosas que tal vez ya hicimos 199 00:09:26,032 --> 00:09:28,660 ‫si te apetece o si no, siempre puedes pasar 200 00:09:28,660 --> 00:09:29,963 ‫directamente al siguiente video.