Trilha FULLSTACK | Aula #3 – E-commerce II

Se tiver sacud aí, por favor. Tô gravando já. Eu esqueci de avisar porque eu pensei que não pudesse mexer, mas eu posso. Já tá gravando. Eu tô usando o Mac para gravar. >> Show de bola. Então vamos lá, galera. Vamos começar compartilhar aqui a tela com vocês. Mas olha só esse sapato spoiler. >> Bom, pessoal, eh hoje a gente vai dar Mais um passo na nossa de Fteck. A gente vai trabalhar componentização e reatividade, beleza? Eh, a gente vai iniciar nos nossos trabalhos com aização e reatividade com vi JS, certo? Então, o que que a

gente vai trabalhar hoje? Aliás, antes de mais nada, que que a gente trabalhou na aula passada? Que que a gente viu? A gente viu a diferença Entre JavaScript, o TypeScript, não é isso? A gente viu o que que são as módels anêmicas e ricas. vi as interfaces do types, né? A gente viu que TypeScript, ele é uma extensão do JavaScript, o qual eu posso adicionar tipagem estática ao meu JavaScript, né? E no final, quando eu buildo o meu projeto, ele gera um JavaScript equivalente para que a gente possa colocar no nosso Servidor. As modelagens, as

modas seriam modelagens dos nossos objetos. São exibidos em tela, né? A gente pode ter a modelagem anêmica, só tem os atributos, as modelas que tem as regras de negócio, tem os métodos, tem as ações, né? As interfaces o types, a gente viu que as interfaces seriam eh muito utilizados para as regras de negócio, teriam os nossos contratos e os types seriam ideais para modelar os tipos do nossos Objetos, não é isso? Beleza? Com relação a isso, pessoal, como é que tá eh a condição de vocês? Vocês conseguiram pegar bem esse conteúdo? Tá tudo tranquilo? OK.

E ok? Diga lá. Quiser falar, pode falar. Vamos. Ah, tranquilo. Então, tudo OK, né? A gente pode prosseguir. Então, o que que a gente vai ver hoje? A gente vai ver a inicialização do nosso projeto utilizando o VJS. A gente vai entender como é que funciona a parte de reatividade, vai ver a modularização dos componentes, vai entender como é que a gente pode montar esse quebra-cabeça e vai ver como é que funciona a comunicação entre os componentes. Beleza? Pronto. Então, eh, mais uma vez, eh, tá até comentando, né? No começo foi complexo, Mas depois assistindo

aula, fiquei tranquilo. Vocês façam isso, viu? Assistam a aula, se tiver dúvida, não tem problema, pode perguntar e tentem rever porque questão porque tem muito conteúdo mesmo. Eh, a gente tem uma grande carga de conteúdo. Então, o ideal é que vocês revisem sempre apóis a aula, assistente essa aula para fixar. Tá, hoje normalmente problema do TSC. Beleza? Inclusive, viu, Júnior, eh, naquele da aula mesmo eu tive um Problema com TC. Eu pulei porque não queria perder muito tempo resolvendo esse problema durante a aula. Eu tinha feito um antes, aproveitei. Qualquer coisa você manda mensagem, alguma

coisa que a gente resolve depois, a gente dá uma olhada do que tá certo. Beleza? Então, ao final dessa aula, o que que a gente vai ter eh feito, né? A gente vai ter modelado os cards dos produtos e vai ter listado esses cards, certo? E se der tempo, a gente vai ter eh criado a ação Lá de adicionar o card, beleza? Eh, então bora colocar a mão na massa. Vamos lá. Primeira coisa que a gente tem que fazer o nosso QLS code. Vamos aqui abrir o glass code. Tem um pouquinho do que eu tava

aproveitando aqui, mas eu vou iniciar um uma nova pasta. Eu vou aqui em documentos, coloquei a nova pasta. Já tem uma pasta para isso. 12 Uma pasta ecomes, certo? Dentro de e-commerce, vou clicar com o botão direito. Aliás, vou abrir, já abri. Sei. Abre a parte. Pronto. Dentro da pasta de coms eu vou criar eh o projeto em view. Para que eu posso criar o projeto em view, eu vou lá no Google e vou digitar view 3, certo? Que que é o view? V framework. É um framework de JavaScript, certo? ele Pode ser utilizado o

Hypes para desenvolvimento. Eh, o VI ele é ele foi feito por um dos desenvolvedores do Angla. Não sei se vocês conhecem o Angler. O Angler é um framework do Google, eles foram um dos primeiros frameworks. Ele é muito utilizado em grandes empresas, das múltiplas e ferramentas que eles disponibilizam, certo? Ele é bem completo. O ver ele já é meio que Intermediário entre Angula e React. O React ele sendo uma biblioteca de JavaScript. Uma biblioteca ativo. Você consegue fazer bastante coisa, mas você também tem que instalar bastante bibliotecas à parte. O angle ele sendo bem complexo,

eles vendo tudo e o ele intermediário, ele tem um um ele tem um meio ambiente, ele tem um um envirment, Como é que eu posso chamar isso? Eu posso chamar isso de posso chamá-lo de Posso traduzir isso, pessoal? Ele tem um ecossistema que tem bastante ferramentas que facilitam o desenvolvimento, certo? Então, para instalar o views, a gente vai vir aqui em install. Se vocês tiverem dificuldade de inglês, não tem problema. Aqui em cima, na navegação, ele lista várias traduções do da documentação, Certo? Colocar até aqui em português. Então, eu tenho a opção de instalar. Para

instalar, eu tenho que ter na minha máquina o Node JS, certo? No mínimo, no mínimo aqui ele vai pedir o quê? Vai pedir uma versão, se eu não me engano, na parte da versão 20. Então vocês confiram. De um node menos version e vejo se é o mínimo. Pronto. Aqui, ó. Que o mínimo é 18.3 para essa versão. Beleza. Vou copiar esse comando aqui, ó. Npmateview @le. Então ele vai pegar a última versão do vou aqui no meu terminal vai ser cod em cima, clico terminal, novo terminal e vou clicar aqui e apertar as teclas

ponto escritivo. Certo? Esse comando aqui, ele vai gerar todo as pastas, n todas as partes necessárias para que eu possa eh desenvolver meu projeto. Beleza? Uma dica para vocês, Para que vocês não tenham que criar essa pasta depois entrar nesse diretório novamente, porque geralmente o que é o que acontece? Você cria a pasta, depois entra nesse diretório, tem que abrir mais uma vez o coiso e você vai dar um espaço, vai colocar ponto, certo? Assim, ele vai entender que nessa parte ele vai colocar já todo as pastas necessárias pro pro meu Facebook. Beleza? Quando eu

der o enter, ele vai pedir o nome do meu package. Então eu vou Colocar aqui vai perguntar se eu vou ter desejo de utilizar TypeScript, se eu desejo utilizar o TypeScript para articolo. Aperto enter. Concordo. E aqui ele vai dar uma lista de de eh bibliotecas que eu posso utilizar. faz parte do ecossistema view que eu posso selecionar a partir do do barro do espaço, certo? Então ele até aqui, ó, navegue com as sets para cima e para baixo, Certo? E aperte o barra para selecionar aquilo que você deseja instalar. Então eu não quero o

