Trilha FULLSTACK | Aula #2 – Typescript e E-commerce

Vocês conseguem me ouvir? Dá um joinha aí. Beleza, pessoal. Desculpa aí a demora, viu? E o probleminha técnico aqui, eu não consegui eh carregar o link, eu tive que recorrer ao notad. Beleza, vamos lá começar. Caso auxiliar. Beleza, vocês conseguem visualizar a tela? Show, pessoal. Ah, o tema de hoje, como havia prometido ontem, né? Eh, vai ser TypeScript. A gente vai trabalhar um pouco do TypeScript, essa linguagem que vai servir de ferramenta para comunicar o front back, beleza? Eh, antes de mais nada, só mais nada, eu gostaria de relembrar o que que a gente tava

comentando ontem, né? Ontem a gente falou que a gente iria desenvolver uma aplicação. Quem é que lembra que qual o tipo de aplicação que vai ser desenvolvida? Qual o que a gente trabalhou na aula passada? a gente vai trabalhar um e-commerce, né? Então, esse e-commerce, antes de mais nada, é importante a gente definir algumas informações, certo? Para vocês o que que seria um e-commerce, né? Como é que você consegue identificar um e-commerce, um PDV? Eh, diferenciar um CF da vida, eh diferenciar um google.com de um Mercado Livbrevre, de um americano. Qual a diferença principal entre

eles? Bom, basicamente a diferença entre eles é que o e-commerce ele é um portal de vendas, né? É como se fosse o mercado aberto para que todo mundo possa comprar, né? Eh, e fica aquela questão, pessoal, eh, qual a necessidade de eu ter uma loja online, né? Alô, entendi. Qual a necessidade da de a gente ter um compa essa necessidade antes de colocar uma uma loja online na net, né? Que tipo de problema eles vem resolver? Acessibilidade, areia disse acessibilidade. Que que tem mais? Que que a gente pode ter? Quando a gente coloca um e-commerce

na nuvem, a gente tem disponibilidade, praticidade, eu posso comprar qualquer hora, né? Qualquer momento, conectar vendedores com clientes. Que mais? competitividade, eu consigo expandir meus negócios, né, como o Iago falou. Então, aquele negócio pequeno que eu tinha ali restritar o bairro, que só poderia ter os clientes daquele bairro, eh, daquela região, eu aumento acesso a ele, né? Eu aumento a disponibilidade, eu disponibilidade tanto local como em tempo, né? Então, a necessidade de ter um e-commerce nada mais é a necessidade de eu ter o meu negócio em uma aplicação, certo? Então guardem isso, o negócio e

a aplicação. Vocês como programadores, vocês vão ter que sempre pensar nessa questão. Vocês vão ter que refletir os negócios, a minha aplicação, eh, todo o meu comércio, todo o meu modelo de negócio a essa aplicação. No caso de vocês, vai ser uma aplicação web, certo? Como é que acontece essa comunicação entre cliente e o vendedor? Que que seria que nesse papel aqui um cliente, um servidor? Nada mais é você cliente consumidor, né? Você vai acessar um celular, vai acessar um notebook, vai acessar lá um computador, algum dispositivo que tem acesso à internet para que você

possa visualizar eh todo aquele painel do vendedor, né? Ali, em vez de você ter um encarte em papel, você teria um cart digital, onde você vê todas as informações relacionadas ao produto. Esse cliente ele vai poder acessar essas informações através da nuvem, o computador, o dispositivo celular, notebook, ele vai acessar a internet, vai acessar um servidor que guarda as informações relacionadas ao o comércio, né, e vai poder, de certa forma, eh, ter acesso a recursos, eh listar produtos, listar categorias, filtrar, criar um carrinho. ele vai poder criar uma série de de ações junto a essa

aplicação, certo? Então, basicamente, quando eu falo de cliente servidor, imagina o seguinte, essa parte onde o cliente tem contato direto com a minha aplicação, eu chamo de frontend. Essa parte onde eu vou gerenciar o acesso às informações do negócio, eu vou chamar de back end, compreendendo o backend como API e o banco de dados, certo? API vai servir de quê? API vai servir como um portal que regula o acesso ao meu banco de dados, certo? Ele vai ter todas as regras de negócio, eu vou ter toda a administração das rotas, eu vou poder dizer o

que que o cliente pode fazer, como que ele pode fazer e onde é que ele vai fazer e como ele vai acessar esse bidado, certo? Ele cria uma camada ali de de comunicação, beleza? Então, para que aconteça essa comunicação, antes de mais nada, é importante que a gente estabeleça alguns parâmetros, certo? Vocês conseguem dizer que tipo de parâmetros a gente pode utilizar para essa comunicação entre front, back? Vocês tm ideia? Alguém já falar? Geralmente quando a gente se comunica entre front, back, a gente utiliza o Jzon. O Jzon é um parâmetro que vai ter eh

atributos com chaves e valores, certo? E a comunicação que acontece entre o frontback vai acontecer através do JavaScript, certo? O JavaScript ele vai criar objetos, pode ser XML, pode ser XML também. Se como Iago falou até 2005, 2006 era muito comum ter essa comunicação XML, mas a partir do Jzon, a partir desse padrão se tornou mais comum a comunicação Jon, essa comunicação de front, certo? Então a comunicação padrão ali do navegador vocês vão utilizar JavaScript, certo? A linguagem que eu vou utilizar para desenvolver front end JavaScript. Aí você pode estar se perguntando, ué, todo o

tempo você tava falando que a gente utilizar o TypeScript, então por que que a gente vai fazer tudo em JavaScript? Por que que a gente vai utilizar TypeScript no no nosso negócio? Se tudo na frente, tudo no fronto em JavaScript, por que que eu vou ter que utilizar TypeScript? Por que que eu vou ter que tipar as coisas? Bom, que que acontece? O JavaScript, ele é um tipo de linguagem de tipagem dinâmica, certo? Tipagem dinâmica. Que que seria a tipagem dinâmica? Basicamente você pode em tempo de execução, ou seja, enquanto você tá navegando aqui a

tela, clicando em uma parte da tela, interagindo com o botão, eh, escrevendo alguma coisa em input, em uma caixa de mensagens, você pode estar alterando esses atributos, certo? Essas informações da tela. O que que acontece ao fazer esse tipo de de tipagem dinâmica, a linguagem meio que permite alguns padrões inapropriados, certo? Então, imagine que você tá lá no e-commerce, no e-commerce você vai utilizar um produto e ele tem um certo preço. E eu digo que esse tipo de preço é um tipo number. Como assim? Eu vou representar a o preço como número, certo? E pode

