1
00:00:01,100 --> 00:00:03,200
‫Instrutor: Certo, esta é a parte dois

2
00:00:03,200 --> 00:00:05,313
‫da página de detalhes da página de passeio.

3
00:00:06,670 --> 00:00:08,820
‫E paramos o último

4
00:00:08,820 --> 00:00:11,630
‫vídeo depois de construir essa parte do

5
00:00:11,630 --> 00:00:14,130
‫Quick Facts usando alguns mixins, certo?

6
00:00:14,130 --> 00:00:16,550
‫E então é hora de

7
00:00:16,550 --> 00:00:19,010
‫construir essa parte dos guias aqui.

8
00:00:19,010 --> 00:00:21,550
‫Agora não sabemos de antemão quantos guias

9
00:00:21,550 --> 00:00:23,950
‫turísticos realmente existem em cada excursão.

10
00:00:23,950 --> 00:00:26,150
‫E então, assim como na página de

11
00:00:26,150 --> 00:00:27,930
‫visão geral, aqui precisamos

12
00:00:27,930 --> 00:00:30,260
‫ter outro loop para basicamente percorrer todos

13
00:00:30,260 --> 00:00:32,423
‫os guias associados a um determinado passeio.

14
00:00:34,030 --> 00:00:36,220
‫Então, vamos fazer isso.

15
00:00:36,220 --> 00:00:39,900
‫E agora temos esses três elementos.

16
00:00:39,900 --> 00:00:43,210
‫Então, essas três caixas, uma para cada guia.

17
00:00:43,210 --> 00:00:47,570
‫Mas, como acabamos de dizer, não é assim que queremos que funcione.

18
00:00:47,570 --> 00:00:51,970
‫Então, vamos nos livrar desses dois e criar um loop aqui,

19
00:00:51,970 --> 00:00:55,210
‫que em cada iteração criará uma caixa, ou

20
00:00:55,210 --> 00:00:57,620
‫seja, um elemento como este.

21
00:00:57,620 --> 00:00:59,553
‫E isso deve ser bastante fácil.

22
00:01:00,460 --> 00:01:01,880
‫Então, novamente, usamos each

23
00:01:03,890 --> 00:01:06,923
‫e, em seguida, o nome da variável na iteração

24
00:01:08,505 --> 00:01:11,580
‫atual, in e, em seguida, o array que queremos percorrer.

25
00:01:11,580 --> 00:01:14,933
‫E então essa é a turnê. guias.

26
00:01:16,980 --> 00:01:18,230
‫Direito?

27
00:01:18,230 --> 00:01:19,063
‫Então, onde

28
00:01:20,080 --> 00:01:20,913
‫fica isso?

29
00:01:23,540 --> 00:01:26,620
‫Sim, então aqui está nosso conjunto de guias.

30
00:01:26,620 --> 00:01:29,810
‫Qual, é claro, no banco de dados será

31
00:01:29,810 --> 00:01:34,393
‫preenchido com os usuários correspondentes e não apenas com os IDs, certo?

32
00:01:35,260 --> 00:01:37,803
‫Portanto, agora precisamos recuar tudo isso aqui.

33
00:01:38,902 --> 00:01:40,350
‫E, portanto, cada um

34
00:01:40,350 --> 00:01:43,220
‫desses guias aqui será basicamente um documento do usuário.

35
00:01:43,220 --> 00:01:46,010
‫Então, vamos verificar isso rapidamente

36
00:01:46,010 --> 00:01:50,560
‫no Compass porque não temos esse tipo de dados em

37
00:01:50,560 --> 00:01:53,390
‫nosso documento JSON porque, é claro,

38
00:01:53,390 --> 00:01:57,520
‫a população só acontece nos bastidores usando Mongos, certo?

39
00:01:57,520 --> 00:01:59,600
‫Portanto, cada um dos guias é um usuário.

40
00:01:59,600 --> 00:02:03,573
‫E então o que queremos é o nome e a foto.

41
00:02:06,100 --> 00:02:09,893
‫Então, aqui queremos a foto, é claro.

42
00:02:10,890 --> 00:02:12,140
‫Que é, nesta

43
00:02:12,140 --> 00:02:16,683
‫página, em imagens / usuários e depois o nome da foto do usuário.

44
00:02:20,180 --> 00:02:22,850
‫Portanto, oriente. foto.

45
00:02:22,850 --> 00:02:25,350
‫Que está aqui, novamente, o nome

46
00:02:25,350 --> 00:02:27,540
‫da variável na iteração atual.

47
00:02:27,540 --> 00:02:30,130
‫Então aqui eu não sei por que diz

48
00:02:30,130 --> 00:02:33,223
‫Guia de chumbo, mas vamos colocar o nome da pessoa aqui.

49
00:02:37,030 --> 00:02:39,520
‫Portanto, oriente. nome.

50
00:02:39,520 --> 00:02:42,713
‫Então aqui queremos o nome do guia novamente. nome.

51
00:02:45,997 --> 00:02:46,850
‫E então também queremos o rótulo.

52
00:02:46,850 --> 00:02:49,330
‫Basicamente, será um guia líder quando for um

53
00:02:49,330 --> 00:02:50,940
‫guia líder e simplesmente um

54
00:02:50,940 --> 00:02:53,060
‫guia turístico quando for um guia regular.

55
00:02:53,060 --> 00:02:56,810
‫Agora, deixe-me mostrar o que acontece quando colocamos

56
00:02:56,810 --> 00:02:58,270
‫o papel aqui.

57
00:02:58,270 --> 00:03:00,223
‫Portanto, lembre-se de que a função é

58
00:03:02,300 --> 00:03:04,830
‫a propriedade onde dizemos se um usuário é um guia

59
00:03:04,830 --> 00:03:07,040
‫ou um guia líder ou mesmo um administrador.

60
00:03:07,040 --> 00:03:09,333
‫OK?

61
00:03:10,430 --> 00:03:11,450
‫Então, novamente, vamos