JSX, eu vou querer o router, porque a gente vai necessitar. O router ele é para navegação em spa e single page e application. A aplicação só tem uma página, multiplica isso daí. Vou querer também o Pinha, vou apertar espaço pro Pinha. Ele é um vereador de estado global. Vou ter o Vitest que é para teste Unitário. Por enquanto a gente vai trabalhar com isso. Test. Então ele vai te dar uma lista de de bibliotecos que eu posso utilizar para teste conta conta. Não vou utilizar também. Vou colocar um link para preveniros. Vou colocar o clear

para formatar o código, certo? Depois que eu selecionar as bibliotecas que eu quero instalar desde o início, vou apertar o enter para confirmar. Aí depois ele pergunta se eu quero incluir algum projeto eh experimental. Então, a gente vai pular essa parte que a gente não vai selecionar nada e vai apertar ent. Aí ele pergunta também se eu quero estipar, se eu quero pular o código de exemplo, certo? Se você quiser, você não tiver experiência, você pode colocar y que ele vai te dar um um código básico e já meio que estrutura tudo aquilo que você

precisa, a parte de componente, a Parte de views, a parteação. Só que no nosso caso a gente vai escolher, não, a gente não vai colocar isso, a gente vai pegar só o o código básico, só o básico mesmo. Então vou dar também e ele já instalou aqui as pastas e também o meu pack Jon. Ton, eu vouar a lista de arquivos de tendências e vou estar entre meio fo, certo? Aí d isso, eu vou eh dar o comando npm store. Então, nm store, ele vai fazer o quê? Vai pegar o meu pack Jon, vai ler

todos o as dependências que tem disponível aqui e vai instalar elas no meu nude mod. Pacote que tem aqui que tem todas as bibliotecas que eu preciso. Eu posso depois dar um penat que é um script que tem aqui já disponível, ó. Ver o format, ele vai utilizar o para formatar os meus arquitos, beleza? Esse é o opcional. Para rodar meu ambiente de desenvolvimento, eu vou utilizarm Dev. Beleza? Vamos dar aqui, ó, PM e eu posso dar só PMI, ele vai entender que é o store e vai baixar minhas dependências. Podem ver aqui que acima

vai aparecer uma pasta no mó. Espera um pouquinho se vocês verem também. instala também tem git ignore git atribut né atributos git se você quiser você pode também já começar a omitar as suas mudanças do git colocar a versão do Seu kit importante não é fazer iss para instalar Ah. Pronto, instalou. Pronto. Ó, aqui em cima tem o nome de módulos e tem todos os as bibliotecas necessárias para rodar o meu projeto. Aqui ver tudo isso daqui. bibliotéca você entenda como trecho de códigos e parceiros, mas um colega seu fez parte do >> de uma

fit lá que ele vai ter um Contador e vai ter uma fit lá que ele vai poder renderizar um botão diferente, vai ter uma fit lá que vai terização ter int. Então essas partes ficam aqui disponíveis para que eu possa usar essas features, certo? Tá tudo aqui. Pronto. Aí o que que acontece? Quando eu rodo esse pão, esse comando padrão, ele gera essas partes com essa seguinte arquitetura, seguir divisão. Você vai ter uma pasta de componentes, certo? No caso, eu escolhi a escolhi o padrão com problema. Então ele veio com componentes, ele veio com a

pasta de roteamento, navegação, tem uma pasta de stories, que é o contexto global, a pasta de vírus, certo? O que que eu vou fazer? Eu vou limpar isso aqui para vocês. Se não precis entender o que que eu vou fazer nesse momento, eu vou limpar e a gente vai comentar, certo? Espera só Um pouquinho. Ver se assim já consigo rodar. Se não fusar nenhum erro. Ó, certo. Ó, quando eu dou PMR, eu vou startar meu ambiente desenvolvimento e ele vai fornecer os links para que eu possa acessar o meu navegador. Vamos aqui host. Ah, vai

reclamar reclamar nas importações. Problema. Deixa euar aqui isso aqui Aqui aqui. Pronto, rodou aí. Tá com a estilização aqui que ele global. Deixa eu virarizar também. Beleza. Tomando a importância vai apagar. Pronto. Como é para tá aqui, ó. Já criou a minha aplicação, já tem um servidor aqui web, já consigo usar usar O que eu tenho aqui na minha página. Por enquanto eu não tenho nada, né? Como é que é a estrutura do vio? Basicamente, eh, o meu componente, ele vai ter essa terminação aqui, ponto view, ele vai ter três pontos importantes. Ele vai ter

um script, certo? vai ter um script, vai ter um template, ele vai ter também um stat, Certo? Cada um tem uma responsabilidade. O script é onde eu vou colocar a minha lógica, vou colocar meus códigos em JavaScript, TypeScript, meu template é onde eu vou colocar eh a parte lá que seria equivalente a HTML. OK? E aqui no style vai ser equivalente ao CSS, onde vou colocar utilização, tá? Como se eu tivesse esses três arquivos e eu pudesse juntar tudo em um, OK? Pro script, eu vou pedir que você sempre coloque aqui langue Test, certo? Aqui

eu digo que é obrigatório utilizar type script nesse componente. O template já a gente trabalha nisso e o style eu vou deixar de lado um pouquinho, a gente não vai utilizar, certo? O que acontece? Essa biblioteca aqui, ela é uma biblioteca reativa. Como assim? Antigamente a gente desenvolvia eh servidores estáticos. Se você for aqui, Se vou pegar pegar aqui uma página web antiga, pegar aqui o arru vocês visualizarem aqui. Opa, isso aqui aqui parecia muito um arte, né? você tinha bastante texto, com bastante formação e poucos eram as ações disponíveis aqui na minha página. Então,

o foco era mais passar informação e pouco interação com o usuário. Só que com o passado do tempo, eh, essa Interação foi crescendo e passa a necessidade de que os frameworks, que os meus códigos pudessem eh disponibilizar essa interação pro meu tempo de uma forma mais fácil, que eu pudesse desenvolver de uma forma mais fácil, certo? Então foi crescendo essa necessidade, crescendo, crescendo, crescendo. E ali por volta de 2005, 2004, teve um dos engenheiros do Google que ele disse que conseguiria entregar Um projeto que demoraria eh 2 tr anos em poucos meses. Ele não conseguiu

cumprir o prazo dele, mas chegou muito perto. Então ele forneceu o ângulo, certo? A partir daí, eh, o pessoal viu que era muito útil ter esses frameworks para trabalhar a reatividade, trabalhar o lado do cliente, trabalhar conente, certo? Então, basicamente, esses framewks resolver um problema de reatividade, de você poder clicar no botão, ele adicionar um texto, eu clicar Um botão, ele poder adicionar o item ao carrinho, clicar o botão, ele ele fazer a navegação, tudo em uma única página. Se seriam single page, certo? Então o view ele fornece aplicação reativa em única página. Basicamente ele

