1
00:00:01,260 --> 00:00:02,700
‫Instrutor: Bem-vindo de volta.

2
00:00:02,700 --> 00:00:06,280
‫Espero que você esteja gostando desta seção até agora e de

3
00:00:06,280 --> 00:00:09,800
‫trabalhar com o Node. js.

4
00:00:09,800 --> 00:00:13,100
‫Então, vamos agora prosseguir em nosso

5
00:00:13,100 --> 00:00:17,573
‫projeto e construir uma API da web extremamente simples.

6
00:00:19,430 --> 00:00:23,290
‫Agora, para começar, o que realmente é uma API?

7
00:00:23,290 --> 00:00:25,759
‫Bem, a resposta longa, você

8
00:00:25,759 --> 00:00:30,450
‫aprenderá em uma das próximas seções, mas por enquanto, a resposta

9
00:00:30,450 --> 00:00:34,510
‫curta, pelo menos neste contexto de APIs da web, basicamente,

10
00:00:34,510 --> 00:00:39,510
‫uma API é um serviço do qual podemos solicitar alguns dados, então,

11
00:00:39,750 --> 00:00:43,880
‫neste caso, os dados que o usuário deseja solicitar são

12
00:00:43,880 --> 00:00:46,470
‫dados sobre os produtos que estamos

13
00:00:46,470 --> 00:00:50,070
‫oferecendo neste farm de nós, portanto, neste projeto.

14
00:00:50,070 --> 00:00:54,360
‫Então, eu tenho aqui esta pasta dev-data, e ali, eu tenho

15
00:00:54,360 --> 00:00:58,870
‫um arquivo JSON, e JSON, caso você não saiba, é um formato

16
00:00:58,870 --> 00:01:01,500
‫de texto muito simples que se

17
00:01:01,500 --> 00:01:04,250
‫parece muito com o objeto JavaScript, então

18
00:01:04,250 --> 00:01:07,720
‫se parece com isto , e podemos ter arrays,

19
00:01:07,720 --> 00:01:11,010
‫o que realmente temos, então temos um grande

20
00:01:11,010 --> 00:01:14,630
‫array, que contém esses cinco objetos, e cada objeto

21
00:01:14,630 --> 00:01:18,400
‫tem o ID, o nome do produto, a imagem e

22
00:01:18,400 --> 00:01:20,160
‫assim por diante.

23
00:01:20,160 --> 00:01:24,270
‫Agora, cada um deles deve ser uma string para cada uma das

24
00:01:24,270 --> 00:01:26,593
‫chaves, e então temos o valor.

25
00:01:29,828 --> 00:01:34,010
‫Então, basicamente, esses dados aqui são o que nossa API

26
00:01:34,010 --> 00:01:36,673
‫enviará ao cliente quando solicitado.

27
00:01:37,840 --> 00:01:40,763
‫Portanto, teremos mais uma rota aqui.

28
00:01:43,250 --> 00:01:48,250
‫Bem aqui, senão se o nome do caminho for igual a / api.

29
00:01:55,980 --> 00:01:59,580
‫E, por enquanto, como um espaço reservado, vamos simplesmente enviar a

30
00:02:04,070 --> 00:02:05,703
‫API de volta assim.

31
00:02:08,520 --> 00:02:12,750
‫Portanto, o que queremos fazer agora é realmente ler os

32
00:02:12,750 --> 00:02:17,500
‫dados desse arquivo aqui, analisar JSON em JavaScript e, em seguida, enviar

33
00:02:17,500 --> 00:02:20,520
‫o resultado de volta ao cliente.

34
00:02:20,520 --> 00:02:24,053
‫Então algo muito simples e vamos trabalhar.

35
00:02:26,430 --> 00:02:29,350
‫Portanto, a primeira abordagem para fazer isso

36
00:02:29,350 --> 00:02:33,400
‫é vir por esse caminho e, em seguida, ler o arquivo aqui

