‫Instrutor: Nesta aula,
‫vamos começar a realmente construir a página de visão geral do tour.
‫E lembre-se de que é
‫assim que a página de visão geral se parece agora.
‫Portanto, não tem nenhum conteúdo
‫real, e é isso que vamos adicionar neste vídeo.
‫Então, estamos aqui nesta rota raiz e,
‫novamente, é onde estará a visão geral, certo?
‫Portanto, em nosso roteador
‫de exibição, é claro que é essa rota, ok?
‫E então o controlador
‫responsável por renderizar esta página é o controlador getoverview, certo?
‫Então, vamos primeiro até aqui e expor as
‫etapas que vamos seguir para
‫renderizar esta página.
‫Então, a primeira coisa que precisamos fazer
‫é realmente obter todos os dados do tour de
‫nossa coleção, certo?
‫Portanto, obtenha os
‫dados do tour da coleta.
‫Em segundo lugar, vamos construir nosso modelo e
‫não vamos fazer
‫isso aqui nesta função do controlador, é claro.
‫Mas, ainda vamos escrever aqui.
‫Portanto, crie um modelo e, finalmente, renderize esse modelo, usando
‫os dados do tour da etapa um.
‫Portanto, começando com a primeira
‫etapa aqui, obtenha os dados do passeio da
‫coleção, o que significa que é claro
‫que primeiro precisamos importar o modelo de passeio.
‫Então, isso é algo que já fizemos
‫várias vezes antes.
‫Na verdade, é um nível acima
‫e depois nos modelos.
‫e modelo turístico.
‫E também vamos
‫precisar da função catchAsync, porque
‫é claro
‫que essa visão geral se tornará uma função assíncrona.
‫Tudo bem, então vamos marcar este como assíncrono.
‫Agora também precisamos avançar aqui para fazer
‫a função catchAsync realmente funcionar.
‫Ok, espero que agora você realmente comece a ver o
‫valor de termos construído todas as coisas
‫da API e todos
‫os códigos que fizemos até este ponto, de modo que tudo
‫o que precisamos fazer agora é realmente conectar todos esses peças juntas, ok?
‫Então, já sabemos agora como fazer tudo isso.
‫Já temos nosso modelo de tour funcionando corretamente.
‫Então agora tudo isso é muito fácil.
‫Portanto, const tours é igual a aguardar.
‫Então, novamente, nada de novo neste ponto.
‫E encontre, basicamente, todos eles, certo?
‫E agora o que vamos realmente fazer
‫com os dados dos tours?
‫Bem, teremos que colar todos os
‫dados do tour no modelo, para que possamos
‫realmente usá-los e exibi-los no site, certo?
‫E isso é realmente muito fácil de fazer.
‫Tudo o que precisamos fazer é colocá-lo
‫aqui neste objeto que será colado no modelo de
‫visão geral neste caso, ok?
‫Então, muito fácil, tudo o que precisamos dizer são passeios.
‫Então, isso é o mesmo que tours é igual a
‫tours e novamente você já sabe que começando com ES 6 é o
‫suficiente para fazer assim.
‫Ótimo, então sempre que houver uma solicitação
‫para a página de visão geral, basicamente nossa página
‫inicial do nosso site renderizado dinamicamente, todos os dados do tour
‫serão recuperados de nosso banco de dados aqui
‫e, em seguida, esses dados serão colados em nosso modelo.
‫E agora tudo o
‫que precisamos fazer é realmente construir esse modelo, certo?
‫Então, vamos passar para a visão geral. pug.
‫Aqui, podemos realmente nos livrar deste espaço reservado h1 aqui.
‫E agora eu quero dar uma
‫olhada no arquivo html estático aqui novamente.
‫Então, isso está na pasta pública e, em
‫seguida, visão geral. html, ok?
‫Então, já construímos o cabeçalho em
‫uma das palestras
‫anteriores e agora é hora de construir essa parte aqui.
‫Agora, quando construímos o modelo
‫pela primeira vez, eu realmente o tinha errado no meu
‫arquivo html e tinha uma visão geral da classe
‫da seção, mas em seu arquivo inicial
‫você deveria ter este main com a classe main.
‫E, então eu acredito em seu
‫arquivo, há na verdade um pequeno texto explicando isso, ok?
‫Mas, de qualquer maneira, nós realmente deletamos essa parte
‫de nosso template base.
‫Portanto, lembre-se disso, que
‫aqui no conteúdo, na verdade, não temos html.
‫Então aquele elemento principal que está
‫no html está agora, longe de ser encontrado.
‫E agora precisamos disso em nossa visão geral, certo?
‫Então, vamos criar essa parte do html na visão geral porque
‫depois disso teremos todos esses cartões repetidos.
‫Então, vamos dar uma olhada
‫nisso também antes de copiar o código.
‫Então, você vê que temos esses
‫cartões aqui e, basicamente, cada um desses cartões, então cada um
‫desses elementos aqui, é
‫o que chamo de um cartão.
‫E, basicamente, teremos nove cartas.
‫Então, esses nove cartões nesta página de visão geral.
‫E são nove cartas porque agora temos
‫nove tours, mas
‫claro, podem ser menos ou mais dessas cartas, certo?
‫Mas, de qualquer forma, o que é importante
‫notar aqui é que essas cartas na
‫verdade se repetem indefinidamente.
‫Portanto, temos este elemento de cartão enorme aqui.
‫E então há
‫o primeiro, e depois há muitos elementos repetidos iguais.
‫OK?
‫E então, na verdade eu fui em frente e criei um
‫modelo de pug apenas
‫para este cartão, para que não tenhamos que
‫escrevê-lo manualmente agora e perder muito tempo fazendo isso, certo?
‫Isso tornaria o curso desnecessário muito longo
‫e decidi criar esse modelo de antemão
‫para usarmos agora.
‫Agora, é claro, se você quiser praticar suas habilidades
‫de pug um pouco mais, fique à vontade para pausar
‫o vídeo neste ponto e, em seguida, traduzir todo esse código em pug.
‫Tudo bem?
‫E quando terminar, você pode voltar.
‫Mas agora irei em frente e usarei esse modelo.
‫E isso está aqui nos dados de desenvolvimento e,
‫em seguida, nos modelos e nos modelos de cartões de turismo, certo?
‫E esse é o cartão inteiro
‫para um cartão, basicamente traduzido em código pug, certo?
‫Então vamos
‫copiar tudo isso, colocar aqui na visão geral, ok?
‫E então vamos ter em mente que antes disso,
‫nós também precisamos deste contêiner principal e deste cartão, então vamos
‫apenas copiar isso também.
‫Então, apenas aqui
‫como referência, para que agora possamos escrever
‫main main e ali temos um dev chamado card container.
‫OK?
‫E então, como o nome
‫diz, esse contêiner vai conter o cartão.
‫Então agora vamos recuar isso, porque agora não
‫está realmente dentro do contêiner do cartão.
‫Portanto, agora seria dentro do principal, mas não
‫é o que queremos.
‫E então, eu seleciono tudo e clico na guia.
‫Apertei a tecla tab novamente e agora vemos que
‫está no nível correto.
‫Está dentro da embalagem do cartão.
‫Mas, na verdade, ainda não está 100%
‫correto porque
‫esse elemento também deve estar dentro do elemento card.
‫E por alguma razão, copiar este modelo
‫de um arquivo para
‫outro, meio que bagunçou um pouco o código.
‫Portanto, tenha cuidado com isso ao colar o
‫código assim.
‫Então, em nosso modelo original, estava tudo correto,
‫como você pode ver, mas quando copiamos,
‫meio que bagunçou.
‫Então, vamos fechar isso.
‫Na verdade, também podemos
‫fechar isso, não precisamos mais dele e,
‫na verdade, também do template base e do tour.
‫Portanto, estamos trabalhando apenas com a visão geral agora.
‫E agora temos este cartão aqui.
‫E agora, como você pode ver, também é uma placa completamente estática.
‫Portanto, ele ainda não
‫usa os dados que colamos no modelo, certo?
‫Então ele tem essa imagem estática, tem todo esse texto aqui e
‫não usa a variável de jeito nenhum.
‫Ok, porque essa parte, eu realmente queria
‫fazer junto com você.
‫Porque na verdade essa é a parte mais importante.
‫Portanto, criar todo esse modelo
‫como esse não é difícil e
‫o que realmente importa é como preenchê-lo com dados, certo?
‫E é isso que vamos fazer a seguir.
‫Mas, por enquanto, vamos
‫dar uma olhada em como isso se parece agora.
‫Então lembre-se de que devemos ter apenas um cartão,
‫e não nove, certo?
‫Porque, novamente, temos apenas um elemento de placa estático
‫neste ponto.
‫Recarregue isso, e isso não parece tão certo.
‫Então, vamos tentar descobrir o que está acontecendo aqui.
‫Portanto, temos nosso elemento principal conforme
‫criamos e, em seguida, temos nosso contêiner de cartão também.
‫Mas então, por alguma
‫razão, há um cano principal lá novamente.
‫Umm ah ok, é claro que preciso excluir este
‫elemento html original que temos lá.
‫Então, vamos tentar de novo.
‫E agora, isso parece melhor, ok?
‫Agora, a imagem aqui ainda está
‫faltando, mas não se preocupe com isso por enquanto.
‫O que é
‫importante é que temos este cartão bonito aqui, certo?
‫Agora, a questão é que
‫claro que queremos ter um cartão para cada um dos passeios, certo?
‫Basicamente, o que queremos
‫fazer agora é percorrer a matriz de
‫tours que colamos no modelo, certo?
‫Então, basicamente essa variável de passeios.
‫E lembre-se de que esta
‫é uma matriz porque contém vários documentos de passeio.
‫E agora vamos percorrer esse
‫array e criar um cartão para cada um dos documentos do tour, certo?
‫E, felizmente, isso é muito fácil de
‫fazer no pug porque basicamente o pug vem com loops embutidos, certo?
‫E
‫agora podemos fazer cada turnê em turnês, ok?
‫Portanto, tours aqui é a variável que colamos e,
‫em cada iteração,
‫a variável atual será chamada de tour.
‫Poderíamos chamá-lo de x ou x y z ou qualquer outra coisa,
‫mas faz sentido apenas chamá-lo de tour, ok?
‫E assim, em cada iteração, o que vem
‫aí é o que será impresso basicamente.
‫Portanto, isso novamente precisa ser indentado em mais um nível.
‫Basicamente, está dentro
‫desta declaração de loop aqui.
‫Ótimo, então vamos ver como fica agora.
‫E agora devemos obter nove cartas idênticas.
‫E, de fato, foi exatamente isso o que aconteceu, certo?
‫É claro que
‫esses dados aqui ainda não são criados dinamicamente.
‫E isso é exatamente o que
‫vamos consertar no próximo vídeo.