1
00:00:01,100 --> 00:00:03,200
‫Instructor: Muy bien, esta es la segunda parte de la

2
00:00:03,200 --> 00:00:05,313
‫creación de la página de detalles de la página del recorrido.

3
00:00:06,670 --> 00:00:08,820
‫Y dejamos el último video

4
00:00:08,820 --> 00:00:11,630
‫después de construir esta parte de Quick

5
00:00:11,630 --> 00:00:14,130
‫Facts aquí usando algunos mixins, ¿verdad?

6
00:00:14,130 --> 00:00:16,550
‫Y, a continuación, es hora

7
00:00:16,550 --> 00:00:19,010
‫de construir esta parte de las guías.

8
00:00:19,010 --> 00:00:21,550
‫Ahora no sabemos de antemano cuántos guías

9
00:00:21,550 --> 00:00:23,950
‫turísticos hay en cada tour.

10
00:00:23,950 --> 00:00:26,150
‫Y así, al igual que en la

11
00:00:26,150 --> 00:00:27,930
‫página de descripción general, aquí

12
00:00:27,930 --> 00:00:30,260
‫necesitamos tener otro bucle para recorrer básicamente todas

13
00:00:30,260 --> 00:00:32,423
‫las guías asociadas con un recorrido determinado.

14
00:00:34,030 --> 00:00:36,220
‫Entonces, hagámoslo.

15
00:00:36,220 --> 00:00:39,900
‫Y ahora mismo tenemos estos tres elementos.

16
00:00:39,900 --> 00:00:43,210
‫Entonces estos tres recuadros, uno para cada guía.

17
00:00:43,210 --> 00:00:47,570
‫Pero como acabamos de decir, no es así como queremos que funcione.

18
00:00:47,570 --> 00:00:51,970
‫Así que eliminemos estos dos y luego creemos un bucle aquí,

19
00:00:51,970 --> 00:00:55,210
‫que en cada iteración creará un cuadro, por lo

20
00:00:55,210 --> 00:00:57,620
‫que un elemento como este.

21
00:00:57,620 --> 00:00:59,553
‫Y eso debería ser bastante fácil.

22
00:01:00,460 --> 00:01:01,880
‫Entonces, nuevamente, usamos cada

23
00:01:03,890 --> 00:01:06,923
‫uno y luego el nombre de la variable en la

24
00:01:08,505 --> 00:01:11,580
‫iteración actual, in, y luego la matriz que queremos recorrer.

25
00:01:11,580 --> 00:01:14,933
‫Y eso es gira. guías.

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

27
00:01:18,230 --> 00:01:19,063
‫Entonces, ¿dónde

28
00:01:20,080 --> 00:01:20,913
‫está eso?

29
00:01:23,540 --> 00:01:26,620
‫Sí, aquí está nuestra variedad de guías.

30
00:01:26,620 --> 00:01:29,810
‫¿Cuál, por supuesto, en la base de datos

31
00:01:29,810 --> 00:01:34,393
‫se completará con los usuarios correspondientes y no solo con las ID, verdad?

32
00:01:35,260 --> 00:01:37,803
‫Así que ahora necesitamos sangrar todo esto aquí.

33
00:01:38,902 --> 00:01:40,350
‫Entonces, cada una de

34
00:01:40,350 --> 00:01:43,220
‫estas guías aquí será básicamente un documento de usuario.

35
00:01:43,220 --> 00:01:46,010
‫Entonces, revisemos rápidamente eso en

36
00:01:46,010 --> 00:01:50,560
‫Compass porque no tenemos ese tipo de datos en nuestro

37
00:01:50,560 --> 00:01:53,390
‫documento JSON porque, por supuesto, la

38
00:01:53,390 --> 00:01:57,520
‫población solo ocurre detrás de escena usando Mongos, ¿verdad?

39
00:01:57,520 --> 00:01:59,600
‫Entonces, cada una de las guías es un usuario.

40
00:01:59,600 --> 00:02:03,573
‫Entonces lo que queremos es el nombre y la foto.

41
00:02:06,100 --> 00:02:09,893
‫Así que aquí queremos la foto, por supuesto.

42
00:02:10,890 --> 00:02:12,140
‫Que es, en

43
00:02:12,140 --> 00:02:16,683
‫esta página, en imágenes / usuarios y luego el nombre de la foto del usuario.

44
00:02:20,180 --> 00:02:22,850
‫Así que guía. Foto.

45
00:02:22,850 --> 00:02:25,350
‫Que es aquí, nuevamente, el nombre de

46
00:02:25,350 --> 00:02:27,540
‫la variable en la iteración actual.

47
00:02:27,540 --> 00:02:30,130
‫Entonces, aquí no sé por qué dice

48
00:02:30,130 --> 00:02:33,223
‫Guía principal, pero pongamos el nombre de la persona aquí.

49
00:02:37,030 --> 00:02:39,520
‫Así que guía. nombre.

50
00:02:39,520 --> 00:02:42,713
‫Entonces aquí queremos nuevamente el nombre del guía. nombre.

51
00:02:45,997 --> 00:02:46,850
‫Y luego también queremos la etiqueta.

52
00:02:46,850 --> 00:02:49,330
‫Y así, básicamente, será guía principal cuando sea

53
00:02:49,330 --> 00:02:50,940
‫guía principal y simplemente

54
00:02:50,940 --> 00:02:53,060
‫guía turística cuando sea una guía habitual.

55
00:02:53,060 --> 00:02:56,810
‫Ahora déjame mostrarte lo que sucede cuando ponemos

56
00:02:56,810 --> 00:02:58,270
‫el papel aquí.

57
00:02:58,270 --> 00:03:00,223
‫Así que recuerde que el rol es

58
00:03:02,300 --> 00:03:04,830
‫la propiedad donde decimos si un usuario es un guía

59
00:03:04,830 --> 00:03:07,040
‫o un guía principal o incluso un administrador.

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

