1
00:00:01,350 --> 00:00:02,270
‫Instrutor: Agora

2
00:00:02,270 --> 00:00:04,360
‫vamos usar uma função de

3
00:00:04,360 --> 00:00:06,880
‫middleware de terceiros do npm chamada Morgan

4
00:00:06,880 --> 00:00:10,313
‫para tornar nossa vida de desenvolvimento um pouco mais fácil.

5
00:00:11,890 --> 00:00:14,450
‫Então, como mencionei, vamos usar um

6
00:00:14,450 --> 00:00:18,400
‫middleware chamado Morgan, que é um middleware de registro muito popular.

7
00:00:18,400 --> 00:00:21,960
‫Portanto, um middleware que nos permitirá ver os dados da

8
00:00:21,960 --> 00:00:23,640
‫solicitação diretamente no console.

9
00:00:23,640 --> 00:00:26,320
‫Ok, deixe-me ir em frente e instalá-lo

10
00:00:26,320 --> 00:00:28,863
‫e você verá como funciona, ok?

11
00:00:28,863 --> 00:00:33,340
‫Então, eu não quero terminar este processo aqui, então vou criar

12
00:00:33,340 --> 00:00:36,900
‫um novo terminal aqui no VS Code e então,

13
00:00:36,900 --> 00:00:40,300
‫para isso eu clico neste botão de adição aqui

14
00:00:40,300 --> 00:00:42,750
‫e então, agora temos um novo

15
00:00:42,750 --> 00:00:44,390
‫terminal e eu

16
00:00:44,390 --> 00:00:48,853
‫não não deseja atualizar, então não, e agora npm install Morgan.

17
00:00:50,340 --> 00:00:52,500
‫Ok, agora como mencionei, este middleware

18
00:00:52,500 --> 00:00:54,330
‫de registro vai tornar

19
00:00:54,330 --> 00:00:57,340
‫nossa vida de desenvolvimento um pouco mais fácil.

20
00:00:57,340 --> 00:00:58,710
‫Mas ainda é

21
00:00:58,710 --> 00:01:01,470
‫o código que realmente incluiremos em nosso aplicativo

22
00:01:01,470 --> 00:01:04,630
‫e, portanto, é por isso que não é uma dependência

23
00:01:04,630 --> 00:01:07,270
‫de desenvolvimento, mas apenas uma dependência regular simples,

24
00:01:07,270 --> 00:01:10,800
‫ok e então, é por isso que eu não especifiquei save

25
00:01:10,800 --> 00:01:14,110
‫dev aqui porque, novamente, não é um dependência dev realmente.

26
00:01:14,110 --> 00:01:18,640
‫Ok, então temos em nosso pacote. json aqui agora, Morgan e

27
00:01:18,640 --> 00:01:21,763
‫então, vamos prosseguir e exigir isso em nosso código.

28
00:01:23,190 --> 00:01:26,593
‫Então, novamente bem no topo aqui const morgan

29
00:01:29,500 --> 00:01:33,450
‫é igual a require morgan e você verá novamente

30
00:01:33,450 --> 00:01:35,800
‫esse tipo de convenção que o

31
00:01:35,800 --> 00:01:37,530
‫require exporá se

32
00:01:37,530 --> 00:01:41,750
‫você usar o mesmo nome do próprio nome do pacote.

33
00:01:41,750 --> 00:01:43,850
‫Então, nós temos nossos middlewares aqui,

34
00:01:43,850 --> 00:01:46,590
‫então vamos adicioná-los logo em seguida ou

35
00:01:46,590 --> 00:01:48,623
‫escrever como o primeiro.

36
00:01:49,480 --> 00:01:52,150
‫Ok, e o código-fonte está crescendo um

37
00:01:52,150 --> 00:01:53,300
‫pouco, então

38
00:01:53,300 --> 00:01:55,670
‫vamos realmente seguir em frente e adicionar

39
00:01:55,670 --> 00:01:57,603
‫alguns comentários aqui, então primeiro

