Como Criar Aplicativos Com Programação - Aula 07

Pra gente começar a parte lógica aqui do nosso projeto a gente vai precisar primeiro ter uma fonte de dados que vai alimentar aqui onde vai aparecer os nossos itens né Isso você poderia ter lá um backend com um banco de dados né onde vão vir essas informações mas para simular isso de uma forma mais simples e mais rápida eu já deixei aí para vocês e o link e um arquivo né no no link que tem aí na descrição que é a do Google Drive que é de um arquivo Jon aqui ó que eu chamei de

backend Jon onde a gente vai ter ali alguns itens já no formato Jon né com as informações deles para que a gente possa estar utilizando então você pode entrar nesse link e baixar esse arquivo vou baixar aqui também para esse nosso projeto clicando aqui em fazer download você pode salvar lá dentro da pasta do projeto eu vou salvar aqui dentro da pasta JS tá então pode entrar aqui dentro da pasta JS e salvar Aí backend Jon Salva esse arquivo E aí esse arquivo o que que ele vai ter pessoal dentro dele né só para vocês

darem uma olhadinha ó ele vai ser um arquivo onde a gente vai ter um Array com um com objetos que são cada um desses itens com as informações que a gente vai precisar dele então a gente tem um ID a imagem o nome a característica principal dele um os os votos né o rating os likes os reviews que são as coisas que aparecem aqui ó Nessas informações aqui na parte ã de dentro aqui dos detalhes certo a gente tem aqui a descrição a parte de detalhes é essa parte que vai formar essa tabelinha aqui embaixo

ó tá vendo Então a gente vai ter aqui essas informações que são cada linha dessas é como se fosse uma linha dessas aqui né de característica e detalhe E aí a gente tem vários itens aqui a gente tem um dois que são na verdade esses quatro itens que a gente já tinha feito na mão Mas agora a gente vai fazer isso como que puxando do backend dessa forma nessa simulação se a gente tivesse um banco de dados você ia acrescentando novos itens lá né Ia fazendo cadastro de novos itens como sendo cada um desses objetos

cada objeto novo que você coloca aqui com as informações automaticamente ele vai ser puxado para cá e ser mostrado na nossa tela inicial certo então isso aqui pra gente simular um backend OK aí pessoal O que que a gente vai Fazer a gente criou aqui os czin dos itens né a gente vai ter lá embaixo Aqui na nossa index então o aqui o item Card né a gente tem uma div produtos que é a principal onde vão ficar contid as coisas e cada item desses é um item Card certo o que que nós vamos fazer

a gente vai fazer o uso de Um item Card desse mas a gente primeiro tem que fazer ele no formato skeleton O que é o formato skeleton bem se a gente entrar lá no Framework 7 e Vir aqui na documentação você vai ter um dos componentes aqui na lateral que se chama skeleton vamos achar aqui ó skeleton esse daqui o skeleton ele faz Justamente esse efeito de carregando se a gente olhar lá nos exemplos ó a gente vai ter os exemplos aqui ó por exemplo Wave ó carregando e aí depois ele aparece o item certo

então ele faz esse efeitinho aqui né de mostrar que tem alguma coisa que vai carregar tem o efeito Wave que é o que Eu mais gosto que é esse aqui de onda mas tem outros efeitos tem o Fade que fica piscando assim né também é legal e tem o Pulse que ele fica como que dando umas pulsadinha no no exemplo aqui nas áreas onde a gente vai ter Ah o item que é o skeleton a gente usa uma classe chamada skeleton Block que é um bloco de desse cinza e você coloca qual que você quer

que seja o tamanho dele pode ser diretamente no CSS incorporado no Componente dando Qual é a largura e a altura certo então é basicamente assim que funciona a gente Como que desenha o que vai ficar ali de de item que vai ficar no formato de skeleton né E para fazer o efeito né de por exemplo Wave Pulse ou Fade aí a gente tem aqui uma classe especial que é essa aqui ó skeleton traço effect traço E aí o nome do effect que você quer né no caso tem Fade Wave Pulse você pode escolher o tipo

que você Vai querer né então Olha só como é que funciona isso uma vez você entendeu isso aí a gente vai fazer o seguinte a gente pode pegar aqui Um item Card desse vou até recolher para pegar um item Card que seria do item já carregado vou colar aqui copiei e colei certo só que aqui eu vou colocar ó item skeleton E aí no lugar das coisas que a gente tem aqui a gente vai fazer o desenho entre aspas desse skeleton por exemplo primeiro primeira parte aqui é a Imagem onde a gente tem aqui o

image container né a gente pode deletar essa imagem aqui e a gente pode usar aqui ó o IMG skeleton IMG skeleton IMG skeleton vai ser o quê vamos lá no nosso index.css a gente vai pegar basicamente o nosso IMG que a gente tinha ali e vamos achar ele aqui MG MG fluid Filter item Card IMG container né a gente vai pegar basicamente o que a gente tinha aqui no Nosso IMG container a mesma coisa só que a gente vai chamar de IMG skeleton e aqui no lugar de 180 pixels a gente vai colocar eh não

na verdade é isso mesmo é só fazer assim sem a imagem né IMG skeleton daí vai ficar assim só dessa forma aqui para ele ficar com efeitinho nesse nosso IMG skeleton né a gente vai fazer o seguinte até nem precisava então né se a gente já tem aqui dessa forma e é igual o de cima nem precisava disso daqui olha Lá vamos fazer o seguinte vamos deixar aqui ó como IMG container como a gente tinha antes ó vai dar no mesmo já deu e aqui a gente só vai colocar aqui então skeleton skeleton Traço effect

traço Wave que é o efeito de onda que a gente vai querer ó lá que massinha ó já tá fazendo o efeito de onda legal já fica do tamanho certinho e seria o tamanho para aparecer um item ali dentro show de bola não Precisa daí da imagem aqui dentro vai ficar só a div mesmo certo aí a gente vai precisar fazer agora o sistema de skeleton aqui para o nome do item né então a gente coloca aqui skeleton dessa forma aqui skelet um Block né E aí já vai ficar aquela áre Zinha né a gente

pode deletar aqui o que tá escrito deletamos e a gente pode determinar o tamanho disso ajustar passando aqui um estilo direto aqui Mesmo de largura então a gente pode ver aqui ó vamos colocar 50 pixels de largura ó um pouquinho mais né Vamos botar uns 70 pixels de largura aqui ó 90 Beleza então fica assim dessa forma a gente pode até colocar aqui o aqui tá com color Grey né a gente podia deixar ele na verdade um um gelo né Deixa eu ver se a gente tem aqui só alguma cor que é de gelo que

a gente tenha feito um color aqui a gente tem background ah var gelo Place holder a gente não fez né eu Vou fazer aqui um uma classe aqui embaixo lá emb Baixão mesmo chamada gelo eu vou colocar aqui ó color e vou colocar como sendo var gelo na verdade tem que ser background né background background gelo beleza daí a gente usa essa classe aqui gelo só para ele ficar certinho deixa eu ver não deu certo será que é o Color mesmo color Background background gelo deixa aqui isso vai ser important aí ó aí vai ficar

mais bonitinho ó mais clarinho dessa forma lá legal então é background mesmo aí aqui a gente só vai colocar então também o skeleton Wave né o mesmo aqui ó vamos copiar para evitar fadiga colocar essa classe para fazer o efeito né Ó lá para ele acompanhar o efeito show de bola Vamos pro próximo item aqui a gente vai precisar de dois Skeleton né Tá vendo o da estrelinha e o do porque são duas coisas que vão ter aqui então para ficar um efeito legal é como se a gente colocasse em cima de cada coisa então