utiliza JavaScript para montar as telas. Eu não eh se preocupo tanto mais criar várias páginas para ele vai ter uma interação de JavaScript. Tem uma única tela que interage somente com JavaScript. Beleza? Então basicamente o que é que eu preciso na estrutura do meu vídeo? tava pensando em você se a ligar, mas tão cansada uma API que é a options API. >> Então só pode dar rabiola usar essas duas documentações. Eu posso referência pela opções que seria as opções API ou a composição, que é a composi API. a gente vai utilizar as opções. Basicamente ele

te dá uma lista de opções, você pode utilizar para poder fazer essa renderização. Então, no view Mais moderno, você basta você colocar export, ele já entende que isso aqui é um componente, certo? Os mais antigos, você precisaria utilizar esse método aqui do fine cont. para vocês verem, mas só o esporte é folha suficiente, >> certo? Então para simplificar, a gente vai utilizar só export, ele vai te dar uma um objeto qual eu vou Colocar todas as posições disponíveis. Aí tenho várias opções. Eu tenho a opção para dados. >> Eu tenho a opção métodos. Eu tenho

opção para ciclos de vida. Então posso trabalhar c de componente como ele é montado, como é que ele é desmontado. A gente vai trabalhar isso daí material. Sim, por isso vai te dar a lista de opções que são eh eh importantes para você fazer essa rendização tela. Por Enquanto a gente só vai trabalhar com duas, data e métodos, certo? Dados e os métodos. Beleza? Nos dados e eu vou poder disponibilizar objetos que ele vão ter partes dele e reativas. Então, por exemplo, eu posso ter um dado aqui que seria um carrinho. Cart, basicamente é o

método que ele retorna o objeto com os dados que eu quero colocar em tela, certo? Esse carrinho eu poderia Ter o total. Vou começar >> com zero. Então você coloca a chave que você quer identificar esse dado e o valor inicial dele. Você pode até colocar assim n vai identificar. Se você não colocar ele infere que isso aqui é um número do type. Então, quando eu tenho eh esse dado aqui explícito na no meu script, eu já posso exibir ele no Meu template. Então, eu posso colocar aqui como se fosse um HTML H1. Ele vai

identificar o carrinho, certo? colocar isso aqui dentro de aliás colocar no main representar a página colocar no que representa meu card. Dentro desse card eu vou colocar carrinho e vou colocar Total, certo? para eu colocar essas informações aqui de script no meu template, no meu HTML, bastante SAPS aspas, né? Eu vou colocar eles através de duas chaves. Vou abrir duas chaves e eles chamam isso de mustate de bigote, que lembra muito bigote. Nesse espaço aqui, dentro desses dessas chaves, eu tenho o Java Script. Posso colocar aqui total, Ele vai representar o total do meu carrinho.

Caixa total. Certo? Se eu pô aqui na tela, hein? Observar, já tem essas informações. Carrinho. Dá um carrinho e total. Beleza? E se eu quiser, por exemplo, eh, colocar alguma operação JavaScript, eu venho aqui, ó, eu posso colocar mais um e automaticamente ele tem isso daqui como sendo 0 mais 1, Renderiza. Beleza? Isso vai me possibilitar ter a reatividade no na minha tela. O que que acontece? Para que essa reatividade aconteça? É necessário que eu utilize eventos, eu utilize ações. Eu preciso identificar aqui. Houve um um clique aqui na minha tela e isso disparou uma

ação, um método. Certo? Para eu disparar essa ação, é necessário Que eu coloque aqui botão, colocar um botão. Vamos colocar botão de adicionar. Para capturar o ação de clique, eu vou colocar aqui @click. Então, todas as ações do do meu HTML, elas são rastreadas através desse arroba. Se eu for lá na documentação do view e procurar lá, vai ter evento de clique, o mouse down, vai ter um evento de de e submit. Então, todos os eventos que A gente tá acostumado JavaScript, você consegue acionar eles através desse ar. Certo? Então, clique, eu vou acionar ele

e ele vai disparar o método. Então, vamos criar o método aqui de adicionar item ao carrinho. Então, vamos colocar um ad. Beleza? Esse basicamente vai fazer o quê? vai pegar o caix total e vai adicionar um, né? Como é que eu faço para adicionar um? Eu pego o valor que Tá em memória, né? Valor anterior, adiciono. Ou se eu quiser simplificar, eu coloco só mais na frente aqui e um. Isso é uma forma suscinta, escrever a mesma coisa, certo? Percebam que quando eh escrevi cart ponto total, automaticamente o meu autocompate colocou o texo. Para que

que serve esse? Para referenciar esse objeto que eu montei, Certo? Então ele percebe que esse d ele tá apontando para esse dado e esse dado é o cat, então eu vou poder trabalhar com ele. Beleza? Então vou colocar aqui o método, ó. Ed. Aí quando eu clicar nesse botão, ele vai disparar essa ação do método. Ele vai adicionar um ao meu carrinho. Vamos ver isso. Ó, já começou com um, né? Vamos adicionar, >> certo? Então eu já consegui tornar a minha página reativa. Ela tá reagindo às minhas ações, aos eventos que eu tô disparando. Isso

de uma forma muito simples. Bastou eu criar esse template aqui e ele já fez tudo por mim. Então o framework ele quebrou essa barreira aí. Ele já tinha que fornecer todas as ferramentas para que eu possa criar essa reatividade. Beleza? Se eu quisesse eh decrementar o item, o que que eu faria? Digam aí, Pessoal, como é que seria aqui o botão, né? Que que eu faço aqui? Coloco @clique. Coloco o quê? Coloco o item de novo. Não, né? Vamos colocar. Vamos colocar o decrementar. Então vou criar esse método vai decrementar, certo? Então eu faço o

quê? Eu faço oposto em vez de adicionar a decrência. Eu boto menos igual. Então ele já entende que ele vai pegar o valor de memória, que é o anterior, e vai diminuindo. Vou mandar aqui como fica. esqueci de colocar o texto. Colocar texto. Então, tem ação de adicionar, tem ação de incrementar. Então, num carrinho como aqueles que a gente viu do Mercado Livre, já poderia que entender que é isso, equivalente a Isso daqui, ó. Cadê os itens? Não adicionar o item aqui. Pronto. Então, tá aqui, né, ó. É equivalente a isso aqui, ó. poder aumentar

e diminuir. Beleza, show de bola. Beleza, eu entendo que eu consigo comunicar o meu template, eu consigo estabelecer os dados que vão Estar na minha tela e eu consigo eh perceber essas ações eh da minha tela. meu cliente e reagir a elas, certo? Como é que eu vou estruturar o as minhas informações no view? O que acontece? Eu posso colocar todas as informações aqui, esse template, né? Ó, aqui. Ah, eu tô vendo o carrinho. Vou colocar o carrinho. Aí, vou colocar um item. Se viesse outro item. Vou colocar outro item aqui diferente. Vou no outro

item. Veja. Ah, tem outro item. Vou aqui, vou copiar que tem aqui colar. Só que isso aí não é prático, né? Se eu fizer isso, eu tô tornando isso aqui estático. Todas as informações que o ônibus está em tela, eu vou ter que digitar. Eu quero que seja isso, isso seja dinâme. Que eu recebo as informações lá do meu servidor, da minha PI, que eu pego essas informações e rederizo. Então, o ideal é que eu monte um estado para cada Informação dessa daqui, né? Então, vamos montar aqui acima. O card, o card do produto, como

