1
00:00:01,200 --> 00:00:03,310
‫Instrutor: Agora vamos fazer a primeira

2
00:00:03,310 --> 00:00:06,860
‫parte da construção do site de farm de nós

3
00:00:06,860 --> 00:00:08,830
‫dinâmicos apenas criando os

4
00:00:08,830 --> 00:00:11,083
‫modelos que conterão os dados reais.

5
00:00:12,890 --> 00:00:15,590
‫E lembre-se que nosso objetivo é construir

6
00:00:15,590 --> 00:00:19,260
‫esse tipo de site dinâmico onde temos uma visão geral onde

7
00:00:19,260 --> 00:00:21,130
‫temos todos os produtos, e

8
00:00:21,130 --> 00:00:24,060
‫então cada produto tem sua página de detalhes

9
00:00:24,060 --> 00:00:25,700
‫como eu mostrei antes.

10
00:00:25,700 --> 00:00:29,780
‫E esses dados aqui são, obviamente, lidos do arquivo json,

11
00:00:29,780 --> 00:00:32,660
‫portanto, se alterarmos o arquivo json, por

12
00:00:32,660 --> 00:00:36,140
‫exemplo, excluindo um desses produtos e recarregando esta página,

13
00:00:36,140 --> 00:00:38,920
‫esse produto deve ser removido daqui.

14
00:00:38,920 --> 00:00:42,340
‫Ou se mudamos alguns desses dados aqui ou o nome,

15
00:00:42,340 --> 00:00:45,600
‫bem, então, isso deve ser atualizado aqui no site.

16
00:00:45,600 --> 00:00:47,940
‫Novamente, porque é um site dinâmico

17
00:00:47,940 --> 00:00:51,073
‫construído a partir dos dados que estão no arquivo json.

18
00:00:51,930 --> 00:00:52,830
‫Como mencionei,

19
00:00:52,830 --> 00:00:55,540
‫a primeira etapa é realmente construir esses modelos,

20
00:00:55,540 --> 00:00:57,930
‫um para esta página de visão geral

21
00:00:57,930 --> 00:01:00,960
‫e outro para a página de detalhes do produto.

22
00:01:00,960 --> 00:01:03,773
‫E vamos começar com a página de detalhes e

23
00:01:04,990 --> 00:01:06,540
‫vou construir esses modelos

24
00:01:06,540 --> 00:01:09,250
‫com base nessas páginas da web de dados que

25
00:01:09,250 --> 00:01:11,220
‫temos aqui na pasta de modelos.

26
00:01:11,220 --> 00:01:12,850
‫Então, vamos dar uma olhada neles.

27
00:01:12,850 --> 00:01:16,030
‫Portanto, temos a visão geral e o produto e, novamente,

28
00:01:16,030 --> 00:01:19,610
‫vamos começar com o produto. html.

29
00:01:19,610 --> 00:01:22,950
‫Temos aqui o nome do produto e esta imagem

30
00:01:22,950 --> 00:01:26,923
‫aqui, que na verdade é um emoji, mas isso não importa.

31
00:01:27,880 --> 00:01:30,210
‫Então, em vez de solicitar as imagens

32
00:01:30,210 --> 00:01:33,000
‫reais para todos esses produtos diferentes, optei por

33
00:01:33,000 --> 00:01:34,590
‫apenas ir com emojis.

34
00:01:34,590 --> 00:01:36,210
‫Isso é muito mais fácil.

35
00:01:36,210 --> 00:01:37,860
‫O mesmo vale para o estilo.

36
00:01:37,860 --> 00:01:42,040
‫Portanto, tenho todo o estilo CSS embutido nas páginas html para

37
00:01:42,040 --> 00:01:44,470
‫que não tenhamos que fazer

38
00:01:44,470 --> 00:01:47,500
‫várias solicitações para obter esses dados diferentes, certo?

39
00:01:47,500 --> 00:01:48,450
‫Porque,

40
00:01:48,450 --> 00:01:53,144
‫na verdade, cada arquivo diferente acionará uma solicitação diferente, certo?

41
00:01:53,144 --> 00:01:55,860
‫Lembra antes de onde tínhamos a solicitação