nesse primeiro a gente pode colocar aqui ó em vez de ter o ícone assim dessa forma a gente pode colocar ise aqui transformar isso aqui num spam Vamos colocar a classe aqui igual a gente tem aqui ó copiar essa classe menos o Color Grey que a gente não vai Precisar Ó daí a já vai ter umzinho ali né a só vai diminuir o tamanho disso daqui vamos colocar o edit dele bem bem pequenininho aqui ó Edit Vamos colocar de 10 pixs certo e aqui a gente vai colocar mais umzinho no lugar onde seria o número

ó e a gente coloca ISO aqui como sendo 30 PI é só que pulou linha ali a parte de Baixo que esse aqui tá muito longo deixa eu ver 30 pixels 90 é que tá tudo dentro de nome rating aqui né acho que a gente tem que colocar isso tudo dentro de uma div deixa eu ver se vai dar certo a gente involucrar aqui dentro de uma div e aqui tem sobrando spam ó deixa eu ver [Música] spam a gente que bagunça que virar isso Aqui né deixa eu apagar esse aqui deixa eu ver lá

o que que a gente tá fazendo aqui pera aí vamos voltar vamos voltar isso aqui eu não sei o que que é esse span aqui ó Margin right tá tudo dentro de um spam deixa eu apagar esse aqui e apagar esse aqui deixa eu ver aí beleza tava uma bagunça Dan nada né Aí ó ficou lá no cantinho Beleza agora dá pra gente ajeitar ajustar esse aqui um Pouquinho melhor Ah dá para fazer esse aqui um pouquinho maior 20 esse aqui 30 ó dessa forma aqui agora o que que a gente vai fazer a gente

só ajusta para jogar esse daqui lá pro canto a gente pode usar aquela técnica aqui ó direto no primeiro item aqui que é esse aqui né do nome a gente pode usar aquele margem right alto margem à direita alto aqui acabei apagando o edit que tinha antes ó aí vai jogar o item para lá pro cantinho tá vendo e aqui só pra gente Dar um espaçamento entre um e o outro a gente pode colocar nesse segundo assim ó Margin left Vamos colocar três pixels só para afastar um pouquinho cinco C pixels left não é right

né a direita aí ó Show de bola né e aqui a gente pode botar também uma margem à direita Vamos colocar de uns 10 pixels só para ele entrar um pouquinho para dentro aí ó que joinha um pouquinho mais 15 pixels tá lá então já fica bonitinho né Tá vendo que é como se a gente tivesse dizendo onde Que vai aparecer alguma coisa show de bola né e agora vamos fazer aqui a parte do preço então a parte do preço vamos pegar um span desse aqui mesmo já para evitar a fadiga e aqui na parte

do preço a gente coloca um spanz desse a gente pode fazer só ele ser um pouquinho maior 60 pixels Vamos fazer ele um pouquinho margem do Topo aqui na verdade não vai Precisar desse Margin right a gente pode fazer ele afastado um pouquinho do Topo a gente pode colocar um margem top aqui ó margem top a gente pode colocar de uns cinco Pixel só para dar uma afastados né a gente pode fazer aqui a altura dele o height Vamos colocar aqui uns 60 Pixel para ver como é que fica Opa ficou muito muito grande 30

pixels e 20 beleza aí ó ficou joinha né pessoal Ficou bem legal então a gente tem um skeleton aqui que é esse sistema e que é como se fosse um carregando certo Então como que vai funcionar isso daqui a gente vai deixar quatro skeletons aqui os itens skeleton são o padrão que ele vai começar o aplicativo ele sempre começa com o skeleton E aí a gente vai fazer a montagem desses esses itens aqui que são os oficiais lá pelo nosso pela nossa lógica certo Então olha só que que eu vou fazer vou pegar um Item

Card desses aqui que é um oficial vou copiar vou até recortar cont contrl x vou abrir aqui um bloquinho de notas deixar ele aqui por enquanto tá pra gente ter o padrão aqui o modelo padrão aqui no bloco de notas e a gente pode apagar esses outros itens que a gente tem aqui que a gente fez para ver como é que ia ficar certo só ver certinho Onde que vai ser o fechamento dele né aqui ó acabar pagando div que não precisa né E vamos Apagar todos esses itens Card Certo então apagamos agora a gente

vai fazer o qu a gente vai copiar esse skeleton vamos deixar quatro skeleton aqui ó Então vamos fazer assim ó 1 2 3 a gente já tinha ó lá ó e ficou quatro skeletons tá vendo legal então aqui ele vai tá carregando ele tá mostrando para nós que tá carregando agora nós vamos então lá pra nossa lógica a gente puxar esses dados aqui que estão vindo do backend para alimentar esse essa área aqui e aí mostrar os itens certo então a Gente vai lá na nossa index JS né que a gente já até referenciou aqui

só para lembrar ó a gente fez um get script e a gente referenciou index p JS e aqui nós vamos fazer o seguinte nós vamos colocar Ah um fet né o fet é tipo uma requisição no protocolo http para alguma para uma URL para algum arquivo é como se a gente fizesse uma requisição pro backend né então a gente vai usar o método fat aqui dentro do Fat a gente pode indicar onde que a gente quer fazer Essa requisição no nosso caso a gente vai apontar paraa pasta JS o nosso arquivo backend ponto json Então

a gente vai estar fazendo a requisição para esse arquivo aqui onde a gente tem os nossos dados certo então depois que a gente fez o nosso fet a gente vai ter o dem o que que acontece se der certo então a gente vai colocar aqui que é resposta né response a gente faz aqui assim um sinal de igual maior tipo uma seta e a gente Vai pegar o response.on Jon dizer que esse é o formato do nosso arquivo aí a gente vai ter o PR pegar a informação que vai vir e a gente vai ter

o catch que é o que acontece se der errado né então aqui no nosso Cat a gente pode colocar o seguinte error E aí a gente coloca pede para ele mostrar para nós um console err e aqui dentro a gente vai falar erro ao fazer f dos dados E aí pede para ele dois Pontos espaço e pede para ele mostrar qual que for foi esse erro né E aí fechou o brick deu certo é isso aí então esse aqui se der errado então aqui dentro do dema aqui é o que vai acontecer se der certo

agora né então o que fazer se der certo então se der certo nós vamos fazer o seguinte pegar os dados então data vai ser os nossos dados e aqui a gente vai abrir aqui o que vai acontecer e primeira coisa que a gente vai fazer é Salvar os dados vindos do backend localmente vamos utilizar um local Storage o local Storage ele é um armazenamento local ele é um sistema de chave e dados Onde você coloca um nome para pros dados tipo uma chave produtos por exemplo E dentro dele você pode salvar conteúdo de texto Então

a gente pega e converte todos os dados que a gente recebeu no nosso backend em texto formato E de notação né tipo Jon mesmo e guarda lá dentro aí depois converte ele para objeto ou para texto e assim por diante usando o Jon string F json parce a gente consegue trabalhar com esses dados certo então como funciona esse local Storage você faz assim ó local Storage o s MA tá então você escreve local aí com S maiúsculo Storage a gente vai usar o método set item com i maiúsculo que a gente quer salvar um um

