Au 15 - Mobile - React Native - Finalizando o projeto e sugestões - Mestres BEGIN

[Música] fala pessoal Janer aqui o vídeo de hoje é o vídeo de finalização tá a gente vai est finalizando esse curso por aqui e aula passada a gente fez bastante coisa ainda tem algumas coisas para fazer né se você lembra direitinho lá do XD É tem algumas telas a mais para ser criadas algumas funcionalidades a mais só que o curso vai ser finalizado agora porque é muito vai ser essa parte final né vai ser muito do mesmo né muito do que a gente já fez Então essa ideia de do fluxo das coisas quando a gente

pensa em uma funcionalidade como um evento né uma propriedade a gente tem aquele pensamento como evento que dando exemplo aqui né seria lá quando a gente vai apagar alguma coisa a gente pensa no evento on delete ou on delete press né quando pressionar o botão delete Então essa ideia que a gente usa esse padrão que a gente usa usando o callback é a forma que o react eh indica pra gente lá na documentação deles né de est enviando propriedades e realizando ações só que quando a coisa vai ficando mais complexa a gente tende a ir

tomar outras soluções tá fazer tomar abordagens diferentes para resolver esse problema então eu tenho aqui na verdade eu tô aqui com ex diab né que é o o o planejamento aqui da nossa aplicação né o que nós fizemos que seria a tela inicial né onde a gente mostra noos produtos a funcionalidade de produtos excluídos como a gente não tem esse end Point no backend eh a gente pode deixar na verdade eu vou deixar aqui alguns desafios tá que seria exercícios né do que a gente aprendeu para ser eh implementado aqui nesse mesmo projeto tá então

essa parte de produtos excluídos Seria o tipo de coisa que ficaria armazenado só na aplicação porque o banco de dados não suporta isso né então seria uma funcionalidade interessante de se fazer eh a própria funcionalidade de delete eu vou est falando sobre ela aqui né para conseguir apagar Um item e juntaria né faria o combo aqui com a exibição desses produtos que foram excluídos nessa aba aqui né quando a gente pressiona nesse botão eh tem também a a a questão de editar um produto né editar ali uns valores que é a ideia o fluxo normalmente

repetindo é o mesmo do que a gente exercitou na aula passada mas a gente não vai estar exercitando isso para não ficar aquela coisa muito repetitiva por mais que seria interessante mas isso aqui é um mini curso né ele já ficou bem grandinho aí para ser um mini curso tá então a gente vai estar finalizando por aqui e voltando aqui no código né Vamos falar aqui um pouco sobre a questão de deletar né de apagar Um item porque se a gente prestar atenção aqui é eu tenho uma função que eu chamei de get data que

é a função que busca dados no backend né então eu poderia criar aqui uma função delete item que essa função ela é uma função assíncrona né só que ela recebe um parâmetro que é o ID n o ID ali que no nosso caso é um string que é o identificador do item que eu quero apagar E por que que eu preciso desse identificador porque lá no backend né que Leandro criou nós temos um um endp para fazer deleções então se eu chamar aqui o exus né o Api P delete ou seja nós vamos mandar uma

uma requisição do tipo delete né para fazer ali o a a deleção de Um item eu vou mandar essa requisição no endp Barra product né E lá o endp ele espera que eu mande quando quando eu mandar uma solicitação do tipo delete no endp bar product ele vai olhar ele vai buscar pelo id do usuário que vai estar concatenado nessa string do endp tá então eu acessar euia a requisição né http 2 p bar Barra loc 2. 3000 né E aí barra product ou seja Point product barra o ID do usuário que seria por exemplo

1 2 3 tá E aí se eu mando essa requisição ele vai buscar lá no banco de dados pelo usuário 1 2 3 e apagar tá então para fazer essa concatenação né do id que vem como parâmetro nessa string eu tô usando aqui o template string né a gente passa aspas aqui e aqui eu passo cifrão e Chaves né e coloca a variável ID aqui dentro então seria vai ser concatenado né esse ID no meu endp e aí eu vou fazer a requisição pro backend que vai apagar esse nosso item tá então outra coisa né

além de além disso aqui né a gente tem que dar um await aqui para aguardar né que essa essa solicitação finalize e né para tratar erros caso a gente Tente apagar e não consiga a gente pode colocar aqui um triat né move essa solicitação aqui do aight para dentro do do triat E aí Se tiver sucesso Se eu conseguir apagar eu vou ter aqui por exemplo um eu vou remover né do meu data aqui do dos dados que eu estou exibindo na tela o produto que eu apaguei né então eu vou deixar até comentado aqui