61
00:03:10,430 --> 00:03:11,450
‫Entonces, de nuevo,

62
00:03:11,450 --> 00:03:14,030
‫veamos por ahora qué sucede cuando lo ponemos así.

63
00:03:14,030 --> 00:03:16,130
‫Y con eso deberíamos estar listos para probarlo.

64
00:03:16,130 --> 00:03:19,963
‫Vamos a salvarlo.

65
00:03:21,450 --> 00:03:23,030
‫Y aquí vamos.

66
00:03:23,030 --> 00:03:24,700
‫Entonces tenemos las tres

67
00:03:24,700 --> 00:03:27,800
‫fotos, los nombres, pero aquí el rol de

68
00:03:27,800 --> 00:03:30,440
‫guía no se ve muy bien, ¿verdad?

69
00:03:30,440 --> 00:03:33,020
‫Así que recuerde cómo,

70
00:03:33,020 --> 00:03:37,640
‫de hecho, queremos decir guía principal y guía turístico.

71
00:03:37,640 --> 00:03:38,883
‫Bien, ahora es el momento de usar un condicional.

72
00:03:39,930 --> 00:03:43,270
‫Ahora el pug tiene condicionales incorporados, pero son

73
00:03:43,270 --> 00:03:46,080
‫realmente simples y no podemos hacer

74
00:03:46,080 --> 00:03:48,390
‫muchas cosas con ellos.

75
00:03:48,390 --> 00:03:50,020
‫Por ejemplo, ni siquiera

76
00:03:50,020 --> 00:03:52,240
‫nos permiten probar la igualdad, por ejemplo.

77
00:03:52,240 --> 00:03:54,990
‫Pero, lo bueno es que todavía podemos usar

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

79
00:03:56,520 --> 00:03:58,813
‫Y nuevamente, usamos código sin búfer para eso.

80
00:03:59,770 --> 00:04:03,190
‫Entonces, con la sintaxis de guiones y luego podemos usar

81
00:04:03,190 --> 00:04:05,730
‫un JavaScript normal si está aquí.

82
00:04:05,730 --> 00:04:08,023
‫Así que de nuevo, como si estuviéramos escribiendo JavaScript.

83
00:04:08,890 --> 00:04:12,180
‫Y así guiar. rol y ahora podemos probar y decir si

84
00:04:12,180 --> 00:04:16,340
‫es una guía de plomo.

85
00:04:16,340 --> 00:04:19,873
‫Bueno, entonces aquí queremos decir Guía

86
00:04:22,130 --> 00:04:24,340
‫principal, ¿de acuerdo?

87
00:04:27,330 --> 00:04:28,753
‫Y pongamos otro

88
00:04:32,309 --> 00:04:33,980
‫aquí y digamos que si

89
00:04:33,980 --> 00:04:37,320
‫el papel es solo guía, bueno, entonces queremos guía turístico.

90
00:04:37,320 --> 00:04:40,690
‫Y así es como usamos un JavaScript si escribimos dentro

91
00:04:40,690 --> 00:04:44,660
‫de pug y luego lo combinamos con una salida de pug como esta.

92
00:04:44,660 --> 00:04:48,823
‫¿Está bien?

93
00:04:50,237 --> 00:04:51,320
‫Entonces, veamos.

94
00:04:51,320 --> 00:04:53,720
‫Y de hecho, eso es mucho mejor.

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

96
00:04:58,660 --> 00:04:59,830
‫Eliminemos este

97
00:04:59,830 --> 00:05:03,350
‫espacio vacío aquí y pasemos al siguiente, que es

98
00:05:03,350 --> 00:05:05,200
‫el cuadro de descripción.

99
00:05:05,200 --> 00:05:06,883
‫Así que, en primer lugar, aquí arriba, en

100
00:05:07,870 --> 00:05:09,750
‫el encabezado, también tenemos el nombre de la gira.

101
00:05:09,750 --> 00:05:12,320
‫Así que este es el nombre del recorrido,

102
00:05:12,320 --> 00:05:14,250
‫así que creemos una cadena

103
00:05:14,250 --> 00:05:16,310
‫de plantilla, y ahí pongamos recorrido. nombre.

104
00:05:16,310 --> 00:05:21,220
‫Pensé que funcionaría.

105
00:05:23,770 --> 00:05:25,070
‫Pero no es así.

106
00:05:26,870 --> 00:05:27,750
‫Esto solo funciona en JavaScript.

107
00:05:27,750 --> 00:05:29,250
‫De acuerdo, y en realidad acabo

108
00:05:30,650 --> 00:05:33,040
‫de recordar que también queremos tener la gira en el título principal.

109
00:05:33,040 --> 00:05:38,040
‫Entonces, aquí mismo en realidad.

110
00:05:38,600 --> 00:05:42,573
‫Bien, hagámoslo.

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

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

113
00:05:53,200 --> 00:05:55,500
‫todos modos, bajemos aquí y creemos estos párrafos.

114
00:05:56,550 --> 00:05:59,010
‫Ahora, como puede ver, tenemos dos párrafos

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

116
00:06:00,670 --> 00:06:04,090
‫Así que echemos un vistazo a cómo lo

117
00:06:04,090 --> 00:06:06,950
‫tenemos aquí en la descripción.

118
00:06:06,950 --> 00:06:08,230
‫Y como puede ver, por supuesto, solo tenemos una gran cadena.

119
00:06:08,230 --> 00:06:12,200
‫Pero lo tenemos en el medio dividido con estos

120
00:06:12,200 --> 00:06:14,560
‫caracteres de nueva línea.

121
00:06:14,560 --> 00:06:16,460
‫¿Está bien?

122
00:06:16,460 --> 00:06:17,293
‫Entonces, lo que

123
00:06:17,293 --> 00:06:20,230
‫vamos a hacer es dividir la cadena por el carácter de nueva línea.

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

125
00:06:23,550 --> 00:06:24,750
‫Entonces eso es fácil, ¿verdad?