dado um item E aí o primeiro parâmetro é o nome de Chave que você vai colocar então aqui eu vou chamar de produtos tá e o segundo parâmetro é os dados que você vai salvar no caso a gente vai salvar os nossos dados que estão vindo aqui no data tá que vai ser esse nome aqui só que isso aqui ele não vai salvar porque isso aqui tá vindo no formato e de ali um Array com objetos e tal então a gente tem que transformar isso em texto a gente tem que fazer um string file Então

a gente vai fazer um Json p string F E aí a gente pede para converter esses dados nesse formato que é um formato que é aceito no local Storage certo então dessa forma a gente vai estar salvando os produtos Se eu der um console P log aqui eu posso dizer aqui né dados só pra gente ter uma Retorno dos produtos salvos no local Storage certo só pra gente ter um retorno então só para você ver o que que tá acontecendo nisso daqui se a gente abrir aqui o Nosso app D uma Tecar um f12 aqui

pra gente já hav ver as funções de desenvolvedor né onde vocês Talvez esteja lá embaixo assim ó você pode clicar aqui no canto e colocar no E na na lateral né o docker ó tem aqui o docker aqui no cantinho você pode escolher encaixar na lateral né E aqui olha só o que que vai acontecer já no console ele já marcou para nós ó dados dos produtos salvos no local Storage certo se você vi aqui nessa setinha no Cantinho você vai ter uma aba chamada aplicativo nessa aba aplicativo você vai ter um item chamado local

Storage tá vendo aqui e aqui dentro do local Storage você vai ter uns dados eu vou até limpar o meu aqui porque eu já tinha dos Testes que eu tava fazendo antes limpei aqui em cima nesse botão limpar tudo eu vou recarregar nosso só para vocês verem ó já deu lá dados salvos no local Storage se eu for lá no nosso local Storage e entrar aqui você vai ver Que vai ter aqui ó produtos que foi a chave que a gente criou e dentro de produtos ó dentro do valor de produtos a gente vai ter

todos aqueles dados estão vind do nosso backend olha só que interessante aqui fica até organizadinho pra gente ver cada it ó pelos ids os valores ó toda aquelas coisas que a gente tem dentro do nosso arquivo Jon aqui ó que a gente tem né o nosso backend todos esses dados estão salvos agora no nosso aparelho então quando a Gente precisar a gente não precisa mais fazer uma requisição lá no servidor né no arquivo que no caso aqui tá representando o servidor no nosso teste a gente já vai ter todos esses dados no nosso aparelho salvo

então conforme a gente precisar manipular esses dados a gente já tem ele ali eh quer dizer a gente teve o trabalho de fazer uma vez a requisição uma vez a gente fazendo essa requisição a gente já vai ter os dados ali com a gente e a gente pode usar como A gente quiser legal bem interessante né pessoal o local Storage né vamos voltar aqui pro pro normal né Beleza agora o que que a gente vai fazer pessoal então aqui a gente botou os itens no local Storage agora a gente precisa alimentar aqui a nossa área

dos produtos com esses produtos que vieram lá do nosso backend né que estão no nosso local Storage Então como a gente já pegou esses dados vindos aqui a gente não precisa recuperar isso do local Storage a gente já tem aqui o data né que seria os dados vindos do backend Então a gente vai fazer o seguinte primeira coisa de todos essa área onde a gente tem o nosso skeleton que é aqui a a área onde vai aparecer os itens né a gente chamou ela de produtos tá vendo aqui ó produtos Então a gente vai fazer

o seguinte produtos usando aqui aqui a formato de seleção do J Carry né o próprio Framework 7 ele já vem com tipo Um J Carry embutido tá pessoal dentro dele então a gente pode usar os recursos de J Carry naturalmente já junto com o Framework Mas de qualquer forma aqui ó nesse template Starter dentro de Lib você vai ver que já vai ter um J carezinho colocado aqui também que a gente pode usar isso aqui eu gosto de usar porque é mais rápido do que você fazer na mão no JavaScript puro né Mas você também

poderia usar o JavaScript puro para fazer isso então eu vou usar o Método aqui do JC que se chama empty assim ó então esse método empt é para esvaziar esvaziar a área de produtos Então olha só o que que vai acontecer Ó você vai ver que quando eu salvar aqui vai sumir esses itens Por que que ele sumiram porque ele foi lá requisitou no meu backend os dados E aí esvaziou a área de produtos quando deu o retorno de que deu tudo certo certo agora a gente vai fazer o seguinte a gente vai percorrer esses

nossos dados Então data a gente vai usar o método aqui for it que é para percorrer ele né que é um Array for it e aqui dentro desse for it a gente vai usar aqui o nome produto para determinar cada um dos itens certo então vamos fazer aqui Aron function e aqui a gente vai fazer a alimentação ação ele vai percorrer cada um dos itens que a gente tem lá dentro né como se ele fizesse o seguinte esse forit ele vai percorrer ó ele é um Array ele vai percorrer vai Pegar primeiro o primeiro objeto

depois o segundo objeto e assim por diante Então a gente vai fazer o seguinte a gente vai fazer aqui uma podemos fazer uma variável chamada produto HTML e vai ser igual aí você faz duas crases aqui pra gente fazer um template string né que é uma um uma formatação do JavaScript que permite você quebrar linhas botar variáveis de um jeito mais fácil sem ter que ficar fazendo concatenação né então você Coloca duas crases né o tipo shift e o a tecla de assento ali aí vai fazer duas crases e aqui dentro olha só o que

que a gente vai fazer a gente vai colocar aqui dentro dessas crases o nosso HTML aqui que a gente vai pedir para injetar ó Então a gente vai colocar aqui ó o HTML que a gente deixou lá no nosso bloco de notas certo que tá aqui se eu já der um salvar aqui olha só o que que vai acontecer pessoal ó carregou aqui e a gente precisa alimentar né a Gente fez só a variável esqueci de alimentar Então a gente tem aqui a variável produto HTML que ele tá fazendo aqui né E aí depois fora

desse nosso e dessa nossa anotação a gente pode colocar um ponto e aqui aqui embaixo a gente vai pegar a nosso Nossa área de produtos produtos e a gente vai usar o método append que é para adicionar e a gente vai adicionar esse produto HTML aqui se eu salvar olha só que maneiro Ele já está quatro colocando quatro produtos aqui dentro mas são quatro produtos repetidos por quê Porque a gente só colocou o HTML desse produto aqui né e a gente precisa agora substituir os lugares onde a gente tem a imagem os texos e tal

pelos valores que estão vindo lá dos Campos aqui do nosso backend que a gente requisitou então por exemplo aqui onde a gente tem a nossa imagem ó a gente vai tirar esse daqui Faz o sinal de cifrão abre Chaves assim que é um método de colocar uma variável aqui usando template string quando a gente usa as crases aqui né E aqui dentro você vai colocar ó produto ponto que é o produto então o nome de cada item E aí o nome do campo que a gente tem lá o nome do campo ó é imagem certo

então vamos colocar aqui ó produto imagem agora olha só que legal ele já tá mostrando dinamicamente as imagens de cada produto show de bola Né aqui onde a gente tem o link de cada produto a gente pode colocar aqui um data id pra gente pegar o ID de cada produto porque que que a gente vai fazer aqui pessoal produto pid quando clicar no item a gente não vai querer que ele Mande já direto para a página de detalhes tá então a gente aqui não vai apontar paraa página de detalhes o que a gente vai querer