62
00:03:11,450 --> 00:03:14,030
‫ver agora o que acontece quando colocamos desta forma.

63
00:03:14,030 --> 00:03:16,130
‫E com isso devemos estar prontos para realmente testá-lo.

64
00:03:16,130 --> 00:03:19,963
‫Vamos dar uma chance.

65
00:03:21,450 --> 00:03:23,030
‫E aqui vamos nós.

66
00:03:23,030 --> 00:03:24,700
‫Temos as três

67
00:03:24,700 --> 00:03:27,800
‫fotos, os nomes, mas aqui o papel do

68
00:03:27,800 --> 00:03:30,440
‫guia não parece muito bom, certo?

69
00:03:30,440 --> 00:03:33,020
‫Portanto, lembre-se de que,

70
00:03:33,020 --> 00:03:37,640
‫de fato, queremos dizer guia líder e guia turístico.

71
00:03:37,640 --> 00:03:38,883
‫Ok, agora é hora de usar uma condicional.

72
00:03:39,930 --> 00:03:43,270
‫O pug na verdade tem condicionais embutidos, mas

73
00:03:43,270 --> 00:03:46,080
‫eles são realmente simples e não podemos

74
00:03:46,080 --> 00:03:48,390
‫fazer muitas coisas com eles.

75
00:03:48,390 --> 00:03:50,020
‫Por exemplo, eles nem mesmo

76
00:03:50,020 --> 00:03:52,240
‫nos permitem testar a igualdade, por exemplo.

77
00:03:52,240 --> 00:03:54,990
‫Mas, a coisa boa é que ainda podemos

78
00:03:54,990 --> 00:03:56,520
‫usar JavaScript para isso.

79
00:03:56,520 --> 00:03:58,813
‫E então, novamente, usamos algum código sem buffer para isso.

80
00:03:59,770 --> 00:04:03,190
‫Então, com a sintaxe do traço, podemos usar um

81
00:04:03,190 --> 00:04:05,730
‫JavaScript normal se estiver aqui.

82
00:04:05,730 --> 00:04:08,023
‫Então, novamente, como se estivéssemos apenas escrevendo JavaScript.

83
00:04:08,890 --> 00:04:12,180
‫E assim guie. papel e agora podemos testar e dizer se

84
00:04:12,180 --> 00:04:16,340
‫é um guia de chumbo.

85
00:04:16,340 --> 00:04:19,873
‫Bem, então aqui queremos dizer Guia

86
00:04:22,130 --> 00:04:24,340
‫de chumbo, ok?

87
00:04:27,330 --> 00:04:28,753
‫E vamos colocar outro

88
00:04:32,309 --> 00:04:33,980
‫aqui e dizer que se

89
00:04:33,980 --> 00:04:37,320
‫o papel for apenas de guia, então queremos um guia turístico.

90
00:04:37,320 --> 00:04:40,690
‫E então é assim que usamos um JavaScript se escrever

91
00:04:40,690 --> 00:04:44,660
‫dentro do pug e depois combiná-lo com uma saída do pug como esta.

92
00:04:44,660 --> 00:04:48,823
‫Tudo bem?

93
00:04:50,237 --> 00:04:51,320
‫Então, vamos ver.

94
00:04:51,320 --> 00:04:53,720
‫E, de fato, isso é muito melhor.

95
00:04:53,720 --> 00:04:56,333
‫OK.

96
00:04:58,660 --> 00:04:59,830
‫Vamos nos livrar

97
00:04:59,830 --> 00:05:03,350
‫desse espaço vazio aqui e passar para o próximo, que

98
00:05:03,350 --> 00:05:05,200
‫é a caixa de descrição.

99
00:05:05,200 --> 00:05:06,883
‫Então, primeiro aqui no título,

100
00:05:07,870 --> 00:05:09,750
‫também temos o nome da turnê.

101
00:05:09,750 --> 00:05:12,320
‫Este aqui é o nome do tour, então

102
00:05:12,320 --> 00:05:14,250
‫vamos criar uma string de

103
00:05:14,250 --> 00:05:16,310
‫modelo e lá vamos colocar o tour. nome.

104
00:05:16,310 --> 00:05:21,220
‫Eu pensei que isso iria funcionar.

105
00:05:23,770 --> 00:05:25,070
‫Mas isso não acontece.

106
00:05:26,870 --> 00:05:27,750
‫Isso só funciona em JavaScript.

107
00:05:27,750 --> 00:05:29,250
‫Ok, na verdade acabei de lembrar

108
00:05:30,650 --> 00:05:33,040
‫que também queremos ter a turnê bem no título principal.

109
00:05:33,040 --> 00:05:38,040
‫Então, bem aqui, na verdade.

110
00:05:38,600 --> 00:05:42,573
‫Ok, então vamos fazer isso.

111
00:05:44,420 --> 00:05:45,983
‫OK.

112
00:05:51,040 --> 00:05:51,873
‫Mas de

113
00:05:53,200 --> 00:05:55,500
‫qualquer maneira, vamos descer aqui e criar esses parágrafos.

114
00:05:56,550 --> 00:05:59,010
‫Agora, como você pode ver, temos dois parágrafos

115
00:05:59,010 --> 00:06:00,670
‫aqui para este texto.

116
00:06:00,670 --> 00:06:04,090
‫Então, vamos apenas dar uma olhada em

117
00:06:04,090 --> 00:06:06,950
‫como temos aqui na descrição.

118
00:06:06,950 --> 00:06:08,230
‫E como você pode ver, é claro que temos apenas uma corda grande.

119
00:06:08,230 --> 00:06:12,200
‫Mas nós temos isso no meio dividido com esses

120
00:06:12,200 --> 00:06:14,560
‫novos personagens de linha.

121
00:06:14,560 --> 00:06:16,460
‫Tudo bem?

122
00:06:16,460 --> 00:06:17,293
‫E então o

123
00:06:17,293 --> 00:06:20,230
‫que vamos fazer é dividir a string pelo novo caractere de linha.

124
00:06:20,230 --> 00:06:21,743
‫OK?

