Como Criar um Aplicativo Profissional com Programação (7 Horas)

E aí animado pra gente fazer o nosso aplicativo do zero absoluto um aplicativo Super bonito super legal aí de e-commerce eletrônico eu tô muito empolgada Tô animado aqui para mostrar para vocês o resultado como é que vai ficar o nosso projeto o que nós vamos estar fazendo nessa aula e vai ser muito legal a gente colocar a mão na massa junto e aprender muitos detalhes de criação de aplicativos nessa aula tenho Certeza que você vai aprender muito que você vai gostar e vai ser muito legal a sensação que você vai se você acompanhar comigo essa

aula fazendo junto de você conseguir criar um aplicativo de alto nível e ver isso rodando na sua mão legal nós vamos estar trabalhando principalmente com três telas aqui que a gente vai est usando né Trabalhando deixa eu colocar minha cara para cá por enquanto vai ser uma tela inicial onde a gente vai ter aqui o carregamento dos Itens né a gente vai ter aqui uma sistema de navegação de Tab um carrinho de compras quando clicar em cima do item a gente vai para uma tela de detalhe onde vai aparecer aqui a imagem a os dados

que a gente vai alimentar via e banco de dados backend né A gente já vai ter essas informações a gente vai fazer aqui uma simulação de um backend enviando esses dados a gente recebendo para alimentar o sistema E aí a gente tem o sistema de carrinho né Quando a pessoa clica no botão adicionar o carrinho um carrinho de compras aqui onde vai ter que ter o sistema de somatória né de aumentar e diminuir o nível de a quantidade de itens poder esvaziar o carrinho né tudo funcionando bonitinho conforme a quantidade de itens que a gente

tem aqui aparecer lá no balãozinho na tela inicial né da nossa sacolinha a quantidade de itens Então é isso que a gente vai est fazendo basicamente essas três telas e todo o Funcionamento disso certo pessoal aqui também mostrar para vocês ó como é que ficou no aplicativo agora esse aqui então é o aplicativo que tá realmente rodando aqui no meu celular e mostrar para vocês aqui ó se vocês der uma olhadinha aqui na na tela aqui ó ficou muito bonito mas muito bonito no celular mesmo tá pessoal ficou lindaço esse aplicativo aqui como ele aumenta

um pouco eh às vezes parece até meio estourado um pouco mas olhando no Celular a qualidade de pixels assim bem HD mesmo bem 4K assim sabe do da da qualidade visual ficou bem bem legal então basicamente aqui a gente tem a nossa tela inicial do nosso projeto né Eh além daquela imagenzinha que a gente tinha aqui desse desse modelo eu fiz outras imagens e fiz um sistema de swiper aqui né que é para ele fazer essa transição a gente tem uma certa animação umas propagand dinhas como se o aplicativo fosse colocar aqui certo eh Ele

tem um sistema de carregamento que trabalha com o skeleton eu vou mostrar para vocês aqui eu vou navegar para uma outra eh página e vou voltar aqui na home aí você observa aqui ó o carregamento Ó tipo uma marquinha da água ele fica fazendo o carregamento né isso a gente chama de skeleton e depois ele mostra mostra para nós os produtos Depois que ele já pegou esses dados né a gente fez aqui esse sistema de carregamento que é um sistema muito Bonito muito moderno aí nos aplicativos para indicar pro usuário que está tendo um carregamento

de alguma coisa que vai aparecer naquele lugar né aí a gente tem o sistema de categorias aqui que também é um swiper né onde a pessoa pode aqui puxar para ver mais categorias esse esse sistema de filtragem a gente não vai fazer tá pessoal é só mais visual mesmo pra gente ter aqui e as categorias assim mas mostrar para vocês que ele funciona assim também a pessoa pode arrastar para Ver mais categorias pro lado né E aí funciona basicamente assim tem os itens eu clico no item ele vai abrir já o item pra gente olhar

os detalhes né Eh é até interessante que ah quando você clica ele já abre instantâneo o item né A gente vai ver um sistema aqui de carregamento que uma vez que puxou os dados do nosso backend a gente vai salvar esses dados na memória interna do celular e aí a gente tem isso entre aspas offline né a gente tem essa Base de dados no nosso aparelho aí dessa forma quando a gente clica a gente tem esse efeito de tempo real alimentando aqui a aplicação com os dados bem legal mesmo né então a gente vai ter

todos esses dados que vai puxar do nosso backend e alimentar aqui né então na página de detalhes tem aqui a imagem tem aqui alguns dados umas tabelinhas com algumas informações que estão vendo do backend inclusive cada item ele tem uma tabela essas de características e Detalhes que vem lá do nosso backend que alimenta né então todos eles vão ter essa mesma característica Ó você vai ver que vai ter uma tabelinha falando sobre os itens o que que eles têm e tal né E aí você vai ter a opção aqui de adicionar no carrinho quando você

adicionou no carrinho ele vai dizer que o produto tal foi adicionado lá no carrinho e aí se a gente voltar lá nossa sacolinha já vai est mostrando realmente quantos itens a gente tem né vou colocar Mais um aqui ó olha tô tô ricaço hein um Macbook Pro 2023 e um Iphone 15 pro Max tô rico vou adicionar aqui então tô com os dois produtos aqui entrar lá dentro do carrinho aí lá no carrinho olha só que Que bonito né Que legal esse sistema de carrinho aqui né com os itens aqui você tem as opções de

aumentar ou diminuir a quantidade de itens aqui vai dar o subtotal né aqui a gente colocou um frete de migué aqui né fake de 10 pil só para dizer que tem alguma coisa de Frete vai ficar parecido aqui com a parte visual aqui ó que tinha né sistema de taxa de entrega e tal então a gente fez alguma coisa um pouco parecida aqui nesse lado e E aí esses itens Conforme você adiciona o subtotal ele vai acompanhando então é a soma real né então Ó vou aumentar aqui ó você vai observar que lá o subtotal

também vai aumentando né conforme eu vou diminuindo ele também vai diminuindo lá embaixo inclusive se eu baixar de um Eh ele vai dar opção para mim para se eu quero remover o item né então eu clico lá que eu quero tirar ele vai ó gostaria de remover o item eu não vou remover agora ou pode vir aqui no x né do produto clicar ele vai falar Quer remover esse item do carrinho também vai poder remover e lá em cima nós vamos ter uma opção né nos três pontinhos esvaziar carrinho é onde você clica aqui para

esvaziar carrinho aí ele vai perguntar quer esvaziar vou dar um sim por exemplo Ó nada por enquanto é isso aqui que mostra quando o carrinho tá vazio né uma animaçãozinha bonitinha e aí lá no nosso aplicativo Nossa sacolinha não mostra nada mais tá zerado o nosso carrinho certo então é isso que nós vamos estar fazendo nessa aula do zero absoluto junto com você Olá meu nome é dimitre Teixeira seja muito bem-vindo seja muito bem-vindo a mais um curso aqui do canal programação web e nesse minicurso eu vou Ensinar para você como criar aplicativos para celular

aplicativos que rodam ali no Android aplicativos que podem ser colocados na loja usando uma técnica de desenvolvimento fantástica muito legal mesmo que se chama técnica de desenvolvimento híbrido é uma técnica na qual você vai utilizar as mesmas linguagens de programação que você já conhece no caso o HTML o CSS JavaScript Aquelas mesmas linguagens que a gente usa para criar sites e sistemas que Rodam no navegador mas que funcionam também em outros sistemas como Android os para celular usando aí um sistema de compilação no qual ele pega esse seu código que você fez aí como se

fosse para web mas transforma isso em um aplicativo que pode rodar no celular uma técnica realmente sensacional que ganha muito produtividade faz com que você de uma vez só possa estar construindo site e aplicativos tudo com um único código fonte então pra gente estar fazendo tudo Isso nós vamos estar utilizando uma tecnologia que eu já até mencionei em outros vídeos aqui do canal que é o Apache córdova Você pode até entrar no site cordova.apache.org Eu já falei dele aqui no canal e eu realmente sou como se fosse um Embaixador eu gosto muito dessa tecnologia porque

ela facilita muito o dia a dia do desenvolvimento de aplicativos com o cordova você vai poder transformar HTML CSS e JavaScript em um Aplicativo nativo um APK um IPA um a que pode ser instalado no celular que são o formato de arquivo executável né Ele é totalmente gratuito é open source ou seja de código aberto e ele tem com o único código fonte base ali como alvo várias plataformas né aqui ele mostra que ele suporta cenários offline ou seja você pode criar um aplicativo usando Essas tecnologias da web mas que funcionam sem ter internet você

não precisa de internet pro seu aplicativo Rodar no celular e ainda usando recursos nativos do aparelho ou seja usando o cova Mesmo trabalhando com linguagem e programação web você vai poder acessar os recursos do celular como a câmera o GPS e bateria enfim o que você quiser usar ali que são recursos do aparelho propriamente dito né então é muito legal isso daqui depois a gente vai est nas próximas aulas e é vendo um pouquinho mais a questão de instalação como tudo isso funciona mas eu quero explicar para Vocês nessa aula o conceito de aplicativo híbrido

para vocês entender como isso aqui realmente é uma mão na roda como isso daqui é uma técnica de desenvolvimento muito legal para fazer aplicativos porque assim você já deve ter ouvido falar que existem várias formas de se desenvolver aplicativos hoje certo você tem aí react Native flutter você tem como fazer com as linguagens nativas de cada sistema operacional por exemplo Java Cotlin Swift objetive c são várias formas diferentes que você tem de desenvolver aplicativos hoje no mercado mas a técnica que eu gosto que é usando o cordova e o desenvolvimento híbrido eu acho interessante porque

ela é uma técnica que vai fazer você ganhar tempo não só no sentido de desenvolvimento mas até das linguagens de programação que você precisa estar aprendendo para você conseguir fazer os seus aplicativos então eu vou dar aqui um exemplo real Que vai ajudar vocês a entenderem bem esse ponto para que vocês possam ter uma visão mais clara do porque essa técnica de desenvolvimento ela é tão legal e como que grandes players no mercado utilizam essa técnica então eu tenho aqui o exemplo da shopee se você entrar lá no site da shopee que eu acredito que

todos vocês já compraram alguma porcariazinha da China ou aqui do Brasil mesmo usando esse site já deve conhecer ele é um e-commerce Zinho normal certo Você tem aqui campin de busca os produtos para você tá comprando e tal beleza isso daqui é um site ou seja quando ele foi desenvolvido os programadores que desenvolveram Ele eles fizeram usando linguagem de programação web usaram lá um HTML o CSS usaram o JavaScript talvez algum Framework Então quando você faz um site desse tipo você monta o frontend montou o backend onde você vai salvar os dados e isso é

mostrado no navegador Se você quisesse fazer um aplicativo para Android e um aplicativo para iOS usando linguagem Nativa Java cotlin objetive C ou Swift você precisaria ter uma equipe separada para montar tudo isso novamente para aquele sistema operacional específico certo mas usando a técnica de desenvolvimento híbrido você faz isso tudo de uma vez Então eu criei o site montei todas as estruturas tá aqui o sitezinho pronto Se você pegar esse mesmo site e vê ele para celular Você vai ver que é exatamente a mesma coisa que o aplicativo que você baixa na loja até baixei

aqui o aplicativo para mostrar para vocês olha lá tá vendo o que aparece ali claro que os banzin aqui ficam um pouquinho diferente porque não tá sincronizado ali mas é a mesma coisa ó é ó olha os ícones que a gente tem ali os ícones que a gente tem aqui é a mesma coisa eles usaram a técnica de desenvolvimento híbrido ou seja eles pegaram o site montaram zero ele com a Responsividade para funcionar também nos aparelhos do tipo celular e usando uma tecnologia como uma apte córdova eles compilam isso para rodar no sistema operacional Android

então com o único código fonte de uma vez só você fez o site e o sistema para Android para iOS de uma vez só legal então você tem tudo integrado ali todo o teu sistema integrado sem ter a necessidade de fazer isso usando ali linguagens diferentes porque senão pessoal você teria que Estar aprendendo essas linguagens nativas daquele sistema para poder est construindo os apps tá entendendo como isso aqui é interessante Então você na hora de tá desenvolvendo Então na hora de tá fazendo o teu projeto você vai planejar o site como que ele vai se

comportar você também vai planejar a responsividade ali usando CSS para que ele fique adequado também a Telas menores que estejam navegando usando o navegador no no no celular mas depois Você vai usar o apach cova que é essa tecnologia aqui para compilar transformar entre aspas esse teu código em um aplicativo que pode ser colocado nas lojas é basicamente isso que o método híbrido faz acho que deu para entender é sensacional é muito legal mesmo E à medida que a gente for fazendo as próximas aulas desse minicurso vai ficar cada vez mais claro na sua mente

como tudo isso funciona e animado pra gente instalar as Ferramentas de trabalho e poder começar a criar os nossos primeiros aplicativos eu tô super empolgado e vai ser muito legal a gente fazer isso juntos nessa aula você vai aprender o que a gente precisa instalar pro ambiente ficar bem configurado e seus aplicativos serem gerados corretamente então vai ser muito mas muito importante você prestar atenção nessa aula e fazer tudo exata Como eu vou mostrar seguir as versões dos programas que eu vou estar mostrando Para que não tenha nenhum problema e não funcione o seu caso

eu já falo isso porque eu tenho muitos alunos dos meus cursos e às vezes Falam assim professor não tá funcionando aqui na minha máquina não dá certo não sei o qu Mas é porque não segui o passo a passo conforme o vídeo se você seguir esse vídeo no passo a passo ali na régua vamos dizer assim na medida eu tenho certeza que vai dar certo e você não vai ter nenhum problema no processo de instala ação Beleza então Vamos lá Pôr a mão na massa e fazer tudo isso funcionar aqui na nossa máquina Então a

primeira coisa que eu já quero dizer para vocês é que eu estou no Windows 10 de 64 bits você pode fazer isso também em outro sistemas operacionais você pode fazer também no Windows 11 ou posterior qualquer outro sistema Desde que não seja inferior é esse que eu tô fazendo no vídeo então por exemplo se tu tiver no Windows 7 ou no Windows de 32 bits eu já não Recomendo esse processo de instalação porque você vai ter uma máquina muito atrasada muito antiga pro processo entendeu a gente precisa ter um computador um pouquinho mais atualizado para

tudo funcionar numa boa então dá uma olhadinha aí para ver qual é a versão que você tem então só tô falando isso já para você ter uma base do que que eu tô trabalhando aqui na minha máquina beleza OK então aqui o vs code vai ser o editor de códigos que eu vou Recomendar vocês estarem instalando eu já tenho um vídeo aqui no canal onde eu mostrei a instalação do vsco code também como você faz para configurar ele eu vou deixar aí nos cards para vocês estarem dando uma olhada no vs code aí em cima

e poder fazer a instalação dele que é o hoje o editor de código que a maioria senão quase 100% dos programadores estão utilizando certo aí a gente vai precisar instalar o nodejs tá pessoal Essa vai ser a primeira coisa que a gente vai Precisar então você pode abrir aí o terminal promp de comando você pode vir aqui na tua barra de pesquisa digitar CMD aí você vai abrir essa caixinha preta aqui que é o terminal ou prompt de comando aqui você vai verificar se você já tem o node instalado na sua máquina Então você vai

dar um node menos v e dar um enter Se ele aparecer que node não é reconhecido é porque você não tem o node instalado na sua máquina se aparecer já alguma versão do node instalada o que eu Te recomendo é desinstalar e instalar a versão mais atual Então como é que você vai fazer isso você vai abrir aqui na a barra de pesquisa vai digitar adicioná remover programas ó já apareceu aqui para mim você vai clicar aqui e nessa lista você vai digitar aqui node procura o node No meu caso eu não tenho instalado por

isso não aparece mas no seu caso se estiver aparecendo você vai lá e clica em desinstalar e desinstala o node aí da sua máquina beleza OK então Feito isso mostrou que não tem o node instalado a gente vai fazer a instalação entrando no site do node então você pode entrar aí no site node J s.org E você vai fazer o download da versão LTS mais atual que tiver então sempre pega aqui a versão LTS mais atual que estiver à disposição no meu caso na gravação desse vídeo tá na versão 20.10.0 certo então tem que ser

dessa versão para cima o recomendado dessa versão para cima vou clicar aqui então Vai aparecer a opção para mim fazer download vou fazer download da do node aqui do Instalador para para começar a instalação Beleza então é só clicar aqui para ele começar a executar e aqui não tem segredo tá pessoal é next eu aceito os termos next next next next install aí ele vai dizer que você dá um sim ali para permitir né E aí ele vai fazer as instalações aí do node beleza bem rapidinho node tá instalado Agora se a gente vir aqui

no nosso promp de comando E der um node Men V você vai ver que não reconheceu porque a gente vai ter que fechar e abrir o promp de comando de novo Então você dá um CMD aqui novamente abre aqui o prty de comando E aí agora a gente vai ver a versão aqui do node vamos dar aqui um node menos V digitar né E aí ele já vai mostrar ó 20.10.0 Isso aqui é uma coisa importante até de falar para vocês sempre que tiver uma instalação de alguma coisa você precisar fazer uma verificação no Terminal

é só você fechar e abrir de novo ele porque ele precisa ter o processo de atualização ali do terminal ele saber que alguma coisa foi instalado certo ok agora a gente também pode dar uma olhada no npm você digita assim ó npm Men v e Dá um enter né quando você dá um npm Men B ele vai mostrar a versão do node package Manager que é um gerenciador de pacotes do node que ele faz instalações e coisas que a gente precisa do ambiente do node então a Minha versão aqui só para mostrar para vocês é

a 10.2.3 na gravação desse vídeo pode ser dessa para para cima né dessa ou superior é o que eu vou indicar para vocês agora nós vamos estar instalando o cova propriamente dito né então para você tá instalando o cova você vai dar o seguinte comando npm install Men G cordova então com o espaço né npm espaço install espaço menos G Espaço cordova então eu tô dizendo aqui node package Manager eu quero que você instale esse menos G essa Flag quer dizer globalmente quer dizer na minha máquina o cordova certo e aí você dá um enter

aí e ele vai fazer a instalação do cordova na sua máquina isso aqui também não é um Processo muito demorado Ele é bem rapidinho já vai fazer a instalação do córdova aí via terminal beleza terminado aqui a instalação eu já tinha na verdade o Cord Instalado nessa máquina então ele apareceu algumas coisas aqui sobre atualização né que quando a gente pede para instalar e a gente já tem instalado ele atualiza então ele tá mostrando que fez umas alterações em alguns pacotes e tal enfim isso aqui é bem tranquilo é assim mesmo é instalação do cova

tá feita agora a gente vai precisar instalar na nossa máquina o Java jdk que é o Java para funcionar as funções ali do Android e tudo mais já o processo de Instalação da plataforma android antes a gente pode ver se deu certo a instalação do cov a gente pode dar um comando aqui ó cordova menos v e Dá um enter E aí ele vai aparecer a versão do cordova 12.0 0.0 no momento da gravação desse vídeo cordova Lib 12.0.1 ok ok então agora a gente vai fazer a instalação do Java jdk para você ver se

você tem o Java jdk instalado na sua máquina você pode dar o comando javac menos Version javac Java C né menos version Se você dar um enter ele vai mostrar a versão que você tem na sua máquina aqui no meu caso mostrou que é a 11.0 0.1 essa aqui a versão 11 do Java jdk é a versão indicada pro funcionamento do Cova se você tiver qualquer outra versão aqui colocada uma versão superior 19 ou uma versão inferior 9. alguma coisa enfim se for alguma versão que seja diferente da versão 11 Então você vai ter que

fazer a instalação dessa versão Específica Ok a versão 11 para funcionar aqui no caso a gente coloca coloca javac mesmo Java C porque a gente quer ver o Java jdk se você fizer isso javac menos verso e aparecer um comando e que nem a gente deu aquela vez no aquela hora no node esse não é um programa encontrado operável em lotes não sei o que lá uma mensagem assim que não encontrou quer dizer que você não tem instalado E aí beleza só fazer a instalação certo então eu vou fazer o seguinte Provavelmente Você vai ter

uma versão do Java instalada aí na sua máquina do Java jdk Então você vai desinstalar essa versão e instalar a versão que eu estou recomendando então você vai fazer o seguinte você vai vir aqui no adicioná remover programas vai procurar aqui o Java ó Java development kit que é o de desenvolvimento vai desinstalar ele tem que ser esse Java development kit tá o kit de desenvolvedor do Java vai desinstalar Então vou desinstalar o meu Beleza desinstalado E aí você vai vir aqui que numa no link que eu vou deixar aí na descrição do vídeo vai

ter um link com os arquivos que você pode usar para instalação só para facilitar aí o teu dia a dia né E você vai ter aqui um executável chamado JJ Java jdk 11.0.14 Windows 64 bits aqui já tem ele para fazer a instalação então você pode vir aqui e fazer o download desse executável para você poder instalar aí na sua máquina precisa ser essa versão Outra coisa que você pode fazer é aqui em cima vir em fazer download de tudo ele vai gerar um arquivo zipado com todos esses instaladores aqui que são as coisas que

a gente tá usando por exemplo aqui eu já deixei o node que a gente instalou ali o vs code e esses outros três que a gente vai tá usando que é o Java jdk o gradle e o Android Studio numa versão um pouco mais antiga do que a que tá ali no site atualmente tá então você pode vir aqui em cima e fazer Download de tudo baixa descompacta esses arquivos aí no no seu computador né vai vir assim zipado né um arquivo do tipo Zip para você descompactar um arquivo do tipo Zip você procura esse

programa chamado wiar né que talvez você conheça você digita aqui no Google winar vem aqui no site do wiar vem aqui em baixar baixa esse programinha que é gratuito Instala aí na sua máquina para você poder estar descompactando esses arquivos zip que estão vindo ali Desse Nosso Google Drive aqui dessa pasta onde tem os arquivos certo aí o que que você vai fazer faz você vai clicar com o botão direito em cima desse arquivo zip vai dar um extrair aqui vai esperar ele fazer a extração aqui dos arquivos que estão ali dentro né E você

vai ter já todos os arquivos que a gente vai precisar de instalação aqui também na sua máquina para facilitar então aqui já vai ter o executável do Java jdk que eu falei que a gente vai precisar instalar Então vou dar dois cliques em cima dele pra gente fazer a instalação vai dar um sim aqui no que ele vai perguntar você vai dar aqui um isso daqui pessoal é uma coisa bem importante ó que que aparece aqui que é esse caminho tá vendo que tá aqui C2 programfiles Java jdk 11.0.14 esse caminho aqui vai ser um

caminho importante que a gente vai precisar saber dele no futuro uma outra parte aqui da instalação então grava bem Isso aqui onde é que vai est na sua máquina aí o caminho do Java jdk certo então vou dar aqui um próximo e aí esperar ele fazer a instalação beleza foi instalado Agora se a gente vir aqui no nosso terminal dá um javac menos version aí ele vai mostrar a versão tem que ser essa que vai mostrar para você 11.0.14 OK agora a gente vai fazer o seguinte aqui na barra de pesquisa você vai digitar aqui

ó Variáveis o era para digitar variáveis de ambiente no meu já apareceu aqui provavelmente no seu também vai aparecer editar as variáveis de ambiente vai clicar aqui editar as variáveis de ambiente do sistema vai abrir essa janelinha aí que você vai fazer você vai clicar aqui em nessa opção variáveis de ambiente aqui nessa parte de baixo aqui ó você vai clicar criar aqui novo e você vai digitar assim tudo em maiúsculo Java Underline home tá então você vai fazer um Java aqui underline home dessa forma e aqui ó no valor da variável a gente vai

ter que colocar aquele caminho do Java jdk que a gente viu ali no processo de instalação então por isso que era importante você saber onde que tava o seu Java jdk sendo instalado certo então você pode até fazer o seguinte você pode vir aqui no no seu computador este computador descolocar o c aí a gente vai achar ali o arquivos e programas né o Program files aqui que foi onde a gente fez a nossa instalação program files no nosso caso aí vai ter que aqui ó Java aqui dentro tem a pasta jdk e aqui a

gente tem algumas outras pastas mas o que que você vai fazer você vai entrar aqui dentro dessa pasta jdk aqui em cima ó Você vai clicar nessa barra aqui que tem aqui em cima e vai dar um CRL C para copiar esse caminho que é o caminho você no meu na minha máquina tá assim né c 2 pont program Files Java jdk 11.0.14 vou dar um Ctrl C vamos voltar lá nas variáveis do sistema e aqui no valor da variável você vai colocar este caminho Ok dá um ok aí beleza o Java home tá feito

agora você vai descer nessa listinha aqui e vai procurar onde tá escrito Pet só Pet não tá escrito Pet XT que nem aqui embaixo só esse aqui ó Pet certo vai clicar aqui em editar e aqui embaixo do de onde você tiver a última coisa que você tiver aqui você vai dar um cont control V para Colar esse mesmo caminho do Java jdk mas Mas aí você vai fazer o seguinte você vai dar uma contrabarra aqui seguindo essa barra que nem desse padrão que tá aqui essa contrabarra ela fica geralmente no teclado do lado da

letra Z nessa contrabarra e aqui digita Bin tá só que não em maiúsculo tudo minúsculo bim dessa forma que a gente tá apontando o caminho aqui da pasta do binário do Java jdk Ok dá um ok aí beleza etapa do Java jdk está concluída agora para Próxima etapa que a gente vai fazer é o seguinte lá naquele link que eu disponibilizei tem o gradle certo então se eu voltar lá na onde a gente tem e os arquivos que eu fiz o download aí a gente vai ter essa pastinha aqui ó gradle 7.6.3 ao Zip certo

então o que que você vai fazer com esse arquivo aqui você vai copiar ele dar um CRL C aonde ele tiver copia ele cont control c vai entrar no descolocar C vai criar aqui Uma pasta chamada gradle Aqui no meu caso eu até tenho uma já eu vou até deletar ess aqui para não ter problema aqui porque eu vou querer fazer de novo esse processo Então você vai clicar com o botão direito em alguma área novo pasta vai chamar essa pasta de gradle assim se escreve gradle pode ser com o g maiúsculo aqui tá Então

gradle vai entrar dentro dessa pasta e vai colar aqui dentro aquele arquivo zipado aí você vai fazer o seguinte você vai Clicar com o botão direito em cima disso daqui e vai dar um extrair aqui certo clica aí ele vai fazer a extração o inh né Tá extraindo aqui esse arquivo zipado só você aguardar Beleza já fez aqui a descompactação aí depois disso você pode até deletar esse arquivo zipado aqui não tem problema a gente já tem a pastinha que a gente precisa você pode entrar dentro dessa pastinha aqui e aí aqui em cima você

vai copiar esse caminho então no meu caso ficou C2 pontos gradle Gradle 7.6.3 dá um Ctrl C aí para copiar esse caminho vai voltar lá nas suas e variáveis de ambiente e aqui você vai dar um novo nessa caixa aqui de baixo né dá um novo aqui digita aí gradle tudo minúsculo assim gradle você escreve gradle tudo minúsculo e aqui você vai colocar esse caminho que você copiou aqui deu um Crol C cont Crol V nesse caminho aqui ok Ok beleza então a gente já colocou o gredo agora a gente vai clicar aqui no Pet

vai clicar em editar e aqui embaixo do Java jdk você vai colocar também esse caminho do gradle só que colocar uma contrabarra e também vai apontar o caminho do binário do gradle certo coloca aqui o caminho do binário do gradle e dá um ok beleza o gradle já está feito também vamos dar um ok E aí pra gente ver se o gredo vai funcionar a gente pode ir aqui no nosso terminal e digitar assim ó gradle só gradle gradle ele não reconheceu deixa eu fechar e Abrir novamente o meu PRP de comando aqui para para

ele reconhecer vamos dar aqui um gradle Dá um enter Agora sim ó Welcome to gradle 7.6.3 então ele já mostrou que funcionou aqui ele reconheceu o comando do gradle certo então deu certo aqui a instalação dele agora continuando então no nosso processo de instalação a gente vai precisar instalar agora o Android tá pessoal então deixa eu voltar aqui ó a gente vai precisar fazer a instalação do Android Studio e a instalação dos pacotes do Android SDK que é para toda a plataforma android poder rodar e os nossos aplicativos poderem serem criados então eu deixei aí

disponível nesse download aí né Eh o Android Studio 2021 versão são 2.1.16 essa versão ela é uma versão mais antiga tá do que a atual com certeza tem uma mais nova ali no site do Android Studio Mas ela é uma versão que pro que a gente vai precisar ela já serve ela Não é tão pesada assim e ela já vai vir com o Android SDK Manager que é realmente o programinha que vem embutido com o Android Studio que a gente vai precisar usar Então as versões mais atuais elas são bem mais complicadas de instalar de

você conseguir e fazer funcionar esse Android SDK Manager e essa versão ela é uma versão bem tranquilinha de estar trabalhando então eu recomendo que você faça a instalação e use essa versão Específica do Android Studio fechou Beleza então vou dar dois cliques aqui para instalar né Vamos lá instalar o Android Studio essa é uma partezinha que é um pouco mais demorada mais chatonilda né Mas vamos lá vamos pro processo só esperar que ele abrir o instalador vai dar um sim aqui que que você quer instalar bem-vindo a Android Studio setup Vamos dar um próximo aqui

vamos dar aqui um próximo aí aqui ele vai Dizer onde é que o Android Studio vai ficar program files Android Android Studio Vamos dar um próximo aqui ele vai perguntar se quer colocar no menu iniciar pode deixar dá um Install e aí vamos esperar ele fazer a instalação completed deu certo então terminou vamos dar aqui um next E aí a gente pode dar aqui um finish e deixar aqui marcado o start Android Studio Então vamos inicializar aqui o Android Studio pra gente começar os processos aqui então Ele já vai abrir aqui ele tá fazendo download

de alguma coisa então você tem que aguardar o o bicho funcionar aí né ele abrir quando aparecer isso aqui ele vai dar aqui um Missing SDK diz que não achou você pode D aqui um don't send escolhe essa opção aqui ó don't send não enviar e aí aqui nessa janela você pode dar um cancel tá pessoal clica aqui em cancel E aí ele vai falar ah você quer cancelar instalação não sei o qu ele reclama e tal aí você vai e dar um ok Aqui que você quer realmente Cancelar E aí ele vai abrir essa

janelinha aqui ó bem-vindo ao Android Studio e aí o que a gente precisa realmente para nós vai tá aqui em more Actions Você vai clicar aqui em more actions E aí vai ter esse programinha adicional que vem junto com Android Studio que é o que a gente vai precisar realmente que é o SDK Manager que é o gerenciador de pacotes SDK Então vamos clicar aqui no SDK Manager E aí a gente vai vir para essa telinha que é a Telinha que para nós vai ser importante essa telinha onde a gente vai fazer realmente a instalação

dos pacotes do Android para tudo funcionar dentro do nosso projeto certo e você aguarda um pouquinho que ele vai fazer ali uma atualização aqui vai baixar as versões mais novas de tudo que tem aqui de opções do que a gente vai querer fazer de download então a gente aguarda até que ele aparece essa lista para nós novamente ok então a primeira coisa que A gente vai ter que fazer é especificar uma localização onde os nossos as nossas plataformas Android vão ficar na nossa máquina então o que que eu recomendo você fazer você vai lá no

teu disco local C no C dois pontos nesse lugar aqui para você não ter problema tá disco local C vai criar uma pasta chamada Android então cria uma pasta escreve Android certo Dá um enter aí para você criar essa pasta entra dentro dessa pasta Android e cria uma nova pasta e Chama ela de SDK certo então você criou uma pasta no C2 P Android dentro da pasta Android criou uma pasta SDK entra dentro dessa pasta SDK copia esse caminho aqui em cima C2 android.sdk copiou esse caminho volta lá no teu o Android Studio E aqui

onde diz Android SDK location a localização onde vai est o seu Android SDK clica em Edit aqui ele vai aparecer para você a onde você quer colocar né E aqui ele Já vai colocar uma versão da api 34 então você pode desmarcar não sei se ele vai te dar a opção aqui de desmarcar eu acho que ele é obrigatório já vir com essa versão 34 tá então vai ter que ficar marcado mesmo aqui onde tem Android dec location você pode clicar na pastinha aqui browse e encontrar lá a pasta que a gente criou né então

a gente vai lá no descolocar C aí a gente vai ter aqui Android e SDK é a pasta que a gente vai querer apontar Aqui certo e aqui ele já vai vir no meu caso ele já tá vindo instalando a versão 34 já por padrão né Eh não tem opção de desmarcar porque na verdade a gente vai precisar de uma outra versão para funcionar aqui mas deixa marcado aí a versão que ti tiver vindo não tem problema e você vem aqui embaixo e dá um next aqui e aí espera ele fazer essa instalação né você

quer fazer aqui ele tá falando que a localização do jdk Mas enfim vamos dar um next aqui aí ele vai Aparecer aqui para você aceitar aqui a os termos de licença Então você clica aqui aqui embaixo vai ter um botãozinho accept para você aceitar aí você vai dar um next E aí vai esperar esperar ele fazer a instalação aí do do Android SDK e só tem que esperar mesmo não tem muito o que fazer essa partezinha é meio demoradamente demora essa parte da instalação aqui beleza já terminou aqui O processo vou dar aqui um finish

para terminar e aí tá feito se você for lá agora então dentro do dessa pasta que a gente tinha ó Android SDK aqui dentro você vai ver que ele criou aqui os arquivos que a gente vai precisar Então aqui tem build Tools tá versão 34 e tem aqui platform Tools que é também algumas ferramentas que a gente usa Então essas duas pastas são bem importantes tá voltando lá então dentro do nosso ah SDK Manager o que a gente vai Precisar fazer agora você deixa marcada aqui a opção assim ó Show pack de detail se no

seu não tiver marcado deixa marcada essa opção E aí você vai fazer o seguinte essa versão 34 que tá marcada aqui ó você vai desmarcar ela desmarca essa versão 34 aqui em SDK Tools você também vai desmarcar essa versão 34 desmarca também E aí aqui que que você vai marcar você vai achar aqui a versão 33 então tem aqui ó Android SDK platform 33 certo Essa versão você vai querer pegar a versão 33 então só marca esse aqui ó Android SDK platform 33 Porque no momento da gravação desse vídeo o cordo vai estar trabalhando com

essa versão do Android SDK para você saber disso você tem que fazer o seguinte você pode vir aqui no site do córdova então entrar lá em cov p.org você vem aqui em documentation E aí você vai ter aqui ó em platforms Android Tá vendo você clica aqui e aqui ele vai mostrar para você a Especificação do que você precisa ter instalar para rodar aqui o cordova junto com o Android Então olha só a gente tá com a versão se a gente vir aqui no nosso promp de comando dar um córdova menos V córdova menos v

a gente tá com a versão do córdova 12 certo então a gente olha aqui na tabelinha Ó cordova 12 o que ele recomenda aqui ó build Tools 33.0.2 Essa é a versão do Android que ele recomenda que a gente tenha ele recomenda que a gente tenha o gradle 7.6 Tá vendo as coisinhas aqui então isso aqui é bem importante para você saber qual a versão que do Android que você precisa pra versão do Coba que você tá trabalhando por exemplo se eu tivesse no cova 11 ele recomenda 32 e assim por diante então estamos na

12 33.0.2 você pode dar uma conferida aí antes de fazer a instalação porque aí você tem a certeza absoluta que você tá instalando a versão certa porque se você tiver vendo esse vídeo no futuro talvez A gente já tá na versão 13 do Cova 14 talvez já a versão mínima do Android SDK que ele exige já seja outra então você pode saber onde buscar essa informação aqui na documentação do Cova certo então vamos voltar lá no nosso ã Android SDK Manager Então vamos marcar 33 aqui vamos vir aqui em SDK Tools e vamos marcar aqui

a versão que ele recomendou aqui para nós ó que é a 33.0.2 Então vamos achar aqui ó 33.0.2 beleza Fechou então a gente vai Clicar agora aqui em apply que é para aplicar e ele vai perguntar o que que a gente quer fazer Ó você quer confirmar o seguinte você quer deletar a versão 34 que foi aquela que ele obrigou a gente a instalar então a gente não precisa dela na verdade vai ter que remover porque senão ele sempre vai tentar puxar pela mais atual E aí dá problema de compatibilidade com cova então deletamos a

34 e aí a gente tá falando que a gente quer que instale a 33.2 beleza ele pede Para a gente confirmar Vamos dar um ok E aí é só esperar ele fazer esse processinho de instalação aí para nós aí eh se você já tinha tomado café antes vai lá e toma mais um só cuidado que você não vai dormir beleza done terminou finish finish AD terminado então tudo ok a gente pode ir lá na nossa pasta do Android aqui ó e dá uma olhadinha Então a gente vai lá no descolocar C Android SDK e aqui