126
00:06:24,750 --> 00:06:26,923
‫Entonces, código sin búfer para escribir JavaScript.

127
00:06:29,330 --> 00:06:32,743
‫Párrafos es igual a recorrido. descripción. dividido por el carácter de

128
00:06:35,340 --> 00:06:39,910
‫nueva línea.

129
00:06:45,080 --> 00:06:46,853
‫Y entonces esto ahora creará una matriz.

130
00:06:47,880 --> 00:06:50,400
‫Por tanto, los párrafos son una matriz, donde cada uno

131
00:06:50,400 --> 00:06:52,460
‫de los elementos es básicamente un párrafo.

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

133
00:06:56,950 --> 00:06:57,840
‫Y ahora todo lo

134
00:06:57,840 --> 00:07:00,130
‫que tenemos que hacer es recorrer todos estos párrafos e imprimir su contenido.

135
00:07:00,130 --> 00:07:03,940
‫Entonces, cada p, digamos, en

136
00:07:03,940 --> 00:07:06,520
‫párrafos será p. description_text igual al párrafo actual,

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

138
00:07:13,870 --> 00:07:17,063
‫Entonces, simple ¿verdad?

139
00:07:20,920 --> 00:07:22,343
‫Veamos eso.

140
00:07:23,490 --> 00:07:24,653
‫Y realmente no podemos

141
00:07:27,560 --> 00:07:30,160
‫ver si es diferente porque acabo de usar este texto ciego aquí.

142
00:07:30,160 --> 00:07:32,870
‫Pero puedo decirles que este debería

143
00:07:32,870 --> 00:07:34,760
‫ser el texto correcto.

144
00:07:34,760 --> 00:07:36,340
‫Y si vamos al tour de

145
00:07:36,340 --> 00:07:38,630
‫excursionistas por el bosque, en realidad aquí en Compass,

146
00:07:38,630 --> 00:07:39,880
‫¿dónde está eso?

147
00:07:42,320 --> 00:07:43,620
‫Aquí mismo.

148
00:07:45,370 --> 00:07:46,480
‫Entonces, si vamos

149
00:07:46,480 --> 00:07:48,613
‫aquí a la descripción e intentamos editarla, agreguemos

150
00:07:49,637 --> 00:07:51,173
‫otro carácter de línea nueva aquí.

151
00:07:53,140 --> 00:07:58,140
‫Entonces actualice y luego deberíamos ver un nuevo

152
00:07:58,660 --> 00:08:03,460
‫párrafo apareciendo en algún lugar aquí.

153
00:08:03,460 --> 00:08:05,460
‫Cambiemos eso.

154
00:08:05,460 --> 00:08:07,090
‫Y eso no salió tan bien.

155
00:08:07,090 --> 00:08:09,143
‫No estoy seguro de por qué.

156
00:08:09,143 --> 00:08:10,800
‫Nunca intenté hacerlo, así que lo que

157
00:08:10,800 --> 00:08:12,680
‫hice fue la primera vez que lo probé.

158
00:08:12,680 --> 00:08:16,560
‫Así que no estoy seguro de qué salió mal aquí.

159
00:08:16,560 --> 00:08:19,875
‫Tal vez realmente solo necesitamos crear

160
00:08:19,875 --> 00:08:23,860
‫una nueva línea presionando enter, pero eso

161
00:08:23,860 --> 00:08:25,190
‫tampoco funcionó.

162
00:08:25,190 --> 00:08:28,910
‫Así que veamos si realmente tenemos el carácter de

163
00:08:28,910 --> 00:08:30,550
‫nueva línea aquí.

164
00:08:30,550 --> 00:08:32,223
‫Y tal vez sea este de aquí.

165
00:08:33,460 --> 00:08:35,360
‫Bueno, pero no importa, solo confía en mí.

166
00:08:35,360 --> 00:08:38,723
‫Y ahora nuestra nueva línea sigue ahí,

167
00:08:41,450 --> 00:08:43,610
‫¿qué está pasando?

168
00:08:43,610 --> 00:08:44,833
‫Muy bien, aquí vamos, actualicémoslo.

169
00:08:49,740 --> 00:08:52,463
‫Muy bien, ahora nuestra otra línea

170
00:08:57,830 --> 00:09:01,460
‫nueva que teníamos aquí antes también desapareció, pero no importa.

171
00:09:01,460 --> 00:09:04,440
‫Supongo que no debería haber usado Compass para editar

172
00:09:04,440 --> 00:09:05,920
‫este texto aquí.

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

174
00:09:09,430 --> 00:09:10,690
‫De todos modos, pasemos ahora a las imágenes.

175
00:09:10,690 --> 00:09:13,630
‫Y ahora mismo no los vemos aquí, pero así es como

176
00:09:13,630 --> 00:09:15,960
‫se supone que debe verse, ¿de acuerdo?

177
00:09:15,960 --> 00:09:19,710
‫Así que aquí tenemos tres imágenes que se muestran una al lado de

178
00:09:19,710 --> 00:09:21,410
‫la otra de esta manera.

179
00:09:21,410 --> 00:09:23,603
‫Y estas son en

180
00:09:24,670 --> 00:09:28,390
‫realidad las imágenes que están en algún lugar aquí.

181
00:09:29,690 --> 00:09:31,530
‫Así que sí, en el campo de

182
00:09:31,530 --> 00:09:33,670
‫las imágenes tenemos esta matriz de estas tres imágenes.

183
00:09:33,670 --> 00:09:36,800
‫Entonces, una vez más, usaremos un

184
00:09:36,800 --> 00:09:39,160
‫bucle para recorrerlos.

185
00:09:40,120 --> 00:09:42,360
‫Entonces, bastante simple.

186
00:09:42,360 --> 00:09:43,933
‫Entonces, cada imagen en gira. imágenes.

187
00:09:44,890 --> 00:09:49,890
‫Y para cada uno de ellos queremos crear esto.

