1
00:00:01,100 --> 00:00:03,220
‫Narrador: A continuación, aprenderá

2
00:00:03,220 --> 00:00:07,150
‫a integrar un mapa agradable que muestre todas las ubicaciones

3
00:00:07,150 --> 00:00:11,373
‫de un recorrido determinado en nuestro sitio web utilizando Mapbox.

4
00:00:12,730 --> 00:00:14,150
‫Pero antes de hacer

5
00:00:14,150 --> 00:00:18,160
‫eso, primero tenemos que arreglar un pequeño error que acabo de encontrar.

6
00:00:18,160 --> 00:00:20,840
‫Así que en este momento estamos en el tour de

7
00:00:20,840 --> 00:00:23,477
‫autocaravanas del parque, pero ves que aquí en realidad

8
00:00:23,477 --> 00:00:27,180
‫dice "The Forest Hiker", ¿de acuerdo? Y entonces, eso obviamente

9
00:00:27,180 --> 00:00:28,991
‫está mal y eso

10
00:00:28,991 --> 00:00:30,260
‫es

11
00:00:30,260 --> 00:00:33,700
‫porque aquí en nuestro controlador de gira, siempre

12
00:00:33,700 --> 00:00:36,900
‫estamos pasando este título, así que "The

13
00:00:36,900 --> 00:00:38,530
‫Forest Hiker Tour".

14
00:00:38,530 --> 00:00:42,193
‫Lo cual, por supuesto, no es correcto, así que arreglemos eso.

15
00:00:44,850 --> 00:00:47,780
‫Bien, digamos aquí

16
00:00:47,780 --> 00:00:50,190
‫tour. nombre y luego

17
00:00:51,400 --> 00:00:52,283
‫tour.

18
00:00:54,520 --> 00:00:56,283
‫Hagamos eso en mayúsculas en realidad.

19
00:00:57,150 --> 00:01:00,150
‫Entonces, ahora deberíamos ver la gira "The park

20
00:01:02,620 --> 00:01:05,070
‫camper" y sí, aquí está.

21
00:01:05,070 --> 00:01:07,740
‫Y ahora sobre ese mapa que

22
00:01:07,740 --> 00:01:10,050
‫se mostrará aquí en esta

23
00:01:10,050 --> 00:01:13,580
‫área vacía, usaremos una biblioteca muy agradable llamada "Mapbox"

24
00:01:13,580 --> 00:01:17,060
‫y esa biblioteca realmente se ejecuta en el front-end.

25
00:01:17,060 --> 00:01:19,030
‫Y así, en esta conferencia

26
00:01:19,030 --> 00:01:21,070
‫vamos a escribir un poco de código

27
00:01:21,070 --> 00:01:23,330
‫de front-end, y no tanto sobre el back-end.

28
00:01:23,330 --> 00:01:25,300
‫Pero esto sigue siendo muy

29
00:01:25,300 --> 00:01:27,890
‫importante porque ahora aprenderá a escribir JavaScript para

30
00:01:27,890 --> 00:01:31,730
‫el lado del cliente y luego a integrarlo en nuestras plantillas.

31
00:01:31,730 --> 00:01:32,710
‫¿Okey?

32
00:01:32,710 --> 00:01:34,190
‫Así que hagamos

33
00:01:35,030 --> 00:01:39,130
‫eso y, en primer lugar, recordemos que todos los datos, es decir,

34
00:01:39,130 --> 00:01:42,140
‫todos los activos que están disponibles en el cliente,

35
00:01:42,140 --> 00:01:44,170
‫están aquí en esta carpeta pública.

36
00:01:44,170 --> 00:01:47,830
‫Entonces, por ejemplo, nuestro archivo CSS, nuestras imágenes y

37
00:01:47,830 --> 00:01:51,050
‫también tenemos una carpeta aquí para JavaScript.

38
00:01:51,050 --> 00:01:53,470
‫Y actualmente está vacío, así que

39
00:01:53,470 --> 00:01:56,230
‫ahora creemos un nuevo archivo aquí llamado

40
00:01:58,697 --> 00:02:00,190
‫Mapbox.

41
00:02:03,000 --> 00:02:06,525
‫js ¿Está bien? Y esto básicamente es un archivo

42
00:02:06,525 --> 00:02:08,700
‫JavaScript que vamos a integrar en nuestro HTML

43
00:02:08,700 --> 00:02:11,250
‫y que luego se ejecutará en el lado del cliente.

44
00:02:11,250 --> 00:02:14,140
‫¿Está bien? Así que como JavaScript