é que seria o card do produto? Producto, ele teria basicamente o qu, pessoal? Como montar o objeto dele, quais são as informações de produto? Colocar um título, colocar aqui vazio, colocar inscrição. Vamos colocar O valor, colocar, sei lá, desconto. Aí vai, né? Como é que a gente exibir esse esse produto aqui em tela? Vem aqui, né? Ó, cima. Vamos criar um produto aqui. Pegar esse tem aqui. Copiar espaço aqui. Vamos acessar as informações. Como é que eu acesso o título do meu produto? Coloco o quê? Eu abro as chaves, P, coloco Agora eu já tenho

o título do meu produto. Vamos colocar aqui guitarra e tá, né? Ah, eu quero colocar a descrição. Vou vir aqui. Coloca a descrição. Abro as chaves. Coloco o produto. Já vou ter a descrição. Vou colocar na descrição aqui 22 em. Beleza, já aparece aqui 22 traços em aço. Show de bola. Ah, eu quero ver o preço. Posso colocar aqui o preço? Vou colocar aqui. Tá 45 com eles. Combino o texto com JavaScript. Então aqui eu vou ter e o preço. Vou observar aqui. Vamos fazer o seguinte, colocar lá para lá. Tá lá lá. Tá. Então

tenho preço aqui. Se eu quiser Aplicar JavaScript aqui para formatar esse texto, o que que eu posso fazer? Eu posso vir aqui, ó, fix fixar aqui duas casas, certo? Aí eu posso formatar ele aqui e colocar lugar desse ponto, colocar a vírgula. Então, veja, ó, que eu tenho todas as possibilidades aqui, ó, do JavaScript dentro desse espaço. Beleza? Se eu quiser eh Renderizar mais um produto, o que que eu faria? Teria que vir aqui, né, ó, ó lá, teria outro produto barra do, certo? Só que isso aqui não é viável, né, pessoal? Aí imagina para

cada daqui, eu tenho que escrever isso daqui. Então ideia que eu faça o quê? O ideal é que eu faço uma lista, né? Então em vez de ter o products aqui, só um vou ter um products, a lista de produtos. Em vez de eu digitar tudo isso, o que é Que eu faço? Eu crio aqui uma moda, ó. Eu vou aqui, eu não vou modelar as informações dentro dela. Eu vou aqui no SLC, vou clicar criar um folder, criar modelo. Módelo de produto. Como é que seria módulo de produto? É basicamente as informações que eu

coloquei, né? Product.mel. Sigo sempre esse produto, perdão, nome do da modelo model que seria diretório, né? Ts. Beleza? Então eu vou criar aqui a minha classe, ó, export product. Aí ele vai ter o método construtor. Método construtor. Eu vou colocar os atributos que eu quero que sejam inicializados. Aí eu vou colocar aqui, sei lá, vou colocar título, vai ter que ser tipo string e a description para outro lá, né? Description vai ter string também. Vai ter o number, vou ter oí vai ser o number. e coloco isso aqui tudo como para que eu possa ter

acesso, né? Quando eu faço isso, eu crio o quê? uma classe a módel anêmica, ou seja, que só tem atributos que eu posso colocar aqui, ó. Cortar, né? Colocar aqui dentro do espaço reservado ao script e lá ele perguntar: "Ah, quais são os atributos que eu tenho que adicionar?" Tá, vou colocar aqui o carro, vou colocar que vai ter uma descrição, dois trastes. Ah, vai ter o preço 20, não, 200, um desconto de 500. Beleza? Com isso, ó, a gente conecta o que a gente trabalhou na aula passado. Eu Peguei a minha módel, ela modela

os dados que vão ser exibidos. Eu tenho uma módel anêm que eu consigo criar meus objetos. Ele vai servir como fosse um DPO, vai servir para transferir as informações e já posso trabalhar com ele em tela disponível, né? Só que eu disse que eu quero o qu em vez de ser só um produto, eu quero a lista de produtos. Então vou colocar aqui com a rei. Esse arrei ele vai ter mais um poder certo. Pronto. Aí o que que acontece? Como eu tentei acessar o meu product, ele quebrou, né? Não, não tenho mais só um

produto, eu tenho uma lista de produtos. Isso daqui é muito útil para eu exibir um produto só. O que que eu posso fazer? Eu posso componentizar a minha tela. Eu posso dizer que essas partes aqui elas são equivalentes a um componente. Eu posso criar um componente externo, tem todos os atributos que eu Preciso, todas as informações que eu preciso, que ele é único, que ele é reaproveitável. Beleza? Então, o que que a gente vai fazer agora? A gente vai criar agora uma pasta de componentes, onde a gente vai colocar as informações desse componente produto. Então

vamos copiar aqui um um card, componente card, certo? Que ele vai ser um card de produto, Vai ser um product card. Assim ele já entende que é o componente. A partir de agora eu tenho componente como o outro que eu posso ter template e também as ações speed, certo? Sempre colocando a linguagem type spit. Beleza? Eu posso ir muito bem aqui, ó. Vou pegar meu app, vou copiar esse artigo aqui e vou colocar dentro do product. Beleza? Aí ele vai reclamar. O que que é Esse product? Esse product é o a informação que eu quero

disponibilizar em tela. Eu tenho que fornecer esses dados. Só que esses dados eles vão vir de outro componente. Elão se passar de um componente pai, ou seja, aquele que é externo que vai fornecer as informações e um filho que vai receber as informações. Para que eu possa fazer isso, necessário que eu coloque uma opção a Chamada props. Vamos colocar aqui, ó. Ops. Cortar esse define component. Eu vou ter um product que eu vou definir quais são as informações eh pertinentes aí, né? Eu posso dizer qual o tipo dele, mas ele vai ser um objeto. Aí

esse objeto pode ser objeto, pode ser outra coisa, pode ser um string, eh, pode ser um boleano, pode ser os tipos Primitivos, certo? Sempre com a primeira letra maiúscula. E você pode dizer: "Ah, eu posso passar outras informações." Eu posso dizer que ele é quiet, ele é obrigatório eu passar essa informação. Posso dizer que é desculpa, se eu não passar, ele já entende por padrão é fácil, não é obrigado passar. Eu posso, além de require, eu posso dizer um padrão para ele que vai iniciar com valor, vai iniciar com valor product Ou model não aí

vai, né? Ou simplesmente colocar aqui, né? Ó. objeto aqui, né? Ó, todas as informações pertinentes. Vou copiar aqui. Certo? Ele vai deixar de reclamar. Por quê? Porque ele já entendeu que esse produto já tem todas as informações disponíveis. Posso colocar de fogo, então colocar só Colocar aqui qu aí se ele reclamar, se eu não colocar, né, ele vai reclamar. Reclamar. Eu posso também fazer isso aqui, ó. Colocar, ó, derrogação e dizer que isso aqui é opcional. Pode ser que exista ou não. Deixar do jeito deixar quility. Beleza? O que que acontece? Esse aqui é uma