que aconteça é quando a gente clicar no item A gente pegue por esse data ID Qual é o ID do produto e aí como a gente tem esse esses esses produtos salvos no nosso local Storage a gente vai pedir para ele Olhar lá dentro do local Storage Qual é o produto que tem aquele ID E aí ele vai fazer a montagem dos itens na tela com os dados que a gente tem salvo localmente dessa forma Quando você clicar vai ser instantânea a abertura dele porque ele tá fazendo uma busca local e isso é extremamente rápido

no Celular tá pessoal Ah não não tem como ele precisar fazer uma requisição é milisegundos ele já vai fazer a montagem Então vai ser instantâneo os dados senão a gente teria que fazer uma requisição novamente no backend para poder mostrar os detalhes né então vamos lá imagem aqui a gente vai ter o o nome do item Então a gente vai pegar é produto nome né o aqui produto nome aí a gente vai ter aqui a estrelinha aqui vai ser o rating produto Rating e vamos ter produto aqui vai ser o o preço né Deixa eu

ver aqui Desc lá embaixo tem preço promocional e preço preço promocional preço verdadeiro então preço promocional né produto aqui a gente vai colocar o preço promocional só que assim pessoal uma coisa bem interessante vocês estão vendo que aqui ele tá vindo o valor assim Dessa forma porque esse é o padrão de valores monetários que a gente Salv em banco né é um ponto flutuante um tipo flo certo então ó 229.99 certo mas a gente não usa esse tipo de de dado para o formato Brasileiro né o nosso formato é diferente a gente usa ponto para

casa de milhar e vírgula para os centavos né então tem um recurso aqui do próprio JavaScript para fazer essa conversão aqui para nós eh tem um metodo Zinho do JavaScript que faz isso então você vai fazer da seguinte forma depois aqui então do produto preço promocional você vai usar esse método que é ponto local assim com l maiúsculo loc locale string vai abrir aqui o método aqui você vai colocar o primeiro parâmetro PTBR que você quer português do Brasil vai colocar uma vírgula vai abrir aqui um objeto e aqui dentro você vai passar que o

estilo você vai querer que seja moeda o Currency depois você vai colocar mais uma vírgula daí você vai colocar aqui a moeda a currency vai ser o BRL BRL o BRL seria real né pessoal que é tipo como se a gente tivesse determinando que vai ser real e aí beleza aí tá fechado aqui o nosso Nossa conversão então só para vocês ver deixa eu fechar isso aqui para ficar mais fácil de enxergar né então a Tale string com l maiúsculo S maiúsculo aí faz o método aí você passa o primeiro parâmetro PTBR vírgula abre Um

objeto e aqui você especifica que é do tipo moeda e a moeda é real aí fazendo isso olha só o que que vai acontecer se eu salvar beleza ele já vai aparecer aqui para nós os valores formatados certinho e ele inclusive já coloca o cifrão Zinho de dinheiro ali ó o RS então a gente pode tirar esse RS que a gente tinha antes aqui ó porque aí ele ele já faz a conversão e já mostra o valor já convertido olha só que maneiro já dessa forma aqui legal olha que show De bola pessoal então já

está funcionando aqui para nós o carregamento dos dados aqui vindos do nosso backend é tão rápido porque a gente tá pegando aqui os itens vindos do backend Jon local né que ele não dá nem tempo pro nosso carregamento do skeleton Ó se a gente botar aqui para carregar ó ele só dá uma piscada e já aparece os itens aqui né pra gente ver isso aqui funcionando como se fosse um carregamento de skeleton a gente pode Usar aqui um set time out tá que é um um temporizador né Para alguma coisa acontecer então a gente pode

fazer aqui ó set time out alguma coisa que é para acontecer dentro de um determinado tempo a gente pode colocar aqui 1 segundo ou 1 segundo e meio que seria 15.00 né 1500 msos e todo esse nosso forit que a gente tem aqui ó a gente a gente pode colocar ali dentro desse temporizador vou recortar ele aqui e colocar aqui dentro do temporizador só para simular o Carregamento simular carregamento online porque quando a gente tá na internet mesmo pegando dados de um backend que tá vindo online ele tem um delayzinho né pessoal 1 2 3

segundos para carregar as coisas depende da velocidade de Internet uma série de fatores então aqui a gente tá fazendo essa simulação de carregamento só pra gente ver o skeleton Então vamos salvar aqui ó Ah no caso aqui a gente vai ter que esvaziar esse aqui só Depois só depois que aqui dentro do do timer também né pessoal ó lá senão ele já vai esvaziar antes show de bola Então olha como é que ficou Ele tem ele carregando e aí mostra os itens aí você pode trocar aqui ó pela velocidade que você quer fazer de teste

1 segundo e meio ficou meio rapidinho né Você pode colocar um segundo para parcer mais rápido ainda ó já carregou você pode colocar 3 segundos só para você ver mais tempo o skeleton aqui aparecendo depois Carregar os itens legal isso daqui é pra gente controlar uma simulação de carregamento para você ver como é que fica né eu vou deixar um segundo aqui para ser rapidinho mesmo já deu para ver ali o skeleton E aí já aparece os itens aqui para nós show agora o que que a gente vai querer fazer a gente precisa jogar pra

página de detalhes né E lá na página dos detalhes montar com os valores que a gente tem salvo também de forma dinâmica para isso então quando Clicar num desses itens a gente vai precisar recuperar aqui qual que é o data ID desse item certo para poder jogar a pessoa lá pra página de detalhes e lá na página de detalhes a gente poder carregar esses valores de acordo com que a gente tem no nosso local Storage então a gente pode fazer isso da seguinte forma logo aqui abaixo da onde fechou o nosso forat aqui aqui ó

ainda dentro do nosso set time out aqui a gente vai fazer aqui um um disparo de Evento de quando clicar num desses itens né esse item se chama item Card tá vendo mas a gente tem aqui Um o no no link que é o que a gente vai clicar realmente a classe item Então a gente vai fazer o seguinte quando clicar no item Então pegando por classe seletor aqui a gente tá usando item nós vamos fazer o evento on Click então quando clicou vamos fazer aqui a function o que que é para acontecer clicou num

dos itens primeira coisa que a gente vai fazer a gente vai Criar uma variável chamada id e a gente vai pegar o valor do campo data ID desse item que foi clicado então a gente clicou Vamos pegar esse valor que tem aqui ó Então você vai vai pegar this vai usar aqui o o o dis o dis quer dizer Este este item que foi clicado nós vamos pegar o atributo TTR da data ID então aqui a gente está dizendo eu quero colocar na variável ID o valor do atributo data ID desse item que foi clicado

certo e aí nós vamos criar uma Nova chave no local Storage que a gente vai chamar de vamos fazer set item aqui local Storage set item a gente vai chamar de detalhe o item que a gente vai querer né que seja o item que esteja no detalhe e a gente vai pegar qual que é esse ID Então dentro desse local storage essa chave a gente só vai salvar Qual que é o item de detalhe que a gente quer só para ter essa informação o ID dele então por exemplo aqui o rpod é um né então

clicou El a gente pegou que o ID dele é um clicou aqui ele vai pegar que o ID é dois clicou aqui vai pegar que o ID é trê quro entendeu E aí que que a gente vai fazer depois disso a gente vai mandar a pessoa pra rota do pra rota de detalhes Então vamos fazer assim app. viws pm. router p navegate E aí vamos mandar lá pra nossa rota de detalhes certo então o que que vai acontecer ó e vamos maximizar isso aqui colocar f12 pra gente ver o que que vai Acontecer aqui aqui

