‫-: [Jonas Schmedtman] Então, já temos para os modelos HTML.
‫Agora vem a parte mais difícil,
‫que é realmente substituir os espaços reservados pelo conteúdo.
‫Então, vamos começar com a visão geral.
‫E vamos nos dar um tempo para respirar aqui
‫e adicionar alguns comentários.
‫(digitando em um
‫teclado) Então, página de visão geral e alguns comentários aqui.
‫Então a página do produto, e aqui temos a API.
‫E aqui temos o Não encontrado.
‫Tudo bem, isso já parece um pouco melhor.
‫Então, novamente, estamos começando com a página de visão geral.
‫E assim,
‫a primeira etapa é realmente carregar a visão geral do modelo.
‫Ok, então cada vez que houver uma nova
‫solicitação para esta rota, então a rota ajustada ou /
‫Visão geral, a primeira coisa que
‫faremos é ler a visão geral do modelo.
‫Mas, assim como antes, podemos realmente
‫fazer isso fora desse retorno de chamada, certo?
‫Por causa desses modelos, eles sempre serão os mesmos.
‫Portanto, você pode realmente lê-los
‫na memória logo no início, quando iniciarmos o aplicativo.
‫E então, quando necessário, simplesmente vamos
‫em frente e recolocamos o conteúdo ali.
‫Ok, então assim como fizemos com os dados aqui,
‫também não há necessidade de ler os dados
‫toda vez que houver
‫uma solicitação e o mesmo acontece com os modelos.
‫OK?
‫Na verdade, vou
‫avançar e fazer isso para todos os três
‫modelos aqui, então deixamos isso de lado.
‫Então, vou prosseguir, e apenas para obter este, chame-o de temp
‫para visão
‫geral do modelo e nome do DAR
‫e aqui temos os modelos.
‫E então / template-overview.
‫Ok, então duplique isso aqui duas vezes
‫para que
‫tenhamos um para o cartão,
‫então um cartão-modelo e um para o produto-modelo.
‫Produto, certo.
‫E, novamente, tenha em mente que podemos
‫fazer com a versão sincronizada porque estamos no
‫código de nível superior.
‫Executamos apenas uma vez, logo no início,
‫quando carregamos esses aplicativos.
‫Portanto, não poderíamos fazer isso dentro da função
‫de retorno de chamada createServer, certo?
‫Porque este é chamado sempre que houver um pedido.
‫E se tivermos um milhão de solicitações ao mesmo tempo,
‫poderemos bloquear o código um milhão de vezes,
‫uma para cada solicitação.
‫E isso é algo que não queremos.
‫Portanto, a visão geral, vamos em frente e,
‫antes de tudo, apenas
‫para testá-la, envie esta visão geral temporária como a resposta.
‫Agora, antes de
‫fazermos isso, precisamos ir em frente e definir este tipo de conteúdo como HTML.
‫Então, deixe-me realmente copiar este pedaço de código aqui.
‫Portanto, o código de status é
‫200 e o tipo de conteúdo deve ser text / html.
‫Portanto, reinicie o servidor aqui
‫e vamos agora dar uma olhada e, de
‫fato, vamos lá.
‫Então aqui está
‫nossa página estilizada que já conhecemos desta.
‫Agora, o que está
‫faltando aqui são essas linhas, e isso
‫porque ainda temos nosso marcador de posição.
‫E, portanto, a próxima tarefa agora é substituir esse espaço reservado pelos
‫cartões reais.
‫E como faremos isso?
‫Bem, lembre-se de que no objeto de dados,
‫temos um array de todos os objetos que estão
‫nos dados. JSON.
‫Então, todos esses cinco objetos, todos em objetos JavaScript, porque
‫já analisamos esses dados com apenas uma string.
‫OK?
‫Portanto, o objeto de dados é novamente uma
‫matriz de, neste ponto, cinco objetos.
‫Então, o
‫que temos que fazer é basicamente
‫percorrer esse array e, para cada um
‫deles, substituir os espaços reservados no modelo
‫pelos dados reais do produto atual, certo?
‫Faz sentido?
‫Então, vamos colocar isso no código.
‫Então, objeto de dados, vamos percorrê-lo com um mapa
‫porque queremos retornar algo e
‫esse algo, vamos salvar em um
‫novo array, então vamos chamá-lo de cardsHtml,
‫certo?
‫Tenho certeza de que você está familiarizado com o método do mapa, certo?
‫Então, o que o mapa faz é aceitar uma função
‫de retorno de chamada e esta função de retorno de chamada
‫obtém como argumento o elemento atual, então o elemento do loop
‫atual e tudo o
‫que retornarmos aqui serão salvos em um array, ok?
‫Então, digamos que estamos fazendo um loop em um array com
‫cinco elementos,
‫que é o caso aqui, e
‫para cada elemento, retornaremos algo, e esse algo será
‫então colocado na mesma posição, mas neste novo array cardsHtml.
‫Então, o que faremos em cada uma dessas iterações?
‫Bem, queremos substituir os marcadores de posição, certo?
‫Na verdade, vou prosseguir e
‫criar uma função
‫para isso, que será chamada de replaceTemplate.
‫OK?
‫E o replaceTemplate aceitará o HTML do cartão.
‫Então, basicamente, o tempCard.
‫E vai levar no objeto atual, então o elemento.
‫OK?
‫Portanto, este elemento é o que contém os dados, certo?
‫Então, novamente, cada um deles é agora um
‫objeto que contém os dados em cada uma dessas propriedades.
‫OK?
‫E não se preocupe, se não fizer 100%
‫sentido agora, fará assim que criarmos a função replaceTemplate, certo?
‫Então, vamos agora fazer isso aqui também.
‫Portanto, replaceTemplate é uma função que aceita
‫um modelo, apenas vou chamá-la de temp aqui e,
‫claro, de produto.
‫Tudo bem.
‫Então vamos criar uma variável
‫chamada output
‫e essa será o template. substitua em nosso espaço reservado.
‫E vamos colocar aqui todos os marcadores
‫de posição que temos, começando com PRODUCTNAME, certo?
‫E então aquele será substituído pelo produto. NOME DO PRODUTO.
‫Portanto, produto, que é o argumento que passamos
‫para a função,. PRODUCTNAME porque,
‫bem, esse é o nome do campo
‫onde está o nome do produto.
‫Tudo bem?
‫Então, vá em frente e copie esse, e tudo bem.
‫Agora, um pequeno truque que temos
‫que usar aqui é realmente não usar as
‫aspas, mas, em vez disso, usar uma expressão regular.
‫E isso porque
‫pode haver várias instâncias desse espaço reservado
‫e, portanto, o truque é envolvê-lo em uma expressão regular e
‫usar o sinalizador-g sobre ele.
‫O que significa global
‫e isso fará com que todos esses marcadores sejam substituídos e
‫não apenas o primeiro que ocorrer.
‫Portanto, este substitui o nome do
‫produto, agora vamos prosseguir e substituir todos os outros.
‫Portanto,
‫saída = saída. substitua, e agora iremos
‫em frente e
‫copiaremos isso para tornar minha vida um pouco mais fácil.
‫Então, imagem, e isso é chamado de imagem
‫e não em maiúsculas, é assim.
‫OK?
‫Agora, aqui em cima, criei
‫essa variável porque queria substituir esse nome de produto em temp.
‫Portanto, no argumento, e não é uma boa
‫prática manipular diretamente os argumentos que
‫passamos para uma função.
‫E então criei uma nova
‫variável e de
‫agora em diante, irei manipular aquela primeira, ok?
‫E é por isso que não é um const, mas sim um let.
‫Então, um let, podemos sofrer mutação depois de ser criado, certo?
‫Agora, deixe-me ir em frente, copiar alguns deles.
‫Então, preço, e é chamado de preço aqui também,
‫então temos
‫de, então temos nutrientes.
‫Claro que eu poderia copiar tudo
‫isso, mas não vou pular para frente e para trás aqui.
‫Portanto, quantidade, descrição
‫e
‫provavelmente irei cometer algum erro aqui, escrevendo
‫tudo isso manualmente, mas em
‫um produto pequeno, isso não é grande coisa.
‫Na verdade, este nós não precisamos, ou
‫na verdade precisamos
‫porque para o orgânico, então o
‫orgânico está faltando, mas
‫lembre-se que o orgânico era um pouco especial.
‫Então, neste caso, se o produto não é orgânico,
‫então produto. orgânico, se for
‫falso,
‫então lembre-se, isso é na verdade um negrito.
‫Então, por exemplo, temos verdadeiro orgânico aqui,
‫mas temos falso aqui.
‫OK?
‫E então, se for falso, bem, nesse caso,
‫queremos substituir o NOT. ORGÂNICO.
‫Portanto, o NÃO. Espaço reservado ORGÂNICO com simplesmente não orgânico.
‫Tão inorgânico porque este é o nome
‫da classe que mostrei antes.
‫Então,
‫é esse.
‫OK?
‫Então ele será substituído aqui, ok?
‫E então novamente, caso não
‫seja orgânico, bem, então o nome da
‫classe NOT_ORGANIC estará aqui e todo o lote não será deslocado.
‫Tudo bem, faz sentido?
‫Então, vamos
‫ver se w-- ah, desculpe, o
‫código
‫real está abaixo dele.
‫Então, vamos tentar dar mais sentido a isso.
‫Então, novamente, nós fazemos um loop sobre este objeto de dados
‫já aqui que contém todos os produtos
‫e em cada iteração, iremos substituir os marcadores
‫de posição no cartão de modelo com o produto atual
‫que é o elemento, certo?
‫E esta função de seta irá então implicitamente retorná-la aqui.
‫Então é o mesmo que voltar aqui, ok?
‫Mas não é realmente
‫necessário porque em uma função de seta, se você
‫não tiver as chaves, esse valor aqui é automaticamente retornado.
‫Ok, caso você não saiba
‫disso, acabei de lembrar que esquecemos de retornar
‫a saída daqui.
‫OK?
‫Então, é claro, inserimos o modelo e o produto, mas
‫então, é claro, temos que gerar o HTML final.
‫Direito?
‫E então isso é conectado aqui e,
‫finalmente, tudo isso aqui substituirá
‫um array, com os cinco HTMLs finais, cada um para
‫um dos cinco cartões.
‫Então, cada um para um dos cinco produtos, certo?
‫Agora, vamos prosseguir e registrar isso no
‫console antes de colocá-lo na página de visão geral.
‫Então cardsHtml só para ter certeza de que tudo funciona aqui.
‫OK?
‫Portanto, precisamos recarregar o servidor, não se esqueça disso.
‫Tudo isso funciona da mesma
‫forma, mas vamos agora dar uma olhada no console.
‫E estou começando a ver coisas boas aqui.
‫Portanto, temos um
‫array e, na verdade, substituímos o material.
‫Portanto, temos alguns abacates aqui.
‫Diz aqui FreshAvocados.
‫Tem quatro abacates por caixa, o
‫preço, e então sim, na verdade
‫tudo parece muito bom.
‫E, de fato, também é um array.
‫Temos essa primeira figura,
‫depois uma vírgula e aqui começa o
‫próximo elemento, então a próxima figura, certo?
‫Portanto, temos agora um array de todos esses elementos, mas
‫o que queremos na verdade não é
‫um array, mas uma grande string contendo todo esse HTML.
‫Então, isso é realmente muito simples de conseguir.
‫Tudo o que temos que fazer é no final deste array,
‫então nos lembramos de que tudo isso
‫retorna este array que vemos aqui embaixo, e então
‫no final tudo o que
‫fazemos é unir por uma string vazia, e
‫então isso vai unir todos desses elementos em uma string.
‫E agora cardsHtml é realmente uma string.
‫OK?
‫E agora temos nossos cartões prontos e
‫a última peça do quebra-cabeça
‫é ir em frente e substituir esse espaço reservado.
‫Então, isso aqui, na verdade copiando agora,
‫agora substituindo este espaço
‫reservado pelo HTML que acabamos de criar.
‫Então, vamos chamá-lo de saída aqui
‫e tudo o que
‫temos a fazer
‫é tempOverview com apenas uma string que contém o HTML de visão geral, certo? substitua e substitua por
‫cardsHtml.
‫Tudo bem?
‫É isso.
‫Agora, tudo o
‫que precisamos fazer é realmente responder com a saída e não com o que tínhamos antes.
‫OK fixe.
‫Pareceu um pouco complexo,
‫mas se você pensar bem, espero que
‫faça todo o sentido para você.
‫Então, vamos testar isso agora e espero
‫não ter cometido erros
‫e algo deu errado, certo.
‫Então o que é isso?
‫Ok, acabei de digitar substituir.
‫Esse é um dos erros mais comuns que recebo o tempo todo.
‫Como um pequeno erro de grafia.
‫Recarregue e bam, vamos lá.
‫Portanto, aqui estão nossas cinco linhas.
‫Tão linda, linda, linda.
‫Agora não parece muito com
‫o original porque o que está faltando é assim, esse orgânico aqui.
‫OK?
‫Então, vamos ver o que há de errado aí.
‫Também por algum motivo, não vejo
‫a quantidade aqui, mas apenas se não for orgânico.
‫Bem, isso é estranho, então vamos tentar investigar o que está
‫acontecendo aqui.
‫Portanto, o erro provavelmente está em algum lugar
‫aqui nesta função replaceTemplate.
‫Mas, na verdade, tudo parece correto aqui.
‫Então também aqui neste substituto não orgânico.
‫Então, vamos dar uma olhada em nosso cartão de modelo
‫e, então, vejo aqui que quando
‫há
‫esse NOT_ORGANIC, bem, na verdade, essa caixa inteira aqui,
‫então também esse H6 não estará
‫mais visível.
‫Portanto, algo parece
‫errado aqui, vamos dar uma olhada no original
‫apenas para inspecionar o HTML aqui.
‫O detalhe do cartão
‫é este e nós, sim, temos três detalhes
‫do cartão aqui
‫enquanto no modelo, temos apenas um, certo?
‫Então, vamos copiar este.
‫Assim, nos detalhes, você pode realmente copiar um elemento
‫e ele irá, bem assim, copiar o
‫elemento inteiro.
‫Então é assim que deveria ser.
‫E aqui deve dizer orgânico e não quantidade
‫por caixa, ok?
‫Esse é provavelmente o próximo.
‫Então, vamos consertar
‫isso rapidamente.
‫E aqui,
‫é claro que não queremos isso, e
‫sim, parece melhor, feche-o, reinicie o
‫servidor e vamos verificar novamente.
‫E agora, bam, aqui vamos nós.
‫Agora está funcionando e, de fato, funciona exatamente da mesma maneira.
‫Lindo.
‫Então, isso é muito bom.
‫Vamos deletar, por exemplo,
‫os abacates só para ver o que acontece.
‫Vou apenas fazer
‫o controle, X para cortá-lo, recarregá-lo aqui, e não está
‫mudando e é claro porque lembre-se de
‫que isso, esses dados só
‫são
‫lidos no início
‫quando iniciamos o aplicativo, ok?
‫Portanto, para que isso tenha efeito, precisamos efetivamente
‫reiniciar o aplicativo.
‫Ok, então não é grande coisa.
‫E agora acabou, ok?
‫Porque não está mais no
‫arquivo JSON que é lido no
‫momento em que iniciamos
‫o aplicativo, certo?
‫Vamos colocar
‫de volta aqui, salvar, reiniciar, abrir esse cara, recarregar, e aqui está de volta.
‫Portanto, agora ele está realmente funcionando de forma dinâmica, lendo
‫todos esses dados diretamente do arquivo JSON.
‫Então este aqui funciona, vamos verificar os links também
‫lá embaixo no canto esquerdo inferior.
‫Você vê que o ID muda de zero,
‫um para e assim por diante, mas se
‫eu clicar aqui, bem, quando tivermos
‫Página não encontrada.
‫E isso porque nossa rota ainda não está pronta para isso.
‫OK?
‫E então
‫vamos realmente fazer isso no próximo vídeo e implementar a página de
‫detalhes do produto para cada um desses produtos.
‫Então, não espere e vamos seguir em frente agora.