1
00:00:01,150 --> 00:00:02,170
‫Instrutor: Nesta aula,

2
00:00:02,170 --> 00:00:05,883
‫vamos começar a realmente construir a página de visão geral do tour.

3
00:00:07,500 --> 00:00:09,170
‫E lembre-se de que é

4
00:00:09,170 --> 00:00:11,900
‫assim que a página de visão geral se parece agora.

5
00:00:11,900 --> 00:00:13,790
‫Portanto, não tem nenhum conteúdo

6
00:00:13,790 --> 00:00:16,860
‫real, e é isso que vamos adicionar neste vídeo.

7
00:00:16,860 --> 00:00:19,740
‫Então, estamos aqui nesta rota raiz e,

8
00:00:19,740 --> 00:00:22,803
‫novamente, é onde estará a visão geral, certo?

9
00:00:23,670 --> 00:00:25,210
‫Portanto, em nosso roteador

10
00:00:25,210 --> 00:00:28,650
‫de exibição, é claro que é essa rota, ok?

11
00:00:28,650 --> 00:00:30,650
‫E então o controlador

12
00:00:30,650 --> 00:00:34,697
‫responsável por renderizar esta página é o controlador getoverview, certo?

13
00:00:34,697 --> 00:00:37,650
‫Então, vamos primeiro até aqui e expor as

14
00:00:37,650 --> 00:00:39,840
‫etapas que vamos seguir para

15
00:00:39,840 --> 00:00:41,373
‫renderizar esta página.

16
00:00:42,650 --> 00:00:44,950
‫Então, a primeira coisa que precisamos fazer

17
00:00:44,950 --> 00:00:47,750
‫é realmente obter todos os dados do tour de

18
00:00:47,750 --> 00:00:49,273
‫nossa coleção, certo?

19
00:00:51,120 --> 00:00:52,170
‫Portanto, obtenha os

20
00:00:54,740 --> 00:00:56,010
‫dados do tour da coleta.

21
00:00:56,010 --> 00:00:58,310
‫Em segundo lugar, vamos construir nosso modelo e

22
00:01:00,290 --> 00:01:01,420
‫não vamos fazer

23
00:01:01,420 --> 00:01:03,630
‫isso aqui nesta função do controlador, é claro.

24
00:01:03,630 --> 00:01:05,333
‫Mas, ainda vamos escrever aqui.

25
00:01:06,800 --> 00:01:11,800
‫Portanto, crie um modelo e, finalmente, renderize esse modelo, usando

26
00:01:14,210 --> 00:01:18,360
‫os dados do tour da etapa um.

27
00:01:18,360 --> 00:01:20,350
‫Portanto, começando com a primeira

28
00:01:20,350 --> 00:01:22,930
‫etapa aqui, obtenha os dados do passeio da

29
00:01:22,930 --> 00:01:25,013
‫coleção, o que significa que é claro

30
00:01:25,013 --> 00:01:27,413
‫que primeiro precisamos importar o modelo de passeio.

31
00:01:31,100 --> 00:01:34,030
‫Então, isso é algo que já fizemos

32
00:01:34,030 --> 00:01:35,513
‫várias vezes antes.

33
00:01:36,490 --> 00:01:38,340
‫Na verdade, é um nível acima

34
00:01:38,340 --> 00:01:39,673
‫e depois nos modelos.

35
00:01:41,390 --> 00:01:42,593
‫e modelo turístico.

36
00:01:45,300 --> 00:01:46,470
‫E também vamos

37
00:01:46,470 --> 00:01:48,163
‫precisar da função catchAsync, porque

38
00:01:51,240 --> 00:01:52,290
‫é claro

39
00:01:52,290 --> 00:01:55,513
‫que essa visão geral se tornará uma função assíncrona.

40
00:02:04,190 --> 00:02:09,190
‫Tudo bem, então vamos marcar este como assíncrono.

