1
00:00:01,100 --> 00:00:03,220
‫Narrador: Em seguida, você

2
00:00:03,220 --> 00:00:07,150
‫aprenderá como integrar um bom mapa que exibe todos os

3
00:00:07,150 --> 00:00:11,373
‫locais de um determinado passeio em nosso site usando o Mapbox.

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

5
00:00:14,150 --> 00:00:18,160
‫fazermos isso, primeiro precisamos corrigir um pequeno bug que acabei de encontrar.

6
00:00:18,160 --> 00:00:20,840
‫Então, agora mesmo, estamos no tour do parque de

7
00:00:20,840 --> 00:00:23,477
‫campismo, mas você vê que aqui na verdade

8
00:00:23,477 --> 00:00:27,180
‫diz "The Forest Hiker" ok? E então, isso está

9
00:00:27,180 --> 00:00:28,991
‫obviamente errado e então,

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

11
00:00:30,260 --> 00:00:33,700
‫é porque aqui em nosso get tour handler,

12
00:00:33,700 --> 00:00:36,900
‫estamos sempre passando neste título, então "The

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

14
00:00:38,530 --> 00:00:42,193
‫O que, claro, não está correto, então vamos consertar isso.

15
00:00:44,850 --> 00:00:47,780
‫Ok, vamos dizer aqui um

16
00:00:47,780 --> 00:00:50,190
‫tour. nome e

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

18
00:00:54,520 --> 00:00:56,283
‫Vamos fazer isso em letras maiúsculas, na verdade.

19
00:00:57,150 --> 00:01:00,150
‫E então, agora devemos ver o tour "O acampamento

20
00:01:02,620 --> 00:01:05,070
‫do parque" e sim, aqui está.

21
00:01:05,070 --> 00:01:07,740
‫E agora sobre aquele mapa que

22
00:01:07,740 --> 00:01:10,050
‫será exibido aqui nesta área

23
00:01:10,050 --> 00:01:13,580
‫vazia, vamos usar uma biblioteca muito boa chamada "Mapbox"

24
00:01:13,580 --> 00:01:17,060
‫e essa biblioteca realmente roda no front end.

25
00:01:17,060 --> 00:01:19,030
‫E então, nesta aula, vamos

26
00:01:19,030 --> 00:01:21,070
‫escrever um pouco de código de

27
00:01:21,070 --> 00:01:23,330
‫front-end, e não tanto sobre o back-end.

28
00:01:23,330 --> 00:01:25,300
‫Mas isso ainda é muito importante

29
00:01:25,300 --> 00:01:27,890
‫porque agora você vai aprender como escrever JavaScript

30
00:01:27,890 --> 00:01:31,730
‫para o lado do cliente e, em seguida, integrá-lo em nossos modelos.

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

32
00:01:32,710 --> 00:01:34,190
‫Então vamos fazer

33
00:01:35,030 --> 00:01:39,130
‫isso e primeiro lembrar que todos os dados, ou seja, todos

34
00:01:39,130 --> 00:01:42,140
‫os ativos que estão disponíveis no cliente,

35
00:01:42,140 --> 00:01:44,170
‫estão aqui nesta pasta pública.

36
00:01:44,170 --> 00:01:47,830
‫Por exemplo, nosso arquivo CSS, nossas imagens e

37
00:01:47,830 --> 00:01:51,050
‫também temos uma pasta aqui para JavaScript.

38
00:01:51,050 --> 00:01:53,470
‫E atualmente está vazio, então

39
00:01:53,470 --> 00:01:56,230
‫vamos criar um novo arquivo aqui chamado

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

41
00:02:03,000 --> 00:02:06,525
‫js ok? Basicamente, este é um arquivo

42
00:02:06,525 --> 00:02:08,700
‫JavaScript que iremos integrar ao nosso HTML

43
00:02:08,700 --> 00:02:11,250
‫e que será executado no lado do cliente.

44
00:02:11,250 --> 00:02:14,140
‫Tudo bem? Assim como o JavaScript

45
00:02:14,140 --> 00:02:17,340
‫normal que você tem escrito toda a sua vida (risos), certo?

46
00:02:17,340 --> 00:02:20,760
‫Mas, por enquanto, vamos simplesmente fazer um console simples. logar aqui antes