ser que o programador em algum momento da aplicação ele tenha trocado o número por uma string ou uma palavra, um texto, certo? Esse tipo de troca dinâmica de tipo, ele vai causar um erro, certo? Depois vocês vão ver direitinho como é que acontece esses esses erros, né? A gente vai mostrar e isso vai meio que gerar aqueles comportamentos estranhos. Eu não sei se vocês já entraram num site e em um certo momento tinha algo assim n a n not a number ou então você ia ver um um preço de um produto tinha um valor exorbitante,

é como se tivesse juntado dois números, certo? Geralmente isso acontece quando você tá utilizando o JavaScript e não tem controle sobre a tipagem, certo? Então, as vantagens do Type Scriptam essas, que você vai ter uma tipagem estática e todos os erros eles acontecem ali no ambiente de desenvolvimento e você vai ter um uma ferramenta que vai lhe indicar esses erros. Ou seja, antes de você compilar de gerar o código em JavaScript, você vai ter a apresentação desse você vai poder corrigir. Então, TypeScript nada mais é do que um suet de JavaScript. Como assim super JavaScript?

Ele tem tudo que o JavaScript tem. Ele tem todos os métodos, tem os tipos primitivos, tem todas as informações. Só que ele adere, ele adiciona, melhor dizendo, ele adiciona essa tipagem estática. Você vai poder dizer eh diferenciar o número de um string, de um boleano e assim vai, certo? Isso vai ajudar bastante no desenvolvimento web e isso vai criar um método que aumenta a agilidade nas entregas. OK? Então, vamos colocar a mão na massa, né? Eh, eu não sei se foi pedido a vocês, mas o ideal é que para essa aula vocês já tenham instalados

aí na máquina de vocês o Node e o V Code. Vocês conseguiram instalar? Todo mundo OK? Sim, sim. Show de bola. Madon, Manuel, todo mundo OK. Teve algum caso que não conseguiu instalar o Node OS code? Não, né? Show de bola. Então, tá tranquilo. Vamos lá. Vou abrir aqui o meu V Code, OK? E aqui eu já comecei a esboçar um pouquinho do do da aula de vocês. Que que vocês vão fazer agora nesse momento? Vocês vão na pasta de vocês em documentos, vão criar uma pasta PU, vão criar uma nova pasta, certo? Vamos colocar

o nome dessa pasta do TypeScript, OK? e vão abrir, abram essa pasta aí no Vcode PypeScript. Beleza? Antes de iniciar, eh, eu quero que vocês criem um arquivo index.js. OK? Vocês vão aqui, ó, em new file, então novo arquivo, clicam e adicionam index.js. Que que seria esse index.js? Seria o meu script JavaScript. A partir daqui, eu já posso executar algumas coisas, beleza? Pro JavaScript, o ideal é que eu utilize o Nodes, OK? Eu vou utilizar o Node para que ele crie todo o ambiente para que eu possa gerenciar os arquivos de JavaScript. Para isso, eu

vou vir aqui no terminal, OK? Vou dar o comando npm init traço Y. OK. Que que esse comando faz? Ele vai iniciar meu arquivo com o pack de Jon. Se de par já fal npn init - y. Ele vai iniciar meu pack de Jason. E esse - y é para dar OK confirmação que eu quero esse padrão que ele vai seguir, que ele já gera no início. Beleza? Pronto. Ao gerar esse padrão, ele cria aqui, ó, o meu pack Jon com as seguintes informações: o nome do meu projeto, a versão, o arquivo principal, os scripts

que eu posso rodar nesse projeto, as palavraschaves, autores, a licença e a descrição. OK? Depois eu posso até alterar. Beleza? Qual é o intuito aqui de gerar esse arquivo? A gente vai começar a mostrar a diferença entre TypeScript e JavaScript. Bom, imaginando o seguinte, eu tô aqui no meu e-commerce, deixa eu abrir aqui o e-commerce. Tô aqui no meu e-commerce. Pegar aqui mercado livre. Eu preciso modelar modelar o meu componente, certo? Como assim modelar o meu componente? Eu preciso eh dizer quais informações serão exibidas em tela. OK? Aqui, olhando para essa tela aqui do Mercado

Livre, o que que vocês enxergam nos produtos? Quais são os principais atributos que tem comum nos produtos? Quais são as principais informações que tem em comum nos produtos, hein? Que consigo enxergar aqui? Eu consigo enxergar a guitarra elétrica. O que que seria esse guitarra elétrico? Ponho ele. Que que seria esse pedal de sustio? Seria o título, né? Esse título aqui, ele representa o quê? Representa um número, representa um texto, representa algum valor boleano verdadeiro ou falso, representa o string, né? Então eu posso muito bem aqui no meu código e descrever. Vou criar aqui um produto

que vai ser guitarra, certo? esse produto guitarra, eu posso colocar os os atributos desse objeto, né? Eu posso dizer: "Ah, o meu título paraa guitarra vai ser tá gente certo? Além do título, eu posso colocar, posso colocar o preço. Deixa eu desativar aqui o pilot para não atrapalhar. Eu posso colocar o preço. Esse preço seria o quê? Seria um texto? Seria um número? Seria um número, né? Então vou colocar aqui 20. 80, que é a anotação americana, né? Seria um number. Ah, eu posso colocar uma descrição. Colocar aqui na descrição. Ah, guitarra modelo extrato caster

caster com 24. crafts, certo? Poderia colocar outras informações. Ah, eu quero colocar desconto. O que que seria o desconto? Seria um number? Seria um string? Ah, o desconto eu vou dizer aqui que é um valor de 0.2, que representaria os 20% que eu poderia utilizar nos cálculos. Eh, eu posso também colocar um boleano. Como assim um boleano? Eu posso dizer se aquele produto vai ser exibido ou não. Digamos que ele acabou o estoque desse produto. Eu não posso exibir esse produto porque senão o cliente pode ir lá comprar. Posso colocar que ele está ativo ou

não. Certo? A partir daqui eu faço verificações para ver se ele tá ativível ou não. Beleza? Pronto. O JavaScript a minha situação aqui, ele resolve. eu consigo modelar os meus produtos que eu vou exibir em tela, né? E a partir dessas informações colocar todo esse código aqui do meu produto, formar tudo que é necessário, não é isso? Beleza? Imaginemos a seguinte situação. Digamos que em um certo momento o meu colega, ele foi lá e tava manipulando o produto guitarra, certo? E ele foi atribuir o novo valor pro preço da guitarra, certo? E ele não colocou