188
00:09:51,190 --> 00:09:54,423
‫Entonces aquí la fuente.

189
00:09:56,690 --> 00:09:58,703
‫Y eso es imagen / recorridos, en realidad.

190
00:10:00,680 --> 00:10:03,963
‫Y luego el nombre de la imagen actual,

191
00:10:07,800 --> 00:10:10,360
‫que es imagen por supuesto.

192
00:10:10,360 --> 00:10:13,730
‫Y luego aquí, en el texto alternativo, tenemos el número del recorrido y,

193
00:10:13,730 --> 00:10:15,760
‫lo que es más importante, también aquí en

194
00:10:15,760 --> 00:10:17,500
‫el nombre de la clase CSS.

195
00:10:17,500 --> 00:10:21,700
‫Y entonces ves que el siguiente tiene esa imagen dos y

196
00:10:21,700 --> 00:10:23,250
‫esa imagen tres.

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

198
00:10:26,750 --> 00:10:27,940
‫Entonces, ¿cómo vamos a hacer eso?

199
00:10:27,940 --> 00:10:29,900
‫Bueno, en un bucle

200
00:10:29,900 --> 00:10:32,250
‫pug podemos definir una segunda variable.

201
00:10:32,250 --> 00:10:34,350
‫Y esa segunda variable será el índice.

202
00:10:34,350 --> 00:10:37,723
‫Así que llamémoslo yo, muy simplemente.

203
00:10:38,880 --> 00:10:41,280
‫Y ese es un índice de base

204
00:10:41,280 --> 00:10:43,750
‫cero, que será cero para el primer elemento

205
00:10:43,750 --> 00:10:46,660
‫y uno y dos para los otros dos elementos.

206
00:10:46,660 --> 00:10:49,023
‫Entonces, primero comencemos por poner eso allí.

207
00:10:49,890 --> 00:10:53,233
‫Entonces eso es i, que es el índice,

208
00:10:58,360 --> 00:11:02,460
‫más 1, porque queremos que sea 1 y no cero.

209
00:11:02,460 --> 00:11:05,560
‫Y ahora esta parte aquí es un poco

210
00:11:05,560 --> 00:11:07,940
‫más complicada, porque no podemos usar

211
00:11:07,940 --> 00:11:11,420
‫esta sintaxis, y tampoco podemos usar la otra sintaxis de

212
00:11:11,420 --> 00:11:14,580
‫interpolación aquí mismo en el nombre de la clase.

213
00:11:14,580 --> 00:11:16,330
‫Y, en cambio, lo que

214
00:11:16,330 --> 00:11:20,270
‫vamos a hacer es copiar esto y definirlo como un atributo de clase.

215
00:11:20,270 --> 00:11:23,143
‫Está bien, y eso es exactamente lo mismo.

216
00:11:25,610 --> 00:11:28,140
‫Pero aquí podemos usar una

217
00:11:28,140 --> 00:11:30,860
‫cadena de plantilla para luego completarla aquí.

218
00:11:30,860 --> 00:11:33,363
‫Entonces yo + 1.

219
00:11:34,870 --> 00:11:37,393
‫Muy bien, deshagámonos de esto.

220
00:11:39,360 --> 00:11:41,990
‫Y probémoslo.

221
00:11:46,222 --> 00:11:47,122
‫Vaya, algo no está bien aquí.

222
00:11:49,420 --> 00:11:51,473
‫Entonces, tenemos nuestras imágenes, pero no se ven correctas.

223
00:11:53,490 --> 00:11:57,450
‫Pero el nombre de la clase es correcto.

224
00:11:57,450 --> 00:11:59,850
‫Y también lo ves aquí aplicado.

225
00:11:59,850 --> 00:12:02,010
‫Pero por alguna razón no encontró estas imágenes.

226
00:12:02,010 --> 00:12:05,990
‫O realmente lo hizo.

227
00:12:05,990 --> 00:12:07,940
‫Aquí abajo dice que no fue así.

228
00:12:07,940 --> 00:12:10,150
‫Ah, pero estas son en realidad otras imágenes.

229
00:12:10,150 --> 00:12:12,057
‫Pero estos son algunos otros que están un poco más abajo.

230
00:12:12,057 --> 00:12:16,460
‫De todos modos, lo que supongo que no es correcto aquí es que esta imagen

231
00:12:16,460 --> 00:12:19,590
‫debería estar dentro de este cuadro de imagen, por lo que

232
00:12:19,590 --> 00:12:22,340
‫supongo que algo en nuestra sangría aquí está mal.

233
00:12:22,340 --> 00:12:26,690
‫Y sí, de hecho lo es.

234
00:12:26,690 --> 00:12:29,681
‫Entonces ves que esta imagen está al mismo

235
00:12:29,681 --> 00:12:32,040
‫nivel que este elemento div.

236
00:12:32,040 --> 00:12:33,820
‫Entonces, por supuesto, falta una sangría.

237
00:12:33,820 --> 00:12:36,613
‫Está bien.

238
00:12:38,090 --> 00:12:38,930
‫Y eso ahora debería arreglarse.

239
00:12:38,930 --> 00:12:40,530
‫Y aquí vamos.

240
00:12:43,470 --> 00:12:44,973
‫Está bien.

241
00:12:46,100 --> 00:12:47,050
‫Así que, solo para ver que ese era el problema.

242
00:12:47,050 --> 00:12:49,973
‫Ahora, de hecho, la imagen está dentro del cuadro de imagen.

243
00:12:51,316 --> 00:12:53,916
‫Que bien.

244
00:12:55,380 --> 00:12:56,580
‫El siguiente es el mapa.

245
00:12:56,580 --> 00:12:57,720
‫Lo cual recuerda,

246
00:12:57,720 --> 00:13:02,170
‫me voy a ir para la próxima conferencia, para que por ahora podamos preocuparnos por poner las

247
00:13:02,170 --> 00:13:04,330
‫reseñas de la gira aquí en este elemento.

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