125
00:06:23,550 --> 00:06:24,750
‫Então isso é fácil, certo?

126
00:06:24,750 --> 00:06:26,923
‫Portanto, código sem buffer para escrever JavaScript.

127
00:06:29,330 --> 00:06:32,743
‫Parágrafos é igual a tour. Descrição. dividido pelo novo caractere de

128
00:06:35,340 --> 00:06:39,910
‫linha.

129
00:06:45,080 --> 00:06:46,853
‫E agora isso criará um array.

130
00:06:47,880 --> 00:06:50,400
‫Portanto, os parágrafos são uma matriz, onde cada um

131
00:06:50,400 --> 00:06:52,460
‫dos elementos é basicamente um parágrafo.

132
00:06:52,460 --> 00:06:55,893
‫OK?

133
00:06:56,950 --> 00:06:57,840
‫E agora tudo o

134
00:06:57,840 --> 00:07:00,130
‫que precisamos fazer é percorrer todos esses parágrafos e imprimir seu conteúdo.

135
00:07:00,130 --> 00:07:03,940
‫Portanto, cada p, digamos, nos

136
00:07:03,940 --> 00:07:06,520
‫parágrafos será p. description_text igual ao parágrafo atual,

137
00:07:06,520 --> 00:07:10,280
‫que é p.

138
00:07:13,870 --> 00:07:17,063
‫Então, simples certo?

139
00:07:20,920 --> 00:07:22,343
‫Vamos verificar isso.

140
00:07:23,490 --> 00:07:24,653
‫E não podemos realmente

141
00:07:27,560 --> 00:07:30,160
‫ver se é diferente porque acabei de usar este texto cego aqui.

142
00:07:30,160 --> 00:07:32,870
‫Mas posso dizer que este aqui deve

143
00:07:32,870 --> 00:07:34,760
‫ser o texto correto.

144
00:07:34,760 --> 00:07:36,340
‫E se formos para o passeio

145
00:07:36,340 --> 00:07:38,630
‫de alpinista na floresta, na verdade aqui no Compass,

146
00:07:38,630 --> 00:07:39,880
‫onde fica isso?

147
00:07:42,320 --> 00:07:43,620
‫Bem aqui.

148
00:07:45,370 --> 00:07:46,480
‫Então, se formos aqui

149
00:07:46,480 --> 00:07:48,613
‫para a descrição e tentarmos editá-la, vamos apenas adicionar

150
00:07:49,637 --> 00:07:51,173
‫outro caractere de nova linha aqui.

151
00:07:53,140 --> 00:07:58,140
‫Então, vamos atualizar e então devemos ver um

152
00:07:58,660 --> 00:08:03,460
‫novo parágrafo aparecendo em algum lugar aqui.

153
00:08:03,460 --> 00:08:05,460
‫Vamos mudar isso.

154
00:08:05,460 --> 00:08:07,090
‫E isso não foi tão bem.

155
00:08:07,090 --> 00:08:09,143
‫Não tenho certeza do porquê.

156
00:08:09,143 --> 00:08:10,800
‫Nunca tentei fazer isso, então o

157
00:08:10,800 --> 00:08:12,680
‫que fiz foi a primeira vez que tentei.

158
00:08:12,680 --> 00:08:16,560
‫Portanto, não tenho certeza do que deu errado aqui.

159
00:08:16,560 --> 00:08:19,875
‫Talvez precisemos realmente criar uma

160
00:08:19,875 --> 00:08:23,860
‫nova linha pressionando Enter, mas também não

161
00:08:23,860 --> 00:08:25,190
‫funcionou.

162
00:08:25,190 --> 00:08:28,910
‫Então, vamos ver se realmente temos o caractere de

163
00:08:28,910 --> 00:08:30,550
‫nova linha aqui.

164
00:08:30,550 --> 00:08:32,223
‫E talvez seja este aqui.

165
00:08:33,460 --> 00:08:35,360
‫Bem, mas não importa, apenas confie em mim.

166
00:08:35,360 --> 00:08:38,723
‫E agora nossa nova linha ainda está aí,

167
00:08:41,450 --> 00:08:43,610
‫o que está acontecendo?

168
00:08:43,610 --> 00:08:44,833
‫Tudo bem, vamos lá, vamos atualizá-lo.

169
00:08:49,740 --> 00:08:52,463
‫Tudo bem, agora nossa outra linha nova que

170
00:08:57,830 --> 00:09:01,460
‫tínhamos aqui antes também meio que desapareceu, mas deixa para lá.

171
00:09:01,460 --> 00:09:04,440
‫Acho que simplesmente não deveria ter usado o Compass para

172
00:09:04,440 --> 00:09:05,920
‫editar este texto aqui.

173
00:09:05,920 --> 00:09:09,430
‫OK?

174
00:09:09,430 --> 00:09:10,690
‫De qualquer forma, vamos agora às imagens.

175
00:09:10,690 --> 00:09:13,630
‫E agora não os vemos aqui, mas é

176
00:09:13,630 --> 00:09:15,960
‫assim que deveria ser, ok?

177
00:09:15,960 --> 00:09:19,710
‫Portanto, temos três imagens aqui exibidas lado

178
00:09:19,710 --> 00:09:21,410
‫a lado assim.

179
00:09:21,410 --> 00:09:23,603
‫E essas são, na

180
00:09:24,670 --> 00:09:28,390
‫verdade, as imagens que estão em algum lugar aqui.

181
00:09:29,690 --> 00:09:31,530
‫Então, sim, no campo de

182
00:09:31,530 --> 00:09:33,670
‫imagens, temos essa matriz dessas três imagens.

183
00:09:33,670 --> 00:09:36,800
‫Então, mais uma vez, vamos usar

184
00:09:36,800 --> 00:09:39,160
‫um loop para percorrê-los.

185
00:09:40,120 --> 00:09:42,360
‫Então, bastante simples.

186
00:09:42,360 --> 00:09:43,933
‫Então, cada imagem em turnê. imagens.