o tipo dela em número, ele colocou uma string. Ele colocou aqui R$ 400. Beleza? Para ele que vai exibir em tela, resolver o problema, né? Ele conseguiu alterar a informação, tal e vai exibir. Ele conseguiu fazer isso por qu, pessoal? Porque a tipagem do JavaScript ela é dinâmica. A qualquer meu momento eu posso mudar o tipo dos meus atributos. Então produto que ele tinha o price em number, ele alterou para uma stream. Beleza? Resolveu. Só que aqui ele pode gerar um erro futuro. Imagine que lá no meu produto lá eu vou precisar desse preço para

fazer o cálculo do meu carrinho, né? Digamos que parte tris ou do carrinho, ele vai ser o quê? A soma de um produto, preço de um produto, mas a soma do preço do produto do eu vou criar aqui agora, certo? Vou copiar aqui e vai ser dois. OK. antes dele atribuir esse novo valor, se eu rodar meu código aqui, ele vai ter o o valor do carrinho, né? O que que aconteceu aqui? Eu dei o comando, verdade é NPN, deu o comando npm start. Ele reclamou missing script, está faltando esse script aqui. Start. O que

que eu devo fazer para iniciar meu JavaScript? Eu tenho que ter esse comando dentro do meu pack de Jzone. Então vou colocar aqui um comando, vai ser start. E basicamente o dev dele é de iniciar o meu script. Beleza? Aqui. Vamos aqui. NPM start. Em PM start, ele vai ativar esse comando aqui, script, que vai ser o equivalente aqui no terminal escrever node e espaço index j. Beleza, pronto, rodei, tá funcionando. Eu vou dar aqui um console do preço do carrinho. Pessoal, se o a guitarra um ela custa 20,80 e a guitarra 2 custa 20,80,

a soma do preço tras vai dar quanto? para teoricamente 41,60, né? Então vou rodar aqui o comando em PM start. Eu tenho o resultado aqui, ó, 41.60 valor do carrinho. Agora vamos para aquela situação que eu falei anteriormente. Meu colega, ele veio aqui e alterou o preço do da guitarra um. Ele colocou que o preço dela seria, em vez de ser 20.80, seria R$ 400. Beleza? O que que vai acontecer agora? Eu consigo somar um number com a string, nãoicamente, né? Vou fazer uma concatenação. Eu vou concatenar o valor do preço da guitarra um com

o valor do preço da guitarra dois. Só que aqui como é string, ele vai concatenar. Então, qual vai ser o resultado? Eu vou ter a junção da string mais o valor da guitarra. Então é como se esse valor aqui ele se tornasse uma string também. Então para que eu possa exibir ali no JavaScript, ele utiliza desse artifício, certo, de com a penalização. Como é que eu resolvo esse tipo de problema no desenvolvimento? Eu vou ter que utilizar TypeScript. Como assim? Quando eu colocar, eu vou habilitar uma checagem de de tipo. Então, toda vida que eu

digitar o preço da guitarra, a minha ferramenta vai dizer, vai me retornar que aquele preço ele deve ser escrito em number e não stream, certo? Então, para que eu possa instalar o Typecript, eu vou ter que dar o seguinte comando. Vou dar npm install, certo? E por convenção, a comunidade estabeleceu que todo tipo relacionado a uma biblioteca, você vai colocar @types barra a biblioteca que você quer utilizar, aqueles tipos, aquela página que foi criada. Então, como a gente tá utilizando aqui um 22, a gente vai colocar @types/n, OK? Com isso, eu registro aqui no meu

pack Jzon as dependências que vão ser necessárias para eu rodar o meu script, certo? Que que são as dependências? Seriam todas as bibliotecas que eu utilizo, que eu utilizo, métodos, utilizo atributos, formações para poder rodar meu é o meu script. Então, no caso aqui eu vou utilizar os types node e typescript, OK? E além disso, eu gerei também um package Jon, um lock Jon, que ele diz quais são as versões das minhas bibliotecas que eu tô utilizando para que elas funcionem corretamente, que elas se comuniquem corretamente. OK? Beleza? Pronto. Com isso, eu vou gerar agora

um Jzone de configuração do meu TypeScript, OK? Então, para que isso aconteça, eu vou colocar TST init. OK. Opa, deixa eu instalar aqui. NPM install TSC. Pronto, instalei a biblioteca. Agora eu posso dar um npm instal. Pronto. Cadê a geração? Opa, PSC. Calma aí, galera. Só um minutinho. Vamos aqui. Pa pa pa pá. TSC traço tracit traço traço in um minutinho. Ah, verdade. NPX. Tenho que utilizar no Ó, fiz outro projeto agora. Só um minutinho, viu, galera? Eu consultar aqui a documentação. อ por algum motivo. Por algum motivo ele não tá gerando. Deixa eu ver

aqui. Vou fazer o seguinte, vou pegar um projeto aqui que eu iniciei hoje à tarde, a gente já pula essa etapa. Eu não quero ter que correr atrás que aconteceu. Certo. Pronto. Pronto. Pegar esse projeto que eu iniciei mais cedo. Vou só apagar aqui essas coisas. a gente vai falar depois eu investigo o que aconteceu de fato, certo? Então, digamos que eu coloquei os comandos, certo? E gerei meu teste config. Que que vai trazer esse meu teste config? Configuração de Jon, ela vai ter as opções de compilação, certo? Eu coloquei até aqui no slide eh

os pontos que são pertinentes a essa configuração. Deixa eu mostrar aqui slide. Então, nessa configuração do slide, trago informações do que é o root gear, o out, o target, o module, o s, module, interrupt e strict, certo? Basicamente, ele vai indicar onde é que vai ficar sua aplicação, onde é que ele vai poder rodar, OK? Então, geralmente a gente aponta pro source, cria uma pasta source, onde a gente indica onde vai ficar os nossos arquivos, OK? Out, ele vai ser responsável por eh compilar meu type script e gerar o Java Script equivalente, certo? No targets