senão eu vou acabar fazendo o o desafio aí de vocês né remove eh item from local deira tá que seria remover o item que foi apagado e que se der um Cat se der erro eu dou só um conso log desse meu erro Tá mas a ideia de deleção seria essa e essa função delete item ela seria executada quando né quando eu pressionar o item de delete né a lixeirinha aqui que nós colocamos na aula passada foi na aula passada não né foi na aula retrasada nós colocamos aqui a lixeirinha para para apagar e essa

lixeira ela ficou dentro do tá aqui dentro de Ed product form né que não tá no formulário não tá na lista né vamos voltar aqui na lista de produtos eu tenho aqui uma linha né E tá aqui o delete icon Então esse delete icon a gente pode colocar ele né em volta de um table opit para ele ficar com a funcionalidade de um botão né ter ali a animação de um botão e no onepress né Ou seja quando eu pressionar essa esse meu touch B page essa lixeira né ele vai executar aquela função delite e

aí a ideia de dessa função né como que eu vou en Essa função para lá é via parâmetro da mesma forma que nós fizemos na aula passada né executando com essa ideia aí de callbacks pensando em eventos tá então o delete seria tratado dessa mesma forma a mesma forma que nós fizemos com o oou adicionar né a gente faria também com o delete tá e dito isso se a gente olha aqui no XD o processo de deleção ele não é tão simples né porque não é só apertar aqui no lixeirinha que ele vai apagar Nós

temos dois passos aqui intermediários que seria a confirmação da deleção né ou seja vai vir aqui essa componente perguntando se eu tenho certeza que eu quero apagar esse produto e aí se eu eu clicar aqui em excluir produto ele vai me dar aqui um modal de confirmação né um feedback então esses dois estados né a gente a gente concorda que esses dois passos são estados Diferentes né tem o momento que eu clico no botão de apagar quando eu clico eu mudo o estado agora no no o o Estado desse desse processo desse fluxo de deleção

seria o estado de confirmação Ah eu vou aguardar pela confirmação do do do do usuário se ele confirmar nós vamos pro próximo passo que é realmente apagar o item do backend e mostrar aqui a confirmação então todo esse fluxo e e depois disso né filtrar os dados da lista tá e todo todo esse fluxo a gente pode armazenar en capsular isso em um único US state tá então se a gente volta aqui na tela de produto eu até criei aqui né um US state eu chamei de delete pro Flow settings e set delete product Flow

setting Ou seja a gente vai ter um fluxo de deleção e esse objeto aqui esse state vai armazenar as configurações e as configurações desse fluxo né E quando a gente estava adicionando um produto a gente tem um US state que é um boleano que é true ou falso que é basicamente mostra o formulário de adição remove o formulário de adição da tela e no deleção eu vou ter dois status né que é o status de get confirmation que seria para mostrar o modal de confirmação e o status o show feedback né que seria para mostrar

o modal lá dando feedback falando ok nós conseguimos apagar o item que foi requisitado né E outra propriedade que tem aqui é o ID do item porque lá na nossa lista ó vou fazer o seguinte quando eu pressionar aqui no delete Icon no onepress eu vou dar aqui dentro um conso log no ponto ID tá no ID desse item eh sempre que eu pressiono Vamos abrir aqui o log sempre que eu pressionar na lixeira né de cada item Ou seja eu vou pressionar aqui no na lixeirinha do teclado né ele vai printar para mim um

ID ol lá finaliza com 3fc se eu pressiono o delete do segundo item olha lá ó 399b do outro 39d então cada item tem um ID diferente né E aí quando eu pressionar esse deletar como tem Passos intermediários eu seto nesse state o o ID do item que eu estou tentando apagar para quando chegar quando eu der o confirmation falar não ok apaga esse item né nesse passo aqui ó né do confirmação quando eu clicar em excluir produto eu tenho armazenado no meu US state Qual o ID desse item que eu quero apagar e eu

não vou precisar ficar mandando de parâmetro de um passo pro outro porque senão vai ficando mais complexo tá então esse seria um exemplo de complexidade que nós teríamos é de um fluxo um pouco mais complexo de comunicação entre componentes né E para resolver esses problemas nós temos algumas na verdade as duas Nós temos duas aí eh na verdade temos mais né mas nós vamos falar aqui de duas formas de solucionar ou de melhorar esse esse problema e esse essa complexidade da comunicação entre componentes Então vamos abrir aqui o navegador tá e já já tinha até

