1
00:00:01,609 --> 00:00:04,900
‫-: [Jonas Schmedtman] Entonces ya tenemos plantillas HTML.

2
00:00:04,900 --> 00:00:07,790
‫Ahora viene la parte más difícil,

3
00:00:07,790 --> 00:00:11,643
‫que es reemplazar los marcadores de posición con el contenido.

4
00:00:13,450 --> 00:00:16,610
‫Así que comencemos con la descripción general.

5
00:00:16,610 --> 00:00:19,680
‫Y démosnos un respiro aquí y

6
00:00:19,680 --> 00:00:21,543
‫agreguemos algunos comentarios.

7
00:00:21,543 --> 00:00:23,350
‫(escribiendo en un teclado)

8
00:00:23,350 --> 00:00:27,943
‫Así que la página de descripción general y algunos comentarios aquí abajo.

9
00:00:30,790 --> 00:00:35,790
‫Entonces, la página del producto, y aquí tenemos la API.

10
00:00:39,079 --> 00:00:42,079
‫Y luego aquí tenemos el No encontrado.

11
00:00:45,650 --> 00:00:48,990
‫Muy bien, ya se ve un poco mejor.

12
00:00:48,990 --> 00:00:52,820
‫Nuevamente, comenzamos con la página de descripción general.

13
00:00:52,820 --> 00:00:54,100
‫Entonces, el

14
00:00:54,100 --> 00:00:58,580
‫primer paso es cargar la descripción general de la plantilla.

15
00:00:58,580 --> 00:01:01,770
‫De acuerdo, cada vez que haya una nueva solicitud

16
00:01:01,770 --> 00:01:05,340
‫para esta ruta, por lo que la ruta ajustada o

17
00:01:05,340 --> 00:01:08,180
‫/ Descripción general, lo primero que haremos

18
00:01:08,180 --> 00:01:11,240
‫es leer la descripción general de la plantilla.

19
00:01:11,240 --> 00:01:14,020
‫Pero, al igual que antes, podemos hacer

20
00:01:14,020 --> 00:01:16,860
‫eso fuera de esta devolución de llamada, ¿de acuerdo?

21
00:01:16,860 --> 00:01:20,000
‫Debido a que estas plantillas, siempre serán las mismas,

22
00:01:20,000 --> 00:01:22,050
‫por lo que puede leerlas

23
00:01:22,050 --> 00:01:25,280
‫en la memoria desde el principio cuando iniciemos la aplicación.

24
00:01:25,280 --> 00:01:28,270
‫Y luego, cuando sea necesario, simplemente

25
00:01:28,270 --> 00:01:31,460
‫seguimos adelante y reemplazamos el contenido allí.

26
00:01:31,460 --> 00:01:34,156
‫Bien, al igual que hicimos con los datos

27
00:01:34,156 --> 00:01:36,720
‫aquí, tampoco es necesario leer los datos

28
00:01:36,720 --> 00:01:38,528
‫cada vez que hay

29
00:01:38,528 --> 00:01:41,403
‫una solicitud y lo mismo sucede con las plantillas.

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

31
00:01:43,120 --> 00:01:44,510
‫Así que en realidad

32
00:01:44,510 --> 00:01:47,090
‫voy a seguir adelante y hacerlo con las tres plantillas

33
00:01:47,090 --> 00:01:49,260
‫aquí para que lo tengamos fuera del camino.

34
00:01:49,260 --> 00:01:54,260
‫Así que voy a seguir adelante, y solo para obtener este, lo llamaré

35
00:01:55,610 --> 00:01:57,040
‫temp para obtener

36
00:01:59,000 --> 00:02:02,490
‫una descripción general de la plantilla y el nombre

37
00:02:03,670 --> 00:02:05,743
‫DAR y aquí tenemos las plantillas.

38
00:02:09,370 --> 00:02:13,213
‫Y luego / template-overview.

39
00:02:15,460 --> 00:02:18,390
‫Bien, entonces duplique esto aquí dos veces para

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

41
00:02:22,320 --> 00:02:24,683
‫uno para la tarjeta, entonces tarjeta de

42
00:02:26,980 --> 00:02:29,983
‫plantilla, y luego uno para el producto de plantilla.

43
00:02:35,460 --> 00:02:37,780
‫Producto, está bien.

44
00:02:37,780 --> 00:02:39,870
‫Y nuevamente, tengamos en cuenta que podemos