249
00:13:08,140 --> 00:13:09,600
‫Y entonces, nuevamente, ahora nos estamos moviendo a esta parte aquí.

250
00:13:09,600 --> 00:13:14,190
‫Ahora bien, ¿de dónde provienen realmente estas revisiones?

251
00:13:14,190 --> 00:13:16,953
‫Bueno, recuerde cómo aquí, en viewController, completamos el

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

253
00:13:19,140 --> 00:13:21,390
‫con los datos de revisión reales.

254
00:13:21,390 --> 00:13:24,410
‫Y ahora mismo tenemos giras. reviews, que es una serie de todas

255
00:13:24,410 --> 00:13:27,420
‫las reseñas.

256
00:13:27,420 --> 00:13:29,766
‫Y como probablemente pueda

257
00:13:29,766 --> 00:13:32,320
‫adivinar, ahora vamos a crear otro

258
00:13:32,320 --> 00:13:35,460
‫bucle aquí dentro de este elemento de revisión.

259
00:13:35,460 --> 00:13:37,763
‫Entonces, cada revisión en gira. revisiones.

260
00:13:39,640 --> 00:13:44,640
‫Y luego en cada uno de ellos tendremos esta ficha de revisión.

261
00:13:47,670 --> 00:13:52,670
‫Está bien.

262
00:13:53,150 --> 00:13:54,150
‫Ahora bien, esto de

263
00:13:54,150 --> 00:13:56,460
‫aquí es mucho código, lo que nos distrae de nuestro contenido principal.

264
00:13:56,460 --> 00:13:59,870
‫Y entonces, de nuevo, creemos un mixin aquí.

265
00:13:59,870 --> 00:14:02,943
‫Está bien.

266
00:14:04,550 --> 00:14:05,383
‫Entonces, pongámoslo

267
00:14:06,630 --> 00:14:07,780
‫aquí en la parte superior.

268
00:14:07,780 --> 00:14:09,230
‫Y verás por qué en un segundo.

269
00:14:11,040 --> 00:14:12,590
‫Así que reviewCard.

270
00:14:14,080 --> 00:14:15,520
‫Y aquí pasamos la revisión en sí.

271
00:14:16,760 --> 00:14:20,193
‫Está bien.

272
00:14:21,480 --> 00:14:22,330
‫Y ahora realmente necesitamos arreglar estas sangrías.

273
00:14:22,330 --> 00:14:25,330
‫Y en lugar de hacerlo manualmente, recuerde, voy a

274
00:14:25,330 --> 00:14:26,870
‫usar ese paquete de VS

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

276
00:14:28,370 --> 00:14:30,610
‫Y así comandar shift

277
00:14:30,610 --> 00:14:35,230
‫p o controlar shift p en Windows y luego Embellecer pug.

278
00:14:35,230 --> 00:14:37,193
‫Y eso lo arregla.

279
00:14:38,580 --> 00:14:41,110
‫Y ahora tenemos que crear

280
00:14:41,110 --> 00:14:43,960
‫esta revisión aquí basada en los datos.

281
00:14:43,960 --> 00:14:45,540
‫Pero antes de hacer eso,

282
00:14:45,540 --> 00:14:48,790
‫llamemos a la mezcla aquí en cada iteración de la revisión.

283
00:14:48,790 --> 00:14:50,890
‫Entonces + reviewCard con la revisión actual, ¿verdad?

284
00:14:50,890 --> 00:14:55,890
‫Entonces, echemos un vistazo a cómo se ve

285
00:15:01,030 --> 00:15:03,090
‫realmente una revisión.

286
00:15:03,090 --> 00:15:05,970
‫Y tenemos las reseñas aquí.

287
00:15:05,970 --> 00:15:07,820
‫Pero de hecho, no serán realmente

288
00:15:07,820 --> 00:15:10,140
‫útiles porque el usuario no está poblado aquí.

289
00:15:10,140 --> 00:15:12,773
‫Así que vayamos a un cartero y

290
00:15:13,860 --> 00:15:17,160
‫echemos un vistazo a las reseñas pobladas finales allí.

291
00:15:17,160 --> 00:15:21,830
‫Así que digamos que lo revisen durante la gira.

292
00:15:21,830 --> 00:15:24,923
‫Porque entonces será una revisión completa.

293
00:15:29,250 --> 00:15:32,170
‫Entonces tenemos el campo de revisión, la calificación y luego el usuario.

294
00:15:32,170 --> 00:15:35,890
‫Y lo que nos interesa aquí es

295
00:15:35,890 --> 00:15:37,370
‫el usuario. nombre y usuario. Foto.

296
00:15:37,370 --> 00:15:40,593
‫Muy bien, entonces se revisará el nombre de usuario. usuario. nombre.

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

298
00:15:48,010 --> 00:15:48,843
‫Así que repasa. usuario. nombre.

299
00:15:51,130 --> 00:15:55,830
‫Entonces, todo esto es

300
00:15:55,830 --> 00:15:58,490
‫necesario porque, por supuesto, ahora tenemos múltiples conjuntos de

301
00:15:58,490 --> 00:16:02,340
‫datos relacionados entre sí y, por lo tanto, con la función de poblar,

302
00:16:02,340 --> 00:16:04,050
‫ahora todos están anidados entre sí.

303
00:16:04,050 --> 00:16:07,850
‫Así que usemos su nombre aquí también.

304
00:16:07,850 --> 00:16:11,413
‫Está bien.

305
00:16:18,110 --> 00:16:19,080
‫Y luego aquí

306
00:16:19,080 --> 00:16:20,130
‫no usaremos su nombre.

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

308
00:16:24,940 --> 00:16:29,790
‫olvidé la interpolación, y aquí está la foto.

309
00:16:29,790 --> 00:16:32,683
‫Está bien.

310
00:16:33,554 --> 00:16:34,387
‫Aquí va a estar la descripción.

