1
00:00:01,609 --> 00:00:04,900
‫-: [Jonas Schmedtman] Então, já temos para os modelos HTML.

2
00:00:04,900 --> 00:00:07,790
‫Agora vem a parte mais difícil,

3
00:00:07,790 --> 00:00:11,643
‫que é realmente substituir os espaços reservados pelo conteúdo.

4
00:00:13,450 --> 00:00:16,610
‫Então, vamos começar com a visão geral.

5
00:00:16,610 --> 00:00:19,680
‫E vamos nos dar um tempo para respirar aqui

6
00:00:19,680 --> 00:00:21,543
‫e adicionar alguns comentários.

7
00:00:21,543 --> 00:00:23,350
‫(digitando em um

8
00:00:23,350 --> 00:00:27,943
‫teclado) Então, página de visão geral e alguns comentários aqui.

9
00:00:30,790 --> 00:00:35,790
‫Então a página do produto, e aqui temos a API.

10
00:00:39,079 --> 00:00:42,079
‫E aqui temos o Não encontrado.

11
00:00:45,650 --> 00:00:48,990
‫Tudo bem, isso já parece um pouco melhor.

12
00:00:48,990 --> 00:00:52,820
‫Então, novamente, estamos começando com a página de visão geral.

13
00:00:52,820 --> 00:00:54,100
‫E assim,

14
00:00:54,100 --> 00:00:58,580
‫a primeira etapa é realmente carregar a visão geral do modelo.

15
00:00:58,580 --> 00:01:01,770
‫Ok, então cada vez que houver uma nova

16
00:01:01,770 --> 00:01:05,340
‫solicitação para esta rota, então a rota ajustada ou /

17
00:01:05,340 --> 00:01:08,180
‫Visão geral, a primeira coisa que

18
00:01:08,180 --> 00:01:11,240
‫faremos é ler a visão geral do modelo.

19
00:01:11,240 --> 00:01:14,020
‫Mas, assim como antes, podemos realmente

20
00:01:14,020 --> 00:01:16,860
‫fazer isso fora desse retorno de chamada, certo?

21
00:01:16,860 --> 00:01:20,000
‫Por causa desses modelos, eles sempre serão os mesmos.

22
00:01:20,000 --> 00:01:22,050
‫Portanto, você pode realmente lê-los

23
00:01:22,050 --> 00:01:25,280
‫na memória logo no início, quando iniciarmos o aplicativo.

24
00:01:25,280 --> 00:01:28,270
‫E então, quando necessário, simplesmente vamos

25
00:01:28,270 --> 00:01:31,460
‫em frente e recolocamos o conteúdo ali.

26
00:01:31,460 --> 00:01:34,156
‫Ok, então assim como fizemos com os dados aqui,

27
00:01:34,156 --> 00:01:36,720
‫também não há necessidade de ler os dados

28
00:01:36,720 --> 00:01:38,528
‫toda vez que houver

29
00:01:38,528 --> 00:01:41,403
‫uma solicitação e o mesmo acontece com os modelos.

30
00:01:42,240 --> 00:01:43,120
‫OK?

31
00:01:43,120 --> 00:01:44,510
‫Na verdade, vou

32
00:01:44,510 --> 00:01:47,090
‫avançar e fazer isso para todos os três

33
00:01:47,090 --> 00:01:49,260
‫modelos aqui, então deixamos isso de lado.

34
00:01:49,260 --> 00:01:54,260
‫Então, vou prosseguir, e apenas para obter este, chame-o de temp

35
00:01:55,610 --> 00:01:57,040
‫para visão

36
00:01:59,000 --> 00:02:02,490
‫geral do modelo e nome do DAR

37
00:02:03,670 --> 00:02:05,743
‫e aqui temos os modelos.

38
00:02:09,370 --> 00:02:13,213
‫E então / template-overview.

39
00:02:15,460 --> 00:02:18,390
‫Ok, então duplique isso aqui duas vezes

40
00:02:19,510 --> 00:02:20,650
‫para que

41
00:02:22,320 --> 00:02:24,683
‫tenhamos um para o cartão,

42
00:02:26,980 --> 00:02:29,983
‫então um cartão-modelo e um para o produto-modelo.

43
00:02:35,460 --> 00:02:37,780
‫Produto, certo.

44
00:02:37,780 --> 00:02:39,870
‫E, novamente, tenha em mente que podemos

45
00:02:39,870 --> 00:02:42,380
‫fazer com a versão sincronizada porque estamos no