42
00:01:55,860 --> 00:01:58,090
‫do ícone cinco, certo?

43
00:01:58,090 --> 00:02:02,160
‫Vimos uma solicitação para a raiz, para a página principal, e

44
00:02:02,160 --> 00:02:05,640
‫uma solicitação para aquela imagem, e isso significa que

45
00:02:05,640 --> 00:02:06,920
‫cada ativo, então

46
00:02:06,920 --> 00:02:09,600
‫cada peça que faz parte do site,

47
00:02:09,600 --> 00:02:10,670
‫terá

48
00:02:10,670 --> 00:02:13,540
‫sua própria solicitação, e nós terá que lidar

49
00:02:13,540 --> 00:02:14,970
‫com isso, e não

50
00:02:14,970 --> 00:02:19,533
‫queremos fazer isso, então eu simplesmente ininei o estilo nessas páginas html.

51
00:02:20,560 --> 00:02:25,560
‫Tudo bem, então aqui está um monte de estilo, estilo, estilo,

52
00:02:26,210 --> 00:02:29,073
‫e aqui temos o, bem,

53
00:02:29,980 --> 00:02:33,053
‫o nome do produto em algum lugar.

54
00:02:33,053 --> 00:02:35,090
‫Oh sim, aqui, então é o nome do produto.

55
00:02:35,090 --> 00:02:38,270
‫Aqui está a imagem do produto, que

56
00:02:38,270 --> 00:02:42,930
‫novamente é apenas um emoji, mas vem deste campo de imagem.

57
00:02:42,930 --> 00:02:44,693
‫Portanto, temos este campo chamado imagem.

58
00:02:46,740 --> 00:02:47,630
‫Direito?

59
00:02:47,630 --> 00:02:51,780
‫Então nós temos de onde vem, alguns dos

60
00:02:51,780 --> 00:02:56,257
‫ingredientes e preço, e também a descrição aqui embaixo, ok?

61
00:02:56,257 --> 00:02:59,000
‫Mas, novamente, tudo isso vem desses campos diferentes.

62
00:02:59,000 --> 00:03:01,310
‫Então, vamos dar uma olhada nos campos que temos.

63
00:03:01,310 --> 00:03:06,037
‫Assim, o nome do produto, imagem, de, nutrientes, quantidade, preço, se

64
00:03:07,280 --> 00:03:10,323
‫é orgânico ou não, e a descrição.

65
00:03:11,630 --> 00:03:14,890
‫Então, o que vamos fazer agora é basicamente

66
00:03:14,890 --> 00:03:18,460
‫substituir todas essas partes que queremos adicionar dinamicamente

67
00:03:18,460 --> 00:03:21,260
‫por um espaço reservado e,

68
00:03:21,260 --> 00:03:24,320
‫mais tarde, com nosso código substituir esse

69
00:03:24,320 --> 00:03:27,750
‫espaço reservado pelo pedaço real de dados, certo?

70
00:03:27,750 --> 00:03:30,700
‫Então, vamos começar aqui com o nome

71
00:03:30,700 --> 00:03:32,887
‫do produto, e vou

72
00:03:32,887 --> 00:03:35,330
‫excluí-lo e colocar um marcador aqui.

73
00:03:35,330 --> 00:03:38,560
‫E posso fazer tudo o que quiser para um espaço reservado.

74
00:03:38,560 --> 00:03:42,730
‫Eu só gosto de ir neste caso com algo assim.

75
00:03:42,730 --> 00:03:43,563
‫Assim...

76
00:03:45,930 --> 00:03:50,930
‫Nome do produto, porcentagem e depois as chaves.

77
00:03:51,050 --> 00:03:53,740
‫Então, novamente, pode ser qualquer coisa que

78
00:03:53,740 --> 00:03:55,270
‫desejamos, mas queremos

79
00:03:55,270 --> 00:03:57,660
‫encontrar algo que provavelmente não

80
00:03:57,660 --> 00:04:00,620
‫está na página para que não substituamos nada

81
00:04:00,620 --> 00:04:05,120
‫de errado e, portanto, qualquer coisa que não queremos substituir, certo?