47
00:02:20,760 --> 00:02:23,343
‫de realmente conectá-lo com nosso back end.

48
00:02:25,540 --> 00:02:30,540
‫Então, digamos apenas console. log Olá do lado do cliente.

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

50
00:02:35,400 --> 00:02:39,160
‫e agora vamos realmente integrá-lo em nossos modelos.

51
00:02:39,160 --> 00:02:41,290
‫Agora pode parecer que o melhor

52
00:02:41,290 --> 00:02:45,600
‫lugar para fazer essa integração é aqui em nosso modelo de base, certo?

53
00:02:45,600 --> 00:02:49,220
‫Mas, na verdade, queremos apenas incluir o script Mapbox na

54
00:02:49,220 --> 00:02:51,230
‫página do tour, certo?

55
00:02:51,230 --> 00:02:53,610
‫Então, como poderíamos fazer isso?

56
00:02:53,610 --> 00:02:56,070
‫E a solução para isso é mais uma

57
00:02:56,070 --> 00:02:59,040
‫vez, estender um bloco aqui em nosso modelo base, então

58
00:02:59,040 --> 00:03:01,190
‫vou criar um novo bloco aqui

59
00:03:01,190 --> 00:03:05,850
‫que iremos estender a partir do tour. OK?

60
00:03:05,850 --> 00:03:08,523
‫E, na verdade, esse bloco estará bem aqui,

61
00:03:10,670 --> 00:03:12,260
‫e estou chamando-o de

62
00:03:12,260 --> 00:03:15,093
‫"cabeça" e todo esse conteúdo estará realmente lá.

63
00:03:16,020 --> 00:03:18,740
‫Agora você deve estar se perguntando por que estamos

64
00:03:18,740 --> 00:03:20,410
‫fazendo isso, porque quando estendemos

65
00:03:20,410 --> 00:03:22,700
‫o bloco, o conteúdo dentro dele desaparece.

66
00:03:22,700 --> 00:03:26,350
‫Então foi isso que aconteceu aqui, certo?

67
00:03:26,350 --> 00:03:29,440
‫Mas, na verdade, existe outra maneira de estender os blocos,

68
00:03:29,440 --> 00:03:32,350
‫que simplesmente adicionará o novo conteúdo no final ou

69
00:03:32,350 --> 00:03:34,060
‫no início do bloco.

70
00:03:34,060 --> 00:03:37,190
‫Tudo bem? Então, vamos ver como podemos fazer isso.

71
00:03:37,190 --> 00:03:41,170
‫E então, bem no início do nosso modelo

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

73
00:03:44,810 --> 00:03:46,120
‫tour, vamos dizer

74
00:03:46,120 --> 00:03:50,900
‫agora: block head e, na verdade, dizemos block append head, certo?

75
00:03:50,900 --> 00:03:53,730
‫E então, tudo o que escrevermos neste bloco

76
00:03:53,730 --> 00:03:55,960
‫aqui será anexado ao conteúdo que

77
00:03:55,960 --> 00:03:58,010
‫já está nesse bloco.

78
00:03:58,010 --> 00:04:00,510
‫OK? E também poderíamos

79
00:04:00,510 --> 00:04:04,500
‫usar "prefixar" e então seria adicionado no início do bloco, ok?

80
00:04:04,500 --> 00:04:07,690
‫E agora, tudo o que vamos fazer aqui é adicionar

81
00:04:07,690 --> 00:04:08,950
‫um novo script.

82
00:04:08,950 --> 00:04:11,890
‫Então, usando uma tag de script e, em seguida,

83
00:04:11,890 --> 00:04:14,410
‫especificando o atributo de origem, e isso

84
00:04:15,280 --> 00:04:23,760
‫por agora é "js / mapbox. js "ok?

85
00:04:23,760 --> 00:04:27,400
‫Então, novamente, este modelo aqui já estende nosso modelo

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

87
00:04:28,800 --> 00:04:32,070
‫com isso aqui, podemos basicamente injetar essa linha

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

89
00:04:33,870 --> 00:04:37,450
‫principal que já está em nosso modelo base.

90
00:04:37,450 --> 00:04:40,930
‫E assim, acrescentamos isso, e então aparecerá aqui