46
00:02:42,380 --> 00:02:43,950
‫código de nível superior.

47
00:02:43,950 --> 00:02:47,400
‫Executamos apenas uma vez, logo no início,

48
00:02:47,400 --> 00:02:50,080
‫quando carregamos esses aplicativos.

49
00:02:50,080 --> 00:02:53,156
‫Portanto, não poderíamos fazer isso dentro da função

50
00:02:53,156 --> 00:02:55,970
‫de retorno de chamada createServer, certo?

51
00:02:55,970 --> 00:02:59,350
‫Porque este é chamado sempre que houver um pedido.

52
00:02:59,350 --> 00:03:03,047
‫E se tivermos um milhão de solicitações ao mesmo tempo,

53
00:03:03,047 --> 00:03:06,330
‫poderemos bloquear o código um milhão de vezes,

54
00:03:06,330 --> 00:03:08,040
‫uma para cada solicitação.

55
00:03:08,040 --> 00:03:11,450
‫E isso é algo que não queremos.

56
00:03:11,450 --> 00:03:14,580
‫Portanto, a visão geral, vamos em frente e,

57
00:03:14,580 --> 00:03:16,740
‫antes de tudo, apenas

58
00:03:16,740 --> 00:03:21,010
‫para testá-la, envie esta visão geral temporária como a resposta.

59
00:03:21,010 --> 00:03:22,120
‫Agora, antes de

60
00:03:22,120 --> 00:03:26,853
‫fazermos isso, precisamos ir em frente e definir este tipo de conteúdo como HTML.

61
00:03:27,740 --> 00:03:30,453
‫Então, deixe-me realmente copiar este pedaço de código aqui.

62
00:03:32,400 --> 00:03:34,120
‫Portanto, o código de status é

63
00:03:34,120 --> 00:03:37,063
‫200 e o tipo de conteúdo deve ser text / html.

64
00:03:42,250 --> 00:03:44,040
‫Portanto, reinicie o servidor aqui

65
00:03:45,010 --> 00:03:47,943
‫e vamos agora dar uma olhada e, de

66
00:03:49,070 --> 00:03:50,670
‫fato, vamos lá.

67
00:03:50,670 --> 00:03:52,650
‫Então aqui está

68
00:03:53,710 --> 00:03:56,700
‫nossa página estilizada que já conhecemos desta.

69
00:03:56,700 --> 00:03:58,630
‫Agora, o que está

70
00:03:58,630 --> 00:04:01,031
‫faltando aqui são essas linhas, e isso

71
00:04:01,031 --> 00:04:03,770
‫porque ainda temos nosso marcador de posição.

72
00:04:03,770 --> 00:04:08,110
‫E, portanto, a próxima tarefa agora é substituir esse espaço reservado pelos

73
00:04:08,110 --> 00:04:09,293
‫cartões reais.

74
00:04:10,830 --> 00:04:12,560
‫E como faremos isso?

75
00:04:12,560 --> 00:04:15,640
‫Bem, lembre-se de que no objeto de dados,

76
00:04:15,640 --> 00:04:19,010
‫temos um array de todos os objetos que estão

77
00:04:19,010 --> 00:04:20,573
‫nos dados. JSON.

78
00:04:21,620 --> 00:04:26,560
‫Então, todos esses cinco objetos, todos em objetos JavaScript, porque

79
00:04:26,560 --> 00:04:31,000
‫já analisamos esses dados com apenas uma string.

80
00:04:31,000 --> 00:04:31,833
‫OK?

81
00:04:31,833 --> 00:04:34,150
‫Portanto, o objeto de dados é novamente uma

82
00:04:34,150 --> 00:04:36,450
‫matriz de, neste ponto, cinco objetos.

83
00:04:36,450 --> 00:04:37,790
‫Então, o

84
00:04:37,790 --> 00:04:40,192
‫que temos que fazer é basicamente

85
00:04:40,192 --> 00:04:42,977
‫percorrer esse array e, para cada um

86
00:04:42,977 --> 00:04:45,770
‫deles, substituir os espaços reservados no modelo

87
00:04:45,770 --> 00:04:48,500
‫pelos dados reais do produto atual, certo?

88
00:04:48,500 --> 00:04:49,333
‫Faz sentido?

89
00:04:50,210 --> 00:04:53,533
‫Então, vamos colocar isso no código.

90
00:04:54,740 --> 00:04:59,740
‫Então, objeto de dados, vamos percorrê-lo com um mapa