82
00:04:05,120 --> 00:04:08,570
‫E eu poderia colocar algo assim aqui, ok?

83
00:04:08,570 --> 00:04:12,260
‫E então substituir tudo isso, mas acho que, assim,

84
00:04:12,260 --> 00:04:15,383
‫parece bom e é fácil de reconhecer.

85
00:04:16,460 --> 00:04:19,550
‫Portanto, tudo o que precisamos fazer é

86
00:04:21,290 --> 00:04:23,630
‫seguir em frente e colocar

87
00:04:23,630 --> 00:04:28,050
‫tudo isso aqui, e então substituirei, é claro, esses nomes.

88
00:04:28,050 --> 00:04:29,963
‫Então, aqui temos os nutrientes.

89
00:04:32,750 --> 00:04:35,133
‫Aqui temos a quantidade.

90
00:04:37,380 --> 00:04:39,293
‫E aqui eu tenho o preço.

91
00:04:41,450 --> 00:04:43,673
‫Aqui embaixo nós temos o preço de novo, você vê.

92
00:04:45,410 --> 00:04:48,380
‫E o preço é só o número, ok?

93
00:04:48,380 --> 00:04:51,280
‫O símbolo do euro aqui fica bem

94
00:04:51,280 --> 00:04:55,630
‫ali porque o preço que temos é, na verdade, apenas um número.

95
00:04:55,630 --> 00:04:59,470
‫Vamos dar uma olhada nisso aqui em json.

96
00:04:59,470 --> 00:05:02,840
‫Portanto, temos apenas 6. 50, mas não a moeda.

97
00:05:02,840 --> 00:05:07,240
‫E na verdade o mesmo aqui, vamos pegar isso e

98
00:05:07,240 --> 00:05:10,510
‫copiá-lo aqui muito rápido, e sim, na verdade,

99
00:05:10,510 --> 00:05:12,960
‫esqueci de substituir este, então este

100
00:05:12,960 --> 00:05:14,763
‫é o de.

101
00:05:16,920 --> 00:05:21,440
‫E vamos escrever a partir de, não em maiúsculas, para que este texto

102
00:05:21,440 --> 00:05:23,850
‫faça um pouco mais de sentido.

103
00:05:23,850 --> 00:05:28,320
‫Então, por exemplo, de Portugal ou da Espanha ou seja o que for.

104
00:05:28,320 --> 00:05:29,643
‫Oh, o que é isso aqui?

105
00:05:30,970 --> 00:05:35,380
‫Ok, acho que acabei de escrever no meio do nome do produto.

106
00:05:35,380 --> 00:05:36,363
‫Então, nutrientes.

107
00:05:39,861 --> 00:05:40,694
‫OK.

108
00:05:40,694 --> 00:05:44,030
‫Ah, e aqui embaixo temos, é claro, a descrição, então

109
00:05:44,030 --> 00:05:45,320
‫vamos substituí-la também.

110
00:05:45,320 --> 00:05:49,020
‫Oh, claro que preciso pegar este de volta

111
00:05:49,980 --> 00:05:50,820
‫e

112
00:05:51,850 --> 00:05:53,573
‫assim a descrição.

113
00:05:55,210 --> 00:05:58,963
‫Em seguida, temos essas imagens, então o abacate,

114
00:06:00,070 --> 00:06:03,050
‫e estou digitando alguns comandos V,

115
00:06:03,050 --> 00:06:07,060
‫colando isso aqui, e então posso editar tudo ao

116
00:06:07,060 --> 00:06:08,363
‫mesmo tempo.

117
00:06:11,660 --> 00:06:16,660
‫Ok, então imagem e, oh, algo aqui no título.

118
00:06:16,680 --> 00:06:20,500
‫Também queremos substituir a imagem aqui e o nome

119
00:06:20,500 --> 00:06:22,083
‫do produto também.

120
00:06:23,030 --> 00:06:23,963
‫Assim.

121
00:06:27,510 --> 00:06:28,650
‫Nome do

122
00:06:29,930 --> 00:06:31,640
‫produto aqui e

123
00:06:31,640 --> 00:06:36,640
‫aqui a imagem para que este também seja substituído dinamicamente.