40
00:02:01,170 --> 00:02:05,753
‫middlewares, então aqui embaixo nós começamos a ter nossos gerenciadores de rota.

41
00:02:11,510 --> 00:02:15,623
‫Certo, então aqui vamos apenas dizer que temos nossas rotas.

42
00:02:20,050 --> 00:02:21,950
‫E então, finalmente, aqui iniciamos

43
00:02:21,950 --> 00:02:23,173
‫o servidor.

44
00:02:28,405 --> 00:02:31,630
‫Ok, apenas para tornar nosso código um pouco mais

45
00:02:31,630 --> 00:02:33,700
‫legível e fácil de digitalizar.

46
00:02:33,700 --> 00:02:35,980
‫Então, nós temos este primeiro middleware,

47
00:02:35,980 --> 00:02:38,453
‫mas novamente vamos usar o nosso antes disso.

48
00:02:39,520 --> 00:02:41,750
‫Então, é claro app. usar

49
00:02:41,750 --> 00:02:44,223
‫e agora aqui chamamos Morgan.

50
00:02:45,300 --> 00:02:47,040
‫Ok e nesta função,

51
00:02:47,040 --> 00:02:48,460
‫podemos passar um

52
00:02:48,460 --> 00:02:49,684
‫argumento que

53
00:02:49,684 --> 00:02:52,310
‫irá especificar como queremos o log.

54
00:02:52,310 --> 00:02:54,920
‫Então, podemos usar algumas strings predefinidas para isso e

55
00:02:54,920 --> 00:02:57,493
‫aquela que irei usar se chama dev.

56
00:02:58,550 --> 00:03:01,140
‫E na verdade você pode ver aqui as diferentes

57
00:03:01,140 --> 00:03:03,180
‫opções, então o VS Code é realmente

58
00:03:03,180 --> 00:03:04,613
‫inteligente e pode me

59
00:03:04,613 --> 00:03:07,170
‫dar as opções que podemos passar para esta função.

60
00:03:07,170 --> 00:03:08,500
‫Ok, como

61
00:03:08,500 --> 00:03:11,080
‫mencionei, vou usar aquele chamado dev.

62
00:03:11,080 --> 00:03:13,650
‫Ok e isso é realmente isso.

63
00:03:13,650 --> 00:03:15,180
‫Então, nós exigimos

64
00:03:15,180 --> 00:03:16,960
‫isso e aqui nós usamos.

65
00:03:16,960 --> 00:03:18,500
‫Então, coisas muito simples,

66
00:03:18,500 --> 00:03:19,860
‫mas acho que

67
00:03:19,860 --> 00:03:23,170
‫é importante realmente tentar entender como isso funciona.

68
00:03:23,170 --> 00:03:25,260
‫Então, chamar esta função Morgan retornará

69
00:03:25,260 --> 00:03:28,407
‫uma função semelhante a esta aqui e então, isso

70
00:03:28,407 --> 00:03:29,910
‫faz sentido porque embora

71
00:03:29,910 --> 00:03:32,550
‫seja assim que uma função de middleware deve

72
00:03:32,550 --> 00:03:36,010
‫se parecer e assim, deixe-me provar isso para você olhando

73
00:03:36,010 --> 00:03:37,720
‫o código-fonte para este

74
00:03:37,720 --> 00:03:38,810
‫pacote e

75
00:03:38,810 --> 00:03:41,170
‫este é outro exercício muito bom com

76
00:03:41,170 --> 00:03:43,513
‫o qual podemos realmente aprender um pouco.

77
00:03:45,090 --> 00:03:50,090
‫Então, vamos pesquisar por Morgan no GitHub, então geralmente todos esses

78
00:03:50,440 --> 00:03:53,430
‫pacotes estão sempre no GitHub e

79
00:03:53,430 --> 00:03:55,620
‫é aí que podemos olhar

80
00:03:55,620 --> 00:03:57,463
‫seu código-fonte aberto.