45
00:02:39,870 --> 00:02:42,380
‫hacerlo con la versión sincronizada porque estamos en el

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

47
00:02:43,950 --> 00:02:47,400
‫Solo ejecutamos una vez, justo al principio

48
00:02:47,400 --> 00:02:50,080
‫cuando cargamos estas aplicaciones.

49
00:02:50,080 --> 00:02:53,156
‫Entonces, no podríamos hacer esto dentro de esta función

50
00:02:53,156 --> 00:02:55,970
‫de devolución de llamada createServer, ¿de acuerdo?

51
00:02:55,970 --> 00:02:59,350
‫Porque este se llama cada vez que hay una solicitud.

52
00:02:59,350 --> 00:03:03,047
‫Y si tenemos un millón de solicitudes al mismo tiempo,

53
00:03:03,047 --> 00:03:06,330
‫podríamos bloquear el código un millón de veces, una

54
00:03:06,330 --> 00:03:08,040
‫vez por cada solicitud.

55
00:03:08,040 --> 00:03:11,450
‫Y eso es algo que no queremos.

56
00:03:11,450 --> 00:03:14,580
‫Entonces, la descripción general, sigamos adelante

57
00:03:14,580 --> 00:03:16,740
‫y, en primer

58
00:03:16,740 --> 00:03:21,010
‫lugar, solo para probarlo, envíe este tempOverview como respuesta.

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

60
00:03:22,120 --> 00:03:26,853
‫que podamos hacer eso, debemos seguir adelante y configurar este tipo de contenido en HTML.

61
00:03:27,740 --> 00:03:30,453
‫Así que déjame copiar este código aquí.

62
00:03:32,400 --> 00:03:34,120
‫Entonces, el código de estado es

63
00:03:34,120 --> 00:03:37,063
‫200 y el tipo de contenido debe ser texto / html.

64
00:03:42,250 --> 00:03:44,040
‫Así que reinicie el servidor

65
00:03:45,010 --> 00:03:47,943
‫aquí y ahora echemos un vistazo, y de

66
00:03:49,070 --> 00:03:50,670
‫hecho, aquí vamos.

67
00:03:50,670 --> 00:03:52,650
‫Así que aquí está nuestra

68
00:03:53,710 --> 00:03:56,700
‫página con estilo que ya conocemos de esta.

69
00:03:56,700 --> 00:03:58,630
‫Ahora, por supuesto, lo que

70
00:03:58,630 --> 00:04:01,031
‫falta aquí son estas filas, y eso se

71
00:04:01,031 --> 00:04:03,770
‫debe a que todavía tenemos nuestro marcador de posición.

72
00:04:03,770 --> 00:04:08,110
‫Entonces, la siguiente tarea ahora es reemplazar este marcador de posición con

73
00:04:08,110 --> 00:04:09,293
‫las tarjetas reales.

74
00:04:10,830 --> 00:04:12,560
‫¿Y cómo lo haremos?

75
00:04:12,560 --> 00:04:15,640
‫Bueno, recuerde que en el objeto de datos,

76
00:04:15,640 --> 00:04:19,010
‫tenemos una matriz de todos los objetos que están en

77
00:04:19,010 --> 00:04:20,573
‫los datos. JSON.

78
00:04:21,620 --> 00:04:26,560
‫Entonces, todos estos cinco objetos, todos en objetos JavaScript, porque

79
00:04:26,560 --> 00:04:31,000
‫ya analizamos estos datos con solo una cadena.

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

81
00:04:31,833 --> 00:04:34,150
‫Entonces, el objeto de datos nuevamente es una

82
00:04:34,150 --> 00:04:36,450
‫matriz de, en este punto, cinco objetos.

83
00:04:36,450 --> 00:04:37,790
‫Entonces, lo que

84
00:04:37,790 --> 00:04:40,192
‫tenemos que hacer es básicamente recorrer esta

85
00:04:40,192 --> 00:04:42,977
‫matriz y, para cada uno de ellos, reemplazar

86
00:04:42,977 --> 00:04:45,770
‫los marcadores de posición en la plantilla con

87
00:04:45,770 --> 00:04:48,500
‫los datos reales del producto actual, ¿de acuerdo?

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

89
00:04:50,210 --> 00:04:53,533
‫Pongamos eso en código.

