1
00:00:01,450 --> 00:00:03,480
‫Instructor: En este

2
00:00:03,480 --> 00:00:07,408
‫video, aprenderemos cómo analizar algunas variables de la

3
00:00:07,408 --> 00:00:11,563
‫URL para poder construir la página del producto.

4
00:00:13,320 --> 00:00:15,690
‫Así que recuerde cómo al

5
00:00:15,690 --> 00:00:18,733
‫principio importé el módulo de URL,

6
00:00:20,120 --> 00:00:22,080
‫así que este

7
00:00:22,080 --> 00:00:26,663
‫aquí, para poder analizar las variables directamente de la URL.

8
00:00:28,420 --> 00:00:33,420
‫Bueno. Entonces, como primer paso, vamos

9
00:00:34,040 --> 00:00:35,990
‫a registrar

10
00:00:38,100 --> 00:00:42,080
‫una vez más "req. url "a la consola y

11
00:00:44,250 --> 00:00:47,970
‫luego otra cosa que quiero registrar es en realidad ...

12
00:00:51,070 --> 00:00:55,843
‫el resultado de usar "url. analizar "en esta URL.

13
00:00:58,780 --> 00:01:03,290
‫Entonces, nuevamente, analizar es básicamente analizar las variables

14
00:01:03,290 --> 00:01:05,703
‫fuera de la URL.

15
00:01:06,710 --> 00:01:08,590
‫Entonces, algo como esto.

16
00:01:08,590 --> 00:01:13,410
‫Entonces, lo que queremos es "id = 0", correcto, porque

17
00:01:13,410 --> 00:01:17,970
‫ahora mismo, el "req. url "es todo esto, por

18
00:01:17,970 --> 00:01:19,480
‫lo que esta

19
00:01:19,480 --> 00:01:22,310
‫URL completa y, por supuesto, no tenemos

20
00:01:22,310 --> 00:01:24,190
‫ninguna ruta para eso.

21
00:01:24,190 --> 00:01:29,190
‫Entonces, nada aquí en este tipo de enrutadores que tenemos aquí,

22
00:01:30,510 --> 00:01:33,750
‫en realidad coincide con esta URL completa.

23
00:01:33,750 --> 00:01:35,797
‫Por eso aparece el mensaje "¡Página no encontrada! "Y esa es

24
00:01:36,910 --> 00:01:40,663
‫también la razón por la que tenemos que cambiar algunas cosas aquí.

25
00:01:43,240 --> 00:01:46,620
‫Bien, déjeme analizar la URL aquí, para que pueda

26
00:01:46,620 --> 00:01:48,380
‫ver el resultado

27
00:01:48,380 --> 00:01:51,090
‫y ver qué debemos hacer a continuación.

28
00:01:51,090 --> 00:01:54,800
‫También necesito pasar "verdadero" aquí en esta función de análisis

29
00:01:54,800 --> 00:01:58,430
‫para analizar realmente la consulta en un objeto.

30
00:01:58,430 --> 00:02:02,260
‫Entonces, con consulta, me refiero a esta parte aquí.

31
00:02:02,260 --> 00:02:05,163
‫De acuerdo, esto se llama cadena de consulta,

32
00:02:06,270 --> 00:02:10,480
‫de acuerdo, y eso es lo que estamos analizando efectivamente, esa

33
00:02:10,480 --> 00:02:12,363
‫parte de la URL.

34
00:02:14,260 --> 00:02:15,600
‫Así que reinícielo

35
00:02:17,810 --> 00:02:21,463
‫y echemos un vistazo a los registros que obtenemos.

36
00:02:23,490 --> 00:02:26,420
‫Entonces, primero está el "req. url "y esto

37
00:02:26,420 --> 00:02:29,510
‫es lo que esperábamos, correcto, y aquí está

38
00:02:29,510 --> 00:02:33,133
‫el resultado de hacer" url. parse "Entonces obtenemos

39
00:02:34,810 --> 00:02:38,030
‫el objeto de consulta aquí, y

40
00:02:38,030 --> 00:02:41,130
‫aquí, tenemos un objeto agradable que

41
00:02:41,130 --> 00:02:44,760
‫nos dice que id es 0, correcto, así

42
00:02:44,760 --> 00:02:46,950
‫que eso es hermoso.