a gente entra dentro de build Tools tem que tá essa versão 33.0.2 pelo menos no momento dessa gravação se no teu aí entendeu ali vai na documentação do córdova olha se tá no futuro talvez temha que mudar isso aqui mas daí você já tá ligado nesse ponto aí no momento da gravação desse vídeo 33.0.2 ok e aqui em platform Tools também já vai est Tod As coisinha aqui colocado agora que que você vai fazer você vai vir aqui em cima e vai copiar esse caminho C2 P Android bar SDK dá um cont Crol C vamos

lá n nossas variáveis De ambiente Então vamos digitar aqui novamente variáveis pra gente entrar lá na editar a variáveis do ambiente clica aqui em variáveis do ambiente e aqui você vai criar uma nova variável de ambiente você vai digitar o seguinte tudo maiúsculo Android underline home assim ó Android underline home certo e vai dar aqui um CRL V para colocar esse caminho da onde a gente tem o nosso Android que é em Android SDK C2 P bar Android bar SDK que a pastinha onde a Gente colocou dar um OK tá colocado agora você vai fazer

o seguinte você vai entrar aqui ó dentro da pastinha build Tools entrou vai copiar esse caminho aqui em cima da build Tools dá um cont CRL C vai lá n tuas variáveis de ambiente deixa eu achar ela aqui vai encontrar aqui onde tem o pet vai dar um editar e aqui embaixo do gredo você vai colocar o SDK build Tools Ok volta lá no teu SDK vai achar onde tem a pasta platform Tools vai entrar aqui dentro e Vai copiar esse caminho da pasta platform Tools E aí vai vir aqui nas variáveis e aqui embaixo

da build Tools você vai colar o caminho da platform Tools certo beleza OK OK OK feito isso pessoal o nosso processo de instalação já está concluído vamos ver se isso tudo que a gente fez funcionou se deu certo vamos fazer um projetinho de um aplicativo aqui Inicial só pra gente ver se as instalações funcionaram e se a nossa plataforma Android está tá rodando Então o que que a gente vai fazer você vai no Disc colocar o c e você cria uma pasta onde você vai fazer os seus projetos de apps eu tenho aqui várias pastas

por exemplo apps aplicativos ou alguma coisa assim no meu caso eu vou fazer aqui um nome curso barra apps tá curso traço apps porque são palavras compostas sempre tem que fazer tudo junto tá pessoal para não ter problema na linha de comando então no meu caso eu fiz curso traço apps no seu você pode Criar uma pasta chamada apps que fica mais fácil de você tá trabalhando é mais fácil de você entrar Inclusive eu tenho também aqui e geralmente é a que eu uso Tá mas como eu já tenho aquela pasta pra gente fazer uma

do zero tô criando essa daqui aí o que que você vai fazer você vai clicar aqui dentro dessa pasta curso apps vai vir aqui em cima ó clicar e aí você apaga isso daqui e digita assim ó CMD e Dá um enter aí olha só que legal que ele vai fazer ele vai Abrir já o promp de comando já nessa pasta olha só que legal a gente já tá dentro dela fica bem mais prático da gente acessar no terminal dessa forma então aqui dentro a gente vai dar o comando pra gente criar um novo projeto

do córdova isso daqui você não não liga tá pessoal não se importa muito que na próxima aula a gente vai ver Mais especificamente como criar um novo projeto as estruturas das pastas e tudo mais então isso aqui não é o mais Importante você saber agora só pra gente testar para ver se a nossa instalação foi tudo certo para ver se tudo funcion tá então eu vou dar o comando aqui ó córdova digita aí e tá meio pequena essas letr aqui deixa eu aumentar o o tamanho aqui ó V aqui aumentar a fonte disso aqui pra

gente enxergar melhor eh deixa eu ver se ele vai aumentar aqui o tamanho aí ó ficou meio melhor agora para enxergar antes estava meio ruinzinho né então vamos lá Você vai digitar o seguinte comando aí você vai dar um córdova espaço Create E aí você vai dar o nome da pasta do projeto da do aplicativo que você vai fazer então o nome da pasta do projeto eu vou colocar aqui só teste tá então cova espaço Create espaço teste aqui a gente precisa colocar um identificador que é um identificador que a gente usa pra loja da

da Google Play depois mais Tarde tá mas isso aqui não é importante a próxima aula a gente vai entender isso aqui mais a fundo então eu vou colocar aqui ó BR com. teste só faz isso que eu tô fazendo aqui br.com ptest dá mais um espaço e escreve teste que vai ser o nome do aplicativo então e essa linha de comando é cova eu quero que você crie um projeto chamado teste que vai ter um identificador chamado br.com teste o nome do aplicativo vai se chamar teste tudo teste só pra gente testar mesmo Vamos dar

um enter aqui e esperar ele criar o projeto para nós E aí ó lá atrás você viu que ele já criou a pasta um projeto teste Vamos acessar esse essa esse projeto então dando um CD que é um comando do terminal do windows para você acessar uma pasta Então eu estou dentro da pasta curso apps e agora eu estou dizendo que eu quero acessar a pasta teste então CD Espaço teste dou um enter agora eu estou dentro da pasta teste e aqui dentro eu vou dar os comandos do Cordova para instalar a plataforma android tá

então eu vou fazer assim ó cova platform add Android então cova espaço platform espaço add espaço Android presta atenção porque quando a gente tá no começo aqui de aprender esses comandos a gente tem aquela tendência digitar em português mas você tá vendo que os comandos são em inglês Então olha bem certinho platform add Android para você não acabar a portugues se você coloca aqui platforma Ou alguma coisa assim diferente ele já vai dar errado o comando certo então Cova platform DD Android Dá um enter que ele vai tentar adicionar a plataforma android agora dentro desse

nosso projeto do cor Então vamos aguardar para ver se ele vai conseguir fazer essa instalação da plataforma android já nesse nosso projeto então aí ele disse que deu tudo certo que ele adicionou aqui a plataforma alvo Android 33 e tal beleza Aparentemente tudo certo não deu nenhuma Mensagem de erro agora a gente vai mandar ele criar um aplicativo Android para nós o comando para ele gerar um arquivo do tipo APK que é o o arquivo que realmente pode ser instalado no celular então você vai dar o comando cova espaço build escreve assim né build b

u i l d cordova build que é construir Android Então eu quero que o cordova construa para mim para Android esse aplicativo Dá um enter aí e vamos ver agora agora é o momento da Verdade para Ver se toda a nossa instalação realmente funcionou ou não então vamos esperar aqui aguardar o processo para ver se vai dar tudo certo vamos só aguardar beleza pessoal momento de alegria onde a gente vê que deu tudo certo mesmo então quando ele dá essa mensagem aqui ó build successful em verde quer dizer build bem sucedida a construção foi bem

sucedida deu tudo certo é porque funcionou se aparecer build filed né build falhou em vermelho uma coisa assim é que em algum Momento da instalação você fez o processo errado e aí você vai ter que rever esse vídeo e descobrir aonde você acabou errando tá mas olha só que legal quando você faz uma build usando aqui o Córdoba ele já apontou para nós um caminho ó de um arquivo do tipo APK esse arquivo APK pessoal ele é instalável no celular se a gente pegasse esse arquivo colocasse lá dentro do nosso celular e botasse para instalar

ele já ia colocar um aplicativo base padrão do córdova já No nosso celular mas isso fica tranquilo que a gente vai ver nas próximas aulas nas aulas mais para pra frente a gente vai ver esse processo aí então nessa aula nós vamos aprender como criar um novo projeto do córdova conhecendo a estrutura de pastas e arquivos nós vamos adicionar a plataforma android Vamos aprender como rodar o aplicativo no nosso celular isso aqui é muito legal porque quando você vê a primeira vez ali um aplicativo rodando No seu celular é uma sensação única né de ver

que realmente dá para criar uma coisa que vai rodar dentro do celular muito legal aí a gente vai ver também a apresentação visual do projeto vou mostrar para vocês ali o layout como que vai ficar o nosso projeto final aqui desse minicurso nós vamos ter uma visão Geral do Framework 7 que é um Framework que eu gosto de utilizar para criar os aplicativos porque ele tem muitos recursos bem interessantes componentes Nativos do Android do iOS Prontinho sistema de roteamento muito legal a gente já vai ver isso daqui a pouquinho como instalar um template Starter pra

gente já ter tudo mais Facil itado já um template Zinho base nós vamos ver como fazer o desenvolvimento também no navegador para ter tudo mais rápido usando Live server pra gente não ter que ficar todo o tempo compilando no nosso celular o projeto né e por último nós vamos ver já sobre manipulação de rotas Criar novas páginas para que a gente já tenha todo o conhecimento necessário para na próxima aula aula de número quatro a gente mandar bala e fazer o projeto final e realmente ter o nosso aplicativo pronto Beleza então vamos nessa vamos começar

criando um novo projeto do Cova então o que que você vai fazer você vai abrir aí o teu vs code Abre o teu vs code E aí você vai dar aqui um control aspas simples no seu teclado cont control aspas simples vai Abrir aqui o terminal do vs code ou você vem aqui em cima em ver terminal E aí ele vai aparecer para você aqui o terminal esse terminal aqui embaixo pessoal nada mais é do que aquele CMD que a gente estava usando nas outras aulas só que integrado já no vs code então o Windows

ele tem um terminal dele próprio certo o promp de comando aqui essa telinha preta que a gente usou nas aulas anteriores o vs code já vem com isso daqui já embutido dentro dele então A gente não precisa abrir um programa separado entendeu então você pode usar o terminal direto aqui dentro do vest code que fica tudo mais prático pra gente então começar a criar o nosso projeto a primeira coisa que você sempre tem que fazer é acessar a pasta onde você faz os seus aplicativos como você acessa essa pasta Você vai dar o seguinte comando

CD Espaço E aí o caminho para essa pasta que você tem no caso da gente geralmente Vai ser assim ó C2 P bar apps você pode ir lá no seu explorador de arquivos entrar lá no C2 P E aí você tem uma pasta Apps onde você faz seus projetos senão você pode criar aqui Clica com botão direito novo pasta cria uma pasta chamada apps certo a gente vai acessar ela então diretamente aqui pelo vs code dando esse comando CD C2 bar apps essa é a primeira coisa que você precisa fazer Dá um enter e aqui

já vai mostrar que você tá dentro aqui do diretório apps Dentro do seu computador certo beleza tranquilo agora uma vez você estando dentro da sua pasta apps que é a pasta onde você vai criar seus projetos a gente vai dar o comando para criar um novo projeto um comando do córdova pra gente fazer um novo projeto que é o seguinte córdova Create Então esse é o nome cova eu quero que você crie né Pensa nisso tá dando comando pro cova para ele criar alguma coisa então cordova Create Aí o primeiro parâmetro que a gente vai

passar aqui vai ser o nome da pasta do projeto da pasta do aplicativo então o nome que vai ser do nosso projeto que a gente vai fazer aqui no curso vai ser greench dessa forma aqui ó greench certo aqui quando você vai criar pastas pessoal dando comando cova create temum umas regras você não pode fazer palavras compostas separadas por espaço tudo que for palavras compostas você precisa fazer usando o traço então por exemplo Vou fazer assim uma traço pasta traço qualquer Então se o nome da minha pasta do projeto fosse três palavras uma pasta qualquer

eu tenho que ligar ela sempre usando um tracinho dessa forma aqui você não pode dar espaços tem que ser tudo junto ou então você pode fazer tudo escrito junto assim né uma pasta qualquer mas eu acho que fica melhor usando o tracinho para separar outra regra importante aqui do nome dos do projeto da pasta do projeto é que não Pode ter caracteres especiais O que são caracteres especiais assento cedilha ponto de exclamação qualquer tipo de sinal né que você queira usar então por exemplo assim se você quisesse fazer uma um projeto chamado árvore do coração

aí você faria assim árvore traço do traço coração isso aqui não pode fazer por ainda que a gente tá usando traço para separar as palavras excelente é isso que tem que fazer mesmo mas nós estamos Usando caracteres especiais tá vendo aqui assento cedilha então se você fosse fazer um projeto com esse nome árvore do coração bizarro né você faria assim ó árvore sem acento do traço coracal assim ó dessa forma entendeu isso é uma regra precisa ser feito dessa forma então sem assento e sem caracteres especiais palavras compostas sempre usando traço Ok beleza mas vamos

fazer o nosso lá que vai ser o Green Tech assim ó tudo junto Green Tech vai ser o nome da pasta do Nosso projeto então cova Create o nome da pasta do projeto agora o próximo item é um identificador o que que é Esse identificador todo aplicativo Android ele precisa ter como se fosse assim um n nome um ID que identifica ele na loja então só para mostrar para vocês eu deixei já aqui aberto dentro da loja do Google Play um joguinho chamado Hungry Shark talvez você conhece né um joguinho de tubarão lá se você

olhar aqui em cima na URL que é o que interessa para nós Você vai ver que aqui tá escrito vai ter assim ó id e aqui você vai ter um ID ó esse ID ele é sempre único diz respeito a esse aplicativo aqui a esse jogo com.f go. Hangar Evolution Beleza então segue um padrão esse ID sempre de site ao contrário se fosse um site mesmo seria Hungry Shark Evolution fg.com por exemplo então aqui tá fazendo o contrário não significa que você precisa ter um site para você colocar um identificador é só um nome ali

que você Precisa dar para Google Play usando esse padrão para que ele possa ser colocado na loja e seja sempre único nunca pode repetir eu não teria como criar um aplicativo usando esse mesmo ID aqui porque esse ID já tá sendo usado por esse aplicativo aqui certo na hora que você vai est construindo nem sempre você sabe se esse ID tá disponível ou não mas você vai descobrir na hora que você for publicar e se já tiver você vai ter que trocar o id do seu aplicativo certo Então Ó você vê que esse aqui tem

esse esse ID se eu for em outro aqui vamos pegar qualquer outro jogo aqui esse aqui bang bang sei lá o quê Ah lá em cima ó com. mobile. Legends tá vendo Então esse é o nome de do id desse jogo então cada aplicativo precisa ter um ID é isso que a gente tá explicando aqui então voltando lá pro nosso comando a gente já deu um cordova Create greench agora a gente vai ter que passar qual que é esse ID que a gente vai querer no nosso Projeto eu então usando um padrão de site ao

contrário br.com curso pgc eu vou fazer assim geralmente o pessoal gosta de colocar a o esse padrão nome da empresa por exemplo ou o que você tá fazendo o segmento e depois o nome do aplicativo propriamente dito não tem uma regra específica tá pessoal mas você vai passar um ID assim completo então cova Create aqui primeiro parâmetro nome do projeto segundo parâmetro o ID que vai Identificar o seu aplicativo na loja e por último agora vai ser o nome do aplicativo propriamente dito e o nome do nosso aplicativo vai ser Green Tech dessa forma né

com o g maiúsculo e o t maiúsculo aqui no nome da pasta a gente faz tudo sempre minúsculo aqui no nome do aplicativo é exatamente como ele vai aparecer no celular então eu fiz o Green Tech com g maiúsculo e o t maiúsculo aqui também tem uma regra se você precisar fazer palavras compostas Você Vai precisar usar as aspas duplas então por exemplo vamos vamos supor que eu quisesse fazer Green Tech com a palavra Green e a palavra Tech separado eu teria que fazer aspas duplas Green Tech e fechar aspas duplas dessa forma porque daí

eu digo para minha linha de de comando que o que tá dentro dessa aspas duplas é como se fosse o nome do meu aplicativo uma palavra só se eu não usar essas aspas aspas duplas ele vai entender que Green é um comando e Tech é Outro comando entendeu Aí não vai dar certo então aqui a gente não precisa usar os traos nem nada como a gente fez lá se a gente fizer entre aspas duplas aí você pode usar caracteres especiais acento tudo normal nessa parte do nome você pode fazer desde que esteja dentro de aspas

duplas certo como eu vou ter um aplicativo com um nome que não tem nenhum acento caractere especial e é uma palavra só ó Green Tech dessa forma aqui eu posso colocar ela Sem aspas duplas que vai funcionar numa boa Ok então esse aqui é o comandinho de criação de um novo projeto aqui a gente tá fazendo isso demorado porque a gente tá explicando o que que é cada coisa mas na hora de você criar um novo projeto iso é extremamente rápido é cova Create o nome da pasta do projeto o nome do identificador e o

nome do aplicativo certo feito isso você vai dar um enter E aí ele vai dizer que o cova criou o novo projeto criando um novo projeto do Cova Certo quando ele volta aqui pra pasta mostrando n c2s que onde a pasta onde a gente tá quer dizer que ele já foi criado então a gente precisa acessar essa pasta que a gente criou que é a pasta greench Então a gente vai acessar dando um CD greench pra gente poder entrar nessa Nossa pasta e aí olha só a gente já está dentro da nossa pasta Green Tech

que legal então a gente já tá dentro da pasta do pro agora vamos abrir esse projeto aqui no Nosso editor de códigos para que a gente possa ver A Hierarquia de pastas e você vai fazer isso da seguinte forma você vai dar o comando code espaço Men r espaço ponto code espaço menos R menos R espaço ponto e Dá um enter Esse comando vai fazer com que abra esse projeto aqui no vscode olha só já vamos estar dentro da pasta greentech com todos os arquivos que a gente tem lá dentro legal muito interessante Então a

gente pode voltar lá no nosso checklist lá do Google Keep E a gente já vai ter marcado aqui ó criar um novo projeto beleza concluída essa etapa a gente também agora vai precisar conhecer a estrutura de pastas e arquivos Então vamos ver o que que vem dentro de um projeto do córdova certo então aqui a primeira coisa que vem é uma pasta chamada www vem aí um arquivo Git Ignore um arquivo config.xml e um package de som certo dentro dessa pasta www olha só o que tem aqui dentro uma estrutura de Frontin de frontend básica

um HTML e algumas pastas uma pasta CSS com arquivo CSS dentro uma pasta de imagem com o logo do cordova aqui dentro e uma pasta JavaScript com arquivo JavaScript aqui dentro só isso então repare que o que vai formar aqui para nós a parte visual que vai ser mostrado na tela do nosso aplicativo é uma estutura igual a gente tem desenvolvimento web comum de sites HTML CSS e JavaScript só isso dentro nesse nosso arquivo HTML que vem padrão Né o Inicial ali quando você inicia um novo projeto do cordova ele vai vir aqui tipo um

hello world né um aplicativo base Inicial que tem só dentro aqui escrito a paste cordova conectando ao dispositivo tal as conexões do Cord também com o nosso arquivo JavaScript aqui vem com esses comentários que a gente até pode apagar só para aqui ficar mais curtinho né Ele vem com algumas coisas aqui mas a gente depois nem vai estar usando esse aqui base inicial a Gente vai est usando um um outro template Starter mas só pra gente ver o que que vem dentro dele então arquivo index HTML comum certo aí a gente tem aqui um arquivo

Git Ignore que é para o caso a gente for subir isso aqui pro github depois para ele não mandar alguns ah algumas passas que vão ser geradas depois node mod mod plugin platforms que são usados só pelo cova mesmo né então isso aqui é para isso e a gente tem aqui um arquivo chamado config.xml que é um Arquivo também muito importante aqui dentro de projetos do cordova esse config.xml ele vai orquestrar ou configurar algumas questões fundamentais do nosso aplicativo por exemplo aqui ele vai mostrar para nós qual é o ID do nosso app aqui também

vai mostrar qual que é a versão do aplicativo que sempre começa na 1 do zero depois mais paraa frente se a gente for fazendo atualizações para colocar por exemplo lá na loja do Google Play a gente pode ir Trocando isso aqui para outras versões 1.1 1.2 1.1.2 2.1 2.0 sabe você pode ir fazendo isso aqui nessa parte de versionamento para você ter um certo controle aqui a gente tem algumas tags a tag name é o nome do seu aplicativo a tag description é uma pequena descrição do seu app Aqui tá dizendo que é um aplicativo

simples do Cord Então você pode colocar assim app feito no minicurso e aqui você pode colocar as informações do autor pode colocar o seu E-mail um site aí de referência você pode colocar o seu nome aqui né por exemplo Dimitri Teixeira aqui você pode colocar seu email @provides-annotated como se fosse uma espécie de meta tags daqui do seu aplicativo mas isso aqui não vai ser lido em nenhum lugar tá é só para você ter aqui alguns parâmetros já colocados com respeito a sua à sua aplicação né lá na loja depois quando você vai colocar você

vai usar recursos da própria loja para dar essa descrição E tal então isso aqui não é tão importante daqui para baixo né de conteúdo para baixo são alguns recursos do córdova por exemplo o sistema de arquivos que ele é compatível Qual que é o conteúdo da página inicial e tal tal isso aqui a gente não precisa mexer tá E conforme a gente adiciona plugins conforme a gente adiciona algumas coisas aqui no córdova esse config.xml ele vai como que crescendo né então depois com o tempo ele vai tendo mais coisas aqui Dentro Mas é só para

saber o que você tem aqui dentro do da pasta que vem inicial do Cova né o pack de Jon ele só vai mostrar para vocês aqui algumas coisas a respeito do aplicativo né qual ecossistema você tá usando que é do Cord e tal versão aquelas coisas todas que são o padrão do P pack de json então isso aqui é a estrutura de pastas e arquivos que vem com o projeto padrão basicamente só isso bem simples mesmo certo então a gente pode marcar lá no Nosso nosso checklist aqui que conhecemos a estrutura de pastas e arquivos

beleza Tá concluída essa etapa agora a gente precisa adicionar no nosso projeto a plataforma android para que a gente possa criar o aplicativo para Android e rodar isso no no noso eh celular então aqui a gente tem a estrutura como a gente viu no formato de sistema web né usando programação web a gente vai precisar converter o compilar fazer com que isso se transforme no Aplicativo E para isso a gente precisa adicionar nosso projeto do cordova a plataforma alvo que é o Android como que a gente faz isso você vai dar aí um control aspas

simples para abrir o terminal novamente ou aqui em cima em ver terminal e a gente vai dar o comandinho para adicionar a plataforma android no nosso projeto Então você vai fazer um cova platform add Android Esse é o comando cordova platform add Android comandinho para adicionar a plataforma Android então só prestar atenção que o platform n em inglês add e tal Cuidado para não aportuguesar na hora de dar o comando né às vezes alguns alunos falam professor não tá rodando porque ele coloca aqui plataforma assim ó em português né ou escreve platform assim platform né

at tá bugando tudo aqui escrevendo tudo errado mas entendeu né platform add Android OK aí você dá um enter e ele vai adicionar a plataforma android no projeto conforme Ele adicionar a plataforma android aqui no nosso projeto você vai reparar que vão ser adicionadas nas estruturas de pastas aqui na lateral do nosso projeto mais algumas coisas né que não tinha antes então ele coloca aqui uma pasta node modules onde vai ter as dependências aqui do Cova para gerar a nossa o nosso aplicativo uma pasta chamada platforms que é onde vai ter alguns recursos aqui do

Android funcionamento dele para poder fazer a Compilação e beleza é isso ele vai fazer isso de forma automática essas pastas a gente normalmente não mexe nelas tá pessoal o que a gente vai precisar trabalhar o que a gente vai precisar fazer de mudanças no nosso aplicativo vai ser sempre dentro da www Essa é a pasta mais importante essas outras aqui são mais pastas de configuração mas para você saber que quando você adiciona a plataforma android ele vai colocar isso aqui no teu projeto também ok então Mais Uma etapa concluída adicionamos a plataforma android no nosso

projeto agora vamos aprender como rodar esse projeto no nosso celular como que a gente faz para que esse aplicativo do cordova possa funcionar dentro do nosso celular então para fazer isso o que que você vai fazer primeira coisa de todas pessoal Você vai precisar ter aí o teu celular e também um cabo USB vai precisar conectar o seu celular com cabo USB no seu computador então eu vou Conectar o meu aqui e aí você também pode conectar o seu aí no seu computador tá deixa eu conectar aqui beleza deu já o barulhinho aqui de conectado

E aí uma vez conectado aqui dentro do seu conectado ali no seu celular no computador você vai ter que fazer uma configuração no seu celular para para habilitar o sistema de desenvolvedor opções de desenvolvedor que vai dar opção para você fazer uma depuração usb ou seja o seu celular Conseguir se comunicar aqui com o computador para que você através da linha de comando no computador possa gerar o aplicativo e ter a liberação para instalar ele dentro do celular e rodar dentro do celular para que você possa ir vendo o que você tá programando aqui diretamente

no celular como você faz isso eu vou compartilhar aqui a a tela do meu celular para vocês para vocês ver aonde vocês vão para poder ativar esse modo desenvolvedor beleza Pessoal então tô com o meu celular aqui espelhado né E você vai ter que entrar lá nas configurações do Android para cada celular cada Ah modelo do Android pode mudar um pouquinho isso aqui então vocês T que ter aquele discernimento de procurar dentro do seu celular onde vão estar essas coisas que eu vou mostrar pode ser que esteja num lugar um pouquinho diferente do seu porque

depende de vários fatores por exemplo eu tô num celular aqui Motorola talvez se Seja Samsung ou de outra marca então às vezes o layout é um pouquinho diferente também tô no Android 13 às vezes você tá no Android 12 ou numa outra versão E aí é um pouco diferente então você vai ter que ter o discernimento para encontrar as coisas por aí mas é basicamente sempre o mesmo nome ou bem parecido com que eu vou estar mostrando certo então você vai puxar lá em cima a tua barrinha de notificação né E vai encontrar lá uma

engrenagenzinha ou alguma coisa assim Para você entrar nas configurações do Android clicou você vai entrar dentro de configurações e aí você vai ter que rolar até embaixo do seu aplicativo é no lugar no lugar onde vai tá escrito assim por exemplo no meu tá escrito assim ó sobre o telefone no teu vai ter alguma coisa é software alguma coisa relacionado com isso talvez você entra aí dentro vou clicar aqui no sobre o telefone para entrar e aí aqui dentro vai ter informações sobre o telefone tal Modelo E aí você vai procurar onde vai tá escrito

assim número da versão geralmente tem isso aqui ó número da versão ou em alguns celular está escrito número de compilação ou uma coisa do tipo o que que você vai fazer você vai bater várias vezes o seu dedo em cima aqui de número da versão então se eu bater várias vezes aqui meu dedo ó no meu já tá aparecendo um balãozinho assim ó não é necessário você já é um desenvolvedor mas no seu caso Conforme você for batendo várias vezes o dedo aqui em cima vai aparecer assim modo desenvolvedor ativado uma coisa assim é tipo

um negócio escondido aqui no Android que você fazendo isso vai habilitar aí o modo desenvolvedor que tá sempre bloqueado por padrão certo então desbloqueou aqui o o modo desenvolvedor né aí nós vamos pra próxima etapa se aqui tiver dificuldade pessoal não tiver achando Onde fica o modo desenvolvedor fica a dica para você vai lá no Google e Coloca Ah meu aparelho é um Samsung Galaxy S não sei o que lá é Android 12 modo desenvolvedor aí você já vai achar um tutorial que vai te explicar bem facinho não precisa se apavorar e você fuçando aí

10 minutos você já acha isso daqui certo então depois que ativou o modo desenvolvedor no meu caso aqui do meu celular vai ficar dentro de sistema eu entro aqui dentro de sistema e aqui dentro de sistema tem aqui ó Opções do desenvolvedor alguns celulares fica até Que na página inicial das configurações lá embaixo já fica escrito assim opção de desenvolvedor isso também varia Mas procura aí que você vai achar então no meu caso dentro de sistema opções de desenvolvedor eu vou entrar aqui dentro aqui tá mostrando umas opções que não tem pra gente liga opções

assim do Android só para desenvolvimento mesmo mas o que interessa para nós que vai ter que tá ativado vai ser aqui embaixo ó esse item aqui ó depuração usb esse Depuração usb ele vai precisar estar ativado então verifica no seu caso se ele está ativado aí beleza uma vez estando ativado então a gente já vai poder voltar lá pro nosso computador pra gente fazer aí as devidas ah conexões com o nosso celular pra gente poder trab trabalhar aqui tá então o que que a gente vai fazer você vem aqui no terminal então meu celular tá

com o cabo USB conectado no computador Já ativei a depuração usb Você vai dar o seguinte comando aí adb devices que é pra gente fazer essa conexão ou verificar se o nosso celular tá conectado com o computador então dá um adb devices aí Dá um enter E aí ele vai mostrar para nós se tá conectado ou não só Aguarda aí um pouquinho então no meu caso já mostrou aqui que eu estou com o meu celular conectado olha só ele apareceu aqui um como se fosse aqui uma Hash né que na verdade significa que é o

meu celular e tá dizendo que ele tá device ele tá ativo tá funcionando ele tá rodando aqui no meu computador Às vezes aqui aparece unauthorized que não está autorizado deixa eu ver se até consigo fazer isso aqui para vocês verem vamos ver se se vai funcionar isso s no meu caso eu já esse meu celular como eu uso no dia a dia ele já tá autorizado deixa eu dar um adb devices Aqui é Ele já tá dando autorização mas no caso de vocês vai aparecer lá no celular de vocês escrito assim pedindo uma autorização você

autoriza que o computador Você Dá permissão pro computador se conectar via USB com o celular e aí você vai marcar lá dentro do teu celular vai marcar assim sempre permitir ou uma coisa assim vai ter essa esse balãozinho vai aparecer lá no seu celular então você Dá permissão a primeira vez depois as outras vezes ele Já conecta automaticamente certo então a gente D esse adb device só para ver se ele tá conectado Se aparecer aqui então a rest do seu celular e escrito device é que ele está conectado Então o meu já está conectado aqui

com o computador já tá funcionando agora então vamos dar o comando para compilar esse aplicativo no meu celular então o comando é cordova Run Android Olha só cordova rodar no Android cordova Run Android E aí a você vai dar Um enter E aí é só esperar ele vai fazer a compilação do aplicativo aqui no celular eu vou até ficar mostrando aqui para vocês o celular assim ó que daí vocês vão ver conforme ele vai compilar ele vai rodar aqui dentro do celular o resultado ó vamos só aguardar ele fazer a compilação tá lá ó rodou

E aí tá lá córdova beleza tá rodando a página inicial o Starter aqui do cód no nosso celular né alegria de viver você v o seu Aplicativo primeira vez já rodando aqui no seu celular muito legal mesmo essa build que a gente chama que é essa construção para ele colocar o aplicativo aqui dentro do celular ela demora de acordo com a capacidade da sua máquina né A primeira vez que a gente faz geralmente ela é um pouco mais demorada e as outras vezes já é um pouquinho mais rapidinha né No meu caso aqui deixa eu

ver levou 22 segundos para ele fazer essa build né Depende muito de cada Computador aqui né E aí já estamos aí com o aplicativo então rodando aqui dentro do celular só para mostrar para vocês aqui deixa eu ir na câmera aqui ó vai tá espelhado né mas tá a parte cordova devices Ready está pronto né então qualquer alteração que eu fizer por exemplo se eu vim aqui e colocar assim ó show de bola show de bola fiz a alteração aqui salvei eu dou o comando cordova Run Android ele vai fazer a compilação E aí vai

mostrar para para Nós o aplicativo ó você vê como é bem mais rápido ó já já foi ó já foi show de bola tá vendo Então o que eu fizer de alteração ali no código a gente compila e ele vai gerar o aplicativo que vai ficar aqui no nosso celular uma vez que eu fiz essa esse processo de cordova Run Android pessoal no nosso celular vocês vão ver que ele já vai gerar para nós o aplicativo né É deixa eu ver se eu consigo mostrar aqui para vocês ó ó vou mostrar aqui para vocês não

vai dar para Ver muito aqui na na tela mas deixa eu ver se vai dar para enxergar vamos ver se ele vai focar já vai tá aqui ó escrito Green Tech com o símbolo do ca então eu já Criei um aplicativo aqui ó que já está no meu celular uma vez que ele tá instalado se eu bato o dedo em cima ele já vai abrir diretamente também para eu olhar o aplicativo como ele ficou ele tá instalado já certo então com isso né com esse comandinho aí a gente aprendeu a próxima etapa que é Como

rodar o projeto no celular show de bola a gente viu ali o comandinho cordova Run Android para rodar ele no celular estando conectado via cabo USB aqui no nosso computador próxima etapa então é a apresentação visual do projeto tá curioso para ver como é que vai ser o projeto de aplicativo que a gente vai fazer aqui no minicurso Então essa curiosidade vai ser sanada agora pessoal Então olha só que legal como é que vai ficar o nosso nosso projetinho aqui ó Dessa forma aqui olha só que sensacional Que bonito né eu entrei no site chamado

dribble né que é um site onde você tem ali designers e tal e eu achei legal esse Do ronas It aqui um time de ui né fez esse projetinho aqui ó Muito bonito mesmo ó muito legal e essa a ideia do aplicativo que a gente vai est fazendo aqui junto com vocês olha só que sensacional que coisa mais lindo que a gente vai estar fazendo aqui nessas nossas aulas então ficou um design que Eu achei bem Clean bem assim bonito mesmo e moderno né uma coisa assim visualmente muito agradável e a gente vai fazer basicamente

essas três páginas aqui durante esse nosso minicurso Então a gente vai fazer a página inicial onde a gente vai fazer aqui um fakezin né de alguns itens então a greench vai ser o nome da nossa empresa que a gente vai est fazendo nós nós vamos ter uma página de detalhes onde a pessoa clica por exemplo em cima de um produto vai para Essa página de detalhes com mais informações com a opção de adicionar ao carrinho e nós vamos ter uma página de carrinho que vai tá lá em cima que conforme a gente for adicionando oo

carrinho vai ficar salvo esses dados do car eh dos produtos que a gente adicionou lá e ele vai mostrar para nós o valor total aí as questões de uma simulação de um carrinho de compras aqui para depois ir para um checkout certo então ficou muito legal quer dizer vai Ficar né Muito legal vai ficar sensacional esse nosso projetinho muito bonito vai ser baseado nesse nesse nosso projeto aqui nesse projetinho do dribble aí né então vou deixar inclusive o link eh na descrição do vídeo aí embaixo para vocês quiserem dar uma olhada aqui nessa imagenzinha eu

vou de qualquer forma salvar porque vai que depois o cara tira fora do ar isso aqui né pra gente só ter a base estética nós não vamos fazer 100% igual tá pessoal isso daqui Isso aqui Vai ser a nossa base Mas nós vamos fazer muito parecido com isso daqui nós vamos ter isso aqui como base pra gente fazer o nosso vai ficar bem legal certo gostou show de bola então deixa já o like aí rapaz se você tá empolgado aí de como é que a gente vai como é que vai ficar o nosso aplicativo deixa

o seu like aí que a gente fica muito contente com a ajuda de vocês deixando o like continuando Então já Vimos a apresentação visual do projeto vamos pra próxima etapa que é a Visão Geral do Framework Seven pra Construção dos apps pessoal você pode fazer como você viu aqui ó a gente usa um HTML CSS JavaScript normal né Você pode usar qualquer Framework de desenvolvimento frontend que você desejar utilizar você pode usar o Bootstrap você pode usar react você pode usar o que você quiser usar né t o Wind o que você quiser usar para

fazer a construção visual do seu aplicativo você pode aqui o Cordoba te D essa opção Essa liberdade de você fazer como você quiser aqui a parte estética e visual do seu aplicativo então um Framework que eu gosto de usar quando estou fazendo aplicativos para celular é o Framework Seven o Framework 7even o site é framework7.io ele é um Framework preparado com os componentes que são usados por aplicativos nativos do Android ele usa através de JavaScript html SS já é o o rapaz que construiu ele né que fez aqui esse Framework ele já Deixou ele com

a parte estética do sistema operacional Android Então olha aqui um exemplo aqui ó olha como é que fica no celular Que bonito né você vai ter todos os recursos é que seria num aplicativo nativo feito lá com Java só que isso aqui é feito com JavaScript HTML CSS Olha que bonito por exemplo um dialog né só para mostrar para vocês um dialog é aquele balãozinho de alerta Então olha só como como fica bonito o dialog aqui nesse sistema ó dialog de Confirmação prompt tá vendo ó para você digitar alguma coisa um preloader então ele já

tem os componentes prontos pra gente simplesmente utilizar já vem junto nessa biblioteca aqui né e ele tem um sistema que eu acho muito interessante que é o principal do que eu gosto de usar o Framework Seven que é de roteamento entre páginas aqui ó se a gente vi aqui na documentação do Framework S aqui em router viw pi lá embaixo em Custom page transition aqui Tem uma demonstração de transição entre páginas usando esse Framework Então em vez de você ter um site estático uma coisa feia com cara de site ali no aplicativo o Framework S