91
00:05:00,160 --> 00:05:02,930
‫porque queremos retornar algo e

92
00:05:02,930 --> 00:05:06,243
‫esse algo, vamos salvar em um

93
00:05:08,060 --> 00:05:11,637
‫novo array, então vamos chamá-lo de cardsHtml,

94
00:05:16,210 --> 00:05:17,140
‫certo?

95
00:05:17,140 --> 00:05:22,140
‫Tenho certeza de que você está familiarizado com o método do mapa, certo?

96
00:05:22,570 --> 00:05:26,147
‫Então, o que o mapa faz é aceitar uma função

97
00:05:26,147 --> 00:05:30,290
‫de retorno de chamada e esta função de retorno de chamada

98
00:05:30,290 --> 00:05:34,500
‫obtém como argumento o elemento atual, então o elemento do loop

99
00:05:34,500 --> 00:05:36,423
‫atual e tudo o

100
00:05:36,423 --> 00:05:39,880
‫que retornarmos aqui serão salvos em um array, ok?

101
00:05:39,880 --> 00:05:44,240
‫Então, digamos que estamos fazendo um loop em um array com

102
00:05:44,240 --> 00:05:45,434
‫cinco elementos,

103
00:05:45,434 --> 00:05:48,074
‫que é o caso aqui, e

104
00:05:48,074 --> 00:05:51,851
‫para cada elemento, retornaremos algo, e esse algo será

105
00:05:51,851 --> 00:05:55,990
‫então colocado na mesma posição, mas neste novo array cardsHtml.

106
00:05:55,990 --> 00:05:59,970
‫Então, o que faremos em cada uma dessas iterações?

107
00:05:59,970 --> 00:06:03,048
‫Bem, queremos substituir os marcadores de posição, certo?

108
00:06:03,048 --> 00:06:05,200
‫Na verdade, vou prosseguir e

109
00:06:05,200 --> 00:06:06,843
‫criar uma função

110
00:06:06,843 --> 00:06:09,787
‫para isso, que será chamada de replaceTemplate.

111
00:06:13,881 --> 00:06:14,844
‫OK?

112
00:06:14,844 --> 00:06:18,761
‫E o replaceTemplate aceitará o HTML do cartão.

113
00:06:19,820 --> 00:06:22,203
‫Então, basicamente, o tempCard.

114
00:06:24,890 --> 00:06:28,713
‫E vai levar no objeto atual, então o elemento.

115
00:06:29,660 --> 00:06:30,493
‫OK?

116
00:06:30,493 --> 00:06:33,703
‫Portanto, este elemento é o que contém os dados, certo?

117
00:06:34,900 --> 00:06:38,511
‫Então, novamente, cada um deles é agora um

118
00:06:38,511 --> 00:06:42,423
‫objeto que contém os dados em cada uma dessas propriedades.

119
00:06:44,070 --> 00:06:44,903
‫OK?

120
00:06:44,903 --> 00:06:49,430
‫E não se preocupe, se não fizer 100%

121
00:06:49,430 --> 00:06:54,130
‫sentido agora, fará assim que criarmos a função replaceTemplate, certo?

122
00:06:54,130 --> 00:06:56,993
‫Então, vamos agora fazer isso aqui também.

123
00:06:59,610 --> 00:07:03,100
‫Portanto, replaceTemplate é uma função que aceita

124
00:07:03,100 --> 00:07:07,420
‫um modelo, apenas vou chamá-la de temp aqui e,

125
00:07:07,420 --> 00:07:09,673
‫claro, de produto.

126
00:07:12,690 --> 00:07:13,523
‫Tudo bem.

127
00:07:15,780 --> 00:07:18,520
‫Então vamos criar uma variável

128
00:07:19,500 --> 00:07:21,350
‫chamada output

129
00:07:22,510 --> 00:07:27,510
‫e essa será o template. substitua em nosso espaço reservado.

130
00:07:29,620 --> 00:07:32,810
‫E vamos colocar aqui todos os marcadores

131
00:07:32,810 --> 00:07:36,343
‫de posição que temos, começando com PRODUCTNAME, certo?

132
00:07:39,130 --> 00:07:43,963
‫E então aquele será substituído pelo produto. NOME DO PRODUTO.

133
00:07:45,230 --> 00:07:48,300
‫Portanto, produto, que é o argumento que passamos

134
00:07:48,300 --> 00:07:50,997
‫para a função,. PRODUCTNAME porque,

135
00:07:52,300 --> 00:07:54,890
‫bem, esse é o nome do campo

