‫Instrutor: E antes de
‫começar, vamos apenas fazer uma rápida recapitulação da renderização do lado
‫do servidor e do lado do cliente.
‫E também, quero mostrar a vocês neste
‫vídeo o site renderizado do lado do servidor que iremos
‫construir nas próximas horas.
‫Portanto, lembre-se de como na renderização do lado do
‫cliente, a construção real do
‫site acontece no lado do cliente.
‫E para isso, precisamos de uma fonte
‫de dados, que geralmente é uma
‫API que envia dados ao cliente conforme solicitado.
‫Então, é isso que estamos construindo
‫até este ponto do curso.
‫Mas agora que você já domina
‫essa parte, é hora de passar para a renderização do
‫lado do servidor e realmente construir o site no servidor.
‫E o principal aspecto da renderização do lado
‫do servidor é construir o
‫HTML real, basicamente porque é onde todos os nossos dados serão armazenados.
‫E para fazer isso, usamos
‫modelos, que têm
‫espaços reservados onde injetaremos nossos dados conforme necessário.
‫Assim, sempre que houver uma solicitação,
‫digamos para a página
‫inicial, obtemos os dados necessários do banco de
‫dados, injetamos em um modelo,
‫que produzirá HTML e, por
‫fim, enviaremos esse HTML, junto
‫com CSS e JavaScript e arquivos
‫de imagem , de volta para o cliente.
‫Muito simples, certo?
‫Agora, ainda podemos usar a API para
‫algumas das coisas no
‫front end e, na verdade, também faremos isso.
‫Ok, de qualquer maneira, deixe-me mostrar o
‫que realmente vamos construir nesta seção.
‫Então, este é o site final renderizado do Natours, e está
‫realmente ativo em www. natours. dev, e se você
‫quiser, vá em frente
‫e abra
‫esta página em seu navegador agora
‫e dê uma olhada.
‫Você terá que especificar este W-W-W, ok?
‫Caso contrário, não vai funcionar.
‫De qualquer forma, aqui você vê todos os
‫tours com os
‫quais trabalhamos enquanto construíamos nossa API,
‫e todos os dados aqui são exatamente os mesmos.
‫Então, todos os nossos nove tours estão aqui,
‫certo,
‫e novamente, isso é
‫exatamente o que iremos construir nesta seção.
‫Vamos dar uma olhada em uma das páginas de detalhes aqui.
‫Então, o Park Camper,
‫e de fato, você tem a classificação média.
‫Você tem todos os guias turísticos.
‫Você tem então algumas fotos.
‫Você tem todos os locais e exibidos em um mapa, na verdade.
‫E você também tem a revisão.
‫E essas, novamente, são as análises
‫reais vindas de usuários reais no banco de dados.
‫Então, se você fosse conferir esse passeio
‫aqui no Postman,
‫digamos, então vamos pegar todos os passeios aqui
‫primeiro apenas para obter a identificação do Park Camper.
‫Então, Sea Explorer,
‫City Wanderer,
‫então onde é isso?
‫Ah, aqui está o Park Camper.
‫Então, se fizermos esse passeio agora, você
‫verá que, por exemplo, os
‫guias turísticos são exatamente as mesmas pessoas.
‫Então, há Aarav, Ben e Kate, e
‫então, de fato, eles são as pessoas que na verdade
‫são os guias turísticos.
‫Então, esses
‫três, e de novo, as
‫resenhas também são as da Ayla, da Laura, da Isabel
‫e do Alexander, além dessas outras ali também.
‫E então, se verificarmos os comentários aqui,
‫então, de fato, eles
‫estão vindo de Ayla e Laura e Isabel e ...
‫Sim, realmente, você vê que esses dados
‫são realmente os dados subjacentes
‫a partir dos quais este site é gerado dinamicamente, certo?
‫Então, também podemos fazer o login, e
‫qualquer um dos usuários que
‫tivermos no banco de dados trabalhará para isso.
‫Então, se dermos uma olhada em um de nossos usuários,
‫por exemplo, vamos usar Steve aqui, que
‫na verdade é um guia turístico.
‫Então, pegamos o
‫exemplo, usamos
‫o e-mail, e a
‫senha é, como sempre, test1234.
‫Ok, então nós logamos, e
‫isso realmente acontece nos bastidores
‫usando nossa API.
‫Ok, e agora, aqui temos Steve.
‫Podemos até abrir sua conta.
‫Podemos então alterar a senha
‫e isso, novamente, acontecerá
‫nos bastidores, usando o endpoint de API exato
‫que construímos para um usuário que altera sua senha.
‫Você também pode verificar as reservas
‫desse usuário em particular, que, neste
‫caso, não deveria ser
‫nenhuma, porque ele é um guia turístico.
‫Então, você vê que está vazio aqui, mas
‫de qualquer forma ...
‫Sim, é isso que
‫eu queria mostrar a você porque é
‫isso que faremos no restante desta seção.
‫Espero que você esteja animado com
‫isso, assim como
‫eu, e agora vamos começar.