faz com que isso fique fluído de uma forma que parece que você está no aplicativo nativo Android então por exemplo assim ó aqui tem os exemplos de animações de transição de página olha só que legal Circle ó cover tá vendo cover V Dive ó que legal os efeitos Fade para Trocar paralax flip de girar olha só que sensacional push tá vendo Então todas essas transições entre páginas são suaves parece que você tá numa página só dentro do aplicativo e e navegando ali com os recursos de navegação então isso aqui é uma coisa que eu acho

muito legal do Framework S só para mencionar por cima algumas coisas aqui ó se você ver a lista de componentes e depois se você quiser dar uma olhada tirar um tempo aí Pausa o vídeo Entra lá no site do Framework 7.io né vem aqui em Docs clica aqui em Docs você vai cair nessa página e aí você vai poder ver todos os componentes que ele tem aqui ó é simplesmente sensacional por exemplo Esse é shit modal por exemplo é aquela folhinha que aparece embaixo por exemplo para detalhes né E sempre ele te dá exemplos aqui

ó só para você ver ó por exemplo ó essa folhinha que aparece aqui embaixo tá vendo olha que legal e ele já Tem um recurso também que eu acabei de esquecendo de falar que Framework 7 é sensacional que ele já converte para Android ou para iOS os componentes então por exemplo assim se você lhe reconhece que você tá rodando o seu app num iOS os componentes vão ficar visualmente esteticamente com a cara do iOS e se você tiver rodando no Android os componentes vão ficar visualmente com a cara do Android olha só que legal então

ó repara aqui ó tá vendo que tá tudo no Formatinho tipo do iOS se eu clico aqui para Android olha só é a mesma página só que no formato para Android com com com estilo da do Android legal E aí você tem os recursos aqui né esse aqui só um exemplo ó é muito legal de como ó com step ó para você puxar componentes prontos aqui é muito legal olha Framework ser vale a pena você tirar alguns minutinhos para você tá estudando esse Framework aqui principalmente falando de desenvolvimento de Aplicativos tá então eu acho legal

usar isso aqui nós vamos vamos estar usando no nosso projeto o Framework S Beleza então visão Geral do Framework S cheque vamos agora pra próxima etapa que é instalar um template Starter né eu já tenho para pros alunos do meu curso completo de criação de aplicativos alguns templates de aplicativos já prontos que é para facilitar a gente já ter tudo mais configurados já pronto para inicializar porque existem alguns Tipos de navegação que são padrão nos aplicativos aquele menu embaixo alguns que tem um menuzinho no topo que abre uma folhinha lateral né existem alguns modelos Starter

então a a gente tem lá no nosso curso disponibilizado alguns e aqui eu também vou est disponibilizando para vocês um exemplo de como usar um template Starter Starter que já é do Framework 7 né então lá no github a gente tem um repositório que se chama F7 template Então você entra lá github.com F7 traço template E aí o que nós vamos estar utilizando é o o tab certo barra Tab aqui a gente vai ter uma pasta www que é a pasta www que nós vamos substituir por essa www Inicial então repara a www é onde

vai tá ali o nosso projetinho propriamente dito Então é só eu trocar essa para o template que eu quero e pronto eu já tenho o aplicativo com aquele template base que eu desejo certo esse template Tab aqui é o que que quer dizer Tab é esse tipo de navegação Aqui ó mostrar aqui para vocês que tá aqui embaixo que são aquela Barrinha na parte de baixo com quando você clica ele navega entre as páginas por essas barrinhas aqui o nome dessa navegação é Tab certo eh Então esse aqui é o que hoje em dia é

mais utilizado tanto no Android como no iOS a maioria senão olha praticamente 100% dos apps usa esse sistema de navegação porque ele foi meio que padronizado antigamente no Android a gente tinha aquele menuzinho aqui em Cima que você clicava e abria tipo uma folhinha aqui lateral com as opções de item né ainda existe alguns aplicativos assim mas a maior parte usa esse sistema de Tab aqui certo então nós vamos estar usando isso daqui Então como que a gente faz para colocar esse Tab no nosso projeto existe duas formas de você fazer isso eu vou fazer

a forma que eu acho que é mais rápida e a forma que eu acho que é mais simples porque nem sempre o mais rápido ou mais simples Qual que é a Forma mais rápida é usando a linha de comando aqui mas para que você possa fazer isso funcionar você precisa ter o Git instalado na sua máquina e e já ter algum conhecimento de github né porque o que que a gente faz a gente vai pegar esse repositório essa pasta www aqui e com o único comando a gente vai pedir para colocar aqui dentro do nosso

projeto né Então esse é o jeito mais rápido eu vou mostrar para vocês talvez no seu não vai funcionar se você não Tiver o Git instalado se você nem saber que que é Git gth Hub Então esquece isso aqui não precisa fazer desse jeito eu vou mostrar o jeito mais fácil de você você fazer esse aqui é o mais rápido tá se você tiver o Git github entender tudo isso como funciona então o que que você vai fazer primeira coisa deleta tua www original vamos lá deletar clica no delete sumiu Beleza agora aqui embaixo na

linha de comando Você vai dar o seguinte comando Git espaço Clone E aí Você vai passar o caminho aqui dessa página aqui em cima ó g hub.com F7 template Tab vou copiar cont CRL C vi aqui cont contrl V para evitar fadiga e no final você só coloca assim ó ponto Git tá ponto Git dessa forma você tá dizendo que quer clonar lá do github essa pasta pro teu projeto você vai dar um enter aqui e aí olha só que legal ele já vai baixar e aqui já vai aparecer uma pastinha chamada Tab dentro dessa

pastinha Tab vai ter a pasta www Aí que Você faz você clica aqui segura o clique tô segurado O clique aqui no meu mouse dessa www eu vou arrastar ela aqui ó para baixo do pack de json pra raiz do meu projeto e solto aqui dessa forma a gente tirou ela de dentro da pasta Tab e deixou aqui na raiz do nosso projeto que é onde ela precisa est E aí a gente pode deletar essa pasta Tab aqui que vai est vazia pode deletar ela que a gente não precisa mais dela certo então dessa forma

nós já colocamos aqui deixa eu só Dar um sim para permitir ele excluir colocamos já um projeto Starter aqui com as coisas que a gente precisa já Prontinho aqui para nós bem rapidinho Essa é a forma mais rápida se você tiver o Git já instalado na sua máquina por linha de comando mas tem o jeito também mais simples né que é aquela coisa que você não tem o Git você não entende nada nunca fez o curso que vai est aí na no card aí em cima de github Git github aí em cima né que já

fica a dica para você Assistir então o que você faz você vai entrar lá na nesse link que eu também deixei na descrição aí do desse template Starter vai vir aqui nesse botão code aqui e aí você vai fazer o download do Zip dele ó download Zip clica aqui em download de Zip ele vai vir aqui para você salvar onde você vai querer eu vou dar aqui um salvar como aí você vai entrar dentro da pasta lá do seu projeto você vai lá em descolocar C apps o nome do seu projeto E aqui dentro você

vai salvar isso daqui salvou beleza Tá salvo lá voltando lá no nosso vs code né O que que eu vou fazer eu vou deletar essa nossa www que a gente pegou antes ali pelo via linha de comando Tá mas antes é aí imagina que seria a www original que veio junto com cordon E agora o que que você vai ter que fazer é extrair esse Tab main.zip aqui dentro do projeto só que dentro do vscode você não vai conseguir então você tem que entrar lá no teu explorador de Arquivos entra lá dentro da pasta do

teu projeto do Green Tech e aqui ó dentro dele aqui vai ter Tab Main Tá vendo você vai fazer o seguinte Clica com o botão direito extrair aqui aí aguarda ele fazer a extração aí ele vai fazer aqui uma pastinha chamada Tab m você entra aqui dá um contrl x ou ou clica com o botão direito recortar tá volta aqui na raiz do teu projeto e dá um cont CRL V só para você tirar essa pastinha de dentro da tabm e colocar aqui dentro e Aí pode apagar essa pasta tabm e aí beleza você também

tá com o template Starter colocado aqui também essa é uma outra forma de você baixar esse template Starter e ter ele aqui dentro do seu eh do seu projetinho aqui que você tá trabalhando certo então vamos agora marcar lá no nosso checklist e instalar o template Starter Ok seguinte então vamos só dar uma rodar esse template Starter aqui no nosso celular né para você ver ali como é que vai ficar Então Você vai vir aqui dar um corda você Já prendeu o comando né tá com o celular conectado caba USB no computador cordova Run Android

e Dá um enter só para você ver como é que é esse template Zinho Starter que ele vem aí inicialmente beleza ele já rodou aqui para mim eu vou Vou compartilhar minha tela aqui só para vocês verem Tá beleza então eu tô espelhando aqui o meu celular que vocês estão vendo ali na na tela do computador é o que eu tenho aqui no celular tá Usando um programinha aqui que espelha então esse aqui é o template Starter tá usando esse modelo de navegação Tab então ele tem aqui em cima um que a gente chama de

nave bar que é onde geralmente tem um título e tal Aqui é onde o conteúdo do aplicativo das coisas que a gente vai colocar aqui dentro e ele tem esse sistema de navegação aqui por links na barra de baixo Então olha só tô na página inicial eu clico no link dois aqui ó ele vai pra página dois e Aqui fica destacado clico no três e olha só que legal Como é o Framework 7 essa navegação Suave tá vendo Então parece aqui que eu tô navegando eh Entre Folhas aqui de uma forma bem suave mas cada

uma desses links são páginas HTML separadas olha só que legal então ele tem esse sistema de roteamento bem interessante Então esse aqui é o nosso template Starter né só para mostrar para vocês aqui como é que ele é e agora a gente vai ver sobre desenvolvimento no Navegador né porque assim o que que acontece pessoal imagina que cada alteração que eu for fazendo no meu layout e tal eu tivesse que vir aqui na minha linha de comando e dar um cordova Run Android rodar esperar ele compilar aí vai pro celular aí você vê como é

que ficou aí você muda mais uma coisinha você tem que de novo cordova Run Android gerar compilação e isso entendeu isso ia ser muito chato então tem um jeito de você fazer essa alterações Principalmente quando você tá trabalhando com a parte de frontend da sua aplicação montando a parte visual dele de forma de tempo real para você fazer isso em tempo real que é usando o navegador mesmo o Live server porque o que rodar no Live server no navegador é como vai rodar lá dentro do celular também tá não não roda algumas coisas do córdova

algumas coisas assim de plugins que a gente não vai chegar a ver aqui nesse minicurso como por exemplo acesso A câmera GPS e tal essas coisas precisa estar rodando dentro do Android mas pra parte visual a criação do frontend ele roda tudo numa boa e fica bem mais prático de você conseguir estar trabalhando dessa forma aí então como é que você faz então para ir rodando Isso no navegador para ficar mais fácil a parte de desenvolvimento você vai fazer o seguinte você vai entrar dentro daqui do da tua pasta www você vai até enrolei a

língua tô parecendo aquela mulher que Tinha um mem antigamente www ai ai você entra aqui e você você vai procurar aqui dentro da pasta JS você vai achar um arquivo Esse é o arquivo principal aqui de roteamento do nosso aplicativo de gerenciamento de rotas e tal se chama Roots você entra aí então dentro da pasta JavaScript nesse arquivo Roots Aqui é onde a gente orquestra as funções do Framework sving certo aqui dentro se você for rolando aqui para baixo Eh você vai encontrar aqui ó na página na linha 82 escrito assim ó para testes direto

no no navegador E aí tem uma linha comentada aqui tá vendo isso daqui é uma coisa que a gente já deixou preparado para quando você quiser fazer teste no navegador você descom essa linha aqui e aí vai funcionar tudo no navegador como seria lá no celular se você quer testar no celular para que tudo funcione você precisa comentar essa linha aqui entendido vai rodar no Navegador desca essa linha vai rodar no celular comenta essa linha Beleza então a gente vai descomentar aqui dá um salvar E aí a gente entra lá na nossa index e vem

aqui embaixo e usa o Live server que que é esse Live server ele é uma extensão do vs code então você vem aqui em extensões vê se você tem instalado aqui a extensão chamada Live server que faz rodar em tempo real que você tá alterando né no seu aqui no seu código eh já direto aqui no navegador Certo isso daqui eu mostrei lá no vídeo que eu mostro sobre como instalar o vs code as configurações da minha máquina tudo tá tá lá então eu vou pegar e entrar aqui na na minha index P HTML e

clico aqui ó gove para ele ligar o Live server vamos ver ó vai abrir aqui vamos esperar beleza aí que que você faz aqui abriu numa outra janela aqui né naquelas que eu tava nas minhas Abas eu vou tirar ela daqui ó e aí você coloca ela bem pequenininha Como se fosse o tamanho de Celular assim ó deixa aqui no canto vai ali no teu vs code restaura ele aqui ó deixa ele menorzinho aqui ó dessa forma aqui e aí pronto pessoal deixa eu até colocar a minha cara aqui pro outro lado eu não me

lembro qual que é o tem um comando aqui que ah que inverte beleza vou colocar minha cara aqui desse lado aqui para não atrapalhar então o que eu tenho aqui ó é o o meu aplicativo certo e aqui eu tenho o vs code para mim tá Trabalhando Olha só o que se eu fizer de alteração aqui ó dentro do meu aplicativo da do meu código melhor dizendo Já tico téc já tá fritando né que que eu trocar aqui dentro do meu código já vai ser refletido aqui em tempo real por exemplo tá escrito assim ó

template Tab lá em cima se eu colocar assim ó trocar colocar Green Tech e dará um salvar control S Olha lá já salvou em tempo real lá aqui vou colocar um p Loren aqui para colocar um Loren Y né ó Um parágrafo qualquer ó tá vendo Então o que eu fizer em tempo real aqui já vai aparecer aqui pra gente fazer isso em nível de desenvolvimento é muito mais rápido você tá vendo tudo direto aqui na tela vai construindo vai fazendo o que você quer aí você quer ver depois lá no final como é que

tá rodando o celular no Android você pode vir aqui e compilar dar um Cord Val Run Android e ver como é que ficou lá certo você também tem como ver esse resultado aqui no teu celular Também diretamente no teu celular mas sem compilar vem em tempo real no celular sem compilar como você faz isso você vai na verdade rodar o Live server lá no teu celular então o que que você faz você vem aqui no terminal e coloca assim ó IP config digita IP config Dá um enter ele vai dar as conexões de rede da

sua máquina você vai procurar ali Qual que é o IP dessa máquina que tá rodando o Live server no meu caso aqui ó e deixa eu ver aqui onde é que tá deixa eu Aumentar isso aqui para ficar mais fácil dá para maximizar aqui pra gente ver aqui vai ter as a conexão IP tal wi-fi aqui meu computador tá conectado via wi-fi Então esse aqui ó é o meu IP do meu computador 192168.0 p235 certo então a minha máquina que tá rodando Live server que é o meu computador ele tem esse IP aqui aí que

que eu faço eu vou lá no meu celular deixa eu ver se eu tôque aqui com o Espelhamento de tela aberto vou abrir ele aqui então tô espelhando aqui meu celular você entra dentro do navegador do seu celular por exemplo Ed o Chrome Entra lá e aí você vai digitar o seguinte aqui na barra de endereço você vai digitar assim ó deixa eu só trocar o teclado aqui pro teclado do celular e aí você vai digitar assim ó http do P bar Barra E aí você vai colocar o IP que você tem aqui da do

seu computador que no meu caso é 192168.0 p235 certo então você vai colocar lá aqui já até apareceu para mim ó já vou até deixar assim para evitar a fadiga ó já apareceu porque eu sempre uso você vai ter que colocar o IP da do seu computador depois você coloca dois pontos e aí você tem que colocar a porta de acesso que vai estar aqui ó no teu computador aqui ó marcando qualquer porta de acesso no meu caso é 5500 certo depois você põe barra Www barra certo você coloca isso aí então o IP da

sua máquina que tá rodando Live server a porta que você vai ter que dar uma olhada aqui para ver qual que é não necessariamente vai ser igual a minha que é 5500 depois você põe barra www bar quando você dá um ir aí ó Dá um enter olha só o que que vai acontecer tarã você vai ter aqui no seu celular também rodando o Live server então agora ó se eu mudar aqui alguma coisa Ah deixa eu voltar lá no meu código aqui vamos Ver se vocês vão conseguir enxergar deixa eu deixar esse aqui mais

pro lado aqui ó vou colocar aqui ó esse aqui é o meu celular tá isso aqui tá espelhando o meu celular que tá aqui ó tá vendo vou até colocar ele mais perto aqui vamos ver se eu consigo fazer vocês verem aqui mais fácil ó Green Tech ali tá vendo tá escrito eu vou trocar aqui e vou colocar ponto de exclamação aqui ó ponto de exclamação Vou salvar control S salvei Olha lá já apareceu no meu celular em Tempo real e aqui ó já atualizou para nós isso daqui atualizou na minha máquina tanto no computador

rodando Live server como também no meu celular certo Por que que isso aqui é legal a nível de desenvolvimento você pode ficar com o seu celular aí apoiado perto do seu computador para você ver como é que tá funcionando e você pode deixar essa outra tela aqui por exemplo com o tamanho de computador então ao mesmo tempo você pode ir desenvolvendo o modo Computador e o modo celular usando técnicas de media caries por exemplo ou se você tiver um outro monitor Você joga esse daqui ó que é o o que tá no navegador Joga lá

numa outra tela para você ir vendo como é que fica em tamanhos grandes ou tamanhos de tablet ou uma coisa assim porque você pode reajustar aqui o tamanho do navegador como você quiser ó ah vamos supor com tablet tá ó mais ou menos um quadrado assim você pode jogar lá e ao mesmo Tempo ir vendo no teu celular pequeninho como é que vai ficando entendeu como fica mais fácil de você desenvolver dessa forma então de uma vez só você vai codificando já para celular para tablet para computador tudo vendo isso em tempo real aqui com

Live server então é um recurso muito legal terminou fez tudo que você precisava Tá show de bola compila vai lá no teu terminal né E vai dar lá o cordova Run Android para rodar e instalar ele no teu Celular show de bola né pessoal muito legal então beleza Vamos colocar aqui então lá na nossa listinha Opa Deixa eu voltar aqui deixa eu arrancar esse aqui fora deixar ele separado aqui deixar ele aqui no cantinho né vamos voltar L na nossa listinha do Google Keep então desenvolvimento no navegador a gente viu como que a gente faz

usando o Live server agora por último e é o último item que a gente vai ver nessa aula é a manipulação de rotas né que que nem a Gente tá vendo aqui ó voltar aqui ó e a gente tem aqui esses links né pra gente navegar entre páginas e tal essas rotas pessoal como que elas funcionam deixa eu mostrar aqui para vocês no Framework Seven você vai entrar dentro daquele arquivo Roots Deixa eu só ajeitar aqui que ficou esquisito isso aqui aí beleza você vai entrar dentro aqui do arquivo Roots e o arquivo Roots é

onde a gente cria as nossas rotas tá as rotas elas funcionam da seguinte forma ó a gente Vai ter aqui Roots aqui vai ter um Array e dentro desse Array a gente vai ter objetos de rotas dentro desses objetos a gente vai ter as rotas das páginas que a gente vai ter dentro do nosso projeto então ele ele funciona assim ele tem um pet o pet é como se fosse um apelido que a gente dá para aquela página por exemplo essa aqui se chama index fica entre duas bas aqui é aurl apontando Qual que é

o arquivo aqui HTML que é o arquivo que tá Relacionado a esse Pat esse apelido que a gente deu aqui tem umas questões de animação e tal isso aqui na verdade não tá funcionando porque esse animate aqui agora um parâmetro diferente no Framework 7 mais atual então isso aqui ele tá fazendo animação sim embora tá animate false Aqui ó pode reparar que ele tá fazendo uma animaçãozinha então ISO aqui depois a gente ajeita tá aqui a gente tem alguns eventos do que acontece quando a Página antes da página iniciar depois que a página inicializa depois

que a página for removida tem um monte de eventos aqui que você pode fazer ó fazer algo antes da página ser exibida fazer algo depois da página ser exibida fazer algo quando a página foi inicializada fazer algo quando a página for removida do Dom Então você tem um controle de disparos de eventos eh que você pode colocar aqui né funções e coisas assim bem legais então aqui a Gente tem todas as rotas por exemplo a gente tem da página index depois a gente tem aqui da página 2 que é esse segundo link aqui a gente

tem uma outra que é da pág que é esse terceiro link aqui quando a gente quer criar uma nova página O que que a gente faz a gente copia um objeto desse aqui como esse aqui da página 3 copio CTR C vem aqui embaixo pulo uma linha dou um control V Acabei de criar mais uma rota e aqui eu troco o nome por exemplo vou colocar assim ó Link 4 a URL É Link 4 salvei então Acabei de criar mais uma rota agora o que que eu preciso fazer eu preciso criar mais um arquivo HTML

Então vou copiar esse link 3 cont control ctrl v vou renomear ele aqui ó dei um F2 para renomear ele como Link 4 essa página aqui dentro do HTML dele eu vou mudar o nome da página para Link 4 porque aqui tá seguindo o link 3 aqui eu vou colocar aqui o título também como Link 4 só pra gente alterar pra gente saber funcionou Certo conteúdo do Link 4 então eu tenho a página quro Link 4 e a rota 4 criada agora eu só preciso adicionar mais um botão aqui nesse menu que eu tenho aqui

embaixo porque eh não tá aparecendo ainda então o que que você vai fazer você vai entrar dentro da index que é como se fosse a nossa página mãe aqui dentro da index você vai achar esse menu ó ele vai tá aqui em cima ó que se chama tob ó Tab bar tá vendo É onde tem esse menuzinho aqui então eu vou criar mais Um link link cont contrl C dá aqui um cont contrl V aqui eu vou colocar Link 4 aqui Link 4 salvar Olha lá já apareceu mais um linkzinho aqui eu só vou mudar

o ícone para que a gente tenha uma coisa diferente eu vou colocar aqui o magnify que é uma lupinha ó lá e acabei de criar mais uma página mais uma rota então eu criei a rota aqui né Framework ser saber que eu tenho uma nova rota criei uma nova página e também coloquei no menu Porque precisava mais essa rota aqui embaixo agora quando eu clico aqui olha só o que que vai acontecer fui pro Link 4 essa nova rota então tudo que eu precisar alterar eu de mudanças que eu quero fazer nessa página eu venho

aqui no meu link 4. HTML que é essa página né que a gente deu o nome e aqui eu posso fazer mudança qualquer que eu quiser e aí ó lá ele vai reiniciar o projeto volta sempre na index quando reinicia isso é normal tá você clica aqui no link 4 ó lá mudança qualquer e aqui vai est já para nós essa página aqui pra gente tá trabalhando certo então só para mostrar para vocês um pouco sobre roteamento de páginas e como que a gente cria novas páginas aqui dentro do nosso projeto então com isso a

gente finalizou aqui o nosso checklist dessa nossa aula né pessoal vai ficar sensacional esse projeto ó eu tô muito animado vai ficar muito bonito mesmo e na próxima aula nós vamos estar fazendo isso daqui na PR Junto com vocês do zero absoluto usando esse template Starter e vamos fazer esse aplicativo do greench fica pronto na próxima aula E aí animado pra gente fazer o nosso aplicativo do zero absoluto um aplicativo Super bonito super legal aí de e-commerce eletrônico eu tô muito empolgada Tô animado aqui para mostrar para vocês o resultado como é que vai ficar

o nosso projeto o que nós vamos estar fazendo nessa aula e vai ser muito Legal a gente colocar a mão na massa junto e aprender muitos detalhes de criação de aplicativos nessa aula tenho certeza que você vai aprender muito que você vai gostar e vai ser muito legal a sensação que você vai ter se você acompanhar comigo essa aula fazendo junto de você conseguir criar um aplicativo de alto nível e ver isso rodando na sua mão legal então eu vou mostrar aqui para vocês né aula passada a gente já viu como é que vai ficar

o Layout do nosso aplicativo nós vamos estar trabalhando principalmente com três telas aqui que a gente vai est usando né Trabalhando deixa eu colocar minha cara para cá por enquanto vai ser uma tela inicial onde a gente vai ter aqui o carregamento dos itens né a gente vai ter aqui uma sistema de navegação de Tab um carrinho de compras quando clicar em cima do item a gente vai para uma tela de detalhes onde vai aparecer aqui a imagem a os dados que a gente vai Alimentar via eh banco de dados backend né A gente já

vai ter essas informações a gente vai fazer aqui uma simulação de um backend eh enviando esses dados a gente recebendo para alimentar o sistema E aí a gente tem o sistema de carrinho né quando a pessoa clica no botão adicionar o carrinho um carrinho de compras aqui onde vai ter que ter o sistema de somatória né de aumentar e diminuir o nível de o a quantidade de itens poder esvaziar o carrinho né tudo Funcionando bonitinho conforme a quantidade de itens que a gente tem aqui aparecer lá no balãozinho na tela inicial né do da nossa

sacolinha a a quantidade de itens Então é isso que a gente vai est fazendo basicamente essas três telas e todo o funcionamento disso certo pessoal aqui também mostrar para vocês ó como é que ficou no aplicativo agora ó É esse aqui então é o aplicativo que tá realmente rodando aqui no meu celular e mostrar para vocês aqui ó se Vocês der uma olhadinha aqui na na tela aqui ó ficou muito bonito mas muito bonito no celular mesmo tá pessoal ficou lindaço esse aplicativo aqui como ele aumenta um pouco eh às vezes parece até meio estourado

um pouco mas olhando no celular a qualidade de pixels assim bem HD mesmo bem 4K assim sabe do da da qualidade visual ficou bem bem legal então basicamente aqui a gente tem a nossa tela inicial do nosso projeto né Eh além daquela imagenzinha que a gente Tinha aqui dessa desse modelo eu fiz outras imagens e fiz um sistema de swiper aqui né que é para ele fazer essa transição a gente tem uma certa animação um propagand como se o aplicativo fosse colocar aqui certo e ele tem um sistema de carregamento que trabalha com o skeleton

eu vou mostrar para vocês aqui eu vou navegar para uma outra e página e vou voltar aqui na home aí você observa aqui ó o carregamento Ó tipo uma marquinha da água ele fica fazendo o Carregamento né isso a gente chama de skeleton e depois ele mostra para nós os produtos Depois que ele já pegou esses dados né a gente fez aqui esse sistema de carregamento que é um sistema muito bonito muito moderno aí aí nos aplicativos para indicar pro usuário que está tendo um carregamento de alguma coisa que vai aparecer naquele lugar né aí

a gente tem o sistema de categorias aqui que também é um swiper né onde a pessoa pode aqui puxar para ver mais Categorias esse esse sistema de filtragem a gente não vai fazer tá pessoal é só mais visual mesmo pra gente ter aqui eh as categorias assim mas mostrar para vocês que ele funciona assim também a pessoa pode arrastar para ver mais categorias pro lado né E aí funciona basicamente assim tem Unos itens eu clico no item ele vai abrir já o item pra gente olhar os detalhes né Eh é até interessante que ah quando

você clica ele já abre instantâneo o item né A gente vai ver um sistema aqui de carregamento que uma vez que puxou os dados do nosso backend a gente vai salvar esses dados na memória interna do celular e aí a gente tem isso entre aspas offline né a gente tem essa base de dados no nosso aparelho aí dessa forma quando a gente clica a gente tem esse ser feito de tempo real alimentando aqui a aplicação com os dados bem legal mesmo né então a gente vai ter todos esses dados que vai puxar do nosso Backend

e alimentar aqui né então na página de detalhes tem aqui a imagem tem aqui alguns dados umas tabelinhas com algumas informações que estão vendo do backend inclusive cada item ele tem uma tabela dessas de características e detalhes que vem lá do nosso backend que alimenta né então todos eles vão ter essa mesma característica Ó você vai ver aqui vai ter uma tabelinha falando sobre os itens o que que eles têm e tal né E aí você vai ter a opção aqui de Adicionar no carrinho quando você adicionando no carrinho ele vai dizer que o produto

tal foi adicionado lá no carrinho e aí se a gente voltar lá nossa sacolinha já vai est mostrando realmente quantos itens a gente tem né vou colocar mais um aqui ó olha tô tô ricaço hein MacBook Pro 2023 e um Iphone 15 pro Max tô rico vou adicionar aqui então tô com os dois produtos aqui entrar lá dentro do carrinho aí lá no carrinho olha só que Que bonito né Que legal esse sistema De carrinho aqui né com os itens aqui você tem as opções de aumentar ou diminuir a quantidade de itens aqui vai dar

o subtotal né aqui a gente colocou um frete de migué aqui né fake de 10 pil só para dizer que tem alguma coisa de frete para ficar parecido aqui com a parte visual aqui ó que tinha né Sistema de taxa de entrega e tal então a gente fez alguma coisa um pouco parecida aqui nesse lado e E aí esses itens Conforme você Você adiciona o subtotal ele vai Acompanhando então é a soma real né então Ó vou aumentar aqui ó você vai observar que lá o subtotal também vai aumentando né conforme eu vou diminuindo ele

também vai diminuindo lá embaixo inclusive se eu baixar de um eh ele vai dar opção para mim para se eu quero remover o item né então eu clico lá que eu quero tirar ele vai ó gostaria de remover o item eu não vou remover agora ou pode vir aqui no x né do produto clicar ele vai falar Quer Remover esse item do carrinho também vai poder remover e lá em cima nós vamos ter uma opção né nos três pontinhos esvaziar carrinho é onde você clica aqui para esvaziar carrinho aí ele vai perguntar quer esvaziar vou

dar um sim por exemplo ó nada por enquanto é isso aqui que mostra quando o carrinho tá vazio né uma animaçãozinha bonitinha e aí lá no nosso aplicativo Nossa sacolinha não mostra nada mais tá zerado o nosso carrinho certo então é isso que nós vamos estar Fazendo nessa aula do zero absoluto junto com vocês eu tô bem animado tô bem empolado vou tentar fazer o mais rápido possível mas como vocês sabem aqui a gente sempre ensina com bastante didática Então essa aula provavelmente vai ficar bem longuinha né mas vai valer a pena você tá aprendendo

junto Porque é nesses projetos práticos que a gente realmente aprende a fazer né então vamos lá então eu abri aqui o meu vs code do zero Vamos dar um contol aspas simples Pra gente começar a poder dar os comandos aqui de terminal e eu vou fazer esse projeto novamente do zero absoluto tá pessoal junto com vocês da estaca zero na aula anterior do minicurso a gente já criou o projeto eu mostrei para vocês os comandos e tal mas tinha mais o objetivo de você aprender entender como funciona as coisas então aqui como a gente tá

fazendo o projetinho do zero eu vou começar dos Comandos do zero absoluto Ok então para começar nós vamos Dar o comando aqui eh CD C2 bar Apps pra gente entrar na pasta do nossos dos nossos projetos certo então entrei lá onde a gente cria os projetos agora eu vou dar um córdova Create aí o nome do Projeto vai ser greench o identificador vai ser br.com pcso pgc e o nome do do projetinho eu vou chamar aqui no meu caso de greentech curso tá porque só para saber porque eu tenho várias versões de Green Tech ali

No meu celular então só para saber que é aqui a versão do curso que eu tô fazendo no de vocês vocês podem deixar só Green Tech assim não precisa nem das aspas duplas só só pode deixar assim né E já vai funcionar beleza só eu vou colocar no meu aqui greench curso só para mim saber Vamos dar um enter para criar o projeto do Cova criado Vamos acessar agora a pasta CD greench pra gente entrar dentro dela beleza estamos dentro dela CLS para Limpar essa bagunça que eu tenho um toque aqui com terminal com muita

coisa E aí vamos dar o comando para adicionar a plataforma android Então vou dar um cova platform add Android pra gente adicionar a plataforma android dentro do nosso projeto certo e a gente poder depois realizar compilação fazer os testes no celular quando a gente precisar a gente vai já ter a plataforma adicionada Vamos abrir agora então no vs code esse projetinho então code espaço Men r espaço ponto code espaço Men r espaço menos ponto e aí ele vai abrir eh menus ponto não ponto né tô Tec aqui ó tá tá milhão aqui é code espaço

menos R espaço ponta e abre aqui no vs codde beleza aí nós vamos deletar aqui a pasta inicial que a gente tem www que é o Starter né o hello world aqui do do Cord e vamos adicionar aqui o template Starter né que é aquele do navegação do tipo Tab a gente viu isso na aula anterior se você não assistiu a aula Três assiste lá que a gente mostrou isso aí então eu vou dar aqui um Git Clone Git Clone https 2 pgub pcom barfs template bar t. Git E aí eu vou fazer a clonagem

lá daquele repositório lembrando se você não tem o Git não sabe trabalhar com Git faz o que a gente fez na aula anterior na aula três eu mostrei um método manual de você conseguir pegar essa pastinha só você ir lá e assistir Certo aqui então Baixada a pasta Tab vamos pegar a www puxar aqui paraa raiz do nosso projeto apagar essa pasta Tab aqui porque a gente não precisa mais dela excluir permanentemente e beleza já temos aqui o nosso projeto Starter iniciado vamos rodar ele com Live server então para isso eu vou abrir aqui a

minha pasta JS Roots vou lá na linha 82 descomentar aqui o Main viw pra gente poder rodar isso usando o Live server aqui do vs code e vamos abrir a nossa Index.html.gz no terminal não no navegador E aí ele já vai tá aqui na lateral tudo que a gente preciser fazer de alteração né vou colocar minha cara aqui no canto já vai acontecendo em tempo real aqui para nós certo então vamos dar uma olhada lá no nosso projeto que que a gente vai ter que fazer então a gente tem aqui ó o projetinho na nossa

tela inicial ele é mais predominantemente tudo branco até a parte de baixo aqui do nosso Tab também É branco com uns iconz mais arredondados e tal né E e aí depois tem alguns tons de verde e tal né que fazem todo o chance aqui do nosso projeto né então a gente tem uma paleta de cores aqui nesse aplicativo que basicamente são quatro cores tá pessoal se vocês repararem aqui esse é um padrão interessante para designs de aplicativos Clean tá você não tem muitas cores é você ter uma paleta de no máximo quatro cores que você

vai tá trabalhando E geralmente o branco o predominante Então a gente tem aqui o branco a gente vai ter o verde que tem tanto nos botões né aqui na nos itens de navegação nos detalhes você repare que os detalhes eles são em verde e a gente vai ter também um cinza né um gelo aqui ó um tom de gelo que fica aqui no fundinho dos dos itens também aqui nos detalhes tá vendo aqui ó um tom tipo gelo e nós temos o preto daí propriamente dito que na verdade não chega a ser bem um preto

Preto mesmo ele é um grafite é um um cinza escuro né a gente vai est usando aqui na nossa paleta de cores então para isso vamos trabalhar com CSS bastante pra a gente fazer as modificações que a gente precisa na index P HTML você vai encontrar lá ó a referência de um CSS personalizado CSS personalizado pcss certo a gente vai renomear esse personalizado que é um padrãozinho que já vem ali do do do template Starter para Index.css eu vou trocar o nome dele dou um F2 aqui renomear index.css só para renomear para esse nome pra

gente saber que esse CSS que nós vamos estar aqui trabalhando vai se referir a tudo que a gente for fazer na nossa tela inicial do nosso projeto na nossa index.html.gz e todos os outros as outras páginas que a gente for fazer um CSS personalizado aqui na index.html.gz início de projeto aqui quando a gente Vai est trabalhando é você especificar a paleta de cores aqui na parte de cima do nosso arquivo CSS então você pode fazer um sistema de variáveis que a gente tem no CSS e para facilitar toda vez que a gente precisar trabalhar com

uma cor ou um padrão de cor a gente usar essa variável Então você faz assim dois pontos root abre as chaves e fecha as chaves e aqui a gente vai dar nomes de variáveis Então a primeira que eu vou chamar Vai Ser branco então você faz traço traço dois dois traços branco e aí você coloca o valor que vai ter essa variável então no caso o branco vai ser #ffff 4 vezes que é o branco puro aí a gente vai ter o gelo o gelo vai ser a cor aqui ó # F1 F1 F1 que

é quase um branco um pouquinho mais escurinho ele é tipo um cinzinha nós vamos ter o verde então o verde ele vai ser é 19c 463 a cor dele e a gente vai ter o preto que vai ser um # [Música] 2a2.com.br é a bebas new então você pode entrar lá no Google Fontes Entra lá no site do Google fontes e aqui você pode procurar ó na fonte aqui ó procurar você põe assim bebas aí já vai aparecer ó bebas New é o nome da fonte que nós vamos estar trabalhando você clica nela aqui e