91
00:04:40,930 --> 00:04:44,380
‫no final deste bloco principal, bem aqui.

92
00:04:44,380 --> 00:04:46,453
‫E, na verdade, vamos tentar isso agora.

93
00:04:47,940 --> 00:04:49,053
‫Então, quando eu

94
00:04:50,520 --> 00:04:53,610
‫recarregar, agora devemos receber essa mensagem em nosso

95
00:04:53,610 --> 00:04:56,760
‫console e, de fato, "Olá do lado do

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

97
00:04:58,700 --> 00:05:02,080
‫Ótimo. Então, a seguir, queremos realmente obter acesso aos

98
00:05:02,080 --> 00:05:03,850
‫dados de localização do passeio

99
00:05:03,850 --> 00:05:06,140
‫que estamos tentando exibir no momento,

100
00:05:06,140 --> 00:05:08,170
‫bem aqui no arquivo JavaScript.

101
00:05:08,170 --> 00:05:10,390
‫Então, como você vai fazer isso?

102
00:05:10,390 --> 00:05:13,590
‫Bem, então podemos fazer uma solicitação Ajax, basicamente uma

103
00:05:13,590 --> 00:05:16,410
‫chamada para nossa API e obter os

104
00:05:16,410 --> 00:05:17,870
‫dados de lá.

105
00:05:17,870 --> 00:05:20,760
‫Mas isso não é realmente necessário neste caso.

106
00:05:20,760 --> 00:05:23,590
‫E então, deixe-me mostrar um truque muito bom.

107
00:05:23,590 --> 00:05:25,750
‫Então, aqui em nosso modelo de

108
00:05:25,750 --> 00:05:28,870
‫passeio, já temos todos os dados sobre o passeio

109
00:05:28,870 --> 00:05:30,840
‫em si e agora podemos

110
00:05:30,840 --> 00:05:33,270
‫simplesmente colocar esses dados em nosso HTML

111
00:05:33,270 --> 00:05:36,630
‫para que o JavaScript possa lê-los a partir daí, ok?

112
00:05:36,630 --> 00:05:39,570
‫Então, basicamente, vamos expor os dados de localização,

113
00:05:39,570 --> 00:05:42,327
‫bem aqui como uma string no HTML

114
00:05:42,327 --> 00:05:45,080
‫e nosso JavaScript vai pegá-los de

115
00:05:45,080 --> 00:05:49,500
‫lá sem ter que fazer, como qualquer chamada de API separadamente.

116
00:05:49,500 --> 00:05:52,760
‫Então, vamos descer aqui para nossa

117
00:05:52,760 --> 00:05:56,270
‫classe de mapa ou seção de fato, ok?

118
00:05:56,270 --> 00:05:59,950
‫Então esta seção aqui, e ela já tem um elemento

119
00:05:59,950 --> 00:06:01,460
‫Diff com uma

120
00:06:01,460 --> 00:06:05,410
‫classe de mapa, e você verá porque é um ID um

121
00:06:05,410 --> 00:06:08,800
‫pouco mais tarde, ok? Mas, por enquanto, quero realmente

122
00:06:08,800 --> 00:06:10,870
‫especificar um atributo de dados aqui, certo?

123
00:06:10,870 --> 00:06:13,470
‫Portanto, existe um truque muito bom em JavaScript,

124
00:06:13,470 --> 00:06:17,030
‫onde podemos especificar um atributo de dados em HTML e, em

125
00:06:17,030 --> 00:06:19,580
‫seguida, ler esse atributo usando JavaScript de

126
00:06:19,580 --> 00:06:21,100
‫uma maneira muito fácil.

127
00:06:21,100 --> 00:06:23,010
‫E é assim que

128
00:06:23,010 --> 00:06:25,710
‫funciona, então podemos dizer "dados /"

129
00:06:25,710 --> 00:06:27,730
‫e aqui como quisermos

130
00:06:27,730 --> 00:06:29,593
‫chamá-lo, neste caso dizemos

131
00:06:31,800 --> 00:06:36,560
‫"locais", certo? E então definimos isso para o nosso tour. Localizações.

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

133
00:06:38,410 --> 00:06:42,840
‫fazer isso, precisamos transformar esse array em uma string, certo?