parte estava disponível ali no meu HTML, que era a parte componente e eu quebrei um componente menor. E agora eu Posso utilizar esse componente aqui na minha outra tela, ó. O app. O app é o pai e o produto card é o filho. Para que eu tenha esse card disponível, vou importar ele e vou informar aqui dentro das opções que eu vou ter um componente, ó. Beleza? Quando eu faço isso, já disponibilizo esse componente para ser utilizado na minha tela. Então, posso substituir isso aqui todinho pelo componente. Então, a escrita dele é muito parecido com

HTML. É como se fosse uma tag de HTML. Ele vai reclamar, ó. tá dizendo, olha, você disse que a minha própria informação de datória, então me passa. Então vou acessar essa informação através de quê? Eu coloco dois pontos e coloco o nome do minha própria. Aí aqui eu passo o meu produto, ó. Vou dizer aqui, ah, vou passar o primeiro produto, products, né? Pronto. Product zero. Que que ele tá reclamando? Tá reclamando que não pode ser undefined. Certo. Que que que pode acontecer? Pode acontecer desse arre aí ele virul, né? Que que eu faço? Ó,

só tem padrão, ó. Copiar. Aliás, vamos fazer o seguinte, vamos deixar aqui opcional. É obrigatório. Se tiver, ele aparece. Beleza. Que que aconteceu agora? Eu tenho o meu carrinho, ó, apresentado aqui pelo aquele componente apresentar bem componente. E em vez de eu copiar várias vezes, eu posso pegar esse arreio, percorrer os itens desse arreio e exibir ele a quantidade de vezes que tivesse item, certo? Se eu fosse fazer isso no React, eu Utilizaria o map. Vou lá um map, percorro todos os itens do meu arrei e exibito isso através de um componente. No view ele

tem diretivas, ele tem alguns eh métodos, métodos não, ele tem alguns artifícios que permitem você trabalhar a tela de uma forma mais fácil, certo? E um deles, uma das diretivas disponíveis é o V4. Todos direitivos vão começar com V, V traço. Então o V for é para fazer o quê? Para percorrer, fazer um for nesse Arrecorrer todos os itens, vai exibir. Vamos fazer isso. Vamos tirar esse botão aqui. Vamos tirar esse carrinho aqui por enquanto. Vamos exibir só o product card. E veio para exibir o primeiro, faz o seguinte, a gente vai criar aqui uma

tag, que ela dica, ela vai servir como se fosse um bloco. Aí dentro desse bloco eu vou escrever, eu quero utilizar a Diretiva reform, certo? O que que esse refor vai fazer aí? vai percorrer produtos para ver for. Além do dizer qual vou percorrer, eu tenho que dizer como é que vai ser nomeado esse item. Então vou dizer que é um produto product. Então products, ou seja, um produto dentro dos produtos. Esse aqui vai ser o item disponível do produto. Então ele vai exibir n vezes. Se eu colocar aqui, ó, product, Vocês vão ver que

existe os dois produtos. Deixa ver o que aconteceu. Tem um producto nenhum. É, seu mo pode dar Umemi. Gostaram? Não deu nenhum silêncios. Deus Tá com atraso, né? exibição. Beleza. Era o componente lá que tava dando erro, né? Ele não tava acusando, ó. Mas deu certo. Apagar aqui. Pronto. Beleza. Eu tenho aqui a minha lista, né? Ó, perceba que eu coloquei aqui, ó, guitarra guitarra dois, né? Ela é equivalente ao quê? Ao produto um e dois. Se eu colocar aqui, ó, que Product, né, ó. Então, ele montou os dois itens. Se eu vi aqui inspecionar,

ó, tem um item aqui e outro item aqui. Beleza? O que que eu posso fazer? Eu posso pegar essas informações, em vez de fazer isso na mão, eu venho e jogo para dentro do componente. componente ele vai receber o meu produto, meu produto, certo? Ele vai exibir aqui, ó. Beleza? Que que tem dentro desse card que eu criei? É justamente aquilo que a gente definiu, né? Ó, título, descrição, preço. >> Então, o que que vai acontecer? lá na minha PI, eu vou fazer a busca dessas informações. Ele vai receber essas informações e vai jogar para

dentro desses produtos. Eu Não vou fazer isso manualmente. A minha PI vai trazer essas informações e eu vou exibir. Beleza? Quando eu fizer isso, eu vou utilizar a diretiva do EFO para percorrer esses itens. Quando percorrer esses itens, eu vou exibir isso aí. Dessa forma, eu vou modularizando os meus componentes, eu vou separando as responsabilidades. Então, fica responsável por exibir as informações de produto, só o produto de card, fica responsável por exibir o a Lista de produtos, só o meu componente que eu criei aqui, for. Diga aí, >> sem querer atrapalhar, mas só falando que

o formulário já tá postado, então, por favor, pessoal, não deixem passar. A última vez eu tinha postado e algumas pessoas não viram e acabaram não eh, pô, não colocando o nome no formulário de participação. Por favor, pessoal, dessa forma a gente tem a noção quem tava aqui. >> Sim, é muito importante, viu pessoal? Já foi feita uma checagem do pessoal que participou da última aula e a gente verificou quem é que não participou, quem não participou, quem participou, quem não participou. Então, sendo hoje a segunda vez, já sabe, é game over. Então, forma até os

colegas também para ficarem atentos a isso, dar sinal de vida, sinal de formação, que coisa do tipo. Beleza? Aí, deixa eu dar uma olhadinha aqui. Vocês fizeram algumas Perguntas? Ah, só esse código vai ficar disponível, viu? Depois, mas a ideia é o quê? que eu passo como exercício para vocês, vocês inicializem e eu acho que eu disponibilizo segunda-feira. Vou dar um tempo para vocês quebrarem a cabeça. Pode ser? Beleza. Show. Pessoal, até agora vocês entenderam o que foi feito. Tá muito no lado, tem muita informação, tá bem explicado, tá de boa. Show Certo. Que que

a gente acabou de fazer? Eh, implicitamente a gente seguiu um padrão, projeto, um padrão view, certo? Se vocês procurarem na internet, existem um site que lista padrões de desenvolvimento. Então eu tenho partner view. >> Aqui, ó, tem o pattern de que é uma lista de paters para desenvolvimento de JavaScript. Deixa eu comprar o outro JavaScript em todos. a série de padrões que facilita a vida de vocês como desenvolvedores. Aí tem os padrões de projetos conhecidos, Singoton, Prox, Prototype, para quem já trabalha com Java conhece pouco deles, né? Tem os padrões para as a os frameworks,

né? As bibliotecas tem padrão para react, tem para padrão para view, padrão para Angular. Que a gente acabou de trabalhar foi esse padrão Aqui, ó. Container presentation. A gente fez uma parte dele, que é basicamente o quê? Eu tenho uma lista de formações, eu modularizo o meu card, meu item, e eu exibo esses itens dentro desse card, certo? Eu exibo os itens dentro desse dessa lista. Então, basicamente fez isso. A gente fez a separação do conteúdo de apresentação, conteúdo de desta. O que que tá faltando aqui? Só fazer o fet, fazer a busca na PI.