aí você pode estar adicionando ela aqui no seu pacote de fontes no meu já tenho um monte aqui colocado vou remover tudo de vocês vai est ass Removido né não vai ter nenhuma fonte adicionada e você clica aqui ó selecionar essa fonte aí vai vir nessa sacolinha aqui em cima aí você faz o seguinte você seleciona aqui o Import e vai copiar só essa parte da importação sem os Style aqui tá copia esse Import vai lá no teu CSS logo abaixo aqui do Rot eu vou colocar essa importação dessa fonte e vou dizer aqui ó

que o bar quer dizer todo o corpo da nossa aplicação toda a nossa aplicação a gente vai Querer que tem essa fonte então você pode vir aqui pegar o fonte Family dela copiar e colar aqui para dizer que toda a nossa aplicação vai usar esse sistema de fontes aqui beleza então você já vê que modificou aqui a fonte já tá diferente já estamos usando a tal da bebas New tá que é uma fonte que vai ficar bem joia aqui na parte visual então a gente vê que aqui embaixo ó pessoal esse nosso Tab bar aqui

ó onde a gente tem o sistema de navegação ele é Branco e tem umas Fontes Ah uns ícones mais arredondados tá o sistema de ícones que já vem no Starter da gente aqui do Framework Seven eh que nem esses ícones que tem aqui ele é do chamado material design icons certo se a gente entrar nesse site do material design icons aqui ó eh material design icons né na verdade agora Eles mudaram de nome agora se chama pictogrammes que já tá colocado nesse padrão ali só que esses ícones eles não São muito parecidos com os ícones

aqui do que mostra no nosso template de base aqui tá vendo que eles são mais arredondados por exemplo repara o coração como ele é mais arredondador aqui por coração o ícone de coração se eu colocar Heart aqui ó você vai ver que os ícones que tem de coração eles não são tão puxados para aquele padrão ali ó ó se você reparar ó ele é um pouquinho Esse aqui é mais gordinho tá vendo não é muito parecido com esse Padrão de fontes aqui então eu já pesquisei Antes quando eu fui fazer o projeto pra gente já

teré a aula preparada e tem uma biblioteca de ícones que é mais parecida com o que tá nesse padrãozinho aqui do template de base que a gente tem que é uma biblioteca que se chama remix Então você entra num site chamado remix ion.com e aqui também é uma bibliote em open source de ícones certo se você procurar aqui por Heart Heart né que é coração em inglês aí você Vai ver olha só o ícone aqui do coração deles é mais arredondador design icons e aqui o o padrão que a gente vai querer então fica melhor

esse sistema do dos ícones do tipo remix Então vamos instalar ele no nosso projeto como é que você faz vai lá no Google e digita assim remix icons CDN tá pra gente poder achar ele na CDN E aí você vai entrar nesse link aqui que é do JS deliver né você entra aqui dentro você vai entrar na pastinha desse desse Projeto aqui ah você pode clicar aqui brows CDN aqui ó esse linkzinho E aí você vai ter a pastinha onde vai ter ali as fontes tudo que a gente precisa né então você pode entrar dentro

dessa pasta Fontes aqui ó e aqui nós vamos baixar primeiro vamos baixar o arquivo CSS então você pode clicar aqui no arquivo CSS ele vai abrir assim você vai dar um CRL s para salvar esse arquivo então dá um cont CRL S aí entra dentro da pasta do teu projeto Dentro de www CSS aqui a gente pode criar uma uma pasta aqui chamada remix icon assim ó tudo junto e aqui dentro da pasta remix icon Vamos colocar remix icon.css salvamos vamos voltar lá na pasta onde tinha as outras coisas e aqui a gente pode baixar

os padrões de fontes então a gente pode baixar aqui esse remix icon.eot vamos salvar lá dentro também salvar como podemos deixar aqui só não precisa ter o número um só deixa assim ó Remixar com pon eot vamos baixar aqui esse Jon clica aqui dá um salvar lá para salvar lá dentro também salvou volta vamos pegar esse les não precisa esse svg também não aqui essas Fontes aqui embaixo tff vamos salvar lá salvei porque dessa forma a gente vai ter esses ícones offline tá pessoal a gente não vai precisar ter internet pra gente usar eles então

vou baixar todas essas Fontes aqui dentro dessa pasta beleza baixado Então todas essas fontez a gente vai referenciar agora aqui no nosso projeto Esse sistema de fontes Então a gente vai dar um control c control V aqui pra gente colocar na nossa index HTML ícones do remix icon colocar comentário aqui e aqui a gente vai apontar para nosso CSS que vai est dentro da pasta CSS a pasta remix icon e dentro dela a gente aponta remix pcss Então dessa forma a gente tem o sistema de ícones aqui agora no nosso Projeto a gente pode dar

uma testada aqui para ver se vai funcionar né então vamos dar uma olhadinha aqui ó Quais que são os ícones que a gente vai precisar tem home search aqui a home é tipo uma casinha search é tipo uma lupa aí a gente tem aqui o coração Heart e profile que é de tipo usuário né então a gente pode entrar agora lá no site da do remix icon para procurar vamos lá remix icon pra gente procurar esses ícones os nomes que Eles vão ter então a gente pode pedir aqui primeiro vai ser então home né de

casinha Então o que a gente vai querer que vai ser mais parecido com aquele padrão é esse aqui ó home 5 tá vendo clica em cima ele já vai mostrar aqui para você copiar o padrão do ícone então copia aqui ó copied vai lá no teu projeto vamos achar aqui onde a gente tem esse sistema de navegação que tá aqui embaixo e colocar aqui então a gente tem Aqui o tu bar que é o componente que forma essa parte de baixo então a gente pode achar aqui onde a gente tem o ícone ó a gente

tira o ícone que a gente tinha antes que era o MDI MDI home e vamos colocar esse novo ó ó lá já ficou legal esse iconeinstagram mais fácil de copiar ó o link o o ícone né copiamos aqui vamos colocar aqui no link 2 A lupinha o terceiro é Heart né coração aquele Heart 3 que a gente vai pegar aqui ó Então vou Copiar esse ícone também vamos colocar aqui har 3 e a gente vai precisar de mais uma página aqui que ficou faltando Link 4 né que vai ser a nossa página do usu então

a gente pode procurar por profile aqui PR ver não ficou legal user vamos procurar aqui por user vamos ver vamos ver a gente pode usar esse primeiro mesmo aqui ó copiar vamos colar aqui esse ícone do user Link 4 né vamos ver lá como é que tá ficando ó lá beleza fica mais parecido né com o Sistema de ícones que a gente tem aqui ó tá vendo fica mais parecidinho agora agora a gente vai precisar então criar essa rota 4 Porque como a gente fez do zero agora vai ter que criar esse link 4 ele

não existe aqui ó Então a gente vai precisar fazer ele então vou copiar aqui o link 3 fazer aqui Link 4 aqui vamos fazer mais uma página link 4 link 4 conteúdo do Link 4 e aqui vamos criar mais uma rota lá no nosso Roots né criar Mais uma rota aqui embaixo para esse link qu aqui beleza Link 4 Ok e aqui a gente tá apontando vamos ver se entra no link 4 Beleza já entrou no link 4 agora vamos estilizar então esse nosso Tab aqui embaixo para que ele fique no padrãozinho branquinho aqui né

com os ícones também tá vendo que os ícones estão mais cinza eles tem que ficar escuros quando eles estão selecionados tem que ficar verde então a Gente entra lá na nossa index.css e aqui a gente vai então fazer as modificações no nosso tubarino pelos itens que estão aqui dentro então a gente pode determinar aqui ó pon tubar iner a gente vai dizer que ele vai ter o background a cor de fundo dele vai ser branco então a gente usa a nossa variável você escreve var dois parênteses e aqui dentro você coloca qual variável você quer

então no Caso aqui eu vou querer a variável branco e Aí salvei ó lá show de bola já ficou branco a gente vai querer uma borda no topo Então vamos colocar aqui border top de um pixel sólida e a gente vai usar aqui a nossa variável gelo que é o cinzinha E aí ele já vai colocar uma bordinha em cima lá como a gente queria show de bola né pessoal aí aqui mais para baixo a gente vai ter os itens de link mesmo que são os botões que estão aqui que já vem uma certa padronização

Aqui do nosso template Starter então a gente só vai determinar aqui que a cor do link normal selecionado vai ser a gente vai colocar aqui color a variável verde né aquela variável que a gente fez lá em cima então quando ele tá selecionado a gente vai querer que ele fique Verde ó então selecionado ele fica verdinho assim e quando não está selecionado que aqui embaixo a gente tem essa classe óin link not Active então quando não estiver ativo a gente vai Querer que a cor dele in vez de ser gre que nem tá aqui a

gente vai trocar a gente vai colocar nossa variável Preto aqui ó para ele ficar mais escurinho show de bola já tá bem parecido lá ó com com o modelinho né tá tá joia lá o o que como que tá ficando aqui né a gente pode pôr só os nomes aqui né é home então o primeiro se chama home o segundo se chama busca o terceiro é favoritos favoritos e por último a gente vai colocar aqui o Usuário Beleza então home busca favoritos e usuário fechou agora vamos fazer então a parte de cima aqui né onde

a gente vai ter essa navegação aqui vai ter o título do app vai ter a nosso botão de sacolinha de compra e vai ter aqui um formularz né com campinho input de busca com a lupinha pra gente poder tá fazendo então vamos fazer isso agora vamos remover então primeiro esse nave bar que a gente tem aqui por padrão ó a gente tem aqui Um bar tá vendo a gente Pode remover ele deletar E aqui onde a gente tem page content ele é o conteúdo da página o conteúdo da página a gente vai fazer a esse

miolo aqui onde tem esses itens e tal né então esse é o conteúdo da página essa parte de cima aqui ó essa parte aqui a gente vai chamar ela de de nave né que vai ser uma parte que independente da rolagem que a gente tiver aqui a gente vai querer que ela se mantenha aparecendo aqui no nosso app Então a gente vai fazer fora do page content aqui antes ó a gente vai fazer aqui o nosso nave topo certo então a gente pode fazer da seguinte forma a gente vai criar aqui uma div Vamos fazer

uma div com a classe top nave eu vou chamar assim top nave certo e dentro dessa div top nave a gente vai ter um título um onde a gente vai ter o nome do app e a gente vai ter também um link que vai ser na verdade o botãozinho que a gente tem lá no canto De lá então eu posso fazer aqui um H1 com uma classe que eu vou chamar de titol titol logo certo então aqui a gente pode colocar assim Green Tech que vai ser o nome do nosso app beleza e a gente

vai ter aqui um link que a gente pode colocar a Vamos colocar assim a HF apontando para lugar nenhum por enquanto ele vai ter uma classe que a gente vai chamar de btn cart que é de carrinho e a gente vai Colocar aqui um atributo que vai ser um atributo que vai fazer a contagem de quantos itens a gente tem no carrinho e vai mostrar para nós lá aquele balãozinho em cima sabe uns numerozinho então a gente coloca um atributo aqui chamado data count para fazer isso é para fazer a contagem eu vou começar com

zero aqui certo e aí esse botãozinho aí pessoal ah a gente vai usar dentro dele o Icone Zinho de shopping né que a gente tem Aqui no remix icon então a gente pode procurar aqui por shopping shopping vamos pegar aqui e essa sacolinha aqui né E copiar esse ícone da sacolinha e colocar aqui dentro do nosso a nossa tag a aqui que vai ser o nosso botão certo então por enquanto tá ficando assim ó nada a ver né Vamos agora estilizar isso aqui então com o CSS aqui no nosso projeto Então vamos lá no index.css

e aqui vamos colocar as Propriedades para deixar ele com a cara que a gente quer então a gente vai fazer aqui o top nave top nave que vai ser a o a mãe de todos né aqui ó top no é onde tá dentro aqui o título e o botão Então a gente vai colocar aqui que ele vai ter um Edit a largura de 100% da nossa tela a gente vai querer que ele tenha Vamos colocar só pra gente chegar por enquanto um background head aqui ó vermelho só pra gente ver a área tá que ele

vai est pegando a gente vai determinar uma Altura de 60 pixels então uma altura fixa ó lá de 60 pixels nós vamos dizer que o display dele vai ser do tipo Flex e a gente vai fazer os alinhamentos usando o align items Center então para deixar tudo alinhado assim nesse sentido ao centro ó e nós vamos usar aqui o justify content Space between o justify content Space between ele faz com que os itens eles TM o mesmo espaçamento dentro ali desse container Então como a gente tem apenas dois itens um vai ficar num Canto e

o outro vai pro outro então Esso é um truque legal pra gente ter uma coisa num canto e outra coisa no outro canto aqui né então você vê que o Icone Zinho ficou lá no cantinho certo beleza então nosso top é top nave aqui já tá feito né a gente pode colocar aqui a cor que vai ser certa então a gente pode colocar aqui o branco né Beleza e aí a gente vai fazer agora o nosso título aqui do nosso aplicativo então a gente pode fazer o title logo a Gente vai colocar aqui que ele

vai ter uma fonte weight a grossura da fonte de 600 Então você vai ver que ele vai ficar um pouquinho mais fino do que o original e a gente vai afastar ele um pouquinho uma margem left de uns 5% afastar ele aqui do canto que ele tá bem grudado para ele ficar um pouquinho mais opa ficar um pouquinho mais para dentro aqui ó Beleza dá um espaçamento Zinho aqui no canto e só para isso aqui ficar mais charmoso pessoal que que a gente vai Fazer onde tá escrito aqui Green do nosso Green Tech aqui a

gente pode colocar aqui um spam e a gente pode determinar que a cor da palavra Green vai ser diferente né então a gente pode fazer assim a gente coloca isso dentro de um spam e lá no nosso CSS a gente vai pegar aqui o nosso titto logo e vai falar que se for um spam a gente vai querer que a cor dele seja Ah vamos colocar nossa variável aqui verde Né Ó lá então fica o Green Tech já com aquela parte ali do spam Verde Ok então vamos fazer agora o nosso botãozinho lá do Canto

nosso botãozinho do carrinho de compras então vamos fazer aqui um btn cart que é o nosso botãozinho do car de compras nós vamos colocar aqui então os atributos da seguinte forma largura dele vai ser de 40 pixels a altura dele também vai ser de 40 pixels certo então ele vai ter esse tamanho fixo se a gente Colocar aqui um background head a gente vai ir vendo lá o tamanho dele certo aí a gente vai alinhar tudo bem certinho então a gente faz um display Flex colocamos o align itens Center colocamos o justify content como sendo

Center então para tudo ficar bem no centro Centralizado a gente vai afastar ele do canto lá que ele tá grudado dando um margem right uma margem à direita de 5 pixels para ser o mesmo padrão de espaçamento que a gente deu por aqui Beleza e agora a gente vai fazer as questões de borda arredondada e tal né então a gente faz aqui o border radios borda arredondada de 50% Aí ele vai ficar redondinho Vamos colocar uma borda de um pixel sólida é da cor gelo ter uma bordinha de cor gelo em volta Vamos aumentar o

tamanho da fonte fonte size de 24 pixels e a cor da do do ícone dentro então color vai ser a nossa variável Preto aqui né Ó lá show de bola e a Gente só troca aqui a cor então pra variável aqui Branco Olha lá tchans que legal pessoal que bonito que ficou o nosso botãozinho de carrinho de compras lá no cantinho né E aí aí a gente precisa fazer aquele balãozinho que fica em cima dele né como que a gente faz esse balão então tem uma técnica aqui muito legal para você fazer esses beds esses

balãozinho que tem de notificação usando CSS e o próprio CSS determina se esse balão vai aparecer ou Não essa é uma técnica muito legal que muita gente não sabe como é que faz usando ali a pseudo classe do bfor né do pseudo elemento before do do CSS então a gente faz assim ass ó btn traço cart que é o nosso carrinho a gente faz dois pontos duas vezes assim dois pontos dois pontos Before e aqui a gente vai fazer o seguinte lembra que a gente colocou lá na nossa index um data count que é um

atributo de Contagem eu vou colocar aqui Por exemplo três deixar aqui e aí aqui a gente faz o seguinte a gente coloca um atributo do CSS que se chama contente que é de conteúdo Então você diz que o conteúdo você quer pegar do atributo TTR e aqui você passa qual atributo então por exemplo data count então aqui ele vai pegar o valor que a gente tem lá olha só que interessante o TR tá vendo se eu colocar aqui outro valor por exemplo 1 Ó lá ele já vai pegar do olha só que sensacional Então o

meu CSS ele Tá se comunicando com o meu HTML via um atributo certo agora o que que a gente vai fazer a gente vai criar aquele balãozinho Então a gente vai fazer isso da seguinte forma primeiro Vamos colocar aqui o background dele o back vai ser o verde né então a gente vai usar variável Verde aqui background Verde beleza aí a gente vai determinar o tamanho dele Edit Vamos colocar 17 pixs o rate altura vai ser de 17 pixs também o Quad fica um quadradinho a gente vai Dizer que ele vai ter o border radios

né borda arredondada de 50% pra gente ter ele Redondo ó lá e aí a a gente vai precisar colocar aquele número dois lá dentro né isso a gente vai usar o display Flex a gente vai colocar o align itens Center e o justify content Center PR ele ficar alinhado lá dentro e aí a gente pode diminuir o tamanho dessa fonte que tá muito grande né então a gente usa o fonte size aqui vou colocar 12 Pixel E aí beleza já ficou menorzinho lá né Agora vamos colocar aqui a cor dele color vai ser a nossa

variável branco né para deixar ele branquinho ó lá show de bola e agora a gente só precisa fazer as questões de posicionamento né Para que fique correto aqui o nosso botãozinho ali o nosso a nossa bed aqui em cima né como que a gente faz isso a gente vai usar então aqui o position do tipo absoluto Absolute posicionamento absoluto quando A gente passa o posicionamento absoluto ele vai ter que receber as coordenadas da onde que ele vai ficar em relação ao pai dele onde ele está contido então agora a gente vai ter que passar coordenadas

de onde ele vai se posicionar em relação ao botão Então a gente vai dizer que vai tá ao topo un 5 pixels ó aí ele vai pro topo e a gente vai colocar que vai ser à direita right a gente vai colocar zero pixels para que ele vá bem lá pra direita legal aí a Gente pode fazer o seguinte aqui nesse nosso before a gente vai usar a mesma margem que a gente deu de espaçamento aqui a gente faz um margem right 5 por por para ele Acompanhar a movimentação do nosso botão porque a gente

usou porcentagem lá pra movimentação do botão de Margem então ele já vai ficar na posição lá certinho né e fica bem bem bonitinho assim dessa forma então assim a gente já fez o nosso badge Zinho lá em cima e aí O legal é que assim conforme a Gente coloca um valor aqui ele já vai ó mostrar para nós aquele valor lá ó ó olha que show legal pelo atributo data count Então a gente tem controle por aqui de como que vai ficar os nossos itens lá ó tá vendo ó bem legal né show de bola

eh só que agora a gente vai ter que controlar aqui pessoal como que vai ficar se não tiver nenhum item né porque por exemplo se aqui for zero a gente tem que fazer com que esse item desapareça não que apareça zero lá né Então como Que a gente vai fazer isso é bem simples como que você vai fazer é aqui no CSS que você vai controlar isso de forma automática Então você vai fazer o nosso btn cart que é o nosso botão a gente vai pegar pelo atributo aqui de seletor data count Então se o

data count for o zero não tiver nada aí a gente vai querer que o before que é esse badinho que a gente tem aqui faça o seguinte display n não apareça nada olha só o próprio CSS vai controlar isso agora se eu salvo olha só Que legal Sumiu meu bed não apareceu lá se eu colocar agora algum valor aqui que não seja zero ó se colocar um aí ele vai aparecer ó 23 por exemplo ó lá legal agora se for zero ó ele não vai aparecer nada legal então o nosso próprio CSS é que determina

isso que fica muito legal mesmo né pessoal bem joia bem show de bola e aí a gente pode determinar também só pra gente deixar tudo já em tons de verde né todos os tudo que a gente tiver de link aqui do nosso projeto a gente Vai querer que e seja Verde então a gente pode fazer o nosso a que todos os links que tiver eles vão a gente vai querer que tenha a cor aqui verde né e a gente pode colocar que a gente vai querer que tenha um certo grossura de fonte aqui um Font

weight 600 e o text decoration para não colocar nenhuma linha embaixo a gente vai colocar n certo beleza então feita a nossa etapa Inicial aqui da parte de baixo da parte de cima agora A gente vai Fazer aqui no nosso template a parte aqui do nosso campinho de busca né esse campinho de busca não vai funcionar ele vai ficar mais de enfeite aqui nessa aula mas se fosse um aplicativo Real aí você realmente ia querer que ele né fosse funcional Então deixa eu só eu tô olhando aqui pro lado porque eu tô colando na minha

outra tela tá pessoal as coisas que eu tô fazendo aqui que eu já deixei preparado pra gente não perder muito tempo aqui no desenvolvimento Então eu tô já olhando aqui para ficar mais rápido de tá fazendo essa aula então a gente vai lá na nossa index agora fazer aqui no nosso page content já no conteúdo da nossa página né esse formulário ou melhor embaixo do naso nave bar P de content a gente ainda não vai fazer agora essa parte é fora do P de contente porque a gente vai querer que isso fique independente da rolagem

né então a gente vai fazer aqui um formulário dentro desse formulário a Gente vai ter um campo input que vai ser onde a gente vai fazer a busca a gente vai colocar aqui um Place holder o que você procura e ele vai ser do Type que a gente pode colocar aqui text tá de texto Então a gente tem um campinho ali né O que você procura ó campinho de digitale básico tá vamos voltar lá pro nosso CSS agora vamos estilizar esse formozinho Então vamos fazer aqui com o Nosso ário ele vai ter um pading top

preenchimento do topo de 10 pixels PR gente dá um certo afastamento da parte de cima a gente vai colocar aqui um background nele vai ser o branco var Branco a gente vai dizer que ele vai ter também um pading bottom um preenchimento embaixo de uns 20 piels só para ele fazer uma áre pra gente ver a área que ele vai tá pegando Vamos colocar um border Solid Black aqui só pra gente ver então a área do nosso formulário é essa Áre Zinha que tá sendo mostrada aqui certo Deixa eu só puxar aqui o meu V

code assim que fica mais fácil da gente ver e o nosso e o nosso o nosso input Zinho ali nós vamos fazer ele da seguinte forma então input nós vamos colocar aqui que o edit dele a largura vai ser de 90% porque a gente vai querer que ele pegue quase toda a a gente vai dar uma margem para cá e uma margem para lá a gente vai Colocar aqui que o background dele a cor pra gente já enxergar ele vai ser a nossa variável gelo cinzinha pra gente já ver ele a altura dele o Opa

a gente vai colocar aqui de 45 pi certo a a gente vai colocar uma border radi de 10 pixels Engraçado que aqui não tá dando pra gente ver direito isso daqui né então a gente pode colocar um input e a gente pode um seletor Type text aí para ficar mais fácil da gente Ver agora ficou visível né pra gente deixar ele bem alinhado ao centro a gente usa um tru aqui que é o margem alto coloca assim ó margem alto margem alto aí ele já vai deixar alinhado E aí o texto precisa ficar mais para

dentro tá vendo a gente faz isso usando o pading né então a gente pode fazer o pading da seguinte forma um pading de 10 pixels do Topo e embaixo e 20 pixels na esquerda e na direita Aí ele vai ficar com esse espaçamento Zinho Aqui fica com um pouco de espaço em cima um pouco de espaço embaixo fica mais bonitinho aqui dessa forma né e o o se a gente olhar lá no nosso modelo aqui ó a parte onde tá escrito search aqui a o que tá dentro da busca ele é um cinzinha mais claro

né a gente pode fazer isso da seguinte forma a gente pode passar aqui o pseudo elemento né chamado Place holder que é para controlar essa marquinha d'água que fica aqui né e a gente pode Colocar aqui a cor dele vai ser aqui a gente não precisa usar uma cor da paleta a gente vai precisar usar um cinza um pouquinho é diferenciado então aqui a gente pode colocar o B3 a a FF que é um cinzinha assim ó que vai ficar legal certo eu vou só tirar aquela borda que a gente colocou no nosso formulário aqui

e aí beleza ó lá que legal que tá ficando né A gente só vai precisar colocar agora esse iconeinstagram Esse ícone aqui ó que é o ícone da da lupa a gente pode reaproveitar ele aqui ó lá o iconeinstagram ele vai ficar encaixado dentro desse nosso formulário então a gente pode até colocar aqui uma classe nele ó é ícone busca e aqui a gente pode usar essa classe ícone busca aí a gente vai dizer que o posicionamento vai ser e absoluto E aí agora a gente vai poder dizer aonde que ele vai se encaixar Então

a gente vai colocar que do Topo vai ser zero pixels para ele ir para cima daí a gente pode colocar aqui à direita é a gente pode colocar aqui que vai ser 5% certo e aí a gente pode agora dar um fonte size para aumentar o tamanho dele fonte size Vamos colocar de 27 pixels para deixar grandão esse ícone E aí a gente pode agora dar um pading preenchimento de todos os lados De 13 pixels e ele vai se encaixar ali bem naquele cantinho né esses números aqui que eu cheguei tá pessoal que ão aqui

no nosso CSS foram alguns minutos que eu fiquei lá tentando acertar até encaixar o item aqui aqui eu tô colocando assim direto pra gente não perder muito tempo e já ter os itens colocados já com com todos os valores corretos né mas eu quando fui preparar a aula tive o tempo de fazer esses alinhamentos e tal então No seu processo de desenvolvimento não vai ser assim você vai saber de cabeça P tá olha o pading é de 13 pixels o topo é zero right 5% você tem que ir olhando como é que tá ficando e

encaixando entendeu aqui é só pra gente ter tudo um pouco mais rápido Beleza então terminada a parte de cima aqui do nosso aplicativo né agora também com o com o sisteminha de busca aqui ó bem joinha bem legal agora vamos pro miolo do aplicativo né que é essa parte aqui da do sistema de Imagens aí as categorias e aí os itens que a gente tem aqui embaixo né Então vamos fazer isso agora então aqui não sei se vocês vão reparar mas o fundo ele não tá branco tá pessoal o fundo padrão do template Starter ele

vem aqui uma corzinha tipo parece tipo um rosinha uma coisa assim né um salmãozinho não sei se vocês conseguem ver então a gente vai precisar determinar que a gente vai querer que o conteúdo da página seja branco também então a gente pode fazer o Seguinte a gente pode dizer que o page content conteúdo da página vai ter o background a gente pode determinar que ele vai ser a nossa variável branco aqui ó aí beleza ó agora ficou tudo branco legal agora a gente vai então fazer a parte aqui do do swiper né que é essa

parte das imagens aqui que vão trocar né inclusive pessoal eu vou deixar aí na descrição para vocês tá a pastinha uma pasta do Google Drive Com todas essas imagens aqui ó que são as imagens que a Gente vai tá usando no nosso projeto tá então aí na descrição Você tem o link para pegar essas imagens PR a gente já facilitar o processo então eu já vou copiar essas imagens e já deixar ali dentro do projetinho que a gente tá trabalhando você vai lá e cola dentro aqui da pasta IMG daí do projeto que a gente

tá fazendo baixa lá do Google Drive e coloca aqui essas imagens certo pra gente fazer aquele sistema de de navegação assim que troca arrasta pro Lado assim né o nome disso se chama swiper é uma biblioteca muito legal muito interessante vou mostrar ela para vocês aqui ó você digita assim ó swiper é swiper JS o nome da do site swiperjs pcom tá então ele é uma bibliote que tem como objetivo fazer esses efeitos de transição assim ó que você pode usar com toach tudo mais isso foi feito pelo mesmo cara que criou o Framework S

então o swiper ele já vem integrado com o Framework 7 esse sistema aqui e a gente Usa muito mas muito mesmo dentro de aplicativos tá então o que a gente vai fazer a gente vai vir aqui dentro de e resources aqui em cima em demonstrações e nas demonstrações a gente vai procurar um aqui que é um de imagem aqui que a gente vai ter quer ver ó que ele tá carregando ainda deixa eu achar aqui slides per viw centered Center Auto free mode scroll container grab com Cursor efeito de Fade Vamos pegar uma aqui ó

ah pode ser esse free mode aqui eu acho a gente clica aqui em Core que é pra gente ver o código e a gente pegar aqui um modelinho de swiper aqui base né Deixa eu ver aqui que a gente tem é pode ser desse aqui mesmo então o que que a gente faz a gente vai pegar aqui primeiro o HTML dele Então vou copiar aqui a parte do HTML Ctrl C né copiei vou lá no meu Projeto vamos lá no nosso HTML dentro aqui do nosso page content conteúdo da página aqui ó dentro dessa div

Block então voltando aqui ó conteúdo da página é esse miolinho aqui tá então aqui dentro eu vou colocar o que eu quero Então vou colocar aquele swiper aqui ó então colocado aqui o HTML do swiper por enquanto el não funciona nada a gente vai ter que ativar ele então vamos voltar lá e pegar aqui o CSS dele a gente tem aqui de padrão aqui só do Swiper então swiper swiper SL swiper SLG a gente copia is aqui controlc vamos lá no nosso index.css colocar ess aqui também aqui e aí a gente tem também uma inicialização

do swiper aqui no nosso JavaScript tá a gente precisa inicializar esse componente no nosso JavaScript então aqui embaixo eu vou copiar o que tá dentro da tag script cont CRL C copiei isso aqui vamos lá no nosso projeto e onde que a gente faz Todas as manipulações de JavaScript né a gente vai ter lá ó o nosso Roots PJS que é onde tem os controles de rotas certo então a gente dentro do Roots JS a gente vai ter aqui ó a nossa index e aqui a gente tem eventos do que que é para acontecer quando

a nossa página antes de ser exibida depois de ser exibida quando a página for inicializada e tal então o que que eu gosto de fazer a gente faz aqui um comandinho que se chama get script e aqui a gente referencia a pasta JS um arquivo index.js que vai ser o arquivo onde a gente vai tá colocando todos os nossos códigos tá pessoal então é como se aqui a gente referenciasse um arquivo que a gente vai estar criando aqui dentro da pasta JS é chamada index.js e aqui a gente na rota só aponta que a gente

quer puxar aqui é como se a gente tivesse importando os dados dessa página index E aí nessa página index a gente pode dar o comando que a gente quiser por exemplo se eu der Aqui um um app. dialog Alert que é tipo uma janelinha que aparece olá mundo se eu salvar isso aqui olha só já apareceu o disparo disso daqui aqui no meu sistema então nessa página index JS tá funcionando ela vai ser a a a o arquivo né que a gente vai estar trabalhando as questões de JavaScript aqui e aqui logo abaixo dessa importação

né do dessa desse arquivo index que vai ter o nosso controle a gente vai colocar a inicialização desse componente do Swiper Eu sempre gosto de colocar aqui dentro do roteamento do próprio Framework Seven porque essas questões de funcionamento de elementos e componentes do Framework 7 é melhor que você use aqui dentro da rota para lá você deixar só a sua lógica fica personalizado agora o que é nativo entre aspas aqui do Framework o que você vai trabalhar de aspecto visual eu gosto de deixar aqui dentro do Roots mesmo tá então aqui a gente vai colocar

a inicialização do Swiper dá um salvar e aí a gente já vê que agora ele já ativou ó aí já tem uma sistema de paginação aqui ó já tem ali os vários slides e tal né e agora a gente vai personalizar com as nossas imagens então voltando lá no nosso HTML então cada um desses swiper slide aqui ó é uma como se fosse uma folha de slide que a gente vai est trabalhando certo aqui a gente vai ter que determinar aqui no nosso controle quantos slides a gente quer que mostre Então aqui tá slides per

viw slides por visualização Quantos você quer que mostre então eu posso dizer por exemplo que eu quero que mostre dois slides você vai ver que o terceiro não vai aparecer eu quero que mostre um slide por vez entendeu aqui a gente pode determinar o controle espaçamento e tudo mais mas vamos lá vamos colocar uma imagem então aqui ó dentro da primeira folha aqui no slide um a gente vai colocar aqui o IMG src Vamos colocar a imagem lá dentro da Nossa pasta IMG a gente vai pegar aqui ó propaganda.png que é a imagem preparada que

eu deixei aí o link no Google Drive para você pegar e a gente já vai ter a imagenzinha ali certo show de bola já tá encaixada aqui dentro E aí a gente vai colocar no nas outras folhas aqui as próximas imagens então a gente pode colocar aqui a propaganda aqui é propaganda dois né aí no próximo slide a gente vai colocar propaganda três e no próximo slide a Propaganda 4 aqui deixa eu só quebrar a linha para ficar o mesmo padrão aqui e os outros slides que a gente não vai usar a gente pode apagar

aqui certo pode deletar beleza então agora a gente tem aqui ó já ó olha que legal ele tá com deslize eh no modo livre né então conforme a pessoa arrasta aqui ó ele fica livre tá vendo o arras da pessoa aqui ó que é o free mode que a gente pegou né de exemplo a gente pode fazer algumas configuraçõe zinhas então só Para isso aqui ficar eh melhor então free mode aqui tá ativado se eu tirar o free mode aqui ó vou tirar esse modo free mode deixa eu dar um salvar agora ó ele já

vai Um item por vez né não vai ficar aqueles arrastes como tava antes aqui né aqui no pagination ele Esse pagination é essas bolinhas que tem aqui embaixo alguns gostam de deixar outros não mas eu vou tirar porque se a gente olhar lá no nosso padrão não tinha né até porque eu não sei se era uma imagem Só mas eu imaginei que teria aqui um swiper assim ó para ficar mais interessante né e aqui a gente tem outros parâmetros que a gente pode passar para você conhecer esses parâmetros lá no site do swiper você você

pode vir aqui em documentação swiper Core api e aqui ó você vai ter os comandos que você pode usar por exemplo um que a gente vai querer usar vai ser o autop Play o autoplay é para ele tocar sozinho para ele começar a mexer sozinho Né então aqui ele vai dar a explicação de como é que você ativa e tal então Aqui tá dizendo que você tem que colocar para ter um aut play você tem que colocar aqui qual que é um delay né que você quer que tenha para que ele funcione então a gente

pode colocar isso aqui ó delay a gente pode colocar 3 segundos vamos dar uma olhada lá para ver se já vai funcionar dessa forma aí ó vamos aguardar aqui para ver se vai funcionar e a gente acho que tem que Colocar aqui o autoplay como true verdadeiro também vamos ver se vai funcionar lá ó deu 3 segundos ele já passa pra próxima folha ó tá vendo show de bola né Tem um outro parâmetro que a gente pode passar aqui que se chama loop que é para ele e o loop faz com que ele volte lá

pro ponto de de início né então ele vai rodar ó ele vai pro primeiro pro segundo pra terceira folha aqui do do swiper ó vamos ver E aí depois ele já volta pro primeiro ponto ó lá celulares Tá vendo ele não dá aquela rebobinada vamos dizer assim né ele já continua como se fosse um fluxo contínuo certo só que assim pessoal e quando a gente deixa o app aqui em tamanhos grandes você vai ver que esse daqui ó vai ficar um tamanho bem absurdo tá vendo ó bem bizarro mesmo então a gente precisava que de

acordo com o tamanho da tela a gente pudesse controlar quantos slides vão aparecer aqui para que a gente tenha uma questão de responsividade e tal né Para não ficar essa bizarrice aqui como que a gente pode fazer isso tem aqui no no próprio swiper já alguns parâmetros que se chama Break points um Break Point é um ponto de quebra Então o que quer dizer isso aí que você quer que aconteça alguma coisa em determinado tamanho é tipo uma mídia Carry vamos dizer assim mas já que já vem aqui junto do swiper então a gente pode

colocar assim por exemplo no tamanho 50 de 50 pixels para cima maior que 50 pixels o que que eu Quero que aconteça que o slides per viw que é a quantidade de slides por visualização vai ser um e o espaçamento entre eles ou Space between vai ser 30 certo então esse vai ser de 50 pixs para cima Então beleza aí eu vou fazer aqui ó que coloco uma vírgula coloco aqui que de 640 pi para cima que já vai ser depois a gente vai fazer o teste aqui a gente vai querer que seja dois slides