37
00:02:33,400 --> 00:02:36,350
‫usando a função de leitura de arquivo, certo?

38
00:02:36,350 --> 00:02:37,853
‫Então, vamos começar fazendo isso.

39
00:02:40,110 --> 00:02:44,393
‫Então fs. , e é realmente readFile,

40
00:02:46,287 --> 00:02:50,110
‫não fileRead, portanto readFile e, em seguida, o nome do arquivo.

41
00:02:50,110 --> 00:02:52,593
‫Agora, lembre-se de como eu disse a você

42
00:02:52,593 --> 00:02:56,260
‫anteriormente que esta não é a única maneira de localizar nosso

43
00:02:56,260 --> 00:02:58,223
‫arquivo no sistema de arquivos.

44
00:02:59,300 --> 00:03:01,460
‫Por enquanto, vamos realmente usá-lo ainda, mas

45
00:03:01,460 --> 00:03:03,510
‫depois de escrever aqui, vou mostrar

46
00:03:03,510 --> 00:03:04,910
‫a você outra maneira.

47
00:03:05,790 --> 00:03:10,790
‫Portanto, uma observação, este ponto aqui na verdade se refere ao diretório a partir

48
00:03:11,260 --> 00:03:14,633
‫do qual executamos o comando node no terminal.

49
00:03:15,740 --> 00:03:18,420
‫Então, novamente, este ponto aqui

50
00:03:18,420 --> 00:03:21,414
‫agora representa esta pasta atual aqui porque é

51
00:03:21,414 --> 00:03:25,800
‫onde realmente executamos o comando node, portanto, nesta pasta de farm de

52
00:03:25,800 --> 00:03:28,600
‫1 nó, que é nosso diretório de

53
00:03:28,600 --> 00:03:32,270
‫trabalho atual de qualquer maneira neste caso, mas poderíamos ter

54
00:03:32,270 --> 00:03:35,230
‫execute o comando do nó em outro

55
00:03:35,230 --> 00:03:38,260
‫lugar, e então o ponto significaria outra coisa.

56
00:03:38,260 --> 00:03:42,860
‫Assim, por exemplo, poderíamos encontrar perfeitamente, ir para a área de trabalho

57
00:03:42,860 --> 00:03:46,380
‫e executar o nó lá e, em seguida, especificar

58
00:03:46,380 --> 00:03:50,600
‫todo o caminho para indexar. js, mas poderíamos fazer isso, mas

59
00:03:50,600 --> 00:03:55,080
‫nesse caso, o ponto significaria a área de trabalho, então se começássemos o

60
00:03:55,080 --> 00:03:57,390
‫script a partir da área de trabalho,

61
00:03:57,390 --> 00:03:59,890
‫então este aqui, este ponto, significaria a

62
00:03:59,890 --> 00:04:03,200
‫área de trabalho, e isso nem sempre é ideal e,

63
00:04:03,200 --> 00:04:05,290
‫portanto, existe uma maneira melhor.

64
00:04:05,290 --> 00:04:08,230
‫Então, tudo Node. scripts js,

65
00:04:08,230 --> 00:04:12,790
‫eles obtêm acesso a uma variável chamada dirname, e

66
00:04:12,790 --> 00:04:17,200
‫essa variável sempre traduz para o diretório no qual

67
00:04:17,200 --> 00:04:21,078
‫o script que estamos executando atualmente está localizado.

68
00:04:21,078 --> 00:04:24,170
‫Portanto, neste caso, é realmente o mesmo

69
00:04:24,170 --> 00:04:28,410
‫lugar porque o índice. js também está nesta

70
00:04:28,410 --> 00:04:31,980
‫pasta de farm de nós, mas, novamente, pelos

71
00:04:31,980 --> 00:04:34,280
‫motivos que mencionei antes, muitas vezes

72
00:04:34,280 --> 00:04:38,670
‫é uma prática melhor usar a variável dirname, então vamos fazer