90
00:04:54,740 --> 00:04:59,740
‫Entonces, el objeto de datos, lo recorreremos con un mapa

91
00:05:00,160 --> 00:05:02,930
‫porque queremos devolver algo y

92
00:05:02,930 --> 00:05:06,243
‫ese algo, lo guardaremos en una

93
00:05:08,060 --> 00:05:11,637
‫nueva matriz, así que llamémoslo cardsHtml, ¿de

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

95
00:05:17,140 --> 00:05:22,140
‫Y estoy seguro de que está familiarizado con el método del mapa, ¿de acuerdo?

96
00:05:22,570 --> 00:05:26,147
‫Entonces, lo que hace el mapa es aceptar una función

97
00:05:26,147 --> 00:05:30,290
‫de devolución de llamada y esta función de devolución de llamada obtiene

98
00:05:30,290 --> 00:05:34,500
‫como argumento el elemento actual, por lo que el elemento del bucle

99
00:05:34,500 --> 00:05:36,423
‫actual y todo lo que

100
00:05:36,423 --> 00:05:39,880
‫devolvamos aquí se guardará en una matriz, ¿de acuerdo?

101
00:05:39,880 --> 00:05:44,240
‫Entonces, digamos que estamos haciendo un bucle sobre una matriz con

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

103
00:05:45,434 --> 00:05:48,074
‫que es el caso aquí, y para

104
00:05:48,074 --> 00:05:51,851
‫cada elemento, devolveremos algo, y ese algo se colocará

105
00:05:51,851 --> 00:05:55,990
‫en la misma posición pero en esta nueva matriz cardsHtml.

106
00:05:55,990 --> 00:05:59,970
‫Entonces, ¿qué haremos en cada una de estas iteraciones?

107
00:05:59,970 --> 00:06:03,048
‫Bueno, queremos reemplazar los marcadores de posición, ¿verdad?

108
00:06:03,048 --> 00:06:05,200
‫Y, de hecho, seguiré adelante

109
00:06:05,200 --> 00:06:06,843
‫y crearé una

110
00:06:06,843 --> 00:06:09,787
‫función para eso y se llamará replaceTemplate.

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

112
00:06:14,844 --> 00:06:18,761
‫Y replaceTemplate tomará el HTML de la tarjeta.

113
00:06:19,820 --> 00:06:22,203
‫Básicamente, la tempCard.

114
00:06:24,890 --> 00:06:28,713
‫Y tomará el objeto actual, así que element.

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

116
00:06:30,493 --> 00:06:33,703
‫Entonces, este elemento es lo que contiene los datos, ¿verdad?

117
00:06:34,900 --> 00:06:38,511
‫Entonces, nuevamente, cada uno de estos es ahora un

118
00:06:38,511 --> 00:06:42,423
‫objeto que contiene los datos en cada una de estas propiedades.

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

120
00:06:44,903 --> 00:06:49,430
‫Y no se preocupe, si no tiene 100% de sentido

121
00:06:49,430 --> 00:06:54,130
‫ahora, lo tendrá una vez que creemos esta función replaceTemplate, ¿de acuerdo?

122
00:06:54,130 --> 00:06:56,993
‫Así que hagámoslo ahora también aquí.

123
00:06:59,610 --> 00:07:03,100
‫Entonces replaceTemplate es una función que toma

124
00:07:03,100 --> 00:07:07,420
‫una plantilla, solo la llamaré temp aquí y, por

125
00:07:07,420 --> 00:07:09,673
‫supuesto, un producto.

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

127
00:07:15,780 --> 00:07:18,520
‫Así que creemos una variable

128
00:07:19,500 --> 00:07:21,350
‫llamada salida

129
00:07:22,510 --> 00:07:27,510
‫y esa será plantilla. reemplazar en nuestro marcador de posición.

130
00:07:29,620 --> 00:07:32,810
‫Y pondremos aquí todos los marcadores de

131
00:07:32,810 --> 00:07:36,343
‫posición que tenemos, comenzando con PRODUCTNAME, ¿de acuerdo?

132
00:07:39,130 --> 00:07:43,963
‫Y para que uno sea reemplazado por producto. NOMBRE DEL PRODUCTO.

133
00:07:45,230 --> 00:07:48,300
‫Entonces producto, que es este argumento que pasamos

134
00:07:48,300 --> 00:07:50,997
‫a la función,. PRODUCTNAME porque,