41
00:02:11,340 --> 00:02:14,120
‫Agora também precisamos avançar aqui para fazer

42
00:02:14,120 --> 00:02:16,123
‫a função catchAsync realmente funcionar.

43
00:02:22,690 --> 00:02:25,770
‫Ok, espero que agora você realmente comece a ver o

44
00:02:25,770 --> 00:02:28,020
‫valor de termos construído todas as coisas

45
00:02:28,020 --> 00:02:29,850
‫da API e todos

46
00:02:29,850 --> 00:02:33,380
‫os códigos que fizemos até este ponto, de modo que tudo

47
00:02:33,380 --> 00:02:37,680
‫o que precisamos fazer agora é realmente conectar todos esses peças juntas, ok?

48
00:02:37,680 --> 00:02:40,530
‫Então, já sabemos agora como fazer tudo isso.

49
00:02:40,530 --> 00:02:44,060
‫Já temos nosso modelo de tour funcionando corretamente.

50
00:02:44,060 --> 00:02:46,033
‫Então agora tudo isso é muito fácil.

51
00:02:47,460 --> 00:02:51,880
‫Portanto, const tours é igual a aguardar.

52
00:02:51,880 --> 00:02:54,620
‫Então, novamente, nada de novo neste ponto.

53
00:02:54,620 --> 00:02:58,423
‫E encontre, basicamente, todos eles, certo?

54
00:02:59,310 --> 00:03:01,700
‫E agora o que vamos realmente fazer

55
00:03:01,700 --> 00:03:03,960
‫com os dados dos tours?

56
00:03:03,960 --> 00:03:06,510
‫Bem, teremos que colar todos os

57
00:03:06,510 --> 00:03:09,700
‫dados do tour no modelo, para que possamos

58
00:03:09,700 --> 00:03:12,610
‫realmente usá-los e exibi-los no site, certo?

59
00:03:12,610 --> 00:03:14,910
‫E isso é realmente muito fácil de fazer.

60
00:03:14,910 --> 00:03:18,300
‫Tudo o que precisamos fazer é colocá-lo

61
00:03:18,300 --> 00:03:22,200
‫aqui neste objeto que será colado no modelo de

62
00:03:22,200 --> 00:03:24,770
‫visão geral neste caso, ok?

63
00:03:24,770 --> 00:03:28,960
‫Então, muito fácil, tudo o que precisamos dizer são passeios.

64
00:03:28,960 --> 00:03:32,050
‫Então, isso é o mesmo que tours é igual a

65
00:03:32,050 --> 00:03:35,910
‫tours e novamente você já sabe que começando com ES 6 é o

66
00:03:35,910 --> 00:03:37,460
‫suficiente para fazer assim.

67
00:03:40,100 --> 00:03:42,810
‫Ótimo, então sempre que houver uma solicitação

68
00:03:42,810 --> 00:03:45,860
‫para a página de visão geral, basicamente nossa página

69
00:03:45,860 --> 00:03:49,290
‫inicial do nosso site renderizado dinamicamente, todos os dados do tour

70
00:03:49,290 --> 00:03:52,070
‫serão recuperados de nosso banco de dados aqui

71
00:03:52,070 --> 00:03:55,210
‫e, em seguida, esses dados serão colados em nosso modelo.

72
00:03:55,210 --> 00:03:56,920
‫E agora tudo o

73
00:03:56,920 --> 00:04:00,150
‫que precisamos fazer é realmente construir esse modelo, certo?

74
00:04:00,150 --> 00:04:03,560
‫Então, vamos passar para a visão geral. pug.

75
00:04:03,560 --> 00:04:08,270
‫Aqui, podemos realmente nos livrar deste espaço reservado h1 aqui.

76
00:04:08,270 --> 00:04:10,410
‫E agora eu quero dar uma

77
00:04:10,410 --> 00:04:12,683
‫olhada no arquivo html estático aqui novamente.