45
00:02:14,140 --> 00:02:17,340
‫normal que has estado escribiendo toda tu vida (Risas) ¿Verdad?

46
00:02:17,340 --> 00:02:20,760
‫Pero por ahora, simplemente hagamos una consola simple. inicie sesión aquí antes

47
00:02:20,760 --> 00:02:23,343
‫de que realmente lo conectemos con nuestro back-end.

48
00:02:25,540 --> 00:02:30,540
‫Así que digamos consola. log hola desde el lado del cliente.

49
00:02:33,360 --> 00:02:34,333
‫Muy

50
00:02:35,400 --> 00:02:39,160
‫bien, y ahora integremoslo en nuestras plantillas.

51
00:02:39,160 --> 00:02:41,290
‫Ahora, podría parecer que el

52
00:02:41,290 --> 00:02:45,600
‫mejor lugar para hacer esta integración es aquí en nuestra plantilla base, ¿verdad?

53
00:02:45,600 --> 00:02:49,220
‫Pero, de hecho, solo queremos incluir el script Mapbox en

54
00:02:49,220 --> 00:02:51,230
‫la página del recorrido, ¿verdad?

55
00:02:51,230 --> 00:02:53,610
‫Entonces, ¿cómo podríamos hacer eso?

56
00:02:53,610 --> 00:02:56,070
‫Y la solución para eso es una vez más,

57
00:02:56,070 --> 00:02:59,040
‫extender un bloque aquí en nuestra plantilla base, así que

58
00:02:59,040 --> 00:03:01,190
‫voy a crear un nuevo bloque

59
00:03:01,190 --> 00:03:05,850
‫aquí que luego vamos a extender del recorrido. ¿Okey?

60
00:03:05,850 --> 00:03:08,523
‫Y de hecho, este bloque estará aquí,

61
00:03:10,670 --> 00:03:12,260
‫y lo llamo

62
00:03:12,260 --> 00:03:15,093
‫"cabeza" y todo este contenido estará allí.

63
00:03:16,020 --> 00:03:18,740
‫Ahora puede que se pregunte por qué hacemos eso,

64
00:03:18,740 --> 00:03:20,410
‫porque cuando ampliamos el

65
00:03:20,410 --> 00:03:22,700
‫bloque, el contenido que hay dentro desaparece.

66
00:03:22,700 --> 00:03:26,350
‫Entonces eso es lo que pasó aquí, ¿verdad?

67
00:03:26,350 --> 00:03:29,440
‫Pero en realidad hay otra forma de extender bloques, que

68
00:03:29,440 --> 00:03:32,350
‫luego simplemente agregará el nuevo contenido al final o

69
00:03:32,350 --> 00:03:34,060
‫al comienzo del bloque.

70
00:03:34,060 --> 00:03:37,190
‫¿Está bien? Así que veamos cómo podemos hacer eso.

71
00:03:37,190 --> 00:03:41,170
‫Y así, justo al comienzo de nuestra plantilla

72
00:03:41,170 --> 00:03:42,073
‫de

73
00:03:44,810 --> 00:03:46,120
‫gira, digamos ahora:

74
00:03:46,120 --> 00:03:50,900
‫block head, y en realidad decimos block append head, ¿de acuerdo?

75
00:03:50,900 --> 00:03:53,730
‫Y así, todo lo que escribamos en este

76
00:03:53,730 --> 00:03:55,960
‫bloque aquí se agregará al contenido que

77
00:03:55,960 --> 00:03:58,010
‫ya está en ese bloque.

78
00:03:58,010 --> 00:04:00,510
‫¿Okey? Y también podríamos

79
00:04:00,510 --> 00:04:04,500
‫usar "anteponer" y luego se agregaría al comienzo del bloque, ¿de acuerdo?

80
00:04:04,500 --> 00:04:07,690
‫Y ahora, todo lo que vamos a hacer aquí es agregar

81
00:04:07,690 --> 00:04:08,950
‫un nuevo guión.

82
00:04:08,950 --> 00:04:11,890
‫Entonces, usando una etiqueta de secuencia de comandos y

83
00:04:11,890 --> 00:04:14,410
‫luego especificando el atributo de origen, por

84
00:04:15,280 --> 00:04:23,760
‫ahora eso es "js / mapbox. js "¿de acuerdo?

85
00:04:23,760 --> 00:04:27,400
‫Entonces, nuevamente, esta plantilla aquí ya extiende nuestra plantilla

86
00:04:27,400 --> 00:04:28,800
‫base, y

87
00:04:28,800 --> 00:04:32,070
‫con esto aquí, básicamente podemos inyectar esta línea

88
00:04:32,070 --> 00:04:33,870
‫de código, en el

