‫Instrutor: Agora
‫vamos usar uma função de
‫middleware de terceiros do npm chamada Morgan
‫para tornar nossa vida de desenvolvimento um pouco mais fácil.
‫Então, como mencionei, vamos usar um
‫middleware chamado Morgan, que é um middleware de registro muito popular.
‫Portanto, um middleware que nos permitirá ver os dados da
‫solicitação diretamente no console.
‫Ok, deixe-me ir em frente e instalá-lo
‫e você verá como funciona, ok?
‫Então, eu não quero terminar este processo aqui, então vou criar
‫um novo terminal aqui no VS Code e então,
‫para isso eu clico neste botão de adição aqui
‫e então, agora temos um novo
‫terminal e eu
‫não não deseja atualizar, então não, e agora npm install Morgan.
‫Ok, agora como mencionei, este middleware
‫de registro vai tornar
‫nossa vida de desenvolvimento um pouco mais fácil.
‫Mas ainda é
‫o código que realmente incluiremos em nosso aplicativo
‫e, portanto, é por isso que não é uma dependência
‫de desenvolvimento, mas apenas uma dependência regular simples,
‫ok e então, é por isso que eu não especifiquei save
‫dev aqui porque, novamente, não é um dependência dev realmente.
‫Ok, então temos em nosso pacote. json aqui agora, Morgan e
‫então, vamos prosseguir e exigir isso em nosso código.
‫Então, novamente bem no topo aqui const morgan
‫é igual a require morgan e você verá novamente
‫esse tipo de convenção que o
‫require exporá se
‫você usar o mesmo nome do próprio nome do pacote.
‫Então, nós temos nossos middlewares aqui,
‫então vamos adicioná-los logo em seguida ou
‫escrever como o primeiro.
‫Ok, e o código-fonte está crescendo um
‫pouco, então
‫vamos realmente seguir em frente e adicionar
‫alguns comentários aqui, então primeiro
‫middlewares, então aqui embaixo nós começamos a ter nossos gerenciadores de rota.
‫Certo, então aqui vamos apenas dizer que temos nossas rotas.
‫E então, finalmente, aqui iniciamos
‫o servidor.
‫Ok, apenas para tornar nosso código um pouco mais
‫legível e fácil de digitalizar.
‫Então, nós temos este primeiro middleware,
‫mas novamente vamos usar o nosso antes disso.
‫Então, é claro app. usar
‫e agora aqui chamamos Morgan.
‫Ok e nesta função,
‫podemos passar um
‫argumento que
‫irá especificar como queremos o log.
‫Então, podemos usar algumas strings predefinidas para isso e
‫aquela que irei usar se chama dev.
‫E na verdade você pode ver aqui as diferentes
‫opções, então o VS Code é realmente
‫inteligente e pode me
‫dar as opções que podemos passar para esta função.
‫Ok, como
‫mencionei, vou usar aquele chamado dev.
‫Ok e isso é realmente isso.
‫Então, nós exigimos
‫isso e aqui nós usamos.
‫Então, coisas muito simples,
‫mas acho que
‫é importante realmente tentar entender como isso funciona.
‫Então, chamar esta função Morgan retornará
‫uma função semelhante a esta aqui e então, isso
‫faz sentido porque embora
‫seja assim que uma função de middleware deve
‫se parecer e assim, deixe-me provar isso para você olhando
‫o código-fonte para este
‫pacote e
‫este é outro exercício muito bom com
‫o qual podemos realmente aprender um pouco.
‫Então, vamos pesquisar por Morgan no GitHub, então geralmente todos esses
‫pacotes estão sempre no GitHub e
‫é aí que podemos olhar
‫seu código-fonte aberto.
‫Ok e Morgan é, na verdade, um pacote muito simples e, portanto, tudo o
‫que precisamos fazer é acessar este índice. arquivo js, então geralmente
‫esse é o ponto de entrada
‫e, neste caso, é o único arquivo que existe.
‫Ok, agora, não vou revisar todo este código, mas
‫quero destacar que a exportação principal
‫deste arquivo aqui é Morgan, então uma
‫função chamada Morgan, então vamos procurar
‫por isso
‫e realmente aqui está.
‫Ok, e quando solicitamos o pacote em nosso
‫código, o que será retornado é esta função Morgan, certo?
‫Novamente porque eles usam o módulo. exportação e
‫essa é a exportação padrão, assim
‫como aprendemos na aula de módulos exigidos
‫uma ou duas seções atrás, certo?
‫Então, novamente esta função
‫Morgan aqui será esta função Morgan aqui neste código, ok?
‫Então, vamos ver o que essa
‫função faz e eu não me importo com nada dessa
‫implementação aqui, o
‫que eu realmente queria mostrar a vocês é que essa função
‫realmente retorna outra função
‫que é o logger e você
‫vê que essa função tem
‫apenas a nossa As funções de middleware têm essa
‫assinatura típica de solicitação, resposta e próxima.
‫OK?
‫Portanto, esta função é como nossas próprias funções de middleware.
‫E então, você vê que, na verdade,
‫no final, quando estiver pronto, ele também chama o
‫próximo, então, assim como fazemos.
‫Portanto, é apenas uma função
‫de middleware muito comum, como as que escrevemos.
‫OK?
‫Então, vamos voltar aqui e agora
‫realmente ver o resultado aqui em nosso terminal, então
‫vamos voltar ao primeiro, então é
‫assim que alternamos entre
‫os diferentes terminais que abrimos no VS Code.
‫Dê-nos um pouco mais de espaço aqui,
‫na verdade limpe
‫isso porque talvez você não consiga ver a
‫parte inferior da tela tão bem.
‫E então sim, vamos seguir em
‫frente e simplesmente criar
‫alguma solicitação, certo, volte e lá vamos nós.
‫Então, temos as informações sobre a solicitação
‫que acabamos de fazer.
‫Então, obtemos o método HTTP,
‫obtemos a URL, obtemos o código de status, o tempo
‫que levou para enviar de volta a
‫resposta e também o tamanho da resposta em bytes.
‫Portanto, lembre-se de que poderíamos ter usado
‫outra opção aqui, por exemplo, tiny
‫era outra opção, então provavelmente seria um pouco diferente e
‫realmente pareceria semelhante aqui.
‫Ele simplesmente não faz essa
‫coloração desse código
‫de status e também tem uma ordem ligeiramente diferente aqui.
‫Ok e se fizemos algo, se causamos um
‫erro, por exemplo, um 404, vamos testar
‫usando um ID inválido aqui, então isso vai
‫ter outra cor aqui, certo, você pode
‫ver isso?
‫Vamos fazer isso de novo, caso você não tenha visto.
‫E então, sim, nos dá uma cor diferente.
‫E então, sim, isso pode ser bastante útil para o desenvolvimento.
‫Você poderia até salvar esse log
‫em um arquivo, mas isso é um pouco demais para
‫este pequeno exemplo,
‫então isso é mais do
‫que suficiente e você
‫verá ao longo do curso que é meio útil tê-lo aqui.
‫Ok, é assim que usamos o middleware
‫de terceiros do npm e há muito middleware nele e deixe-me
‫mostrar isso para você.
‫Então, no próprio
‫site do Express, então expressjs. com e na verdade nunca visitamos
‫este site, então é
‫realmente muito bom, então você tem este
‫Guia de introdução com alguns artigos que explicam os
‫fundamentos do Express e, em seguida, você tem uma boa
‫referência de API em nosso caso, 4. xe então, aqui você tem todos os
‫métodos que estão
‫na solicitação, então métodos nas propriedades
‫é claro, então todas essas coisas
‫que temos, por exemplo, solicitações. corpo que já usamos
‫ou aqui na resposta, você tem, por
‫exemplo, resposta. JSON ou
‫resposta. enviar e
‫há um monte de outros métodos e
‫nós usaremos muitos deles mais tarde, mas então
‫aqui você tem esses recursos e aquele que eu quero
‫mostrar a vocês é
‫o middleware e então, este é um monte de
‫middleware que você
‫pode usar e aquele Express recomenda, ok?
‫E, novamente, usaremos alguns deles um pouco mais tarde
‫e, na verdade, o Express os recomenda
‫porque muitos deles costumavam ser integrados no Express 3, ou
‫seja, em
‫uma versão anterior, mas foram retirados do Express.
‫Por exemplo, corpo. parser é um
‫deles, mas na verdade na versão
‫quatro ponto, creio que 14 ou 16, foi adicionado
‫de volta e é por isso que pudemos fazer vamos ver,
‫onde está?
‫Sim, é por isso que pudemos usar a expressão. json para
‫analisar os dados do corpo.
‫Antes disso, teríamos que usar o corpo. analisador do npm e
‫use aquele para analisar os dados do corpo, mas, novamente,
‫eles adicionaram recentemente de volta
‫para reduzir um pouco a confusão para iniciantes como você.
‫Ok, então brinque um pouco
‫com esta referência.
‫Dê uma olhada
‫em algumas das coisas que talvez já fizemos, se você
‫quiser ou não, você pode sempre seguir direto
‫para o próximo vídeo.