78
00:04:13,950 --> 00:04:18,320
‫Então, isso está na pasta pública e, em

79
00:04:18,320 --> 00:04:22,120
‫seguida, visão geral. html, ok?

80
00:04:22,120 --> 00:04:24,370
‫Então, já construímos o cabeçalho em

81
00:04:24,370 --> 00:04:26,000
‫uma das palestras

82
00:04:26,000 --> 00:04:29,780
‫anteriores e agora é hora de construir essa parte aqui.

83
00:04:29,780 --> 00:04:31,670
‫Agora, quando construímos o modelo

84
00:04:31,670 --> 00:04:34,450
‫pela primeira vez, eu realmente o tinha errado no meu

85
00:04:34,450 --> 00:04:37,010
‫arquivo html e tinha uma visão geral da classe

86
00:04:37,010 --> 00:04:38,950
‫da seção, mas em seu arquivo inicial

87
00:04:38,950 --> 00:04:41,410
‫você deveria ter este main com a classe main.

88
00:04:41,410 --> 00:04:43,430
‫E, então eu acredito em seu

89
00:04:43,430 --> 00:04:46,240
‫arquivo, há na verdade um pequeno texto explicando isso, ok?

90
00:04:46,240 --> 00:04:49,050
‫Mas, de qualquer maneira, nós realmente deletamos essa parte

91
00:04:49,050 --> 00:04:50,720
‫de nosso template base.

92
00:04:50,720 --> 00:04:52,480
‫Portanto, lembre-se disso, que

93
00:04:52,480 --> 00:04:55,370
‫aqui no conteúdo, na verdade, não temos html.

94
00:04:55,370 --> 00:04:57,800
‫Então aquele elemento principal que está

95
00:04:57,800 --> 00:05:00,510
‫no html está agora, longe de ser encontrado.

96
00:05:00,510 --> 00:05:05,500
‫E agora precisamos disso em nossa visão geral, certo?

97
00:05:05,500 --> 00:05:09,790
‫Então, vamos criar essa parte do html na visão geral porque

98
00:05:09,790 --> 00:05:12,923
‫depois disso teremos todos esses cartões repetidos.

99
00:05:14,200 --> 00:05:15,770
‫Então, vamos dar uma olhada

100
00:05:15,770 --> 00:05:17,380
‫nisso também antes de copiar o código.

101
00:05:17,380 --> 00:05:19,450
‫Então, você vê que temos esses

102
00:05:19,450 --> 00:05:23,340
‫cartões aqui e, basicamente, cada um desses cartões, então cada um

103
00:05:23,340 --> 00:05:24,990
‫desses elementos aqui, é

104
00:05:24,990 --> 00:05:27,000
‫o que chamo de um cartão.

105
00:05:27,000 --> 00:05:29,813
‫E, basicamente, teremos nove cartas.

106
00:05:30,650 --> 00:05:34,490
‫Então, esses nove cartões nesta página de visão geral.

107
00:05:34,490 --> 00:05:37,560
‫E são nove cartas porque agora temos

108
00:05:37,560 --> 00:05:39,080
‫nove tours, mas

109
00:05:39,080 --> 00:05:42,780
‫claro, podem ser menos ou mais dessas cartas, certo?

110
00:05:42,780 --> 00:05:45,540
‫Mas, de qualquer forma, o que é importante

111
00:05:45,540 --> 00:05:48,150
‫notar aqui é que essas cartas na

112
00:05:48,150 --> 00:05:49,890
‫verdade se repetem indefinidamente.

113
00:05:49,890 --> 00:05:52,263
‫Portanto, temos este elemento de cartão enorme aqui.

114
00:05:54,240 --> 00:05:56,340
‫E então há

115
00:05:56,340 --> 00:06:01,083
‫o primeiro, e depois há muitos elementos repetidos iguais.

116
00:06:01,940 --> 00:06:02,820
‫OK?