311
00:16:34,387 --> 00:16:37,063
‫Y eso es realmente una revisión. revisión, creo.

312
00:16:39,350 --> 00:16:43,113
‫Así que sí.

313
00:16:45,390 --> 00:16:46,790
‫Así que repasa. revisión.

314
00:16:46,790 --> 00:16:48,980
‫Y esta es

315
00:16:48,980 --> 00:16:52,510
‫la parte fácil y la parte difícil a continuación será mostrar la

316
00:16:52,510 --> 00:16:55,760
‫calificación real, porque tenemos que mostrar uno de estos elementos

317
00:16:55,760 --> 00:16:59,610
‫aquí para cada uno de los números de estrellas que tiene la revisión.

318
00:16:59,610 --> 00:17:02,730
‫Entonces, una revisión de cinco estrellas necesita todas estas cinco estrellas.

319
00:17:02,730 --> 00:17:06,330
‫Pero una revisión de cuatro estrellas solo necesita cuatro de ellos

320
00:17:06,330 --> 00:17:09,130
‫y además, también queremos una estrella gris.

321
00:17:09,130 --> 00:17:12,420
‫Básicamente, para decir cuatro de cada cinco, ¿de acuerdo?

322
00:17:12,420 --> 00:17:15,860
‫Pero primero echemos un vistazo, si esto realmente está funcionando.

323
00:17:15,860 --> 00:17:18,993
‫Entonces todo excepto la calificación.

324
00:17:19,900 --> 00:17:21,993
‫Así que recarguemos, y de hecho, aquí

325
00:17:23,500 --> 00:17:27,290
‫estamos, con los usuarios, luego el nombre y el texto de revisión en sí.

326
00:17:27,290 --> 00:17:31,680
‫Y ahora ocupémonos de mostrar también

327
00:17:31,680 --> 00:17:34,190
‫la calificación.

328
00:17:34,190 --> 00:17:36,550
‫Entonces, lo que haremos aquí es imprimir la cantidad

329
00:17:36,550 --> 00:17:38,270
‫de estrellas en un bucle.

330
00:17:38,270 --> 00:17:40,880
‫Entonces, hay cinco estrellas posibles y, por lo tanto,

331
00:17:40,880 --> 00:17:42,920
‫hacemos un bucle de una a cinco.

332
00:17:42,920 --> 00:17:45,660
‫Luego, en cada estrella, probamos si la

333
00:17:45,660 --> 00:17:49,270
‫calificación del recorrido es mayor o igual a la estrella actual.

334
00:17:49,270 --> 00:17:52,260
‫Y si es así, imprimimos una estrella verde,

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

336
00:17:54,630 --> 00:17:56,540
‫Y si no, es una estrella gris.

337
00:17:56,540 --> 00:17:58,600
‫Así que de nuevo, que es solo una estrella inexistente.

338
00:17:58,600 --> 00:18:01,700
‫Por ejemplo, para mostrar tres de cinco, ¿de acuerdo?

339
00:18:01,700 --> 00:18:06,120
‫Y eso probablemente suene un poco abstracto,

340
00:18:06,120 --> 00:18:08,130
‫así que implementémoslo.

341
00:18:08,130 --> 00:18:10,261
‫Entonces cada estrella en.

342
00:18:10,261 --> 00:18:15,261
‫Y ahora no tenemos una matriz todavía, así que

343
00:18:15,580 --> 00:18:17,500
‫simplemente la creamos.

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

345
00:18:19,000 --> 00:18:23,240
‫3, 4 y 5, que son todas las estrellas posibles.

346
00:18:23,240 --> 00:18:25,003
‫A continuación, copiemos esto aquí.

347
00:18:27,510 --> 00:18:31,160
‫Y ahora la diferencia entre una estrella verde y

348
00:18:31,160 --> 00:18:34,380
‫una gris es que la verde tiene

349
00:18:34,380 --> 00:18:38,210
‫el modificador activo aquí, y la gris tiene inactivo.

350
00:18:38,210 --> 00:18:40,600
‫Y entonces cambiaremos eso con una cadena de plantilla, ¿de acuerdo?

351
00:18:40,600 --> 00:18:44,280
‫Y así, al igual que antes, en realidad necesitamos este

352
00:18:44,280 --> 00:18:47,880
‫nombre de clase como atributo de clase aquí.

353
00:18:47,880 --> 00:18:51,443
‫Está bien.

354
00:18:53,850 --> 00:18:54,683
‫Entonces esto también debería estar aquí.

355
00:18:56,830 --> 00:18:58,470
‫Deshagámonos de esto.

356
00:18:58,470 --> 00:18:59,743
‫Y ahora hagamos la prueba que acabamos de mencionar.

357
00:19:02,630 --> 00:19:05,570
‫Y nuevamente, el resultado será

358
00:19:05,570 --> 00:19:08,650
‫que este año estará activo o inactivo.

359
00:19:08,650 --> 00:19:10,770
‫Así que pongamos algo de JavaScript en este punto.

360
00:19:10,770 --> 00:19:14,083
‫Entonces, lo que vamos a hacer aquí es

361
00:19:16,360 --> 00:19:18,090
‫probar si la revisión. calificación, que es donde

362
00:19:18,090 --> 00:19:22,130
‫se almacena la calificación, es mayor

363
00:19:22,130 --> 00:19:23,930
‫o igual que la estrella actual.

364
00:19:25,230 --> 00:19:28,483
‫Básicamente, estamos escribiendo un operador de tornería aquí.

365
00:19:30,010 --> 00:19:33,810
‫Y si lo es, aquí

366
00:19:33,810 --> 00:19:37,233
‫queremos decir, activo, y si

367
00:19:38,640 --> 00:19:41,063
‫no, inactivo.

368
00:19:43,450 --> 00:19:44,653
‫Y esto se ve un poco extraño, lo sé.

369
00:19:46,370 --> 00:19:49,790
‫Así que ejemplifiquemos eso con un ejemplo simple.