que a gente apontou, como assim? No alf que a gente apontou tem existem diversas versões do JavaScript. Existem desde o comum ES até o S module, que é um novo padrão. Hoje a gente trabalha com S Next, que é o mais novo em relacionado a JavaScript, OK? Quando a gente gera o build desse projeto, ele gera os arquivos dentro dessa pastaqui, ponto disto. Então eu posso até aqui mesmo dentro do back Jon gerar um script em que ele roda esse script e gera a minha pasta disa rodar aqui. Então vou dar um npm. Pronto. Depois

que eu gerei que tá acontecendo aqui, tenho que ter o meu Typecript, ó. Type script. aqui. Beleza. Só vou aqui. Vou apontar agora e vou gerar, ó, npm run. Com esse comando, eu aciono aqui o NP XTSC. E esse comando aqui, ele gera eh o meu script, JavaScript a partir do TypeScript. Então vocês podem ver, ó, que é algo muito parecido com o que eu gerei aqui no TypeScript. Só que aqui ele fez uma tipagem dinâmica. Ele dinâmica não, ele inferiu a tipagem desse produto. Como assim inferiu? Se vocês passarem o mouse em cima, vocês

vão ver, ó, que ele colocou nos atributos o tipos de cada atributo, certo? Beleza? Então, a partir desse comando aqui, eu gero meu projeto final, que eu vou poder subir a minha máquina e eh colocar no meu servidor para que eu possa utilizar lá no no front end, beleza? Ou então no no backend, se for casos, certo? Agora o que a gente vai fazer? A gente vai ver como é que funciona o type na prevenção de erros. Lembra que a gente eh conseguiu alterar o valor do preço de number ou do tipo de preço de

number para string? Que que acontece quando eu tento fazer a mesma coisa em Typescript? Se eu colocar aqui product price, que que ele vai me indicar? Ele vai indicar que isso aqui vai ser do tipo number. E se eu tentar atribuir ao number uma string, ele vai acusar o er. Beleza? Eu não vou conseguir fazer nada além disso, OK? Além de ele inferir essa tipagem, eu posso também eh dizer para ele como é que eu quero que meus objetos sejam construídos. Certo? Eu posso passar interfaces e tipos para eles. Que que seria essa interface? A

interface seria um contrato, certo? Em que ele diz que cada campo do objeto deve ter. Então eu vou criar aqui uma interface product que ela diz: "Olha, o name ele vai ter que ser uma string. O price ele vai ter que ser um number, certo? Ah, description. Aí tem que ser um spin. Ah, eh, variável boleana está ativa ou não? Exactivo. Você tem que ser tipo boleana. Então, os tipos primitivos são esses, né? Ó, number, string, bullan, são tipos que eu tenho já por padrão dentro do Typescript. Eu posso criar também outros tipos. Qual a

diferença de interface para tipo? Aqui ultimamente os dois têm se comportado muito parecido. Então eu posso até copiar aqui, ó. Muito parecido. A diferença é o quê? que eu não vou conseguir aproveitar um tipo que eu criar dentro de outro. Como assim? Imagine que eu tenho categorias interface categoria, certo? que ela tem o name, ela vai ser string. Eu quero utilizar isso dentro do meu tipo ou dentro da minha interface. Colocar aqui eu digo: "Olha, eu não quero mais os tipos primitivos, eu não quero string, não quero n number, eu não quero boleano, eu quero

que seja catégo, certo? Quando eu coloco isso aqui, eu tô dizendo o quê? Que isso daqui é uma interface que ele vai dar essas informações aqui. Se lá na frente eu quiser construir alguma coisa com esse tipo aqui, ele vai gerar um erro, certo? As interfaces elas podem se agregar. Eu posso criar outras interfaces, ó. Product também. Eu posso dizer que o productia, ó, não vai gerar ele nada mais. É o quê? Esas interfaces são contratos, são informações que eu quero que sejam seguidas. Então, se eu passar aqui pro produto, eu quero a interface de

product, a partir do momento que eu passo essa interface, eu digo: "Olha, product, ele vai ter que ter name, vai ter que ter price, vai ter que ter description, vai ter que ter executived, vai ter que ter category. Se eu não colocar essa informação, ele vai acusar o erro. Olha, o produto, ele é do tipo produto e necessita que tenha essas informações. Então ele só vai parar de gerar esse erro quando eu colocar essas informações aqui, ó. Ah, ex. E tá faltando um, né? Ó, catégor vai ter que ser o tipo de category. Então, o

que que vai ter que ter nesse catégor? A string, né? Eh, futebol. Colocar aqui futebol. Certo? Quando eu coloco interface, eu consigo agregar os atributos de um a outro. E quando eu faço esse médio, eu junto essas informações, eu obrigo meu produto a ter todos esses atributos, certo? Diferente de product, o tipo product ele só vai poder existir um. Eu não vou poderar as informações, não vou poder juntar. Então, se eu coloco aqui até o somente product, ele vai acusar, olha, tá sendo duplicado o tipo product, você tá colocando mais de uma vez, certo? Isso

aqui é ideal quando você quer que aquele tipo seja único, não tenha eh nenhum outro ponto que possa interferir nesse tipo, não possa de eh diferenciar o que você colocou no início, certo? Estabeleci produto, esse produto vai ser produto até o final. OK? Que acontece? Eu posso criar tipos e representam algo diferente dos tipos primitivos. Eu posso dizer que category ela vai ser desse tipo que vai ter um campo name, ela vai ter um stream. A partir desse momento, quando eu vi aqui category e dizer que category é do tipo category, ele vai me obrigar

a colocar esse category aqui, o meu atributo. E esse atributo vai ter que ser o quê? um objeto que tem os campos que foram colocados aqui no type da, certo? Essa é a diferença principal entre tipos e interfaces. Beleza? O que é que acontece? Isso aqui é ideal para eu modelar as informações da minha tela, né? Como vocês puderam ver aí, eu consegui modelar meu produto e minha categoria, certo? Que que eu quero que vocês façam como exercício agora? Eu quero que vocês vejam essa tela que eu vou projetar e tentem criar o objeto de

vocês, ok? Deixa eu projetar aqui. Vou dar três minutinhos aí para que vocês modelem, beleza? Faça o modelo de vocês, depois copiem e cola aí nas mensagens pra gente ver o que que vocês enxergam aí como atributos desse produto. Quais são as informações que tem aí? Pode Isso, imagem, título. A imagem, como é que eu poderia descrever a imagem? Ela seria do tipo preço ou do tipo number, tipo string? Seria boleano? Vão colocando aí no no objeto de vocês. Blob string. Beleza? Vamos aqui, eu vou fazer juntamente com vocês. Então, vou imaginar o seguinte, colocar

