‫-: Neste vídeo e no
‫próximo, juntos vamos construir a página de detalhes do tour.
‫E ao
‫longo do caminho você aprenderá mais algumas
‫técnicas de Pug, como condicionais e mixins.
‫E, como eu mostrei antes,
‫é assim que a página de detalhes do tour realmente se parece.
‫E é isso que vamos construir neste
‫vídeo e no próximo.
‫Agora, a única coisa que
‫vamos deixar um pouco
‫mais tarde é na verdade este mapa.
‫Tudo bem, mas todo
‫o resto vamos construir nessas palestras de ferramentas.
‫Incluindo esses comentários.
‫Tudo bem.
‫Portanto, agora temos nossa visão geral
‫e, é claro,
‫esses botões com as URLs já criadas.
‫Mas então, quando tentamos acessar esta página, é claro
‫que recebemos este erro.
‫Tudo bem.
‫Então, vamos voltar ao nosso código VS
‫e, na verdade, quero começar com
‫um pequeno desafio para você.
‫Então, o que eu
‫quero que você faça é criar uma rota para a
‫página de detalhes de acordo com a URL que acabamos de construir.
‫E vai ser
‫semelhante ao que já temos
‫aqui, mas você tem que ajustar um pouco.
‫OK.
‫Chega disso,
‫eu também quero que você construa este controlador.
‫Então vá em frente.
‫Porque agora só temos esse
‫marcador de posição.
‫E então, deixe-me mostrar as etapas aqui.
‫E como sempre,
‫primeiro,
‫precisamos obter os dados.
‫Desta vez, para o passeio solicitado.
‫E para
‫isso, lembre-se que realmente precisamos dos comentários aqui
‫e também dos guias turísticos.
‫OK.
‫Então, mais
‫uma vez, vamos dar uma olhada nisso.
‫Portanto, temos esses guias turísticos aqui.
‫Certo, então eles são basicamente um conjunto de dados separado.
‫Então, usuários.
‫E aqui também temos os comentários.
‫Agora, esses guias turísticos
‫aqui, acredito que eles são preenchidos automaticamente em
‫um modelo.
‫Então, vamos dar uma olhada nisso rapidamente.
‫Então, o
‫modelo da turnê e,
‫sim.
‫Então, aqui
‫embaixo, temos esse preenchimento
‫automático sempre que houver uma consulta de localização,
‫mas apenas para os guias.
‫Portanto, não se esqueça de preencher também
‫os comentários.
‫OK.
‫Depois disso,
‫vamos construir um modelo,
‫mas que faremos juntos, ok, então não preciso
‫que você faça essa parte.
‫E, finalmente, quero
‫que você conclua esta parte aqui também.
‫Portanto, renderize
‫o
‫modelo usando os
‫dados da etapa um novamente.
‫Tudo bem.
‫Isso também é muito simples.
‫E então o que
‫eu quero que você faça é criar
‫a rota e também obter os dados.
‫Ok, então pause o vídeo aqui e boa sorte com isso.
‫Então, espero que você tenha
‫feito isso e, para me informar, resolva aqui para você.
‫E vamos começar com a rota.
‫E agora tudo o que realmente precisamos adicionar aqui é esta lesma.
‫E, claro, estamos fazendo isso como um parâmetro de URL.
‫Assim, chamando de lesma.
‫Então, antes de usarmos o ID certo?
‫E então nós
‫tínhamos assim e agora vamos chamá-lo de lesma.
‫Tudo bem.
‫Porque, novamente, é
‫assim que a página de visão geral se parece.
‫Basicamente, temos slug slug da turnê.
‫Ok, então é isso
‫que usaremos para criar o tour no controlador.
‫Então vamos fazer isso agora aqui.
‫Portanto, const, tour
‫igual, aguarda tour e encontre
‫um.
‫Portanto, desta vez, não podemos usar localizar por ID.
‫Pois bem, não
‫sabemos a identificação do passeio.
‫E então,
‫em vez disso, estamos procurando pela lesma.
‫E a
‫lesma é como espero
‫que conheçam pedido. params
‫dot slug certo.
‫E agora, finalmente, isso é tudo para
‫preencher o campo matrizes.
‫Tudo bem.
‫Portanto, o caminho para preencher são os comentários.
‫E, na verdade, não precisamos de todos os campos aqui.
‫Então, vamos apenas especificar aqueles de que precisamos.
‫E isso é apenas
‫a revisão, a
‫avaliação
‫e o usuário.
‫Porque lembre-se
‫de que realmente exibimos
‫o nome do usuário e a foto do usuário.
‫E, claro,
‫a própria avaliação e a avaliação.
‫OK.
‫Então, é claro,
‫ele está reclamando que não usamos o assíncrono.
‫E é claro que eu não ia esquecer isso.
‫Mas de qualquer forma
‫é bom que a ES Line nos avise sobre este tipo de erros.
‫Realmente elimina muitos bugs
‫do desenvolvimento.
‫OK.
‫E aqui,
‫é claro, vamos passar essa variável
‫de passeio em nosso modelo de passeio.
‫Então aquele.
‫Dê uma chance.
‫Sem mais erros.
‫E então essa parte agora está completa.
‫Portanto, tudo o
‫que precisamos fazer agora é prosseguir e construir nosso modelo.
‫OK.
‫Então, já
‫deveríamos ter isso aqui.
‫E esses são os dados de desenvolvimento.
‫Portanto, temos muitas
‫pastas e muitos dados.
‫E pode se tornar um pouco
‫confuso em algum ponto.
‫OK.
‫E então,
‫vamos nos livrar desse conteúdo de espaço reservado aqui.
‫E antes de qualquer
‫coisa, vamos dar uma olhada no arquivo HTML original.
‫Que está naquela
‫pasta pública que acabei de fechar.
‫Vamos fechar tudo isso aqui, porque
‫acho isso muito confuso.
‫Ok, os modelos também.
‫E agora o que precisamos é público e
‫depois turnê. html.
‫Portanto, o cabeçalho que já temos, é claro.
‫E aí vai todo o conteúdo.
‫Portanto,
‫todas essas seções
‫que temos em
‫nossa página são, obviamente, traduzidas aqui como HTML.
‫E, assim
‫como antes, eu na verdade já
‫criei um template Pug baseado em todo esse código HTML.
‫Tudo bem, não queremos traduzir
‫isso aqui manualmente juntos.
‫OK.
‫Portanto, já o tenho aqui neste arquivo de modelo.
‫Mas é
‫claro, mais uma vez, se você
‫quiser, pode pausar o vídeo
‫agora e traduzi-lo por conta própria também.
‫Tudo bem.
‫Mas o que vou fazer agora é seguir
‫em frente e copiar todo esse código.
‫O que ainda é uma tonelada de código, como você pode ver.
‫Então, vamos copiar tudo isso e entrar em nosso
‫tour e colá-lo aqui.
‫Agora, a anotação estará errada novamente.
‫Então, vamos copiar ou selecionar o que acabamos de colar aqui.
‫E então tudo, exceto a primeira linha, está incorreto.
‫Mas tudo o que precisamos fazer aqui é adicionar mais uma guia.
‫E é isso.
‫Então, agora eles estão todos dentro deste bloco de conteúdo, todos
‫no mesmo nível.
‫Portanto, seção e
‫seção
‫e, basicamente, todas as seções estão
‫agora no mesmo
‫nível, portanto, são todas irmãs.
‫Excelente.
‫Então, vamos fechar tudo isso de que
‫não precisamos mais.
‫E assim como
‫antes, agora temos essa página estática
‫aqui com todos esses dados estáticos.
‫Sabemos que teremos que ir em frente e substituir.
‫Mas antes de fazer isso,
‫vamos apenas dar uma olhada se nossa rota
‫já está funcionando.
‫OK.
‫Então, vamos recarregá-lo e
‫isso nos dá o mesmo erro.
‫E eu acho
‫que é porque aqui
‫nós temos tours e não tour como
‫eu acho que temos em nosso roteiro.
‫Bem aqui temos um tour.
‫E é assim que faz sentido.
‫E então vamos mudar isso aqui em nossa
‫visão geral.
‫Ok e aqui
‫nós realmente queremos uma turnê.
‫Na verdade,
‫estamos vendo apenas uma turnê e
‫não várias turnês.
‫Direito?
‫E se voltarmos para a visão
‫geral agora, carregarmos e abrirmos
‫The Forest Hiker,
‫então você verá que será uma turnê.
‫E então,
‫é claro, obtemos o HTML
‫para a página que acabamos de criar.
‫Agora, por algum motivo, o CSS não está aqui.
‫Vamos apenas tentar recarregar isso.
‫Bem, o que está acontecendo aqui?
‫Vamos tentar inspecionar isso.
‫E vejo que temos alguns erros.
‫Então podemos clicar nisso.
‫E então a razão para o CSS ausente,
‫porque em vez disso, ele está tentando carregar o arquivo
‫no lugar errado.
‫Então, ele está tentando carregá-lo na pasta CSS dentro
‫do tour.
‫Mas é claro que isso não existe.
‫E isso é
‫porque estamos aqui nesta rota de turismo, ok.
‫E, portanto, precisamos basicamente consertar
‫a maneira como importamos o CSS em nosso template base.
‫Vamos lá.
‫E aqui,
‫de fato, devemos ter outra barra.
‫Ok, e o mesmo aqui.
‫E isso
‫é exatamente o mesmo
‫motivo que expliquei a você antes na visão geral aqui embaixo.
‫Então, começamos este URL também com uma barra.
‫E, novamente, isso vai começar na
‫raiz da página.
‫E é assim que deve funcionar.
‫E, de fato, o mesmo se aplica a todas as imagens aqui.
‫Portanto, todas as imagens
‫devem sempre começar em relação ao URL raiz.
‫Então, vamos adicionar isso rapidamente aqui a todas essas imagens.
‫E,
‫sim, é isso.
‫Então são todos eles.
‫E
‫assim, com isso corrigimos
‫a visão geral e também este arquivo base.
‫Portanto, se recarregarmos
‫agora, devemos obter acesso ao CSS correto.
‫E, de fato, aqui vamos nós.
‫Há apenas mais um
‫erro que está aqui nesta imagem.
‫E então,
‫novamente, é porque ele está
‫tentando carregá-lo aqui do
‫tour e não da URL raiz.
‫E então,
‫esse problema está aqui no cabeçalho.
‫E então,
‫é claro, aqui também precisamos
‫torná-lo relativo ao caminho da raiz.
‫Provavelmente o mesmo no rodapé.
‫E sim.
‫Tudo bem.
‫Apenas para confirmar isso rapidamente,
‫sim, vamos lá.
‫Excelente.
‫Como mencionei, é
‫claro, isso contém todos os dados
‫estáticos sobre o The Park Camper Tour,
‫que é o que temos no modelo.
‫Mas estamos olhando para o caminhante da floresta.
‫E então, vamos começar corrigindo nosso modelo e,
‫basicamente, usando os dados dinâmicos bem aqui.
‫Portanto, lembre-se de que a variável que passamos aqui é
‫chamada de tour.
‫Direito?
‫Então, é simplesmente chamado
‫de tour e é assim que temos que chamá-lo aqui.
‫Então faça um tour. nome, e
‫também o mesmo aqui.
‫E agora você já sabe que precisamos usar
‫uma string de
‫modelo aqui porque, de fato, queremos criar uma string.
‫Assim chamado. Tour.
‫E aqui esse caminho também não está correto.
‫Primeiro de tudo, ele precisa ser uma string de
‫modelo e, em seguida, nossas imagens, vou
‫escrever tours de imagem,
‫barra, barra o nome da imagem da capa.
‫Então, ponto turístico, e agora não me
‫lembro se
‫é a capa da imagem ou a imagem da capa.
‫Então sim.
‫Capa da imagem.
‫OK.
‫Então, vamos testar isso rapidamente.
‫E então lembre-se, estamos no The First Hiker.
‫E agora esse deve ser o nome.
‫E mais um erro.
‫Portanto, diz aqui, não é possível ler o tour
‫de propriedade de indefinido.
‫Então vamos voltar e
‫sim.
‫Então aqui está este erro estúpido.
‫Portanto, é claro que é uma turnê. nome e não nome.
‫Tour.
‫Então, o que eu estava
‫pensando lá?
‫Vamos recarregar isso e agora,
‫de fato, temos
‫The Forest Hiker com essa imagem de capa bem legal no fundo.
‫Excelente.
‫E vamos continuar andando aqui.
‫Portanto, crie mais uma string de modelo.
‫Tour.
‫Duração e depois
‫o número de dias.
‫Então, aqui embaixo, temos novamente o local
‫de início.
‫Então, tour.
‫localização de início. descrição, lembre-se.
‫Tudo bem.
‫Agora, aqui embaixo, temos
‫essas caixas de visão geral aqui.
‫Então, detalhes da caixa de visão geral.
‫E, como você pode ver, temos
‫quatro caixas
‫iguais aqui, onde a única coisa que muda
‫é o nome do ícone,
‫depois a data e a próxima data.
‫Ok, então aqui o que muda não é a próxima
‫data, o
‫que muda é a descrição das caixas.
‫Então, próxima data,
‫dificuldade, participantes e classificação.
‫Tudo bem.
‫E então,
‫basicamente, este código aqui
‫é sempre o mesmo apenas com três partes que mudam.
‫Portanto, o nome do ícone, a descrição e
‫o valor dessa descrição.
‫E então, já que não gostamos de código repetido,
‫certo?
‫Vamos usar outro recurso do Pug
‫que ainda não usamos,
‫chamado mixins.
‫Portanto, os mixins são basicamente
‫pedaços de código reutilizáveis para os quais podemos passar argumentos.
‫É um pouco como uma função.
‫E também é exatamente como mixins no SAS.
‫Esse é um pré-processador CSS com o qual
‫você deve estar familiarizado.
‫Então, vamos copiar este código aqui para esta caixa de visão geral.
‫Então, copiando.
‫E agora,
‫fora deste bloco, vamos criar um novo mixin.
‫Então escrevemos o mixin e o
‫nome do mixin, que estou chamando de caixa de visão geral.
‫E um pouco como
‫uma função, podemos especificar alguns argumentos.
‫E então lembre-se de
‫como temos a descrição da caixa, então temos o valor dessa descrição
‫e vamos chamá-la de texto aqui.
‫E também o nome do ícone.
‫OK.
‫Agora, vamos copiar esse
‫texto aqui e, claro, isso agora bagunça
‫nossa formatação.
‫Vamos corrigir isso rapidamente.
‫E agora, essas variáveis aqui, elas realmente
‫funcionam como
‫todas as outras variáveis no Pug.
‫Portanto, aqui deve estar o
‫texto.
‫Direito?
‫E esta aqui deve ser a descrição.
‫Descrição tão igual.
‫Bem, aqui é realmente chamado de rótulo no CSS.
‫Então, vamos chamá-lo de rótulo aqui também.
‫Ok, então rótulo, texto e ícone.
‫E aqui também precisamos alterar o nome desse
‫ícone e todos esses nomes de ícone sempre começam com um
‫traço de ícone.
‫E tudo o que realmente precisamos
‫substituir é essa parte.
‫Então, vamos criar novamente uma string de modelo.
‫E então se livre disso.
‫E o ícone.
‫Ok e agora podemos usar isso.
‫Também gostaria de dizer que
‫poderíamos ter exportado
‫esse mixin para outro arquivo e incluído esse arquivo aqui.
‫Mas acho que isso não faz muito sentido.
‫Neste caso, porque
‫não é realmente muito código.
‫De qualquer forma, vamos seguir em frente e
‫usar esse mixin.
‫Deixe-me copiar apenas o nome dele.
‫E aqui, em vez desta caixa de visão geral.
‫E, por enquanto, deixe-me apenas duplicá-lo aqui.
‫Ok, então usamos esse mixin escrevendo
‫plus e, como uma
‫função regular, passamos argumentos
‫vazios para ele.
‫E assim nossa primeira caixa de visão geral é a próxima data.
‫Então, por enquanto, apenas a data que está aqui.
‫Só para poder mostrar que funciona de fato.
‫Portanto, 20 e 21
‫de agosto.
‫E
‫então aqui, calendário.
‫Ok, porque esse é o nome do ícone aqui.
‫E agora devemos obter
‫duas caixas.
‫Portanto, este e
‫este devem ser exatamente iguais.
‫Portanto, vamos confirmar isso rapidamente.
‫E então podemos seguir em frente
‫para usar o mixin apropriadamente.
‫E sim, então aqui estão nossas duas
‫caixas exatamente iguais.
‫Excelente.
‫Então, vamos nos livrar deste primeiro.
‫E, claro, aqui queremos a
‫data real.
‫OK.
‫E
‫então, adicione o tour. início, datas, zero.
‫Então, vamos dar uma olhada nisso.
‫E lembre-se de
‫que isso vai parecer um pouco estranho.
‫Como antes.
‫OK.
‫Então, vamos em frente e consertar isso.
‫Então, vamos realmente prosseguir a partir daqui.
‫E então o que precisamos
‫é basicamente isso.
‫Agora, não quero
‫deixar essa linha aqui muito
‫longa simplesmente colando-a aqui.
‫E então por que
‫não apenas criar uma nova variável de script java para isso.
‫Portanto, lembre-se de que precisamos usar essa
‫sintaxe aqui para criar um
‫código de script java que não produza nenhuma saída.
‫E, novamente, podemos
‫simplesmente escrever java script aqui.
‫OK.
‫E agora aqui vou simplesmente usar essa
‫data.
‫Excelente.
‫E agora vamos apenas duplicar isso aqui algumas vezes para
‫todas as caixas que temos.
‫Portanto, o primeiro é para dificuldade.
‫E o ícone está aumentando.
‫Em seguida, o próximo é para os participantes.
‫Com o ícone do usuário.
‫E o último é a classificação.
‫E o ícone é uma estrela.
‫Então, aqui temos a data, mas, aqui na
‫dificuldade, realmente temos o tour. dificuldade.
‫Então, aqui para
‫os participantes, queremos esta corda.
‫Tipo 10 pessoas.
‫Portanto, uma string
‫de modelo dizendo tour. mix, tamanho
‫do
‫grupo e, em seguida, pessoas.
‫E, finalmente, queremos a classificação e, em
‫seguida, de cinco.
‫Então faça
‫um tour, e eu nunca
‫vou me lembrar como chamei esse campo.
‫E é a média de classificações.
‫Tudo bem.
‫E então, de
‫cinco.
‫OK.
‫E deve ser isso.
‫Agora podemos nos livrar de todo esse código.
‫E assim fica muito melhor.
‫E
‫apenas para ter
‫certeza de que funciona, vamos salvar
‫aqui, recarregar e, de fato, ficaremos com facilidade,
‫25 pessoas, e a pontuação
‫de cinco em cinco.
‫Impressionante.
‫Já cobrimos muito terreno,
‫mas vamos dividir este vídeo em dois e continuar com
‫o resto da página
‫no próximo.