370
00:19:49,790 --> 00:19:53,530
‫Entonces, digamos que tenemos tres estrellas de cada cinco, ¿de acuerdo?

371
00:19:53,530 --> 00:19:58,530
‫Entonces, en la primera iteración, la estrella es uno.

372
00:19:58,660 --> 00:20:02,212
‫Y entonces uno es, por supuesto, menos de tres.

373
00:20:02,212 --> 00:20:06,330
‫Entonces, la primera estrella debería, por supuesto, ser verde, y

374
00:20:06,330 --> 00:20:08,630
‫por eso aquí ponemos

375
00:20:08,630 --> 00:20:12,360
‫activo, que luego dará como resultado reviews_star - activo.

376
00:20:12,360 --> 00:20:16,610
‫¿Okey?

377
00:20:16,610 --> 00:20:17,443
‫Luego lo mismo con la segunda y la tercera estrella.

378
00:20:17,443 --> 00:20:20,910
‫Entonces, en ese momento tenemos tres estrellas verdes.

379
00:20:20,910 --> 00:20:23,320
‫Pero el cuarto y el quinto deberían ser grises.

380
00:20:23,320 --> 00:20:26,410
‫¿Okey?

381
00:20:26,410 --> 00:20:27,243
‫Y así, en la cuarta iteración, la estrella es cuatro.

382
00:20:27,243 --> 00:20:30,270
‫Entonces, ¿la prueba es tres más que cuatro?

383
00:20:30,270 --> 00:20:33,580
‫No, es falso y, por lo tanto, está inactivo.

384
00:20:33,580 --> 00:20:36,350
‫Y entonces esa será una estrella gris, y lo

385
00:20:36,350 --> 00:20:38,820
‫mismo para la última, entonces la quinta estrella.

386
00:20:38,820 --> 00:20:42,683
‫Muy bien, probemos eso.

387
00:20:43,720 --> 00:20:47,200
‫Y en realidad no podemos probarlo aquí, porque este excursionista

388
00:20:47,200 --> 00:20:49,480
‫del bosque tiene una calificación perfecta

389
00:20:49,480 --> 00:20:51,410
‫de cinco sobre cinco, por

390
00:20:51,410 --> 00:20:53,900
‫lo que todas las reseñas son cinco estrellas.

391
00:20:53,900 --> 00:20:57,390
‫Y entonces tenemos que venir aquí a todos los recorridos.

392
00:20:57,390 --> 00:21:00,490
‫Y aunque este enlace todavía

393
00:21:00,490 --> 00:21:03,970
‫no funciona, por lo que solo

394
00:21:03,970 --> 00:21:07,460
‫verá ediciones como esta, este hash aquí.

395
00:21:07,460 --> 00:21:08,677
‫Y entonces, vayamos rápidamente y solucionemos eso.

396
00:21:08,677 --> 00:21:12,270
‫Y eso está en el encabezado, aquí mismo.

397
00:21:12,270 --> 00:21:15,830
‫Pero no queremos eso.

398
00:21:15,830 --> 00:21:17,200
‫Simplemente queremos ir a nuestra página raíz.

399
00:21:17,200 --> 00:21:20,330
‫Así que eso es solo la barra.

400
00:21:20,330 --> 00:21:23,123
‫Así que recarga.

401
00:21:24,690 --> 00:21:25,963
‫Y ahora, en el

402
00:21:26,810 --> 00:21:29,340
‫enlace, ve que eso es exactamente lo que tenemos.

403
00:21:29,340 --> 00:21:31,597
‫Y, de hecho, volvemos a nuestra página de descripción general.

404
00:21:31,597 --> 00:21:34,853
‫Así que vayamos a una página con un promedio más bajo.

405
00:21:35,800 --> 00:21:39,220
‫Y ese es el amante del deporte.

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

407
00:21:42,390 --> 00:21:43,463
‫Y, por supuesto, verá

408
00:21:44,510 --> 00:21:46,790
‫que todos los datos ahora son correctos para este recorrido específico.

409
00:21:46,790 --> 00:21:49,410
‫Entonces nuevamente ves este 3. 9 promedio.

410
00:21:49,410 --> 00:21:52,190
‫Ves todos estos

411
00:21:52,190 --> 00:21:54,430
‫guías turísticos diferentes, las diferentes imágenes y

412
00:21:54,430 --> 00:21:55,823
‫ves todas las reseñas.

413
00:21:56,850 --> 00:21:59,110
‫Y también ves que las estrellas realmente están funcionando.

414
00:21:59,110 --> 00:22:03,420
‫Entonces, esta primera revisión es una revisión de cinco estrellas.

415
00:22:03,420 --> 00:22:05,660
‫Y entonces ven cinco, cuatro, uno y

416
00:22:05,660 --> 00:22:08,053
‫luego un montón de reseñas de cuatro estrellas aquí.

417
00:22:09,570 --> 00:22:13,633
‫Bien, entonces, esto fue un poco más

418
00:22:15,290 --> 00:22:20,290
‫confuso, esta parte, pero aún así logramos que funcionara, ¿verdad?

419
00:22:20,490 --> 00:22:24,740
‫Ahora, una cosa que solo quería mostrarles es que en

420
00:22:24,740 --> 00:22:27,030
‫realidad también podemos exportar, básicamente

421
00:22:27,030 --> 00:22:29,420
‫un mixin en su archivo separado.

422
00:22:29,420 --> 00:22:32,490
‫Así que copiemos esto y creemos un

423
00:22:32,490 --> 00:22:34,100
‫nuevo mixin aquí,

424
00:22:34,100 --> 00:22:36,600
‫o en realidad un nuevo archivo.

425
00:22:36,600 --> 00:22:37,973
‫Y ya que luego lo

426
00:22:39,410 --> 00:22:41,760
‫vamos a incluir, volveré a agregarle este guión bajo como prefijo.