Depois a gente vai fazer, mas se Vocês depois quiserem aprofundar nesse assunto, dê uma linda nesse parte aqui dessa publicação, beleza? Só para deixar vocês cientes. Pronto. O que que aconteceu? A gente fez a listagem de produtos, né? a gente viu que a gente consegue modularizar o componente, a gente consegue separar a responsabilidade de apresentar os conteúdos no carro do produto e um outro componente. A gente viu que a gente pode listar as opções de renderização do View. A gente pode colocar aqui através da option PI, através dessa lista aqui, os dados que são exibidos,

os médicos que vão eh modificá-los, né? Como é que a gente poderia fazer para adicionar esse item de produto ao carrinho? O que que a gente teria que fazer? Qual seria a primeira coisa que a gente deveria fazer aqui? Então, pessoal, que que você acha que a gente deveria fazer? Se eu quero exibir o carrinho, o que que eu tenho que fazer aí? Deixar silêncio. Se eu quero exibir carrinho, eu tenho que ter um estado por carrinho, né? Então vamos criar aqui carrinho. A invés de criar esse carrinho aqui dentro do componente direto, a gente

vai criar uma moda para ele. Já aqui uma moda para carrinho. Então vou colocar aqui parte p models. vai ter a classe que representa card dentro desse carrinho eu ter um m Configur e vou ter os atributos desse carrinho. Então eu vou ter que ter o quê? Vou ter que ter a lista de carrinho, né? Ou lista de itens list. Ela vai ser o quê? uma de produtos. Então, boto o product para perceber, pegar o tipo do produto e coloco o arrei, né? Então eles já sabe que é uma rede de produtos. Então o tipo

dele é uma rede de produtos. Além de uma rede De produtos, eu vou ter que ter o quê? Vou ter que ter o total de item, né? Então vai ser um tipo N. E eu posso fazer o seguinte, para não ter que tá direto digitando, colocando informação dentro, eu posso colocar os valores iniciais dele. Coloco igual aqui e que ele vai começar com a revaz e que o valor total inicial dele é zero. Beleza? A partir de agora eu posso Colocar aqui o meu carrinho, vou distanciar, criar um objeto desse carrinho, portá-lo. E a partir

de agora eu tenho acesso às informações dele, ó. Adicionar o total, diminuir total, por aí vai. Beleza? Show. Eu vou colocar esse carrinho aqui embaixo. Colocar aqui o carrinho. Então, para esse carrinho eu vou ter informação, Colocar um para ele carrinho. Eu vou colocar coloco os itens. Vamos colocar os itens do carrinho, né? colocar os itens do carrinho. A gente vai colocar aqui, ó, a gente já viu como é que é esse padrão, né? A gente vai ter um V4, vai percorrer os itens para exibir os itens do cadrão. Então, item em Part twist. Então,

dentro da lista vou pegar o item do car dentro dessa lista. Como ele é um produto, né? Ele vai conseguir identificar que é um produto. A gente pode pegar aqui, ó, desse item o título dele, ó. Certo? Tá oferecer isso. Vai dizer, ó, o tipo do item é o tipo do produto. Dentro desse item ele vai ter título. E eu posso ao final colocar aqui o total. Vamos dizer aqui que o total vai ser eh texto e vai ter o total de parte ponto total. Beleza? Como é que a gente vai fazer para adicionar esse

produto ao carrinho? Como é que a gente vai fazer isso? A gente tem que rastrear esse clique no botão, não é isso? Dá um jeito de rastrear essa informação ao clicar aqui, acionar um método e adicionar esse item ao meu Cartinho. Para que eu faça isso, para que eu possa rastrear as deformações, as ações dentro do meu componente aqui, card, eu posso utilizar o emite, certo? O emite é basicamente o quê? Ele vai emitir informações pro pai, de pai ou de filho para pai. Então eu posso cadastrar aqui o emit vai se chamar disse >>

é >> onck. Vou dar um select no uso de onick melhor. Click. Quando eu coloco esse aqui, eu digo: "O quê? Tá disponível uma emissão de formação de filho para pai. Então eu posso rastrear uma ação aqui dentro do meu componente e passar essa informação de fap. Então eu posso dizer que quando eu tiver um botão aqui de adicionar, ou seja, eu vou colocar aqui, né, ó, @clip, que representa o evento do clipe Em cima desse componente. Vou chamar o método. Adicionar aí e vou criar esse método. >> Vou aqui, ó, colocar as opções, ó.

Quero dentro das opções de médico. Quem que ele tenha ação de adicionar? O que é que ele vai receber desse dentro desse item? Ele vai receber o produto que eu estou adicionando. Producto product, Ou seja, a minha informação vai ter que vir com título, descrição, preço, certo? E dentro das opções que eu quero, né? Eu quero um emite, >> que que ele tem, >> vai chamar um print e ele vai passar a seguinte informação. >> Ele vai passar dentro desse um produto, ou seja, quando ele passar essa informação e receber, o receb informação receber o

produto que eu adicionei. Beleza? Para eu pegar essa informação de Filho para pai, ó, ele tá reclamando porque eu não passei o produto, né? Aí tá reclamando que pode ser que venha vazio, ó. Coloca aqui, ó, interrogação para dizer que ele vai ser obrigatório. Ver. Não apagou. >> Ah, ele tá reclamando porque aqui é objeto. Eu tenho que dizer que esse objeto, >> apagou, >> o tipo dele, a prop dele, o próprio propot type é do tipo product, certo? Pegou o protpe, não tá reclamando. Deixa eu ver. Do F. Eu vou dizer que agora ele

é obrigatório. Eu tenho que dizer qual o tipo dele para ele identificar. Olha, esse objeto tá sendo passado é produto. Esse produto ele vai vir sempre. Então tá obrigatório aqui, né? Ó, coloquei essa exclamação. Pode dizer, ó, tô te Garantindo que esse produto vai ser passado. >> Ela disse que ele tá ficando preto. >> Pronto. >> Ele disz que ele tá cheio de poeira e tinha que apagar. O meu evento deit de poeira, né? Como é que eu vou pegar essa informação de fá? Produto, tá? Produto card tá dentro do app, né? Então eu vou

pegar aqui, ó, vou colocar o evento @, como é que é o nome do evento que eu coloquei lá, ó? Evento De chamado click. Pode ser tanto assim separado por como como escriu appicem só que agora em vez de receber só isso aqui ele vai rece >> não é isso de produto. E vou a repetir a relação que a gente fez na aula passada. Como é que a gente vai adicionar esse produto? Que que a gente tem que fazer? A gente vai ter que verificar assim nesse cards, né? Ó, essa lista de produtos já não

existe esse produto. Como é que eu faço isso? Tem um método mais simples que é o som. Vai verificar se o produto já está presente, certo? Então aqui dentro da lista de itens que tem aqui, a gente vai ver Se o item ele tem o mesmo nome, né? A gente vai considerar aqui o mesmo produto. >> Acho que isso é nem >> acho mais >> tá para lavar tomar banho para jantar que isso aqui >> não con >> título sendo verdade ele retorna o quê? Olha, existe um produto com esse nome, então isso é verdade.