134
00:06:42,840 --> 00:06:45,540
‫Então, vamos rapidamente dar uma olhada nisso.

135
00:06:45,540 --> 00:06:50,170
‫Portanto, nossas localizações são todo esse array com

136
00:06:50,170 --> 00:06:51,930
‫esses objetos ali.

137
00:06:51,930 --> 00:06:55,320
‫Mas em HTML, é claro que não podemos ter matrizes

138
00:06:55,320 --> 00:06:58,480
‫ou objetos ou qualquer coisa assim, então o que

139
00:06:58,480 --> 00:07:00,010
‫temos que fazer

140
00:07:00,010 --> 00:07:02,740
‫é converter tudo isso em uma string.

141
00:07:02,740 --> 00:07:05,003
‫E isso é, felizmente, muito fácil.

142
00:07:06,230 --> 00:07:12,513
‫Tudo o que precisamos fazer é "JSON. stringify "tudo bem?

143
00:07:13,417 --> 00:07:16,960
‫E então aqui o tour. localização ou, na

144
00:07:16,960 --> 00:07:19,610
‫verdade, localizações.

145
00:07:19,610 --> 00:07:19,610
‫Tudo bem?

146
00:07:19,610 --> 00:07:21,063
‫E se salvarmos

147
00:07:23,040 --> 00:07:28,040
‫agora, vamos abri-lo aqui e inspecionar este mapa aqui, e agora você

148
00:07:28,290 --> 00:07:31,120
‫vê as localizações dos dados e temos

149
00:07:31,120 --> 00:07:33,620
‫esta enorme string aqui, que basicamente

150
00:07:33,620 --> 00:07:36,493
‫contém todos os nossos dados de localização.

151
00:07:38,050 --> 00:07:39,670
‫Tudo bem, agora

152
00:07:39,670 --> 00:07:42,420
‫em nosso JavaScript podemos obter isso

153
00:07:42,420 --> 00:07:44,023
‫muito facilmente.

154
00:07:46,950 --> 00:07:49,670
‫Portanto, os locais estão no

155
00:07:50,670 --> 00:07:52,983
‫documento. getElementById e

156
00:07:56,260 --> 00:07:59,810
‫map, e agora aqui vai a parte do

157
00:07:59,810 --> 00:08:04,800
‫truque, porque tudo o que colocarmos em um atributo de dados como

158
00:08:04,800 --> 00:08:07,820
‫este, será armazenado na propriedade dataset e,

159
00:08:07,820 --> 00:08:11,020
‫neste caso, dataset. localizações, porque

160
00:08:11,020 --> 00:08:15,813
‫é denominado data / ou data-location.

161
00:08:16,980 --> 00:08:20,470
‫OK? Assim,

162
00:08:20,470 --> 00:08:26,533
‫conjunto de dados. locais, ok?

163
00:08:26,533 --> 00:08:28,210
‫E agora temos todos esses

164
00:08:28,210 --> 00:08:29,453
‫erros vindos do

165
00:08:30,347 --> 00:08:33,480
‫ESlint, e isso é porque o ESlint está configurado

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

167
00:08:35,900 --> 00:08:37,900
‫não para JavaScript, então o

168
00:08:37,900 --> 00:08:40,973
‫que podemos fazer aqui é basicamente desabilitar

169
00:08:41,923 --> 00:08:46,210
‫ESlint para todo o arquivo, até que digamos basicamente com um

170
00:08:48,300 --> 00:08:52,670
‫comentário no início aqui, ESlint desabilitar e então sim, ele vai

171
00:08:52,670 --> 00:08:57,000
‫entender isso e transformá-lo completamente off para todo o arquivo, ok?

172
00:08:57,000 --> 00:08:59,100
‫Esses são os dados de locais

173
00:08:59,100 --> 00:09:01,320
‫que acabamos de inserir em nosso

174
00:09:01,320 --> 00:09:03,460
‫HTML, mas lembre-se de que é

175
00:09:03,460 --> 00:09:07,285
‫uma string e, portanto, precisamos convertê-la de volta para JSON e,

176
00:09:07,285 --> 00:09:09,660
‫portanto, JSON. analise e, em

177
00:09:11,410 --> 00:09:13,683
‫seguida, tudo o que está aqui.