117
00:06:02,820 --> 00:06:05,920
‫E então, na verdade eu fui em frente e criei um

118
00:06:05,920 --> 00:06:07,460
‫modelo de pug apenas

119
00:06:07,460 --> 00:06:10,020
‫para este cartão, para que não tenhamos que

120
00:06:10,020 --> 00:06:12,900
‫escrevê-lo manualmente agora e perder muito tempo fazendo isso, certo?

121
00:06:12,900 --> 00:06:15,660
‫Isso tornaria o curso desnecessário muito longo

122
00:06:15,660 --> 00:06:18,540
‫e decidi criar esse modelo de antemão

123
00:06:18,540 --> 00:06:20,010
‫para usarmos agora.

124
00:06:20,010 --> 00:06:22,970
‫Agora, é claro, se você quiser praticar suas habilidades

125
00:06:22,970 --> 00:06:26,010
‫de pug um pouco mais, fique à vontade para pausar

126
00:06:26,010 --> 00:06:30,040
‫o vídeo neste ponto e, em seguida, traduzir todo esse código em pug.

127
00:06:30,040 --> 00:06:30,873
‫Tudo bem?

128
00:06:30,873 --> 00:06:33,410
‫E quando terminar, você pode voltar.

129
00:06:33,410 --> 00:06:36,400
‫Mas agora irei em frente e usarei esse modelo.

130
00:06:36,400 --> 00:06:39,680
‫E isso está aqui nos dados de desenvolvimento e,

131
00:06:39,680 --> 00:06:43,630
‫em seguida, nos modelos e nos modelos de cartões de turismo, certo?

132
00:06:43,630 --> 00:06:46,404
‫E esse é o cartão inteiro

133
00:06:46,404 --> 00:06:50,333
‫para um cartão, basicamente traduzido em código pug, certo?

134
00:06:51,210 --> 00:06:52,773
‫Então vamos

135
00:06:54,090 --> 00:06:58,830
‫copiar tudo isso, colocar aqui na visão geral, ok?

136
00:06:58,830 --> 00:07:01,700
‫E então vamos ter em mente que antes disso,

137
00:07:01,700 --> 00:07:05,030
‫nós também precisamos deste contêiner principal e deste cartão, então vamos

138
00:07:05,030 --> 00:07:06,630
‫apenas copiar isso também.

139
00:07:10,440 --> 00:07:12,570
‫Então, apenas aqui

140
00:07:12,570 --> 00:07:15,840
‫como referência, para que agora possamos escrever

141
00:07:16,720 --> 00:07:21,567
‫main main e ali temos um dev chamado card container.

142
00:07:23,870 --> 00:07:24,703
‫OK?

143
00:07:24,703 --> 00:07:27,100
‫E então, como o nome

144
00:07:27,100 --> 00:07:29,533
‫diz, esse contêiner vai conter o cartão.

145
00:07:30,610 --> 00:07:33,240
‫Então agora vamos recuar isso, porque agora não

146
00:07:33,240 --> 00:07:35,720
‫está realmente dentro do contêiner do cartão.

147
00:07:35,720 --> 00:07:38,490
‫Portanto, agora seria dentro do principal, mas não

148
00:07:38,490 --> 00:07:39,930
‫é o que queremos.

149
00:07:39,930 --> 00:07:42,450
‫E então, eu seleciono tudo e clico na guia.

150
00:07:42,450 --> 00:07:44,770
‫Apertei a tecla tab novamente e agora vemos que

151
00:07:44,770 --> 00:07:45,950
‫está no nível correto.

152
00:07:45,950 --> 00:07:47,693
‫Está dentro da embalagem do cartão.

153
00:07:49,310 --> 00:07:51,820
‫Mas, na verdade, ainda não está 100%

154
00:07:51,820 --> 00:07:52,995
‫correto porque

155
00:07:52,995 --> 00:07:56,540
‫esse elemento também deve estar dentro do elemento card.