por visualização Então olha só o que que vai acontecer agora tá assim né Desse Tamanho se eu pegar aqui e aumentar ó ó quando eu chegar a passar de 600 640 tamanho era para ele mostrar dois aqui para nós e não funcionou deixa eu ver a gente acho que tem que colocar aqui pessoal o tamanho da imagem máximo aqui eu esqueci de colocar uma classe pra gente controlar o tamanho dessa imagem ó nessas imagens a gente pode colocar uma classe chamada IMG fluid e a gente pode determinar que o Tamanho máximo dessa imagem vai lá

no nosso CSS ó a gente pode fazer assim IMG fluid a gente pode colocar que vai ter maxit 100% certo vamos ver agora sim se vai funcionar aqui esse nosso Break Point aqui ó não tô conseguindo pegar engraçado né não tá não tá ativando deixa eu colocar aqui mais alguns outros tamanhos então vai ser o primeiro aí depois a gente Pode pegar aqui e colocar uma vírgula Vamos colocar aqui 992 Vai ser 3 por visualização e de 1200 para cima vão ser quatro slides 10000 para cima vão ser qu slides certo vamos ver agora se

isso aqui vai funcionar vamos aumentando aqui aumentando e e não funcionou Será que eu digitei alguma coisa errada aqui deixa eu ver Break Point Break points tá pessoal no plural aqui ó Break points Agora sim vamos aumentar aqui agora sim olha só que legal então em tamanhos menores PR celular el vai ficar um né Aí vou aumentando ó já pulou para dois slides por vez ó se eu passar aqui ó ele já vai ter os outros ali pro lado se eu for aumentando mais ainda ó já foi para três para enquadrar com a nossa tela

né pessoal e aumentou mais ainda ó foi para quatro tá vendo Então fica bem joinha Fica bem legal mesmo eh só pra gente encaixar um pouquinho mais tá vendo que aqui tem ele tá um pouquinho para fora do alinhamento a gente tem aqui ó a nossa index aqui o o bloco ó blo a gente pode determinar lá no nosso CSS personalizado que esse blo aqui ó a gente pode colocar assim blo a gente pode dizer que ele vai ter margem à esquerda margem left de 5% e a margem à direita de 5% também deixa eu

ver como é que vai ficar ó aí Fica um pouquinho menorzinho assim ó acho que fica mais simpático né na verdade dá diminuir mais aqui 3% 3% 2% queria ficar mais alinhado com ali a aí ó ficou mais alinhado agora com o que a gente tem aqui em cima né legal e e ficou um pouco afastado aqui a gente pode mudar esse afastamento aqui no nosso Block a gente pode colocar no Margin top sem margem em cima e aí ele já sobe ali para cima legal show de bola né pessoal bem bonitinho o nosso swiper

aqui já tá ficando com uma cara bem joia o nosso aplicativo aqui a nossa página inicial né tá ficando bem legal mesmo agora então vamos fazer aqui na continuação ó a parte de categorias né então a gente tem tipo uma linha onde de um lado a gente vai ter escrito categorias e do outro ver todas uma coisa assim do tipo né então a gente Pode fazer isso da seguinte forma aqui logo abaixo tá do nosso su wiper aqui onde tem o fechamento do nosso wiper a gente pode criar aqui uma div com uma classe aqui

display Flex que já vem uma classe que já vem no Framework pra gente não ter que fazer isso lá direto já tem umas classes aqui direto né a gente pode dizer que o alinhamento dos itens align itens vai ser Center o justify content vai ser Space between aqui vai ser Space traço Between certo e aqui a gente vai colocar dentro dessa div então os os itens da categoria E um botãozinho veja todas as categorias né então aqui a gente pode colocar um H2 Vamos colocar assim categorias e lá no canto a gente vai ter um

link HF apontando para lugar nenhum veja todas ó lá e a gente pode colocar aqui até um ícone ó Eclass MDI MDI traço Arrow traço right flecha à direita né só pra gente ter assim ó olha só que que joinha né Que legal que vai ficar essa parte de categorias aqui para nós né Beleza tá ficando bem bonito né pessoal tá ficando bem joia E aí agora a gente vai precisar fazer a parte aqui das categorias propriamente ditas aqui ó só que essa parte de categorias nós vamos usar um sistema de swiper também tá que

é aquele sistema da gente poder Navegar puxando pros lados e tal né que nem a gente usou aqui para imagem só que daí a gente vai usar para botões esse swiper aqui dentro de cada slide você pode colocar o que você quiser não necessariamente só imagens Então isso é muito legal dessa bibliote aí né então a gente vai fazer o seguinte a gente vai pegar lá lá da biblioteca do swiper aqui ó a gente pode entrar aqui onde a gente tem swiper a gente pode ir lá nas demonstrações onde a gente foi a gente Pode

ir lá no Free mode que nem a gente pegou antes que é um um legalzinho que eu gosto sempre de pegar Core vamos copiar aqui o swiper a parte do HTML dele copiar aqui swiper cont control c então aqui embaixo da onde a gente tem a parte das categorias a gente coloca esse swiper a única coisa que a gente vai trocar o nome aqui em vez de mais swiper a gente vai chamar de categorias categorias certo e aí dentro de cada Folha a gente vai ter que colocar os botões certo Deixa eu só voltar aqui

aqui apareceu o slide a gente vai ter que fazer aqui a chamada na nossa rota aqui ó Desse nosso swiper de categorias aqui né vamos fazer a chamadinha dele acho que é melhor pegar direto por aqui mesmo chamada essa chamada mais suscinta aqui ó a gente só vai precisar colocar um outro nome então esse daqui a gente Criou aqui uma variável chamada swiper E aí escrito mais swiper chamando esse primeiro que era o de cima das propagandas certo então agora aqui embaixo a gente vai fazer ó na continuação swiper 2 e aqui a gente coloca

a chamada de categorias que foi o nome da classe que a gente deu Aqui ó a gente chamou swiper categorias tá vendo a gente coloca aqui o nome da classe aqui a gente quantos a gente vai querer que veja e tal daqui a Pouco a gente já ajeita isso aqui então Vamos só ver lá beleza já tá aqui o nosso segundo swiper aqui ó já com os iten zinhos as rolagens aqui certo vamos agora então ajeitar isso daqui então a gente vai colocar em cada folha um é um botão daqueles né que vai ser desse

tipo aqui ó um botãozinho desse aqui da categoria então a gente pode colocar aqui dentro do slide um a gente pode colocar aqui um buton a gente vai Colocar uma classe que a gente vai chamar de Filter btn que é o botãozinho de filtro esse Primeiro vai ser o que vai est ativo Então a gente vai colocar mais a classe Active e aqui a gente vai colocar todas de todas as classes ó beleza e aí em cada um dos e itens aqui a gente vai colocar uma categoria Então a próxima vai ser é celulares só

que ela não vai ter a classe ativa tá só o primeiro vai ter a classe ativa então a segunda aqui botão celulares a terceira Vai ser laptops e eu vou acelerar aqui ó laptops PR a gente não demorar muito né até uma dica que eu vou dar para vocês ó bem legal pessoal quando vocês tem tem que fazer esses preenchimentos aqui de coisas assim você pode fazer o seguinte por exemplo cada swiper slide desse vai ser uma categoria certo tipo assim então você pode copiar esse conteúdo aqui que é um padrão e você pode abrir

por exemplo chat GPT já deixei aberto e aí Você pode pedir para ela gerar e isso aí para você olha para você não ter que digitar e eu tenho um padrão de html da seguinte forma dois pontos aí vou colocar o padrão gostaria que o valor onde está escrito celular você colocasse outras categorias para um e-commerce por exemplo laptops laptops eh Smart watch vou colocar Smart watch e a assim por diante por favor Me Forneça 20 categorias então eu pedi para ela o que fazer vamos ver se ela vai entender certamente aqui ela colocou Quais

são as categorias por favor me coloque essas categorias dentro desse padrão de html Vou colocar aqui talvez eu não me expressei muito bem né vou copiar e vamos pedir para ela fazer para nós ó lá que show de bola pessoal Imagina a gente ter que fazer isso na mão né a Gente pede um pouquinho para ela ali mas ela já entendeu E aí ela já faz para nós aqui os padrões ó lá ó que massinha e já fez tudo aqui para nós aí o que que a gente faz a gente vem aqui copia aqui copiado

vamos lá no nosso projetinho e aqui a gente pode simplesmente colar aqui no lugar desses slides que a gente tem aqui vamos colar esse padrão que ela fez aqui para nós então ela já criou para nós um monte já de categorias olha só que legal fez Várias e várias folhas aqui de categorias com o padrão que a gente queria né então é legal você usar o chat GPT para esses preenchimentos Para você ganhar em tempo ganhar em produtividade Isso aqui é uma dica que eu dou aqui para vocês Tá beleza então vamos fazer agora então

esse Filter btn só tá me irritando um pouquinho essas bolinhas aqui ó que tem de da paginação vou tirar aqui do nosso hots JS vou tirar ela aqui e aí beleza a gente vai ter aqui os nossos botõezinhos aqui ó aqui tem o free mode para para poder arrastar do jeito como quiser né E vamos fazer aqui então o esses botõezinhos aqui o Filter btn né que é a classe ali do nosso botão então Filter btn nós vamos determinar que a largura vai ser de 100% a gente vai colocar que ele vai ter uma altura

um rate de 35 piels pouquinho mais gordinho E ele vai ter o background nenhum background n ele vai ser vazado Vamos colocar aqui a borda dele vai ser de um pixel sólida e aqui a cor a gente vai usar a nossa variável Preto aqui certo Ok Na verdade dois pixels vai ser um pouquinho mais grosso aí aí a border radios a borda arredondada dele a gente vai colocar aqui de 10 pixels para fazer um Arredonda E aí pessoal o que que vai acontecer vocês vão reparar que algumas palavras elas vão ser é muito longas aqui

deixa eu ver se eu consigo pegar aqui tá meio difícil de de pegar aqui deixa eu maximizar aqui que vai ficar mais fácil de poder rolar aqui vamos ver se eu acho fones de ouvido tem muitas categorias aqui né pode ser que tenha alguma categoria que fique muito longo aqui o tamanho né então o que que a gente pode fazer aqui Até repetiu duas vezes celulares eu reparei né celulares celulares deixa eu ver aqui celulares celulares Deixa eu tirar aqui a gente vai colocar aqui um negócio para para ficar mais longo por exemplo aqui tá

em celulares blá blá blá colocar alguma coisa assim olha lá como é que vai ficar tá vendo que não aparece tudo ali dentro então pra gente resolver isso aqui a gente pode colocar uns atributos aqui do CSS que fazem Ficar com três pontinhos a gente faz assim White Space você coloca como no wrap que é para não quebrar a linha então vai ficar tudo na mesma linha Depois você coloca o overflow como sendo Hidden para ele esconder tudo que tiver fora do botão e aí você coloca o text overflow como sendo elipses aí ele vai

colocar três pontinhos olha só que legal então só vai ficar contido o valor da categoria ali dentro e isso é bem bem joia tá então só pra gente mostrar isso Aqui vocês show esses botões eles estão muito longe um do outro né a gente pode diminuir esse espaçamento vindo aqui ó no Space between a gente pode colocar 10 aqui ó para eles ficar mais próximos um do outro tá vendo dessa forma a gente tem aqui ah três slides por visualização 10 de espaçamento só que aí ó a gente quando tá em tamanhos maiores de tela

não vai Ficar tão legal isso daqui né na verdade aqui eu tava reparando também não fica legal fica um pouco fora aqui os as nossos slides Mas tá bom vamos deixar assim por enquanto então a gente vai vai ter que também fazer aqui uns Break points né a gente pode até copiar esses Break points que a gente tem aqui do outro e a gente pode ir aumentando essa quantidade de itens que vão aparecer de Categorias né De acordo com o nosso com o tamanho da nossa tela né então a gente pode fazer de 50 pixels

a gente vai pedir para aparecer três 640 vai pedir para aparecer 6 992 Vamos pedir para aparecer 8 e de 1200 para cima vai ser 12 por visualização então Ó aqui fica três só que aqui a gente vai mudar para 10 a distância deles ó para não ter tanta distância Assim entre os botões então Ó aqui quando a gente temem tamanhos menores aparece três conforme a Gente vai aumentando ó já vai aparecendo mais opções de categoria até que chega no tamanho máximo aqui que aparece 12 por vez né E conforme a pessoa vai puxando pro

lado ela pode e vendo outras categorias aqui né Engraçado que aqui fica meio meio bugado pra gente arrastar aqui não sei se é por causa desse free mode aqui eu vou tirar esse free mode aqui agora sim a gente consegue puar mais pro lado aqui para ver né pegar Aqui ó a op é no celular fica mais fácil tá pessoal aqui como é questão de arraste com o mouse fica meio bugadao Mas beleza deu para fazer aqui a parte de categorias também né Já tá joia agora a gente vai fazer então a parte mais importante

aqui né que é a partezinha dos czin onde vão aparecer os produtos aqui né os as imagens dos produtos e os valores Então a gente vai fazer essa etapa agora então logo abaixo onde a gente tem o nosso swiper onde ele Termina né Deixa eu só ver aqui onde que ele tem o fechamento dele certinho nosso swiper categorias vai deixar lá embaixo aqui então logo aqui embaixo a gente vai fazer aqui uma div onde a gente vai ter os nossos produtos né a gente pode até colocar aqui um ID aqui ó chamado produtos porque aqui

é que vai ser alimentado mais tarde dinamicamente né com os produtos que a gente vai ter então aqui a gente pode colocar que vai ser a gente pode colocar que essa vai Ser uma linha né a gente pode fazer assim Row vamos criar uma classe depois aqui e aqui a gente vai colocar que vai ser o display Flex o align itens vai ser e Center e o justify content a gente pode colocar content a gente pode colocar start que é para ele começar no canto de lá certo então essa aqui vai ser a nossa divid

de produtos vamos fazer aqui essa Row aqui né que seria uma linha Row a gente vai fazer assim a gente vai fazer Que ela vai ter uma Flex Direction do tipo Row que é do tipo linha e vai ter um invólucro né o Flex Flex wrap a gente pode colocar é wrap com invólucro assim e aqui dentro a gente vai fazer os nossos produtos propriamente ditos né então a gente pode criar aqui uma div chamada e item Card que vai ser um item que a gente vai ter dentro do do card né E aí a

gente vai fazer a seguinte divisória né a gente vai ter então o item Card vai ser essa área total aqui Na verdade né que vai pegar até as partes de baixo aqui a gente vai ter um image content que vai ser a área onde vai ficar a contida a imagem que vai ser essa parte cinzinha com a imagem dentro depois a gente vai ter aqui uma parte que vai ser o nome e o preço e mais uma parte que vai ser só o preço propriamente dito né Essa vai ser a divisória que a gente vai

fazer então a gente pode fazer aqui um Primeiro vamos fazer um link né porque vai ser clicável Isso então a gente vai fazer assim um a HF montando para lugar nenhum e a gente vai colocar aqui depois alguns valores né mas vamos colocar tudo isso dentro de um link e vamos colocar que ele vai ter aqui a classe item item e aqui a gente pode colocar então que item vai ter só pra gente dizer que a cor vai ser preto aqui ó Preto color pros textos que vão ter aqui dentro então aqui a gente vai

fazer uma div com uma classe que a gente pode chamar de IMG coner que é onde vai Ficar a nossa imagem e dentro desse IMG container a gente vai colocar a imagem propriamente dita então IMG src vamos apontar aqui pra imagem vamos pegar aqui qualquer um pode ser do do airpod mesmo e aqui vai ficar a nossa imagem então a parte de cima daí depois a gente vai ter uma outra div que a gente vai chamar uma classe aqui de nome e rating que vai ser Onde vai ter o nome do item E também a

votação né o quanto ele tem de estrelinha Então a gente vai colocar aqui um spam com o nome do item e a gente vai fazer um outro spam aqui embaixo que vai ser a a votação né a gente vai fazer assim aqui dentro um ecl a gente pode colocar MD MD Star né que vai ser a estrela o ícone de estrela e aí a pontuação que a que a pessoa vai ter né Vamos colocar assim 4.8 por exemplo e depois disso daqui então do Nome rating aqui embaixo nós vamos ter uma div que a gente

pode chamar com a classe de Price que é ser de preço e aqui o valor Vamos colocar aqui eh 2 299 por exemplo né onde vai ter aqui o valor do produto o preço então a parte ah de esqueleto aqui já tá feito não dá para ver nada Vamos ajeitar tudo isso daqui né então vamos lá no nosso CSS para deixar tudo certo então primeira coisa que a gente vai precisar fazer é o item Card né o tamanho do nosso Card como ele Vai se comportar então a gente pode fazer aqui o item Card ele

vai ter o display do tipo Flex a gente pode colocar aqui o Flex wrap dele vai ser no wrap sem invólucro Flex Direction dele vai ser coluna Vamos colocar a altura de 240 pixs só pra gente vendo isso aqui a gente pode colocar um border de um PX Sid R pra gente ver a área que ele vai pegar né Então tá pegando uma área ali E ele vai ter o tamanho Flex dele aqui vai ser de 45% porque a gente vai ter mais um pouquinho de Margem né Nós vamos ter margem a direita de 5

pixels e margem Bottom de 5 pix certo e aqui uma coisa também que a gente vai ter que fazer é o controle da imagem né Mas vamos fazer o seguinte deixa eu voltar lá no nosso index eu vou pegar esse item Card Vou colocar aqui um comentário item e aqui eu vou copiar mais Um aqui no cantinho ó para recolher todos a árvore de itens aqui ó vou copiar cont control c e vou colocar mais um outro aqui pra gente ter dois pra gente ter uma duas referências aqui certo a gente vai ter que ajeitar

essa imagem porque senão vai ficar tudo bugado né então a gente vai fazer aqui um image container container Onde fica a nossa imagem aqui a gente vai colocar que o display vai Ser Flex vamos alinhar os itens ao centro também o justify content também vai ser Center aqui a gente vai colocar um Edit de 100% e um rate de 100% e aqui a gente vai colocar um border radios de 10 pixels e o background dele como sendo gelo aqui dessa forma que a área que ele vai tá pegando né aqui a nossa imagem Deixa eu

colocar aqui ó o atributo que a gente acabou esquecendo ó aqui a gente pode colocar aquela IMG fluid né para ele ficar o tamanho certo aqui do item IMG fluid aqui também na nossa imagem aí beleza agora então com o tamanho certo da imagem ele já tá aparecendo aqui para nós ó legal Show de Bola Deixa eu tirar esse essa linha aqui essa borda ok aqui ó pessoal em vez de 100% aqui a gente tem que colocar um tamanho Fixo 880 piels ó para determinar o tamanho fixo aqui do da nossa imagem certo e aqui

ó essa imagem fluid na verdade não vai dar certo ó esse IMG fluid aqui não vai dar certo o tamanho da nossa imagem porque que a gente vai ter que ter um tamanho fixo para padronizar Então a gente vai fazer o seguinte a gente vai fazer aqui o nosso image container ele vai ter aqui ó na tag IMG de imagem a gente vai colocar aqui que Ela vai ter o tamanho máximo Max Edit de 150 pixels aí vai ficar melhor encaixada aqui essa parte ó e o a gente pode colocar aqui obje Fit é cover

para que ele fique é cropado né a imagem precisar dentro dessa área de forma correta certo ficou aqui muito grudado com essa parte de cima aqui onde a gente tem deixa eu achar aqui onde a gente tem nossos produtos a gente pode dar um margem top aqui Ó para dar um afastamento ali olha só que legal show de bola né pessoal já tá ficando aqui mais visual pra gente como ficando os nossos czin esse segundo eu vou trocar aqui de vou colocar uma outra coisa aqui vou colocar o Xbox só pra gente ver como é

que fica beleza e aí vamos fazer agora essa parte do nome rating que é essa parte aqui né e a parte do preço lá então continuando aqui então vamos fazer a Nossa classe nome traço rating vai ter o display do tipo Flex o justify content dele vai ser oace between jogar pros lados né pros cantinhos aqui os itens e a gente pode dar um pading top 10 pixels pra gente fazer um afastamento Zinho um preenchimento na parte de cima certo o nome do produto a gente pode colocar assim ó vamos criar uma classe aqui chamado

color gelo e aí a gente pode colocar aqui a color com a variável gelo Aqui ó seria um cinzinha e a gente pode colocar essa classe aqui ó no nome do item a gente coloca o Color gelo na verdade não vai ficar muito bom né ficou muito Claro na verdade se color color Grey Vamos colocar aqui ó color Grey então color Grey Vamos colocar um cinza aqui para Grey aí nome do item já fica melhor assim e aqui essa nossa estrelinha a gente pode colocar Então essa classe MDI Star Aqui ó que é a estrelinha

a gente Pode colocar então ela vai ter uma cor Orange laranja ó para ficar a estrelinha assim dessa forma Deixa eu só colocar esse color Grey no segundo item aqui que a gente já tinha copiado né na verdade no primeiro item aqui Opa colocar classe aqui color Grey beleza só pra gente deixar então aqui as notinhas um pouco mais destacadas ó a notinha ela é um Pou mais Escurinha a gente pode colocar aqui ó vamos colocar uma classe aqui no nosso spam vou chamar de bold aqui que é um e também vou fazer ela se

afastar um pouquinho daquele canto lá a gente pode colocar assim margem right para ela entrar um pouquinho para dentro aqui né colocar no outro aqui também porque acabei como eu fiz dois aí tudo que eu tenho que fazer eu tenho que replicar na verdade verade eu vou Deletar esse segundo aqui ó item Card E aí só depois que a gente terminar o primeiro a gente vai para aquele outro a gente adiciona mais um item aqui beleza vamos fazer o price aqui também vamos usar aqui o o Bold né Vamos criar aqui esse bold que seria

o bold Font weight Vamos colocar bold colocar 900 aqui para ver se fica isso aí ó fica legal 800 800 fica joia E aí a gente vai colocar também o Bold aqui no nosso preço Price Bold show vamos fazer só aqui a questão do preço ponto Price e aqui a gente pode aumentar um pouquinho da fonte fonte size colocar 20 pixels para ver se fica um pouquinho maior aí joinha então ficou legal né o nosso item aqui nome do item a notinha a gente pode agora replicar esse nosso item do card aqui vou copiar cont

control c Vamos colocar mais um aqui ó control V aí nós temos dois itens Agora sim né e aqui a gente vai colocar um outro aqui ó XBOX só pra gente ter Diferenciado Então vou colocar aqui escrito Xbox series series x beleza tá legalzinho deixa eu dar uma olhada lá nosso padrão aqui legal aqui até até Talvez o Bold não seria tão necessário né pessoal deixa eu ver assim o Bold fica melhor aqui PR essa parte do do preço ó preferi mais sem o aqui ó fica mais Simpático beleza só que aí o que que

acontece ó Conforme a gente vai tendo os tamanhos aqui também ó dá uma reparada ó ele vai ficar sempre dois itens né se a gente colocar mais um item aqui vamos pegar fazer mais um contrl C aqui ó control c deixa eu diminuir aqui colocar mais um item Card aqui ó e mais um aqui embaixo ainda vamos colocar quatro quatro itens ó Conforme a gente for aumentando Eles sempre vão ficar assim nessa disposição então a gente poderia e tá fazendo em telas de tamanho maior né ele tem uma disposição diferenciada então que que a gente

pode fazer a gente pode vir aqui no nosso index e fazer aqui Uma media Carry né então fazer @mia vou fazer assim min Edit tamanho mínimo de 992 pixels o que que eu quero que aconteça Então nesse tamanho de telas para cima eu vou querer que o meu item Card que é esse aqui que a gente fez Aqui em cima ele T tamanho de 45% que é 45 45 somando duis dá 90 mas daí tem as marzin a gente a gente tá considerando isso né então aqui nesse item Card a gente vai querer que em

tamanhos maiores a gente vai querer que o Flex dele seja de 30% para que caiba três né Então olha só conforme a gente for aumentando aqui agora ó deixa eu pegar aqui a pontinha quando passar de 992 ó já fica três na mesma linha olha só que legal Joia E aí a gente pode fazer que em tamanhos ainda maior né no caso de 1200 para cima pode copiar esse aqui colar 1200 para cima a gente vai querer que esteja 20% a cabe 4 numa linha só então vai para TR depois foi para qu olha só

que legal fica bem bem joia né essa disposição dos itens aqui em tamanhos de resolução diferente então você vê que você consegue ir trabalhando né com a responsividade Medida que você vai desenvolvendo aqui os seus projetinhos né então a gente tem aqui os itens na verdade para ficar legal isso aqui a gente pode colocar outras imagens aqui só pra gente ver visualmente como é que vai ficar né aqui a gente pode trocar para Macbook e aqui esse outro a gente pode trocar para iPhone ó e aí a gente vai precisar agora dar um espaçamento aqui

ó porque eu não consigo rolar para ver esses aqui tá Vendo tá faltando espaço aqui por causa que é é por causa desse menu e tal a gente vai ter que dar um espaçamento maior aqui pra gente ter visualizar esses itens de baixo né e a gente pode fazer isso aqui colocando umas quebras de linha aqui embaixo né Deixa eu ver onde é que fecha o item Card Fecha aqui né então aqui vai fechar o produtos Então logo aqui abaixo do produtos a gente pode colocar uns BRS aqui Ó que a que de linha né

para ele poder abrir a rolagem para nós eu vou colocar mais um pouco aqui dá para fazer com margem no CSS também ó mas aqui deu até muita sobra vamos voltar aqui ó legal daí ele vai aparecer até o último aqui ele faz a rolagem aí repara que conforme rolagem que a gente for tendo aqui no miolo no peixo contente a parte de cima ele se mantém intacto ó tá vendo que a gente fez a parte da da busca lá em cima do nome do aplicativo a bolsinha do Nosso shopping né da compra ela continua

fixa lá e a parte de baixo também que é o que a gente queria mesmo né aí assim vai ficar bem legal bem Joia eu achei que tá um pouco grudado aqui pessoal ó Um item do outro então a gente pode vir aqui ó onde a gente tem o nosso item Card e margem Bottom a gente pode aumentar por uns 10 pixels ó para dar um afastamento maior 15 pixels aí ó ele ficar um pouquinho mais afastado um do outro deixa eu ver lá no nosso modelo Como é que fica ó ó ele fica com

esse afastamento Zinho e de lateral ele também tá um pouquinho mais vamos ver se com 10 pixels fica joia margem à direita né E aí para encaixar isso a gente pode fazer assim ó produtos que é onde tá contido tudo isso margem a gente pode colocar alto para ele ficar no Centro ah na verd a gente já tá usando aqui o Deixa eu só lembrar aqui que a gente fez Aqui no nosso produtos a gente tá com margem top display Flex Aline Center justify content start deixa eu ver o justify content Center ficar Centralizado vai

fazer diferen não fez diferença nenhuma né mas tá bom Aqui eu preferia até talvez com menos espaçamento mesmo fica mais mais interessante assim esse era o padrão que eu tava usando no meu aqui também né dando uma olhada aqui ele tem pouco Espaçamento Mas beleza pessoal então tá feita aqui a nossa página inicial né olha só que legal Que maneiro que bonito que ficou né ficou bem joia mesmo os itens aqui as categorias né ficou bem bem legal mesmo agora a gente vai precisar então construir a página de detalhes Então a gente vai pra segunda

página aqui que é essa página de detalhes e depois pra terceira página que é a página de carrinho né uma vez feito o front end aqui terminado o nosso Front end aí a gente vai pra parte lógica de puxar os dados alimentar ele né mas eu gosto sempre de começar construindo pela parte do frontend a parte visual para depois a alimentação dele com os dados e que vai formar aqui a estrutura do aplicativo fica mais fácil Se a gente já tiver o frontend feito então vamos lá vamos pra página de detalhes então pra gente criar

a página de detalhes a gente vai ter que criar uma nova página aqui a gente pode dar um Um control c aqui nesse link 4 né dá um control V Na verdade eu dá para pegar até da index que já tem alguns alguns pontos que a gente pode est utilizando né então vou pegar da index mesmo dar um C cont control V Vou colocar aqui o nome da página como detalhes vai ser a página onde a gente vai ter esse detalhamento certo e aqui a gente vai trocar o nome aqui da página para detalhes E

a gente vai precisar criar a rota aqui no Roots Então vamos lá para baixo criar uma nova rota rota aqui né copiar colar uma nova rota detalhes aqui vai ser detalhes HTML certo beleza então só pra gente diferenciar aqui ó Nessa na página de detalhes eu vou trocar aqui onde tá escrito Green Tech só para detalhes pra gente saber que essa página de detalhes Porque ela vai tá igual a nossa index né só pra gente ver se vai funcionar E aí pra gente poder trabalhar com essa página de detalhes pessoal aqui no nosso Roots a

gente pode fazer assim que inicializar index que é essa página inicial ele já jogar a gente pra página de detalhes que é para ficar mais fácil da gente poder tá trabalhando E para isso a gente pode usar o comando app. viws P m.r. Navegate E aí a gente manda ele mandar a gente pra página de detalhes isso aqui é um comandinho né linha de aqui pra gente dizer pro Framework s para Que rota a gente quer que seja enviado ou para onde quer que ele navegue Então se a gente coloca assim dessa forma ele vai

entender que já é para jogar a gente pra página de detalhes E aí tá lá ó já tem a página de detalhes ali pra gente certo então vamos lá na página detalhes e vamos Apagar o Que a gente não vai querer né então a gente não vai querer esse nave topo aqui vamos apagar isso tudo aqui é a gente vai apagar na verdade nós vamos Apagar Praticamente tudo né a gente vai ter aqui o o page content vamos apagar aqui esse blo que tem aqui ó vai ficar Zerado ó Então a nossa página detalhes tá

zerado e o seguinte quando entrar na página detalhes a gente vai querer que esse menu que é o menu que acompanha Cada página né ele desapareça então o que que a gente vai ter que fazer a gente vai ter que lá no nosso na nossa inicialização a gente vai ter que ir lá no nosso index onde a gente tem esse menu aqui ó vai tá lá em cima o nosso toolbar aqui ó a gente vai colocar um ID para ele a gente vai chamar de menu principal tá menu principal E aí lá no nosso Roots

a gente vai querer que antes que inicialize a nossa rota detalhes ó antes da página ser exibida tá vendo Aqui o que que a gente pode fazer a gente pode pegar esse nosso menu detalhes Então vamos pegar o seletor menu principal né o melhor dizendo que é o menu lá do nosso index e a gente vai pedir para desaparecer isso aqui ó Hide e a gente pode colocar Fast assim um efeito Então olha o que que acontece você viu ali o efeitinho que ele deu né se eu rodar aqui de novo ó ele sai o

menu ele tipo como se minimizasse esse menu principal e e quando a gente volta Para a nossa index antes de inicializar aqui ó a gente vai querer que o nosso menu principal Ele mostre show show Fast certo então a gente pode fazer o seguinte só pra gente ver esse efeito eu vou tirar essa essa rota de detalhes que vai para lá e vou colocar num desses itens pra gente clicar só pra gente ver o funcionamento disso então aqui na index a gente pode achar ali onde a gente vai ter um item desses ó item Card

pegando no primeiro que tiver aqui ó e vou pedir para mandar a gente para rota de detalhes aqui dentro do HF a gente aponta que a gente quer ir para detalhes o nome da Rota e quando clicar agora repara aqui no menu olha cliquei aqui o menu sumiu tá vendo que legal e aí a gente tem como é agora trabalhar com essa página de detalhes aqui bem legal então só para ver se táa funcionando o efeito do menu né depois a gente pode fazer aqui em Detalhe só PR gente ver se funcion isso aqui mesmo

vou fazer uma HF apontando PR voltar PR index Vou colocar aqui voltar só pra gente ver se vai funcionar cliquei aqui o menu sumiu clicar aqui em cima no voltar ó voltei e o menu apareceu Olha que legal efeito que fica lá embaixo tá vendo efeitinho bem bem joia mesmo beleza então vamos agora aqui que é pra gente jogada lá para detalhes pra gente poder fazer aqui essa página de detalhes Então como é que vai funcionar essa página de detalhes a gente tem aqui ó uma área onde vai aparecer uma imagem uma área com fundo

gelo né que tem a imagem aqui em cima um menuzinho com botões fixos que ficam aqui nessa área depois a gente tem a área dos detalhes do do do item e aqui embaixo a gente vai ter um Tab bar parecido com que aquele que a gente tem na nossa index só que aqui né onde a gente vai ter um botão e Ali o preço né os valores das coisas aqui na parte de baixo né então a gente pode fazer isso agora então aqui na nossa página detalhes aqui a gente tem um tob Tab botton aqui

né a gente pode recortar aqui Pessoal esse tob que é do padrão lá da página inicial e dentro aqui da nossa página detalhes ó um desse aqui que na verdade é uma cópia lá da index né então a gente vai apagar esse conteúdo dentro dele aqui V tirar tudo isso é daqui e vai ser uma Área onde a gente vai ter aqui na verdade só um um preço né E também um botão Então a gente vai fazer duas divides aqui né então a gente pode ter uma primeira div que é onde vai ser o valor

tipo 1200 por exemplo e uma outra aqui que vai ter o nosso botão vamos fazer aqui um buton pr adicionar no carrinho adicionar carrinho certo basicamente isso daqui Claro antes da gente estilizar Né preço e o botão de carrinho Beleza então isso vai ficar lá embaixo dentro do conteúdo da nossa página Então a gente vai precisar fazer parte aqui do dentro então a gente pode fazer aqui div uma classe que eu vou chamar de prod prod quer dizer detalhes do produto dentro desse prod a gente vai ter uma div com uma classe que vou chamar

de Bons top que é onde vai ficar os botões aqueles botes principais lá colocar três botões fazer de link aqui vai ser a primeira imagem vai ser um de voltar um botãozinho de voltar né então a gente pode ir até lá no remix icon e ver aqui Arrow é esse daqui que a gente vai querer ó Aron left S vou pegar esse aqui que é o de voltar botar esse esse daqui vamos ver lá que tá Ficando botãozinho de voltar vamos colocar um botãozinho de Favorito que vai ser o coração né aqui vai ser o

hert vai ter lá na nossa index que eu posso pegar aqui ó o Heart Heart Line que é o coração e um compartilhar que vai ser um share aqui né share Compartilhar esse aqui a gente pode pegar esse daqui ó share aí vamos colocar mais aqui HF e aqui o botãozinho de compartilhar Beleza então esses vão ser os botões que vão ficar no topo lá os três botõezinhos e nós vamos ter uma imagem né que ess é a imagem principal do produto então a gente pode colocar aqui um src e a gente pode colocar aqui

uma imagem que tem por padrão que é esse default.png ó que é tipo uma caixinha que é é como se não tem produto nenhum né pra gente deixar assim dessa forma agora vamos trabalhar com o CSS aqui da Nossa página de detalhes então o que que a gente vai fazer lá no nosso na pasta CSS a gente vai criar um novo arquivo que eu vou chamar de detalhes pcss que é onde a gente vai colocar aqui tudo que for as regras dessa página de detalhes lá na nossa index HTML a gente vai referenciar mais esse

arquivo CSS vai ser seu detalhes P CSS beleza e aí a gente nesse detalhes pcss a gente vai pegar aqui a o esquema de cores também colocar aqui Em cima deixar já colocado E aí vamos começar agora a fazer as devidas modificações que a gente vai precisar né então primeiro foi o pro de detail assim que é essa área da parte de cima que vai ser essa área cinza aqui ó tá vendo essa área aqui gelo maior vamos fazer ela lá prod D né prodil aqui a gente vai colocar o background a cor do fundo

vai ser gelo ó a área é assim a largura vai ser De 100% e a altura nós vamos passar uma altura fixa de 450 pi certo então vai pegar essa áre zinha aqui ok nós vamos dizer que o display vai ser do tipo Flex alinhar os itens ao centro ó deixar tudo no centro o justify content dele também vai ser Center deixar tudo Centralizado e ele vai ter o posicionamento relativo position relativo por qu a gente vai usar o posicionamento absoluto para essa Parte dos botões pra gente dizer que em relação a essa área aqui

que é do pro deta a gente vai querer que os botões Fiquem lá na parte de cima certo a gente já criou aqui então o buton stop né que vai ser a classe onde a gente vai ter isso então a gente pode colocar aqui que vai ter buton Stop essa classe aí e a gente vai fazer que o display vai ser Flex a gente vai colocar um Edit de 100% só pra gente ver ISO a gente pode colocar um background White aqui só para Vocês verem né a área que vai pegar esse aqui e a

gente vai colocar o posicionamento dele position como sendo absoluto E aí agora a gente vai poder passar onde a gente quer que ele encaixe então do Topo a gente vai querer que fique 20 pixels ó a gente sobe ele lá para cima aí para separar esses itens a gente vai fazer um justify content como sendo Space between espaço entre eles a gente vai fazer aí eles ficar com o espaçamento ordenado e o alinhamento o Align itens Vamos colocar Center certo para ficar bem ao centro a gente pode tirar esse background White que era só para