Colocar aqui essa informação mais ó, exis, certo? Então, se existir um item que eu quero, o que é que eu faço? Se existir esse item, não me chamou que foi, né? Vou arrer esse carrinho. Vou passar de item por item. >> Hum. Será que acabou já? >> Como é que é a V baixa? >> Eu não tenho foi chamada hoje. >> Sim. >> Esse item se esse item, né? mesmo. Ah, não. Tít. Se esse item tiver o mesmo título, seja ele for o mesmo produto, eu retorno esse item, ou seja, eu vou modificá-lo colocando todas

as informações desse item. Estão alterando o quê? >> O tal dele, né? Colocou a quantidade de produtos para cada item. Colocou, né? Ó, vamos ver aqui na moda. Colocou, né? Ó. total, né? Aqui pera aí. Então, a gente vai retornar o item e vai adicionar Ao total. Então vai ficar total, viu? Tudo na verdade a gente deveria ter colocado aqui, né? Ó, o total de cada item, né? Esse aqui deveria ser o quê? um rei. Esse perfil aqui, ó, que ele tem produto. Não tem um interface aqui. Interface. Passou batido, né? Interface tem que ter

o quê? O cart item ele tem que ter o quê? Tem que ter o meu produto. É do tipo product e tem que ter a quantidade, né, pessoal? A gente tem que ter esse cart item aqui, ó. Vai ter que ser o cart item. uma regi para que eu possa poder para que eu possa poder contabilizar o total de Itens que tem no carrinho, né? Então aqui, ó, vai ter um producte, tá? Se for igual, ó. E aqui eu faço a mesma coisa. Productire, eu olho se daquele produto lá. é o mesmo item, né? Ó,

feito isso, se ele tiver, aí eu ten que modificar o item. Vai o item, como ele já era, né? product. Quando eu coloco esses três, trê esses três pontinhos em seguida, tô dizendo que passo todas as informações do objeto que já existem que eu colocar depois da eu vou modificar. Então, modifique só o quê? O total. Então esse total ou de quantidade vai ser o quê? Vai ser o item ponto ped mais um. Assim ele vai poder adicionar esse produto e vai dizer: "Ó, a quantidade desse produto foi para dois, Foi para três." E além

de dizer a quantidade do produto, tem que dizer o total de itens do carrinho, né? Além de eu modificar isso daqui, o item, né? Aqui eu tenho que retornar o quê? Eu tenho que retornar o total. Vamos lá retornar o item total. Fazer completo, né? Mais fácil retornar o item. Ele tem productornado item pon. vai ser retornado total. >> Total vai ser o item total mais um. Opa, foi mal. Beleza. né? Pronto. Quando eu modificar isso daqui, ele vai e adiciona esse item aqui. Além de ele fazer isso, eu tenho que fazer o que mais?

Se eu verificar que existe, se eu verificar que existe, eu também Ten que adicionar o total, né? Ó, parte total adicionar. Aí se ele não existe, se eu verificar que não existe, o que que eu tenho que fazer? Eu vou lá e dou o p, né? Ó, lá dou o push no que eu fiz. Colocar aqui e aqui para separar. Vou pegar descart, Vou dar o posto do produto, adicionar ele essa lista. passando esse produto e a quantidade não. Pronto. Então passo pra lista de produtos do produto e digo que ele vai começar com e

também eu pego esse c o total vai ser a crescido de beleza? Então eu fiz aquela mesma lógica que a Gente fez de adicionar o carrinho. A gente verifica se esse item existe. Se ele existir, ele vai percorrer os itens que tem lá o produto, verificar dentro desse produto. Ele vai trocar só o que é necessário e vai aumentar a quantidade também. Tem que aumentar o total, né? Beleza? Vamos ver que se aconteceu isso. Vamos verificar aqui. Então, eu tenho aqui, ó, meu carrinho e tá com zero itens. E eu vou adicionar esse item guitarra

ao meu carrinho. Se eu clicar aqui, o que que vai acontecer? Ele vai o evento. Esse evento vai vir do produto aqui e vai vir pro meu componente. F. Eu vou colocar aqui, ó, tem um deb tools. Deixa eu ver se tem um deb aqui. Deixa abrir o deb. Tá, ó, deve ver tudos ferramentas aqui permitem que eu possa ver alguns componentes já disponíveis. Tá aqui, ó. Então, posso ver aqui, ó, quais são os componentes que formam o meu Meu framework. Então, tá aqui, ó, tem o root componente p dentro dele tem os componentes cards,

ó. Então esse componente CAD ele vai emitir informação, que é o produto que eu cliquei pro pai. E no pai tem um carrinho. Eu posso adicionar essa informação carrinho. Beleza? Então vamos aqui, ó, clique em adicionar, adicionar o total do carrinho. Cliquei de novo, adicionou o total Carrinho. Eu quero exibir o produto que tá aqui disponível no carrinho. O que que eu faço? Posso vir aqui, ó. Só a informação do meu carro aqui, ó. Agora com muito cuidado porque vai aparecer o botão de adicionar, né? Mas vamos fazer o seguinte, ver se assim, né, que

eu perigo de cima da cadeia. >> Vou vir aqui o meu carrinho, ó. Eh, que que vai ser adicionado nele. Então, vai ter o o tem o carrinho com o título dele E vai ter também a quantidade de itens que foram adicionados. Deixa eu ver que tá com product. Pronto. E aqui eu vou colocar a quantidade de itens que tem dele. Vai ter o item ponto. Vamos ver aqui agora. Pronto. Vamos reiniciar aqui. Tá zerado, né? Vou adicionar o item. Adicionei. Qual foi o item que eu adicionei? Guitarra. Vi com item de guitarra. O total

ficou um. Adicionei outro. Guitarra dois. O item de guitarra ficou um. Vamos ver o que aconteceu ainda. Vamos adicionar o que tava dois. O negóis. Eu esse aqui tava dois e tá com um. Adicionei aqui, quatro. Vamos ver o que que aconteceu aqui para não ser exibido desse item. Para que eu adicione essa quantidade, eu tenho que ver o que que aconteceu. Então, a quantidade estava aqui, eu coloquei errada quantas. Pronto, vamosar novamente. Iniciar. Gerei os espados aqui. Adicionei item. Adiciona em outro. Me adiciona em outro. Ó, vamos lá de novo. Faz parte. Vamos aqui

produto. Ver o mesmo nome, ele vai lá, coloca produto, coloco quantidade, retorna esse Item. Se não, ah, se não tiver eu tenho que retornar esse aqui também. Posso esquecer de retornar porque senão não é retorna. fazendo m, né? Acionei, vamos lá com carro carro. Percorre e carrinhos. Passei pro item. O item é produto. Beleza? Esse item, o produto, ele tem o Mesmo tipo de produto que eu estou passando. Se sim, retorna o meu item. Esse item vai ter que ser produto. Tem o nome do produto, beleza? Tem tudo que tem produto. A quantidade que vai

ser a quantidade desse item mais um. Ele não tá somando. O que que aconteceu? Vamos aqui inspecionar, né? Vamos lá, galera. A última parte de fechar. Adicionei o item. Adicionei o item. Não tá chamando o mapa A2 de novo, ó. C un product occup ou igual ao product, ou seja, se o mesmo item. Eu vou fazer o quê? Eu tenho que retornar meu item. Só que esse item ele vai ter que se multiplicar, ele vai ter que ter a quantidade dele acrescida de um, certo? >> Se ele não for, retorno sem modificado. >> Vamos ver