pesquisado aqui eu pesquisei aqui o sobre o context né no react aqui ele vai abrir a própria documentação do react Onde fala sobre esse context que é uma API do react que ajuda a gente a tratar esse tipo de coisa que é basicamente nós nós vamos criar um contexto externo ou seja é como se fosse quando a gente cria um US state lá na componente na tela de produto e manda os valores dele via propriedade só que a ideia do contexto ela é mais generalista porque o contexto É como se eu criasse um um contêiner

um objeto externo e todas as componentes que estão dentro deste contexto tem acesso a esse mesmo objeto então é como se fosse um single Então como se fosse um um um objeto Global Global entre aspas tá porque só as componentes filhas que tem acesso a esse context mas por padrão a gente coloca o contexto lá na raiz da aplicação então se eu venho aqui no vs code eu eu se eu fosse criar um contexto aqui para tratar essa questão dos produtos eu criaria esse contexto e colocaria ele aqui na minha função app né que é

na raiz do projeto ou seja tudo que tiver dentro de routes ou seja todas as minhas compon ent todas as minhas telas terão acesso a esse contexto terão acesso a esse objeto e e claro que tem casos onde a gente cria um contexto local um contexto mais um escopo mais fechado mais específico mas a ideia de contexto é exatamente essa é da gente não ter que ficar enviando coisas via propriedade e s eu armazeno no contexto e na componente que eu quero usar eu faço a leitura daquele contexto tá então fica bem simples e na

verdade simplifica muito né e facilita bastante porque quando começa a aumentar a complexidade é como vocês viram aqui na parte de deletar um produto eh já começa a ficar mais confuso fica mais complexo fica mais difícil de mexer e de até de dar manutenção tá então nós temos o contexto que faz esse trabalho e temos também o Redux né abrindo aqui a ap do Redux eh o Redux é também uma ideia de contêiner só que ele é um pouco api um pouco diferente do context alguns preferem o context outros preferem o Redux tem os pros

tem contras mas eu acho que aqui não é o momento de tá falando sobre isso mas o Redux também é uma é uma solução se eu não me engano ela é até mais popular do que o próprio contexto do react que eu acredito que ela é mais antiga até mas é uma API também muito interessante Eu particularmente eu prefiro usar o Redux nas aplicações que eu trabalho na verdade e a gente acaba usando dos dois né do um pouco de rux um pouco de context Mas é claro que tudo Depende tudo eh vai depender ali

do que a gente tá querendo fazer tá então eu vou deixar aí essas duas essas duas sugestões de estudos tá dentro do react né até dentro do próprio react Native eh nós temos é muito muita documentação tá muita coisa para ser estudado para ser descoberto Então vai ter aí tem tem muita coisa né e de react react Native Eu recomendo que Você estude né porque o react é basicamente o react adaptado pro nativo né pro mobile Então é bom é muito bom saber bastante de react para trabalhando com react e aqui dentro do site do

react nós temos também uma documentação muito interessante tem muita coisa aqui muita informação muita coisa interessante e muita componente né Se a gente for olhar aqui por exemplo na questão de ele fala né tem aqui aba de formas e fala de design que seria as ideias ali de de estilização tá como que a gente faz isso workflow que é o fluxo de trabalho né como que a gente trabalha ali com com react Native e como que a gente faz a questão do debug Fast refresh teste né trabalhando com teste aqui a parte de typescript a

gente já tá usando né então tem muita coisa aqui pra gente tá explorando né tá entendendo melhor e enfim né vai ficar aí de recomendação pra gente e tá entendendo Tá estudando mais e aprofundando mais né aqui no na própria documentação do react n a gente pode explorar aqui essa parte de components né que é onde ele fala das componentes nativas tá então todas as as componentes que algumas componentes nós usamos na lá né que seria o botão a flatlist eh o modal né a parte aqui do text input também View enfim tá tudo documentado

aqui com todos os parâmetros tudo que ele recebe então É bem interessante a gente dar uma olhada aqui porque tem muito exemplo e muita coisa para ser aprendido Tá certo então eu vou finalizar a aula por aqui tá eh é basicamente isso o curso vai finalizar por aqui mas tem mais coisa né para ser desenvolvida para ser melhorada para ser aprendida Tá certo então para essa aula é isso para esse curso né é isso eu espero que eu tenha ajudado qualquer dúvida pode deixar um comentário logo abaixo e é isso aí muito obrigado e até

a próxima i [Música]