vocês verem a área que tá ficando ali a área dos botões lá em cima né a imagem aqui pessoal a gente pode passar um tamanho máximo também um prod detail IMG para que a gente possa ter depois quando a gente for colocar a imagem no tamanho máximo de 400 pixels para elas não estourarem aqui o tamanho tá o Max Edit de 400 pixels certo e agora vamos Fazer esses botões aqui para ficar joinha Então vamos fazer os nossos botons Então vai ser o buton stop a que é o nosso link e aí a gente vai

fazer que eles vão ter a largura de 40 piels a altura de 40 pixels o background deles a gente pode colocar que vai ser branco Ó lá então fazendo os nossos botões aí bord radios a borda arredondada vai ser de 50% para ficar arredondado beleza pra gente alinhar Tudo isso vamos fazer o display Flex o align itens Center e o justify content Center também Beleza então olha como é que tá ficando joinha né a cor deles color vai ser a variável Preto aqui ó para ficar os botões assim e uma borda border de um pixel

Sid A gente pode colocar aqui a variável gelo né só para dar um efeitinho de borda em volta dele legal o tamanho da fonte a gente pode aumentar um pouquinho fonte size 18 Pixels aumentar o tamanho dos ícones só que aí que que acontece pessoal como a gente tá usando o Space between aqui nos no botom tops ele vai dar a separação uniforme entre cada um dos itens certo só que se a gente olhar lá no nosso padrão aqui ó o primeiro item vai ficar bem à esquerda e os outros dois itens do lado direito

certo Então como que a gente pode fazer para determinar isso existe um truque aqui no CSS que eu gosto de fazer quando a gente precisa Fazer essa separação assim que que você vai fazer você vai pegar esse teu seletor boton zar cada botão desse E aí você vai especificar que você quer pegar o primeiro para você fazer isso você pode usar o seletor first shield assim ó o primeiro filho você quer dizer que quer pegar o primeiro item Então imagina que a gente tem o buton stop tá aqui esse é o buton stop a gente

tem o a tag a a gente tá selecionando e a gente vai querer que Pega o primeiro deles o primeiro filho é isso que o shield faz e esse primeiro filho o que que eu vou passar para ele eu vou dizer que a margem à esquerda margem left vai ser de 20 pixs só pra gente afastar ele um pouquinho aqui do Canto olha lá o que que vai acontecer ele afastou um pouquinho aqui e agora o que a gente tem à direita a gente vai querer que seja automático Então olha só você faz margem right

margem à direita alto quando você fizer isso olha só o Que vai acontecer ele automaticamente vai jogar os itens os dois itens lá pro canto de lá olha só que truque legal de CSS aqui né Então você já fica com os alinhamentos certinhos e agora que que você pode fazer agora para pegar o último aqui ó pra gente trabalhar com esse último botão a gente pode pegar copiar e colar só que em vez de fazer first ti aqui o o primeiro filho você faz L TI que é o último filho e aí aqui a gente

pode fazer o seguinte que da Direita margem direita eu quero que seja 20 pixels e a margem à esquerda que é o outro botão aqui o botão do coração que a gente tem aqui do lado a margem esquerda eu vou querer dar uma espaçamento de 5 pixels aí olha só Aí eu tenho controle aqui ó por exemplo se eu colocar 25 pixels ó tem o afastamento dele aqui nesse sentido e aqui esse Margin right é o afastamento nesse sentido Então olha só que que legal né pessoal como é que fica fica bem joinha Mesmo aqui

a parte dos botões Então os botões estão feitos a gente inclusive agora pode aqui no nosso detalhes nesse primeiro link que é o de voltar aqui o botão de voltar a gente pode falar para ele voltar para a index né ó index Então a gente tem a na página inicial Voltamos para index ó clicar aqui para ir para detalhes vamos para detalhes olha só que joia ó e ó o menu lá embaixo sumido ó sumindo que legal bonitinho né joia beleza então a Gente fez a parte aqui de cima né essa parte aqui essa área

agora a gente vai ter que fazer essa área do Miolo aqui né então a gente tem aqui prod details que seria esse daqui aí agora a gente pode continuar fazendo próximo etapa a gente vai chamar isso ali de div Class prod content quer dizer o conteúdo do produto aqui né a gente aqui pode usar uma div com Class Block que é para tudo ficar um pouquinho mais para dentro né E aí a Gente pode passar o seguinte a gente vai fazer primeira linha aqui ó vai ser aqui o nome do do produto e um botãozinho

aqui uma espécie de um botãozinho né de um uma tag ali dizendo que que ele tá em promoção ou coisa e tal então a gente pode fazer assim a gente pode fazer uma div com a classe aqui eu vou chamar de linha Line certo e aqui eu vou colocar em o nome do produto Vou Colocar Assim nome do produto Vou Colocar assim genérico tá ó lá nome do produto e a gente vai ter também o botão né fazer aqui um aqui vou colocar escrito promoção assim certo então Vamos ajeitar essa linha aqui vamos lá pro

nosso detalhes e vamos fazer essa linha aqui nós vamos fazer um efeito para que essa parte da área dos produtos ele possa subir né porque aqui assim ó você vai reparar que ele tem os cantos arredondados aqui e Ele fica um pouquinho para cima da área onde a gente tem o nosso produto ali certo então que que a gente pode fazer a faz ass content que o conteúdo ali cont a gente vai querer que ele tenha background Branco a gente vai querer que a bord border top Radi quer dizer a borda do Topo e direita

a gente quer que ela seja arredondada e a gente vai passar aqui 20 PI e a gente vai fazer a mesma coisa com a border top left de 20 pixels aqui não vai aparecer porque o fundo do nosso aplicativo é branco e como a gente tá fazendo borda arredondada Branca a gente não enxerga então o que que a gente vai fazer a gente vai pegar toda essa área aqui do do prod content e trazer ela para cima da área que a gente tem desse cinza aqui e a gente pode fazer isso usando o sistema de

Margem negativa então você Pode fazer assim ó margem top margem top e aqui você passa que você quer menos 50 pixels que eu quero que ela volte 50 pixels para cima ó subiu para lá tá vendo que os itens todos foram para cima Então é isso que o margem top faz ele subiu para lá só que daí a gente tem que fazer isso ficar por cima daqui dessa outra área né então a gente pode fazer assim que isso aqui vai ter uma posicionamento relativo ó lá já apareceu e a gente pode colocar Aqui o zex

n a qual camada vai ficar acima de qual a gente pode colocar 99 que já vai ficar maior do que a outra lá né Deixa eu só ajeitar aqui zex 99 olha só que maneira então ele subiu um pouquinho para cima e aí agora a gente enxerga a borda arredondada porque a gente puxou essa parte do prod contente para cima legal dessa forma fica mais visível ali essa essa área de baixo aqui vamos continuar Então vamos lá fazer a nossa linha Line a gente vai fazer o Display dela sendo Flex o alinhamento dos itens vamos

fazer Center aí para cada um ir para um canto aqui a gente vai colocar o justify content Space between fica em cada lado aqui o Flex Direction dele a gente pode fazer flex flow né a gente pode colocar R Wap dig errado flex flow rap beleza e agora para dar certo a gente só vai precisar trocar o tamanho desse botão porque o botão já vem pro padrão com um tamanho ali de 100% então aqui a gente vai colocar aqui uma classe Sale não promo Vou Colocar assim ó promo btn promo btn aqui a gente pode

fazer que o nosso promo btn vai ter a largura de 30% não ser tão grande ó ficar lá no cantinho background a gente esse aqui vai ser uma cor diferente então a gente vai fazer aqui um e F4 d 4 d Vai ser tipo Tom de tomate umaa coisa assim border radios Vamos colocar de 8 pixels vamos tirar a borda dele padrão Vamos colocar n então só deixar arredondados para ele ficar gordinho e a cor color White para ele ficar branco aqui na verdade que usar a nossa variável branco aqui né Beleza Vamos aumentar o

tamanho dessas Fontes a gente pode fazer aqui que o Line B Font size a gente pode colocar 20 pixels que o b é essa é o nome do produto aqui né para aumentar o nome do produto certo e aqui a gente pode colocar uma margem né margem top para ele afastar um pouco é pading top D um preenchimento isso para ele afastar um pouquinho lá da parte de cima Beleza então fizemos a linha ali onde vai ter o nome do produto e o botão escrito promoção né e agora a gente vai Fazer aqui essa parte

aqui dos botõezinhos né de de rating né De quantas estrelinhas de like de reviews vamos fazer essa linha de baixo então abaixo aqui da onde a gente tem essa nossa Line aqui a gente pode fazer uma div com a classe display flex com alinhamento dos itens ao centro justify content a gente pode colocar também vamos colocar start né tem começar no começo e aqui a gente vai colocar os Botões então a gente pode fazer aqui um buton aqui vai ser a a nota aqui né Deixa eu ver aqui é Estrela né então a gente pode

colocar aqui e CL MD MD Star e aqui uma nota 4.8 por exemplo beleza vamos fazer mais um botão que vai ser o botão de like né aqui a gente pode colocar 90% é por porcentagem a gente pode ver aqui o ícone de like do Remix like like não t tb aqui ó tb up é esse aí que a gente vai precisar e ele deixa eu ver se ele é vazado ou ele é interiço ele é interiço então a gente vai pegar esse up aqui ó e vamos colocar aqui no lugar dessa estrelinha aqui tá

lá então tem o botão e mais escrito ali review né a gente pode colocar aqui um spam E aí 110 reviews Re viws agora vamos estilizar esses botõezinhos né nesse estilinho aqui ó que é um aqui comzinha então a gente pode colocar aqui a classe btn A gente pode colocar rates n que seria de das notas nét rates Vou Colocar assim e aí aqui no nosso CSS a gente pode fazer então aqui btn rates com uma borda de Pi sólida a gente pode aqui um Grey um cinza para ver como é que vai ficar e

border radios a gente pode colocar de 20 Pixels um pading a gente pode colocar aqui de 5 pixels para cima e para baixo 10 pixels na esquerda e na direita background a gente vai colocar nenhum E aí a gente pode colocar uma margem à direita marg right de 5 pixels um Edit fixo de 80 pixels por cada botão ó lá joinha Ficou maneiro né pessoal ficou bem legalzinho esse daqui e aí a gente precisa colocar al no no ícone do do tamb né da aqui Dazinha aqui ó do botãozinho tem que ser verde né a

gente pode pegar aqui o a classe dele colando o nosso ícone de t e a gente pode colocar que a cor dele color vai ser a nossa variável Verde aqui legal joia eh talvez vai ter que aumentar um pouquinho o tamanho dessas da fonte aqui né desses desses ícones ó eles estão meio meio pequenotes né na Verdade tudo aqui Talvez teria que ter uma fonte um pouquinho maior deixa eu ver como é que vai ficar o Font size 16 pixels Ó ficou um pouquinho melhor né mas os ícones propriamente ditos a gente pode fazer um

pouquinho maior aqui a gente pode fazer assim ó ah deixa eu ver aqui a gente tem o ícone né a gente pode fazer aqui o betn rates e que é o ícone F size dele a gente pode fazer 22 pixels para ser um pouquinho maior né 24 Pixels daí ficou muito grande 22 deixa eu ver aqui e só para esse aqui ficar bem alinhado então vamos colocar aqui um display Flex E aí a gente pode colocar o align item Center e oy content Space between E aí vai ficar com um espaçamento padronizado né Não achei

que ficou muito legal não não gostei eu acho que eu vou deixar tudo num tamanho padrão aqui mesmo eu preferi assim dessa forma ó Acho que fica mais joia né esse cinza também tá muito escuro deixa eu pegar um outro tom de cinza aqui ó 50 Tons de Cinza né Vamos pegar aqui um cinza mais mais clarinho um pouco ó diminuir um pouquinho aqui aí esse aí ficou joia né Opa e aí a gente tem aqui a parte dos reviews né que a gente pode usar um color deixa eu ver que a gente feito aqui

a gente pode usar uma cor gelo nele né Essa parte do reviews aqui ó a gente pode colocar a classe aqui Reviews e aqui a gente pode colocar ponto reviews a gente pode colocar color var gelo é fica muito fica muito claro né Vamos deixar um Grey aqui um cinza meso beleza tá ficando legal né ficando joinha a gente pode colocar aqui uma margem deixa eu ver aqui a gente pode colocar uma margem à esquerda margem Left ficou mais para dentro né Deixa eu ver se para dar um afastamento aqui nesse aqui também a gente

pode colocar margem left para ficar um pouquinho mais para dentro e aqui deixa eu ver se é meio grudado ele é mais afastado né essa parte aqui então a gente pode dar aqui um margem top ó para afastar um pouquinho assim legal e agora a gente pode fazer aqui o conteúdo né então aqui a gente tem a parte aqui dessa área ess a Primeira parte Line então é essa linha aqui essa segunda parte é essa segunda aqui vamos fazer mais uma div aqui com uma classe display Flex align itens Center justify content a gente pode

colocar Center também e aqui a gente pode colocar um p Loren né pelor pra gente ter aqui um o que a gente teria como se fosse uma descrição do item né que a gente pode colocar eh na verdade é bom ter essa cor mais Escura né eu ia dizer para colocar de repente uma cor um pouquinho mais clara mas acho que assim fica bom né E essa parte ele é meio próximo realmente da Ali dos dos itens que a gente tem aqui né deixa eu ver se vai ficar bom se a gente colocar ass margem

em todos os sentidos aqui ó não não ficou bom não top tá então a gente vai ter aqui o texto né uma descrição Zinha curta e aqui embaixo a gente vai ter aqui uma tabelinha que a Gente vai colocar que é uma tabelinha aí de características e detalhes né que a gente pode tá colocando então baixo aqui da descrição a gente pode estar fazendo essa tabelinha Então vamos fazer aqui uma uma tabela dentro dessa tabela a gente vai colocar aqui uma linha com o título de cabeçalho característica Então esse vai ser o primeiro primeiro item

característica e o segundo item th Vai ser detalhes característica e detalhes E aí aqui dentro a gente vai ter o as linhas propriamente ditas dessa característica e detalhe né a gente pode colocar aqui já de exemplo TR e aqui a gente pode colocar TD e bonito aqui a gente pode colocar um outro TD aqui vai o detalhe mais Detalhado e agora vamos dar ajeitada nessa nossa tabela aqui no nosso CSS né então a gente vai fazer assim seguinte forma tablea tabela ela vai ter uma largura de 100% border colapse a gente coloca como sendo colapse

e margem bot marg baixo de 20 pixs e agora a gente vai fazer o nosso th e o nosso TD V ter um pad de 12 pi texto alinhado ao Centro a gente vai fazer bord embaixo B bot um pxid colocar umzinho aqui DDD aí a gente pode colocar aqui a borda à direita border right vai ser a mesma coisa um pixel Sid DDD e border left Vamos colocar um pixel Sid DDD beleza e aí a parte do título que vai ser o nosso th sozinho né parte do título h a gente coloca que o

background dele vai ser DDD aqui ó dessa forma aí a Gente fica com uma tabelinha bem bonitinha né E aí para ter mais itens é só duplicar aqui as linhas com os conteúdos né ó aqui é outro aqui vai outro detalhe n aqui vai detalhe tá E aí a gente vai ter as características e os detalhes aí certo da nossa tabelinha que depois a gente vai preencher dinamicamente certo e agora a gente vai precisar ajeitar essa parte de baixo por último aqui né que é Aqui onde a gente vai ter o preço o botão de

adicionar ao carrinho né a gente vai precisar ajeitar Essa parte aí que tá aqui no nosso tubar aqui ó nessa parte de baixo né então aqui onde a gente tem o preço e o botão do carrinho nós vamos fazer da seguinte forma a gente nesse primeiro item aqui nessa primeira div a gente tem o preço a gente vai colocar aqui uma classe A gente vai chamar de Flex 40 porque que que a gente Vai querer a gente vai querer que seja 40% da área pra parte do preço e os outros 60% vai ser para o

botão Então a gente vai fazer essa diferença então aqui a gente vai colocar um Flex 40 no outro a gente vai colocar um Flex 60 certo então aqui a gente vai colocar essa classe Flex 40 a gente vai colocar aqui o display Flex aqui vai ser de 40% e o outro Flex 60 vai ser de 60 certo então ó um vai pegar 60% o Outro 40% ok aqui a gente também vai colocar no nosso Flex 40 aqui a gente pode colocar diretamente Isso aqui é uma classe do Framework 7 que é o text align Center

que é para alinhar o texto ao centro tá vendo então vai ficar ali dessa forma assim o nosso eh texto e aqui a gente pode colocar um spanz inho né que vai ser o o valor que era tipo assim quanto que custava né então a gente pode colocar assim de de 14400 aí Isso aqui a gente vai colocar Aqui uma classe que a gente vai pode chamar de Riscado certo e deixa eu ver aqui que a gente fez antes o review estava com a col cor Grey né aqui a gente pode colocar Grey assim ó

color Grey color gressa forma daí a gente muda lá na parte de reviews pra gente poder reaproveitar essa classe de de uma forma Mais bonitinha color Grey beleza e aí a gente vem aqui no nosso no preço que era o preço que tinha antes ele vai ser Riscado color gre a gente deixa ele assim então pra gente dizer que ele vai ser Riscado então a gente pode criar aqui a classe Riscado vai ter o text decoration como Line TR isso aqui é para ficar Riscado ó lá a gente pela classe do CSS pela propriedade CSS

determina que ele Vai ficar arriscado E aí a gente vai fazer o seguinte deixa eu ver aqui aqui a gente tem o display Flex nosso tuar a gente vai colocar aqui também ó que ele vai ter o alinhamento align itens Center e o justify content Center também e aqui não a gente vai colocar um outro spam pro preço na verdade a gente pode usar até uma outra tag a gente pode Colocar uma H3 aqui ó ficar maiorzinho ó lá show de bola aí assim fica melhor ó fica mais destacado ali né e aqui a gente

pode colocar uma classe chamada pricing que é tipo o preço a gente pode colocar que a gente não vai querer que tenja tenha pad e nem margem para ele ficar grudado com outro preço que tem ali né E esse pricing aqui a gente pode vir aqui colocar pricing que a gente vai querer que tenha Um Font weight de 80000 ficar mais grosso e um Font size de 22 pixels para ele ficar maior ó lá joinha Então a gente tem o preço Riscado né o preço que é da promoção que que era e não é mais

e agora a gente vai fazer o nosso botão aqui ó esse buton a gente pode colocar uma Class como sendo add cart adicionar o carrinho e vamos fazer aqui o add cart adicionar ao carrinho aí a gente vai Colocar que ele vai ter um wiit de 90% uma altura de 50 piels Vamos colocar um border radios de 15 pixs vamos tirar a borda do botão original para nenhuma né border background dele a cor de fundo vai ser a nossa variável verde e a cor dele vai ser Nossa variável branco e o cursor vai ser Pointer

só para isso aqui é só para quando a gente Tá no navegador ele fica apontando né adicionar ao carrinho legal ficou bem bonito né pessoal bem legal mesmo nosso adicionar o carrinho a gente pode até aumentar um pouquinho a fonte fonte size 18 pixels e a gente pode aumentar aqui o Font weight também para deixar mais grossinho adicionar o carinho para chamar mais atenção certo então beleza pessoal tá feito aqui a nossa página de detalhes genérica né Depois Lembrando Que todos esses valores essas áreas aqui esses dados vão vir lá do nosso backend que vai

alimentar isso aqui então a gente tá fazendo só o genérico aqui né você quiser ver com produto aqui é só vir aqui no detalhes acho aqui onde a gente tem a imagem Vamos colocar aqui do iPhone por exemplo do airpad airpod né ó lá ó lá que jo você pode colocando aqui ó os itens aqui para você ir vendo como é que vai ficar XBox legal aí já dá para ter uma noção De como é que vão ficar as coisas vou deixar aqui esse do Xbox aqui de padrão tá vamos deixar o default que aqui

como não tem nenhum produto ainda certo então nossa página de detalh está feita olha só que joia então ó nossa né Já temos a página inicial e já temos a página de detalhes funcionando e agora vamos fazer a última para nós que é a página do carrinho né deixar ela esteticamente pronta também para depois a gente fazer as partes aqui eh dinâmicas né do Carrinho Então vamos lá começar fazendo a próxima página né então a gente pode criar aqui a gente pode copiar essa página de detalhes aqui cont control c control V renomear Vamos colocar

é carrinho P HTML aí aqui a gente pode mudar aqui o título para carrinho né nossa nova página Vamos criar aqui no roteamento lá no nosso rots Vamos criar mais uma rota de PR rota de carrinho né Vamos criar aqui mais uma rota então ó do Carrinho aqui carrinho e vai para carrinho certo beleza é aqui o carrinho também o menu principal também tem que sumir na verdade a gente pode até fazer aqui quando clica nessa a sacolinha né ir pra pra parte de carrinho mas pra gente ver isso funcionando a gente pode ir lá

na nossa index e mudar aqui a a o roteamento para ir para carrinho agora né aí essa a página de cim tá igual a Porque a gente copiou lá de detalhes né e agora na index a gente vai precisar fazer mais uma referência aqui na index.html.gz e vamos começar os nossos trabalhos deixa eu ir fechando essas outras coisas aqui só para ficar mais tudo organizado né então aqui no carrinho a gente olhar aqui na imagem ó a gente tem um botão daquele de voltar igual a gente tinha aqui nesse do meio do detalhes mas daí

aqui tá diferente Que aqui tá no meio tá um texto né meu carrinho o carrinho e no canto lá um botãozinho com três pontinhos certo Então tá um pouquinho diferente do que a gente tem nesse outro aqui então a gente pode fazer da seguinte forma a gente pode lá no no nosso carrinho P HTML a gente pode vamos Apagar tudo que tem aqui dentro desse vamos Apagar tudo que tem aqui na verdade a gente não vai reaproveitar nada desse padrão aqui ó deixa tudo zeradinho só o botão lá Embaixo que depois a gente vai ter

o pagar a gente ajeita lá certinho certo então vamos pagar apagar o que a gente tem aqui a gente tem o tuar vamos fazer aqui em cima um nave bar Ó então aqui a gente pode fazer uma div com uma classe que eu vou chamar de nave top cart de carrinho certo aqui a gente vai colocar um link um HF apontando por enquanto para lugar nenhum aqui vai ser na verdade um voltar então a gente pode usar aqui uma classe De ícone que vai ser R Arrow a gente pode pegar lá do do detalhes lá

ó o botãozinho de voltar aqui ó na verdade a gente pode copiar meio esses três aqui colocar depois a gente ajeita ó lá tem os três botões aqui né mas o do meio não vai ser não vai ser um link esse do meio vai ser Vamos colocar um strong aqui e aqui a gente vai colocar carrinho a gente pode colocar um ícone de carrinho aqui pegar lá do remix aqui a gente pode colocar Shopping pegar um item de carrinho aqui ó pegar esse shopping Kart aqui carrinho o ícone e lá no canto vai ser três

pontinhos né esses três pontinhos o o o ícone é more deixa eu ver more aqui ó vai ser esse aqui ó more a gente pode copiar esse aqui morf aqui vai ser os três pontinhos Beleza então a gente tem o voltar o carrinho e os três pontinhos agora vamos fazer esse nosso nave top Cart aqui e fazer estilização dele né então a gente pode fazer aqui nave top cart e aqui a gente vai colocar que ele vai ter o display Flex Vamos colocar aqui ele vai ter 100% da largura da tela Vamos colocar aqui ele

vai ter o justify content como Space between que vai ficar um em cada canto ó já vai dar aquela formatação que a gente quer né o background dele vai ser a variável Branco aí vamos colocar aqui um pading um pad de 10 pixs em cima e embaixo zer Pixs esquerda e direita beleza e aí agora a gente vai fazer os botões então a gente faz o nave cart Nav toop cart a né os links aí a gente pode colocar aqui o display vai ser Flex align itens Center justify content Center ficar tudo centraliza vai ser

de 40 pixels para ser o mesmo padrão lá do detalhes né o rate 40 pixels aí a gente pode colocar que a borda vai ser de um pixel sólida aí Gelo ó e aí border radios 50% para ficar redondinho show de bola né e a cor color vamos fazer Preto para ficar com os ícones escuros certo beleza Ah aqui a gente ficou faltando o Aline item Center ó tá vendo que tá desalinhado aqui IT Center que é para alinhar no sentido assim né beleza show de bola e aí a gente pode fazer aquele esquema que

a gente Aprendeu até né para modificar Só Um item determinado a gente pode pegar aqui o nosso seletor e usar aqui o shield né shield para afetar só o primeiro então o primeiro a gente vai fazer uma margem left de 20 pi afastar um pouquinho aqui essa Ponha o shield a gente vai fazer a mesma coisa só que pro outro lado né Marin right aqui o l shield 20 pixels para ele ficar um pouquinho mais para dentro legal show de bola Então a nossa parte de cima aqui tá Feita né lá a parte do carrinho

agora a gente vai fazer a parte propriamente dita do do nosso da nossa listagem aqui né nessa parte aqui a gente a gente vai precisar fazer uma área geral que vai ser alimentada E aí cada um dos itens e dentro desses itens a gente ainda vai ter subdivisões a gente vai ter a divisão aqui do lado que vai ter a imagem depois o lado on a gente vai ter o conteúdo de texto e cada linha dentro Né então a gente vai ter que fazer bem divididinho essa parte aí para ficar certo então vamos voltar lá

no nosso carrinho e agora que a gente já fez a parte do Topo a gente tem também aqui o tob que depois a gente ajeita Vamos pro contente que é a parte do Miolo aqui né do que realmente vai ficar dentro do carrinho aqui então vamos criar uma div aqui com um ID na verdade que a gente vai chamar de lista carrinho vai ser tudo que vai ter dentro aqui da do nosso Carrinho aqui dentro é onde a gente vai colocar as coisas certo então esse lista carrinho lista carrinho vai ter o display do tipo

Flex a gente vai fazer flex flow dele vai ser em coluna que a gente vai querer pegar a área total com invólucro wraap a gente vai fazer uma margem do topo de 20 pixels para afastar um pouquinho da da área de cima e um pading bottom de 280 pixels essa esse pading vai ser para Dar um afastamento lá embaixo para a gente compensar que o tab bar é acaba tampando né a gente tá usando pading para não ter que dar BR que nem a gente fez lá antes na parte do da página inicial né Beleza

vamos fazer então agora a parte de dentro cada um dos itens aqui né então a gente vai fazer assim ó eh Então dentro de lista carrinho Vamos fazer um item né a gente pode colocar até aqui um comentário ó item do Carrinho a gente saber do que se trata esse elemento aqui então a gente vai fazer uma div aqui com uma classe item carrinho aí dentro desse item carrinho a gente vai ter a área da imagem Então a gente vai fazer uma div CL área MG e aqui dentro vai ser Onde vai ficar a imagem

então a gente pode colocar aqui IMG src IMG default a gente pode colocar a caixinha Nis a gente ajeita Isso daqui aí a gente vai ter além da área da imagem a gente vai ter a área de detalhes então a gente pode fazer uma div Class e área details e dentro dessa daqui a gente vai separar ainda em algumas partes então só para você entender a área da imagem é essa área aqui certo a área de Tails é essa área aqui aí a gente vai fazer a o superior o meio e a parte de baixo

que vai est dentro dessa área de taos aqui entendeu pra gente fazer uma fatia vamos Dizer assim do conteúdo ali dentro então a gente pode fazer aqui uma div com a classe sup de área superior que vai ser essa parte aqui ó onde vai ter o título O fechar e aqui uma uma característica do produto certo aí nós vamos fazer depois a uma parte do meio então a gente pode fazer uma div com a Class que a gente pode colocar aqui chamar de Middle de meio né onde a gente vai ter ali o miolo e

a gente vai ter uma última aqui uma última div que a gente pode chamar Aqui de eh preço traço quantidade vai ser a parte de baixo né onde vai ficar os os itens da parte de baixo aqui essa aqui onde vai ficar o preço e o contador certo então na parte de cima aqui na parte superior nós vamos fazer o seguinte aqui nós vamos colocar então um spam esse spam vai ser o nome do produto então aqui a gente pode colocar assim ó XBOX service x né e do lado nós vamos ter um um link

né a HF contando para lugar Nenhum e aqui a gente vai colocar aqui o o nosso ícone de de delete né então a gente pode colocar Class é MDI MDI close na verdade é um fechar é um xizinho né certo Por enquanto tá tudo uma bagunça na verdade a gente já poderia ir organizando essas áreas aqui para a área de imagem área de detalhes já para ele ficar organizado né então vamos fazer o seguinte vamos voltar lá no nosso lista carrinho então a gente pode fazer aqui o IMG Eh fazer o item primeiro o item

carrinho né deixa eu ver aqui carrinho isso a gente fez o lista carrinho agora a gente tem que fazer o item carrinho certo então item carrinho e aqui a gente vai passar os atributos dele a gente vai falar que ele vai ter o display como sendo Flex a gente vai alinhar os itens tudo ao centro a largura dele vai ser de 90% certo e a altura vai ser de 120 pixels a gente pode colocar aqui um Background Blue só para você ver a área que ele vai pegar ó então tá pegando essa área aqui né

para ele ficar Centralizado a gente pode dar um margem alto beleza e border a gente pode colocar a borda embaixo border Bottom e um pixel Solid e aqui a gente vai usar o gelo para fazer uma divisó Zinha embaixo certo então isso aqui era só pra gente ver a área né Essa imagem pessoal ela tá assim muito grande porque a gente não Especificou o tamanho dela ainda né então a gente pode fazer o seguinte a gente pode fazer a área ali das imagens então era área e MG nós vamos dizer que ela vai ter um

Flex de 30% então 30% da área a gente vai pegar pra imagem o restante 70% vai ser pro texto tá então a gente vai colocar que a altura dela vai ser de 100% Vamos colocar que o display dela também vai ser Flex pra gente poder fazer os alinhamentos alinhar os itens Ao centro justificar os conteúdo ao centro também vamos colocar aqui o background vai ser o gelo var gelo ó a área onde vai ficar a imagem ainda ela tá muito esticada porque a gente tem uma imagem muito gigante ali dentro Mas vamos já Vamos ajeitar

isso border radios de 20 pi beleza ficou a áre Zinha dela ali agora a gente vai ajeitar a imagem fazendo um área e MG e MG né pra gente Determinar que o tamanho máximo dessa imagem Max Edit dela vai ser de 120 piels ó lá aí já vai enquadrar ali dentro e a altura vai ser de 120 piels e a gente vai colocar um Object Fit aqui contem que é para ele sempre conter ali dentro o item certo agora a gente vai ter que especificar o tamanho da área aqui do do área de Tails né

que é essa área aqui porque aqui por enquanto esse aqui tá bem maior do que a outra área porque A gente não determinou o tamanho do área de taos aqui né então a gente vai fazer isso agora área de taos a gente vai dizer que ela vai ter um Flex de 70% Olha lá que legal aí já organizou Porque daí a gente determinou aqui que 30% é pra imagem o restante do área de Tails é 70% certo então a gente vai colocar aqui que vai ter um display também tipo Flex a gente vai justificar o

conteúdo ao Centro e a gente vai fazer aqui um flex flow dele sendo em coluna então colum WP a gente vai ter vários itens empilhados certo certo e a altura o vai ser de 100% beleza agora Vamos ajeitar essa parte aqui ó do da linha superiora né que é essa parte aqui né onde a gente tem o título e o xizinho esse sup aqui a gente vai precisar ajeitar is aqui então vamos lá Então sup na parte superiora que que a gente vai querer a gente vai querer que ele tenha o edit largura de 100%

só pra gente ver isso aqui vamos dar um background Vamos colocar aqui um head só pra gente ver ó já pegou 100% beleza Vamos colocar aqui o display vai ser Flex o display vai ser Flex a gente vai fazer um flex flow de linha Row Wap ou melhor no Wap que a gente não quer involucrar isso aqui vai ficar tudo na mesma linha certinho o al it vai ser Center e o justify content vai ser Space between pra gente jogar o x lá pro outro lado ó lá beleza show de bola então já ficou lá

certinho o item a gente vai colocar uma classe agora aqui ó nesse nosso nome do produto Então a gente vai colocar name prod uma classe name prod vamos fazer esse name prod name Prod Vamos colocar que ele vai ter um Font weight mais grosso 600 ficar mais um negritinho assim fonte size de 20 pixels um Margin left de 15 pixels o máximo tamanho máximo dele Max Edit vai ser de 220 pixels que a gente vai especificar um tamanho máximo para esse nome que vai aparecer aqui a gente já vai ver um esquema aqui ó quer

ver ó Se eu colocar uma borda border um PX Solid Black para vocês entenderem a gente vai especificar um tamanho máximo que isso aqui pode ter conforme a o tanto de palavras que a gente tiver dentro do nosso carrinho aqui por exemplo se eu fosse Xbox x da Silva Sauro do além e avante olha só Aí tá vendo que ele tá tendo essa quebra o que a gente vai querer na verdade é que isso aqui Fique uma linha Contínua que vai até lá ó até lá no outro canto certo então o que que a gente

vai fazer aqui a gente vai dizer que a gente vai querer que White Space seja no wrap dessa forma ó ele vai ficar tudo na mesma linha só que olha a área tá vendo a área onde a gente tem a borda é a área que a gente diz que é o tamanho máximo que ele vai poder ter dentro aqui do nosso componente certo que a gente determinou aqui que é 220 pixels Dá até para ser um pouquinho mais Dá para ser um 240 mais ou menos ó dá para ser um pouquinho 250 ainda vai ó

beleza aí a gente vai ter que limitar essa área onde vai ficar o texto se a palavra for muito longa certo pelo menos nessa nessa nesse tamanho de tela depois a gente pode usar uma mídia Carry né para expandir para telas maiores não ter esse problema a gente vai fazer fazer um overflow aqui ó para ele não mostrar um overflow Hidden para ele fazer o corte ali ó cortou E aí a gente vai usar o Text overflow elipses para ele botar os três pontinhos né Ó lá aí ele limita a área onde vai ficar ali

escrit as coisas né Essa borda aqui a gente estava usando só paraa gente visualizar o tamanho certo isso claro para itens aí muito gigantes né então gente deixar aqui o Xbox ser x vai aparecer assim numa boa aí vamos fazer agora o o de deletar aqui né esse nosso botão a gente pode colocar Class delete item e vamos fazer o nosso Delete item a gente pode colocar aqui o fonte size aqui Vamos aumentar o tamanhozinho da fonte dele vai ser 18 pixs para ele ficar maiorzinho Vamos colocar aqui que a cor dele color vai ser

a gente pode colocar aqui uma cor especial ó 9 e 9 e 9 e que é um cinzinha e vamos colocar uma margem da direita margem right de 10 pixels para ele ficar um pouquinho mais para dentro Beleza agora voltando lá no nosso HTML aqui no meio a gente pode colocar Um spam que vai ser aqui o o item né tipo assim uma característica do item por exemplo 1 TB né Ó lá 1 TB aí a gente pode colocar aqui a classe ó Middle seria o meio né o miolo ali spam Vamos colocar aqui a

cor color vai ser Grey cor cinza e a margem left dele vai ser de 15 pi para ele ficar na mesma entrada do outro aqui n né que a gente também tinha colocado ó Nome do produto a gente tinha feito uma margem left de 15 também E aí agora a gente vai fazer lá a parte de preço quantidade né a parte de preço quantidade vai ser essa parte de baixo onde a gente vai ter que colocar ó Conforme aqui a imagem ó vai ter que ser uma áre Zinha com o preço e uma área com

esses botões de menos e um campinho pra gente colocar aqui vai ter um número e um botão de mais Certo então vamos fazer essa parte aqui do preço quantidade aqui a gente vai colocar aqui então Primeira coisa um preço né então vamos colocar um spam eu vou colocar aqui um valor qualquer 9500 99.500 ó aí o valor do do bagulho e aí a gente pode fazer uma div aqui com uma classe que a gente pode chamar de Count que é o contador e dentro a gente vai ter primeiro um link um vamos apontar para lugar

nenhum né vai ter a classe vai ter um menos vai ser um botão De menos a gente vai ter um outro que vai ser um botão de mais então aqui a gente pode colocar classe minos aqui outra a gente pode fazer Plus então menos e mais e no meio daqui a gente vai ter um campo input do Type text que vai começar com o valor em um por padrão foi atéa pro canto né e a gente Pode colocar aqui uma classe nele a gente pode chamar de qtd item que é a quantidade do item certo