135
00:07:52,300 --> 00:07:54,890
‫bueno, ese es el nombre del campo

136
00:07:54,890 --> 00:07:57,350
‫donde está el nombre del producto.

137
00:07:57,350 --> 00:07:58,250
‫¿Bien?

138
00:07:58,250 --> 00:08:02,160
‫Entonces, sigue adelante y copia ese, y está bien.

139
00:08:02,160 --> 00:08:05,014
‫Ahora, un pequeño truco que

140
00:08:05,014 --> 00:08:08,150
‫tenemos que usar aquí es no

141
00:08:08,150 --> 00:08:11,730
‫usar las comillas, sino usar una expresión regular.

142
00:08:11,730 --> 00:08:13,380
‫Y eso se debe

143
00:08:13,380 --> 00:08:16,517
‫a que puede haber varias instancias de este marcador

144
00:08:16,517 --> 00:08:21,517
‫de posición, por lo que el truco es envolver esto en una expresión regular y

145
00:08:22,660 --> 00:08:24,940
‫usar la bandera g en él.

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

147
00:08:27,010 --> 00:08:31,920
‫por lo tanto, esto hará que todos estos marcadores de posición sean reemplazados

148
00:08:31,920 --> 00:08:34,530
‫y no solo el primero que ocurra.

149
00:08:34,530 --> 00:08:36,910
‫Entonces, esto reemplaza el nombre del

150
00:08:36,910 --> 00:08:39,663
‫producto, ahora sigamos adelante y reemplacemos todos los demás.

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

152
00:08:44,250 --> 00:08:48,140
‫salida = salida. Reemplazar, y ahora seguiremos

153
00:08:48,140 --> 00:08:49,900
‫adelante y

154
00:08:49,900 --> 00:08:54,900
‫copiaremos esto para hacer mi vida un poco más fácil.

155
00:08:56,360 --> 00:08:59,990
‫Entonces imagen, y se llama imagen y

156
00:09:01,538 --> 00:09:04,863
‫no en mayúsculas, así como así.

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

158
00:09:07,020 --> 00:09:09,070
‫Ahora aquí arriba, creé esta

159
00:09:09,070 --> 00:09:13,520
‫variable porque quería reemplazar el nombre de este producto en temp.

160
00:09:13,520 --> 00:09:16,785
‫Entonces, en el argumento, y no es una

161
00:09:16,785 --> 00:09:19,760
‫buena práctica manipular directamente los argumentos que

162
00:09:19,760 --> 00:09:21,760
‫pasamos a una función.

163
00:09:21,760 --> 00:09:24,180
‫Entonces creé una nueva variable

164
00:09:24,180 --> 00:09:25,750
‫y, a partir

165
00:09:25,750 --> 00:09:29,100
‫de ahora, manipularé la primera, ¿de acuerdo?

166
00:09:29,100 --> 00:09:31,820
‫Y por eso no es una constante, sino un let.

167
00:09:31,820 --> 00:09:35,424
‫Entonces, un let, podemos mutar después de que se haya creado, ¿de acuerdo?

168
00:09:35,424 --> 00:09:37,874
‫Ahora déjeme seguir adelante, copie un par de estos.

169
00:09:40,720 --> 00:09:44,930
‫Entonces precio, y aquí también se llama precio,

170
00:09:44,930 --> 00:09:46,653
‫luego tenemos

171
00:09:50,790 --> 00:09:52,613
‫de, luego tenemos nutrientes.

172
00:09:58,500 --> 00:10:00,290
‫Por supuesto que podría copiar todo esto,

173
00:10:00,290 --> 00:10:02,853
‫pero no voy a saltar de un lado a otro aquí.

174
00:10:06,930 --> 00:10:08,033
‫Entonces, cantidad, descripción

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

176
00:10:17,200 --> 00:10:19,990
‫probablemente cometeré un error aquí al escribir

177
00:10:19,990 --> 00:10:22,370
‫todo esto manualmente, pero en

178
00:10:23,410 --> 00:10:26,920
‫un producto pequeño, eso no es gran cosa.

179
00:10:26,920 --> 00:10:29,470
‫Entonces, en realidad, este no lo necesitamos,

180
00:10:29,470 --> 00:10:30,950
‫o realmente lo

181
00:10:30,950 --> 00:10:33,120
‫necesitamos porque para lo orgánico, por