187
00:09:44,890 --> 00:09:49,890
‫E então, para cada um deles, queremos criar isso.

188
00:09:51,190 --> 00:09:54,423
‫Então aqui está a fonte.

189
00:09:56,690 --> 00:09:58,703
‫E isso é imagem / passeios, na verdade.

190
00:10:00,680 --> 00:10:03,963
‫E então o nome da imagem atual,

191
00:10:07,800 --> 00:10:10,360
‫que é imagem, claro.

192
00:10:10,360 --> 00:10:13,730
‫E aqui no texto alternativo temos o número do passeio

193
00:10:13,730 --> 00:10:15,760
‫e, mais importante, também aqui no

194
00:10:15,760 --> 00:10:17,500
‫nome da classe CSS.

195
00:10:17,500 --> 00:10:21,700
‫E então você vê que o próximo tem aquela imagem dois

196
00:10:21,700 --> 00:10:23,250
‫e a imagem três.

197
00:10:23,250 --> 00:10:25,693
‫OK?

198
00:10:26,750 --> 00:10:27,940
‫Então, como vamos fazer isso?

199
00:10:27,940 --> 00:10:29,900
‫Bem, em um loop de

200
00:10:29,900 --> 00:10:32,250
‫pug podemos definir uma segunda variável.

201
00:10:32,250 --> 00:10:34,350
‫E essa segunda variável será o índice.

202
00:10:34,350 --> 00:10:37,723
‫Então, vamos chamar isso de i, de forma muito simples.

203
00:10:38,880 --> 00:10:41,280
‫E então esse é um índice baseado

204
00:10:41,280 --> 00:10:43,750
‫em zero, que será zero para o primeiro

205
00:10:43,750 --> 00:10:46,660
‫elemento e um e dois para os outros dois elementos.

206
00:10:46,660 --> 00:10:49,023
‫E então vamos primeiro começar colocando isso lá.

207
00:10:49,890 --> 00:10:53,233
‫Então esse é i, que é o índice,

208
00:10:58,360 --> 00:11:02,460
‫mais 1, porque queremos que seja 1 e não zero.

209
00:11:02,460 --> 00:11:05,560
‫E agora esta parte aqui é um pouco

210
00:11:05,560 --> 00:11:07,940
‫mais complicada, porque não podemos

211
00:11:07,940 --> 00:11:11,420
‫usar esta sintaxe, e também não podemos usar a outra

212
00:11:11,420 --> 00:11:14,580
‫sintaxe de interpolação aqui mesmo no nome da classe.

213
00:11:14,580 --> 00:11:16,330
‫E então, em vez disso, o

214
00:11:16,330 --> 00:11:20,270
‫que vamos fazer é copiar isso e realmente defini-lo como um atributo de classe.

215
00:11:20,270 --> 00:11:23,143
‫Ok, então isso é exatamente o mesmo.

216
00:11:25,610 --> 00:11:28,140
‫Mas aqui podemos usar uma

217
00:11:28,140 --> 00:11:30,860
‫string de modelo para preencher essa aqui.

218
00:11:30,860 --> 00:11:33,363
‫Então, eu + 1.

219
00:11:34,870 --> 00:11:37,393
‫Tudo bem, vamos nos livrar disso.

220
00:11:39,360 --> 00:11:41,990
‫E vamos testar.

221
00:11:46,222 --> 00:11:47,122
‫Uau, algo não está certo aqui.

222
00:11:49,420 --> 00:11:51,473
‫Então, nós temos nossas imagens, mas elas não parecem corretas.

223
00:11:53,490 --> 00:11:57,450
‫Mas o nome da classe está certo.

224
00:11:57,450 --> 00:11:59,850
‫E você também vê isso aqui aplicado.

225
00:11:59,850 --> 00:12:02,010
‫Mas por algum motivo ele não encontrou essas imagens.

226
00:12:02,010 --> 00:12:05,990
‫Ou realmente fez.

227
00:12:05,990 --> 00:12:07,940
‫Aqui embaixo diz que não.

228
00:12:07,940 --> 00:12:10,150
‫Ah, mas essas são na verdade outras imagens.

229
00:12:10,150 --> 00:12:12,057
‫Mas esses são outros que estão um pouco mais abaixo.

230
00:12:12,057 --> 00:12:16,460
‫De qualquer forma, o que eu acho que não está correto aqui é que essa

231
00:12:16,460 --> 00:12:19,590
‫imagem deveria estar dentro desta caixa de imagem, então acho

232
00:12:19,590 --> 00:12:22,340
‫que algo em nosso recuo aqui está errado.

233
00:12:22,340 --> 00:12:26,690
‫E sim, realmente é isso.

234
00:12:26,690 --> 00:12:29,681
‫Então você vê que esta imagem está no

235
00:12:29,681 --> 00:12:32,040
‫mesmo nível que este elemento div.

236
00:12:32,040 --> 00:12:33,820
‫Então, é claro, há um recuo faltando.

237
00:12:33,820 --> 00:12:36,613
‫Tudo bem.

238
00:12:38,090 --> 00:12:38,930
‫E isso agora deve ser corrigido.

239
00:12:38,930 --> 00:12:40,530
‫E aqui vamos nós.

240
00:12:43,470 --> 00:12:44,973
‫Tudo bem.

241
00:12:46,100 --> 00:12:47,050
‫Então isso, só para ver que esse era o problema.

242
00:12:47,050 --> 00:12:49,973
‫Agora, de fato, a imagem está dentro da caixa de imagem.

243
00:12:51,316 --> 00:12:53,916
‫Tão bom.

244
00:12:55,380 --> 00:12:56,580
‫O próximo é o mapa.

245
00:12:56,580 --> 00:12:57,720
‫Que lembrem, vou

246
00:12:57,720 --> 00:13:02,170
‫sair para a próxima palestra, para que por enquanto possamos nos preocupar em colocar

247
00:13:02,170 --> 00:13:04,330
‫as revisões do tour aqui neste elemento.

248
00:13:04,330 --> 00:13:08,140
‫OK.