156
00:07:56,540 --> 00:07:58,780
‫E por alguma razão, copiar este modelo

157
00:07:58,780 --> 00:08:00,600
‫de um arquivo para

158
00:08:00,600 --> 00:08:03,050
‫outro, meio que bagunçou um pouco o código.

159
00:08:03,050 --> 00:08:07,270
‫Portanto, tenha cuidado com isso ao colar o

160
00:08:07,270 --> 00:08:08,830
‫código assim.

161
00:08:08,830 --> 00:08:11,490
‫Então, em nosso modelo original, estava tudo correto,

162
00:08:11,490 --> 00:08:13,870
‫como você pode ver, mas quando copiamos,

163
00:08:13,870 --> 00:08:15,023
‫meio que bagunçou.

164
00:08:16,160 --> 00:08:17,760
‫Então, vamos fechar isso.

165
00:08:17,760 --> 00:08:19,340
‫Na verdade, também podemos

166
00:08:19,340 --> 00:08:21,800
‫fechar isso, não precisamos mais dele e,

167
00:08:21,800 --> 00:08:25,030
‫na verdade, também do template base e do tour.

168
00:08:25,030 --> 00:08:27,580
‫Portanto, estamos trabalhando apenas com a visão geral agora.

169
00:08:27,580 --> 00:08:30,377
‫E agora temos este cartão aqui.

170
00:08:30,377 --> 00:08:33,990
‫E agora, como você pode ver, também é uma placa completamente estática.

171
00:08:33,990 --> 00:08:35,593
‫Portanto, ele ainda não

172
00:08:35,593 --> 00:08:38,750
‫usa os dados que colamos no modelo, certo?

173
00:08:38,750 --> 00:08:42,180
‫Então ele tem essa imagem estática, tem todo esse texto aqui e

174
00:08:42,180 --> 00:08:44,660
‫não usa a variável de jeito nenhum.

175
00:08:44,660 --> 00:08:46,960
‫Ok, porque essa parte, eu realmente queria

176
00:08:46,960 --> 00:08:48,660
‫fazer junto com você.

177
00:08:48,660 --> 00:08:51,440
‫Porque na verdade essa é a parte mais importante.

178
00:08:51,440 --> 00:08:53,730
‫Portanto, criar todo esse modelo

179
00:08:53,730 --> 00:08:56,370
‫como esse não é difícil e

180
00:08:56,370 --> 00:09:00,140
‫o que realmente importa é como preenchê-lo com dados, certo?

181
00:09:00,140 --> 00:09:02,290
‫E é isso que vamos fazer a seguir.

182
00:09:02,290 --> 00:09:03,760
‫Mas, por enquanto, vamos

183
00:09:03,760 --> 00:09:06,409
‫dar uma olhada em como isso se parece agora.

184
00:09:06,409 --> 00:09:09,370
‫Então lembre-se de que devemos ter apenas um cartão,

185
00:09:09,370 --> 00:09:11,070
‫e não nove, certo?

186
00:09:11,070 --> 00:09:14,240
‫Porque, novamente, temos apenas um elemento de placa estático

187
00:09:14,240 --> 00:09:15,083
‫neste ponto.

188
00:09:16,760 --> 00:09:21,690
‫Recarregue isso, e isso não parece tão certo.

189
00:09:21,690 --> 00:09:24,833
‫Então, vamos tentar descobrir o que está acontecendo aqui.

190
00:09:25,920 --> 00:09:28,083
‫Portanto, temos nosso elemento principal conforme

191
00:09:29,020 --> 00:09:31,940
‫criamos e, em seguida, temos nosso contêiner de cartão também.

192
00:09:31,940 --> 00:09:32,970
‫Mas então, por alguma

193
00:09:32,970 --> 00:09:34,723
‫razão, há um cano principal lá novamente.