aqui agora. Acionei o item, adicionei outro. >> Acionei um item, adicionei outro. Beleza, show. Depois vocês vem na gravação aí qual foi O passo que eu deixei de lado. Cadê a tela de SOS? Pronto. Beleza. Basicamente revisando, ó, o que que eu fiz? Verifiquei se o item está presente dentro do carrinho, tando presente, substituir dentro daquele carrinho que tem o mesmo item, aumentando só a informação de quantidade. Se eu não modificar ele, do jeito que está aí vou lá no total. Beleza? Show. Show de bola. Então, ó, que que a gente viu hoje, ó? Que

que a gente viu hoje? A gente viu props e emits, a gente viu as diretivas, viu o container presentational, que é aquele padrão lá que eu mostrei para vocês do view, viu as options e o setup. setup é só uma outra forma de escrever tudo que a gente que escreveu. A gente viu a o view com options, colocando listantes as opções disponíveis de Renderização, certo? Então, quando vocês forem revisar assistir aula novamente, então ler o conteúdo, lembre-se que a gente trabalhou essas informações consistentes fixes dessas informações, beleza? Dentro que a gente trabalhou hoje, tem alguma

dúvida? Ficou alguma dúvida? Lá falando >> vai ter a atividade da aula de hoje para fixação. Sim. A atividade de vocês de hoje é basicamente montar tudo que a gente montou durante a aula. Certo? Eu tinha esse padrão de Calma, João. >> Repetindo nesse padrão. Divisão da módelo, basicamente ano, né? que a gente viu na aula passada de módul, vocês vãoizar o módulo, vão componentizar com lá no >> vai ter que amanhã. Pessoal, desculpa, caiu a bateria do notebook, acabou descarregando. Muita informação, né? Então pessoal, continuando, basicamente o que que vai ficar para casa para

vocês fazerem em casa? Vocês vão fazer tudo que foi feito em aula, certo? vão modelar tudo que foi feito. Vai ser um incremento basicamente que já foi feito anteriormente. Modelar tudo que foi feito em casa, criar as módels do produto, criar a Model do cart, vão criar os componentes lá do produto, vão listá-los e vão adicionar o carrinho. Certo? Beleza. Sal >> show de bola. Aí, mais uma vez, vai ser uma semana para que vocês façam isso. Vocês vão ter tempo de revisar o conteúdo. Se vocês quiserem ir lá assistir um pouquinho da aula parou

e reescreve, pode, não tem problema nenhum. Eu quero que vocês peguem esse fluxo de saber Dividir as options dentro do componente, saber o que é que é uma prop, saber o que é que é um ID, saber como tratar os status, montá-los e treinar essa sequência. Cria mód, cria componente, passa informação para dentro dele, cria o evento de emite, passa esse evento deite transformando essa eh transportando essa informação de filho para pai. Aí você vai lá e segue esse fluxo. Por quê? Porque esse é o fluxo que vocês vão trabalhar direto No e-commerce. vocês vão

ter todo momento esse tipo de de flux de passar informação para um carro, passar informação pro produto, passar informação eh para um carrinho, passar informação pro navegador, eh pra barra de navegação, tudo isso vocês vão ficar repetindo. Então o ideam para já ficar gravado na memória de vocês, beleza? Com relação ao código dessa aula, ele vai ficar disponível, vai? Só que eu só vou disponibilizar Para vocês a partir de segunda-feira, beleza? Eu vou subirse no repositório. O Git vai ficar eh versionado, vai ter essa primeira versão da gente, a gente trabalhou em sala. E eu

só vou disponibilizar esse segundo para que vocês possam forçar-se assistir essa aula, acompanhar e escrever o pó de vocês. Se vocês quiserem eh colocar isso também no Git para ver a versão de vocês, não tem problema, pode fazer, certo? Eu só Não quero que vocês meio que copem e colem, eu quero que vocês tentem fazer passo a passo, beleza? Show. Com relação ao conteúdo de hoje, foi muito mais informação ou foi tranquilo que para acompanhar e para entender de forma geral? Eu sei que é muito conteúdo e meio que fica difícil de vocês repetirem porque

é bastante coisa, mas eu sei que se vocês reverem a aula fixa um pouquinho melhor Do que assistir uma única vez, certo? Aquela velha conversa, aula hoje, revisão hoje, então amanhã mesmo, mas nunca deixe passar mais do que dois dias. Assistir o conteúdo, não deixa passar dois dias, revisou logo para não cair no esquecimento. Beleza? Show de bola. Pessoal, mais alguma dúvida? Bem que vocês estão conseguindo. >> É só uma coisa, eh, só para finalizar Pelo menos a minha parte, eu vou parar a gravação e vou ver se o áudio saiu e se não der

certo eu mando um recado lá no no Class avisando que não deu certo a gravação. Então a gente sobe só a gravação sem um áudio e vocês vem só o o código. Não sei, eu vou ver, vou ver o que foi que aconteceu com a gravação de hoje e a gente dá um parecer daqui pr amanhã lá no clássico. Vai ter que dublar. É, >> meu que deixou certo assim, mas vai dar. Guilherme, quer falar alguma coisa, Guilherme? >> Não, tudo bem, tudo ótimo. Eu só percebi que é um momento meu meu áudio abriu, né?

Meu microfone ficou aberto, mas a ele me disse que não atrapalhou em nada. Tava caladinho também. Pessoal, qualquer dúvida, qualquer pergunta, você pode mandar lá no clum de alguma forma, pode perguntar o Narela e o Guilherme também. Eles estão Disponíos para tirar dúvida. Qualquer coisa, eu já passei meu número aqui para vocês mandarem mensagem, se vocês não conseguirem achar de jeito nenhuma a informação que vocês querem, certo? Então, mais uma vez, não deixe de perguntar, viu? A gente tá sempre disponível aqui para isso. >> Opa, o Linderlin acabou de fazer uma pergunta. >> Opa, vê

lá qual a pergunta. >> Eh, sobre a quantidade de itens, Gostaria de perguntar por quando reescreveu como igual mais um e antes estava só mais um. >> Ah, então o Dani, eu acho que esse aí que foi o problema, viu? naquele momento que a gente tava tentando renderizar, quando eu coloquei o mais um, é para eu pegar o estado anterior, ou seja, se eu tiver dois itens no carrinho, vou pegar o dois e vou tomar mais um, vai se tomar três. Então, provavelmente ser a fonte daquele que a gente estava tendo durante A aula, certo?

Se eu coloquei só um, ele vai sempre repetir um. Então, quando adicionava o item ao carrinho, ele sempre vinha com um. Então, como eu ia transformar o item, ele sempre ficava um. Então, provavelmente é a fonte do erro, né? Assiste novamente a aula, se tiver disponível e revelmente acontece isso. Façam a troca entre um e mais um para ver o que é que acontece. Beleza? Show. Show de bola. Às vezes passa, né? Acontece. Show. Pessoal, já que não tem mais nenhuma dúvida, pessoal, muito boa noite, bom final de noite para vocês, bom final de semana

para vocês, bom estudo e até terça-feira, beleza? Fal galerinha, até mais.