‫Narrador: Em seguida, você
‫aprenderá como integrar um bom mapa que exibe todos os
‫locais de um determinado passeio em nosso site usando o Mapbox.
‫Mas antes de
‫fazermos isso, primeiro precisamos corrigir um pequeno bug que acabei de encontrar.
‫Então, agora mesmo, estamos no tour do parque de
‫campismo, mas você vê que aqui na verdade
‫diz "The Forest Hiker" ok? E então, isso está
‫obviamente errado e então,
‫isso
‫é porque aqui em nosso get tour handler,
‫estamos sempre passando neste título, então "The
‫Forest Hiker Tour".
‫O que, claro, não está correto, então vamos consertar isso.
‫Ok, vamos dizer aqui um
‫tour. nome e
‫tour.
‫Vamos fazer isso em letras maiúsculas, na verdade.
‫E então, agora devemos ver o tour "O acampamento
‫do parque" e sim, aqui está.
‫E agora sobre aquele mapa que
‫será exibido aqui nesta área
‫vazia, vamos usar uma biblioteca muito boa chamada "Mapbox"
‫e essa biblioteca realmente roda no front end.
‫E então, nesta aula, vamos
‫escrever um pouco de código de
‫front-end, e não tanto sobre o back-end.
‫Mas isso ainda é muito importante
‫porque agora você vai aprender como escrever JavaScript
‫para o lado do cliente e, em seguida, integrá-lo em nossos modelos.
‫OK?
‫Então vamos fazer
‫isso e primeiro lembrar que todos os dados, ou seja, todos
‫os ativos que estão disponíveis no cliente,
‫estão aqui nesta pasta pública.
‫Por exemplo, nosso arquivo CSS, nossas imagens e
‫também temos uma pasta aqui para JavaScript.
‫E atualmente está vazio, então
‫vamos criar um novo arquivo aqui chamado
‫Mapbox.
‫js ok? Basicamente, este é um arquivo
‫JavaScript que iremos integrar ao nosso HTML
‫e que será executado no lado do cliente.
‫Tudo bem? Assim como o JavaScript
‫normal que você tem escrito toda a sua vida (risos), certo?
‫Mas, por enquanto, vamos simplesmente fazer um console simples. logar aqui antes
‫de realmente conectá-lo com nosso back end.
‫Então, digamos apenas console. log Olá do lado do cliente.
‫Tudo bem,
‫e agora vamos realmente integrá-lo em nossos modelos.
‫Agora pode parecer que o melhor
‫lugar para fazer essa integração é aqui em nosso modelo de base, certo?
‫Mas, na verdade, queremos apenas incluir o script Mapbox na
‫página do tour, certo?
‫Então, como poderíamos fazer isso?
‫E a solução para isso é mais uma
‫vez, estender um bloco aqui em nosso modelo base, então
‫vou criar um novo bloco aqui
‫que iremos estender a partir do tour. OK?
‫E, na verdade, esse bloco estará bem aqui,
‫e estou chamando-o de
‫"cabeça" e todo esse conteúdo estará realmente lá.
‫Agora você deve estar se perguntando por que estamos
‫fazendo isso, porque quando estendemos
‫o bloco, o conteúdo dentro dele desaparece.
‫Então foi isso que aconteceu aqui, certo?
‫Mas, na verdade, existe outra maneira de estender os blocos,
‫que simplesmente adicionará o novo conteúdo no final ou
‫no início do bloco.
‫Tudo bem? Então, vamos ver como podemos fazer isso.
‫E então, bem no início do nosso modelo
‫de
‫tour, vamos dizer
‫agora: block head e, na verdade, dizemos block append head, certo?
‫E então, tudo o que escrevermos neste bloco
‫aqui será anexado ao conteúdo que
‫já está nesse bloco.
‫OK? E também poderíamos
‫usar "prefixar" e então seria adicionado no início do bloco, ok?
‫E agora, tudo o que vamos fazer aqui é adicionar
‫um novo script.
‫Então, usando uma tag de script e, em seguida,
‫especificando o atributo de origem, e isso
‫por agora é "js / mapbox. js "ok?
‫Então, novamente, este modelo aqui já estende nosso modelo
‫base, e
‫com isso aqui, podemos basicamente injetar essa linha
‫de código no bloco
‫principal que já está em nosso modelo base.
‫E assim, acrescentamos isso, e então aparecerá aqui
‫no final deste bloco principal, bem aqui.
‫E, na verdade, vamos tentar isso agora.
‫Então, quando eu
‫recarregar, agora devemos receber essa mensagem em nosso
‫console e, de fato, "Olá do lado do
‫cliente"
‫Ótimo. Então, a seguir, queremos realmente obter acesso aos
‫dados de localização do passeio
‫que estamos tentando exibir no momento,
‫bem aqui no arquivo JavaScript.
‫Então, como você vai fazer isso?
‫Bem, então podemos fazer uma solicitação Ajax, basicamente uma
‫chamada para nossa API e obter os
‫dados de lá.
‫Mas isso não é realmente necessário neste caso.
‫E então, deixe-me mostrar um truque muito bom.
‫Então, aqui em nosso modelo de
‫passeio, já temos todos os dados sobre o passeio
‫em si e agora podemos
‫simplesmente colocar esses dados em nosso HTML
‫para que o JavaScript possa lê-los a partir daí, ok?
‫Então, basicamente, vamos expor os dados de localização,
‫bem aqui como uma string no HTML
‫e nosso JavaScript vai pegá-los de
‫lá sem ter que fazer, como qualquer chamada de API separadamente.
‫Então, vamos descer aqui para nossa
‫classe de mapa ou seção de fato, ok?
‫Então esta seção aqui, e ela já tem um elemento
‫Diff com uma
‫classe de mapa, e você verá porque é um ID um
‫pouco mais tarde, ok? Mas, por enquanto, quero realmente
‫especificar um atributo de dados aqui, certo?
‫Portanto, existe um truque muito bom em JavaScript,
‫onde podemos especificar um atributo de dados em HTML e, em
‫seguida, ler esse atributo usando JavaScript de
‫uma maneira muito fácil.
‫E é assim que
‫funciona, então podemos dizer "dados /"
‫e aqui como quisermos
‫chamá-lo, neste caso dizemos
‫"locais", certo? E então definimos isso para o nosso tour. Localizações.
‫Agora, antes de realmente
‫fazer isso, precisamos transformar esse array em uma string, certo?
‫Então, vamos rapidamente dar uma olhada nisso.
‫Portanto, nossas localizações são todo esse array com
‫esses objetos ali.
‫Mas em HTML, é claro que não podemos ter matrizes
‫ou objetos ou qualquer coisa assim, então o que
‫temos que fazer
‫é converter tudo isso em uma string.
‫E isso é, felizmente, muito fácil.
‫Tudo o que precisamos fazer é "JSON. stringify "tudo bem?
‫E então aqui o tour. localização ou, na
‫verdade, localizações.
‫Tudo bem?
‫E se salvarmos
‫agora, vamos abri-lo aqui e inspecionar este mapa aqui, e agora você
‫vê as localizações dos dados e temos
‫esta enorme string aqui, que basicamente
‫contém todos os nossos dados de localização.
‫Tudo bem, agora
‫em nosso JavaScript podemos obter isso
‫muito facilmente.
‫Portanto, os locais estão no
‫documento. getElementById e
‫map, e agora aqui vai a parte do
‫truque, porque tudo o que colocarmos em um atributo de dados como
‫este, será armazenado na propriedade dataset e,
‫neste caso, dataset. localizações, porque
‫é denominado data / ou data-location.
‫OK? Assim,
‫conjunto de dados. locais, ok?
‫E agora temos todos esses
‫erros vindos do
‫ESlint, e isso é porque o ESlint está configurado
‫para Node. js e
‫não para JavaScript, então o
‫que podemos fazer aqui é basicamente desabilitar
‫ESlint para todo o arquivo, até que digamos basicamente com um
‫comentário no início aqui, ESlint desabilitar e então sim, ele vai
‫entender isso e transformá-lo completamente off para todo o arquivo, ok?
‫Esses são os dados de locais
‫que acabamos de inserir em nosso
‫HTML, mas lembre-se de que é
‫uma string e, portanto, precisamos convertê-la de volta para JSON e,
‫portanto, JSON. analise e, em
‫seguida, tudo o que está aqui.
‫Tudo bem, agora vamos realmente dar uma olhada nisso para ver
‫se tudo está funcionando corretamente.
‫Vamos recarregar,
‫e agora algo deu errado aqui em nosso arquivo Mapbox, bem,
‫isso também parece correto na verdade,
‫então vamos apenas testar se ele realmente é chamado de mapa aqui e
‫de fato é um ID com mapa,
‫então eu acredito que provavelmente o problema é que
‫no momento chamamos ou obtemos
‫o elemento por ID, então isso
‫aqui, então provavelmente neste
‫momento o DOM na verdade ainda não
‫está carregado, ok? E isso
‫é porque temos nosso script integrado logo no início do arquivo,
‫então este script aqui
‫está bem na cabeça, enquanto deveria estar
‫na parte inferior da página. OK?
‫Então, deixe-me copiar este aqui
‫e colocá-lo manualmente na base,
‫então vou copiá-lo e comentá-lo, mas não
‫se preocupe, ainda vamos usar essa técnica de
‫anexação de bloco aqui um pouco mais tarde no vídeo,
‫porque há algumas coisas vindo do Mapbox
‫que ainda precisamos colocar
‫na cabeça, ok? Mas, por enquanto, vamos
‫colocar esse script aqui no final da página.
‫OK?
‫Isso (risos) é
‫claro, eu só queria ir para outro
‫arquivo, para poder salvá-lo para que o servidor realmente
‫recarregue porque esses arquivos pug,
‫como você provavelmente deve
‫ter notado aqui, eles não acionam a reinicialização
‫do nosso servidor , tudo bem?
‫De qualquer forma, tenho esperança de que agora funcione
‫e, de fato, funciona.
‫Portanto, temos uma matriz aqui
‫e, de fato, esses são os quatro locais de nosso tour.
‫Ok, agora temos tudo muito bem integrado e
‫pronto para integrar o Mapbox e criar
‫nosso próprio mapa aqui.
‫Mas para não criar um vídeo muito
‫longo, farei isso no próximo.