81
00:03:58,410 --> 00:04:02,160
‫Ok e Morgan é, na verdade, um pacote muito simples e, portanto, tudo o

82
00:04:02,160 --> 00:04:05,930
‫que precisamos fazer é acessar este índice. arquivo js, então geralmente

83
00:04:05,930 --> 00:04:08,000
‫esse é o ponto de entrada

84
00:04:08,000 --> 00:04:11,233
‫e, neste caso, é o único arquivo que existe.

85
00:04:12,680 --> 00:04:16,020
‫Ok, agora, não vou revisar todo este código, mas

86
00:04:16,020 --> 00:04:18,510
‫quero destacar que a exportação principal

87
00:04:18,510 --> 00:04:21,330
‫deste arquivo aqui é Morgan, então uma

88
00:04:21,330 --> 00:04:23,780
‫função chamada Morgan, então vamos procurar

89
00:04:23,780 --> 00:04:24,880
‫por isso

90
00:04:26,070 --> 00:04:27,623
‫e realmente aqui está.

91
00:04:28,460 --> 00:04:31,960
‫Ok, e quando solicitamos o pacote em nosso

92
00:04:31,960 --> 00:04:35,520
‫código, o que será retornado é esta função Morgan, certo?

93
00:04:35,520 --> 00:04:38,190
‫Novamente porque eles usam o módulo. exportação e

94
00:04:38,190 --> 00:04:41,110
‫essa é a exportação padrão, assim

95
00:04:41,110 --> 00:04:44,650
‫como aprendemos na aula de módulos exigidos

96
00:04:44,650 --> 00:04:47,650
‫uma ou duas seções atrás, certo?

97
00:04:47,650 --> 00:04:49,720
‫Então, novamente esta função

98
00:04:49,720 --> 00:04:54,720
‫Morgan aqui será esta função Morgan aqui neste código, ok?

99
00:04:55,520 --> 00:04:57,490
‫Então, vamos ver o que essa

100
00:04:57,490 --> 00:05:00,830
‫função faz e eu não me importo com nada dessa

101
00:05:00,830 --> 00:05:02,150
‫implementação aqui, o

102
00:05:02,150 --> 00:05:06,000
‫que eu realmente queria mostrar a vocês é que essa função

103
00:05:06,000 --> 00:05:07,650
‫realmente retorna outra função

104
00:05:07,650 --> 00:05:09,850
‫que é o logger e você

105
00:05:09,850 --> 00:05:11,600
‫vê que essa função tem

106
00:05:11,600 --> 00:05:14,630
‫apenas a nossa As funções de middleware têm essa

107
00:05:14,630 --> 00:05:17,020
‫assinatura típica de solicitação, resposta e próxima.

108
00:05:17,020 --> 00:05:18,200
‫OK?

109
00:05:18,200 --> 00:05:22,120
‫Portanto, esta função é como nossas próprias funções de middleware.

110
00:05:22,120 --> 00:05:24,060
‫E então, você vê que, na verdade,

111
00:05:24,060 --> 00:05:26,620
‫no final, quando estiver pronto, ele também chama o

112
00:05:26,620 --> 00:05:28,250
‫próximo, então, assim como fazemos.

113
00:05:28,250 --> 00:05:30,370
‫Portanto, é apenas uma função

114
00:05:30,370 --> 00:05:33,393
‫de middleware muito comum, como as que escrevemos.

115
00:05:33,393 --> 00:05:35,078
‫OK?

116
00:05:35,078 --> 00:05:37,067
‫Então, vamos voltar aqui e agora

117
00:05:37,067 --> 00:05:40,430
‫realmente ver o resultado aqui em nosso terminal, então

118
00:05:40,430 --> 00:05:42,660
‫vamos voltar ao primeiro, então é

119
00:05:42,660 --> 00:05:44,500
‫assim que alternamos entre

120
00:05:44,500 --> 00:05:47,423
‫os diferentes terminais que abrimos no VS Code.