beleza então a gente Sumiu os nossos botão lá mas nós já Vamos ajeitar isso aí então lá no preço quantidade nós vamos fazer o seguinte a largura dele o edit vai ser de 100% pra gente enxergar isso a gente pode colocar aqui um back Ground Blue pra gente ver a área né e aqui a gente vai colocar um display como sendo Flex podemos colocar o align itens Center o justify content Space between [Música] e e vamos deixar tudo isso em linha vamos usar um flex flow R no Wap quebrar linha agora vamos determinar os tamanhos

aqui ó desses itens aqui então a gente tem um spam que vai ser aqui onde a gente vai querer que tenha o número e a gente tem Um count que é o contador que a gente vai querer que fique no outro canto né então a gente pode fazer da seguinte forma isso daqui o nosso preço quantidade spam que é onde a gente tem ali o o valor a gente vai querer que tenha um Flex de 50% e o display dele também vai ser Flex a gente vai alinhar os itens ao centro o justify content dele

vai ser Flex start para começar no começo Mesmo né E a gente vai ter o nosso preço quantidade div né que deixa eu ver aqui que a gente chamou de Count né V chamar de Count vai ter um Flex de 50% também ter um display do tipo Flex vai ter um align itens como sendo Center e um justify content vamos sendo Flex start beleza aí já ficou organizado ali os nossos iten zinhos né a gente pode tirar esse background Blue que a gente Estava vendo por que que ele tava lá no canto pessoal sumido porque

a gente não tinha especificado os tamanhos corretamente aqui do Flex e também a área que ele um t então ele acaba pulando para lá uma vez que a gente colocou os alinhamentos de tamanh certos aí eles já se ajustam aqui certinho para nós né então nós temos aqui o preço nós já temos a área aqui vamos dar uma ajeitada agora para ficar parecido com isso daqui Né pessoal tá bem nada a ver aqui ó tem que o preço ficar maior os botões ali esse campo input precisa ficar mais organizadinho né então vamos fazer assim nosso

botão de menos que a gente colocou a classe lá de minos vai ter um display Flex alinhamento ao centro justify content Center o tamanho dele vai ser de 30 pi por 30 pi então altura e o rate vai ser do mesmo Tamanho a gente pode colocar que ele vai ter uma cor cinza color Grey um background a gente vai colocar Branco uma borda de um pixel sólida a gente vai colocar aqui gelo e a gente vai fazer um border radios de 5 pixels para ele ficar arredondadas fonte então fonte size cá 20 pixels para ele

ficar um pouquinho maiorzinho Beleza o botão de mais que é O Plus vai ser a mesma coisa então a gente copia esse aqui cola aqui Plus só que no lugar do background Branco a gente vai colocar o background verde e a cor aqui da do texto Vai ser branco Ó lá beleza só que daí o background Na verdade ele vai ser branco também né e a borda que vai ser verde e a cor vai ser verde aqui eu Confundi tudo verde isso dessa forma aqui Show Beleza e o campo input que é o do meio

aqui ó primeiro que ele tem que ser somente leitura né então a gente pode colocar aqui ó ele vai ser read only somente leitura daí a pessoa não tem como alterar os valores aqui dentro certo e a gente vai ter que também e alterar ele então aqui vamos colocar lá o nosso quantidade de item que é o aqui o nosso campo input primeiro que Ele vai ter uma largura aqui de 30 pixels também ele vai ser pequenininho Vamos colocar que ele vai ter um pading left Vamos colocar um text align Tex Center texto ficar bem

no centro Ó o umzinho aqui né E a gente vai dizer que ele vai ter um background backgound branco branco aqui vamos dizer que é important aí ó Beleza e aqui no nosso preço antes a gente faltou a gente pôr aqui ó aqui ó preço quantidade spam aqui ficou faltando a gente colocar um tamanho um pouquinho maior de fonte né Fonte size Vamos colocar uns 15 pixels ó para ficar um pouquinho maior Vamos colocar aqui um Font weight mais escurinho mas né 600 e vamos dar uma margem left de 15 pixels né que ficou faltando

aqui para ele ficar mais alinhadinho Ó legal joia eh deixa eu ver aqui esses botões eu acho que meio engraçado isso aqui né Deixa eu ver a gente chegou a fazer o preço quantidade deixa eu ver preço quantidade a gente faltou fazer aqui alinhamento ao centro Space between tá certinho porque dá uma certa impressão de que ele tá meio desalinhado aqui né Deixa eu ver se eu aumentar um pouquinho o tamanho dessa fonte Aquiar 20 pixels é 18 pixels tá bom né mas esse nosso campo input Parece que ficou muito grande beleza mas tá Depois

a gente qualquer coisa ajeita isso aqui né ó porque ficou ficou realmente meio grandote isso aqui né Deixa eu diminuir um pouco para ver aqui 20 Pixels 10 pixels engraçado ele não muda esse aqui colocar um important aqui é colocar aumentar a largura disso aqui 50 pixels aqui 50 pixels aqui beleza isso aqui é frescuragem né aqui o nossa a nossa linha aqui ó deixa eu ver o item item carrinho aqui a gente tem Podia colocar aqui uma um pading não 10 pixels em cima embaixo e zero pixels na esquerda e na Direita para dar

um certo afastamento Zinho aqui beleza tá joia tá legal né né pessoal já tá bem interessante isso aqui depois a gente logicamente vai fazer isso aqui ser dinâmico funcionar mas de parte estética que tá bem legalzinha essa parte aqui né a gente pode pode até colocar um outro aqui fazer uma cópia pra gente ver como é que vai ficar com mais de um item né aqui a gente tem o item do carrinho eu recolhi aqui no cantinho vou copiar e vou colocar mais Um item no carrinho aqui ó pra gente ver como é que vai

ficar com vários itens legal show de bola aí precisamos fazer agora a parte de baixo aqui ó então a parte de baixo a gente vai ter um botãozinho bar aqui PR essa parte de total né e frete e tal vai ficar um pouquinho mais para cima aqui a gente vai precisar de dois aqui um que vai ficar o botão que a gente já tem um lá embaixo e um outro que a gente vai querer ficar um Pouquinho mais para cima desse então a gente tem aqui ó Tab bar Então a gente tem o botão aqui

adicionar o carrinho né a gente pode até tirar esse outro aqui que a gente tinha um valor e a gente pode fazer aqui ó um Flex 100 criar essa classe e aqui a gente coloca aqui ó Flex 100 Flex 100 E aí você pode colocar assim que vai ser Flex 1 Flex 1 é de 100% certo então aqui vai ficar certinho assim deixa eu ver se eu coloco um Margem alto text Center isso aí já para deixar o botão ali alinhado ao centro a gente usando text Aline como a gente tá tratando aqui do botão

como sendo um botãozinho aqui aí dá pra gente alinhar usando essa esse esquema aqui né E aqui vamos lá o tic teec já tá fritando aí se você tá acompanhando eu desde o começo o teu também deve tá né O meu já tá desgastado Aqui então vamos vamos terminar isso né ainda falta a gente botar a lógica aqui da coisa a gente tá só terminando aqui a parte visual né Vamos colocar aqui comprar vou colocar um emoji aqui ó com oins ó comprar show de bola e a gente vai fazer mais um tubar agora vamos

colocar um out só que esse aqui nós vamos subir ele um pouquinho mais para cima a gente pode colocar até direto aqui nele ó um estilo que a gente pode colocar assim ó margem Bottom Margem de baixo a gente pode dar aí uma 160 pixels para ele subir ó beleza aqui a gente para ver a background head aqui para ver a área que ele vai ocupar pode colocar assim deixa eu apagar aqui três pontinhos então ele vai pegar essa área aqui ó tá vendo um pouquinho mais para cima eu botei o background head Engraçado que

ele não ele não obedeceu aqui mas não tem problema eu queria ver a área que ele ia Ocupar né então aqui dentro a gente vai colocar os totais né os valores ali do Quanto que deu subtotal eh frete né então a gente vai colocar aqui dentro a gente pode fazer uma div com a classe display Flex justify content a gente pode pôr um Space between que é o espaço entre né faltou a div eu acho pera aí faltando fechamento dessa div e aqui a gente vai colocar o valor assim subtotal então vamos colocar isso dentro

De um spam subtotal e o outro spun vai ser o valor R 800 certo subtotal R 800 e aqui a gente pode colocar uma classe Vamos colocar w8 que é de Edit 8 a gente pode criar aqui ó w pode colocar aqui que o edit dele vai ser de 80% da área ó lá aí vai ficar bem joia ó subtotal e o outro fica lá no outro cantinho podemos fazer mais um Desse aqui que vai ser na verdade o frete né frete e a gente pode colocar que o frete é de 10 mangos aí eles

ficaram tudo na mesma linha pra gente tirar isso tudo na mesma linha a gente pode colocar aqui um ID para esse nosso tub a gente pode chamar de totais e aqui embaixo a gente pode fazer assim totais a gente vai fazer que o Flex Direction dele vai ser Coluna forma vai ficar um embaixo do outro certo e a gente pode fazer um pading né uma separação aqui ó pading de o pixs em cima e embaixo e Dire dar um certo afastamento podemos criar uma classe aqui que eu vou chamar de border gelo vai ser border

bot vou colocar bd Bd bot um pixel Solid gelo colocar um cinzinha Coloca essa classe aqui no nessa Nossa div aqui ó só para ter um tracinho aqui a gente pode dar um margem top para ela dar uma afad lá da parte de cima certo beleza na verdade dá até para diminuir um pouquinho esse esse Tab bar aqui ó aí Vamos Diminuir um pouquinho mais 110 show então vai ficar assim subtotal frete né nessa parte aqui a gente pode deixar Então esse aqui a gente pode usar uma classe bold aqui ó de que a gente

já tinha até feito já né ó dos valores beleza e aqui nesse aqui a gente pode colocar Border bot ó lá show de bola né pessoal bem Legal mesmo até diminuir um pouquinho mais ó ficar assim ó subtotal fret beleza e aqui os itens aí a gente tem aqui nesse cantinho pessoal um botão que a gente vai querer que quando Clique nele que abra uma opção de tipo um balãozinho né de esvaziar para esvaziar ele aqui como que a gente faz isso então se você entrar lá no Framework Seven na documentação a gente vai ter

Aqui ó uma um componente que se chama popover esse popover é esse balãozinho aqui ó deixa eu fazer um exemplo para vocês ó clicou aqui ele abre esse balãozinho no Android vai ficar dessa forma aqui ó esse tipo de balãozinho como é que você faz para Us usar ele no link onde você vai querer o clique você vai colocar data popover e apontando uma classe né E você tem que ter aqui ó Classe link popover e um atributo data popover apontando para item que vai ser esse popover então a gente po encontrar aqui esse nosso

botão tá aqui ó Então a gente vai colocar aqui essa classe link popover open apontando que a gente vai querer abrir o data popover chamado popover menu aqui deu né E aí a gente vai pegar agora lá no nosso Framework e pegar esse popover que é o popover menu que vai estar aqui ó vamos achar ó popover menu que é todos esses Itens aqui menos o última div que essa útima div ela respeito à página aqui ó P então a gente pode colocar logo aqui abaixo esse popover menu e aqui a gente vai ter só

uma linha que vai ser o esvaziar né então a gente pode colocar aqui esvaziar carrinho e aqui a gente pode colocar um ícone lá do material design icons que é tipo de uma Vassoura matei não escrevi matei material des icons aqui você procura por Brom Brom aqui ó que é essa vassourinha aqui então é esse daqui ó MDI MDI Brom certo pegar esse aqui deixa eu pular a linha aqui para ficar mais fácil da gente visualizar esvaziar e aqui a gente vai colocar aquele ícone né só vou trocar aqui de spam ícone esvaziar carrinho certo

então feito isso a gente vai ter aquele Efeitinho do popover lá do Framework 7 ó a gente clica aqui ó lá esvaziar carrinho e aí quando clicar a gente vai depois disparar um evento aqui a gente pode colocar um ID que é esvaziar a gente vai disparar um evento aqui de esvaziar carrinho certo aqui também outra coisa que eu vou querer fazer pessoal é o efeito que de abertura desse desse desse carrinho porque se a gente for ali no Framework seven a gente for aqui em Hooter View api a gente vai Ter aqui ó Custom

page transition a gente vai querer que quando vá da página inicial para o carrinho ele usa uma transição que vai ser deixa eu ver aqui a que eu quero é essa daqui ó push essa daqui ó que é de tipo ele deslizar como se ele tivesse indo pro lado tá vendo pra gente usar isso a gente precisa passar essa option transition E aí colocar Qual que é a transição que a gente quer no caso é F7 push Então a gente vai lá na nossa rota vamos achar Lá onde a gente tem a nossa rota lá

embaixo do carrinho aqui onde a gente tem esse animate que agora não funciona mais dessa forma a gente vai colocar essa option passando que a transição a transition a gente vai querer que seja push Então sempre que for fazer a transição para essa rota vai fazer esse efeito certo e agora a gente vai fazer o seguinte eu vou tirar aqui ó já para ir direto para lá na nossa index que tá navegando direto pro carrinho e eu vou Querer que lá na nossa index quando a gente clica aqui no carrinho de compras é que a

gente vai para lá só pra gente ver se tá funcionando legal então a nossa index vamos achar index P HTML onde a gente tem o nosso top nave tá aqui então a gente tem aqui o nosso btn cart que é esse aqui do carrinho Então a gente vai mandar ele para a nossa rota de carrinho certo clicou aqui então foi pra nossa rota de carrinho viu o efeito que Legal que maneiro e lá no carrinho a gente tem que fazer esse botão fazer voltar né então aqui a gente tem nove nave top cart index tá

clicou aqui voltou lá pra nossa index então ó clicou voltou pro carrinho clicou voltar voltou para index legal Dá pra gente fazer é também a nossa index ter esse efeito de push né PR ficar deixa eu ver aqui que que a gente tem mais de efeito lá no Framework 7 p é então a gente pode P aqui também no nosso essa transição option transition P colocar lá na nossa index pra gente ver como é que fica o efeito de transição clicamos aqui foi pro carrinho clicou aqui voltou é ficou aquilo tudo não né porque ele

vem do outro lado assim ó então acho que não fica tão legal assim dessa forma vou deixar quieto isso Daqui vou apagar dexar assim clicou beleza voltou legal beleza então com isso nós terminamos aqui a parte estética do nosso app Finalmente né depois aí de longas horas aí fazendo né nem sei quantas horas já deu isso daqui mas foi bastante né mas tá sendo bem interessante a gente fez a parte mais difícil entre aspas que é a parte estética mesmo você conseguir tirar n Pensa nós conseguimos tirar a ideia do papel aqui do visual e

transformar isso em algo real rodando na tela do celular isso é o verdadeiro frontend né então a a gente tem aqui a nossa pinaz inha Inicial e a gente tem aqui a página de detalhes e a página de carrinho que a gente também fez né ah acabei de ver aqui um detalhezinho que a gente acabou esquecendo que era aqui do botão de categorias o primeiro tem que tá marcado ativo né Ó lá primeiro tem que tá Marcado assim ó dessa forma isso aqui ficou faltando Então deixa eu achar aqui na nossa index mesmo a gente

tem os onde a gente tem aqueles botões das ceg orias né Deixa eu ver aqui Ione busca swiper swiper Filter btn É esse aqui então aqui ficou faltando o o que tiver ativo né fazer assim ó Filter btn ponto Active o que tiver ativo vai ter o background dele como sendo var verde e a cor Color var Branco e border beleza aí sim ó agora ficou certo então o botão que tiver ativo ele tem que ficar dessa forma aqui né marcado que tá tá ativo dessa forma aqui tava faltando esse detalhe aqui beleza então temos

aqui os itens nós temos aqui para navegar temos aqui a nossa sacolinha carrinho né e agora vamos fazer então a parte lógica aqui para concluirmos o nosso projeto 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 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 eh um link eh um

arquivo né no no link que tem aí na descrição que é 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 est utilizando então você pode entrar nesse link e 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 json 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 it 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 ah de dentro aqui dos detalhes certo a Gente tem aqui descrição a parte de detalhes é essa parte que vai formar essa tabelinha aqui embaixo ó tá vendo Então a gente vai ter tem 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 aqui 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 cardz inhos 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 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 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 IMG IMG 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 pi a gente vai colocar é 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 Nossa 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 mesmo cer 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 skeleton Block né E aí já vai ficar aquela áz 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 p de largura ó um pouquinho mais né Vamos botar uns 70 piels 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 Ground ah varelo 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 de 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 eu colocar que 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 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 isso aqui transformar isso aqui num spam Vamos colocar a classe aqui igual a gente tem aqui ó copiar essa classe menos o Color gre que a gente não vai precisar daí a gente já vai ter um itzin ali né só vai diminuir o tamanho disso Daqui

vamos colocar o edit dele bem bem pequenininho aqui Edit Vamos colocar de 10 PI certo e aqui a gente vai colocar mais um spanz inho no lugar onde seria o número ó e a gente coloca isso aqui como sendo 30 piels 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 isso aqui dentro de

uma div e aqui tem tá sobrando spam ó deixa eu ver [Música] spam a gente que bagunça que virar ISO aqui né deixa eu apagar esse aqui Deixa eu ver lá que que a gente tá fazendo aqui pera aí vamos voltar vamos voltar esse aqui eu não sei o que que é esse spam 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 da 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 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 TRS pixels só para afastar um pouquinho C 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 spand desse aqui mesmo já para evitar a fadiga e aqui na parte do preç a gente coloca umzinho desse a gente pode fazer só ele ser um pouquinho maior 60 pi Vamos fazer ele um pouquinho margem do Topo aqui na verdade não vai precisar desse marg a gente pode fazer Ele afastado um pouquinho do Topo a gente pode colocar um marg top aqui ó marg top a gente pode colocar de uns cinco pixels só para dar uma afastadas ah lá show a

gente pode fazer ele um pouquinho mais grossinho né a gente pode fazer aqui a altura dele o heate Vamos colocar aqui uns 60 Pixel para ver como é que fica Opa ficou muitoo 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 skeletons 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 Ctrl 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 que 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 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.js e aqui nós vamos fazer o seguinte nós vamos colocar Ah um fat né o fet é tipo uma requisição eh 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 pra pasta JS o nosso arquivo backend P 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 fat 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 responsejson dizer que esse é o formato do nosso arquivo aí a gente vai ter o d para 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 pon error e aqui dentro a gente vai falar erro ao fazer fet dos dados e aí pede para ele dois Pontos espaço e pede para ele mostrar qual que fo

foi esse erro né E aí fechou o brick deu certo é isso aí então esse aqui se Daia 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 e 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 pars e a gente consegue trabalhar com esses dados certo então como funciona esse local Storage você

faz assim ó local Storage o S maiúsculo 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 eh 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 Jon pon 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 est salvando os produtos Se eu der um console.log aqui eu posso dizer aqui né dados só pra gente ter uma um 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 ver ver as funções de desenvolvedor né no de 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 n essa 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 app 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 de produtos a gente vai ter todos aqueles dados estão vindo do nosso backend olha só que interessante aqui fica até organizadinho pra gente ver cada item ó 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 que 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 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 carinho 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 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 eles 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 um Array for each e aqui dentro desse for each 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 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 nos nessa Nosa anotação a gente colar ponto vírgula aqui aqui embaixo a gente vai pegar a noss nossaa de produtos produtos e a gente vai usar o método append que é 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ó colou o HTML desse prodo aqui né e a gente precis agora substitu 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 é o nome deada 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 pra 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 nome do item Então a gente vai pegar produto nome né 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 des 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 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 salva 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 PR 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 tem umzinho 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 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 t locale 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 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 algum aluma 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 um segundo ou 1 segundo e meio que seria 1500 né 1500 milisegundos e todo esse nosso forit que a gente tem aqui ó 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 back Hang 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 isess 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 parecer 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 pessoa lá pra página de detalhes e lá na página de detalhes a gente poder carregar esses valores de acordo com o que a gente tem no nosso

local Storage então a gente pode fazer isso da seguinte forma logo aqui abaixo da onde tem fechou o nosso for each 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 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 da 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 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 dessa 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 a gente pegou que o ID dele é um clicou aqui ele vai pegar que o ID é dois clicou aqui vai pegar que o ID é 3 4 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 que 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 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 o 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 V achar aqui a nossa rota detalhes assim que a página iniciou H page init a gente vai querer que pegue esse detalhe 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ágina 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 da 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 est 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 Storage Isso aqui 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 Parc 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 o seguinte a gente vai pegar o local Storage P get item a gente vai pegar o produtos só que pra gente poder trabalhar com isso aqui a gente também vai ter que transformar eles aqui Parce né porque eles vêm

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 a gente pode fazer assim ó var item vai ser igual e a gente vai fazer assim ó produtos a gente usa o Método do find que é para buscar então a gente vai buscar o

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ô o 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 detalhe 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 ó 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 ele 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 P 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 esses 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 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 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 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 AL 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 vai ser alguma coisa traço detalhe imagem detalhe então a gente pode agora lá alimentar ó 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 JC né a TTR 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 H TTR 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 ó 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 inho aqui colocar no lugar desse 90% aqui ó e aqui Colocar assim 90% né E aqui vai ser like detalhe vamos Lá like detalhe que vai ser como é que vem lá no nosso backend aqui ó likes Isso aqui vai ser item likes Lembrando que esse item aqui a gente tá pegando local Storage mas como os valores são iguais 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

Noam mesmo ID Reviews 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 esse aqui é muito legal legal né pessoal fica muito

muito joia mesmo Inclusive a achei que essa tabela aqui no detalhes achei que essa parte aqui do a tabela 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 ó vai ficar 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 esse detalhes esse detalhes é um Array e cada linha é um objeto Então a gente vai ter que percorrer esse 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 vir do nosso backend Então a gente vai fazer o seguinte vamos fazer aqui uma variável chamada tabela detalhes 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 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 cri 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 linha vai ser igual Vamos fazer uma anotação aqui ó com duas crases um template string né anotação não 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 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 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á tchans 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 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 tabela 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 a isso aqui vai tá lá em cima no nosso tubar ó então aqui a gente vai ter aqui esse aqui a gente pode colocar O id aqui ó preço preço detalhe e aqui o de baixo vai ser o preço é 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 fadiga aqui o método de formatação que

é esse choc string aqui ó copiar ele e vamos lá no detalhes e vamos colocar nos dois aqui ó tooc stringc 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 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 pro backend tá

e pegando esses dados e salvando novamente No local Storage 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 eh coloca no local Storage 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 backend fica parecendo com o sistema do Next né o Next tem um sistema assim onde Você pode colocar quanto en 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é 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ó vamos criar uma função 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 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 Jon par aqui a gente vai pegar o Local Storage get it [Música] carrinho que a gente não tem ainda tá ou senã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 ch 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 uma letra qualquer Vou colocar

aqui C Vamos se ver se o c que é C de Carrinho tá C item se o carrinho item aid bate com o item ID que a gente tem lá lá de cima certo que já vai vir a gente vai mandar e 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 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 do carrinho a gente vai fazer o seguinte a gente vai fazer carrinho pon 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 Opa carrinho e aqui a gente vai salvar um json string F carrinho que foi esse aqui né que a gente tem aqui em cima Beleza então assim a gente montou a nossa função inha de adicionar ao Carrinho a gente vai mandar Qual queer o item qual que é quantidade ele vai verificar 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 push adicionar dentro do carrinho um novo item com uma nova quantidade e um 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 ID né a gente pode usar essa classe aqui cart então a gente pode fazer assim clicou no adicionar carrinho então vamos fazer o add P cli que que aconte quando clicar function que que é acontec então quando

no adici carinho nós vamos usodo adici adici a vamos usodo Então olha só que que a gente vai Fazer gente vai usodo adicionar carinho Olha que é legal você criar uma função antes já preparada aqui a gente só vai passar Qual 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 Seven que se chama toast Então se a gente entrar aqui no site do Framework Seven procurar aqui em Componentes você vai achar um componente 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 informação 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 al uma coisa assim dava 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 S Custom Button deixa eu ver se ele é tranquilinho de [Música] usar teste 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 ISS numa variável to 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 toast toast Center openen é o método para 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 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 o 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 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 historic 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 esse 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ê repar 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 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 airpod tem o 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 Zinha 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 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 o que que vai acontecer né ver quantos itens a gente tem dentro cindo 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 més 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 pget item para pegar os itens que a gente tem dentro do Carrinho então aqui a gente pegou o nosso carrinho e agora a gente vai alimentar alimentar o contador da sacola porque lembra lá 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 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 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 que a gente vai querer colocar ali vai ser o carrinho pon lente o esse método lente aqui né pessoal ele Eh 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 o

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 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 carrinho agora nós vamos pra parte final aqui conclusão realmente do nosso nosso Projeto que vai ser a gente fazer a parte de carrinho funcionar né com as somas pegar esses itens

que estão D 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 ah do botão de mais o 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é hum para ficar bem bem bonito isso daqui tá mas isso aqui é esse aqui a gente deixa para depois vamos

se concentrar agora na parte lógica mesmo né então vamos fazer isso agora muito bem pessoal então vamos agora fazer a parte lógica aqui da nossa página de carrinho e alimentar dinamicamente os itens aqui né e fazer tudo funcionar né os botõezinhos de mais e menos mostrar o total lá embaixo o Botão de esvaziar carrinho pra gente poder concluir aqui esse nosso projeto que tá sensacional né tá muito legal mesmo é eu tô meio incomodado ainda pessoal tá me incomodando a parte estética aqui desse campinho in putut que tá esquisito aqui né né não tá legal

e eu dei uma olhadinha aqui para ver qual que era o problema Por que ele tava se comportando dessa forma o que que acontece lá na nossa index a gente tem esse campinho input que é da busca né Esse search aqui que a gente tinha a busquinha e lá no index.css a gente usou um seletor muito genérico a gente usou um seletor do tipo input type text acontece que esse campinho aqui também é um input type text então ele tá pegando as propriedades que a gente tem lá da nossa index.css certo então para resolver isso

que que a gente faz aqui nesse campinho que a gente tem na nossa index a gente pode colocar aqui um seletor mais Específico por exemplo um ID vamos chamar aqui de search n de busca e aí lá no index.css em vez de usar o seletor aqui input type text que é muito genérico a gente usa esse seletor aqui ó tipo search E aí vai ficar legal fazendo dessa forma aqui né Deixa eu salvar aqui deixa eu salvar aqui também Ah acho que bugou o meu eu acho que bugou aqui o meu Live server deixa eu

rodar de novo dar um go Live Aqui Ah tá é que aqui tá IMP é apaguei o apaguei o t sem querer input né Beleza do tipo search aqui a gente não usa o hashtag aqui assim direto Beleza então a gente coloca um ID aqui direto e aí aqui a gente coloca né um seletor mais específico aí o que que acontece agora o nosso item lá vai ficar certo o item dentro de carrinho porque a gente tem aqui o quantidade de item que é o que a gente batizou esse item aqui e aí ele vai

respeitar essas propriedades sem Misturar com aquela outra lá entendeu aqui eu só vou aumentar um pouquinho esse Edit eu vou colocar de 40 e de 35 para ficar um pouquinho mais largo aqui e aí já ficou joia essa parte estética aqui para nós certo então vamos lá a gente vai criar aqui na Nossa pasta JS um novo arquivo que vamos chamar de carrinho PJS esse carrinho PJS ele vai ser o responsável pela lógica da nossa página de carrinho vamos referenciar ele lá Dentro da nossa Roots então a gente pode pegar um esse tipo get script

aqui né e colocar lá no nosso carrinho aqui quando a página for inicializada para ele puxar o que tiver aqui dentro de carrinho PJS então a gente pode até ver aqui se vai funcionar ó app. dialog P Alert aqui dentro da nossa nosso arquivo carrinho PJS só para ver se vai disparar disparou e vamos entrar lá nessa rota pra gente ver ó disparou Beleza então tá se comunicando e pra gente evitar a Fadiga de ter que ficar entrando dentro da página de carrinho lá em cima na nossa rota index a gente pode indicar aqui ó

para assim que a aplicação for inicializada ele já jogar a gente pra rota de carrinho certo beleza Então tá funcionando aí a nossa página de carrinho tá sendo chamada então aqui a gente vai fazer a nossa lógica tá pessoal então a gente vai criar funções para cada coisa que a gente vai querer que aconteça aqui a gente vai ter uma Função para renderizar os itens do carrinho uma função para somar o total uma função para esvaziar o carrinho que assim facilita o nosso trabalho então a primeira coisa a gente vai ter que pegar e recuperar

os dados do nosso local Storage então a gente pode fazer uma variável aqui aqui ó local e local carrinho por exemplo vou chamar de local carrinho e vamos pegar aqui ó local Storage pon get item e vamos pegar aqui o nosso carrinho certo aí agora a Gente vai verificar vamos verificar se existe isso aqui então ess se local carrinho existe certo então se o local carrinho existe a gente vai verificar se ele tem itens dentro então a gente pode faz o seguinte a gente pode criar uma variável chamada carrinho aqui que vai fazer um Jon

parce Desse nosso local carrinho que é a variável que tem aqui o nosso local Storage certo e aí a gente vai fazer o Seguinte se carrinho ponto lente que a quantidade de itens for maior que zero quer dizer que a gente tem itens dentro do carrinho né Tem itens no carrinho a gente vai fazer o seguinte renderizar carrinho e somar totais dos produtos senão aqui vamos fazer senão quer dizer se não tiver nenhum item no carrinho mostrar carrinho vazio e aqui se não existir o local Storage né esse aqui é se existe se não existe

o local Storage então aqui a gente também pode fazer mais um else e aqui também vai ser mostrar o carrinho vazio certo então essa vai ser a lógica aqui tá verificando que a gente tem dentro do local Storage se ele existir ele vai pegar esses dados fazer um par pra gente trabalhar vai ver quantos itens tem se tiver vai renderizar o carrinho senão vai mostrar o carrinho vazio Vamos criar agora então primeira a Nossa primeira função que vai ser a de esvaziar carrinho ou carrinho vazio vou fazer assim opção carrinho vazio então aqui dentro de

carrinho vazio nós vamos fazer o seguinte primeiro a gente pode dar um retorno aqui no console log dizendo carrinho está vazio só pra gente ter algum tipo de retorno e aí a gente vai esvaziar aqui a nossa área onde vai ter os itens a gente criou lá dentro de carrinho P HTML ó a gente criou esse ID que é o ID lista Carrinho que vai mostrar os itens aqui então a gente pode pegar e selecionar esse item vamos pegar aqui ó lista carrinho e vamos usar o método empty que é para ele ficar vazio certo

pra gente esvaziar ali e já vamos chamar aqui ó Essas funções aqui onde é para mostrar o carrinho vazio a gente já chama aqui assim beleza por que que não tá acontecendo é porque a gente tem três itens no carrinho que a gente deixou da Última aula né então a gente pode fazer assim vamos eh maximizar aqui dar um f12 pra gente abrir as questões de desenvolvedor vamos lá na nossa aba aplicativo ou dependendo do seu navegador application acha aí armazenamento local Storage e aqui vamos Apagar manualmente a nossa chave de carrinho né porque que

a gente ainda não tem ali programaticamente como apagar ele então a gente vai selecionar ele aqui e vem aqui em cima e excluir Selecionado dessa forma a gente vai zerar aqui vai eliminar né essa chave de carrinho certo vamos atualizar aqui o nosso aplicativo E aí ó quando a gente entrou dentro da página do carrinho Olha lá que legal ele já mostrou para nós o carrinho vazio aqui ele apontou um erro eu reparei aqui em cima que ele deu um erro eh não conseguiu achar a propriedade lente na linha 57 deixa eu dar uma olhadinha

Aqui linha 57 isso aqui tem 21 linhas Então não é aqui Ah tá eu sei o que que é isso pessoal que tá dando esse erro aqui lá na nossa index a gente tem aqui a verificação da sacolinha né É para quantos itens tem dentro do nosso carrinho Só que eu acho que a gente não colocou a questão de se a gente não tiver um um local stor de carrinho Deixa eu ver isso aqui deve ser a linha 57 da nossa index.js vamos ver V aqui ó linha 57 tá Aqui ó carrinho lente É isso

mesmo ó alimentar o contador da sacola aqui em cima a gente fez a variável carrinho pegando os dados vindo lá do local Storage carrinho Só que talvez isso não exista tá pessoal então se ele não existir a gente vai ter que colocar uma outra condição aqui ó que é para ele mostrar um Array vazio ou um Array vazio a gente coloca duas Barrinhas assim que é shift e a barra que fica do lado da letra Z então ou se ele tiver item no Local Storage ele vai fazer um parce aqui para pegar o o que

tem dentro desse nosso local Storage senão ele vai mostrar um Array vazio daí eu acho que já vai resolver esse erro aqui porque um Array vazio também é zero Então não vai ter aí ó já resolveu ó já não tá aparecendo o erro mais para nós Deixa eu voltar aqui na página index isso aí ó beleza resolvido então nosso carrinho tá vazio aqui né Nós mandamos ele esvaziar a gente também vai ter que fazer sumir Esses itens que tem aqui embaixo Então vamos fazer sumir esses itens que tem aqui embaixo vamos voltar lá no nosso

carrinho PJS aqui dentro da nossa função de carrinho vazio e vamos fazer sumir sumir os eh itens de baixo botão e totais né vamos fazer isso aí isso pra gente fazer isso a gente vai ali dentro da nossa página carrinho e aqui a gente vai achar onde a gente tem esses tubar aqui ó que são esses dois tubar aqui então a gente Pode batizar esse tubar com um nome então eu vou colocar esse primeiro aqui eu vou chamar de tob checkout que seria o botão né então tubar checkout e o outro eu vou chamar de

tubar tobar totais certo então vamos fazer eles sumirem agora então vamos fazer assim primeiro a gente vai pegar o nosso Tob totais e a gente vai adicionar uma classe nele de CSS addd Class display known essa classe ela faz desaparecer Um item então ó display known já sumiu o item aqui e o nosso botão lá de baixo que vai ser o tubar checkout né checkout checkout E aí beleza já desapareceu Então esvaziamos vamos colocar aqui esvaziar lista do carrinho e aqui embaixo sumir os itens de baixo de totais Ok só que assim ficaria muito sem

Graça né pessoal então o que que a gente vai fazer a gente vai colocar aqui uma imagenzinha é que tá lá no google drive você vai achar aí dentro de MG né lá se você baixa do Google Drive as imagens e a gente vai ter aqui o empt pgf que é essa imagenzinha da sacolinha Vamos colocar ela aqui então a gente vai fazer o seguinte a gente vai pegar aqui lista carrinho que é a área onde vai as coisas dentro né mostrar mostrar Sacolinha vazia A gente vai pegar o lista carrinho a gente vai fazer

aqui um HTML para injetar alguma coisa dentro dele e a gente pode usar um template string aqui usando duas crases né E aqui vamos pedir para fazer o seguinte vamos colocar uma div com uma classe text align Center para ficar alinhado no centro essa imagem e vamos colocar aqui uma uma tag de IMG IMG src apontando pra pasta IMG noss Empf que é esse arquivo que nós vamos estar trabalhando Vamos ver ó lá já apareceu a sacolinha só que ficou muito grande vamos dar aqui um Edit de 300 ficar menorzinho ó lá que show de

bola a nossa sacolinha E aí a gente pode colocar aqui um BR e colocar aqui um spam dizendo assim nada por enquanto um tanzinho aqui ó nada por enquanto e a gente pode colocar aqui uma classe eu acho que a gente criou uma color Grey né que é para ficar cinzinha ó nada por Enquanto legal show de bola então quando o carrinho tá vazio ele vai mostrar isso aqui vamos colocar um item no carrinho para ver se ele vai ficar comportar diferente ó adicionei o item ao carrinho tá adicionado vamos entrar lá na rota aí

apareceu o convencional aqui para nós tá vendo Então ele já tá tendo comportamento aqui é claro agora a gente tem que fazer alimentar dinamicamente né vou até colocar mais itens no carrinho aqui ó e deixa eu colocar mais esse aqui Adicionar no carrinho Vamos colocar mais um aqui uns três itens Beleza a gente pode inclusive pessoal já fazer aqui ó o disparo do evento aqui do esvaziar carrinho né Porque daí a gente já V isso funcionando então a gente pode fazer esse disparo de evento aqui E esse clique aqui do esvaziar carrinho vai tá aqui