182
00:10:33,120 --> 00:10:34,830
‫lo que falta lo orgánico,

183
00:10:34,830 --> 00:10:37,870
‫pero recuerde que lo orgánico fue un poco especial.

184
00:10:37,870 --> 00:10:41,743
‫Entonces, en este caso, si el producto no es orgánico,

185
00:10:42,900 --> 00:10:44,890
‫entonces producto. orgánico, si es

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

187
00:10:47,450 --> 00:10:50,510
‫así que recuerde, en realidad es una negrita.

188
00:10:50,510 --> 00:10:53,130
‫Entonces, por ejemplo, tenemos orgánico verdadero

189
00:10:53,130 --> 00:10:55,180
‫aquí, pero falso aquí.

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

191
00:10:56,013 --> 00:10:59,470
‫Entonces, si es falso, bueno, en ese caso,

192
00:10:59,470 --> 00:11:03,273
‫queremos reemplazar el NOT. ORGÁNICO.

193
00:11:08,340 --> 00:11:13,340
‫Entonces el NO. Marcador de posición ORGÁNICO con simplemente no orgánico.

194
00:11:17,630 --> 00:11:20,160
‫Tan no orgánico porque este es el nombre de

195
00:11:20,160 --> 00:11:22,313
‫la clase que les mostré antes.

196
00:11:24,070 --> 00:11:25,730
‫Entonces,

197
00:11:25,730 --> 00:11:28,153
‫es este.

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

199
00:11:30,520 --> 00:11:35,100
‫Entonces será reemplazado aquí, ¿de acuerdo?

200
00:11:35,100 --> 00:11:37,350
‫Y nuevamente, en caso de que

201
00:11:37,350 --> 00:11:39,797
‫no sea orgánico, bueno, entonces el nombre

202
00:11:39,797 --> 00:11:44,043
‫de clase NOT_ORGANIC estará aquí y este lote completo no será desplazado.

203
00:11:46,010 --> 00:11:47,623
‫¿Tiene sentido?

204
00:11:48,490 --> 00:11:49,760
‫Entonces, veamos

205
00:11:49,760 --> 00:11:52,410
‫si w ... ah, lo siento,

206
00:11:52,410 --> 00:11:53,410
‫el

207
00:11:53,410 --> 00:11:55,143
‫código real está debajo.

208
00:11:56,240 --> 00:11:59,890
‫Así que intentemos darle más sentido.

209
00:11:59,890 --> 00:12:03,910
‫Entonces, nuevamente, recorremos este objeto de datos que ya está

210
00:12:03,910 --> 00:12:06,840
‫aquí que contiene todos los productos y

211
00:12:06,840 --> 00:12:10,095
‫en cada iteración, reemplazaremos los marcadores de posición

212
00:12:10,095 --> 00:12:13,890
‫en la tarjeta de plantilla con el producto actual

213
00:12:13,890 --> 00:12:16,236
‫que es el elemento, ¿verdad?

214
00:12:16,236 --> 00:12:20,580
‫Y esta función de flecha lo devolverá implícitamente aquí.

215
00:12:20,580 --> 00:12:24,150
‫Entonces es lo mismo que volver aquí, ¿de acuerdo?

216
00:12:24,150 --> 00:12:26,130
‫Pero no es realmente

217
00:12:26,130 --> 00:12:29,341
‫necesario porque en una función de flecha, si no

218
00:12:29,341 --> 00:12:32,934
‫tiene las llaves, este valor aquí se devuelve automáticamente.

219
00:12:32,934 --> 00:12:35,782
‫De acuerdo, en caso de que

220
00:12:35,782 --> 00:12:40,782
‫no lo supieras, solo recordé que nos olvidamos de devolver

221
00:12:41,210 --> 00:12:43,383
‫la salida desde aquí.

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

223
00:12:46,193 --> 00:12:49,870
‫Entonces, por supuesto, ingresamos la plantilla y el producto, pero

224
00:12:49,870 --> 00:12:53,533
‫luego, por supuesto, tenemos que generar el HTML final.

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

226
00:12:55,533 --> 00:12:58,640
‫Y entonces eso se conecta aquí, y

227
00:12:58,640 --> 00:13:01,420
‫finalmente, todo esto aquí reemplazará una

228
00:13:01,420 --> 00:13:05,850
‫matriz, con los cinco HTML finales, cada uno para una