89
00:04:33,870 --> 00:04:37,450
‫bloque principal que ya está en nuestra plantilla base.

90
00:04:37,450 --> 00:04:40,930
‫Y entonces, agregamos eso, y entonces aparecerá aquí al final

91
00:04:40,930 --> 00:04:44,380
‫de este bloque de cabeza, así que aquí.

92
00:04:44,380 --> 00:04:46,453
‫Y de hecho, intentemos ahora.

93
00:04:47,940 --> 00:04:49,053
‫Entonces, cuando vuelva

94
00:04:50,520 --> 00:04:53,610
‫a cargar, ahora deberíamos obtener ese mensaje en nuestra

95
00:04:53,610 --> 00:04:56,760
‫consola y, de hecho, "Hola desde el lado del

96
00:04:56,760 --> 00:04:57,593
‫cliente".

97
00:04:58,700 --> 00:05:02,080
‫Genial. A continuación, queremos tener acceso a los datos

98
00:05:02,080 --> 00:05:03,850
‫de ubicación del recorrido que

99
00:05:03,850 --> 00:05:06,140
‫estamos tratando de mostrar actualmente. aquí

100
00:05:06,140 --> 00:05:08,170
‫mismo en el archivo JavaScript.

101
00:05:08,170 --> 00:05:10,390
‫Entonces, ¿cómo vas a hacer eso?

102
00:05:10,390 --> 00:05:13,590
‫Bueno, entonces podemos hacer una solicitud Ajax, así que

103
00:05:13,590 --> 00:05:16,410
‫básicamente una llamada a nuestra API y obtener

104
00:05:16,410 --> 00:05:17,870
‫los datos desde allí.

105
00:05:17,870 --> 00:05:20,760
‫Pero eso no es realmente necesario en este caso.

106
00:05:20,760 --> 00:05:23,590
‫Entonces, déjame mostrarte un buen truco.

107
00:05:23,590 --> 00:05:25,750
‫Entonces, aquí en nuestra plantilla de

108
00:05:25,750 --> 00:05:28,870
‫recorrido, ya tenemos todos los datos sobre el recorrido en

109
00:05:28,870 --> 00:05:30,840
‫sí, por lo que ahora

110
00:05:30,840 --> 00:05:33,270
‫podemos simplemente poner esos datos en nuestro

111
00:05:33,270 --> 00:05:36,630
‫HTML para que JavaScript pueda leerlos desde allí, ¿de acuerdo?

112
00:05:36,630 --> 00:05:39,570
‫Básicamente, vamos a exponer los datos de ubicación,

113
00:05:39,570 --> 00:05:42,327
‫aquí mismo como una cadena en el HTML

114
00:05:42,327 --> 00:05:45,080
‫y nuestro JavaScript los recogerá desde

115
00:05:45,080 --> 00:05:49,500
‫allí sin tener que hacerlo, como cualquier llamada a la API por separado.

116
00:05:49,500 --> 00:05:52,760
‫Entonces, bajemos aquí a nuestra

117
00:05:52,760 --> 00:05:56,270
‫clase o sección de mapas, ¿de acuerdo?

118
00:05:56,270 --> 00:05:59,950
‫Entonces, esta sección aquí, y ya tiene un elemento Diff

119
00:05:59,950 --> 00:06:01,460
‫con una clase

120
00:06:01,460 --> 00:06:05,410
‫de mapa, y verá por qué es una ID un poco

121
00:06:05,410 --> 00:06:08,800
‫más tarde, ¿de acuerdo? Pero por ahora quiero especificar

122
00:06:08,800 --> 00:06:10,870
‫un atributo de datos aquí, ¿de acuerdo?

123
00:06:10,870 --> 00:06:13,470
‫Entonces, hay un truco muy bueno en JavaScript

124
00:06:13,470 --> 00:06:17,030
‫donde podemos especificar un atributo de datos en HTML, y luego

125
00:06:17,030 --> 00:06:19,580
‫leer dicho atributo usando JavaScript de una

126
00:06:19,580 --> 00:06:21,100
‫manera muy fácil.

127
00:06:21,100 --> 00:06:23,010
‫Y así es como

128
00:06:23,010 --> 00:06:25,710
‫funciona, entonces podemos decir "datos /" y

129
00:06:25,710 --> 00:06:27,730
‫luego aquí como queramos llamarlo,

130
00:06:27,730 --> 00:06:29,593
‫en este caso decimos

131
00:06:31,800 --> 00:06:36,560
‫"ubicaciones", ¿de acuerdo? Y luego lo configuramos para nuestro recorrido. ubicaciones.