427
00:22:41,760 --> 00:22:44,343
‫Y llamémoslo reviewCard. doguillo.

428
00:22:45,610 --> 00:22:49,423
‫Luego pégalo aquí.

429
00:22:50,720 --> 00:22:52,600
‫Y toda la sangría sigue

430
00:22:52,600 --> 00:22:55,300
‫siendo correcta, y ahora todo lo que

431
00:22:55,300 --> 00:22:57,923
‫tenemos que hacer es decir, incluir

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

433
00:23:01,670 --> 00:23:02,670
‫Y si lo

434
00:23:03,850 --> 00:23:06,120
‫intentamos ahora, aún debería funcionar, y lo hace.

435
00:23:06,120 --> 00:23:09,123
‫Está bien.

436
00:23:11,090 --> 00:23:12,230
‫Así que escribimos

437
00:23:12,230 --> 00:23:14,660
‫mucho código hasta ahora y casi terminamos.

438
00:23:14,660 --> 00:23:16,090
‫Todo lo que queda por hacer es esta sección de llamada a la acción.

439
00:23:16,090 --> 00:23:20,010
‫Y aquí todo lo que realmente necesitamos cambiar

440
00:23:20,010 --> 00:23:22,360
‫es esta duración aquí.

441
00:23:22,360 --> 00:23:24,340
‫Así que tenemos este bonito lema

442
00:23:24,340 --> 00:23:25,820
‫como 10 días.

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

444
00:23:26,653 --> 00:23:27,520
‫Infinitos recuerdos.

445
00:23:27,520 --> 00:23:29,200
‫¿Está bien?

446
00:23:29,200 --> 00:23:30,240
‫Pero en realidad necesitamos reemplazar

447
00:23:30,240 --> 00:23:32,890
‫la cantidad de días para que sea correcta para esta gira en particular.

448
00:23:32,890 --> 00:23:35,563
‫Así que creemos una cadena de plantilla para eso.

449
00:23:36,870 --> 00:23:39,020
‫Así que gira. duración.

450
00:23:45,840 --> 00:23:47,720
‫Y también aquí tenemos algunas de las imágenes de la gira, ¿de acuerdo?

451
00:23:47,720 --> 00:23:52,350
‫Así que hagámoslo también.

452
00:23:52,350 --> 00:23:54,650
‫Así que esa es la imagen. tours, o /

453
00:23:54,650 --> 00:23:59,470
‫tours y luego slash tour. imágenes.

454
00:24:04,020 --> 00:24:05,200
‫Y recuerde que

455
00:24:05,200 --> 00:24:07,430
‫esta es una matriz, y simplemente usaré el primer y segundo elemento.

456
00:24:07,430 --> 00:24:11,120
‫O en realidad el segundo y el tercero porque descubrí

457
00:24:11,120 --> 00:24:13,010
‫que estos suelen verse

458
00:24:13,010 --> 00:24:15,150
‫un poco mejor en la situación.

459
00:24:15,150 --> 00:24:20,980
‫Copiemos eso.

460
00:24:20,980 --> 00:24:23,103
‫Pon eso aquí.

461
00:24:24,900 --> 00:24:25,833
‫Ah, y nos falta el corchete de cierre aquí.

462
00:24:26,961 --> 00:24:30,480
‫Y agreguemos un texto alternativo.

463
00:24:30,480 --> 00:24:32,530
‫Foto de la gira.

464
00:24:33,890 --> 00:24:34,973
‫Está bien.

465
00:24:36,540 --> 00:24:37,500
‫Y creo que eso es todo.

466
00:24:37,500 --> 00:24:40,380
‫Así que solo un último intento.

467
00:24:40,380 --> 00:24:42,243
‫Ves que aquí está en blanco ahora mismo.

468
00:24:44,040 --> 00:24:46,203
‫Pero ahora, de hecho, tenemos las mismas

469
00:24:47,200 --> 00:24:48,223
‫imágenes aquí.

470
00:24:49,075 --> 00:24:51,690
‫Entonces este debería ser el número dos.

471
00:24:51,690 --> 00:24:53,313
‫Pero aún así, ahora

472
00:24:54,450 --> 00:24:57,960
‫dice 14 días, así que todo eso es correcto ahora.

473
00:24:57,960 --> 00:25:00,470
‫Impresionante.

474
00:25:00,470 --> 00:25:01,530
‫Eso es fantástico.

475
00:25:01,530 --> 00:25:03,010
‫Eso fue mucho trabajo,

476
00:25:03,010 --> 00:25:04,920
‫pero creo que realmente valió la pena.

477
00:25:04,920 --> 00:25:06,610
‫Creo que esta página se ve absolutamente fantástica.

478
00:25:06,610 --> 00:25:10,530
‫Es realmente impresionante.

479
00:25:10,530 --> 00:25:12,200
‫Y ahora todo está conectado.

480
00:25:12,200 --> 00:25:14,050
‫Entonces, en cada recorrido podemos volver

481
00:25:14,050 --> 00:25:17,260
‫a todos los recorridos y echar un vistazo a todos los demás.

482
00:25:17,260 --> 00:25:20,100
‫Veamos la caravana del parque.

483
00:25:20,100 --> 00:25:21,960
‫El recorrido en autocaravana por el parque.

484
00:25:21,960 --> 00:25:23,500
‫Todos los detalles.

485
00:25:23,500 --> 00:25:24,540
‫Todas las diferentes guías,

486
00:25:24,540 --> 00:25:26,593
‫imágenes, sus reseñas y, de hecho, estas diferentes imágenes.

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

488
00:25:33,400 --> 00:25:34,233
‫Entonces ves este agujero en blanco aquí en el medio de nuestra página.

489
00:25:34,233 --> 00:25:38,230
‫Y ahí es donde estará el mapa a continuación,

490
00:25:38,230 --> 00:25:40,630
‫así que hagámoslo, de hecho

491
00:25:40,630 --> 00:25:43,500
‫ahora mismo en la próxima conferencia.