aqui de lado, vou colocar aqui do outro lado. Quero essa tela aqui. Olha aqui. Pronto. Isso aqui. Vamos pegar no Mercado Livre logo. Então, vamos aqui, ó. Vamos pegar esse produto. Pronto. Questão de imagem, o que que a gente poderia colocar? imagem. Geralmente a gente não sobe o arquivo imagem para ser exibido de front. Então a gente coloca ele num serviço tipo Cloud Nir, tipo AWS, coloca ele no bucket e fornece só a URL que para que ele possa ser exibido. Então ele seria do tipo string, certo? Eh, a description seria string, seativo seria boleano,

categoria, como falei, seria tipo categoria, a gente criaria um tipo específico. Eh, desconto que a gente pode colocar para vocês, que poderia ser colocado aqui, n, né? Certo. Que mais? Eh, um importante aqui, se eu colocar aqui frete, como é que seria o frete? Frete, ele pode ter alguns estados, né? Ele pode ter alguns estatus. Quais ser os estatus do frete? Eu posso dizer que o frete ele é grátis. Eu posso dizer que ele é pelo Correios. Eu posso dizer que ele é frete pack, né, que tem a diferença lá do fret. Eu posso enumerar

diversos tipos de frete, certo? Então, Amazon tem diversos. Nesses casos aqui, o type é perfeito para que eu possa enumerar esses status, certo? Eu posso colocar aqui e a partir do momento que eu quiser colocar aqui o frete dele, ó, só destaco só posso colocar daquele tipo que eu especifiquei. Então, só posso colocar correiosment. Cadê? Só eu posso colocar naquele tipo ali. Pronto. Então só posso colocar com esses estados. Tá reclamando que não tem preço porque eu tirei, né? Tá reclamando que não tem o desconto. Calma aqui. Beleza. Ele vai tomar de algumas outras coisas

aqui também, como a imagem, ó. coloco algum triângulo relativo à aquela imagem. Beleza? Então, ó, para status eu posso colocar essas informações aqui. E dessa forma aqui eu evito que eu coloque outro tipo de status, pelo menos que eu queira colocar aqui depois AliExpress, não vai permitir porque não é o tipo de frete que eu tenho disponível paraa minha aplicação. Dessa forma eu consigo bloquear, certo? Eu posso fazer de outras formas. Eu posso também colocar, em vez de ser type, eu posso colocar o N1. Qual é a vantagem de eu colocar um? A vontade de

eu colocar o Enum é porque quando eu coloco o Enumar essas informações e aqui ele me disponibiliza tudo que eu tenho disponível lá no no meu Enum. Então não preciso ir retornar lá pro código, olhar o que é que tem escrito para poder fornecer aquele enu específico, aquela informação de estado específico. Então a vantagem do é essa daqui, certo? Beleza. Tô beleza. Dessa forma aqui eu consigo modelar as informações que tem na minha tela. Consigo dizer quais são os atributos que são necessários para poder ter eh o meu produto disponível. tela. O que que acontece

lá no frontend? A gente costuma chamar essa camada aí de informação relacionadas ao que eu tô disponibilizando em tela de models, certo? O pessoal às vezes confunde muito o que seriam as models do back end, do front end e de arquiteturas. Por padrão, no front endêmicas, que elas tem poucas informações, ela até considerada antipato, certo? Mas não tem problema. Elas vão ter o papel lá como se fosse DTO, elas vão ter o papel só de guardar os atributos relacionados àquele aquele objeto tá sendo exibido, certo? Que que a gente vai fazer agora? Agora a gente

vai criar esses módulos através de classes. Vai criar um pacote aqui, model, certo? Vai criar um arquivo product. model ts. Esse productmod. Ele vai ter uma classe, certo? Qual vai ser o papel dessa classe? Ele vai ter o papel de construir o meu objeto, certo? Vai fornecer a tipagem. eu vou conseguir ter a tipagem desse objeto e eu vou ter também os métodos para alterar esse objeto. Isso vai ser muito importante quando eu tiver um uma módela, que ela consiga ter as regras de negócio. A gente vai trabalhar a diferença de um para outro agora,

beleza? Então, imagine que eu tenho aqui, ó, uma classe do tipo produto. Eu vou ter o método construtor, que esse método construtor ele vai ter os campos relacionados ao produto. Para não perder muito tempo, vou colocar aqui que esse produto ele vai ter os atributos título, certo? vai ser tipo string. Ele vai ter colocar aqui título, ele vai ter o preço, vai ser tipo number. E vai ter a imagem, certo? Vai ser OK. Dessa forma aqui, quando eu criar meu objeto, caso aqui eu vou ter ter que importar ele para que eu possa ter acesso

esse módulo, né? caso vai ser ponto a model. Aqui eu acesso o meu diretório anterior que é model e acesso o product. Model que é o meu arquivo, né? Tô exportando ele para que eu possa utilizar. Eu vou nesse produto aqui, espero que tenha três argumentos. Quais são esses três argumentos? Eu vou ter que colocar o meu título, o preço e a imagem. Beleza? Então vou colocar aqui o carro, ele vai ter um preço de R$ 400 e vai ter a imagem lá. Vou colocar a imagem qualquer. Vai dizer que tem essa imagem. Beleza? A

partir desse momento, eu consigo, ó, ter acesso aos atributos do meu objeto. Se der o comando aqui em PM start, ele vem e retorna. o outro nome de Tar, certo? Essa aqui é uma outra forma de eu construir meus objetos. Em vez de eu ter que digitar um por um, colocar lá, abrir chaves, colocar atributo, colocar informação, eu centralizo a criação desses objetos num classe que vai ser instanciada para criar essas informações, para criar as informações desse objeto, certo? No frontend, geralmente a gente vai fazer dessa maneira. a gente vai criar uma camada de model,

que essa model é a representação das informações que tem disponíveis em tela, que elas representam os objetos que estão sendo eh colocados em tela, certo? Além disso, além de product, a gente também vai ter uma moda de categoria. Tentem fazer aí a moda de categoria enquanto eu vou listando aqui, certo? Vou deixar aqui aberto o products para que vocês possam ver e se basear nela, OK? Na minha categoria eu posso colocar só o título da categoria. Então, como é que seria isso? Basicamente vou ter que ter o método construtor, né? Tem que ter o atributo