ó no nosso popover menu tá vendo a gente tem aqui ó um ID chamado esvaziar que é justamente esse esvaziar Carrinho aqui então a gente pode fazer essa chamada logo aqui abaixo do esvaziar carrinho a gente pode fazer aqui deixa eu só deixar isso tudo bonitinho organizado então a gente pode fazer assim que quando clicar no esvaziar a gente vai fazer um evento de on Click quando clicou nele que que é para acontecer function então clicou no esvaziar carrinho a gente vai pegar o nosso local Storage Eh primeiro vamos fazer uma uma pergunta né pro

usuário se ele tem certeza que quer esvaziar o carrinho então a gente pode fazer um app. dialog que é aqueles balãozinho que aparece na tela pon confirm então o dialog confirme é um dialog de confirmação que tem no Framework Seven tá ele é um padrão aqui uma chamada para aparecer um balãozinho na tela com uma confirmação então o primeiro parâmetro é o que vai escrito dentro dele então tem certeza que quer Esvaziar o carrinho Esse é o primeiro parâmetro coloca uma vírgula o segundo parâmetro é o título então a gente pode colocar aqui assim esvaziar

carrinho e aí o próximo parâmetro é uma função de callback é um retorno do que acontece se a pessoa clicar então a gente vai fazer uma function aqui do que acontece se a pessoa clicar em sim na confirmação o cancel quer dizer que a pessoa não aceitou não acontece nada mas Se ela clicar em sim que ela quer confirmar o que que é para acontecer então se ela clicou quer confirmar a gente vai apagar o local Storage do carrinho Então vamos apagar ele aqui ó então vamos fazer o local Storage aí a gente vai fazer

agora o remove item o remove item é para pagar tá pessoal a gente vai apagar o nosso carrinho e depois de apagar esse carrinho a gente vai usar um recurso aqui muito interessante que é recarregar a página Porque a gente tá fazendo o roteamento aqui em cima para ele verificar se tem alguma coisa no local Storage ou não e dependendo do que acontecer ele vai chamar uma dessas funções então aqui a gente pode pedir só para atualizar essa rota essa página então a gente faz assim app. views pon Main pon router ponto aí você faz

assim ó refresh page com o P maiúsculo e uma chamada assim ó refresh page Beleza o r minúsculo P maiúsculo Tudo junto esse aqui é o comandinho para atualizar a página certo vamos dar uma olhada para ver se vai funcionar então nós temos três itens no carrinho aqui não Ignora isso aqui porque não tá puxando dinamicamente é só o que a gente tem de html né Mas se a gente voltar lá no nosso index a gente vê que tem três itens lá dentro do nosso carrinho se a gente aqui entrar dentro da Aba application aqui

né a gente vai verificar aqui dentro do nosso local de Carrinho a gente tem três itens aqui beleza então vamos agora esvaziar para ver se vai funcionar vamos clicar aqui então no esvaziar carrinho ele já apareceu aqui para nós ó o balãozinho não gostei dele achei que ficou muito grande ali o esvaziar carrinho deixar só esvaziar aqui ó e a gente pode deixar isso aqui como sendo um strong aqui ele aceita tá HTML tá pessoal então a gente pode colocar aqui um strong que é para ficar né vamos Ver clicou em esvaziar esvaziar carrinho esvaziar

Aí sim tem certeza eu não coloquei ponto interrogação mas ol que burro vamos de novo esvaziar carrinho tem certeza que quer esvaziar o carrinho aí tem cancelar e sim vamos clicar em sim e aí olha só que legal ele já atualizou a nossa página verificou que não tem nada no carrinho e já mostrou nada por enquanto show de bola então já tá funcionando vamos dar uma olhada lá para ver se ele apagou o nosso local Stor de carrinho ó lá apagou legal beleza vamos voltar lá no nosso index e vamos colocar umas coisas aqui adicionar

o carrinho vamos adicionar o carrinho beleza temos dois itens e agora vamos fazer puxar dinamicamente esses itens Então já temos o botão de esvaziar rodando para nós já temos o botão de carrinho vazio também rodando Então o que a gente vai fazer agora é primeiro a função para renderizar o carrinho Então vamos fazer aqui a função ó vamos fazer Aqui ó function function Opa function renderizar carrinho Então a primeira coisa que a gente vai fazer na hora de renderizar o nosso carrinho vai ser esvaziar a área dos itens né porque por padrão ele vem com

o conteúdo que a gente deixou ali né que é esse HTML depois a gente vai tirar ele mas só para a gente ir deixando Alguma coisa por enquanto ali né Vamos esvaziar então a área que vai ser o nosso lista carrinho lista deixa eu pegar aqui debaixo lista carrinho empt a gente pode copiar aqui para evitar fadiga né então ele já vai esvaziar quando der o renderizar carrinho e a gente vai fazer o seguinte a gente vai ter que percorrer percorrer o nosso carrinho e alimentar né a Área então a gente pode fazer esse percorrer

usando o método aqui ó it que é do próprio JavaScript do próprio J Carry aqui ó método it Então esse método it a gente vai passar aqui então o nome de cada item vai se chamar a gente vai querer percorrer na verdade o carrin que é o nosso nossa aqui que tá pegando os itens do local Storage e a gente vai fazer o seguinte vamos fazer a função que vai percorrer a gente vai pegar um índice index e cada item vai se chamar Item carrinho cada item que a gente tem lá dentro certo aqui vamos

pedir então para ele fazer isso daí percorrer cada item dentro do nosso carrinho Então a gente vai fazer uma variável aqui que a gente vai chamar de item div V template string e aqui a gente vai colocar o modelo de Um item desses daqui né então a gente pode pegar aqui dentro da nossa carrinho P HTML um modelinho Aqui ó de item do carrinho Vamos pegar esse primeiro aqui ó item do carrinho vou colocar aqui dentro e agora nos lugares onde a gente teria o os valores aqui ó a gente vai eh colocar o que

tá vindo lá do nosso local Storage de carrinho né que tá aqui dentro desse item carrinho é só pra gente ir vendo o que tá acontecendo Eu vou fazer a chamada Aqui ó dessa função renderizar carrinho já pra gente ver o que tá acontecendo Certo então aqui a gente vai pedir para ele mostrar os itens depois a gente tem que alimentar aqui embaixo ó alimentar o nosso lista carrinho lista carrinho com cada item desse então a gente vai usar o método append e aqui a gente vai colocar a nossa item div Ah faltou aqui beleza

então ele já tá detectando que tem dois itens dentro desse nosso Carrinho vamos fazer então agora ficar dinâmico isso aqui trocando aqui os valores né a gente pode usar Então como a gente tá trabalhando com template string que a gente usou a crase aqui a gente pode usar o cifrão duas Chaves e aqui passar Qual que é a variável Então a gente vai passar aqui ó item carrinho ponto imagem e já não funcionou não é imagem Deixa eu lembrar como é que é o nome aqui vamos ver lá dentro do nosso carrinho aqui E imagem

imagem mesmo deixa eu ver aqui que eu fiz de errado aqui pera aí que ele não tá localizando it tem carrinho ponto imagem deixa eu ver de novo aqui como é que tá no nosso local Storage aqui ah tá pessoal tem que ver que aqui ó dentro de cada um desses itens ó é a gente tem item quantidade Total E aí dentro de item que a gente vai ter os detalhes aqui dentro então a gente tem Que fazer item carrinho que é esse aqui ponto item ponto imem porque a gente tem essa entrada aqui né

para daí pegar os valores agora acho que vai funcionar vamos vamos salvar aqui deixa eu só voltar aqui ao normal ah lá agora sim ó funcionou já tá puxando dinamicamente lá os valores que a gente tem lá dentro né então vamos colocar aqui também onde a gente tem aqui item carrinho vamos usar aqui um Data index o índice que tá vindo aqui de cima né conforme a gente os itens que a gente tem dentro lá do nosso carrinho beleza e aí vamos trocar aqui onde tem o nome a gente vai usar item carrinho aqui é

nome já ficou joia aqui a gente vai ter a característica principal então aqui é característica principal Opa acho que eu errei vamos ver aqui como como é que se Chama e e principal característica o tá invertido aqui ó vamos lá Vamos ajeitar aqui principal característica beleza aqui nós vamos colocar o preço promocional preço promoci e a gente vai ter que usar aquele esquema do string né lá na index a gente tem um um desse Aí pra gente copiar aqui ó aquele método para transformar em padrão de moeda brasileira né Vamos lá stram PTBR estilo moeda

real ó lá já deixou no valor de real beleza e na parte dos botões aqui pessoal para que a gente tenha uma diferenciação entre um botão e outro para saber qual que tá clicando qual que tem que modificar a gente vai usar aqui ó no link do menos e do mais a gente vai usar aqui um atributo data index que é Um índice e aqui a gente vai pegar o índice Então a gente vai passar o índice dele né que que é índice pessoal que que é esse index é só para ficar claro para vocês

quando a gente tem aqui Um item dentro de um Array cada um desses itens eles têm um índice né então o primeiro é o índice Zero O segundo é índice um e assim por diante do 3 Então como tá numa sequência o que tá salvo aqui dentro ele vai saber que o índice se refere a esse item o outro Índice é esse outro item entendeu então é assim que funciona não tem nada a ver com o ID do produto é com o índice do que como foi salvo dentro do carrinho a sequência como foi salvo

dentro do carrinho certo é isso que esse índice faz vamos voltar lá então a gente vai colocar um data índice aqui um data índice aqui e no nosso campo input a gente tem que colocar aqui no valor Qual que é o a quantidade né então a gente vai pegar aqui ó e vai pegar o que a Gente tem aqui salvo também dentro do local stor eu toda hora tem que ficar voltando aqui ó que é a quantidade ó quantidade um tá vendo Então a gente vai pegar o item carrinho em quantidade vamos lá aqui a

gente vai pegar então o item carrinho ponto quantidade certo beleza então olha só repara só o que que vai acontecer aqui a gente tem os itens Beleza se a gente voltar aqui e Adicionar mais um airpod ó adicionei mais um vou até colocar mais um Ó coloquei mais dois né então tem que ter três agora se a gente voltar lá dentro da nossa sacolinha Olha lá em quantidade ele já viu que tem três legal legal olha só que interessante bem massinha isso daqui para nós né E a gente vai ter que agora fazer também a

questão das somatórias pessoal então esse aqui a gente fez renderizar o carrinho Então vamos criar agora a função que fun Calcular total e aqui a gente vai fazer da seguinte forma a gente vai começar primeiro com uma variável que a gente vai chamar de Total carrinho e vai começar com zero a gente não sabe o valor que tem dentro do carrinho acontece que cada item desses aqui dentro do nosso carrinho se a gente for lá no nosso local Storage eles vão ter aqui um campo aqui dentro chamado Total item que já tem o total calculado

da Quantidade vezes o valor unitário porque a gente fez isso na hora de adicionar o carrinho já certo então tem aqui Total item então o que que a gente vai ter que fazer é percorrer cada um desses itens que a gente tem dentro do carrinho somando o total item E aí isso vai dar o subtotal aqui certo simples assim então a gente vai começar com ele Zerado vamos percorrer o nosso carrinho aqui ó fazendo um it Dá até para copiar aqui de cima para Evitar a fadiga né então a gente tá percorrendo o nosso carrinho

e a gente vai fazer aqui esse nosso Total carrinho a gente vai usar aqui o sinal de mais e igual que é para ele pegar o que já tem e somar em cima daquilo certo e a gente vai fazer o item carrinho ponto Total item que a gente vai pegar o valor ali total né Total item então aqui a gente tá somando ele mesmo né quando a gente usa esse sinal de mais igual é como se a gente pegasse O que já tem aqui no total item e cada laço de repetição a gente vai pegando

o valor e somando certo depois para isso aqui ser mostrado a gente pode fazer o seguinte aqui onde a gente tem essa áre ainha aqui do subtotal Vamos dar um ID para ele aqui ó eh vamos achar aquela área do subtotal aqui ó subtotal aqui onde vai vai aparecer o valor a gente pode colocar um id subtotal e aqui a gente vai fazer o Seguinte a gente vai fazer que esse nosso subtotal P HTML vai receber o total carrinho que já fez a soma aqui certo só estamos alimentando mostrar o total beleza por enquanto não

funciona porque a gente não chamou em nenhum lugar esse calcular Total Então a gente vai selecionar agora essa função calcular Total E aqui onde a gente tem renderizar o carrinho logo abaixo a gente tem que somar os totais dos produtos e vamos dar aqui um calcular Total e vamos ver lá ó lá já tá mostrando para nós o total três itens desse mais um item desse só que aqui a gente vai ter que fazer aquele tocale string lá né Vamos copiar aqui ó desse aqui esse metodo Zinho só pra gente deixar no padrão brasileiro de

moedinha vamos achar ele aqui ah aqui ó Beleza então subtotal mostrar esse valor e olha lá que legal então a gente já tem lá o subtotal esses botões aqui a gente vai fazer agora ele aumentar ou Diminuir né A gente já vai fazer esse método mas pra gente já ver que isso aqui tá funcionando ó pessoal tem 15.689 com 96 se eu pegar um outro produto aqui ó vamos pegar mais esse aqui um Macbook de 8.000 vamos adicionar o carrinho adicionado voltar lá no nosso carrinho já vai tá aqui o Macbook já colocado de forma

dinâmica e aqui já tá o valor com ele adicionado aí ó era aquele valor que a gente tinha mais os 8699 e99 dele legal show de bola agora Vamos fazer aqui os disparos de mais e menos né para que a gente possa ter um controle por aqui de adicionar e já alterar o nosso subtotal aqui e também se a pessoa colocar menos menos menos menos de de um clicar para ser menos de um tipo zero daí a gente I ter que fazer um balãozinho para dizer você quer remover esse item e também aqui no xizinho

quando clicar para ele também ter aparecer pra pessoa deletar esse item do nosso local Storage Então vamos Fazer isso agora começar então fazendo pelo X de delete porque daí assim a gente já consegue ir deletando alguns itens individualmente a gente já vai tendo um pouquinho mais de controle né então aqui embaixo de tudo isso vamos fazer a chamadinha ali pro pro botãozinho de deletar deixa eu ver como é que a gente chamou ele aqui ah na verdade ele tá aqui ó a gente constrói a lista agora de forma dinâmica aqui né então a gente vai

ter aqui vamos achar O é o xinho tá aqui ó MD Close delete item é esse aqui ó essa classe delete item Então vamos fazer a chamada do delete item então clicou no delete item pon com clique quando clicou nele que que é para acontecer function a gente pode fazer aqui um diálogo de confirmação confirmar app. dialog confirm a gente pode colocar tem certeza Que quer remover este item a a gente pode colocar aqui remover E aí uma função function o que que é para acontecer né então aqui a gente vai fazer o seguinte pessoa

clicou em sim tem certeza que é remover a gente vai ter que saber qual que é o índice desse item aqui então a gente tem aqui ó pessoal onde a gente tá montando o nosso cardinho de item do Carrinho cada um desses aqui de forma dinâmica a gente tem a classe item carrinho e dentro dessa classe item carrinho a gente tem um data Index Esse índice vai determinar para nós qu é o it que a gente tem que deletar L do noss local Stage cer a gente vai fazer o seguinte vai fazer uma variável chamada

que PR gente pegar qual que é esse a gente vai pegar e vamos fazer oer dizer desse it del que a gente clicando a gente vai querer pegar o mais perto CL É um mtodo aqui mais ser o item carrinho então eu quero pegar o item carrinho mais próximo que eu tiver e eu quero pegar o atributo a data index certo então com esse método aqui que eu tô fazendo eu tô falando assim que ao clicar neste item cliquei no delete item eu quero que pegue o o item carrinho mais perto que tiver dele e

pegar qual que é o índice então ele vai Por exemplo eu cliquei nesse primeiro ele vai olhar lá qual que é o o item carrinho mais perto que eu tenho Ah é esse aqui de cima o índice dele é tal e aí a gente recupera qual que é esse índice certo então isso aqui a gente tá voltando a pegar qual que é o índice dele aí a gente vai fazer um método bem simples A gente vai fazer o carrinho que é o nosso local Storage já feito parce lá em cima ó a gente tem aqui

ó carrinho a gente pegou aí já tá com os dados do Carrinho do local Storage e a gente vai fazer o seguinte a gente vai usar o método Splice que é para remover Um item de um Array e a gente vai passar Qual que é o que a gente quer remover que é o índice e a gente vai querer que só remova esse item certo um quer dizer para remover esse item aí legal show de bola então aqui a gente já removeu de dentro do carrinho esse item e agora a gente vai ter que atualizar

o nosso local Storage Com isso aí então a gente faz o local Storage set item a gente vai fazer o set item Opa aqui errado local Star pon set item carrinho e a gente vai passar agora para ele aqui o json string F com esse novo carrinho porque aqui a gente mandou remover né a gente fez um carrinho Splice quer dizer removeu esse item do carrinho e agora a gente tem que salvar o carrinho novamente com esse item removido Então até posso colocar Aqui atualizar atualizar o carrinho com item removido e aqui em cima remover

o item do carrinho beleza e aí feito isso pessoal a gente pode pedir para fazer o seguinte atualizar a página e quando a gente atualiza a página ele já vai fazer todo aquele processo de renderizar novamente o carrinho verificar se tem os itens local Storage e tal ou não então ficou mais Prático fazer dessa forma então app. viws mainter refresh page beleza vamos dar uma olhada se isso aqui vai funcionar Então a gente vai deletar Um item vamos escolher aqui vamos deletar o iPhone que é o que é mais impactante 14.000 vamos clicar aqui e

não aconteceu nada ah tá a gente tá burro a gente tá fazendo aqui por chamada de ID e é por classe tá pessoal Aqui ó delete item é uma classe ó não é um ID então vamos resolver isso aqui por classe beleza vamos agora deletar o iPhone aí agora sim remover tem certeza que quer remover este item Vamos dar um sim e removeu o primeiro deu deu ruim aqui pessoal removeu o primeiro item vamos esvaziar o carrinho e fazer um teste de novo vamos esvaziar nada por enquanto vamos monar lá para nossa index Vamos Colocar

um airpod beleza aí que nós vamos fazer os testes Vamos colocar um iPhone Vamos colocar um Xbox tá bom e vamos tentar remover o Xbox aqui clicar aqui para remover tem certeza que remover esse item Sim e ele tá removendo o primeiro de todos eu acho que é por causa do seletor que a gente tá usando que é o delete item aqui tá pessoal vamos fazer o seguinte eu vou mudar esse aqui eu vou usar de seletor a nossa própria lista Então vamos fazer Assim ó lista carrinho eu vou usar ela de seletor quando tiver

um evento de clique nela e eu vou especificar que dentro do evento de clique ainda vai ser dentro do delete item que vai ser o item do X aqui porque daí ele vai procurar por pela lista carrinho Qual que é o item carrinho mais perto e aí vai dar certo porque pelo delete item Talvez ele tá achando mais perto um outro item ali alguma coisa do tipo deixa eu ver deixa eu salvar aqui vamos vamos adicionar Aqui mais uns itens aqui adicionar o carrinho pera aí vamos limpar primeiro vamos esvaziar sim esvaziamos e vamos fazer

uma ordem diferente vou colocar um Macbook depois eu vou colocar aqui o iPhone e aí vamos colocar o Xbox beleza vamos deletar o iPhone agora vamos ver se vai dar certo clicou aqui tem certeza que remover esse item Sim e ele não quer de jeito nenhum deletar o certo né pessoal tá muito Louco isso aqui deixa eu ver airpod vou adicionar remover o airpod o XBox e o iPhone beleza vamos tentar tirar o Xbox Então vamos lá Momentos de tensão cliquei para remover o XBox e ele removeu o primeiro que que a gente tá fazendo

de errado aqui hein pessoal deixa eu ver item carrinho data index lista carrinho um clique delete item tem certeza quer remover aqui as coisas pessoal vamos Fazer o seguinte aqui onde a gente tem o delete item Vamos colocar o data index nele aqui ó pegar aqui e colocar aqui dentro dele delete item beleza coloquei um um data index nele agora aqui embaixo Então a gente vai vamos fazer como a gente estava fazendo isso antes pegou o delete item vamos lá são as Pedreiras que vão acontecendo enquanto a gente tá desenvolvendo né clicou nele a gente

vai recuperar o índice pegando dis Ponto att vamos pegar data index Então pegamos Qual que é o o índice E aí vamos fazer um Splash quer dizer simplificamos para caramba né vamos ver se vai dar certo isso aqui vamos colocar mais um Macbook aqui beleza vamos tentar apagar o maldito do iPhone que não quer apagar nem a pau né Vamos clicar aqui em fechar quer remover esse item sim e fechou o errado mas que coisa rapaz deixa eu ver o que que tá acontecendo Aqui inspecionar os elementos aqui ó vamos dar um inspecionar e ver

o que que tá vindo aqui dentro desse de cada um desses itens carrinho Então a gente tem o item carrinho aqui a gente tem aqui vamos ver se ele tá pegando data index zero beleza esse segundo aqui details superior data index um agora tá certo mas vamos vamos colocar um outro item aqui Xbox Adicionei Então eu tenho o iPhone vamos inspecionar para ver se vai aparecer data índice zero beleza segundo aqui tem que ser um um e o último tem que ser dois dois beleza lá no nosso local Storage no zero tá o iPhone no

um tá o Macbook e no do tá o Xbox Certo certo então beleza está certinho então a gente tá aqui pegando Qual que é o índice delete item clicou vai pegar esse vai pegar o atributo data index Vamos só ver se ele tá pegando aqui ó console P log o índice é dois pontos e aqui vamos colocar qual esse índice só pra gente ver se vai vai pegar certinho e aí a gente tá pegando o nosso carrinho dando um Splice nesse índice quer dizer remover o item do Carrinho estamos atualizando o nosso carrinho e dando

refresh na página Aparentemente parece que tá tudo certo vamos ver se vai funcionar aqui deixa eu f12 aqui vamos lá no nosso console cliquei aqui ten certeza que remover esse item sim o índice é um defined olha só que curioso í é Indefinido ele não conseguiu pegar qual que é o índice deixa eu ver o que que a gente fez de errado clicamos no delete item diz Att data index aqui a gente não chamou de data index data index ah pessoal eu acho que eu sei o que que tá acontecendo aqui a gente tá fazendo

esse esse disparo de evento aqui pessoal fora da construção dinâmica do nosso app porque que que acontece esse aqui ele tá tentando pegar o delete item original que a gente tem lá no nosso HTML não que foi montado pelo nosso JC então a gente Tem que pegar esse disparo de evento aqui e a gente vai ter que colocar logo aqui abaixo da onde ele fez esse it então aqui no renderizar carrinho a gente vai ter o que montou ali a nossa estrutura fe aqui e aqui embaixo a gente vai ter que colocar esse delete item

aqui porque daí agora ele vai entend que ele tem que pegar o delete item do que foi renderizado vamos ver se é isso mesmo vamos fazer o teste aqui vou colocar um Airpod Vamos tentar agora deletar o Xbox aqui momento de tensão clicou quer remover esse item e não não funcionou também mas que coisa rapaziada deixa eu ver aqui o que que tá acontecendo eu vou dar uma olhadinha geral pra gente não se delongar muito aqui e já volto beleza pessoal voltei aqui o que que tá acontecendo a gente tava tentando usar o método dis

aqui dentro do diog de confirmação E aí ele não tava Funcionando aqui tá pessoal não tava dando certo então a gente colocou agora do lado de fora antes do diálogo de confirmação eu passei o parâmetro data agora em vez de usar o htr Data index E aí tô pedindo para ele mostrar qual que é esse índice antes de fazer a confirmação de de deletar Tá então vamos ver se agora vai funcional então aqui a gente tem esse primeiro item vai ser o índice zero ó já tá mostrando índice é zero o segundo do índice é

um terceiro Índice dois Beleza então vamos tentar deletar o maudito do iPhone agora que não quer ser deletado de jeito nenhum cliquei aqui vamos dar um sim então é para o índice um vamos remover aí agora sim foi removido o índice certo beleza vamos deletar o Macbook aqui deletar Agora sim agora funcionou e vamos deletar o airpod aí nada por enquanto agora funcionou deu certo que sufoco né Mas é isso que acontece no nosso dia a dia de desenvolvimento né pessoal vai Dando os problemas aí e a gente tem que encontrar solução né isso que

eu já tinha feito esse projeto antes e tinha eh mais ou menos feito dessa forma aqui não sei porque não tava funcionando né Mas é bom que a gente vai vendo as realidades aí de quando tem problemas também né ainda que dá uma alongada um pouquinho na aula vamos adicionar novamente os itens aqui vamos lá tô quase com vontade de nem pôr um iPhone aqui da Desgraça não funciona esses iPhone da miséria Vamos colocar aqui uns itens beleza aqui ficou meio bagunçado deixa eu limpar esse console aqui e agora a gente tem que fazer os

botões de menos e de mais eh funcionarem né então a gente vai colocar os eventinhos aqui só que isso aqui era uma coisa importante que a gente não tava fazendo mesmo esses eventos entos é bom ficarem logo abaixo do it aqui do de onde percorre e monta Tá então aqui a gente vai ter o Minus e o Plus né e cada um tem o seu data índice Então vou copiar aqui ó o do delete vou copiar esse aqui colar aqui embaixo única coisa que a gente vai tirar esse essa confirmação então aqui a gente só

vai ver para ver o índice né o índice aqui a gente vai colocar [Música] menos só para ver se ele tá pegando Qual É o índice correto quando clicar aqui no no minos né Então aqui tem que dar zero índice é zero aqui tem que dar um e aqui tem que dar dois Beleza então ele tá pegando Qual que é o índice certinho pra gente não ter aquele problema que tava dando antes então agora a gente vai ter que fazer a questão do cálculo né de se diminuir Um item aqui fazer as vi das atualizações

também lá no nosso local Storage de carrinho Então a gente vai Fazer o seguinte a gente vai fazer uma condição assim ó se o carrinho na posição que vai ser esse índice que é a posição conforme a gente tem ali a montagem o índice 0 1 2 conforme a gente viu ali depende da onde a pessoa vai clicar Qual dos itens então ele vai ver no carrinho na pos posição índice se a quantidade for maior que um O que é para acontecer então se a quantidade for maior do que um é pra gente Diminuir a

quantidade né então a Gente vai fegar o nosso carrinho nessa posição índice nós vamos pegar a quantidade e a gente vai usar aqui o menos menos que é para ele diminuir um feito isso a gente vai ter que atualizar o nosso Total item Então a gente vai pegar o carrinho na posição índice nós vamos pegar o nosso campo total e item e a gente vai fazer agora que ele vai ser o carrinho na posição índice Quantidade ponto quantidade vezes carrin posição índice ponto item P preço promocional para que a gente possa atualizar o total daquele

item certo então a gente diminuiu uma quantidade a gente agora atualizou Qual que é o total desse item agora vamos atualizar o nosso local Storage Então vamos fazer local Storage P set item carrinho E aí vamos fazer um Jon string F Salvar esse nosso carrinho beleza e agora a gente pode mandar aqui atualizar a nossa página app P views P Main P router refresh page Beleza então aqui a gente pode fazer assim né se tem mais de um item na quantidade se não quer dizer se não tem mais de um item na quantidade quer dizer

que a pessoa apertou o botão de menos e vai ter menos do que um ou vai ter um Certo porque aqui é maior que um então se tiver um ou menor que um é para aparecer isso aqui então só vai acontecer se no um na verdade né então a gente pode fazer assim uma confirmação né a gente pode fazer assim app. dialog pcf e aqui a gente vai fazer assim gostaria de remover e aqui a gente até pode pegar aqui qual que é o nome do item né então a gente pode pegar assim ó item

name vai ser igual a gente vai pegar o carrinho nesse índice e a gente Vai pegar o item ponto nome então gostaria de remover daí aqui a gente pode colocar um assim com tag B mesmo que é bold né Ou pode usar o strong também vamos usar o strong que é melhor né gostaria de remover aí aqui a gente pode usar vamos usar primeiro template string aqui pera aí deixa eu recortar isso aqui vamos usar as duas crases gostaria de remover aqui a gente vai passar O item name quer gostaria de remover o item name

vamos fazer ponto interrogação aqui remover e aqui uma função se a pessoa concordar né uma function caso isso aí realmente aconteça Então se acontecer gostaria de remover a gente vai pegar o nosso carrinho e vai dar um Splice nesse índice E aí vai atualizar esse esse carrinho vai pegar aqui de cima atualizar esse carrinho e atualizar A nossa página certo então beleza então esse aqui é o botão de menos a pessoa clicou no botão de menos vamos copiar esse daqui cont control c e agora vamos fazer o botão de mais aqui vai ser o Plus

Então a gente vai recuperar Opa Plus a gente vai recuperar Qual que é o índice aí aqui a gente não vai precisar fazer essa validação aqui ó a gente vai fazer assim a gente recupera qualquer o índice vai Fazer o carrinho nessa posição índice e vai aumentar a quantidade quantidade mais mais aumentar mais um E aí a gente só vai ter que fazer esse cálculo aqui ó vamos já copiar aqui de cima que vai ficar mais fácil pegar o cálculo para ele saber qual que é o total item novamente nesse índice vai ter que atualizar

o nosso local stor e vai ter que atualizar a nossa página refrescar a página Né salvamos o novo local Storage Beleza então o Plus né aumentar a quantidade é mais fácil N A gente vai fazer nada mais do que aumentar a quantidade que a gente tem lá no índice do nosso carrinho ver lá qual que é o valor do total item novamente Salvar esse novo carrinho atualizar ele e então atualizar a nossa página certo é na verdade pessoal não vai ser legal a gente atualizar a página tava pensando Nessa parte aqui dos botões é de

menos e de mais não é legal atualizar a página porque senão a gente vai ter que atualizar tudo de novo Cada vez que a pessoa clicar no botão renderizar novamente na verdade a gente pode fazer só o seguinte aqui a gente pode usar os métodos que a gente já criou que é o renderizar carrinho e o calcular Total carrinho né calcular Total esses dois métodos aqui em vez de atualizar a Página beleza vamos ver se isso aqui funcionou vamos lá então vamos começar pela desgraça desse iPhone aqui então vamos ver o total lá já tá

dando 19.000 tal vamos colocar mais um dois ó foi para 14 mais um mais um Beleza então tá calculando lá certinho 94 109 beleza vamos tirar aqui o Xbox vamos bom vamos botar um menos para ver ó Menos tá diminuindo vamos remover aqui um só beleza e vamos clicar aqui para remover gostaria de remover o iPhone sim aí removido Beleza já tá dando o valor certinho lá embaixo certo legal ele tá dando essas piscada agora não piscou mas de vez em quando dá umas piscada aqui pessoal porque no navegador ele faz isso Tá Mas quando

você for testar no celular você vai ver que ele não acontece isso ele tá Piscando porque ele tá renderizando novamente a página aqui né E aí por isso que ele dá essas piscadas aí eh daria pra gente só fazer aumentar aqui nessa parte do input só um número e só fazer a soma sem ter que renderizar novamente mas aí vai dar mais trabalho né assim já tá funcionando bonitinho e já tá legal Vamos esvaziar o carrinho beleza vamos ver então pessoal se deu certo aqui o nosso projeto né Vamos começar do Começo que deu um

sufoco nessa parte do carrinho aí mas deu certo né É assim mesmo vamos comentar essa parte de mandar a gente direto pro carrinho aqui e vamos voltar lá na nossa página inicial então entramos na nossa página inicial vai puxar os itens aqui para nós vamos adicionar um Macbook um iPhone Xbox e um airpod certo então tem quatro itens lá Entramos os os itens estão alistados né se a gente adicionar mais um de qualquer item Vamos colocar mais um Mac por exemplo aqui ele vai que tem dois na quantidade lá então tá vendo certinho aqui tá

dando os totais certinho né 36.42 1995 se a gente adicionar mais ele já vai atualizando lá o nosso subtotal né lá 62.000 beleza aqui a gente se colocar menos ele vai também removendo lá do Total se clicar aqui no menos ele vai verificar que tem um só tá perguntando se a pessoa quer remover sim dá para remover também no x aqui de fechar para remover só esse item e temos aqui o esvaziar carrinho que pergunta se quer esvaziar o carrinho sim e aí nada por enquanto E aí fechou beleza pessoal Então esse é o nosso

projetinho aqui né Aí se fosse um projeto real você precisaria aí ter o a parte de checkout para fazer o pagamento né claro antes Dessa etapa aqui de entrar no app você teria que ter alguns sistema de login para ter os dados desse usuário né fazer as páginas de busca de favoritos aqui né para na página do usuário por exemplo saber o que ele comprou com onde que os itens dele estão né e várias coisas que ainda precisariam ser implementadas e agora para concluir Vamos pro momento de Glória né que é pegar esse nosso app

aí e rodar no nosso celular instalar ele no celular Afinal a gente táa construindo Ele justamente para ter um aplicativo para Android né então você vai vai pegar aí o teu celular vai pegar o cabo USB né conectar lá no computador a gente viu isso na aula de número três aqui né esse processo de como é que a gente gera para colocar no celular as coisas mas vamos fazer aqui também então a gente vai encontrar aqui na nossa Roots lá na linha vamos achar agora onde é que ficou agora tá na linha 197 cresceu um

pouco mais aqui o nosso código né a gente vai Comentar esse aqui que é o de testes no navegador a gente vai comentar esse aqui salvar então esse var viw aqui né a gente vai comentar agora ele não vai funcionar direito porque ele ele tá sendo específico para rodar no Android a gente pode até fechar o Live server aqui parar né e agora a gente vai rodar essa aplicação no nosso celular então a gente vai dar aquele comando adb devices aqui para a gente ver se o nosso celular tá se comunicando com o computador então

ó Não apareceu deixa eu botar minha cara aqui desse lado não apareceu ele alistado ali deixa eu vou desbloquear ele aqui ó agora deu o barulho vamos ver se ele vai DB devices agora ele tá conectado com o meu device e vamos dar o comando cordova Run Android para que ele compile a nossa o nosso projeto e rode no celular pra gente ver ele rodando no celular né então vamos aguardar aqui ele terminar a compilação e vamos ver se deu certo então tá lá mostrar para vocês Aqui ó como é que ficou no celular olha

só que bonitinho né que top rapaziada como é que ele ficou né Vamos fazer um testezinho vou tentar fazer por aqui para ver ó clicou aqui no item abriu olha só que bonitinho vamos ver se eu consigo aqui ir navegando por aqui ô meu Deus do céu tá difícil de ver por aqui ó carregou viu vamos clicar aqui no Mac vamos adicionar ele no carrinho aqui aí deu certo vamos voltar lá ó a sacolinha lá em cima vamos ver se vai vai vai Focar deu o nosso carrinho vamos vamos adicionar mais uma coisa vou adicionar

aqui o Xbox adicionei beleza adicionado vamos voltar vamos lá pra nossa sacolinha ô meu Deus do cé é difícil esse espelhamento hein oh não tô conseguindo vou clicar aqui aí nosso carrinho de compras nosso Total ali né Vamos aumentar aqui vamos ver se eu consigo deixa eu ver se eu consigo fazer um jeito que vocês conseguem ver e Eu também aqui ó no mais uh meu Deus do céu tá difícil é melhor quando eu espelho com o programa ali ó vamos colocar aqui ó mais ó adicionando mais Aí lá embaixo dá o total vamos esvaziar

o carrinho vamos clicar aqui no canto esvaziar carrinho Tem certeza Sim esvaziou nada por enquanto enfim o que a gente tinha feito ali antes né rodando no nosso celular muito legal a gente ver ele rodando bonitinho aí né no nosso celular bem bonito mesmo Isso aqui é uma Sensação indescritível de você ver um app de alta qualidade rodando aí no seu celular eu espero do fundo do meu coração que você tenha gostado dessa série que ela tenha ajudado você a entender como funciona aí para desenvolver aplicativos usando essa técnica de desenvolvimento híbrido lá no meu

curso completo de desenvolvimento de apps você encontra muito mas muito mais coisas interessantes como usar os plugins do sistema do celular né a Câmera geolocalização mandar notificações como você faz sistema de pagamento é tanto para checkout como por exemplo num projeto como esse aqui de vendas de produtos físicos como também um checkout de produtos digitais como você faz para fazer anúncios né naqueles aplicativos que são gratuitos e aparecem as propagandas para você ganha dinheiro como você publica na loja da Google Play tudo isso e muito mais a gente ensina no meu curso completo de criação

de Aplicativos então se você tiver interesse clica aqui no ícone que você vai poder acessar a página de vendas e conhecer um pouco mais do meu curso beleza esse projeto vai tá o código fonte disponível lá dentro do meu curso Então se você quiser também pode fazer o curso e também pegar esse projeto para você caso você queira beleza Um forte abraço e até a próxima valeu