‫Instrutor: Agora vamos fazer a primeira
‫parte da construção do site de farm de nós
‫dinâmicos apenas criando os
‫modelos que conterão os dados reais.
‫E lembre-se que nosso objetivo é construir
‫esse tipo de site dinâmico onde temos uma visão geral onde
‫temos todos os produtos, e
‫então cada produto tem sua página de detalhes
‫como eu mostrei antes.
‫E esses dados aqui são, obviamente, lidos do arquivo json,
‫portanto, se alterarmos o arquivo json, por
‫exemplo, excluindo um desses produtos e recarregando esta página,
‫esse produto deve ser removido daqui.
‫Ou se mudamos alguns desses dados aqui ou o nome,
‫bem, então, isso deve ser atualizado aqui no site.
‫Novamente, porque é um site dinâmico
‫construído a partir dos dados que estão no arquivo json.
‫Como mencionei,
‫a primeira etapa é realmente construir esses modelos,
‫um para esta página de visão geral
‫e outro para a página de detalhes do produto.
‫E vamos começar com a página de detalhes e
‫vou construir esses modelos
‫com base nessas páginas da web de dados que
‫temos aqui na pasta de modelos.
‫Então, vamos dar uma olhada neles.
‫Portanto, temos a visão geral e o produto e, novamente,
‫vamos começar com o produto. html.
‫Temos aqui o nome do produto e esta imagem
‫aqui, que na verdade é um emoji, mas isso não importa.
‫Então, em vez de solicitar as imagens
‫reais para todos esses produtos diferentes, optei por
‫apenas ir com emojis.
‫Isso é muito mais fácil.
‫O mesmo vale para o estilo.
‫Portanto, tenho todo o estilo CSS embutido nas páginas html para
‫que não tenhamos que fazer
‫várias solicitações para obter esses dados diferentes, certo?
‫Porque,
‫na verdade, cada arquivo diferente acionará uma solicitação diferente, certo?
‫Lembra antes de onde tínhamos a solicitação
‫do ícone cinco, certo?
‫Vimos uma solicitação para a raiz, para a página principal, e
‫uma solicitação para aquela imagem, e isso significa que
‫cada ativo, então
‫cada peça que faz parte do site,
‫terá
‫sua própria solicitação, e nós terá que lidar
‫com isso, e não
‫queremos fazer isso, então eu simplesmente ininei o estilo nessas páginas html.
‫Tudo bem, então aqui está um monte de estilo, estilo, estilo,
‫e aqui temos o, bem,
‫o nome do produto em algum lugar.
‫Oh sim, aqui, então é o nome do produto.
‫Aqui está a imagem do produto, que
‫novamente é apenas um emoji, mas vem deste campo de imagem.
‫Portanto, temos este campo chamado imagem.
‫Direito?
‫Então nós temos de onde vem, alguns dos
‫ingredientes e preço, e também a descrição aqui embaixo, ok?
‫Mas, novamente, tudo isso vem desses campos diferentes.
‫Então, vamos dar uma olhada nos campos que temos.
‫Assim, o nome do produto, imagem, de, nutrientes, quantidade, preço, se
‫é orgânico ou não, e a descrição.
‫Então, o que vamos fazer agora é basicamente
‫substituir todas essas partes que queremos adicionar dinamicamente
‫por um espaço reservado e,
‫mais tarde, com nosso código substituir esse
‫espaço reservado pelo pedaço real de dados, certo?
‫Então, vamos começar aqui com o nome
‫do produto, e vou
‫excluí-lo e colocar um marcador aqui.
‫E posso fazer tudo o que quiser para um espaço reservado.
‫Eu só gosto de ir neste caso com algo assim.
‫Assim...
‫Nome do produto, porcentagem e depois as chaves.
‫Então, novamente, pode ser qualquer coisa que
‫desejamos, mas queremos
‫encontrar algo que provavelmente não
‫está na página para que não substituamos nada
‫de errado e, portanto, qualquer coisa que não queremos substituir, certo?
‫E eu poderia colocar algo assim aqui, ok?
‫E então substituir tudo isso, mas acho que, assim,
‫parece bom e é fácil de reconhecer.
‫Portanto, tudo o que precisamos fazer é
‫seguir em frente e colocar
‫tudo isso aqui, e então substituirei, é claro, esses nomes.
‫Então, aqui temos os nutrientes.
‫Aqui temos a quantidade.
‫E aqui eu tenho o preço.
‫Aqui embaixo nós temos o preço de novo, você vê.
‫E o preço é só o número, ok?
‫O símbolo do euro aqui fica bem
‫ali porque o preço que temos é, na verdade, apenas um número.
‫Vamos dar uma olhada nisso aqui em json.
‫Portanto, temos apenas 6. 50, mas não a moeda.
‫E na verdade o mesmo aqui, vamos pegar isso e
‫copiá-lo aqui muito rápido, e sim, na verdade,
‫esqueci de substituir este, então este
‫é o de.
‫E vamos escrever a partir de, não em maiúsculas, para que este texto
‫faça um pouco mais de sentido.
‫Então, por exemplo, de Portugal ou da Espanha ou seja o que for.
‫Oh, o que é isso aqui?
‫Ok, acho que acabei de escrever no meio do nome do produto.
‫Então, nutrientes.
‫OK.
‫Ah, e aqui embaixo temos, é claro, a descrição, então
‫vamos substituí-la também.
‫Oh, claro que preciso pegar este de volta
‫e
‫assim a descrição.
‫Em seguida, temos essas imagens, então o abacate,
‫e estou digitando alguns comandos V,
‫colando isso aqui, e então posso editar tudo ao
‫mesmo tempo.
‫Ok, então imagem e, oh, algo aqui no título.
‫Também queremos substituir a imagem aqui e o nome
‫do produto também.
‫Assim.
‫Nome do
‫produto aqui e
‫aqui a imagem para que este também seja substituído dinamicamente.
‫Tudo bem, agora só mais uma coisa
‫um pouco mais complexa.
‫Cadê?
‫Tudo bem, está aqui.
‫Portanto, alguns produtos são orgânicos e outros não.
‫E então há uma classe no CSS que
‫será adicionada a todos esses elementos quando eles não forem orgânicos, certo?
‫Então essa é a aula aqui.
‫Então, quando não é orgânico, não deve ser exibido, então
‫este emblema orgânico aqui.
‫E só para mostrar do que
‫estou falando, o emblema orgânico é essa coisa aqui, ok?
‫Portanto, não queremos exibir
‫isso no caso de ser falso no json, então o que
‫vamos fazer aqui é adicionar outro marcador
‫aqui ou realmente dentro da classe,
‫e então vou chamá-lo de não orgânico
‫.
‫E você vai ver porque um pouco mais tarde, ok?
‫Quando substituirmos isso, fará um pouco mais de sentido para você.
‫Tudo bem, então acho que este está
‫feito e simplesmente sobrescrevi tudo o que tínhamos.
‫Deixe-me chamar este
‫modelo de produto, certo?
‫Então, este está feito.
‫Vamos passar para o próximo, a visão geral.
‫E este vai ser um pouco diferente, e
‫deixe-me mostrar o porquê.
‫Então, novamente, temos todo o SCC embutido aqui,
‫e agora temos esse contêiner de
‫cartões e, para cada um dos produtos, temos um cartão.
‫Então, cada uma dessas cartas aqui tem essa marca de figura, certo?
‫Na verdade, não sabemos
‫quantos desses cartões estarão aqui nesta visão geral, certo?
‫Imagine que temos 10 produtos no json.
‫Então, precisamos de 10 desses cartões.
‫Mas imagine que temos apenas um ou dois.
‫Pois bem, não queremos todas as 10 cartas, mas apenas duas.
‫Então, como vamos fazer isso?
‫Bem, na verdade, criaremos apenas outro modelo onde há apenas
‫um cartão nele e, em seguida, incluiremos
‫um desses modelos para cada um
‫dos cartões que queremos,
‫portanto, cada um dos produtos no arquivo json.
‫Tudo bem, faz sentido?
‫Então, vamos chamar isso aqui de visão geral do modelo.
‫E vou prosseguir e criar o cartão modelo.
‫Então, o que vou fazer aqui é agora, como mencionei, voltar ao
‫topo, então
‫vou em frente e pego uma figura.
‫Isso foi demais.
‫E cole aqui.
‫Então abaixe um pouco isso.
‫Ok, então cada cartão agora tem sua própria figura.
‫Ok, agora o que vou fazer
‫é excluir todos os cartões daqui e
‫criar um marcador aqui também.
‫Cartões
‫de produto.
‫OK?
‫Então, novamente, mais tarde
‫em nosso código, criaremos quantos cartões precisarmos aqui.
‫Por exemplo, se temos
‫cinco produtos, criamos cinco cartões como este.
‫Em seguida, iremos colocá-los juntos em uma
‫sequência e, em seguida, substituir os cartões de
‫produtos por aquela sequência que contém todos esses cartões diferentes, certo?
‫Então, na verdade, terminamos com este.
‫OK?
‫Porque a maioria
‫das coisas acontece dentro do cartão modelo.
‫Portanto, nada mais para substituir aqui.
‫Estou vindo aqui apenas para copiar isso
‫aqui, e agora é muito
‫simples para nós substituir o que precisamos aqui.
‫Portanto, esta aqui é a imagem, e na verdade a temos duas vezes.
‫Ok, isso faz com que pareça um pouco melhor.
‫Imagem, imagem, então aqui está o nome do produto, lembra?
‫Aqui
‫neste lugar, teremos novamente o marcador não orgânico e, novamente, este fará
‫mais sentido para você um pouco mais tarde.
‫Mais orgânico, então a quantidade aqui.
‫Então o preço.
‫Portanto, também precisamos construir o link aqui.
‫Este aqui é o elemento
‫A, caso você não esteja realmente familiarizado com html,
‫o elemento A é para um link.
‫Então, deixe-me mostrar a você um exemplo prático real.
‫Então, quando passarmos o mouse aqui neste link,
‫lá embaixo no canto esquerdo inferior, aqui
‫embaixo, você verá que é um produto de barra e
‫o ID é igual a zero.
‫E este é ID igual a um, ID é igual a dois.
‫Ok, e se clicarmos nisso, veremos realmente aqui.
‫Então slash product e então ID igual a zero,
‫e este ID aqui é exatamente o ID que temos no json.
‫Ok, então este aqui.
‫Então o abacate é um, o queijo de cabra tem um.
‫Desculpe, o abacate tem zero, é claro.
‫O brócolis tem dois e assim por diante.
‫E aqui realmente precisamos construir o link.
‫Portanto, produto e, claro, não em maiúsculas.
‫Portanto, produto e o ID
‫são ID.
‫OK?
‫Então, temos que substituir este marcador de posição de ID aqui com
‫o número correto.
‫Portanto, zero, um, dois, três, quatro, cinco e assim por diante,
‫dependendo de quantos produtos existem.
‫Suponha que temos um queijo aqui, certo?
‫Vamos voltar aqui.
‫Bem, então a imagem será esta aqui, o
‫nome do produto será este e o ID será um.
‫Ok, então isso aqui
‫será traduzido para ID igual a um e nosso manipulador aqui.
‫Portanto, este manipulador de servidor aqui cuidará de
‫ir para a página certa quando o ID do produto for um, certo?
‫Essa lógica ainda não foi implementada, mas é
‫claro, faremos isso nas próximas aulas.
‫Portanto, agora temos os modelos realmente construídos e, portanto, vamos
‫passar para o próximo vídeo, onde começaremos
‫a preencher os modelos e enviar de volta
‫a página final ao navegador.