a gente tem o nosso local Storage certo carregou aqui os itens vou clicar aqui no primeiro ó ele jogou a gente pra nossa página de detalhes e aqui no local Storage repara que ele fez aqui uma chave chamada detalhe com o valor um que é o valor do id dele lá ó se eu pegar um outro aqui ó cliquei Ó dois voltei cliquei três e assim por diante Até ficou assim meio bugadão aqui Ó olha só que interessante por causa dos nomes aqui compridos ó em um pouquinho maior assim não dá nada ó mas num

pouquinho menor assim ó ele já quebra né então a gente depois pode tentar dar uma ajeitada nisso daqui aqui também para ficar certinho o tamanho do do que pode Tá escrito dos itens aqui né ou então a gente pode até fazer uso de uma Mia Carry né para fazer isso aqui acontecer ó ficar Um item por vez só que numas telas um pouquinho já de tamanho Diferenciado aqui né Depois a gente ajeita isso aqui essa parte estética aqui né mas entendeu o ponto né a gente vai ter detalhe aqui E aí quando clicar a gente

vai puxar esses dados aqui dentro de detalhe Então olha só o que que a gente vai fazer agora vamos voltar aqui só para você entender o que tá acontecendo e agora a gente vai lá no nosso detalhes então Ó então a gente vai ter aqui o que criar aqui um arquivo Chamado detalhes né então vamos criar aqui um novo arquivo detalhes PJS que é onde a gente vai fazer a lógica da nossa página detalhes e lá nas nos nas nossas rotas a gente vai fazer um get script aqui quando entrar na rota detalhes então achar

aqui a nossa rota detalhes assim que a página iniciou H page init a gente vai querer que pegue esse detalhes aqui que é pra gente poder rodar o que a gente precisa de lógica da nossa página detalhes aqui então lá dentro de Detalhes a gente vai precisar agora recuperar os dados a gente vai ter que recuperar al Qual que é o ID do detalhe e alimentar a nossa p de detalhes com essas informações né então primeira coisa vamos recuperar o ID detalhe do local Storage certo então a gente vai pegar esse ID Então a gente

vai fazer uma variável chamada id e a gente vai pegar essa informação que tá no nosso local Storage Então a gente vai fazer local Storage agora a gente vai usar um método chamado get item get quer dizer pegar então eu quero pegar os dados do local Storage Qual a gente vai querer pegar do da chave detalhe que a gente fez lá na nossa index deixa eu ver se a gente chamou de detalhe ou detalhes é detalhe ó o nome da nossa chave aqui no local Storage é detalhe Então a gente vai querer pegar aqui o

valor que tá lá no nosso local Storage chamado detalhe só que aqui um detalhezinho né o detalhe do Detalhe é que a gente vai tá trabalhando com id pra gente poder trabalhar com ID a gente fazer uma comparação entre o ID que a gente tem em detalhe com o ID que a gente vai ter dentro dos nossos produtos lá do nosso local stor disso que vai precisar ser um número inteiro não uma string então a gente precisa fazer uma conversão a gente tem que fazer um parci in aqui ó para converter isso aqui de uma

string para um número inteiro Certo então recuperamos o ID detalhe do local Storage Agora vamos pegar os produtos pegar os produtos do local Storage e a gente vai fazer aqui uma variável chamada produtos vai ser ser o seguinte a gente vai pegar o local Storage pon get item a gente vai pegar o quê produtos só que pra gente poder trabalhar com isso aqui a gente também vai ter que transformar eles aqui usando o Jon parce né porque eles vê como um Texto Então a gente tem que converter isso aqui para um objeto né para ali

um Array que a gente vai poder trabalhar então a gente tem aqui a nossa variável produtos com todos os produtos vindos do nosso local Storage que são os produtos que estão armazenados localmente agora a gente vai fazer um método aqui ó para fazer uma comparação então a gente pode fazer assim ó var item vai ser igual e a gente vai fazer assim ó produtos a gente Usa o método find que é para buscar então a gente vai buscar um produto olha só o que que a gente vai fazer cujo produto ID seja igual três iguais

ao ID que a gente que a gente quer legal esse método find ele ele ele retorna para nós true ou false né dependendo do que a gente passa de parâmetro então eu tô que que eu tô falando aqui que eu quero salvar dentro da variável item o que ele for me retornar aqui de do find né produtos Método find é onde ele tá percorrendo todos os produtos lá que estão dentro do nossos produtos e tá verificando se o ID bate com o ID que a gente pegou lá em cima vindo do local storage detal legal

bem interessante né Se der certo se se bater essa informação ele vai dar true senão ele vai dar false tá então o que que a gente vai fazer aqui a gente vai fazer assim ó se item né que é aqui o que vai retornar verdadeiro ou falso desse find quer dizer se for Verdadeiro a gente vai fazer assim ó console. log produto encontrado dois pontos e aqui eu vou pedir para el mostrar para nós qual que é o item certo produto encontrado vou colocar vírgula item o valor do item que tá vindo de lá senão

ele vai dar um console pon log e produto não encontrar só pra gente ver se isso vai funcionar então aqui eu falei que retorna true tá pessoal mas é assim se Ele retornar se ele encontrar o item ele retorna o valor do próprio item completo com todos os dados senão ele vai retornar falso que ele não achou certo então salvei aqui vamos dar uma olhadinha lá no nosso console aqui ó Então vamos entrar num desses itens por exemplo vamos entrar no airpod aqui vamos pra página de detalhes E aí olha só que legal ele já

mostrou aqui para nós ó produto encontrado e já retornou para nós os Dados desse produto se a gente pegar outro agora aqui ó vamos pegar o iPhone ó já deu ó produto prod encontrado e os dados estão aqui legal então dentro de item a gente vai ter os dados desse item que a gente precisa e é justamente esses dados que a gente vai usar para alimentar os campos aqui certo então vamos alimentar Aqui para baixo a gente pode fazer assim ó alimentar os campos né Vamos alimentar o que tá vindo lá do nosso banco na

Verdade a gente pode fazer essa alimentação aqui dentro do IF do se tem o item né produto encontrado ó vou colocar aqui ó tem tem o item não tem o item Então se tem o item aqui o que que a gente vai fazer vamos alimentar alimentar com os valores do item Então a primeira coisa que a gente vai fazer é colocar agora lá no nosso a nossa página de detalhes ids aqui para dizer cada área né na verdade A gente pode até fazer o seguinte a gente pode aqui na nossa no nosso Roots lá na

nossa index mandar ele já jogar a gente direto para lá pra nossa página de detalhes para facilitar Porque a gente já tem um detalhe salvo no local Storage né então assim a gente já consegue ver qual que é o produto certinho aqui e a gente já ir vendo essa transformação aqui em tempo real então vamos alimentar os valores dos itens deixa eu abrir aqui a página Detalhes P HTML Então a primeira coisa vai ser aqui a imagem né então a gente pode colocar um ID aqui para essa imagem a gente vai chamar de imagem detalhe

Vamos colocar esse padrão vai ser alguma coisa traço detalhe imagem detalhe então a gente pode agora lá alimentar ó vamos colocar aqui o ID imagem detalhe e a gente vai como ele é uma uma imagem né a gente vai querer alterar o atributo src Então a gente vai fazer assim ó ponto src ou melhor att aqui a gente tá Usando os padrões do J Carry né att src ou seja o atributo src o valor que eu quero colocar aqui dentro vai ser o item ponto imagem vai ser o dado que eu tenho dentro do meu

