‫Instrutor: Vamos agora preencher cada um dos elementos
‫do cartão com os dados corretos para cada um dos passeios.
‫Então, apenas como uma rápida recapitulação.
‫Em um último vídeo, começamos criando este elemento principal e
‫um elemento dentro de um contêiner div. Em seguida,
‫dentro desse contêiner, queremos
‫um desses elementos de cartão para
‫cada um dos passeios que vem na matriz
‫que passamos para este modelo.
‫E para isso usamos um array Pug que
‫funciona exatamente assim.
‫Então, qual é cada palavra-chave
‫aqui e o resultado de fazer isso parecia com isso, certo.
‫E então o que vamos fazer agora
‫é basicamente preencher cada um desses cartões aqui com os dados reais.
‫E vamos começar aqui com o nome do tour.
‫Portanto, lembre-se de como colocamos o valor de uma variável
‫dentro de um elemento.
‫Bem, usamos igual e, em seguida, neste caso, tour.
‫Então, o nome
‫da variável na iteração do loop atual, certo.
‫E isso é um documento de passeio e depois o nome do ponto, lembre-se.
‫Então, vamos verificar isso na bússola muito rápido.
‫Então, aqui temos quatro
‫tours e esses
‫são todos os dados que vamos precisar agora, ok.
‫E começando com o nome aqui, ok.
‫E então, se recarregarmos nossa página, isso deve
‫ser refletido aqui.
‫E então é aqui que a mágica começa e funcionou.
‫E esta é a primeira vez que
‫realmente vemos os dados do banco de dados
‫sendo realmente renderizados no site.
‫Então, aqui temos o nome do passeio para cada um
‫dos passeios e, novamente, isso agora está saindo de nosso banco de dados.
‫Então, fantástico, isso é muito
‫legal e vamos continuar a construir este cartão.
‫Então, aqui sobre a imagem agora.
‫Vamos também colocar o texto alternativo no nome do passeio.
‫Agora, não podemos simplesmente colocar um nome de ponto de passeio
‫aqui porque estamos dentro de uma
‫string e isso não funciona.
‫Agora,
‫ao mesmo tempo, se
‫fizermos assim, também não vai funcionar porque aqui
‫este Alt realmente espera uma string, ok.
‫Portanto, precisamos de algumas citações aqui em torno desta variável.
‫E então a maneira mais fácil
‫de fazer isso é usar strings de template ES6, ok.
‫Então, assim e de novo, isso é
‫porque na verdade aqui espera que uma string seja apresentada
‫e, com isso, é claro que estamos criando uma string.
‫Em seguida, vamos especificar a imagem aqui, ok.
‫Então, vamos dar uma olhada na bússola
‫novamente para verificar como a imagem da capa está correta.
‫E então temos uma propriedade chamada capa
‫da imagem e aqui temos apenas o nome da própria imagem.
‫Portanto, não o caminho para a imagem. =
‫e então teremos que especificar manualmente, ok.
‫Então, mas o que importa aqui é que se
‫chama capa de imagem.
‫E então vamos nos livrar de tudo isso.
‫Comece criando uma string de modelo e,
‫em seguida, faça um tour pela cobertura da imagem de ponto
‫e agora precisamos
‫descobrir todo o caminho para essa imagem, ok.
‫E como já sabemos os dados da imagem
‫estão dentro da pasta pública.
‫Então, a pasta a partir da qual
‫todos os ativos estáticos
‫serão servidos e aqui temos as imagens.
‫E então temos uma pasta.
‫Um para tours e outro para usuários, ok.
‫E assim, dentro de cada um
‫desses passeios, temos as três fotos e uma foto de capa.
‫Então, isso vai se parecer com isso.
‫E então o caminho aqui é passeios de ponto de imagem ou passeios de
‫barra e, em seguida, barra o nome da imagem, ótimo.
‫Então isso deve fazer
‫sites inteiros parecerem ainda melhores agora sim.
‫Agora está realmente começando a ganhar vida.
‫Então, isso é fantástico.
‫Isso me faz sentir muito bem
‫cada vez que funciona.
‫De qualquer forma, vamos cuidar do resto dos
‫dados que, claro,
‫ainda parecem os mesmos em todos esses cartões, ok.
‫E agora vamos usar os dados em nossa coleção
‫para construir esta string aqui.
‫Então, você vê que isso realmente é
‫uma combinação de dados diferentes.
‫Então, nós temos a dificuldade e a duração do passeio, então
‫vamos aqui agora criar uma string de modelo.
‫Então, basicamente atribua esta string de template a este elemento.
‫E então começamos aqui com a dificuldade ponto do
‫passeio, lembre-se, depois o espaço e a duração do passeio,
‫ponto do passeio, duração do dia, tudo bem.
‫Então, essa é a tradução desse conteúdo.
‫Em seguida, o que temos aqui é o resumo do tour, ok.
‫Então, resumo de pontos de passeio iguais, tudo bem.
‫Em seguida, temos o local de início e este passeio,
‫por exemplo, começa em Banff
‫Canadá e, novamente, vamos dar uma olhada na bússola
‫aqui apenas para ver como os
‫dados se parecem ou, na verdade,
‫não precisamos estar sempre alternando para frente
‫e para trás bússola.
‫Também podemos abrir ou importar dados aqui.
‫Então, nos passeios, podemos simplesmente usar esses dados aqui, em
‫vez de sempre irmos para a bússola.
‫Portanto, antes de usarmos o resumo,
‫vamos usar o local de início que está
‫aqui em cima.
‫Então, agora queremos começar a descrição do ponto do local, ok.
‫Portanto, a descrição do ponto do local de início do ponto do tour.
‫E agora você
‫começa a ver por que faz sentido
‫realmente criar todos esses dados diferentes que criamos aqui.
‫Certo, a seguir vamos usar as datas de início
‫e, portanto, lembre-se.
‫Que esta é uma matriz, ok.
‫Porque agora o que queremos em nossa visão
‫geral é basicamente a data em que a próxima turnê começa.
‫Então, é isso que significa ícone com calendário
‫neste caso.
‫Então, esse é basicamente
‫o primeiro elemento dessa matriz de datas de início.
‫Portanto, inicie as datas na posição 0.
‫Em seguida, temos este dado que diz quantas
‫paradas existem nesses passeios.
‫Basicamente, isso
‫significa quantos locais temos e,
‫novamente, usaremos os locais e, desta vez,
‫não o local
‫de início, mas realmente esses locais
‫e se você quiser especificar quantos locais temos.
‫Bem, então precisamos contar o comprimento desta matriz, ok.
‫E tão simples também.
‫Então, iguale e, em seguida, defina-o com
‫esta string de modelo porque também
‫queremos adicionar essa parada e, portanto, o comprimento do ponto dos locais dos
‫pontos de tour e, finalmente, a quantidade de
‫pessoas que fazem parte de cada um dos grupos.
‫Então, as pessoas que podem participar de um passeio e
‫isso é armazenado no
‫passeio, mas o tamanho máximo do grupo, lembre-se.
‫E então gente.
‫Ótimo, então essa parte está feita
‫agora e vamos voltar ao nosso site e
‫testar isso.
‫E sim lindo, pelo menos quase lindo porque esse
‫encontro parece meio estranho aqui.
‫Então, nós realmente queremos apenas vinte e vinte e um de junho, então
‫não precisamos ser tão
‫específicos aqui nesta visão geral, ok.
‫E o que queremos é que seja novamente junho de 2021
‫e agora é toda essa bagunça e vamos
‫consertar isso e,
‫felizmente, isso é realmente muito
‫fácil com JavaScript, que inclui algumas
‫funções muito boas para trabalhar com datas.
‫E tenha em mente que cada uma dessas datas
‫de início aqui é realmente um
‫objeto de data em ou banco de
‫dados e agora podemos usar uma função como esta para string local, ok.
‫Então, basicamente, ele irá converter essa
‫data em uma string
‫legível e aqui podemos passar uma opção para o idioma.
‫E isso é o inglês para
‫os EUA e também um objeto com algumas
‫opções e aqui podemos especificar que queremos
‫um mês longo.
‫Então, em vez de apenas uma abreviatura como a
‫que tínhamos aqui.
‫então, um de abril, um
‫de agosto, ele irá imprimi-lo assim.
‫Então, realmente o nome do mês inteiro e ok e também
‫dizendo que o ano deve ser numérico e se você quiser
‫aprender mais sobre essa
‫função aqui, vá em frente e pesquise no Google, ok.
‫Então, vamos tentar de
‫novo e agora parece muito bom, incrível.
‫Então, vamos continuar e terminar esta última parte aqui com o
‫preço e os detalhes da avaliação.
‫E isso está aqui no rodapé do cartão
‫e aqui está apenas o preço.
‫Então, igual a vamos realmente deixar lá porque agora ainda precisamos
‫de uma string de modelo porque o
‫preço não é apenas esse número, mas na verdade precisamos de
‫um cifrão extra aqui para o preço
‫em dólar.
‫Então, esse aqui, certo.
‫Em seguida, temos a classificação média aqui.
‫Então, é isso e já
‫sabemos que isso se chama classificação média dos pontos do tour.
‫Então, nós usamos isso tantas vezes, pelo menos eu acredito.
‫Vamos apenas confirmar que é a média das avaliações e também
‫a quantidade das avaliações.
‫Então, vamos apenas copiar isso.
‫Então, média de avaliações
‫e agora queremos a quantidade de avaliações.
‫Tudo bem, mas é claro que isso precisa
‫ser uma string de modelo
‫e, em seguida, defina-o como igual e, em seguida, é claro interpolar o nome
‫da variável aqui e agora, finalmente, precisamos construir a
‫URL para a página de detalhes, ok.
‫Portanto, lembre-se disso quando clicarmos em um dos cartões.
‫Em seguida, ele nos leva
‫à página de detalhes e, claro, agora precisamos
‫especificar esse link, pois isso dependerá de cada tour.
‫Portanto, queremos criar um link para passeios de barra e,
‫em seguida, lembrar como mencionei antes
‫que, para renderizar essas páginas, na verdade, queremos
‫consultar os passeios por seu slug e
‫não por seu ID.
‫Como fizemos na API, certo, porque
‫isso realmente faz com que a URL pareça muito mais agradável, ok.
‫E então vamos usar isso aqui agora.
‫Faça um tour dot slug e apenas para explicar
‫por que começamos
‫este URL aqui com uma barra.
‫É porque construir uma URL como esta, começando
‫apenas com a barra, é chamada de URL relativa e
‫o que isso
‫fará é adicionar a esta parte da URL após
‫o nome do host.
‫Então, esse host é agora um a sete vírgula zero zero um, mas isso
‫não é necessário especificar aqui porque,
‫novamente, ao escrever uma URL relativa como esta, ele
‫adicionará o que temos aqui a esse nome de host, ok.
‫Então, vamos recarregar novamente e estamos quase
‫terminando aqui, mas não
‫totalmente prontos.
‫Então, aqui você vê
‫indefinido e provavelmente fizemos algo errado ali.
‫E também você vê que aqui não há
‫espaço entre o preço e
‫o por pessoa e também aqui o mesmo agora.
‫Se você passar este botão
‫aqui, então embaixo no canto esquerdo.
‫Então, aqui embaixo você verá a URL que
‫acabamos de construir.
‫Pode realmente clicar
‫nele e ele nos dará este
‫erro porque é claro que não definimos esta
‫rota ainda, mas você vê
‫que parece muito bom aqui com os passeios cortando o
‫caminhante da floresta em vez de ter aquela identificação feia lá em cima, ok .
‫Mas de qualquer maneira, vamos agora consertar esse
‫indefinido neste espaço ausente.
‫Então, vamos dar uma olhada neste.
‫Bem, parece correto, na verdade, classificações e quantidade, mas é
‫claro que estamos perdendo esse ponto turístico, certo.
‫Você provavelmente já estava vendo aquele.
‫Agora, sobre aquele espaço que falta.
‫Há algo novo que preciso mostrar a vocês sobre o
‫pug, que é a chamada via canalizada vazia
‫ou linha, na verdade.
‫Então, sempre que precisarmos de
‫um espaço real entre dois elementos
‫de bloco inline que são essas
‫bandas, precisamos criar
‫manualmente esse espaço usando essa linha canalizada aqui, ok.
‫E a mesma coisa aqui
‫embaixo, porque do
‫contrário, como acabamos de ver,
‫simplesmente colará todos esses elementos juntos, tudo bem.
‫Então, agora tudo isso deve
‫ser consertado e aquele espaço ainda não está
‫lá e isso é porque esquecemos algo.
‫Então, vamos
‫voltar e realmente precisamos adicionar
‫manualmente esse espaço vazio aqui e aqui.
‫Então, essa linha vazia aqui basicamente cria um
‫espaço para nós onde podemos criar conteúdo fora de
‫um elemento e isso
‫é basicamente o que esse espaço é.
‫Então, esse espaço aqui que acabamos de colocar aqui.
‫Então, esse espaço vazio é o conteúdo que não
‫está dentro de nenhum desses dois elementos.
‫E, novamente, para sermos capazes de fazer isso, é
‫para isso que precisamos deste pipeline.
‫Então, esses dois pipelines.
‫Então, tente de novo e
‫agora realmente aqui vai
‫o espaço que acabamos de criar, perfeito.
‫E com isso nós realmente encerramos esta palestra
‫e este primeiro website de aparência impressionante
‫ou parte do website que acabamos de construir aqui juntos.
‫Então, um momento para apreciar o quão legal
‫isso realmente é e também
‫como todo esse código que escrevemos juntos realmente funciona, ok.
‫E depois disso, volte para que
‫possamos construir juntos a página de visão geral do tour.