132
00:06:36,560 --> 00:06:38,410
‫Ahora, antes de

133
00:06:38,410 --> 00:06:42,840
‫hacer eso, necesitamos transformar esa matriz en una cadena, ¿verdad?

134
00:06:42,840 --> 00:06:45,540
‫Entonces, echemos un vistazo rápido a eso.

135
00:06:45,540 --> 00:06:50,170
‫Entonces, nuestras ubicaciones son toda esta matriz con

136
00:06:50,170 --> 00:06:51,930
‫estos objetos allí.

137
00:06:51,930 --> 00:06:55,320
‫Pero en HTML, por supuesto, no podemos tener matrices u

138
00:06:55,320 --> 00:06:58,480
‫objetos ni nada de eso, así que lo que

139
00:06:58,480 --> 00:07:00,010
‫tenemos que hacer

140
00:07:00,010 --> 00:07:02,740
‫es convertir todo eso en una cadena.

141
00:07:02,740 --> 00:07:05,003
‫Y eso, afortunadamente, es bastante fácil.

142
00:07:06,230 --> 00:07:12,513
‫Todo lo que tenemos que hacer es "JSON. stringify "¿de acuerdo?

143
00:07:13,417 --> 00:07:16,960
‫Y luego aquí gira. ubicación, o en realidad

144
00:07:16,960 --> 00:07:17,793
‫esas

145
00:07:17,793 --> 00:07:19,610
‫son ubicaciones. ¿Está bien?

146
00:07:19,610 --> 00:07:21,063
‫Y si lo

147
00:07:23,040 --> 00:07:28,040
‫guardamos ahora, vamos a abrirlo aquí e inspeccionar este mapa aquí, y ahora

148
00:07:28,290 --> 00:07:31,120
‫verá las ubicaciones de los datos, y

149
00:07:31,120 --> 00:07:33,620
‫tenemos esta cadena enorme aquí, que

150
00:07:33,620 --> 00:07:36,493
‫básicamente contiene todos nuestros datos de ubicación.

151
00:07:38,050 --> 00:07:39,670
‫Muy bien, y

152
00:07:39,670 --> 00:07:42,420
‫ahora en nuestro JavaScript podemos conseguirlo

153
00:07:42,420 --> 00:07:44,023
‫muy fácilmente.

154
00:07:46,950 --> 00:07:49,670
‫Entonces, las ubicaciones están en

155
00:07:50,670 --> 00:07:52,983
‫document. getElementById y luego

156
00:07:56,260 --> 00:07:59,810
‫map, y ahora aquí va la parte del truco, porque lo

157
00:07:59,810 --> 00:08:04,800
‫que sea que pongamos en un atributo de datos como este, se almacenará en la

158
00:08:04,800 --> 00:08:07,820
‫propiedad del conjunto de datos y, en este caso,

159
00:08:07,820 --> 00:08:11,020
‫en el conjunto de datos. ubicaciones, porque

160
00:08:11,020 --> 00:08:15,813
‫se llama datos / o ubicación de datos.

161
00:08:16,980 --> 00:08:20,470
‫¿Okey? Así que

162
00:08:20,470 --> 00:08:26,533
‫así, conjunto de datos. ubicaciones, ¿de acuerdo?

163
00:08:26,533 --> 00:08:28,210
‫Y ahora tenemos todos estos

164
00:08:28,210 --> 00:08:29,453
‫errores aquí provenientes

165
00:08:30,347 --> 00:08:33,480
‫de ESlint, y eso es porque ESlint está configurado

166
00:08:33,480 --> 00:08:35,900
‫para Node. js y no

167
00:08:35,900 --> 00:08:37,900
‫para JavaScript, por lo que

168
00:08:37,900 --> 00:08:40,973
‫lo que podemos hacer aquí es básicamente deshabilitar

169
00:08:41,923 --> 00:08:46,210
‫ESlint para todo este archivo, hasta que digamos básicamente con un

170
00:08:48,300 --> 00:08:52,670
‫comentario al principio aquí, ESlint deshabilitar y entonces sí, entonces entenderá esto

171
00:08:52,670 --> 00:08:57,000
‫y lo cambiará por completo. desactivado para todo este archivo, ¿de acuerdo?

172
00:08:57,000 --> 00:08:59,100
‫Entonces, esos son los datos de

173
00:08:59,100 --> 00:09:01,320
‫ubicación aquí que acabamos de poner en

174
00:09:01,320 --> 00:09:03,460
‫nuestro HTML, pero recuerde que es una

175
00:09:03,460 --> 00:09:07,285
‫cadena y, por lo tanto, debemos convertirla de nuevo a JSON, y