121
00:05:49,190 --> 00:05:51,190
‫Dê-nos um pouco mais de espaço aqui,

122
00:05:51,190 --> 00:05:52,460
‫na verdade limpe

123
00:05:52,460 --> 00:05:54,900
‫isso porque talvez você não consiga ver a

124
00:05:54,900 --> 00:05:56,710
‫parte inferior da tela tão bem.

125
00:05:56,710 --> 00:05:59,070
‫E então sim, vamos seguir em

126
00:05:59,070 --> 00:06:00,893
‫frente e simplesmente criar

127
00:06:04,200 --> 00:06:07,240
‫alguma solicitação, certo, volte e lá vamos nós.

128
00:06:07,240 --> 00:06:09,730
‫Então, temos as informações sobre a solicitação

129
00:06:09,730 --> 00:06:11,170
‫que acabamos de fazer.

130
00:06:11,170 --> 00:06:13,060
‫Então, obtemos o método HTTP,

131
00:06:13,060 --> 00:06:16,250
‫obtemos a URL, obtemos o código de status, o tempo

132
00:06:16,250 --> 00:06:18,637
‫que levou para enviar de volta a

133
00:06:18,637 --> 00:06:21,603
‫resposta e também o tamanho da resposta em bytes.

134
00:06:22,440 --> 00:06:25,550
‫Portanto, lembre-se de que poderíamos ter usado

135
00:06:25,550 --> 00:06:28,183
‫outra opção aqui, por exemplo, tiny

136
00:06:28,183 --> 00:06:32,370
‫era outra opção, então provavelmente seria um pouco diferente e

137
00:06:32,370 --> 00:06:34,680
‫realmente pareceria semelhante aqui.

138
00:06:34,680 --> 00:06:36,380
‫Ele simplesmente não faz essa

139
00:06:36,380 --> 00:06:37,710
‫coloração desse código

140
00:06:37,710 --> 00:06:40,923
‫de status e também tem uma ordem ligeiramente diferente aqui.

141
00:06:43,760 --> 00:06:46,893
‫Ok e se fizemos algo, se causamos um

142
00:06:48,060 --> 00:06:50,880
‫erro, por exemplo, um 404, vamos testar

143
00:06:50,880 --> 00:06:53,890
‫usando um ID inválido aqui, então isso vai

144
00:06:56,380 --> 00:06:59,210
‫ter outra cor aqui, certo, você pode

145
00:06:59,210 --> 00:07:00,410
‫ver isso?

146
00:07:01,246 --> 00:07:03,530
‫Vamos fazer isso de novo, caso você não tenha visto.

147
00:07:03,530 --> 00:07:06,440
‫E então, sim, nos dá uma cor diferente.

148
00:07:06,440 --> 00:07:09,420
‫E então, sim, isso pode ser bastante útil para o desenvolvimento.

149
00:07:09,420 --> 00:07:11,100
‫Você poderia até salvar esse log

150
00:07:11,100 --> 00:07:13,960
‫em um arquivo, mas isso é um pouco demais para

151
00:07:13,960 --> 00:07:15,060
‫este pequeno exemplo,

152
00:07:15,060 --> 00:07:16,460
‫então isso é mais do

153
00:07:16,460 --> 00:07:17,800
‫que suficiente e você

154
00:07:17,800 --> 00:07:20,910
‫verá ao longo do curso que é meio útil tê-lo aqui.

155
00:07:20,910 --> 00:07:23,620
‫Ok, é assim que usamos o middleware

156
00:07:23,620 --> 00:07:28,160
‫de terceiros do npm e há muito middleware nele e deixe-me

157
00:07:28,160 --> 00:07:30,010
‫mostrar isso para você.

158
00:07:31,970 --> 00:07:34,143
‫Então, no próprio

159
00:07:37,850 --> 00:07:42,290
‫site do Express, então expressjs. com e na verdade nunca visitamos

160
00:07:42,290 --> 00:07:44,170
‫este site, então é