229
00:13:05,850 --> 00:13:08,090
‫de las cinco tarjetas.

230
00:13:08,090 --> 00:13:12,580
‫Entonces, cada uno para uno de los cinco productos, ¿de acuerdo?

231
00:13:12,580 --> 00:13:16,380
‫Ahora sigamos adelante y registremos esto en la

232
00:13:16,380 --> 00:13:21,010
‫consola antes de ponerlo en la página web de descripción general.

233
00:13:21,010 --> 00:13:25,433
‫Entonces cardsHtml solo para asegurarse de que todo funcione aquí.

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

235
00:13:30,190 --> 00:13:32,853
‫Entonces necesitamos recargar el servidor, no lo olvides.

236
00:13:35,810 --> 00:13:37,370
‫Todo esto funciona igual,

237
00:13:37,370 --> 00:13:39,940
‫pero ahora echemos un vistazo a la consola.

238
00:13:39,940 --> 00:13:43,710
‫Y estoy empezando a ver cosas bonitas aquí.

239
00:13:43,710 --> 00:13:45,500
‫Así que tenemos una

240
00:13:45,500 --> 00:13:48,350
‫matriz y, de hecho, hemos reemplazado las cosas.

241
00:13:48,350 --> 00:13:50,170
‫Entonces tenemos algunos aguacates aquí.

242
00:13:50,170 --> 00:13:52,720
‫Aquí dice FreshAvocados.

243
00:13:52,720 --> 00:13:55,773
‫Tiene los cuatro aguacates por caja,

244
00:13:57,020 --> 00:13:59,940
‫el precio, y sí, todo

245
00:13:59,940 --> 00:14:02,500
‫se ve muy bien.

246
00:14:02,500 --> 00:14:03,840
‫Y de hecho también es una matriz.

247
00:14:03,840 --> 00:14:05,860
‫Entonces tenemos esta primera

248
00:14:05,860 --> 00:14:09,140
‫figura, luego una coma y aquí comienza el siguiente

249
00:14:09,140 --> 00:14:12,380
‫elemento, así que la siguiente figura, ¿de acuerdo?

250
00:14:12,380 --> 00:14:15,920
‫Así que ahora tenemos una matriz de todos estos elementos, pero

251
00:14:15,920 --> 00:14:18,880
‫lo que queremos en realidad no es una

252
00:14:18,880 --> 00:14:22,273
‫matriz, sino una cadena grande que contenga todo este HTML.

253
00:14:24,250 --> 00:14:27,020
‫Entonces, eso es realmente muy simple de lograr.

254
00:14:27,020 --> 00:14:30,910
‫Todo lo que tenemos que hacer es al final de esta matriz,

255
00:14:30,910 --> 00:14:33,290
‫por lo que recordamos que todo esto

256
00:14:33,290 --> 00:14:36,283
‫aquí devuelve esta matriz que vemos aquí abajo, y

257
00:14:37,550 --> 00:14:39,600
‫al final todo lo que hacemos

258
00:14:39,600 --> 00:14:42,520
‫es unirnos con una cadena vacía, por lo que

259
00:14:42,520 --> 00:14:46,080
‫esto se unirá a todos. de estos elementos en una cadena.

260
00:14:46,080 --> 00:14:50,310
‫Y ahora cardsHtml es realmente una cadena.

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

262
00:14:51,143 --> 00:14:54,070
‫Y ahora tenemos nuestras tarjetas listas y

263
00:14:54,070 --> 00:14:56,790
‫la última pieza del rompecabezas

264
00:14:56,790 --> 00:15:00,740
‫es seguir adelante y reemplazar ese marcador de posición.

265
00:15:00,740 --> 00:15:04,110
‫Así que esto aquí, en realidad copiándolo ahora, así

266
00:15:04,110 --> 00:15:06,401
‫que ahora reemplazando este marcador de

267
00:15:06,401 --> 00:15:09,413
‫posición con el HTML que acabamos de crear.

268
00:15:11,050 --> 00:15:12,830
‫Así que llamémoslo salida aquí y

269
00:15:13,760 --> 00:15:15,150
‫todo lo que tenemos

270
00:15:15,150 --> 00:15:16,343
‫que hacer es

271
00:15:18,060 --> 00:15:22,423
‫tempOverview con solo una cadena que contiene el HTML de descripción general, ¿verdad? reemplácelo y reemplácelo con

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