176
00:09:07,285 --> 00:09:09,660
‫luego a JSON. analizar y

177
00:09:11,410 --> 00:09:13,683
‫luego todo lo que hay aquí.

178
00:09:15,960 --> 00:09:20,160
‫Muy bien, y ahora echemos un vistazo a eso solo para

179
00:09:20,160 --> 00:09:22,510
‫ver si todo está funcionando correctamente.

180
00:09:26,720 --> 00:09:27,823
‫Recarguemos, y

181
00:09:28,770 --> 00:09:32,873
‫ahora algo salió mal aquí en nuestro archivo Mapbox, bueno, eso

182
00:09:33,740 --> 00:09:36,063
‫también parece correcto en realidad, así

183
00:09:37,120 --> 00:09:42,120
‫que probemos si realmente se llama mapa aquí y, de hecho, es una

184
00:09:45,030 --> 00:09:47,830
‫ID con mapa, por lo que creo

185
00:09:47,830 --> 00:09:51,160
‫que probablemente el problema es que en ese momento

186
00:09:51,160 --> 00:09:53,360
‫llamamos o obtenemos el elemento

187
00:09:53,360 --> 00:09:55,803
‫por ID, así que esto aquí,

188
00:09:56,690 --> 00:09:58,560
‫así que probablemente en

189
00:09:58,560 --> 00:10:01,210
‫este momento el DOM no esté ya

190
00:10:01,210 --> 00:10:04,060
‫cargado, ¿de acuerdo? Y eso es

191
00:10:04,060 --> 00:10:08,530
‫porque tenemos nuestro script integrado justo al principio del archivo, por lo que este

192
00:10:08,530 --> 00:10:09,963
‫script aquí está justo

193
00:10:11,440 --> 00:10:14,300
‫en la cabecera, mientras que en realidad debería estar

194
00:10:14,300 --> 00:10:17,580
‫al final de la página. ¿Okey?

195
00:10:17,580 --> 00:10:19,760
‫Así que déjame copiar este aquí

196
00:10:19,760 --> 00:10:21,720
‫y ponerlo manualmente en la

197
00:10:21,720 --> 00:10:24,580
‫base, así que lo copiaré y lo comentaré,

198
00:10:24,580 --> 00:10:27,610
‫pero no te preocupes, todavía usaremos esta técnica de

199
00:10:27,610 --> 00:10:31,270
‫agregar bloques aquí un poco más adelante en el video, porque

200
00:10:31,270 --> 00:10:34,100
‫hay algunas cosas que vienen de Mapbox que

201
00:10:34,100 --> 00:10:35,750
‫todavía necesitamos poner en la

202
00:10:36,920 --> 00:10:40,170
‫cabeza, ¿de acuerdo? Pero, por ahora, coloquemos este

203
00:10:40,170 --> 00:10:42,483
‫script aquí, en la parte inferior de la página.

204
00:10:44,600 --> 00:10:45,433
‫¿Okey?

205
00:10:47,220 --> 00:10:48,750
‫Eso (risas) por

206
00:10:48,750 --> 00:10:51,200
‫supuesto, solo quería ir a otro

207
00:10:51,200 --> 00:10:54,360
‫archivo, para poder guardarlo para que el servidor

208
00:10:54,360 --> 00:10:56,180
‫realmente se recargue porque estos

209
00:10:56,180 --> 00:10:57,880
‫archivos pug, como probablemente

210
00:10:57,880 --> 00:11:00,610
‫hayas notado aquí, no activan un reinicio

211
00:11:00,610 --> 00:11:03,010
‫de nuestro servidor. , ¿está bien?

212
00:11:03,010 --> 00:11:06,805
‫De todos modos, tengo la esperanza de que ahora vaya a

213
00:11:06,805 --> 00:11:09,150
‫funcionar y, de hecho, lo hace.

214
00:11:09,150 --> 00:11:11,070
‫Tenemos una variedad aquí

215
00:11:11,070 --> 00:11:15,060
‫y, de hecho, estas son las cuatro ubicaciones de nuestro recorrido.

216
00:11:15,060 --> 00:11:18,190
‫Bien, ahora tenemos todo muy bien integrado y

217
00:11:18,190 --> 00:11:21,170
‫listo para integrar Mapbox y crear nuestro

218
00:11:21,170 --> 00:11:23,010
‫propio mapa aquí.

219
00:11:23,010 --> 00:11:25,960
‫Pero para no crear un video demasiado largo,

220
00:11:25,960 --> 00:11:28,113
‫lo haré en el siguiente.