249
00:13:08,140 --> 00:13:09,600
‫E então, novamente, estamos passando para esta parte aqui.

250
00:13:09,600 --> 00:13:14,190
‫Agora, de onde vêm essas avaliações.

251
00:13:14,190 --> 00:13:16,953
‫Bem, lembre-se de como aqui no viewController preenchemos

252
00:13:17,810 --> 00:13:19,140
‫o campo de

253
00:13:19,140 --> 00:13:21,390
‫revisões com os dados de revisão reais.

254
00:13:21,390 --> 00:13:24,410
‫E agora temos tours. resenhas, que é uma série de todas

255
00:13:24,410 --> 00:13:27,420
‫as resenhas.

256
00:13:27,420 --> 00:13:29,766
‫E como você provavelmente

257
00:13:29,766 --> 00:13:32,320
‫pode imaginar, agora vamos criar outro

258
00:13:32,320 --> 00:13:35,460
‫loop bem aqui dentro deste elemento de revisão.

259
00:13:35,460 --> 00:13:37,763
‫Então, cada revisão em turnê. avaliações.

260
00:13:39,640 --> 00:13:44,640
‫E então em cada um deles teremos este cartão de revisão.

261
00:13:47,670 --> 00:13:52,670
‫Tudo bem.

262
00:13:53,150 --> 00:13:54,150
‫Agora, isso aqui é

263
00:13:54,150 --> 00:13:56,460
‫muito código, o que está nos distraindo do nosso conteúdo principal.

264
00:13:56,460 --> 00:13:59,870
‫E então vamos novamente, criar um mixin aqui.

265
00:13:59,870 --> 00:14:02,943
‫Tudo bem.

266
00:14:04,550 --> 00:14:05,383
‫Então, vamos

267
00:14:06,630 --> 00:14:07,780
‫colocar aqui no topo.

268
00:14:07,780 --> 00:14:09,230
‫E você verá por que em um segundo.

269
00:14:11,040 --> 00:14:12,590
‫Portanto, reviewCard.

270
00:14:14,080 --> 00:14:15,520
‫E aqui passamos a própria revisão.

271
00:14:16,760 --> 00:14:20,193
‫Tudo bem.

272
00:14:21,480 --> 00:14:22,330
‫E agora precisamos corrigir essas indentações.

273
00:14:22,330 --> 00:14:25,330
‫E em vez de fazer isso manualmente, lembre-se,

274
00:14:25,330 --> 00:14:26,870
‫vou usar o pacote VS

275
00:14:26,870 --> 00:14:28,370
‫Code que temos.

276
00:14:28,370 --> 00:14:30,610
‫E então command shift

277
00:14:30,610 --> 00:14:35,230
‫p ou control shift p no Windows e então Beautify pug.

278
00:14:35,230 --> 00:14:37,193
‫E então isso resolve.

279
00:14:38,580 --> 00:14:41,110
‫E agora precisamos criar esta

280
00:14:41,110 --> 00:14:43,960
‫revisão aqui com base nos dados.

281
00:14:43,960 --> 00:14:45,540
‫Mas antes de fazermos

282
00:14:45,540 --> 00:14:48,790
‫isso, vamos chamar o mixin aqui em cada iteração da revisão.

283
00:14:48,790 --> 00:14:50,890
‫Então, + reviewCard com a revisão atual, certo?

284
00:14:50,890 --> 00:14:55,890
‫Então, vamos apenas dar uma olhada na aparência real

285
00:15:01,030 --> 00:15:03,090
‫de uma revisão.

286
00:15:03,090 --> 00:15:05,970
‫E nós temos os comentários aqui.

287
00:15:05,970 --> 00:15:07,820
‫Mas, de fato, eles não serão

288
00:15:07,820 --> 00:15:10,140
‫realmente úteis porque o usuário não está preenchido aqui.

289
00:15:10,140 --> 00:15:12,773
‫Então, vamos na verdade ao Postman

290
00:15:13,860 --> 00:15:17,160
‫e dar uma olhada nas avaliações finais preenchidas lá.

291
00:15:17,160 --> 00:15:21,830
‫Então, digamos que faça uma revisão durante a turnê.

292
00:15:21,830 --> 00:15:24,923
‫Porque isso será uma revisão completa.

293
00:15:29,250 --> 00:15:32,170
‫Temos o campo de revisão, a avaliação e o usuário.

294
00:15:32,170 --> 00:15:35,890
‫E o que nos interessa aqui é

295
00:15:35,890 --> 00:15:37,370
‫o usuário. nome e usuário. foto.

296
00:15:37,370 --> 00:15:40,593
‫Tudo bem, então o nome de usuário será revisado. do utilizador. nome.

297
00:15:41,440 --> 00:15:45,973
‫Direito?

298
00:15:48,010 --> 00:15:48,843
‫Então revise. do utilizador. nome.

299
00:15:51,130 --> 00:15:55,830
‫E então tudo isso

300
00:15:55,830 --> 00:15:58,490
‫é necessário porque é claro que agora temos vários

301
00:15:58,490 --> 00:16:02,340
‫conjuntos de dados relacionados entre si e, portanto, com a função populate, eles

302
00:16:02,340 --> 00:16:04,050
‫estão todos aninhados uns nos outros.

303
00:16:04,050 --> 00:16:07,850
‫Portanto, vamos usar o nome dele aqui também.

304
00:16:07,850 --> 00:16:11,413
‫Tudo bem.

305
00:16:18,110 --> 00:16:19,080
‫E então aqui

306
00:16:19,080 --> 00:16:20,130
‫não usaremos seu nome.

307
00:16:23,240 --> 00:16:24,940
‫Ah, e

308
00:16:24,940 --> 00:16:29,790
‫esqueci a interpolação, e aqui está a foto.

309
00:16:29,790 --> 00:16:32,683
‫Tudo bem.

310
00:16:33,554 --> 00:16:34,387
‫Aqui está a descrição.