273
00:15:27,330 --> 00:15:30,253
‫¿Bien?

274
00:15:32,490 --> 00:15:33,750
‫Eso es todo.

275
00:15:33,750 --> 00:15:34,583
‫Ahora todo lo

276
00:15:34,583 --> 00:15:38,620
‫que tenemos que hacer es responder realmente con la salida y no con lo que teníamos antes.

277
00:15:38,620 --> 00:15:41,933
‫Está bien, genial.

278
00:15:43,380 --> 00:15:44,730
‫Así que parecía un

279
00:15:44,730 --> 00:15:46,760
‫poco complejo, pero si lo piensas, espero

280
00:15:46,760 --> 00:15:48,430
‫que tenga mucho sentido para ti.

281
00:15:48,430 --> 00:15:51,563
‫Entonces, sigamos adelante y probemos esto ahora y

282
00:15:52,920 --> 00:15:55,200
‫espero no tener errores

283
00:15:56,040 --> 00:15:58,395
‫y algo salió mal, está bien.

284
00:15:58,395 --> 00:16:02,290
‫Entonces, ¿qué es eso?

285
00:16:02,290 --> 00:16:03,670
‫Bien, escribí mal reemplazar.

286
00:16:03,670 --> 00:16:07,000
‫Ese es uno de los errores más comunes que recibo todo el tiempo.

287
00:16:07,000 --> 00:16:10,863
‫Como un pequeño error de ortografía.

288
00:16:12,310 --> 00:16:15,003
‫Recarga y bam, aquí vamos.

289
00:16:16,060 --> 00:16:18,740
‫Así que aquí están nuestras cinco filas.

290
00:16:18,740 --> 00:16:22,670
‫Tan hermoso, hermoso, hermoso.

291
00:16:22,670 --> 00:16:24,902
‫Ahora no se parece mucho

292
00:16:24,902 --> 00:16:29,902
‫al original porque lo que falta es como estos, este orgánico aquí.

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

294
00:16:36,190 --> 00:16:37,023
‫Así que veamos qué pasa ahí.

295
00:16:37,023 --> 00:16:40,070
‫Además, por alguna razón, no veo

296
00:16:40,070 --> 00:16:44,570
‫la cantidad aquí, pero solo si no es orgánico.

297
00:16:44,570 --> 00:16:48,300
‫Bueno, eso es extraño, así que intentemos investigar lo que está

298
00:16:48,300 --> 00:16:49,371
‫sucediendo aquí.

299
00:16:49,371 --> 00:16:53,420
‫Entonces, el error probablemente esté en algún lugar

300
00:16:53,420 --> 00:16:55,620
‫de esta función replaceTemplate.

301
00:16:55,620 --> 00:16:58,820
‫Pero en realidad, todo parece correcto aquí.

302
00:16:58,820 --> 00:17:02,210
‫Así que también aquí en este reemplazo no orgánico.

303
00:17:02,210 --> 00:17:06,293
‫Entonces, echemos un vistazo a nuestra tarjeta de plantilla y,

304
00:17:07,220 --> 00:17:09,890
‫entonces, veo aquí que cuando hay

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

306
00:17:13,890 --> 00:17:17,830
‫NOT_ORGANIC, bueno, en realidad este cuadro completo aquí, por

307
00:17:17,830 --> 00:17:20,550
‫lo que también este H6 ya

308
00:17:20,550 --> 00:17:21,690
‫no será visible.

309
00:17:25,330 --> 00:17:26,783
‫Entonces, algo se

310
00:17:27,910 --> 00:17:30,980
‫ve mal aquí, echemos un vistazo al original

311
00:17:30,980 --> 00:17:33,080
‫solo para inspeccionar el HTML aquí.

312
00:17:34,870 --> 00:17:37,183
‫Así que el detalle de la

313
00:17:39,730 --> 00:17:43,330
‫tarjeta es este y nosotros, sí, tenemos tres detalles de

314
00:17:43,330 --> 00:17:45,150
‫la tarjeta aquí, mientras

315
00:17:45,150 --> 00:17:48,630
‫que en la plantilla, solo tenemos uno, ¿de acuerdo?

316
00:17:48,630 --> 00:17:51,773
‫Así que sigamos adelante y copiemos este.

317
00:17:52,670 --> 00:17:56,270
‫Entonces, en los detalles, puede copiar un elemento y