136
00:07:54,890 --> 00:07:57,350
‫onde está o nome do produto.

137
00:07:57,350 --> 00:07:58,250
‫Tudo bem?

138
00:07:58,250 --> 00:08:02,160
‫Então, vá em frente e copie esse, e tudo bem.

139
00:08:02,160 --> 00:08:05,014
‫Agora, um pequeno truque que temos

140
00:08:05,014 --> 00:08:08,150
‫que usar aqui é realmente não usar as

141
00:08:08,150 --> 00:08:11,730
‫aspas, mas, em vez disso, usar uma expressão regular.

142
00:08:11,730 --> 00:08:13,380
‫E isso porque

143
00:08:13,380 --> 00:08:16,517
‫pode haver várias instâncias desse espaço reservado

144
00:08:16,517 --> 00:08:21,517
‫e, portanto, o truque é envolvê-lo em uma expressão regular e

145
00:08:22,660 --> 00:08:24,940
‫usar o sinalizador-g sobre ele.

146
00:08:24,940 --> 00:08:27,010
‫O que significa global

147
00:08:27,010 --> 00:08:31,920
‫e isso fará com que todos esses marcadores sejam substituídos e

148
00:08:31,920 --> 00:08:34,530
‫não apenas o primeiro que ocorrer.

149
00:08:34,530 --> 00:08:36,910
‫Portanto, este substitui o nome do

150
00:08:36,910 --> 00:08:39,663
‫produto, agora vamos prosseguir e substituir todos os outros.

151
00:08:41,050 --> 00:08:42,473
‫Portanto,

152
00:08:44,250 --> 00:08:48,140
‫saída = saída. substitua, e agora iremos

153
00:08:48,140 --> 00:08:49,900
‫em frente e

154
00:08:49,900 --> 00:08:54,900
‫copiaremos isso para tornar minha vida um pouco mais fácil.

155
00:08:56,360 --> 00:08:59,990
‫Então, imagem, e isso é chamado de imagem

156
00:09:01,538 --> 00:09:04,863
‫e não em maiúsculas, é assim.

157
00:09:06,000 --> 00:09:07,020
‫OK?

158
00:09:07,020 --> 00:09:09,070
‫Agora, aqui em cima, criei

159
00:09:09,070 --> 00:09:13,520
‫essa variável porque queria substituir esse nome de produto em temp.

160
00:09:13,520 --> 00:09:16,785
‫Portanto, no argumento, e não é uma boa

161
00:09:16,785 --> 00:09:19,760
‫prática manipular diretamente os argumentos que

162
00:09:19,760 --> 00:09:21,760
‫passamos para uma função.

163
00:09:21,760 --> 00:09:24,180
‫E então criei uma nova

164
00:09:24,180 --> 00:09:25,750
‫variável e de

165
00:09:25,750 --> 00:09:29,100
‫agora em diante, irei manipular aquela primeira, ok?

166
00:09:29,100 --> 00:09:31,820
‫E é por isso que não é um const, mas sim um let.

167
00:09:31,820 --> 00:09:35,424
‫Então, um let, podemos sofrer mutação depois de ser criado, certo?

168
00:09:35,424 --> 00:09:37,874
‫Agora, deixe-me ir em frente, copiar alguns deles.

169
00:09:40,720 --> 00:09:44,930
‫Então, preço, e é chamado de preço aqui também,

170
00:09:44,930 --> 00:09:46,653
‫então temos

171
00:09:50,790 --> 00:09:52,613
‫de, então temos nutrientes.

172
00:09:58,500 --> 00:10:00,290
‫Claro que eu poderia copiar tudo

173
00:10:00,290 --> 00:10:02,853
‫isso, mas não vou pular para frente e para trás aqui.

174
00:10:06,930 --> 00:10:08,033
‫Portanto, quantidade, descrição

175
00:10:13,674 --> 00:10:14,703
‫e

176
00:10:17,200 --> 00:10:19,990
‫provavelmente irei cometer algum erro aqui, escrevendo

177
00:10:19,990 --> 00:10:22,370
‫tudo isso manualmente, mas em

178
00:10:23,410 --> 00:10:26,920
‫um produto pequeno, isso não é grande coisa.

179
00:10:26,920 --> 00:10:29,470
‫Na verdade, este nós não precisamos, ou

180
00:10:29,470 --> 00:10:30,950
‫na verdade precisamos

181
00:10:30,950 --> 00:10:33,120
‫porque para o orgânico, então o