124
00:06:36,840 --> 00:06:39,550
‫Tudo bem, agora só mais uma coisa

125
00:06:40,890 --> 00:06:42,563
‫um pouco mais complexa.

126
00:06:43,870 --> 00:06:44,980
‫Cadê?

127
00:06:44,980 --> 00:06:46,290
‫Tudo bem, está aqui.

128
00:06:46,290 --> 00:06:49,860
‫Portanto, alguns produtos são orgânicos e outros não.

129
00:06:49,860 --> 00:06:53,210
‫E então há uma classe no CSS que

130
00:06:53,210 --> 00:06:58,200
‫será adicionada a todos esses elementos quando eles não forem orgânicos, certo?

131
00:06:58,200 --> 00:07:00,430
‫Então essa é a aula aqui.

132
00:07:00,430 --> 00:07:03,680
‫Então, quando não é orgânico, não deve ser exibido, então

133
00:07:03,680 --> 00:07:05,383
‫este emblema orgânico aqui.

134
00:07:06,460 --> 00:07:08,930
‫E só para mostrar do que

135
00:07:08,930 --> 00:07:12,790
‫estou falando, o emblema orgânico é essa coisa aqui, ok?

136
00:07:12,790 --> 00:07:14,830
‫Portanto, não queremos exibir

137
00:07:14,830 --> 00:07:19,530
‫isso no caso de ser falso no json, então o que

138
00:07:19,530 --> 00:07:22,660
‫vamos fazer aqui é adicionar outro marcador

139
00:07:22,660 --> 00:07:25,433
‫aqui ou realmente dentro da classe,

140
00:07:26,360 --> 00:07:29,410
‫e então vou chamá-lo de não orgânico

141
00:07:30,370 --> 00:07:31,203
‫.

142
00:07:32,340 --> 00:07:34,280
‫E você vai ver porque um pouco mais tarde, ok?

143
00:07:34,280 --> 00:07:38,650
‫Quando substituirmos isso, fará um pouco mais de sentido para você.

144
00:07:38,650 --> 00:07:41,890
‫Tudo bem, então acho que este está

145
00:07:41,890 --> 00:07:45,313
‫feito e simplesmente sobrescrevi tudo o que tínhamos.

146
00:07:46,260 --> 00:07:48,180
‫Deixe-me chamar este

147
00:07:50,690 --> 00:07:53,110
‫modelo de produto, certo?

148
00:07:53,110 --> 00:07:54,360
‫Então, este está feito.

149
00:07:54,360 --> 00:07:57,850
‫Vamos passar para o próximo, a visão geral.

150
00:07:57,850 --> 00:08:01,040
‫E este vai ser um pouco diferente, e

151
00:08:01,040 --> 00:08:03,053
‫deixe-me mostrar o porquê.

152
00:08:04,030 --> 00:08:07,690
‫Então, novamente, temos todo o SCC embutido aqui,

153
00:08:07,690 --> 00:08:10,510
‫e agora temos esse contêiner de

154
00:08:10,510 --> 00:08:14,640
‫cartões e, para cada um dos produtos, temos um cartão.

155
00:08:14,640 --> 00:08:19,373
‫Então, cada uma dessas cartas aqui tem essa marca de figura, certo?

156
00:08:20,640 --> 00:08:23,050
‫Na verdade, não sabemos

157
00:08:23,050 --> 00:08:27,280
‫quantos desses cartões estarão aqui nesta visão geral, certo?

158
00:08:27,280 --> 00:08:30,200
‫Imagine que temos 10 produtos no json.

159
00:08:30,200 --> 00:08:32,660
‫Então, precisamos de 10 desses cartões.

160
00:08:32,660 --> 00:08:34,920
‫Mas imagine que temos apenas um ou dois.

161
00:08:34,920 --> 00:08:39,340
‫Pois bem, não queremos todas as 10 cartas, mas apenas duas.

162
00:08:39,340 --> 00:08:42,190
‫Então, como vamos fazer isso?

163
00:08:42,190 --> 00:08:46,350
‫Bem, na verdade, criaremos apenas outro modelo onde há apenas