161
00:07:44,170 --> 00:07:46,490
‫realmente muito bom, então você tem este

162
00:07:46,490 --> 00:07:49,410
‫Guia de introdução com alguns artigos que explicam os

163
00:07:49,410 --> 00:07:52,730
‫fundamentos do Express e, em seguida, você tem uma boa

164
00:07:52,730 --> 00:07:57,400
‫referência de API em nosso caso, 4. xe então, aqui você tem todos os

165
00:07:57,400 --> 00:07:58,713
‫métodos que estão

166
00:07:59,970 --> 00:08:01,980
‫na solicitação, então métodos nas propriedades

167
00:08:01,980 --> 00:08:03,980
‫é claro, então todas essas coisas

168
00:08:03,980 --> 00:08:07,294
‫que temos, por exemplo, solicitações. corpo que já usamos

169
00:08:07,294 --> 00:08:10,020
‫ou aqui na resposta, você tem, por

170
00:08:10,020 --> 00:08:12,920
‫exemplo, resposta. JSON ou

171
00:08:12,920 --> 00:08:14,610
‫resposta. enviar e

172
00:08:14,610 --> 00:08:16,870
‫há um monte de outros métodos e

173
00:08:16,870 --> 00:08:19,587
‫nós usaremos muitos deles mais tarde, mas então

174
00:08:19,587 --> 00:08:22,840
‫aqui você tem esses recursos e aquele que eu quero

175
00:08:22,840 --> 00:08:24,210
‫mostrar a vocês é

176
00:08:24,210 --> 00:08:27,280
‫o middleware e então, este é um monte de

177
00:08:27,280 --> 00:08:28,520
‫middleware que você

178
00:08:28,520 --> 00:08:30,790
‫pode usar e aquele Express recomenda, ok?

179
00:08:30,790 --> 00:08:33,890
‫E, novamente, usaremos alguns deles um pouco mais tarde

180
00:08:33,890 --> 00:08:36,220
‫e, na verdade, o Express os recomenda

181
00:08:36,220 --> 00:08:39,510
‫porque muitos deles costumavam ser integrados no Express 3, ou

182
00:08:39,510 --> 00:08:40,650
‫seja, em

183
00:08:40,650 --> 00:08:43,550
‫uma versão anterior, mas foram retirados do Express.

184
00:08:43,550 --> 00:08:46,170
‫Por exemplo, corpo. parser é um

185
00:08:46,170 --> 00:08:48,430
‫deles, mas na verdade na versão

186
00:08:48,430 --> 00:08:51,910
‫quatro ponto, creio que 14 ou 16, foi adicionado

187
00:08:51,910 --> 00:08:56,260
‫de volta e é por isso que pudemos fazer vamos ver,

188
00:08:56,260 --> 00:08:57,380
‫onde está?

189
00:08:57,380 --> 00:09:00,830
‫Sim, é por isso que pudemos usar a expressão. json para

190
00:09:00,830 --> 00:09:03,380
‫analisar os dados do corpo.

191
00:09:03,380 --> 00:09:07,360
‫Antes disso, teríamos que usar o corpo. analisador do npm e

192
00:09:07,360 --> 00:09:11,620
‫use aquele para analisar os dados do corpo, mas, novamente,

193
00:09:11,620 --> 00:09:14,040
‫eles adicionaram recentemente de volta

194
00:09:14,040 --> 00:09:18,210
‫para reduzir um pouco a confusão para iniciantes como você.

195
00:09:18,210 --> 00:09:20,130
‫Ok, então brinque um pouco

196
00:09:20,130 --> 00:09:21,950
‫com esta referência.

197
00:09:21,950 --> 00:09:23,120
‫Dê uma olhada

198
00:09:23,120 --> 00:09:26,032
‫em algumas das coisas que talvez já fizemos, se você

199
00:09:26,032 --> 00:09:28,660
‫quiser ou não, você pode sempre seguir direto

200
00:09:28,660 --> 00:09:29,963
‫para o próximo vídeo.