182
00:10:33,120 --> 00:10:34,830
‫orgânico está faltando, mas

183
00:10:34,830 --> 00:10:37,870
‫lembre-se que o orgânico era um pouco especial.

184
00:10:37,870 --> 00:10:41,743
‫Então, neste caso, se o produto não é orgânico,

185
00:10:42,900 --> 00:10:44,890
‫então produto. orgânico, se for

186
00:10:44,890 --> 00:10:45,883
‫falso,

187
00:10:47,450 --> 00:10:50,510
‫então lembre-se, isso é na verdade um negrito.

188
00:10:50,510 --> 00:10:53,130
‫Então, por exemplo, temos verdadeiro orgânico aqui,

189
00:10:53,130 --> 00:10:55,180
‫mas temos falso aqui.

190
00:10:55,180 --> 00:10:56,013
‫OK?

191
00:10:56,013 --> 00:10:59,470
‫E então, se for falso, bem, nesse caso,

192
00:10:59,470 --> 00:11:03,273
‫queremos substituir o NOT. ORGÂNICO.

193
00:11:08,340 --> 00:11:13,340
‫Portanto, o NÃO. Espaço reservado ORGÂNICO com simplesmente não orgânico.

194
00:11:17,630 --> 00:11:20,160
‫Tão inorgânico porque este é o nome

195
00:11:20,160 --> 00:11:22,313
‫da classe que mostrei antes.

196
00:11:24,070 --> 00:11:25,730
‫Então,

197
00:11:25,730 --> 00:11:28,153
‫é esse.

198
00:11:29,500 --> 00:11:30,520
‫OK?

199
00:11:30,520 --> 00:11:35,100
‫Então ele será substituído aqui, ok?

200
00:11:35,100 --> 00:11:37,350
‫E então novamente, caso não

201
00:11:37,350 --> 00:11:39,797
‫seja orgânico, bem, então o nome da

202
00:11:39,797 --> 00:11:44,043
‫classe NOT_ORGANIC estará aqui e todo o lote não será deslocado.

203
00:11:46,010 --> 00:11:47,623
‫Tudo bem, faz sentido?

204
00:11:48,490 --> 00:11:49,760
‫Então, vamos

205
00:11:49,760 --> 00:11:52,410
‫ver se w-- ah, desculpe, o

206
00:11:52,410 --> 00:11:53,410
‫código

207
00:11:53,410 --> 00:11:55,143
‫real está abaixo dele.

208
00:11:56,240 --> 00:11:59,890
‫Então, vamos tentar dar mais sentido a isso.

209
00:11:59,890 --> 00:12:03,910
‫Então, novamente, nós fazemos um loop sobre este objeto de dados

210
00:12:03,910 --> 00:12:06,840
‫já aqui que contém todos os produtos

211
00:12:06,840 --> 00:12:10,095
‫e em cada iteração, iremos substituir os marcadores

212
00:12:10,095 --> 00:12:13,890
‫de posição no cartão de modelo com o produto atual

213
00:12:13,890 --> 00:12:16,236
‫que é o elemento, certo?

214
00:12:16,236 --> 00:12:20,580
‫E esta função de seta irá então implicitamente retorná-la aqui.

215
00:12:20,580 --> 00:12:24,150
‫Então é o mesmo que voltar aqui, ok?

216
00:12:24,150 --> 00:12:26,130
‫Mas não é realmente

217
00:12:26,130 --> 00:12:29,341
‫necessário porque em uma função de seta, se você

218
00:12:29,341 --> 00:12:32,934
‫não tiver as chaves, esse valor aqui é automaticamente retornado.

219
00:12:32,934 --> 00:12:35,782
‫Ok, caso você não saiba

220
00:12:35,782 --> 00:12:40,782
‫disso, acabei de lembrar que esquecemos de retornar

221
00:12:41,210 --> 00:12:43,383
‫a saída daqui.

222
00:12:45,360 --> 00:12:46,193
‫OK?

223
00:12:46,193 --> 00:12:49,870
‫Então, é claro, inserimos o modelo e o produto, mas

224
00:12:49,870 --> 00:12:53,533
‫então, é claro, temos que gerar o HTML final.

225
00:12:54,700 --> 00:12:55,533
‫Direito?

226
00:12:55,533 --> 00:12:58,640
‫E então isso é conectado aqui e,

227
00:12:58,640 --> 00:13:01,420
‫finalmente, tudo isso aqui substituirá