item se eu der um salvar aqui olha lá que maneiro já pegou dinamicamente o valor da Imagem e a gente vai ter que fazer isso para cada um dos itens que a gente tem aqui então aqui a gente tem nome e produto Então vou colocar aqui o ID nome traço detalhe vamos lá aqui a gente vai copiar esse aqui colar aqui não vai ser htr vai ser HTML né O que a gente vai querer colocar e aqui O valor vai ser item nome e aqui vai ser nome detalhe ó Já puxou aqui para nós beleza

e aí vamos fazer isso para cada um dos itens aqui até terminar tudo né então aqui a gente vai ter a nossa estrelinha aqui ó E esse ponto aqui a gente pode colocar aqui um spam onde a gente vai ter spam onde a gente vai ter o nosso o nosso valor de rating né então aqui a gente pode colocar um ID como rating traço detalhe lá e colocar aqui rating detalhe rating detalhe item rating ó já pegou o valor vindo dinâmico aí aqui também vamos fazer a mesma coisa vamos pegar um spanz aqui colocar no

lugar desse 90% aqui ó e aqui colocar 90% né E aqui vai Ser like detalhe Então vamos lá like detalhe que vai ser e como é que vem lá no nosso backend aqui ó e likes né likes isso então aqui vai ser item likes Lembrando que esse item aqui a gente tá pegando local Storage mas como os valores são iguais do que a gente tem no arquivo Jon a gente pode consultar por ali né Beleza aí a gente vai ter o reviews o reviews aqui a gente pode Colocar então aqui no spam mesmo ID reviews

detalhe V colocar reviews reviews detalhe item reviews e aqui a gente vai ter que colocar mais reviews escrito né porque aqui ó pessoal tem escrito reviews depois então aqui vai dar o valor da quantidade de reviews e depois mais reviews aqui com espaço assim ó 15 reviews Beleza agora nós vamos ter aqui A descrição então aqui ID descrição detalhes detalhe né descrição detalhe copiar aqui descrição detalhe que vai ser descrição Então você tá vendo que ele tá pegando dinamicamente esses dados né então isso aqui é muito legal né pessoal fic muito muito joia mesmo Inclusive

a achei que essa tabela aqui no detalhes achei que essa parte aqui do bela aqui o th aqui em cima tá eu Podia colocar um pading de 10 pixels em cima e embaixo zero à esquerda à direita só para ele ficar um pouquinho mais gordinho ó fica mais simpático Né Também achei que tá muito escuro ali deixa eu dar uma diminuída aqui ó ficar mais assim ó fica mais joinha a nossa tabelinha Beleza então descrição detalhe agora a gente vai ter a parte aqui da tabela né a nossa tabela detalhes essa daqui a Gente vai

ter que fazer um laço de repetição porque os dados da tabela ó se vocês repararem lá no nosso backend vão vir desse detalhes esse detalhes é um Array e cada linha é um objeto Então a gente vai ter que percorrer esses detalhes aqui para poder colocar as linhas da nossa tabela lá para a nossa tabela ser montada bonitinha né O que monta essa tabela é cada linha dessa Então se a gente voltar lá no no detalhes aqui ó Então a gente tem aqui o TR que com th que é característica e detalhes essa parte de

cima e cada linha dessa daqui vai ser uma que vai vi do nosso backend Então a gente vai fazer o seguinte vamos fazer aqui uma variável chamada tabela detalhes e vamos pegar aqui só o seletor dela a gente vai ter que colocar lá na nossa tabela então aqui a gente pode colocar um ID a gente vai chamar de Detalhes Tab detalhes tá para ficar mais fácil então aqui a gente vai pegar por esse ID Tab detalhes então criamos essa variável e agora a gente vai fazer o seguinte a gente vai percorrer lá o detalhes tá

então a gente vai pegar item que é o nosso item Vamos pegar lá o detalhes Vamos fazer um for it aqui para ele percorrer for it e a gente vai pegar cada um desses detalhes vamos chamar de detalhe e para cada item que ele percorrer que tá dentro lá do nosso Detalhes a gente vai criar uma linha aqui então a gente pode fazer assim uma var linha vai ser igual Vamos fazer uma anotação aqui ó com duas crases um template string né anotação não um template string E aí vamos pegar aqui ó um exemplo de

linha vou recortar essa aqui ó vamos tirar essas linhas que a gente tem aqui de baixo ficou sem linhas tá vendo e a gente vai pedir para ele criar essa linha dinamicamente percorrendo os dados que Vem lá dos detalhes certo Deixa eu só indentar isso aqui um pouquinho melhor então o primeiro item aqui vai ser vindo lá do detalhe vai ser detalhe ponto característica que a gente tem lá no nosso backend ó dentro de detalhes aí vem cada um desses objetos cada objeto desse que a gente chamou de detalhe vai ter característica e detalhes certo

então aqui a gente tá pegando de detalhe Qual é a característica e aqui embaixo a gente vai pegar o Detalhe Qual é o detalhe detalhe detalhe vai ficar né Ó lá deixa eu ver detalhe detalhes detalhes dessa forma Beleza então aqui ele tá construindo as linhas fez o for it depois disso a gente vai pedir para ele alimentar aqui ó ponto e vírgula colocar cada linha dessa na medida que ela for criada dentro da nossa tabela detalhes Então a gente vai pegar aqui a nossa tabela detalhes vai usar o método append que é para adicionar

e vai Adicionar a linha e olha lá tarã dinamicamente ele vai pegar os dados que estão vindo lá e já colocando aqui dentro legal achei que também não ficou tão joia aqui essa formatação do CSS eu acho que eu vou colocar aqui um pouquinho mais ó e dá para pegar esse aqui na verdade colocar aqui ó no nosso TD e th um pad de 10 para cima e para baixo e zero nas laterais ó aí fica um pouquinho melhor afastamento Zinho né Dá Até para colocar un cinco aqui de lateral assim ó para ele dar

um pouquinho mais de afastamento aí fica mais simpática a nossa legal show de bola né pessoal aí falta só aqui o preço real e o preço promocional Então vamos voltar lá no nosso detalhes aqui e isso aqui vai tá lá em cima no nosso tobar ó então aqui a gente vai ter aqui esse aqui a gente pode colocar o id aqui ó Preço preço detal e aqui o de baixo vai ser o preço eh promo preço promo detalhe certo salvei e aí a gente vai fazer o seguinte agora a gente aqui na nossa continuação aqui

a gente pode até fazer como para seguir uma um padrão aqui né de alimentar os itens então a gente pode colocar aqui ó preço detalhe aqui vai ser o item preço ó lá que já tá com Efeito de Riscado e a gente vai ter o preço promo que vai ter o preço underline promocional que é o nome da do item lá certo só que a gente vai ter que fazer aquele sistema de formatação aqui né então a gente pode até pegar lá na nossa index para evitar a fadiga aqui o método de formatação que é

esse CHC string aqui ó copiar ele e vamos lá no detalhes e vamos colocar nos dois aqui Ó string string E aí ele já vai fazer no padrão ali ó já no valor de dinheiro brasileiro show de bola então tá alimentado dinamicamente vamos ver se vai funcionar então Lembrando que o que que acontece quando a gente tem aqui a nossa index que Ele carrega o item a gente pegou Qual que é o ID eu clico em cima do id e por esse ID ele tá buscando aqui no nosso local Storage o produto que Bata com