194
00:09:36,230 --> 00:09:40,180
‫Umm ah ok, é claro que preciso excluir este

195
00:09:40,180 --> 00:09:43,223
‫elemento html original que temos lá.

196
00:09:44,150 --> 00:09:45,563
‫Então, vamos tentar de novo.

197
00:09:46,920 --> 00:09:50,460
‫E agora, isso parece melhor, ok?

198
00:09:50,460 --> 00:09:52,020
‫Agora, a imagem aqui ainda está

199
00:09:52,020 --> 00:09:54,340
‫faltando, mas não se preocupe com isso por enquanto.

200
00:09:54,340 --> 00:09:55,930
‫O que é

201
00:09:55,930 --> 00:09:59,570
‫importante é que temos este cartão bonito aqui, certo?

202
00:09:59,570 --> 00:10:01,360
‫Agora, a questão é que

203
00:10:01,360 --> 00:10:04,940
‫claro que queremos ter um cartão para cada um dos passeios, certo?

204
00:10:04,940 --> 00:10:07,220
‫Basicamente, o que queremos

205
00:10:07,220 --> 00:10:10,343
‫fazer agora é percorrer a matriz de

206
00:10:10,343 --> 00:10:13,070
‫tours que colamos no modelo, certo?

207
00:10:13,070 --> 00:10:14,950
‫Então, basicamente essa variável de passeios.

208
00:10:14,950 --> 00:10:17,250
‫E lembre-se de que esta

209
00:10:17,250 --> 00:10:20,400
‫é uma matriz porque contém vários documentos de passeio.

210
00:10:20,400 --> 00:10:22,410
‫E agora vamos percorrer esse

211
00:10:22,410 --> 00:10:26,641
‫array e criar um cartão para cada um dos documentos do tour, certo?

212
00:10:26,641 --> 00:10:29,420
‫E, felizmente, isso é muito fácil de

213
00:10:29,420 --> 00:10:33,860
‫fazer no pug porque basicamente o pug vem com loops embutidos, certo?

214
00:10:33,860 --> 00:10:34,960
‫E

215
00:10:36,130 --> 00:10:40,530
‫agora podemos fazer cada turnê em turnês, ok?

216
00:10:40,530 --> 00:10:43,970
‫Portanto, tours aqui é a variável que colamos e,

217
00:10:43,970 --> 00:10:45,460
‫em cada iteração,

218
00:10:45,460 --> 00:10:47,830
‫a variável atual será chamada de tour.

219
00:10:47,830 --> 00:10:52,210
‫Poderíamos chamá-lo de x ou x y z ou qualquer outra coisa,

220
00:10:52,210 --> 00:10:55,790
‫mas faz sentido apenas chamá-lo de tour, ok?

221
00:10:55,790 --> 00:10:58,810
‫E assim, em cada iteração, o que vem

222
00:10:58,810 --> 00:11:01,800
‫aí é o que será impresso basicamente.

223
00:11:01,800 --> 00:11:05,363
‫Portanto, isso novamente precisa ser indentado em mais um nível.

224
00:11:06,450 --> 00:11:08,740
‫Basicamente, está dentro

225
00:11:08,740 --> 00:11:11,380
‫desta declaração de loop aqui.

226
00:11:11,380 --> 00:11:14,753
‫Ótimo, então vamos ver como fica agora.

227
00:11:15,800 --> 00:11:19,380
‫E agora devemos obter nove cartas idênticas.

228
00:11:19,380 --> 00:11:24,380
‫E, de fato, foi exatamente isso o que aconteceu, certo?

229
00:11:24,400 --> 00:11:25,730
‫É claro que

230
00:11:25,730 --> 00:11:28,870
‫esses dados aqui ainda não são criados dinamicamente.

231
00:11:28,870 --> 00:11:30,760
‫E isso é exatamente o que

232
00:11:30,760 --> 00:11:32,373
‫vamos consertar no próximo vídeo.