73
00:04:38,670 --> 00:04:41,343
‫isso e, para isso, criamos uma

74
00:04:44,400 --> 00:04:46,690
‫string de modelo e, em

75
00:04:46,690 --> 00:04:51,567
‫seguida, usamos a variável, portanto, é __dirname, que significa nome do diretório.

76
00:04:54,870 --> 00:04:57,870
‫E então, normalmente, fazemos assim.

77
00:04:57,870 --> 00:04:59,850
‫Agora, há uma exceção a

78
00:04:59,850 --> 00:05:01,963
‫essa regra, que é a função require.

79
00:05:03,224 --> 00:05:05,140
‫Então, ao exigir módulos,

80
00:05:05,140 --> 00:05:08,160
‫podemos exigir nossos próprios módulos, e faremos isso

81
00:05:08,160 --> 00:05:10,650
‫um pouco mais tarde, como no

82
00:05:10,650 --> 00:05:13,800
‫próximo, ou em um dos próximos dois vídeos, e

83
00:05:13,800 --> 00:05:18,200
‫lá, o ponto também significa o funcionamento atual diretório e não o

84
00:05:18,200 --> 00:05:20,863
‫local de onde estamos executando o script.

85
00:05:21,965 --> 00:05:25,270
‫Portanto, lembre-se de que a função require é uma

86
00:05:25,270 --> 00:05:27,780
‫exceção a essa regra, mas geralmente,

87
00:05:27,780 --> 00:05:30,050
‫o ponto é onde o

88
00:05:30,050 --> 00:05:35,050
‫script está sendo executado e __dirname é onde o arquivo atual está localizado.

89
00:05:37,920 --> 00:05:42,920
‫Certo, agora vamos especificar a codificação do arquivo utf-8 e, em

90
00:05:43,840 --> 00:05:48,840
‫seguida, nossa função de retorno de chamada, que é o

91
00:05:49,900 --> 00:05:54,900
‫erro primeiro, lembre-se, e agora temos acesso a esses dados.

92
00:05:56,700 --> 00:05:59,920
‫Agora os dados estão em JSON e, portanto, em JavaScript, temos

93
00:05:59,920 --> 00:06:04,023
‫algo integrado que se chama JSON. parse.

94
00:06:06,290 --> 00:06:08,600
‫E então isso pegará o código

95
00:06:08,600 --> 00:06:10,190
‫JSON, que na

96
00:06:10,190 --> 00:06:14,400
‫verdade é uma string, e o transformará automaticamente em JavaScript, ou

97
00:06:14,400 --> 00:06:17,593
‫seja, um objeto ou array JavaScript neste caso.

98
00:06:19,240 --> 00:06:21,117
‫Vamos chamá-lo de productData

99
00:06:23,857 --> 00:06:26,743
‫e também rapidamente dar uma olhada nele.

100
00:06:32,500 --> 00:06:34,853
‫Portanto, no console, neste caso.

101
00:06:36,520 --> 00:06:40,740
‫Então, reiniciando o servidor, e agora, não se esqueça de

102
00:06:40,740 --> 00:06:45,740
‫acertar a rota / api, e oh, o que está acontecendo aqui?

103
00:06:47,520 --> 00:06:49,470
‫Oh, realmente reiniciámos o servidor.

104
00:06:52,545 --> 00:06:54,397
‫E agora temos uma

105
00:06:55,330 --> 00:06:58,020
‫API de resposta e vamos dar uma olhada

106
00:06:58,020 --> 00:07:01,140
‫aqui, na verdade, no objeto de dados do produto.

107
00:07:01,140 --> 00:07:04,340
‫Portanto, este é apenas um objeto legal, com todos

108
00:07:04,340 --> 00:07:09,340
‫os dados que tínhamos nesses dados. arquivo json.

109
00:07:09,620 --> 00:07:13,450
‫Tudo bem, agora a próxima etapa é enviar de

110
00:07:13,450 --> 00:07:16,653
‫volta esses dados como a resposta.