311
00:16:34,387 --> 00:16:37,063
‫E isso é realmente uma revisão. revisão, eu acredito.

312
00:16:39,350 --> 00:16:43,113
‫Então sim.

313
00:16:45,390 --> 00:16:46,790
‫Então revise. Reveja.

314
00:16:46,790 --> 00:16:48,980
‫E esta é

315
00:16:48,980 --> 00:16:52,510
‫a parte fácil e a parte difícil a seguir será exibir

316
00:16:52,510 --> 00:16:55,760
‫a avaliação real, porque temos que exibir um desses elementos

317
00:16:55,760 --> 00:16:59,610
‫aqui para cada um dos números de estrelas que a avaliação tem.

318
00:16:59,610 --> 00:17:02,730
‫Portanto, uma revisão de cinco estrelas precisa de todas essas cinco estrelas.

319
00:17:02,730 --> 00:17:06,330
‫Mas uma crítica de quatro estrelas só precisa de quatro delas

320
00:17:06,330 --> 00:17:09,130
‫e, além disso, queremos uma estrela cinza.

321
00:17:09,130 --> 00:17:12,420
‫Então, basicamente, para dizer quatro de cinco, certo?

322
00:17:12,420 --> 00:17:15,860
‫Mas vamos primeiro dar uma olhada, se isso está realmente funcionando.

323
00:17:15,860 --> 00:17:18,993
‫Então, tudo, exceto a classificação.

324
00:17:19,900 --> 00:17:21,993
‫Então, vamos recarregar e, de fato, aqui

325
00:17:23,500 --> 00:17:27,290
‫estamos nós, com os usuários, o nome e o próprio texto de revisão.

326
00:17:27,290 --> 00:17:31,680
‫E agora vamos cuidar de realmente exibir

327
00:17:31,680 --> 00:17:34,190
‫a classificação também.

328
00:17:34,190 --> 00:17:36,550
‫Então o que vamos fazer aqui é imprimir a

329
00:17:36,550 --> 00:17:38,270
‫quantidade de estrelas em um loop.

330
00:17:38,270 --> 00:17:40,880
‫Portanto, há cinco estrelas possíveis e, portanto, fazemos

331
00:17:40,880 --> 00:17:42,920
‫um loop de uma a cinco.

332
00:17:42,920 --> 00:17:45,660
‫Então, em cada estrela, testamos se a

333
00:17:45,660 --> 00:17:49,270
‫classificação do tour é maior ou igual à estrela atual.

334
00:17:49,270 --> 00:17:52,260
‫E se for assim, imprimimos uma estrela verde,

335
00:17:52,260 --> 00:17:54,630
‫que representa uma estrela real.

336
00:17:54,630 --> 00:17:56,540
‫E se não, é uma estrela cinza.

337
00:17:56,540 --> 00:17:58,600
‫Então, novamente, que é apenas uma estrela inexistente.

338
00:17:58,600 --> 00:18:01,700
‫Por exemplo, para mostrar três de cinco, certo?

339
00:18:01,700 --> 00:18:06,120
‫E isso provavelmente parece um pouco abstrato, então

340
00:18:06,120 --> 00:18:08,130
‫vamos apenas implementá-lo.

341
00:18:08,130 --> 00:18:10,261
‫Então, cada estrela em.

342
00:18:10,261 --> 00:18:15,261
‫E agora não temos um array ainda, então

343
00:18:15,580 --> 00:18:17,500
‫simplesmente o criamos.

344
00:18:17,500 --> 00:18:19,000
‫Portanto, 1, 2,

345
00:18:19,000 --> 00:18:23,240
‫3, 4 e 5, que são todas as estrelas possíveis.

346
00:18:23,240 --> 00:18:25,003
‫Em seguida, vamos copiar isso aqui.

347
00:18:27,510 --> 00:18:31,160
‫E agora a diferença entre uma estrela verde e

348
00:18:31,160 --> 00:18:34,380
‫uma cinza é que a verde tem

349
00:18:34,380 --> 00:18:38,210
‫o modificador ativo aqui, e a cinza tem inativo.

350
00:18:38,210 --> 00:18:40,600
‫E então vamos mudar isso com uma string de modelo, ok?

351
00:18:40,600 --> 00:18:44,280
‫E, assim como antes, realmente precisamos desse nome de

352
00:18:44,280 --> 00:18:47,880
‫classe como um atributo de classe aqui.

353
00:18:47,880 --> 00:18:51,443
‫Tudo bem.

354
00:18:53,850 --> 00:18:54,683
‫Então isso também deve estar aqui.

355
00:18:56,830 --> 00:18:58,470
‫Vamos nos livrar disso.

356
00:18:58,470 --> 00:18:59,743
‫E agora vamos fazer o teste que acabamos de mencionar.

357
00:19:02,630 --> 00:19:05,570
‫E, novamente, a saída disso será

358
00:19:05,570 --> 00:19:08,650
‫que este ano está ativo ou inativo.

359
00:19:08,650 --> 00:19:10,770
‫E então vamos colocar um pouco de JavaScript neste ponto.

360
00:19:10,770 --> 00:19:14,083
‫E então o que vamos fazer aqui é

361
00:19:16,360 --> 00:19:18,090
‫testar se a revisão. classificação, que é onde

362
00:19:18,090 --> 00:19:22,130
‫a classificação é armazenada, é maior

363
00:19:22,130 --> 00:19:23,930
‫ou igual à estrela atual.

364
00:19:25,230 --> 00:19:28,483
‫Então, basicamente, estamos escrevendo um operador de torneamento aqui.

365
00:19:30,010 --> 00:19:33,810
‫E então se for, então aqui

366
00:19:33,810 --> 00:19:37,233
‫queremos dizer, ativo, e se

367
00:19:38,640 --> 00:19:40,210
‫não, então

368
00:19:40,210 --> 00:19:41,063
‫inativo.

369
00:19:43,450 --> 00:19:44,653
‫E isso parece meio estranho, eu sei.

370
00:19:46,370 --> 00:19:49,790
‫Então, vamos exemplificar isso com um exemplo simples.