43
00:02:46,950 --> 00:02:49,400
‫Y luego, justo debajo de eso, tenemos

44
00:02:49,400 --> 00:02:51,620
‫la segunda pieza que necesitamos,

45
00:02:51,620 --> 00:02:55,380
‫que es solo el nombre de la ruta, está bien.

46
00:02:55,380 --> 00:02:58,183
‫Entonces, nuestra ruta usa este nombre de

47
00:02:58,183 --> 00:03:02,000
‫ruta, así que solo "/ producto", y luego necesitamos conocer

48
00:03:02,000 --> 00:03:05,810
‫la consulta para responder en consecuencia al id de 0.

49
00:03:05,810 --> 00:03:07,670
‫Entonces, en este caso, por

50
00:03:07,670 --> 00:03:11,063
‫ejemplo, cargar el producto de aguacate, que es el primero.

51
00:03:11,959 --> 00:03:14,440
‫Pero si fuera el

52
00:03:14,440 --> 00:03:19,070
‫número dos, por ejemplo, entonces cargar este brócoli, ¿no?

53
00:03:19,070 --> 00:03:21,770
‫Entonces, esta consulta y este nombre de ruta es

54
00:03:21,770 --> 00:03:23,943
‫lo que usaremos para hacer eso.

55
00:03:25,860 --> 00:03:29,740
‫Entonces, este ya no lo necesitamos.

56
00:03:29,740 --> 00:03:33,010
‫Tampoco queremos registrar nada en la consola

57
00:03:33,010 --> 00:03:35,530
‫ahora porque lo que queremos

58
00:03:35,530 --> 00:03:38,630
‫hacer es crear dos variables, llamadas consulta

59
00:03:39,690 --> 00:03:40,723
‫y ...

60
00:03:41,679 --> 00:03:43,150
‫pathName.

61
00:03:43,150 --> 00:03:46,903
‫Y podemos hacerlo usando las pilas, la estructuración.

62
00:03:49,200 --> 00:03:51,560
‫Entonces, nuevamente, espero que esté

63
00:03:51,560 --> 00:03:56,560
‫familiarizado con esta sintaxis aquí, y así es como funciona realmente.

64
00:03:57,380 --> 00:04:02,380
‫Entonces, este objeto aquí, tiene query y pathName.

65
00:04:02,780 --> 00:04:04,880
‫Entonces, al usar esta estructuración

66
00:04:04,880 --> 00:04:07,521
‫de esta manera, con estos nombres de propiedad

67
00:04:07,521 --> 00:04:10,050
‫exactos, en realidad tiene que ser así.

68
00:04:10,050 --> 00:04:12,150
‫Entonces, con estos dos

69
00:04:12,150 --> 00:04:15,000
‫nombres de propiedad exactos, creará estas

70
00:04:15,000 --> 00:04:18,254
‫dos variables, una llamada consulta y otra llamada

71
00:04:18,254 --> 00:04:22,230
‫nombre de ruta, con exactamente los valores que tenemos aquí.

72
00:04:22,230 --> 00:04:24,300
‫Así que la consulta será esta

73
00:04:24,300 --> 00:04:28,113
‫y el nombre de la ruta será "/ producto", en este caso.

74
00:04:29,580 --> 00:04:31,880
‫Excelente. Ahora todo lo que

75
00:04:31,880 --> 00:04:34,733
‫tengo que hacer es seguir adelante y reemplazar esto de aquí por este.

76
00:04:41,370 --> 00:04:42,203
‫Está bien.

77
00:04:45,572 --> 00:04:47,100
‫Eliminemos este, y

78
00:04:47,100 --> 00:04:51,080
‫solo para asegurarnos, registremos la consulta en la consola en caso

79
00:04:51,080 --> 00:04:53,933
‫de que estemos en la página del producto.

80
00:04:55,597 --> 00:04:59,373
‫"consola. log "el objeto de consulta.

81
00:05:05,070 --> 00:05:07,800
‫Y ahora, volvemos a encontrar la página

82
00:05:10,110 --> 00:05:13,360
‫y también tenemos que consultar con este id 0.

83
00:05:13,360 --> 00:05:15,350
‫Tan perfecto. Así que