228
00:13:01,420 --> 00:13:05,850
‫um array, com os cinco HTMLs finais, cada um para

229
00:13:05,850 --> 00:13:08,090
‫um dos cinco cartões.

230
00:13:08,090 --> 00:13:12,580
‫Então, cada um para um dos cinco produtos, certo?

231
00:13:12,580 --> 00:13:16,380
‫Agora, vamos prosseguir e registrar isso no

232
00:13:16,380 --> 00:13:21,010
‫console antes de colocá-lo na página de visão geral.

233
00:13:21,010 --> 00:13:25,433
‫Então cardsHtml só para ter certeza de que tudo funciona aqui.

234
00:13:28,090 --> 00:13:28,923
‫OK?

235
00:13:30,190 --> 00:13:32,853
‫Portanto, precisamos recarregar o servidor, não se esqueça disso.

236
00:13:35,810 --> 00:13:37,370
‫Tudo isso funciona da mesma

237
00:13:37,370 --> 00:13:39,940
‫forma, mas vamos agora dar uma olhada no console.

238
00:13:39,940 --> 00:13:43,710
‫E estou começando a ver coisas boas aqui.

239
00:13:43,710 --> 00:13:45,500
‫Portanto, temos um

240
00:13:45,500 --> 00:13:48,350
‫array e, na verdade, substituímos o material.

241
00:13:48,350 --> 00:13:50,170
‫Portanto, temos alguns abacates aqui.

242
00:13:50,170 --> 00:13:52,720
‫Diz aqui FreshAvocados.

243
00:13:52,720 --> 00:13:55,773
‫Tem quatro abacates por caixa, o

244
00:13:57,020 --> 00:13:59,940
‫preço, e então sim, na verdade

245
00:13:59,940 --> 00:14:02,500
‫tudo parece muito bom.

246
00:14:02,500 --> 00:14:03,840
‫E, de fato, também é um array.

247
00:14:03,840 --> 00:14:05,860
‫Temos essa primeira figura,

248
00:14:05,860 --> 00:14:09,140
‫depois uma vírgula e aqui começa o

249
00:14:09,140 --> 00:14:12,380
‫próximo elemento, então a próxima figura, certo?

250
00:14:12,380 --> 00:14:15,920
‫Portanto, temos agora um array de todos esses elementos, mas

251
00:14:15,920 --> 00:14:18,880
‫o que queremos na verdade não é

252
00:14:18,880 --> 00:14:22,273
‫um array, mas uma grande string contendo todo esse HTML.

253
00:14:24,250 --> 00:14:27,020
‫Então, isso é realmente muito simples de conseguir.

254
00:14:27,020 --> 00:14:30,910
‫Tudo o que temos que fazer é no final deste array,

255
00:14:30,910 --> 00:14:33,290
‫então nos lembramos de que tudo isso

256
00:14:33,290 --> 00:14:36,283
‫retorna este array que vemos aqui embaixo, e então

257
00:14:37,550 --> 00:14:39,600
‫no final tudo o que

258
00:14:39,600 --> 00:14:42,520
‫fazemos é unir por uma string vazia, e

259
00:14:42,520 --> 00:14:46,080
‫então isso vai unir todos desses elementos em uma string.

260
00:14:46,080 --> 00:14:50,310
‫E agora cardsHtml é realmente uma string.

261
00:14:50,310 --> 00:14:51,143
‫OK?

262
00:14:51,143 --> 00:14:54,070
‫E agora temos nossos cartões prontos e

263
00:14:54,070 --> 00:14:56,790
‫a última peça do quebra-cabeça

264
00:14:56,790 --> 00:15:00,740
‫é ir em frente e substituir esse espaço reservado.

265
00:15:00,740 --> 00:15:04,110
‫Então, isso aqui, na verdade copiando agora,

266
00:15:04,110 --> 00:15:06,401
‫agora substituindo este espaço

267
00:15:06,401 --> 00:15:09,413
‫reservado pelo HTML que acabamos de criar.

268
00:15:11,050 --> 00:15:12,830
‫Então, vamos chamá-lo de saída aqui

269
00:15:13,760 --> 00:15:15,150
‫e tudo o que

270
00:15:15,150 --> 00:15:16,343
‫temos a fazer

271
00:15:18,060 --> 00:15:22,423
‫é tempOverview com apenas uma string que contém o HTML de visão geral, certo? substitua e substitua por

272
00:15:24,156 --> 00:15:25,553
‫cardsHtml.

273
00:15:27,330 --> 00:15:30,253
‫Tudo bem?