111
00:07:17,640 --> 00:07:20,180
‫Agora, esta resposta. O método end

112
00:07:20,180 --> 00:07:24,953
‫aqui realmente precisa enviar de volta uma string e não um objeto aqui.

113
00:07:25,890 --> 00:07:28,510
‫E, de fato, o que queremos enviar

114
00:07:28,510 --> 00:07:33,230
‫de volta são os dados diretamente, então os dados são uma string que transformamos

115
00:07:33,230 --> 00:07:37,410
‫em um objeto usando JSON. analisar, mas por

116
00:07:37,410 --> 00:07:41,730
‫enquanto, não precisaríamos fazer isso, mas eu fiz mesmo

117
00:07:41,730 --> 00:07:44,445
‫assim, porque precisaremos disso mais tarde,

118
00:07:44,445 --> 00:07:48,130
‫quando começarmos a construir nossos modelos HTML.

119
00:07:48,130 --> 00:07:50,710
‫Então é aí que vamos precisar

120
00:07:50,710 --> 00:07:52,890
‫desses dados em formato JavaScript.

121
00:07:52,890 --> 00:07:56,280
‫Por enquanto, queremos apenas enviar de volta a string

122
00:07:56,280 --> 00:07:57,453
‫real que recebemos.

123
00:07:59,146 --> 00:08:02,380
‫Agora, antes de podermos fazer isso, precisamos realmente

124
00:08:02,380 --> 00:08:04,220
‫especificar, então precisamos dizer

125
00:08:04,220 --> 00:08:09,220
‫ao navegador que estamos enviando JSON de volta, então, assim como antes, onde

126
00:08:10,110 --> 00:08:14,160
‫definimos o tipo de conteúdo como text / html, agora

127
00:08:14,160 --> 00:08:17,703
‫precisamos dizer a um navegador que estamos enviando JSON.

128
00:08:19,060 --> 00:08:24,060
‫Portanto, dizemos res. writeHead como antes, e

129
00:08:24,160 --> 00:08:27,260
‫agora estamos usando o código de status

130
00:08:27,260 --> 00:08:31,830
‫200, que significa okay, e então o objeto dos cabeçalhos.

131
00:08:31,830 --> 00:08:35,330
‫Neste caso, será apenas um, então

132
00:08:40,320 --> 00:08:45,320
‫Content-type, e quando enviarmos JSON, precisamos dizer application / json.

133
00:08:49,570 --> 00:08:53,240
‫Então, para HTML, é text / html, para

134
00:08:53,240 --> 00:08:56,323
‫JSON, é application / json,

135
00:08:58,330 --> 00:09:01,933
‫e vamos agora dar uma olhada nisso.

136
00:09:05,200 --> 00:09:08,183
‫Recarregue o servidor aqui muito rápido e,

137
00:09:12,600 --> 00:09:17,600
‫de fato, aqui temos nossa API enviando de volta todos os dados

138
00:09:17,690 --> 00:09:20,053
‫sobre nossos cinco produtos.

139
00:09:20,950 --> 00:09:25,800
‫Tão incrível, isso é ótimo, e é ótimo, mas na verdade

140
00:09:25,800 --> 00:09:27,970
‫não é perfeito, porque não

141
00:09:27,970 --> 00:09:31,463
‫é realmente 100% eficiente, e isso porque

142
00:09:32,546 --> 00:09:36,780
‫cada vez que alguém acessa esta rota / api,

143
00:09:36,780 --> 00:09:40,640
‫o arquivo terá que ser lido e enviado

144
00:09:40,640 --> 00:09:42,640
‫de volta .

145
00:09:42,640 --> 00:09:45,720
‫Em vez disso, o que podemos fazer é apenas ler

146
00:09:45,720 --> 00:09:49,110
‫o arquivo uma vez no início e, em seguida, cada vez

147
00:09:49,110 --> 00:09:51,600
‫que alguém acessar essa rota, simplesmente enviar de