84
00:05:15,350 --> 00:05:18,350
‫ahora estamos listos para crear esta página usando nuestra plantilla.

85
00:05:18,350 --> 00:05:19,923
‫Y eso debería ser

86
00:05:19,923 --> 00:05:23,710
‫muy simple, en realidad mucho más simple que la página de

87
00:05:23,710 --> 00:05:25,480
‫descripción general, porque aquí no

88
00:05:25,480 --> 00:05:28,000
‫tenemos que hacer ninguno de estos locos

89
00:05:28,000 --> 00:05:30,500
‫bucles aquí porque hay una plantilla simple,

90
00:05:30,500 --> 00:05:33,543
‫todo lo que tenemos que hacer es reemplazar todo.

91
00:05:36,040 --> 00:05:39,860
‫Entonces, en el primer paso, averigüemos cuál es

92
00:05:39,860 --> 00:05:42,903
‫el producto que queremos mostrar.

93
00:05:46,910 --> 00:05:50,130
‫Así que estoy creando una variable llamada producto,

94
00:05:50,130 --> 00:05:54,080
‫que será igual al objeto de datos en la

95
00:05:56,770 --> 00:06:00,827
‫posición "consulta. identificación. "Está

96
00:06:02,680 --> 00:06:04,080
‫bien, ¿tiene sentido?

97
00:06:04,080 --> 00:06:06,570
‫Entonces, el objeto de datos es una

98
00:06:06,570 --> 00:06:09,950
‫matriz, y luego recuperaremos el elemento en la posición que

99
00:06:09,950 --> 00:06:13,010
‫proviene de la consulta. identificación.

100
00:06:13,010 --> 00:06:15,130
‫Entonces, si es cero, entonces es el

101
00:06:15,130 --> 00:06:17,663
‫elemento cero, si es dos, es el elemento número dos.

102
00:06:19,170 --> 00:06:21,389
‫De acuerdo, esta es la

103
00:06:21,389 --> 00:06:26,389
‫forma más sencilla de recuperar un elemento basado en una cadena de consulta.

104
00:06:26,520 --> 00:06:28,120
‫Ahora, otra cosa

105
00:06:28,120 --> 00:06:32,493
‫que debemos hacer es obtener exactamente el mismo Head aquí, está

106
00:06:36,800 --> 00:06:39,990
‫bien, y finalmente simplemente creamos nuestra salida.

107
00:06:43,196 --> 00:06:46,279
‫Entonces, la salida es simplemente replaceTemplate,

108
00:06:49,383 --> 00:06:51,898
‫y el HTML que

109
00:06:51,898 --> 00:06:55,981
‫necesitamos pasar es tempOverview, o en realidad tempProduct, y

110
00:06:58,340 --> 00:07:01,257
‫lo que pasamos es el producto.

111
00:07:03,960 --> 00:07:05,003
‫¡Y eso es!

112
00:07:08,230 --> 00:07:12,330
‫Ahora solo enviamos la salida como resultado, o como una

113
00:07:12,330 --> 00:07:15,850
‫respuesta en realidad, y eso es todo.

114
00:07:15,850 --> 00:07:18,900
‫Entonces esta parte aquí tiene sentido, ¿verdad?

115
00:07:18,900 --> 00:07:22,550
‫Entonces, de nuevo, replaceTemplate espera que pongamos

116
00:07:22,550 --> 00:07:25,513
‫una plantilla y un producto.

117
00:07:26,350 --> 00:07:30,223
‫Entonces, un producto es un objeto con todas estas propiedades.

118
00:07:31,250 --> 00:07:33,610
‫Y entonces ese producto viene aquí directamente desde

119
00:07:33,610 --> 00:07:35,223
‫este objeto de datos.

120
00:07:36,720 --> 00:07:40,463
‫Entonces, en replaceTemplate, pasamos el producto de la plantilla,

121
00:07:41,670 --> 00:07:45,140
‫por lo que este, que cargamos desde

122
00:07:45,140 --> 00:07:48,703
‫el archivo desde el principio, y luego el producto.

123
00:07:49,760 --> 00:07:53,920
‫Como mencioné, por supuesto, el que viene de la matriz.

124
00:07:53,920 --> 00:07:56,450
‫Y así debería ser realmente.