274
00:15:32,490 --> 00:15:33,750
‫É isso.

275
00:15:33,750 --> 00:15:34,583
‫Agora, tudo o

276
00:15:34,583 --> 00:15:38,620
‫que precisamos fazer é realmente responder com a saída e não com o que tínhamos antes.

277
00:15:38,620 --> 00:15:41,933
‫OK fixe.

278
00:15:43,380 --> 00:15:44,730
‫Pareceu um pouco complexo,

279
00:15:44,730 --> 00:15:46,760
‫mas se você pensar bem, espero que

280
00:15:46,760 --> 00:15:48,430
‫faça todo o sentido para você.

281
00:15:48,430 --> 00:15:51,563
‫Então, vamos testar isso agora e espero

282
00:15:52,920 --> 00:15:55,200
‫não ter cometido erros

283
00:15:56,040 --> 00:15:58,395
‫e algo deu errado, certo.

284
00:15:58,395 --> 00:16:02,290
‫Então o que é isso?

285
00:16:02,290 --> 00:16:03,670
‫Ok, acabei de digitar substituir.

286
00:16:03,670 --> 00:16:07,000
‫Esse é um dos erros mais comuns que recebo o tempo todo.

287
00:16:07,000 --> 00:16:10,863
‫Como um pequeno erro de grafia.

288
00:16:12,310 --> 00:16:15,003
‫Recarregue e bam, vamos lá.

289
00:16:16,060 --> 00:16:18,740
‫Portanto, aqui estão nossas cinco linhas.

290
00:16:18,740 --> 00:16:22,670
‫Tão linda, linda, linda.

291
00:16:22,670 --> 00:16:24,902
‫Agora não parece muito com

292
00:16:24,902 --> 00:16:29,902
‫o original porque o que está faltando é assim, esse orgânico aqui.

293
00:16:30,050 --> 00:16:35,050
‫OK?

294
00:16:36,190 --> 00:16:37,023
‫Então, vamos ver o que há de errado aí.

295
00:16:37,023 --> 00:16:40,070
‫Também por algum motivo, não vejo

296
00:16:40,070 --> 00:16:44,570
‫a quantidade aqui, mas apenas se não for orgânico.

297
00:16:44,570 --> 00:16:48,300
‫Bem, isso é estranho, então vamos tentar investigar o que está

298
00:16:48,300 --> 00:16:49,371
‫acontecendo aqui.

299
00:16:49,371 --> 00:16:53,420
‫Portanto, o erro provavelmente está em algum lugar

300
00:16:53,420 --> 00:16:55,620
‫aqui nesta função replaceTemplate.

301
00:16:55,620 --> 00:16:58,820
‫Mas, na verdade, tudo parece correto aqui.

302
00:16:58,820 --> 00:17:02,210
‫Então também aqui neste substituto não orgânico.

303
00:17:02,210 --> 00:17:06,293
‫Então, vamos dar uma olhada em nosso cartão de modelo

304
00:17:07,220 --> 00:17:09,890
‫e, então, vejo aqui que quando

305
00:17:11,410 --> 00:17:12,243
‫há

306
00:17:13,890 --> 00:17:17,830
‫esse NOT_ORGANIC, bem, na verdade, essa caixa inteira aqui,

307
00:17:17,830 --> 00:17:20,550
‫então também esse H6 não estará

308
00:17:20,550 --> 00:17:21,690
‫mais visível.

309
00:17:25,330 --> 00:17:26,783
‫Portanto, algo parece

310
00:17:27,910 --> 00:17:30,980
‫errado aqui, vamos dar uma olhada no original

311
00:17:30,980 --> 00:17:33,080
‫apenas para inspecionar o HTML aqui.

312
00:17:34,870 --> 00:17:37,183
‫O detalhe do cartão

313
00:17:39,730 --> 00:17:43,330
‫é este e nós, sim, temos três detalhes

314
00:17:43,330 --> 00:17:45,150
‫do cartão aqui

315
00:17:45,150 --> 00:17:48,630
‫enquanto no modelo, temos apenas um, certo?

316
00:17:48,630 --> 00:17:51,773
‫Então, vamos copiar este.

317
00:17:52,670 --> 00:17:56,270
‫Assim, nos detalhes, você pode realmente copiar um elemento

318
00:17:56,270 --> 00:17:59,160
‫e ele irá, bem assim, copiar o

319
00:18:00,410 --> 00:18:01,260
‫elemento inteiro.