371
00:19:49,790 --> 00:19:53,530
‫Então, digamos que temos três estrelas de cinco, certo?

372
00:19:53,530 --> 00:19:58,530
‫Portanto, na primeira iteração, estrela é um.

373
00:19:58,660 --> 00:20:02,212
‫E, portanto, um é obviamente menos do que três.

374
00:20:02,212 --> 00:20:06,330
‫E então a primeira estrela deve, é claro, ser verde, e

375
00:20:06,330 --> 00:20:08,630
‫é por isso que colocamos

376
00:20:08,630 --> 00:20:12,360
‫ativo aqui, o que resultará em reviews_star - ativo.

377
00:20:12,360 --> 00:20:16,610
‫OK?

378
00:20:16,610 --> 00:20:17,443
‫Então a mesma coisa com a segunda e a terceira estrelas.

379
00:20:17,443 --> 00:20:20,910
‫Nesse ponto, temos três estrelas verdes.

380
00:20:20,910 --> 00:20:23,320
‫Mas o quarto e o quinto devem ser cinza.

381
00:20:23,320 --> 00:20:26,410
‫OK?

382
00:20:26,410 --> 00:20:27,243
‫E então, na quarta iteração aqui a estrela é quatro.

383
00:20:27,243 --> 00:20:30,270
‫Então, o teste é três maior do que quatro?

384
00:20:30,270 --> 00:20:33,580
‫Não, é falso e, portanto, está inativo.

385
00:20:33,580 --> 00:20:36,350
‫E então essa será uma estrela cinza, e a mesma

386
00:20:36,350 --> 00:20:38,820
‫coisa para a última, então a quinta estrela.

387
00:20:38,820 --> 00:20:42,683
‫Tudo bem, então vamos testar isso.

388
00:20:43,720 --> 00:20:47,200
‫E, na verdade, não podemos testá-lo aqui, porque este caminhante

389
00:20:47,200 --> 00:20:49,480
‫da floresta tem uma classificação perfeita

390
00:20:49,480 --> 00:20:51,410
‫de cinco entre cinco e,

391
00:20:51,410 --> 00:20:53,900
‫portanto, todas as avaliações são cinco estrelas.

392
00:20:53,900 --> 00:20:57,390
‫E por isso precisamos vir aqui para todos os passeios.

393
00:20:57,390 --> 00:21:00,490
‫E embora este link não

394
00:21:00,490 --> 00:21:03,970
‫esteja realmente funcionando ainda, então você vê

395
00:21:03,970 --> 00:21:07,460
‫apenas edições como esta, este hash aqui.

396
00:21:07,460 --> 00:21:08,677
‫E então vamos rapidamente em frente e consertar isso.

397
00:21:08,677 --> 00:21:12,270
‫E isso está no cabeçalho, bem aqui.

398
00:21:12,270 --> 00:21:15,830
‫Mas não queremos isso.

399
00:21:15,830 --> 00:21:17,200
‫Queremos simplesmente ir para a nossa página raiz.

400
00:21:17,200 --> 00:21:20,330
‫Então essa é apenas a barra.

401
00:21:20,330 --> 00:21:23,123
‫Então recarregue.

402
00:21:24,690 --> 00:21:25,963
‫E agora lá embaixo

403
00:21:26,810 --> 00:21:29,340
‫no link você vê que é exatamente o que temos.

404
00:21:29,340 --> 00:21:31,597
‫E, de fato, voltamos à nossa página de visão geral.

405
00:21:31,597 --> 00:21:34,853
‫Então, vamos para uma página com uma média mais baixa.

406
00:21:35,800 --> 00:21:39,220
‫E então esse é o amante do esporte.

407
00:21:39,220 --> 00:21:40,843
‫Vamos ver.

408
00:21:42,390 --> 00:21:43,463
‫E é claro que você

409
00:21:44,510 --> 00:21:46,790
‫vê que todos os dados agora estão corretos para este tour específico.

410
00:21:46,790 --> 00:21:49,410
‫Então, novamente você vê este 3. 9 em média.

411
00:21:49,410 --> 00:21:52,190
‫Você vê todos

412
00:21:52,190 --> 00:21:54,430
‫esses diferentes guias turísticos, as diferentes fotos

413
00:21:54,430 --> 00:21:55,823
‫e todos os comentários.

414
00:21:56,850 --> 00:21:59,110
‫E também você vê que as estrelas estão realmente funcionando.

415
00:21:59,110 --> 00:22:03,420
‫Portanto, esta primeira avaliação é uma avaliação cinco estrelas.

416
00:22:03,420 --> 00:22:05,660
‫E então você vê cinco, quatro, um e

417
00:22:05,660 --> 00:22:08,053
‫então um monte de revisões de quatro estrelas aqui.

418
00:22:09,570 --> 00:22:13,633
‫Ok, então, isso foi um pouco mais

419
00:22:15,290 --> 00:22:20,290
‫confuso, essa parte, mas ainda conseguimos fazer funcionar, certo?

420
00:22:20,490 --> 00:22:24,740
‫Agora, uma coisa que eu queria mostrar a vocês é

421
00:22:24,740 --> 00:22:27,030
‫que também podemos exportar, basicamente

422
00:22:27,030 --> 00:22:29,420
‫um mixin em seu arquivo separado.

423
00:22:29,420 --> 00:22:32,490
‫E então vamos apenas copiar isso e criar

424
00:22:32,490 --> 00:22:34,100
‫um novo mixin

425
00:22:34,100 --> 00:22:36,600
‫aqui, ou na verdade um novo arquivo.

426
00:22:36,600 --> 00:22:37,973
‫E então, uma vez

427
00:22:39,410 --> 00:22:41,760
‫que iremos incluí-lo, irei prefixar novamente com este sublinhado.

428
00:22:41,760 --> 00:22:44,343
‫E vamos chamá-lo de reviewCard. pug.

429
00:22:45,610 --> 00:22:49,423
‫Em seguida, cole aqui.