318
00:17:56,270 --> 00:17:59,160
‫luego, así como así, copiará todo el

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

320
00:18:03,300 --> 00:18:06,283
‫Así que así es como se supone que debe verse.

321
00:18:07,400 --> 00:18:11,053
‫Entonces, aquí debería decir orgánico y no cantidad por

322
00:18:13,220 --> 00:18:14,840
‫caja, ¿de acuerdo?

323
00:18:14,840 --> 00:18:18,193
‫Ese es probablemente el próximo.

324
00:18:18,193 --> 00:18:20,263
‫Entonces, arreglemos eso

325
00:18:27,780 --> 00:18:29,193
‫rápidamente.

326
00:18:30,730 --> 00:18:32,290
‫Y aquí,

327
00:18:32,290 --> 00:18:35,760
‫por supuesto, no queremos eso, así que

328
00:18:35,760 --> 00:18:38,920
‫sí, se ve mejor, ciérrelo, reinicie

329
00:18:38,920 --> 00:18:41,763
‫el servidor y revisemos eso nuevamente.

330
00:18:43,850 --> 00:18:48,143
‫Y ahora, bam, aquí vamos.

331
00:18:49,550 --> 00:18:51,660
‫Así que ahora está funcionando y, de hecho, funciona exactamente igual.

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

333
00:18:57,150 --> 00:18:58,370
‫Eso es, eso es realmente bueno.

334
00:18:58,370 --> 00:19:01,070
‫Sigamos adelante y eliminemos,

335
00:19:01,070 --> 00:19:06,070
‫por ejemplo, los aguacates solo para ver qué pasa.

336
00:19:06,990 --> 00:19:08,680
‫Solo voy a hacer

337
00:19:08,680 --> 00:19:13,680
‫el control, X para cortarlo, recargarlo aquí, y no cambia y

338
00:19:13,900 --> 00:19:17,410
‫eso es, por supuesto, porque recuerde que esto,

339
00:19:17,410 --> 00:19:20,040
‫estos datos en realidad solo se

340
00:19:20,890 --> 00:19:21,723
‫leen

341
00:19:22,770 --> 00:19:24,420
‫al principio cuando

342
00:19:24,420 --> 00:19:26,990
‫iniciamos la aplicación, ¿de acuerdo?

343
00:19:26,990 --> 00:19:30,490
‫Entonces, para que esto surta efecto, efectivamente necesitamos

344
00:19:30,490 --> 00:19:32,250
‫reiniciar la aplicación.

345
00:19:32,250 --> 00:19:36,635
‫Bien, no es gran cosa.

346
00:19:36,635 --> 00:19:38,853
‫Y ahora se ha ido, ¿de acuerdo?

347
00:19:40,760 --> 00:19:43,200
‫Porque ya no está en el

348
00:19:43,200 --> 00:19:45,900
‫archivo JSON que se lee en el

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

350
00:19:47,920 --> 00:19:49,630
‫aplicación, ¿de acuerdo?

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

352
00:19:52,883 --> 00:19:57,563
‫ponerlo aquí, guardarlo, reiniciar, abrir este tipo, recargarlo y aquí está de vuelta.

353
00:19:58,450 --> 00:20:02,630
‫Así que ahora realmente funciona de forma dinámica al leer todos

354
00:20:02,630 --> 00:20:05,580
‫estos datos directamente desde el archivo JSON.

355
00:20:05,580 --> 00:20:09,660
‫Entonces este funciona, revisemos los enlaces también

356
00:20:09,660 --> 00:20:12,860
‫en la esquina inferior izquierda.

357
00:20:12,860 --> 00:20:15,810
‫Verá que el ID cambia de cero, uno

358
00:20:15,810 --> 00:20:18,600
‫a, y así sucesivamente, pero si hago

359
00:20:18,600 --> 00:20:20,750
‫clic aquí, bueno, cuando aparece

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

361
00:20:22,320 --> 00:20:25,310
‫Y eso es porque nuestra ruta aún no está preparada para esto.

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

363
00:20:29,170 --> 00:20:30,010
‫Entonces, hagámoslo

364
00:20:30,010 --> 00:20:33,320
‫en el siguiente video e implementemos la página de detalles del

365
00:20:33,320 --> 00:20:35,780
‫producto para cada uno de estos productos.

366
00:20:35,780 --> 00:20:37,200
‫Entonces, no espere y sigamos adelante.