164
00:08:46,350 --> 00:08:49,180
‫um cartão nele e, em seguida, incluiremos

165
00:08:49,180 --> 00:08:51,730
‫um desses modelos para cada um

166
00:08:51,730 --> 00:08:54,230
‫dos cartões que queremos,

167
00:08:54,230 --> 00:08:57,520
‫portanto, cada um dos produtos no arquivo json.

168
00:08:57,520 --> 00:08:59,605
‫Tudo bem, faz sentido?

169
00:08:59,605 --> 00:09:02,693
‫Então, vamos chamar isso aqui de visão geral do modelo.

170
00:09:06,480 --> 00:09:09,313
‫E vou prosseguir e criar o cartão modelo.

171
00:09:14,220 --> 00:09:18,690
‫Então, o que vou fazer aqui é agora, como mencionei, voltar ao

172
00:09:18,690 --> 00:09:19,973
‫topo, então

173
00:09:21,400 --> 00:09:24,023
‫vou em frente e pego uma figura.

174
00:09:24,950 --> 00:09:26,153
‫Isso foi demais.

175
00:09:27,290 --> 00:09:29,623
‫E cole aqui.

176
00:09:31,120 --> 00:09:32,823
‫Então abaixe um pouco isso.

177
00:09:35,450 --> 00:09:39,493
‫Ok, então cada cartão agora tem sua própria figura.

178
00:09:41,190 --> 00:09:44,280
‫Ok, agora o que vou fazer

179
00:09:44,280 --> 00:09:47,380
‫é excluir todos os cartões daqui e

180
00:09:50,610 --> 00:09:53,283
‫criar um marcador aqui também.

181
00:09:57,320 --> 00:09:58,200
‫Cartões

182
00:10:00,270 --> 00:10:01,360
‫de produto.

183
00:10:01,360 --> 00:10:02,430
‫OK?

184
00:10:02,430 --> 00:10:04,970
‫Então, novamente, mais tarde

185
00:10:04,970 --> 00:10:08,830
‫em nosso código, criaremos quantos cartões precisarmos aqui.

186
00:10:08,830 --> 00:10:10,890
‫Por exemplo, se temos

187
00:10:10,890 --> 00:10:13,660
‫cinco produtos, criamos cinco cartões como este.

188
00:10:13,660 --> 00:10:16,780
‫Em seguida, iremos colocá-los juntos em uma

189
00:10:16,780 --> 00:10:20,090
‫sequência e, em seguida, substituir os cartões de

190
00:10:20,090 --> 00:10:24,320
‫produtos por aquela sequência que contém todos esses cartões diferentes, certo?

191
00:10:24,320 --> 00:10:27,563
‫Então, na verdade, terminamos com este.

192
00:10:28,870 --> 00:10:29,703
‫OK?

193
00:10:29,703 --> 00:10:31,440
‫Porque a maioria

194
00:10:31,440 --> 00:10:34,780
‫das coisas acontece dentro do cartão modelo.

195
00:10:34,780 --> 00:10:36,910
‫Portanto, nada mais para substituir aqui.

196
00:10:36,910 --> 00:10:40,113
‫Estou vindo aqui apenas para copiar isso

197
00:10:41,780 --> 00:10:44,730
‫aqui, e agora é muito

198
00:10:44,730 --> 00:10:48,190
‫simples para nós substituir o que precisamos aqui.

199
00:10:48,190 --> 00:10:52,373
‫Portanto, esta aqui é a imagem, e na verdade a temos duas vezes.

200
00:10:54,860 --> 00:10:56,893
‫Ok, isso faz com que pareça um pouco melhor.

201
00:10:58,270 --> 00:11:03,227
‫Imagem, imagem, então aqui está o nome do produto, lembra?

202
00:11:07,080 --> 00:11:07,990
‫Aqui

203
00:11:07,990 --> 00:11:12,670
‫neste lugar, teremos novamente o marcador não orgânico e, novamente, este fará

204
00:11:12,670 --> 00:11:15,943
‫mais sentido para você um pouco mais tarde.

205
00:11:17,470 --> 00:11:21,143
‫Mais orgânico, então a quantidade aqui.