125
00:07:56,450 --> 00:07:58,560
‫Entonces, si la plantilla es correcta, entonces

126
00:07:58,560 --> 00:08:00,640
‫esto debería estar funcionando ahora.

127
00:08:00,640 --> 00:08:02,763
‫Entonces, reiniciando el servidor,

128
00:08:04,000 --> 00:08:05,229
‫volvamos a

129
00:08:05,229 --> 00:08:07,673
‫cargarlo, y de hecho, aquí vamos.

130
00:08:08,760 --> 00:08:11,810
‫Entonces, eso es genial, eso me

131
00:08:11,810 --> 00:08:14,609
‫hace muy feliz, cuando este

132
00:08:14,609 --> 00:08:18,633
‫tipo de cosas funcionan así, hermoso, todo es perfecto.

133
00:08:19,930 --> 00:08:24,020
‫También este botón de retroceso, oh, eso no funciona.

134
00:08:24,020 --> 00:08:29,020
‫Bueno. Entonces necesitamos cambiar la plantilla HTML aquí.

135
00:08:30,490 --> 00:08:34,703
‫Entonces, ¿dónde está eso? Está en producto,

136
00:08:35,660 --> 00:08:39,490
‫y este enlace aquí, dónde está eso, ah.

137
00:08:39,490 --> 00:08:42,440
‫Sí, básicamente no apunta a ninguna parte,

138
00:08:42,440 --> 00:08:46,347
‫y lo que queremos es volver a la descripción general, ¿no?

139
00:08:50,460 --> 00:08:53,933
‫Reinicie el servidor, vuelva a cargar esta

140
00:08:55,110 --> 00:08:57,543
‫página y ahora funciona.

141
00:08:59,200 --> 00:09:01,940
‫Probémoslo sin el parche orgánico y, de

142
00:09:01,940 --> 00:09:03,910
‫hecho, no está aquí.

143
00:09:03,910 --> 00:09:05,970
‫Antes lo era y ahora se ha ido.

144
00:09:05,970 --> 00:09:07,900
‫Y todas estas cosas aquí, por

145
00:09:07,900 --> 00:09:12,803
‫supuesto, son dinámicas provenientes de ese archivo JSON. Sí.

146
00:09:15,090 --> 00:09:17,650
‫Entonces todo esto funciona. Hermosa.

147
00:09:17,650 --> 00:09:20,160
‫Eso es realmente genial.

148
00:09:20,160 --> 00:09:25,150
‫Y nuestro proyecto, podemos decir ahora, está realmente terminado.

149
00:09:25,150 --> 00:09:28,450
‫Solo una pequeña cosa más que quiero

150
00:09:28,450 --> 00:09:32,740
‫hacer, que es solo mostrarles algo bueno que podemos hacer.

151
00:09:32,740 --> 00:09:35,740
‫Pero además de eso, nuestro proyecto está funcionando.

152
00:09:35,740 --> 00:09:39,135
‫Así que felicidades, acabas de terminar tu primer nodo

153
00:09:39,135 --> 00:09:43,430
‫con un aspecto realmente atractivo. Proyecto js.

154
00:09:43,430 --> 00:09:45,520
‫Y no fue tan difícil, ¿verdad?

155
00:09:45,520 --> 00:09:47,550
‫Quiero decir, algunas de

156
00:09:47,550 --> 00:09:52,550
‫las cosas que hicimos están más relacionadas con la programación de JavaScript en

157
00:09:52,670 --> 00:09:56,910
‫general, y no tanto con node. js en sí, ¿verdad?

158
00:09:56,910 --> 00:10:01,370
‫Así que cosas como esta aquí, que tal vez fueron un poco

159
00:10:01,370 --> 00:10:04,180
‫confusas, pero nuevamente, al final del día,

160
00:10:04,180 --> 00:10:07,010
‫eso es solo JavaScript normal, ¿no es así?

161
00:10:07,010 --> 00:10:09,060
‫Nuevamente, la funcionalidad está ahí, solo

162
00:10:09,060 --> 00:10:11,740
‫hay una pequeña cosa más que quiero

163
00:10:11,740 --> 00:10:15,283
‫hacer en el siguiente video, y cuando llegues a esa,

164
00:10:15,283 --> 00:10:17,083
‫te diré qué es.