[Música] fala pessoal Janer aqui no vídeo de hoje nós vamos começar a trabalhar com formulários né Nós vamos começar a estruturar aí o formulário para criação do produto né E nessa aula aqui eu tô pensando a gente seguir aquela ideia que a gente já vem seguindo antes de trabalhar um pouco na estrutura na componentização e deixar a parte de estilização para uma próxima aula tá então então nessa aula aqui a gente vai ver ali a estrutura no XD Desse nosso formulário e os tipos de Campo que a gente vai precisar e na próxima aula a
gente pode trabalhar aí com estilo ou talvez até fazer uma aula de implementação de verdade né porque nessa aula aqui eu só quero estruturar mesmo talvez a gente faça estrutura a implementação E aí depois o visual para ficar um um progresso legal aí no desenvolvimento do nosso formulário Tá certo então vamos aqui no nosso browser né eu já tô aqui eu pesquisei na documentação do Expo mesmo sobre o picker por quê porque se a gente olha aqui ó no XD e esse categoria ele é o o tipo do Campo né do campo do formulário é
do tipo picker que a gente pode ver que ele tem a setinha ali né que é basicamente quando eu clico aqui ele vai me dar opções para eu fazer o pique né para eu escolher alguma dessas opções e e é basicamente esse tipo de Campo aqui e os outros Campos São IMP normais de texto né onde a gente vai entrar com um valor é bem simples o a diferença que tem de campo é só o picker aqui mesmo e a gente vai ter picker e inputs né então a gente vai est criando essas componentes aqui
eu vou fazer como eu fiz na aula passada de criar ali um esboço um rascunho desses Campos E aí depois a gente separa e em componente e replica e repete ali né o o no caso do input a gente ali os inputs que a gente vai precisar tá então voltando aqui no Browser e aqui ele fala sobre a biblioteca né a gente já tem uma biblioteca aí que que ajuda a gente na criação de pickers e que é o react naate picker Né react picker bar picker aqui ele fala da documentação né que traz a
gente aqui pro github deles tava até copiando aqui um exemplo do código né na verdade esse exemplo aqui que eu vou fazer ali de rascunho e pra gente usar e aqui tem um de instalação enfim exemplos de uso da biblioteca Tá mas a gente vai basicamente e pegar esse exemplo aqui ó aqui ele fala do uso né a parte aqui já de uso dessa biblioteca que ele fala pra gente fazer o Import aqui ele cria um US state né com o o valor que vai que vai armazenar o valor que foi selecionado no picker e
aqui a componente em si sendo utilizada então eu vou copiar essa parte aqui da componente sendo utilizada tá V vamos vir aqui no código e aqui tem a parte do modal O que que a gente pode fazer aqui na verdade vamos comentar aqui o modal por enquanto E aí depois a gente volta nele para explorar melhor para na verdade quando a gente começar a criar componentes né a gente vai criar um componente que vai ser a componente do formulário e a componente do formulário vai usar as componentes do input de texto e do input do
picker né então eu vou colar aqui esse picker que eu e vamos voltar aqui no Browser que tem a importação né ele importa o picker da biblioteca Na verdade eu já tô pulando o passo aqui né mas você tem que instalar primeiro né então aqui ele fala né do da instalação né o getting started que é d um npm ST react picker TR picker ou até no próprio Expo aqui né npx Expo spal spaw install @ reactnative barpi TR picker né bar picker eu vou até copiar aqui ó esse instal ven aqui no projeto vou
abrir o terminal eu já tô com o projeto rodando né Então vou parar aqui control c né e vou dar um control V aqui para ele colar Esse comando de instalação pressiono enter e ele vai ir instalando aí vou fechar aqui o terminal enquanto ele Instala aí para mim tá só confirmar aqui né ele vai iniciar a instalação vou deixar ele aberto aí e já instalou instalou rápido assim porque eu já tinha instalado antes né então depois que instalou dou aqui o npm npm start né para ele iniciar o Expo enquanto ele inicia aí vamos
voltar aqui na documentação do picker né do github deles aqui nesse exemplo ele importa né cadê aqui ele faz o Import do picker from @ react TR o picker né barp eu vou copiar esse Import aqui também vou vir aqui na minha componente eu vou colar aqui na parte de baixo né porque na verdade já tava até importado aqui em cima né deixar aqui o Import do picker né e com ele importado na aplicação a gente pode passar alguns valores na verdade eh eu vou tirar aqui esse Own value Change tá e o a estrutura
do do picker ela é é simples Até de entender né porque o que que eu faço a gente a gente usa a tag picker para definir realmente o a componente e dentro da tag a gente coloca usa aqui ó o picker p item né que seriam as opções de cada item e do meu select a mesma forma que a gente tem lá no no no HTML a tag select né E aqui seria a tag option é que só muda a nomenclatura né que é picker e picker pitem cada item tem o seu Label né que
seria o texto que vai ser exibido e cada item tem o seu valor né ou seja se eu selecionar Java eh qual o valor que vai ser desse Campo essa string aqui esse value né se eu selecionar JavaScript O valor vai ser JS então o picker ele tem uma propriedade que Selecta de value que é o valor que vai começar a selecionado né tipo não é nem o que vai começar mas é o valor que vai estar selecionado no momento Então eu vou deixar selecionado selecionado no momento o valor Java né Ou seja a primeira
opção tá então com isso aqui salvo deixa eu abrir aqui o terminal ele já abriu o Expo eu vou pressionar a tecla a né para ele abrir no Android que é o emulador tá E ele já abriu de dar um Reload aqui para ele carregar o app né no meu emulador E com isso aqui ó eu já tenho um picker aqui na minha componente né olha só tá ali escrito Java né a setinha ali para baixo se eu clico olha lá ó ele já me dá a opção para selecionar para selecionar JavaScript se eu seleciono
ele não muda porque o selected value tá sendo passado de forma eh e a gente tá passando hardcoded aqui né eu já tô escrevendo aqui não tá dinâmico Então não vai alterar mas o outra coisa que tem aqui interessante outra propriedade interessante do picker né é o nós temos o mode esse mode aqui é o são diferentes formas de exibir speaker que a gente tem o dialog que foi esse que apareceu né aparece uma caixinha aqui pr pra gente escolher as opções e tem também o drop Down tá se eu marca aqui o drop Down
e CL save se eu clico Olha lá ele abre um um drop Down né para mim escolher essas opções tá então a gente tem essas opções aí que são interessantes eu vou deixar o dialog mesmo por enquanto e E com isso aqui é basicamente a a componente é essa né Tipo o a funcionalidade a funcionalidade do picker é essa né eu tenho aqui essa componente que eu importei da biblioteca então eu usaria isso na verdade o O que teria mais aqui seria um um Tex que seria um Label né que seria por exemplo categories um
texto que acompanha o campo né se a gente olha aqui no XD eu tenho aqui ó o texto categoria que acompanha o campo o picker né de categoria o texto marca que acompanha o input de marca né que é o Label né que descreve o que cada campo é então a componente em si do picker teria essa estrutura né o picker em si e um texto que descreve e talvez um viio por volta né que seria o contêiner ali eh Então essa seria uma das componentes né que é o que é o picker e a
gente tem também o input de texto né input de texto A gente não precisa usar biblioteca porque o próprio reate já tem um input de texto né que é o o text input ele aparece até ali para mim importar Deixa eu tirar aqui o o emulador importador react Nate o text input que ele é uma componente que enfim né ele me permite digitar textos né então por exemplo eu posso passar aqui no text input um Place holder esse Fer é um texto que aparece quando eu não digitei nada né então vou aqui um hello hello
from test esses Hello são icônicos né mas se eu venho aqui no no emulador olha lá ó hello front test já tem um input aqui ó se eu clico ele já abre um teclado né se eu digito aqui eu já consigo digitar né então esse text input aqui já é do react Native e não tem estilização nenhuma né mas a estrutura seria também um text input e um Label né esse cara aqui sei lá é marca que tá ali né ou seja o texto marca e o input que que enfim né que vai pegar um
vai receber um texto né então a estrutura também seria essa Tá certo então aqui nós já temos né o as estruturas dos input agora é só criar as componentes mesmo né o o text input e o input select vou input select não e pode ser o input picker né enfim a gente pode dar um nome aí interessante e então vou tirar aqui o emulador Porque nessa ideia de componente também né como eu falei lá no início eu vou ter que criar um componente pro meu formulário e dentro da componente de formulário eu vou usar esses
caras aqui tá então dentro do meu modal tá vou voltar aqui um pouco o meu modal deixa eu salvar isso aqui pior que se eu salvar vai quebrar tudo né ou não é não o Mod apareceu por cima né ali no fundo a gente pode ver os inputs aqui de texto eu vou deixar eles aí por enquanto mas dentro do meu modal eu vou ter uma componente tá uma componente por exemplo product for uma componente com esse nome aqui que é a componente que vai ser o meu formulário né então vamos criar essa componente aqui
tá E essa componente ela é uma componente específica da tela de produto né então tipo assim eh eu eu eu tipo a pergunta que eu gosto de me fazer né eu vou usar essa componente em outro lugar por enquanto não né então eu vou criar essa essa componente esse formulário aqui dentro de screens né da da pasta screens eu tenho aqui a pasta produtos né que é a tela de produto então aqui dentro da da pasta de produto eu posso criar uma pasta componentes tá que vai ter as componentes específicas da tela de produto né
não é eh e as componentes aqui de cima são componentes mais globais né que são usadas em diferentes áreas aí do do sistema tá ind indo nesse pensamento ó já até um vacilo aqui que é o próprio subheader né o subheader ele é da tela de produto ou talvez a tela de detalhe Eu também teria aquele mesmo subheader não sei né então ele foi parar ali mas enfim é um questionamento né é questão de estrutural até porque depende muito eu faço isso aqui dessa forma mas é uma forma que eu acho interessante né que o
que eu uso bastante no meu dia a dia então para você pro seu time não pode pode não ser né interessante ter de de organizar as componentes assim né pode ser interessante organizar de outras formas que também não tem problema nenhum né aqui a gente não não a gente tem a flexibilidade né a gente não tem tanta regra em relação a estrutura arquitetura né Mas enfim vamos lá aqui dentro de components eu vou criar uma nova pasta chamada add product form e aqui dentro eu vou criar né o meu index.tsx e o meu Styles né
styles.ts o Styles vai ficar aí porque a gente não vai estilizar nada agora eu só vou criar aqui a componente né const add product form Isso aqui é uma função que retorna uma View vamos lá retornar view do react Native aqui dentro Eu vou ter um text do react Native hello from product form e no final aqui eu vou dar um Export default Ed product form tá criar componente já vou copiar ela aqui né porque a gente vai ter que criar outras Mas enfim a componente aqui criada eu vou importar ela na minha tela de
produto né que tá dentro do modal então salvando isso aqui já vai aparecer ali né um Hello from product form dentro do meu modal então com isso aqui criado a gente já pode pensar na estilização dessa Na verdade eu acabei de falar que a gente não ia mexer com estilização né mas eu vou ter que colocar pelo menos um fundo branco aqui no meu formulário uma largura e altura pra gente conseguir ver melhor tá então no Ed product form ele tem uma View essa View aqui ela é o contêiner né então aqui Style vai receber
Styles ponto opa ele importou Styles errado ali aqui dentro do meu do stylos né o arquivo Styles que eu acabei de criar agora PR componente product form eu vou criar aqui né a Style sheet tem até o snip para isso né Eu tava olhando ali é o RN Style né que eu só tem que importar o Style sheet do react Native e aqui dentro fica vazio no final que eu dou Export default Styles dentro da sty sheet eu vou ter o vou ter um contêiner que é o estilo né do contêiner do meu formulário de
adicionar produto tá então que essa vi né o contêiner a componente P que vai ter o estilo né Styles deixa importar aqui oy certo né nos ponto contêiner tá então a estilização dessa View né do formulário de produto vai ser ã o background color branco eu vou ter aqui também eh uma largura e uma altura né então wiit a largura eu vou passar uns 80% vai 80% e aqui eu teria também o o He 80 também ficou bom né ficou bom vamos deixar aqui é vamos deixar isso aqui a próxima aula a gente foca mais
no no visual disso aqui tá vamos voltar então vou até fechar o Styles ali pra gente não mexer muito nele e agora eu já tenho a componente do meu formulário e aqui dentro novamente vai a gente vai usar as componentes que a gente criou aqui do dos texos né dos tipos de input então vou fazer o seguinte eu vou criar agora a componente do meu picker né O meu vou chamar isso aqui de input picker eh pode ser pode ser input picker então a estrutura dele vai ser essa eu vou até recortar aqui e como
esse picker né ele vai ser usado em diferentes locais da aplicação eu vou criar em component nessa component externa né não é uma componente específica de produto então aqui em component criar uma nova pasta é input picker aqui dentro eu vou criar um novo arquivo chamado index ptsx tá E aqui dentro vou criar componente né input picker é uma função essa função vai retornar aquilo que eu copiei aqu ele vai dar um erro né só vou exportar aqui primeiro Export iner tá e eu vou colocar um vi em volta desse texto desse Pier que seria
o coner PR gente aplicar algum algum Styles A tá então pescar aqui essa Vi vai ficar por volta eu aqui oex re tá o picker da biblioteca react Native picker né traço picker parou de dar erro Vou salvar e em teoria agora se eu importar aqui esse input picker dentro do meu add product form ele vai funcionar então ten aqui né um Hello from product form que é o texto que tá sendo exibido aqui dentro do meu formulário né E aqui embaixo eu vou importar aqui um input picker né ele já vai importar ali da
da pasta correta da pasta components e salvando isso aqui olha lá categories e o picker aqui para mim selecionar o Java né então a componente Tá OK tá funcionando eh eu vou criar agora a componente de texto e depois a gente volta eh deixando os valores dinâmicos né porque esse pul pick que eu criei tá estático né não tem tá tudo todos os valores dele estão passado ali hardcoded então vamos criar aqui agora mais uma componente eu criei o input picker vou criar aqui mais uma nova pasta que é o input text né o input
de texto um novo arquivo index tsx vou até copiar o input picker pra gente não perder muito tempo digitando vou trocar aqui o nome né é o input text eu não vou chamar de text input porque já tem o text input tudo Re só para não confundir e o conteúdo dele né a estrutura dele é essa aqui que estava na minha tela de produto Beleza vou recortar Vou salvar ele aqui vou limpar aqui os meus imports para manter tudo Clean né E aqui dentro de input text né a estrutura vai ser isso que eu acabei
de copiar né que é um texto e um text input react na é o picker eu posso apagar também não tô usando enfim componente criada né input text então aqui eu vou chamar produto não né do meu formulário de adicionar produto eu vou chamar aqui dentro o input text né ele já importa para mim input text da pasta components e salvando isso aqui olha lá eu já tenho aqui o meu input de texto já consigo digitar né Então tá tudo bem Tá tudo perfeito Beleza então agora que a componente tá criada vamos brincar aqui com
alguns valores dela né vamos começar aqui pelo picker porque o picker ele vai ter né o é bom a gente sempre perguntar tá o que que vai ser personalizável nessa componente né o que que vai ser personalizável nesse meu input picker aqui e se a gente for dar uma olhada eh a gente já vê aqui algumas coisas né que seria o qu a gente teria o que de cara né precisa de um Label né um texto que vai descrever esse meu input eu preciso também eh dos valores que serão exibidos né as opções que eu
vou dar para para para ser exibidas ali pro usuário escolher Então eu preciso de um Label eu preciso das opções eh e eu preciso também do valor inicial né ou ou não não é bem que não é bem o valor inicial mas é que mais para frente que a gente vai entender melhor Provavelmente na próxima aula de funcionamento mas eu tenho que falar pro picker Qual o valor que tá selecionado tá E essa de falar para ele se relaciona bastante com us state né que a gente usa o US state para controlar o estado O
que está sendo exibido na aplicação da aqui aquilo que eu expliquei anteriormente que sempre que eu altero algo que reflete no visual eu tenho que alterar o estado para recarregar a tela né então a gente tem que fazer esse controle aí e e e falar para componente input picker Qual o valor que está sendo selecionado então de cara a gente já tira esses três esses três essas três opções aí agora a gente vai personalizar somente duas né que são as opções e o Label porque na aula de funcionalidade que a gente vai falar mais sobre
como deixar o funcionamento disso aqui dinâmico né Mas vamos lá então para falar né para descrever aqui para fazer a tipagem de quais parâmetros essa minha componente input picker vai receber a gente usa né como a gente tá usando aqui typescript eu vou criar uma interface né chamada props e nessa interface né eu vou descrever as propriedades que a minha componente input picker vai receber então aqui dentro Eu vou ter um Label esse Label Label é o qu ele é um string o tipo dele é o qu né do tipo string é e as opções
né os itens picker P item né isso aqui né quando a gente já olha de cara a gente sabe que tem várias opções né essas opções o que que o que que tem dentro delas de verdade o Label e o value Né o o O que que é uma opção desse meu picker né Ele é um Label que é o valor que vai ser exibido na tela e o value que é o valor associado à aquele Label que está sendo exibido Então isso é um item né e e para mim receber isso via parâmetro a
gente pode receber um objeto que dentro desse objeto vai ter Label o Label é o qu é um string né e o também é uma string tá só que dessa forma eu só tô recebendo um objeto né eu só ia receber uma opção só que eu posso receber várias né então já que é várias eu vou receber não só um objeto mas uma rei de objetos né uma lista de objetos um vetor né então esse quando eu faço aqui no typescript dessa forma ou seja eu tenho um objeto e depois desse objeto eu passo aqui
e abrindo fechando colchetes né isso aqui indica que o os meus itens ele é ele é um arrei de objeto né um arrei deste objeto aqui tá beleza então dessa forma eu vou conseguir enviar esse Array E aí eu vou receber esse arrei aqui dentro da componente e renderizar esses itens como que a gente vai fazer isso vamos lá vamos aqui no input pick receber né se eu falar que eu recebo objeto a tipagem dele é props então aqui dentro tem o Label e tem o itens né o Label é uma string que vai ficar
aqui no text né então ao invés do text ser categories o text vai ser eu passo aqui Chaves né para mencionar a variável dentro do jsx então aqui nas Chaves eu vou passar o Label e nas opções eu vou passar as chaves também eu vou apagar essas opções aqui tá eh e aqui dentro eu vou vou deixar aqui abrir e fechar Chaves né E aqui dentro Eu vou pegar os meus itens os itens que eu estou recebendo né que que é uma Ray de objetos então que eu vou fazer o quê eu vou mapear né
então vou dar um itens pmap né só para esclarecer para vocês o método map né quando eu mapeio um arrei eu retorno um Array mapeado um novo Array né com as alterações que eu fiz então só de eu fazer aqui Um item P map eu vou pegar esse meu arrei de objeto transformar ele em outra coisa e já retorno dentro do meu jsx para ser exibido em tela do nosso tsx né então aqui no itens pmap né é uma função ela tem como parâmetro outra função né que é a função que vai ser executada para
cada item do Array certo então eu vou chamar isso aqui de como a variável chama itens né que é uma rei de itens cada item é um item né então eu vou chamar o O interno aqui o parâmetro dessa função que tá dentro do Map de item esse item aqui eu só passo o mouse lá em cima olha lá ele é um objeto com o value com o Label e com o value né Então essa função vai ser executada para cada objeto do arrei tá onde esse item aqui vai ser cada item tá então no
meu map o que que eu vou fazer aqui dentro desse map né O que que eu tenho que alterar nesse meu objeto para fazer esse meu esse meu picker funcionar né porque da forma que eu tava usando antes né O que que eu precisava fazer eu precisava de um picker ponto item né esse elemento aqui então o que eu vou fazer aqui agora é basicamente para cada item do meu arrei eu vou transformar né esse arrei de objetos em um arrei de elementos visuais né Então nesse meu map eu vou retornar para cada item do
aray eu vou retornar um Um picker item né Um item visual um elemento visual tá onde esse picker item o value dele vai ser item p value e o o Label né vai ser item P Label e dessa forma aqui vai dar um erro né porque eu não tô passando a propriedade ainda vou até tirar o emulador daqui tá só para explicar isso aqui melhor dessa forma aqui n na verdade explicando melhor do jsx em si eu posso muito bem mencionar aqui ó no jsx um Array por exemplo de text olha lá ó que eu
não tenho erro fazendo isso dessa forma né Eu não tenho não dá erro de tipagem porque dentro do do do tsx do jsx em si eu posso passar um elemento ou eu posso passar um node né É aquela ideia do node do no no HTML a gente vê também isso bastante de Element node que é um nó de itens não é só um item é um nó e essa ideia do nó o nó de itens quando traço pro JavaScript se é uma Array né uma lista de itens Tá certo então por isso que eu consigo
fazer esse map e consigo retornar eh uma lista de picker item de itens visuais que vão ser exibidos tá então vou salvar aqui e para funcionar agora aqui no meu AD product form tá dando erro por qu porque eu falei que o meu input picker né ele tem que receber um um Label e uma Array de itens são obrigatórios né então aqui no meu formulário eu vou ter que passar isso aqui tá certo então o Label esse Label aqui vai ser categoria vamos ver aqui no XD isso categoria E quais as opções dessas categorias né
quais os itens que serão exibidos aqui dentro desse meu picker eu só pegar aqui as opções aqui na verdade aqui eu vou deixar simples por enquanto depois a gente D uma olhada l no banco de dados como que tá isso mas esses itens aqui eu vou passar uma aray eu vou até copiar aqui ó pra gente não perder tanto tempo os itens serão uma aray onde o value é JavaScript e outro value na verdade o Label né um Label JavaScript outro Label Python pra gente ver se aqui funcionando então quando eu salvo parou de dar
erro aqui na componente se eu abro o app também parou de dar erro ele tá dando um warning ali que eu já vou explicar o que seria o que que é esse warning mas olha lá ó eu já tenho ali a opção JavaScript se eu clico Olha lá JavaScript posso escolher Python se eu clico não vai mudar porque volta naquela questão da funcionalidade que eu falei né do do meu picker aqui tem o selected value que a gente vai estar abordando Provavelmente na próxima aula tá mas o fato é que agora eu já consegui deixar
o JavaScript Python vou passar mais um aqui ó mais uma opção e Java ué isso Java e olha lá ó JavaScript Python e Java né tem aqui as opções Então tá funcionando o o Label também ol o Label tá categoria eu vou digitar categoria vou colocar o Hello from né Hello from categoria ó se salve Olha lá mudou o o Label Então tá funcionando tá o meu Label com isso aqui então Vamos agora pro texto né pro input de texto na verdade agora a a gente tava agora no input no picker né agora é o
texto e nele se a gente abre ele ele é um pouco mais simples né porque ele vai ter um Place holder né que vai ser esse texto aqui que vai ser exibido quando eu não tenho nenhuma opção selecionada tá e eu vou ter um Label também basicamente essas duas opções aqui esses dois valores então a interface vai ser do mesmo jeito eu vou criar não é do mesmo jeito mas a gente vai criar uma interface for chamada de props né Essa interface agora voltando é pro meu input de texto aqui eu vou ter um Label
vou receber ver propriedade né um Label que é um um string e um placeholder que também é uma string tá então input text ele vai receber como parâmetro aqui um objeto do tipo props dentro aqui eu vou ter um Label e um Place holder tá o Label vai ficar dentro dessa tag text eu preciso das chaves né e o Place holder vai ficar aqui como parâmetro do meu text input tá então eu vou passar Place holder dessa forma aqui vai dar erro né porque as as propriedades são obrigatórias e aqui eu vou ter vamos vir
aqui no XD o Label marca né e o Place holder nome da marca então Label marca e o holder nome da mar salvando aqui olha lá apareceu já aqui o Label marca né e o placeholder ali no meu text input e o Place holder ali no meu text input escrito o nome da marca né consigo digitar enfim tá tudo funcionando beleza então agora por último aqui pra gente finalizar a aula eu vou criar a estrutura do formulário aqui tá então se eu venho aqui no XD né Nós temos aqui uma certa estrutura né Eu tenho
um título né Cadastrar produto eu tenho aqui um botãozinho para fechar e os inputs Então vamos criar isso aqui essa estrutura tá eh esse text aqui Hello from product form vai ser o título né O que vai ser cadastrar por produto eu vou ter o botão fechar né que é esse x aqui por enquanto a gente não tem ainda o a gente já trabalhou com os ícones né eu teria que criar um ícone aqui pro botão fechar e eu tenho que pegar o svg né então eu vou vou pular o o botão fechar na verdade
eu vou colocar um text vai a tag text com um x aqui dentro só para não falar que eu não fiz nada tá um X ali mas depois a gente vai mudar isso aqui pro ícone o ícone svg Tá certo eh nós temos aqui o Play o input picker né de categoria eu tenho o input de texto da marca né o a marca desse produto né Ou seja a categoria do produto A marca dele o que mais que eu tenho loja de venda nome do produto então vou ter mais um aqui nome do produto outro
preço o preço anterior preço preço anterior descrição e estoque né essa parte aqui das cores e das imagens Opa a gente não vai est abordando porque o backend não tá suportando isso né não tem essas opções lá para salvar no backend então eu não vou nem fazer aqui no front porque não não vai servir para nada né então aqui é descrição e estock tá descrição e estoque então eu vou trocar esse texto aqui eu vou cortar aqui só para né não a gente não ficar perdendo tempo vendo eu digitando aqui Pronto voltei aqui né já
com os os labels e os placeholders e definidos aqui eu adicionei mais um text aqui de unidades disponíveis que se a gente olhar aqui no XD e no estoque né eu tenho eu entro aqui com o número de unidades que eu tenho no estoque e tem um texto aqui escrito unidades disponíveis para meio que complementar né o que eu estou digitando e então é isso né e a estrutura aqui no app Ó ficou assim deixa eu voltar aqui V ver as cod para dar o contraste a estrutura do app ficou do formulário agora né ficou
Essa é tem mais coisas de estrutura que a gente pode aplicar aqui mas é para estilizar então não vou estar mexendo nisso agora e na próxima aula a gente pode pensar na questão da funcionalidade né de como que eu vou preencher os dados aqui como que eu vou pegar esses dados e como que eu vou enviar eles pro backend tá E aí com isso feito a gente pode pensar já na na estilização para deixar esse formulário no visual que a gente tem que definido no XD Tá certo então para essa aula é isso eu espero
que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]