que eu vou colocar no meu método construtor para criar meu objeto. Beleza? Vou copiar aqui, category. Vou deixar somente o título aqui em product para que eu possa receber essa categoria, eu coloco aqui no método construtor, certo? Eu importo isso aqui e a partir de agora eu tenho que colocar isso no meu método construtor. Quando eu vou instanciar, eu vou colocar category sendo que category eu vou criar. Vou criar meu objeto category vai ser instrumentos. M. Pronto. Certo. A partir de agora eu consigo acessar as informações de categoria. Hum hum. Público. Eu tenho que colocar

público aqui, galera, para poder ter acesso. E do céreo o título. Beleza? Dessa maneira aqui vocês vão conseguir construir os objetos de vocês, aproveitando outros objetos. Beleza? O que que acontece dessa forma aqui que eu construí? É uma módel anêmica, ela só serve para construir os objetos aqui do lado front. Então, imagine que vocês estão lá na tela, eu vou construir um um estado lá de produto. Eu preciso construir essas informações. Eu instancio o produto, passo as informações para ele. E a partir daqui eu posso trabalhar em cima das informações que ele tem disponível, certo?

Agora, digamos que eu quero trabalhar de uma forma rica, ou seja, ter modelo de negócio. Lembra que lá em produto eu tinha o desconto, não é isso? Se eu for exibir aqui, ó, eu tenho desconto. Eu tenho o valor que tinha antes desconto e o valor com desconto. Como é que eu poderia fazer isso? Como é que eu poderia fazer esse cálculo e gerar essa informação nova? Eu poderia colocar aqui um método que ele calcula o desconto. Certo? Esse método ele vai poder tipar também um retorno. Eu posso dizer, ó, meu retorno, eu quero um

retorno number. Que acontece? Quando eu chamar esse método, ele vai executar uma ação e essa ação vai me retornar uma nova informação. Essa informação vai ter que ser do tipo number. Então vamos colocar aqui no meu produto o desconto que eu posso aplicar. Então vou colocar mais um atributo. Vai ser discount do tipo não. Certo? E aqui no meu produto aqui que eu estanciei, vou dizer: "Ah, ó, o desconto ele vai ser de 20%". OK? Se eu quiser exibir esse desconto, eu posso retornar aqui, ó, que o meu preço ele vai ser o quê? a

multiplicação do meu preço total, que é 100%, menos o desconto que eu tenho do produto, certo? Aí se eu uso e isso aqui deve retornar o quê? O valor descontável. Então vamos estar aqui pr scout applied. Então, se eu vier aqui no meu console e colocar aqui price scout appli e vou ter o resultado do meu desconto. Então, meu produto que era R$ 400, com o desconto de 20% ele passa ser R$ 320, certo? Esses métodos assim que são de negócio, a gente diz que quando eu adiciono esses métodos à minha moda, a minha moda

ela do tipo rico. Beleza? Que que acontece? Eh, além de produto de categoria, a gente vai ter que construir o nosso carrinho, não é isso? O carrinho, ele tem algumas características. Quais são as características principais do carrinho? Vamos olhar aqui. Que que vocês conseguem enxergar aí no carrinho? Quais são as informações pertinentes? Colocando aí nos nas mensagens. Valor total, né? Valor total da compra, quantidade de produtos. Isso. Que mais? Tem os valores que são do tipo número, né? Títulos, a imagem, o preço, descrição, isso, tudo isso, né? Agora eu faço a pergunta. Quais desses valores

aí eles tendem a mudar? tendem a, de acordo com a interação do usuário, eu vou conseguir mudar os valores dos atributos. Por exemplo, eu posso alterar a quantidade de itens que tem dentro desse carrinho, posso, né? Ao alterar a quantidade de itens desse carrinho, o que que vai ser alterado juntamente? Quando eu interferir aqui na quantidade de itens do carrinho, eu vou também interferir no valor total, não é isso? Pode ser que eu possa diminuir tanta a quantidade de de itens do carrinho que esse produto vá subir do carrinho também, né? Não é isso? Então,

a gente pode ter algumas regras de negócio que a gente pode adicionar ao nosso carrinho. Então, vamos tentar modelar esse carrinho. Como é que a gente poderia fazer esse carrinho? Vamos lá fazer a moda dele. Então vou criar aqui uma módel para carreira. O método do construtor desse carrinho, eu vou dizer que tem que que tem no carrinho, ele vai ter list products, né? List de produtos do carrinho. Beleza? Que que vai ter nessa list? Vamos criar aqui uma interface para essa list. Então, que que vai ter nessa eh lista de póticos para que eu

diga quais são as negócios de de da minha lista de produtos. Eu vou colocar aqui interface. Que que vai ter? Vai ter que ter produto, né? Vou já colocar o produto e vai ter que ter a quantidade. No caso, vai ser nada, né? Obrigatoriamente ela vai ter que ter isso. O meu produto vai ser do tipo product. Que que acontece? Como eu criei uma classe product, eu posso pegar as informações que tem disponível dessa classe e utilizar esses atributos para construir a minha interface também. Então vou importar aqui, ó, o tipo product vai ser a

prodí aqui na minha moda. Então essa informação ela vai vir aqui. E agora eu sei que o meu produto tem que ter as mesmas informações dentro do meu objeto criado da classe produtos, certo? Basicamente é o que é como se eu tivesse utilizando a interface dessa classe, como se tivesse utilizando os tipo dessa classe. Beleza? Que que acontece? Essa lista aqui também vai ter que ser um arrei, né, ó. Vou ter que ter uma lista de produtos e quantidades. Não vai ser só um, vai ser vários, né? Pode ser mais de um. Eu posso dizer

que assim que eu construir esse método aqui, ele vai iniciar vazio, certo? Quando eu coloco esse igual a rei, eu di que é o valor inicial do meu meu cart ou meu carrinho. Então vamos criar aqui o carrinho. A ponte corte igual a parte igual a parte. Beleza? Aí eu vou importar aqui. Eu não preciso colocar nada no carrinho. Ele pode iniciar vazio. Só que eu quero adicionar itens ao carrinho. Como é que eu vou adicionar itens ao carrinho? Eu vou precisar desse método que adiciona os itens ao carrinho, né? Então vamos imaginar dentro do