aquele ID usando o método find assim que ele encontrou o item ele Tá fazendo a alimentação da da página com os dados que a gente tem ali então vamos ver ó clicar no Xbox ó lá já mostrou os itens do Xbox se eu clicar aqui no Macbook já mostrou os itens do MacBook certo então tipo em tempo real mesmo ó o airpod tá vendo olha que joinha muito legal né pessoal então ficou dinâmico aqui ó o funcionamento disso daqui Cada vez que a gente entra na index Ele tá fazendo a requisição são pro backend tá

e pegando esses dados e Salvando novamente no local stor essas informações Mas você poderia se quisesse fazer algum tipo de validação do tipo assim se eu tenho dados salvos localmente salva quando foi e coloca no local hisor também quando foi que foi carregado esses dados né Pega ali a data e a hora e você pode fazer um cálculo assim só a cada 5 minutos 10 minutos você vai querer que ele e solicite novamente o end fica parecendo com o sistema do Next né o Next tem um sistema Assim onde você pode colocar quanto em quanto

em quanto tempo você quer que o backend seja requisitado certo então isso aqui é é bem legal né bem show de bola mesmo então tá feita aqui a questão do do carregamento dinâmico da nossa página aqui agora a gente vai ter querer que quando clique no botão adicionar carrinho aí a gente vai ter que salvar isso no carrinho mesmo né né então vamos para esse processo agora né do adicionar Carrinho Então a gente vai criar aqui embaixo uma função função para adicionar ao carrinho nós vamos criar uma função inha aqui que é para adicionar o

item ao carrinho a gente vai fazer uma function function adicionar ao carrinho e ele vai ter dois parâmetros o item e a quantidade tá Então a gente vai ter um método que aqui a gente vai chamar de Adicionar ao carrinho onde a gente vai passar o item e a quantidade aí nós vamos fazer da seguinte forma a gente vai criar aqui ó para ver primeira coisa a gente vai ter que ver se no carrinho já tem aquele item Então a gente vai fazer o seguinte embora a gente ainda não criou o local Storage do carrinho

que a gente também vai armazenar tudo que tem no carrinho dentro do local Storage nós vamos criar aqui em cima uma variável chamada carrinho que vai pegar Os dados vindos do do nosso carrinho então Jason parce aqui a gente vai pegar o local Storage get item [Música] carrinho que a gente não tem ainda tá ou sen não se não existir esse nosso carrinho vai ser um Array vazio então a gente coloca essas Duas Barras em pé fica shift e a tecla do lado da letra z e aqui a gente coloca assim um a os colchetes

né para dizer aqui que Isso aqui é um Array vazio então ou você vai pegar os dados que estão dentro do local Story chamado carrinho ou então um Array vazio certo e aqui dentro a gente vai fazer o seguinte a gente vai fazer uma uma variável chamada item no carrinho que é uma variável que vai verificar se a gente tem um item no carrinho ou não então a gente vai fazer um carrinho pon find que é para procurar dentro do nosso carrinho aqui se tem aquele item então a gente pode colocar Aqui o a letra

qualquer Vou colocar aqui C Vamos se ver se o c que é C de carrinho tá C item se o carrinho item ID bate com o item ID que a gente tem lá lá de cima certo que já vai vir a gente vai mandar eh qual que é o item a gente esse item que a gente recebeu aqui em cima né Depois a gente vai mandar via parâmetro No método aqui para essa função então primeiro a gente vai verificar se tem o item no carrinho tá e já vai colocar isso nessa variável por Que que

a gente tá fazendo isso pessoal porque se já tiver o item no carrinho Cada vez que a pessoa clicar em adicionar carrinho ele vai ter que colocar um item a mais lá dentro certo para ele não colocar como se fosse um item diferente Então essa é a única coisa que a gente tá fazendo aqui então a gente vai fazer assim ó se tem o item no carrinho que que aconteceu tem já tem o item no Carrinho adicionar a quantidade Então a gente vai fazer item item carrinho item no carrinho ponto quantidade que vai ser um

um atributo que a gente vai ter a gente vai pedir para ele adicionar mais a quantidade que a gente tá mandando por aqui pelo parâmetro da nossa função certo se ele já tiver o o item no carrinho e aí a gente vai fazer item no carrinho ponto Total item o total item Vai ser um outro parâmetro que a gente vai ter dentro do carrinho para mostrar a soma total do do item que a gente tem lá então por exemplo esse Total item vai pegar lá vamos supor que custa R 100 esse nosso aparelho e a

gente tem cinco itens lá dentro então ele vai fazer 5 x 100 o total item vai tá marcando 500 entendeu então aqui no total item vai ser o item no carrinho que é essa variável que a gente tem Aqui ponto quantidade vezes o item ponto preço promocional Então esse aqui vai ser o nosso Total item isso se já tiver o item do carrinho se não quer dizer não tem o item no carrinho a gente vai fazer o seguinte a gente vai fazer carrinho ponto push o método de você adicionar ou uma coisa num Array né

que o nosso Array carrinho vamos fazer aqui o método e a gente vai adicionar aqui dentro Então o Quê A gente vai passar o item Qual é que vai ser o item que a gente tá enviando e a gente vai ter o parâmetro quantidade com a quantidade que a gente tá passando e o total item com a quantidade vezes o item com preço promocional certo a gente tá colocando lá dentro do nosso local Story de carrinho esses dados certo e aqui a gente vai depois de tudo isso atualizar atualizar o local Storage de Carrinho então

é aqui que ele vai salvar o carrinho propriamente dito então ele vai fazer um local Storage ponto set item carrinho carrinho e aqui a gente vai salvar um Jon carrinho que foi esse aqui né a gente tem aqui em cima Beleza então assim a gente montou a nossa função de adicionar a carrinho a gente vai mandar Qual o item qual quade se aquele item já tá no Carrinho Se tiver ele vai colocar ali qual que é essa quantidade Qual que é o valor total só atualizar senão ele vai colocar adicionar fazer um p adicionar dentro

do carrinho um novo item com uma nova quantidade e um novo Total certo e aí como a gente faz para usar essa função então aqui no botão adicionar carrinho vamos achar ele aqui ó adicionar carrinho aqui ó a gente vai colocar um ID nele a gente pode colocar aqui na verdade não precisa de um ID né A gente pode usar essa aqui add cart então a gente pode fazer assim ó clicou no adicionar carrinho então vamos fazer o add cart cli que que acontece quando clicar function que que é para acontecer então quando clicou no

botão adicionar carrinho Então nós vamos usar o método adicionar adicionar ao carrinho vamos usar o método Então olha só que que a gente vai fazer ó a gente vai usar O método adicionar o carrinho olha por que é legal você criar uma função antes já preparada porque aqui a gente só vai passar Qual que é o item que a gente tem e a quantidade um sempre vai ser um né porque aqui o botão ó só tem para adicionar um por vez Então adicionar o carrinho o item esse item tá vindo lá de cima dessa variável

item que a gente tem aqui do item que tá sendo renderizado aqui na página e estamos adicionando um ao carrinho e aí só pra gente fazer uma Coisa mais legal a gente vai usar um recurso do Framework S que se chama toast Então se a gente entrar aqui no site do Framework S procurar aqui em Componentes você vai achar um componente que se chama toast assim ó você escreve assim toast né o toast ele é tipo um balãozinho uma mensagem que aparece onde você quiser no topo no centro onde você quiser ó assim ó para