148
00:09:51,600 --> 00:09:55,273
‫volta os dados sem ter que lê-los cada vez que um usuário solicitar.

149
00:09:56,410 --> 00:09:58,180
‫Isso faz sentido?

150
00:09:58,180 --> 00:10:01,423
‫Bem, o que vou fazer é colocar isso aqui.

151
00:10:03,550 --> 00:10:07,680
‫Ok, claro, eu não preciso de tudo isso, então isso

152
00:10:07,680 --> 00:10:10,530
‫não está aqui, e isso não

153
00:10:10,530 --> 00:10:12,720
‫está aqui, e na

154
00:10:12,720 --> 00:10:15,630
‫verdade, será um pouco diferente, porque agora

155
00:10:15,630 --> 00:10:19,570
‫usaremos a versão síncrona, e eu sei o que você

156
00:10:19,570 --> 00:10:22,280
‫está pensando, que é que a

157
00:10:22,280 --> 00:10:25,440
‫versão síncrona bloqueia a execução do código, certo?

158
00:10:25,440 --> 00:10:27,570
‫E embora isso seja verdade, neste

159
00:10:27,570 --> 00:10:29,580
‫caso, não é um

160
00:10:29,580 --> 00:10:32,040
‫problema, porque o código de nível

161
00:10:32,040 --> 00:10:36,240
‫superior, na verdade, só é executado uma vez logo no início.

162
00:10:36,240 --> 00:10:39,260
‫Só essa função de callback, por exemplo, aqui,

163
00:10:39,260 --> 00:10:43,440
‫a função createServer, então essa função aqui, é a que é

164
00:10:43,440 --> 00:10:46,160
‫executada toda vez que há uma

165
00:10:46,160 --> 00:10:50,260
‫nova solicitação, mas não um código que está por aqui.

166
00:10:50,260 --> 00:10:53,210
‫O código que está fora das funções

167
00:10:53,210 --> 00:10:57,500
‫de retorno de chamada, então o chamado código de nível superior,

168
00:10:57,500 --> 00:11:01,500
‫só é executado uma vez que iniciamos o programa, e

169
00:11:01,500 --> 00:11:04,660
‫nessa situação, não importa se ele bloqueia a

170
00:11:04,660 --> 00:11:07,350
‫execução, porque novamente, isso acontece apenas

171
00:11:07,350 --> 00:11:11,160
‫uma vez e apenas quando o código realmente inicia, certo?

172
00:11:11,160 --> 00:11:12,820
‫Faz sentido?

173
00:11:12,820 --> 00:11:16,060
‫E então vamos usar a versão de sincronização agora

174
00:11:16,060 --> 00:11:19,100
‫porque é realmente mais fácil lidar com

175
00:11:19,100 --> 00:11:23,060
‫esses dados, porque isso simplesmente coloca os dados em uma variável

176
00:11:23,060 --> 00:11:25,253
‫que não podemos usar imediatamente.

177
00:11:27,930 --> 00:11:32,180
‫Portanto, não se preocupe com o fato de que essa função está bloqueando

178
00:11:32,180 --> 00:11:34,800
‫porque, novamente, ela está no código de nível

179
00:11:34,800 --> 00:11:37,200
‫superior e só é executada uma vez.

180
00:11:37,200 --> 00:11:39,410
‫O segredo aqui é simplesmente

181
00:11:39,410 --> 00:11:42,530
‫saber qual código é executado apenas uma vez e

182
00:11:42,530 --> 00:11:45,890
‫apenas no início e qual código é executado continuamente

183
00:11:45,890 --> 00:11:49,663
‫e, portanto, é problemático ao bloquear o loop de eventos.

184
00:11:50,560 --> 00:11:52,240
‫E, claro, durante

185
00:11:52,240 --> 00:11:55,990
‫o resto deste grande, grande curso, você aprenderá isso.

186
00:11:55,990 --> 00:11:58,650
‫Portanto, você aprenderá tudo sobre o loop de eventos,

