‫Instructor:
‫Usemos ahora una función de
‫middleware de terceros de npm llamada
‫Morgan para facilitar un poco nuestra vida de desarrollo.
‫Entonces, como mencioné, usaremos un middleware
‫llamado Morgan, que es un middleware de registro muy popular.
‫Entonces, un middleware que nos permitirá ver los datos de la
‫solicitud directamente en la consola.
‫Bien, déjame instalarlo y luego verás
‫cómo funciona, ¿de acuerdo?
‫Entonces, no quiero terminar este proceso aquí, así que voy a
‫crear una nueva terminal aquí en VS Code
‫y, para eso, presiono este botón más aquí
‫y ahora obtenemos una nueva
‫terminal y no
‫No quiero actualizar, así que no, y ahora npm install morgan.
‫Bien, como mencioné, este middleware de
‫registro hará que nuestra
‫vida de desarrollo sea un poco más fácil.
‫Pero todavía es
‫un código que realmente incluiremos en nuestra
‫aplicación y, por eso, no es una dependencia
‫de desarrollo, sino una simple dependencia regular,
‫está bien, es por eso que no especifiqué save dev
‫aquí porque, nuevamente, no es un dependencia dev realmente.
‫Bien, lo tenemos en nuestro paquete. json aquí ahora, morgan y
‫así, sigamos adelante y lo solicitemos en nuestro código.
‫Entonces, de nuevo en la parte superior
‫aquí const morgan equals require morgan y verá nuevamente
‫este tipo de convención que
‫el require expondrá
‫si usa el mismo nombre que el nombre del paquete.
‫Entonces, tenemos nuestros middlewares aquí, así
‫que agregémoslo justo después de esto o
‫escribamos como el primero.
‫De acuerdo, y el código fuente está
‫creciendo un
‫poco, así que sigamos adelante y
‫agreguemos algunos comentarios aquí,
‫primero middlewares, luego aquí abajo comenzamos a tener nuestros controladores de ruta.
‫Bien, entonces digamos que tenemos nuestras rutas.
‫Y finalmente aquí abajo iniciamos
‫el servidor.
‫Bien, solo para hacer nuestro código un poco más legible
‫y más fácil de escanear.
‫Entonces, tenemos este primer middleware, pero
‫nuevamente usemos el nuestro antes de eso.
‫Entonces, por supuesto, la aplicación. uso
‫y ahora aquí llamamos Morgan.
‫De acuerdo, en esta función,
‫podemos pasar un argumento
‫que especifique
‫cómo queremos que se vea el registro.
‫Entonces, podemos usar algunas cadenas predefinidas para eso y
‫la que voy a usar se llama dev.
‫Y de hecho, puedes ver aquí las diferentes opciones,
‫por lo que VS Code es realmente
‫inteligente y me puede
‫dar las opciones que podemos pasar a esta función.
‫Bien, como mencioné,
‫usaré el que se llama dev.
‫Está bien y eso es todo.
‫Entonces, lo requerimos
‫y luego aquí lo usamos.
‫Entonces, cosas muy simples,
‫pero creo que
‫es importante tratar de comprender cómo funciona esto.
‫Entonces, llamar a esta función
‫morgan devolverá una función similar a esta aquí y
‫entonces, eso tiene sentido
‫porque si bien así es como debe
‫verse una función de middleware, permítanme demostrarles eso mirando
‫el código fuente de
‫este paquete
‫y ese es otro ejercicio muy
‫agradable del que podemos aprender bastante.
‫Entonces, busquemos morgan en GitHub, por lo que generalmente todos estos
‫paquetes están siempre en GitHub y ahí
‫es donde podemos ver su
‫código fuente abierto.
‫De acuerdo, Morgan es en realidad un paquete muy simple y, por lo tanto, todo lo que
‫tenemos que hacer es ir a este índice. js, por lo que generalmente
‫ese es el punto de entrada
‫y, en este caso, es el único archivo que existe.
‫Bien, ahora, no voy a repasar todo este código,
‫pero quiero resaltar que la exportación principal
‫de este archivo aquí es morgan, así que
‫una función llamada morgan, así que busquemos
‫eso y
‫en realidad aquí está.
‫Bien, y cuando solicitamos el paquete en nuestro código,
‫lo que se devolverá es esta función de Morgan, ¿verdad?
‫Nuevamente porque usan module. exportar y
‫esa es la exportación predeterminada tal
‫como aprendimos en la lección de módulos requeridos
‫hace una sección o dos secciones, ¿verdad?
‫Entonces, nuevamente, esta función
‫morgan aquí será esta función morgan aquí en este código, ¿de acuerdo?
‫Entonces, veamos qué hace esta
‫función y no me importa nada de esta implementación
‫aquí, lo
‫que realmente quería mostrarles es que esta función en realidad devuelve
‫otra función que es
‫el registrador y ven que esta
‫función solo tiene la nuestra.
‫Las funciones de middleware tienen esta firma muy
‫típica de solicitud, respuesta y siguiente.
‫¿Okey?
‫Entonces, esta función es como nuestras propias funciones de middleware.
‫Y entonces, ves que al final,
‫cuando está listo, también llama a continuación, al
‫igual que lo hacemos nosotros.
‫Entonces, es solo una función
‫de middleware muy regular como las que escribimos.
‫¿Okey?
‫Entonces, regresemos aquí y ahora
‫veamos el resultado aquí en nuestra terminal, así que
‫regresemos a la primera, así es
‫como cambiamos entre las
‫diferentes terminales que tenemos abiertas en VS Code.
‫Danos un poco más de espacio aquí,
‫en realidad borra esto
‫porque es posible que no puedas ver tan bien
‫la parte inferior de la pantalla.
‫Y sí, sigamos adelante y
‫simplemente creemos alguna
‫solicitud, está bien, regresemos y aquí vamos.
‫Entonces, tenemos la información sobre la solicitud
‫que acabamos de hacer.
‫Entonces, obtenemos el método
‫HTTP, obtenemos la URL, obtenemos el código de estado,
‫el tiempo que tomó enviar la respuesta
‫y también el tamaño de la respuesta en bytes.
‫Entonces, recuerde que podríamos haber usado otra opción
‫aquí, por ejemplo, diminuto era otra, por
‫lo que probablemente se vería un poco diferente y en realidad
‫se vería algo similar aquí.
‫Simplemente no hace esta coloración
‫de este código
‫de estado y también tiene un orden ligeramente diferente aquí.
‫De acuerdo, y si hicimos algo, si causamos
‫un error, por ejemplo, un 404, probémoslo
‫usando una ID no válida aquí, para que
‫luego obtenga otro color aquí, ¿verdad, puedes
‫ver eso?
‫Hagámoslo de nuevo en caso de que no lo hayas visto.
‫Y entonces, sí, nos da un color diferente.
‫Y entonces, sí, eso puede ser bastante útil para el desarrollo.
‫De hecho, podría incluso guardar este
‫registro en un archivo, pero eso es demasiado para
‫este pequeño
‫ejemplo, por lo que es
‫más que suficiente y
‫verá a lo largo del curso que es útil tenerlo aquí.
‫De acuerdo, así es como usamos
‫middleware de terceros de npm y hay mucho middleware allí
‫y déjame mostrarte eso.
‫Entonces, en el
‫sitio Express en sí, expressjs. com y en realidad nunca visitamos este
‫sitio web, por lo que
‫en realidad es bastante bueno, por lo
‫que tiene este Primeros pasos con un par de artículos
‫que explican los conceptos básicos de Express y luego tiene una
‫buena referencia de API en nuestro caso, 4. xy así, aquí tienes todos los métodos que
‫están en la
‫solicitud, así que los métodos en las
‫propiedades, por supuesto, todas estas cosas que
‫tenemos, por ejemplo, las solicitudes. cuerpo que ya usamos
‫o aquí en la respuesta, tiene, por
‫ejemplo, respuesta. json o
‫respuesta. send
‫y hay un montón de otros
‫métodos y usaremos muchos de ellos más
‫adelante, pero aquí tienes estos recursos y el que
‫quiero mostrarte es middleware,
‫por lo que este es un montón de
‫middleware que puedes
‫usar y Express recomienda, ¿de acuerdo?
‫Y nuevamente, usaremos algunos de ellos un poco más tarde
‫y, de hecho, Express los recomienda porque
‫muchos de ellos solían estar integrados en Express 3, por lo
‫que en
‫una versión anterior, pero luego se eliminaron de Express.
‫Por ejemplo, cuerpo. parser es uno
‫de ellos, pero en realidad
‫en la versión cuatro, creo que 14 o
‫16, se agregó nuevamente y por eso pudimos hacer, veamos,
‫¿dónde está?
‫Sí, por eso pudimos usar la expresión. json para
‫analizar los datos del cuerpo.
‫Antes de eso, en realidad tendríamos que usar el cuerpo. analizador de npm y
‫use ese para analizar los datos del cuerpo, pero
‫nuevamente, lo agregaron recientemente para
‫reducir un poco la confusión para principiantes como usted.
‫Bien, entonces juega un poco
‫con esta referencia.
‫Echa un vistazo
‫a algunas de las cosas que tal vez ya hicimos
‫si te apetece o si no, siempre puedes pasar
‫directamente al siguiente video.