430
00:22:50,720 --> 00:22:52,600
‫E todo o recuo

431
00:22:52,600 --> 00:22:55,300
‫ainda está correto, e agora tudo o

432
00:22:55,300 --> 00:22:57,923
‫que precisamos fazer é dizer, incluir

433
00:22:59,140 --> 00:22:59,973
‫_reviewCard.

434
00:23:01,670 --> 00:23:02,670
‫E se tentarmos

435
00:23:03,850 --> 00:23:06,120
‫isso agora, ainda deve funcionar, e funciona.

436
00:23:06,120 --> 00:23:09,123
‫Tudo bem.

437
00:23:11,090 --> 00:23:12,230
‫Então, escrevemos muito

438
00:23:12,230 --> 00:23:14,660
‫código até agora e estamos quase terminando.

439
00:23:14,660 --> 00:23:16,090
‫Tudo o que resta fazer é esta seção de apelo à ação.

440
00:23:16,090 --> 00:23:20,010
‫E aqui tudo o que realmente precisamos mudar

441
00:23:20,010 --> 00:23:22,360
‫é essa duração aqui.

442
00:23:22,360 --> 00:23:24,340
‫Então, temos esse slogan legal

443
00:23:24,340 --> 00:23:25,820
‫tipo, 10 dias.

444
00:23:25,820 --> 00:23:26,653
‫1 aventura.

445
00:23:26,653 --> 00:23:27,520
‫Memórias infinitas.

446
00:23:27,520 --> 00:23:29,200
‫Tudo bem?

447
00:23:29,200 --> 00:23:30,240
‫Mas, na verdade, precisamos substituir

448
00:23:30,240 --> 00:23:32,890
‫o número de dias para que seja correto para esta turnê em particular.

449
00:23:32,890 --> 00:23:35,563
‫Então, vamos criar uma string de template para isso.

450
00:23:36,870 --> 00:23:39,020
‫Então faça um tour. duração.

451
00:23:45,840 --> 00:23:47,720
‫E aqui também temos algumas das imagens da turnê, ok?

452
00:23:47,720 --> 00:23:52,350
‫Então, vamos fazer isso também.

453
00:23:52,350 --> 00:23:54,650
‫Então essa é a imagem. tours, ou / tours

454
00:23:54,650 --> 00:23:59,470
‫e, em seguida, tour slash. imagens.

455
00:24:04,020 --> 00:24:05,200
‫E lembre-se de

456
00:24:05,200 --> 00:24:07,430
‫que este é um array, e vou simplesmente usar o primeiro e o segundo elemento.

457
00:24:07,430 --> 00:24:11,120
‫Ou na verdade a segunda e a terceira porque

458
00:24:11,120 --> 00:24:13,010
‫descobri que geralmente ficam

459
00:24:13,010 --> 00:24:15,150
‫um pouco melhores nessa situação.

460
00:24:15,150 --> 00:24:17,223
‫Então,

461
00:24:18,530 --> 00:24:20,980
‫vamos copiar isso.

462
00:24:20,980 --> 00:24:23,103
‫Coloque isso aqui.

463
00:24:24,900 --> 00:24:25,833
‫Ah, e estamos perdendo o colchete de fechamento aqui.

464
00:24:26,961 --> 00:24:30,480
‫E vamos apenas adicionar algum texto alternativo.

465
00:24:30,480 --> 00:24:32,530
‫Foto do tour.

466
00:24:33,890 --> 00:24:34,973
‫Tudo bem.

467
00:24:36,540 --> 00:24:37,500
‫E eu acho que é realmente isso.

468
00:24:37,500 --> 00:24:40,380
‫Então, apenas uma última tentativa.

469
00:24:40,380 --> 00:24:42,243
‫Você vê que aqui está em branco agora.

470
00:24:44,040 --> 00:24:46,203
‫Mas agora, de fato, temos as mesmas

471
00:24:47,200 --> 00:24:48,223
‫imagens aqui.

472
00:24:49,075 --> 00:24:51,690
‫Portanto, este deve ser o número dois.

473
00:24:51,690 --> 00:24:53,313
‫Mas ainda assim, agora

474
00:24:54,450 --> 00:24:57,960
‫diz 14 dias, e então tudo isso está correto agora.

475
00:24:57,960 --> 00:25:00,470
‫Impressionante.

476
00:25:00,470 --> 00:25:01,530
‫Isso é fantástico.

477
00:25:01,530 --> 00:25:03,010
‫Deu muito trabalho, mas

478
00:25:03,010 --> 00:25:04,920
‫acho que valeu muito a pena.

479
00:25:04,920 --> 00:25:06,610
‫Esta página, eu acho que parece absolutamente fantástica.

480
00:25:06,610 --> 00:25:10,530
‫É realmente impressionante.

481
00:25:10,530 --> 00:25:12,200
‫E agora tudo está conectado.

482
00:25:12,200 --> 00:25:14,050
‫Assim, em cada passeio, podemos voltar

483
00:25:14,050 --> 00:25:17,260
‫a todos os passeios e dar uma olhada em todos os outros.

484
00:25:17,260 --> 00:25:20,100
‫Vamos ver o campista do parque.

485
00:25:20,100 --> 00:25:21,960
‫O passeio de campista no parque.

486
00:25:21,960 --> 00:25:23,500
‫Todos os detalhes.

487
00:25:23,500 --> 00:25:24,540
‫Todos os diferentes guias,

488
00:25:24,540 --> 00:25:26,593
‫imagens, seus comentários e, na verdade, essas diferentes imagens.

489
00:25:27,620 --> 00:25:32,173
‫Excelente.

490
00:25:33,400 --> 00:25:34,233
‫Então você vê este buraco em branco aqui no meio de nossa página.

491
00:25:34,233 --> 00:25:38,230
‫E é aí que o mapa estará a seguir,

492
00:25:38,230 --> 00:25:40,630
‫e vamos fazer isso,

493
00:25:40,630 --> 00:25:43,500
‫na verdade, agora na próxima aula.