206
00:11:25,540 --> 00:11:27,163
‫Então o preço.

207
00:11:30,210 --> 00:11:34,070
‫Portanto, também precisamos construir o link aqui.

208
00:11:34,070 --> 00:11:36,290
‫Este aqui é o elemento

209
00:11:36,290 --> 00:11:39,460
‫A, caso você não esteja realmente familiarizado com html,

210
00:11:39,460 --> 00:11:42,093
‫o elemento A é para um link.

211
00:11:43,030 --> 00:11:47,073
‫Então, deixe-me mostrar a você um exemplo prático real.

212
00:11:48,810 --> 00:11:52,040
‫Então, quando passarmos o mouse aqui neste link,

213
00:11:52,040 --> 00:11:54,830
‫lá embaixo no canto esquerdo inferior, aqui

214
00:11:54,830 --> 00:11:59,000
‫embaixo, você verá que é um produto de barra e

215
00:11:59,000 --> 00:12:01,770
‫o ID é igual a zero.

216
00:12:01,770 --> 00:12:06,760
‫E este é ID igual a um, ID é igual a dois.

217
00:12:06,760 --> 00:12:09,480
‫Ok, e se clicarmos nisso, veremos realmente aqui.

218
00:12:09,480 --> 00:12:13,440
‫Então slash product e então ID igual a zero,

219
00:12:13,440 --> 00:12:18,440
‫e este ID aqui é exatamente o ID que temos no json.

220
00:12:19,970 --> 00:12:22,085
‫Ok, então este aqui.

221
00:12:22,085 --> 00:12:25,900
‫Então o abacate é um, o queijo de cabra tem um.

222
00:12:25,900 --> 00:12:28,083
‫Desculpe, o abacate tem zero, é claro.

223
00:12:29,110 --> 00:12:33,380
‫O brócolis tem dois e assim por diante.

224
00:12:33,380 --> 00:12:36,463
‫E aqui realmente precisamos construir o link.

225
00:12:38,420 --> 00:12:42,113
‫Portanto, produto e, claro, não em maiúsculas.

226
00:12:43,060 --> 00:12:46,370
‫Portanto, produto e o ID

227
00:12:49,920 --> 00:12:51,360
‫são ID.

228
00:12:51,360 --> 00:12:52,280
‫OK?

229
00:12:52,280 --> 00:12:56,850
‫Então, temos que substituir este marcador de posição de ID aqui com

230
00:12:56,850 --> 00:12:58,250
‫o número correto.

231
00:12:58,250 --> 00:13:02,430
‫Portanto, zero, um, dois, três, quatro, cinco e assim por diante,

232
00:13:02,430 --> 00:13:04,930
‫dependendo de quantos produtos existem.

233
00:13:04,930 --> 00:13:09,510
‫Suponha que temos um queijo aqui, certo?

234
00:13:09,510 --> 00:13:11,050
‫Vamos voltar aqui.

235
00:13:11,050 --> 00:13:14,440
‫Bem, então a imagem será esta aqui, o

236
00:13:14,440 --> 00:13:18,463
‫nome do produto será este e o ID será um.

237
00:13:19,400 --> 00:13:21,480
‫Ok, então isso aqui

238
00:13:21,480 --> 00:13:26,113
‫será traduzido para ID igual a um e nosso manipulador aqui.

239
00:13:27,230 --> 00:13:30,950
‫Portanto, este manipulador de servidor aqui cuidará de

240
00:13:30,950 --> 00:13:35,950
‫ir para a página certa quando o ID do produto for um, certo?

241
00:13:36,060 --> 00:13:39,220
‫Essa lógica ainda não foi implementada, mas é

242
00:13:39,220 --> 00:13:42,103
‫claro, faremos isso nas próximas aulas.

243
00:13:43,010 --> 00:13:47,456
‫Portanto, agora temos os modelos realmente construídos e, portanto, vamos

244
00:13:47,456 --> 00:13:50,940
‫passar para o próximo vídeo, onde começaremos

245
00:13:50,940 --> 00:13:54,440
‫a preencher os modelos e enviar de volta

246
00:13:54,440 --> 00:13:57,073
‫a página final ao navegador.