187
00:11:58,650 --> 00:12:01,990
‫e qual código está bloqueando e qual não está, e por quê,

188
00:12:01,990 --> 00:12:04,760
‫e esta é apenas a primeira vez que menciono isso,

189
00:12:04,760 --> 00:12:06,560
‫mas não será a última vez.

190
00:12:07,620 --> 00:12:11,173
‫Você vai me ouvir dizendo as mesmas coisas indefinidamente.

191
00:12:14,180 --> 00:12:18,550
‫Então, basta chamar esse dado e, claro, não precisamos

192
00:12:18,550 --> 00:12:20,423
‫de nada disso.

193
00:12:21,550 --> 00:12:24,253
‫Vamos apenas mover isso aqui para fora, e é isso.

194
00:12:29,040 --> 00:12:32,120
‫Portanto, antes que qualquer coisa aconteça, ele lerá os

195
00:12:32,120 --> 00:12:34,340
‫dados do arquivo JSON nos dados.

196
00:12:34,340 --> 00:12:38,740
‫Em seguida, ele também analisará isso em um objeto.

197
00:12:38,740 --> 00:12:43,043
‫Vamos chamá-lo de dataObject aqui e, portanto, o que faremos aqui

198
00:12:44,370 --> 00:12:48,060
‫é não ler esse arquivo toda vez que houver

199
00:12:48,060 --> 00:12:51,030
‫uma solicitação e, em vez disso, simplesmente

200
00:12:51,030 --> 00:12:55,960
‫enviar de volta os dados que temos agora em nosso código de

201
00:12:55,960 --> 00:12:57,283
‫nível superior.

202
00:13:04,010 --> 00:13:08,450
‫Portanto, esses dados vêm daqui porque, é claro, esse código na função

203
00:13:08,450 --> 00:13:11,060
‫de retorno de chamada tem acesso

204
00:13:11,060 --> 00:13:15,543
‫ao código de nível superior por causa da cadeia de escopo, certo?

205
00:13:17,510 --> 00:13:21,000
‫Cancelando, executando novamente e apenas para provar

206
00:13:21,000 --> 00:13:23,803
‫que ainda funciona, e funciona.

207
00:13:25,070 --> 00:13:28,560
‫Tão perfeito, e isso é melhor, é mais eficiente, oh, e

208
00:13:28,560 --> 00:13:30,023
‫por que fechei isso?

209
00:13:31,470 --> 00:13:34,863
‫Tudo bem, vamos abri-lo novamente muito rápido.

210
00:13:37,890 --> 00:13:38,793
‫Aqui vamos nos.

211
00:13:41,430 --> 00:13:45,890
‫Essa é nossa API muito simples, que agora permite ao usuário

212
00:13:45,890 --> 00:13:49,430
‫simplesmente solicitar todos os dados sobre nosso aplicativo com

213
00:13:49,430 --> 00:13:52,353
‫uma única chamada de API, basicamente.

214
00:13:53,810 --> 00:13:56,740
‫Então, adicionamos outra rota aqui, / api,

215
00:13:56,740 --> 00:13:59,340
‫então lemos o arquivo de forma

216
00:13:59,340 --> 00:14:02,930
‫síncrona, colocamos neste objeto e, em seguida, simplesmente enviamos

217
00:14:02,930 --> 00:14:06,010
‫de volta esse objeto como uma resposta, mas

218
00:14:06,010 --> 00:14:11,010
‫antes disso, especificamos que estamos enviando de volta o aplicativo / json, então

219
00:14:11,353 --> 00:14:15,200
‫que o navegador saiba exatamente o que esperar e, nos

220
00:14:15,200 --> 00:14:16,720
‫próximos vídeos, começaremos

221
00:14:16,720 --> 00:14:19,730
‫a construir a interface do usuário, então

222
00:14:19,730 --> 00:14:22,673
‫essa é a parte mais empolgante, certo?