minha classe eu vou ter o método ed item. O que é que vai ter que ter nesse eh de quais são as informações são pertinentes para adicionar o item ao carrinho? Vou precisar saber qual é o produto, né? do tipo product, eu vou precisar saber qual é a quantidade, né? Caso vai ser tipo não. Beleza? Essas informações aqui vou colocar onde? Dentro do arrei do carrinho, né? dentro de lists. Beleza? Se eu passar essa informação aqui direto, colocar product e quant, que que ele vai acusar aqui? Ele vai dizer, ó, list producto um objeto product

quantidade dentro de uma rei. Então eu teria que colocar aqui assim, né, ó, de um arrei. Beleza? Então eu vou receber várias informações de tipo que tem o produto e quantidade, produto e quantidade. Beleza? Vamos fazer isso, né? Eh, vamos adicionar ao carrinho o item produto criado e item. Vou adicionar produto. Aí ele tá reclamando ainda que falta passar além do produto a quantidade, mas eu vou dizer que foram dois produtos adicionados, certo? Quando eu der o console aqui e exibir dentro do caixinho a lista de produtos, vou ter o quê aqui? Function. Vamos aqui.

Pronto, salvou, né? Então ele retornou aqui, ó, o a minha lista. Como é que eu sei que é a lista? Por causa desses colchetes aqui, né? Ó, dentro desses cchetes, eu tenho vários itens e um desses itens é o meu produto e a quantidade relativa a esse produto, certo? Se eu for aqui a minha aplicação e adicionar mais uma vez esse item ao carrinho, colocar aqui produto e colocar mais um item desse carrinho. O que que deve acontecer aqui no meu carrinho? O que que deve ser exibido? Que que você acha que deve ser exibido?

vai aparecer um outro objeto que tem o produto e a quantidade dele, ficando aqui produto guitarra, quantidade dois, depois produto guitarra, quantidade um, ou vai somar a quantidade deles e vai repetir esse produto, um ou dois. Vamos pensar aqui. Se eu viesse aqui, ó, no meu carrinho. Carrinho aqui. Não, vamos criar um carrinho aqui rapidinho. Se eu adicionar esse item ao carrinho uma vez, né? Depois eu vier aqui e clicar de novo. Nesse meu carrinho, vai exibir a imagem desse produto aqui em cima, depois ele novamente repetido ou vai aparecer somente esse produto uma vez

e a quantidade dele? Esse produto somente uma vez a quantidade, né? Então, a gente tem que pensar nessa situação. Como é que a gente vai conseguir eh repetir o produto e aumentar a quantidade que foi adicionada? Tem que verificar a seguinte formação. Quando eu adicionar esse produto aqui, esse produto que eu tô adicionando é um produto diferente ou é o mesmo que já estava listado dentro do do meu carrinho? Tenho que fazer essa verificação. É isso? Se esse produto que foi adicionado é do mesmo eh tipo que foi colocado anteriormente, eu devo aumentar, adicionar a

quantidade, né? Como é que eu faço essa lógica? Para que vocês administrem a reis, né? Essas listas aqui dentro do JavaScript, existe negócio chamado RS. Deixa eu colocar aqui que são as rofs são as high order functions ou funções de grande ordem, certo? Basicamente é o quê? São métodos disponíveis já no JavaScript que faz o manuseio desses a redes. Então você vai ter uma ROF do tipo F, você vai conseguir achar um produto, você vai conseguir filtrar, você vai conseguir percorrer todos os produtos, você vai conseguir reestruturar as informações desse produto através do MAP e

vai poder fazer um read. O RUS vai vai ficar um pouquinho pro final, beleza? que seria basicamente você utilizar eh informações anteriores e presentes para poder fazer a manipulação do do arreio. Então, o que é que eu preciso fazer para adicionar esse item ao carrinho? Eu teria que percorrer essa lista, verificar se essa lista, o produto já foi colocado dentro dela. Se tiver sido colocado, eu tenho que somente aumentar a quantidade dele. Então vamos fazer isso. Então, lists, quando eu coloco o ponto, ele oferece os ros, né? Ele oferece os as funções que eu consigo

manipular esse arreio. Que que eu tenho aqui disponível? Eu vou colocar o forit. O forit é um método, né, a parênteses. Ele vai ter uma callback dentro. Vai ter uma função que eu vou conseguir executar algumas coisas dentro dessa outra função. Então ela vai me trazer o quê? O valor de cada item dentro dessa lista. Então ele vai percorrer item 1, T2, T3, T4, né? Então vou percorrer o item. Vou fazer o seguinte. Dentro desse item, eu vou verificar o item que eu estou manipulando ali dentro desse carrinho. O produto, ele tem o mesmo nome

do produto que eu estou adicionando nesse momento. Ou seja, esse produto aqui, ó, é, né, que tem produto, é título, né, ó. Já corrigi, ó. título tem o mesmo título, ele vai ter o mesmo título. Se isso aqui for verdade, que que eu faço? Eu repito o produto, né? Eu não modifico ele, eu não modifico ele e só faço o quê? Pegar a minha quantidade, que é a quantidade que já tem dentro do meu item, né? Ó, lhe adicionar a quantidade do produto que eu quero. Então, isso aqui vai ser o meu novo item, certo?

E quando eu coloco return aqui, eu substituo essas informações que tem aqui dentro do do da minha lista, certo? Então eu dou retorno de 1000. Aí se ele não for igual significa que é outro produto, então não preciso modificar nada, eu simplesmente já retorno esse item. Certo? Que que eu fiz aqui? Eu fiz a modificação dinâmica. Eu alterei o item da minha lista, fazendo a verificação e retornando o novo produto. Para esse caso, em vez de for, em vez de só percorrer eles, eu vou utilizar o médico, certo? O for percorreria os itens e posso

interagir com eles, mas para modificar utilizo o map. Vamos ver o que que aconteceu aqui. Então, ó, adicionei o produto guitar. De início, eu coloquei dois produtos, depois fui lá, adicionei mais um. Então, na teoria deveria ter o quê? o mesmo produto, só que agora que é uma quantidade três, né? Vamos verificar se aconteceu isso. Ele tá sendo retornado vazio. Por que que ele tá sendo retornado vazio? Vamos verificar aqui porque eu não coloquei esse produto dentro da própria lista. Eu fiz a alteração, só que essa alteração não altera dinamicamente direto esse list productor informações