178
00:09:15,960 --> 00:09:20,160
‫Tudo bem, agora vamos realmente dar uma olhada nisso para ver

179
00:09:20,160 --> 00:09:22,510
‫se tudo está funcionando corretamente.

180
00:09:26,720 --> 00:09:27,823
‫Vamos recarregar,

181
00:09:28,770 --> 00:09:32,873
‫e agora algo deu errado aqui em nosso arquivo Mapbox, bem,

182
00:09:33,740 --> 00:09:36,063
‫isso também parece correto na verdade,

183
00:09:37,120 --> 00:09:42,120
‫então vamos apenas testar se ele realmente é chamado de mapa aqui e

184
00:09:45,030 --> 00:09:47,830
‫de fato é um ID com mapa,

185
00:09:47,830 --> 00:09:51,160
‫então eu acredito que provavelmente o problema é que

186
00:09:51,160 --> 00:09:53,360
‫no momento chamamos ou obtemos

187
00:09:53,360 --> 00:09:55,803
‫o elemento por ID, então isso

188
00:09:56,690 --> 00:09:58,560
‫aqui, então provavelmente neste

189
00:09:58,560 --> 00:10:01,210
‫momento o DOM na verdade ainda não

190
00:10:01,210 --> 00:10:04,060
‫está carregado, ok? E isso

191
00:10:04,060 --> 00:10:08,530
‫é porque temos nosso script integrado logo no início do arquivo,

192
00:10:08,530 --> 00:10:09,963
‫então este script aqui

193
00:10:11,440 --> 00:10:14,300
‫está bem na cabeça, enquanto deveria estar

194
00:10:14,300 --> 00:10:17,580
‫na parte inferior da página. OK?

195
00:10:17,580 --> 00:10:19,760
‫Então, deixe-me copiar este aqui

196
00:10:19,760 --> 00:10:21,720
‫e colocá-lo manualmente na base,

197
00:10:21,720 --> 00:10:24,580
‫então vou copiá-lo e comentá-lo, mas não

198
00:10:24,580 --> 00:10:27,610
‫se preocupe, ainda vamos usar essa técnica de

199
00:10:27,610 --> 00:10:31,270
‫anexação de bloco aqui um pouco mais tarde no vídeo,

200
00:10:31,270 --> 00:10:34,100
‫porque há algumas coisas vindo do Mapbox

201
00:10:34,100 --> 00:10:35,750
‫que ainda precisamos colocar

202
00:10:36,920 --> 00:10:40,170
‫na cabeça, ok? Mas, por enquanto, vamos

203
00:10:40,170 --> 00:10:42,483
‫colocar esse script aqui no final da página.

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

205
00:10:47,220 --> 00:10:48,750
‫Isso (risos) é

206
00:10:48,750 --> 00:10:51,200
‫claro, eu só queria ir para outro

207
00:10:51,200 --> 00:10:54,360
‫arquivo, para poder salvá-lo para que o servidor realmente

208
00:10:54,360 --> 00:10:56,180
‫recarregue porque esses arquivos pug,

209
00:10:56,180 --> 00:10:57,880
‫como você provavelmente deve

210
00:10:57,880 --> 00:11:00,610
‫ter notado aqui, eles não acionam a reinicialização

211
00:11:00,610 --> 00:11:03,010
‫do nosso servidor , tudo bem?

212
00:11:03,010 --> 00:11:06,805
‫De qualquer forma, tenho esperança de que agora funcione

213
00:11:06,805 --> 00:11:09,150
‫e, de fato, funciona.

214
00:11:09,150 --> 00:11:11,070
‫Portanto, temos uma matriz aqui

215
00:11:11,070 --> 00:11:15,060
‫e, de fato, esses são os quatro locais de nosso tour.

216
00:11:15,060 --> 00:11:18,190
‫Ok, agora temos tudo muito bem integrado e

217
00:11:18,190 --> 00:11:21,170
‫pronto para integrar o Mapbox e criar

218
00:11:21,170 --> 00:11:23,010
‫nosso próprio mapa aqui.

219
00:11:23,010 --> 00:11:25,960
‫Mas para não criar um vídeo muito

220
00:11:25,960 --> 00:11:28,113
‫longo, farei isso no próximo.