dar alguma a pra pessoa embaixo tá vendo ó você pode fazer vários tipos de toast Toast com botão customizado bem legal na verdade a gente até podia fazer um toast assim né adicionado ao carrinho ir pro carrinho uma coisa assim dáa para fazer um toast com um botão customizado uma coisa assim né mas a gente vai fazer o seguinte nós vamos pegar aqui ó deixa eu ver só um toast com botão customizado como é que ele funciona aqui deixa eu dar uma olhada um Toast Close [Música] Button deixa eu ver toast wit Custom buton deixa

eu ver se ele é tranquilinho de usar test Center position default Tá não vamos dificultar muito aqui tá pessoal vamos fazer aqui o uso de um toast Center aqui ó vou copiar esse modelinho aqui que é esse que fica assim no centro mesmo tá então a gente vai colocar aqui Embaixo a gente vai fazer o uso dessa chamada do toast Center aqui né Você pode colocar isso numa variável toast Center só troca aqui F7 por app tá porque a chamada é do nosso Framework 7 a gente chamou ele de app nesse modelo padrão que a

gente tem aqui vamos fazer um toast Create e aqui logo abaixo a gente vai pedir para ele mostrar esse to toast Center Open é o método PR ele abrir e aqui no texto O que que a gente vai colocar a gente vai usar aqui um Template string e a gente vai colocar assim o nome do item Então a gente vai colocar item P nome e a gente vai colocar assim adicionado ao carrinho só para ser dinâmico certo E aí beleza Tá feito vamos ver se isso aqui funcionou Então vamos lá vamos clicar aqui no adicionar

a carrinho primeiro deixa eu maximizar e colocar no modo desenvolvedor aqui só para vocês verem detalhe aqui ó lá do nosso local Storage Então a gente não tem ainda aqui uma chave de carrinho certo quando eu clicar aqui em adicionar ao carrinho ó adicionar carrinho ó airpod adicionado ao carrinho aí ele vai criar para nós aqui um local stor chamado carrinho e aqui dentro já vai ter a informação ó vai ter os dados do item todos os dados aqui colocados aqui dentro dentro desse desse Campo item a gente vai ter quantidade e o total do

item show se eu clicar de novo aqui olha só o que que Vai acontecer adicionar o carrinho airpod adicionado o carrinho você repara que ele não adicionou um novo item ele Manteve o mesmo porque ele viu que já tava no carrinho só que se a gente abrir aqui ele vai mostrar para nós que tem a quantidade dois e o total item já é a multiplicação de dois itens no valor dele né então aqui a gente a gente já tem dentro do carrinho salvo já todos os dados que a gente precisa certo se a gente pegar

um outro item aqui ó vamos Pegar aqui o iPhone adicionar o carrinho adicionou Ó lá ele já adicionou Um item a mais ó o item um tem o zero que é o rpod tem um que é agora é o iPhone e aqui tem a quantidade Total item separado legal então fica bem fácil da gente trabalhar com essa estrutura de dados aqui né vamos vamos lá então agora vamos pra parte do carrinho né então a gente já tem aqui Um carrinho e aqui a gente sabe quantos itens a gente tem no carrinho Então se a gente

sabe quantos Itens a gente tem no carrinho a gente tem como alimentar a nossa sacolinha aqui né o nosso nosso item aqui do do carrinho com quantos itens a gente tem lá né aquele balãozinho que aparece aqui em cima aquele bed aquela notificação inha que a gente tem ali em cima Então a gente vai fazer o seguinte aqui na nossa index que é a nossa página inicial né o index.js a gente a gente vai precisar pedir para ele mostrar isso daí para nós né quantos itens a gente tem dentro da Nossa sacolinha lá então aqui

abaixo disso tudo aqui que a gente tem ó aqui na nossa index a gente pode fazer aqui ó deixa eu ir aqui pro final pular aqui ver quantos itens tem dentro do carrinho a gente pode colocar isso aqui na nossa index deixa eu até voltar aqui normal pra gente ir vendo aqui que que vai acontecer né ver quantos itens a gente tem dentro Caino Deixa eu só dentro do Roots aqui eu tirar essa questão do detalhes que a gente já viu Já para inicializar aqui então aqui a gente vai fazer o seguinte a gente pode

fazer aqui um eh set time Out para ele assim com 300 msos ele fazer uma verificação dos itens que tem no carrinho isso daqui pessoal tem que usar um site time Out para ele poder disparar o evento porque às vezes tem um delayzinho entre ele pegar os dados que tem no local Storage e ele mostrar ali na sacolinha Então se a gente não colocar ali um atrin pequeno de 0 3 mil De segundo né 300 msos aí às vezes ele dá uma bugada isso aqui eu já sei porque eu fiz os testes E aí eu

vi que assim funciona melhor tá então vamos fazer assim ó var carrinho vamos pegar os dados que a gente tem lá no nosso local Storage vamos pegar Jason pars vamos pegar aqui o local Storage get item para pegar os itens que a gente tem dentro do então aqui a gente pegou o nosso carrinho e agora a gente vai Alimentar alimentar o contador da sacola porque lembra lá na nossa index pessoal Deixa eu só salvar isso aqui que tava marcando que não tava salvo lá na nossa index P HTML a nossa sacolinha ali em cima ó

a gente criou vamos vamos lá para cima a gente criou aqui ó um um atributo se chama data count tá vendo aqui ó data count então aqui a gente vai ter o conforme a gente colocar tem um valor Aqui mudado ó ele mostra lá quantidade de itens dentro do carrinho tá vendo Então o que a gente vai ter que alterar vai ser esse data count aí então a gente vai fazer assim alimentar o contador da sacola vamos pegar então pela classe né aqui a gente pode pegar btn cart pon btn cart e a gente vai

mudar o atributo att que o atributo data count e a gente vai passar aqui que o valor do data count que a gente vai querer Colocar ali vai ser o carrinho pon lente o esse método lente aqui né pessoal ele verifica ah quantos itens tem dentro de um Array então por exemplo aqui ó a gente vai ter dois itens Por que que já tá aparecendo essa cola de dois itens lá porque se a gente for olhar lá no nosso local stor dentro de carrinho ele tem o nosso Array do carrinho tem dois itens certo ele

já sabe o zero e o um então tem dois itens se eu adicionar mais um item ele já vai saber que aqui tem três Itens né Vamos adicionar mais um aqui ó vamos adicionar mais o MacBook Pro beleza adicionado o MacBook Pro se a gente voltar lá ó lá três itens Beleza então isso aí fica bem legal ele já vai mostrar na nossa sacolinha a quantidade de itens conforme o que a gente realmente tem dentro do nosso local Storage aqui de carinho agora nós vamos pra parte final aqui conus realmente do noo projeto que vai

ser a gente fazer a parte de carrinho funcionar né com as Somas pegar esses itens que estão do carrinho e listar aqui né os itens conforme que a gente tem aqui no nosso local Storage de carrinho e mostrar aqui o subtotal e fazer eventos aqui para de clique aqui né no nos itens aqui de do botão de mais botão de menos né meio meio bizarro isso aqui né pessoal meio estranho aqui esse essa parte estética aqui depois a gente vai ter que fazer uns detalhezinhos aqui finais né PR ficar bem bem bonito ISO daqui tá

Mas is Aqui é aqui a gente deixa para depois vamos centrar agora na parte lógica mesmo né então vamos fazer isso agora se você quiser continuar assistindo essa série assiste o próximo vídeo aqui ó clicando aqui no lado e se você quiser aprender mais sobre como criar aplicativos conhece o meu curso completo de desenvolvimento de apps forte abraço e até a próxima valeu