que eu alterei. Então eu vou atribuir novamente ao meu listado que eu manipulei, ó. Certo? Então eu digo, ó, isso aqui tudo que a gente manipulou, que a gente modificou, coloca essas informações dentro do product. Agora ele vai alterar. Vamos ver aqui. Beleza. Adicionei uma vez, adicionei outra e nada. Vamos ver o que aconteceu. Product item. Ele tem o mesmo título do product item que eu coloquei. Se tiver, retorna o novo item. Senão retorno o item anterior e não só no anterior. Pronto. Hum hum. Vamos dar um console aqui. Console item. Certo, certo. Vamos lá.

Sak aqui. Verdade. O MP não é o melhor método, né? O melhor método seria quê? Percorrer mesmo. Então vamos criar seguinte, a gente verifica se ele está presente dentro do do arrei. Se ele não tiver, a gente dá um push. Como assim? Vamos fazer o seguinte, a gente vai utilizar um list product, vai utilizar o método find index. Que que esse método faz? Ele procura dentro do arrei qual o índex do produto que é relacionado àquela condição que a gente colocou. Então vamos aqui de vai procurar dentro dos itens se existe algum item e o

produto tem o mesmo título, certo? Seja igual que que isso aqui retorna? Se existir, ele retorna o item. Se não existir, ele vai retornar -1. Então, se eu coloco aqui e comparo com -1, eu digo assim: "Olha, essa informação aqui, ela é maior que -1. Se for verdade, é porque existe item. Se não for, significa o quê? Significa que retornou menos um e que esse não existe. Então vou dizer que isso aqui é equivalente a dizer exist, certo? Então, se existe o item, eu vou só pegar esse item específico. e modificá-lo. Então vou passar pelo

método. Certo? Vou pegar esse item. E vou retornar esse item modificado. Beleza? Se esse item for modificado, retorno como ele já estava, certo? Dessa forma aqui, eu verifico se ele existe. Se ele existir, eu vou lá nesse item específico através desse if e eu repito esse produto e só aumento a quantidade, certo? Senão eu vou lá e repito todos os produtos que não estão relacionados ao que eu adicionei. Agora, se ele não existir, é necessário que eu coloque dentro desse arreio. Para que eu coloque nesse dentro desse arreio, eu utilizo o método push. Com método

push. Eu vou criar o objeto, né, que representa que eu quero colocar e jogar dentro do do arre dessa forma. Eu tenho que eu tava falando para vocês, ó. Eu tenho o meu produto de categoria. O que que aconteceu aqui? Vamos lá. Ele adicionou o primeiro produto, adicionou o segundo, né? Tanto que ele conseguiu fazer essa verificação, repetir esse primeiro produto e aumentou a quantidade três. O que que aconteceu que veio esse novo produto? Provavelmente ele levou o posto também mesmo com a verificação. Eu deixei de verificar o quê? Se ele não existe, né? Então

vou colocar aqui, ó. É, que é o caso contrário. Beleza, ó, eu obriguei a ele fazer essa verificação. Se existir, modifica o item que existe. Se não, adiciona ele ao array. Beleza? Dessa forma, a gente vai conseguir manipular os carrinhos. Dessa forma, a gente tem o quê? tem uma model os objetos que estão na minha tela, que ela é uma model rica, que ela tem métodos que modificam esse meu produto, meu objeto. Beleza? Certo? Deu para entender? Show. O que que acontece? A gente passou um pouquinho, né? Passou 20 minutos. A gente começou 7:20, a

gente passou 20 minutos. vai ficar para exercício de casa vocês construírem essas módels, certo? Com carte, categoria, produto, tudo isso que foi trabalhado em aula. Vocês podem ir lá no Mercado Livre, no AliExpress, pegar algum encaixe, tentar colocar todos os atributos, colocar as informações necessárias, colocar categorias, ah, vou trabalhar com flete, vou fazer alguma coisa do tipo. Tentem modelar isso, modelar pelo menos esse básico, ó, que a gente trabalhou em aula. E fica como desafio paraa próxima aula vocês calcularem o total, certo? Então vocês vão criar um método aqui e ele vai calcular o total.

Para aqui vocês conseguir calcular esse total, vocês podem utilizar o forit, se for de uma maneira mais simples. Para quem já tem experiência, vocês podem utilizar o RID, beleza? Quando for a próxima aula, na parte de revisões, relembro essa parte, eu mostro o código eh resolvido com essa parte e a gente tira um pouquinho das dúvidas, beleza? Show. Então, galera, que que a gente viu hoje? Que que a gente trabalha hoje? Hoje a gente viu a diferença de JavaScript para Typescript. Tlan, assisti a aula, não me lembro o que que é JavaScript, o que que

é TypeScript. lembrando, JavaScript, linguagem dinâmica com ou linguagem com equipagem dinâmica, eu consigo modificar os tipos dos meus atributos no objeto. Type é uma linguagem que eu uso no desenvolvimento que eu tenho controle sobre isso daí, sobre o controle sobre esses atributos e eu consigo compilar e ver os erros. Depois que eu compilo o TypeScript, gero o JavaScript. Esse JavaScript, ele vai ter o mesmo resultado que teria anteriormente, certo? O que que seriam as interfaces? Interfaces são os contratos. Os tipos são os tipos que eu posso montar, eu posso criar aqueles tipos específicos. É como

se eu tivesse criando um tipo equivalente ao primitivo, só que da maneira que eu quero. O tipo para frete, vai ter corr, vai ter Pix, para compras, por aí vai. O que é que seriam as models? As models são as modelagens. Então, se você assistiu a aula de hoje e alguém lhe perguntar que é que foi assistido, você vai dizer. Basicamente isso é essa lista. Beleza? Do que foi falado hoje em aula, ficou alguma dúvida ou só vai aparecer quando a gente fizer o exercício? Ah, o formulário presença dúvida essa. Pessoal, ao final da aula,

né, a gente disponibiliza o formulário. Guilherme, tu tem acesso ao formulário nesse momento? A, pronto, a disponibilizou. Ó, pessoal, a Naré também é uma das mentores, né? Ela vai ficar responsável por ajudar vocês. Ela disponibilizou aí o formulário para preenchimento, OK? Pessoal, próxima aula a gente vai ver componentização, a gente vai ver a parte reatividade, vocês vão ver como é que criam a vitrine ali do do nosso e-commerce e na aula quatro a gente vai destrinchar um uma biblioteca de componentes, beleza? Então, quinta-feira a gente se encontra novamente nesse mesmo horário, às 19 horas e

terça-feira também. Beleza? A gente vai utilizar esse mesmo