320
00:18:03,300 --> 00:18:06,283
‫Então é assim que deveria ser.

321
00:18:07,400 --> 00:18:11,053
‫E aqui deve dizer orgânico e não quantidade

322
00:18:13,220 --> 00:18:14,840
‫por caixa, ok?

323
00:18:14,840 --> 00:18:18,193
‫Esse é provavelmente o próximo.

324
00:18:18,193 --> 00:18:20,263
‫Então, vamos consertar

325
00:18:27,780 --> 00:18:29,193
‫isso rapidamente.

326
00:18:30,730 --> 00:18:32,290
‫E aqui,

327
00:18:32,290 --> 00:18:35,760
‫é claro que não queremos isso, e

328
00:18:35,760 --> 00:18:38,920
‫sim, parece melhor, feche-o, reinicie o

329
00:18:38,920 --> 00:18:41,763
‫servidor e vamos verificar novamente.

330
00:18:43,850 --> 00:18:48,143
‫E agora, bam, aqui vamos nós.

331
00:18:49,550 --> 00:18:51,660
‫Agora está funcionando e, de fato, funciona exatamente da mesma maneira.

332
00:18:51,660 --> 00:18:56,660
‫Lindo.

333
00:18:57,150 --> 00:18:58,370
‫Então, isso é muito bom.

334
00:18:58,370 --> 00:19:01,070
‫Vamos deletar, por exemplo,

335
00:19:01,070 --> 00:19:06,070
‫os abacates só para ver o que acontece.

336
00:19:06,990 --> 00:19:08,680
‫Vou apenas fazer

337
00:19:08,680 --> 00:19:13,680
‫o controle, X para cortá-lo, recarregá-lo aqui, e não está

338
00:19:13,900 --> 00:19:17,410
‫mudando e é claro porque lembre-se de

339
00:19:17,410 --> 00:19:20,040
‫que isso, esses dados só

340
00:19:20,890 --> 00:19:21,723
‫são

341
00:19:22,770 --> 00:19:24,420
‫lidos no início

342
00:19:24,420 --> 00:19:26,990
‫quando iniciamos o aplicativo, ok?

343
00:19:26,990 --> 00:19:30,490
‫Portanto, para que isso tenha efeito, precisamos efetivamente

344
00:19:30,490 --> 00:19:32,250
‫reiniciar o aplicativo.

345
00:19:32,250 --> 00:19:36,635
‫Ok, então não é grande coisa.

346
00:19:36,635 --> 00:19:38,853
‫E agora acabou, ok?

347
00:19:40,760 --> 00:19:43,200
‫Porque não está mais no

348
00:19:43,200 --> 00:19:45,900
‫arquivo JSON que é lido no

349
00:19:45,900 --> 00:19:47,920
‫momento em que iniciamos

350
00:19:47,920 --> 00:19:49,630
‫o aplicativo, certo?

351
00:19:52,050 --> 00:19:52,883
‫Vamos colocar

352
00:19:52,883 --> 00:19:57,563
‫de volta aqui, salvar, reiniciar, abrir esse cara, recarregar, e aqui está de volta.

353
00:19:58,450 --> 00:20:02,630
‫Portanto, agora ele está realmente funcionando de forma dinâmica, lendo

354
00:20:02,630 --> 00:20:05,580
‫todos esses dados diretamente do arquivo JSON.

355
00:20:05,580 --> 00:20:09,660
‫Então este aqui funciona, vamos verificar os links também

356
00:20:09,660 --> 00:20:12,860
‫lá embaixo no canto esquerdo inferior.

357
00:20:12,860 --> 00:20:15,810
‫Você vê que o ID muda de zero,

358
00:20:15,810 --> 00:20:18,600
‫um para e assim por diante, mas se

359
00:20:18,600 --> 00:20:20,750
‫eu clicar aqui, bem, quando tivermos

360
00:20:20,750 --> 00:20:22,320
‫Página não encontrada.

361
00:20:22,320 --> 00:20:25,310
‫E isso porque nossa rota ainda não está pronta para isso.

362
00:20:25,310 --> 00:20:29,170
‫OK?

363
00:20:29,170 --> 00:20:30,010
‫E então

364
00:20:30,010 --> 00:20:33,320
‫vamos realmente fazer isso no próximo vídeo e implementar a página de

365
00:20:33,320 --> 00:20:35,780
‫detalhes do produto para cada um desses produtos.

366
00:20:35,780 --> 00:20:37,200
‫Então, não espere e vamos seguir em frente agora.