Como Usar Async Storage? | Jancer

fala Mestres beleza no vídeo de hoje nós vamos fazer o uso aqui do async storage que é uma opção aí que nós temos para est fazendo a persistência de dados na nossa aplicação e nessa aula aqui nós vamos instalar e criar alguns exemplos aqui para ver como que é o uso dessa biblioteca Beleza então antes da gente ir pro vídeo gostaria de pedir que você deixe um like se inscreva no canal e também acompanha a gente nas redes sociais os links estarão todos aí na descrição meu nome é Janer eu sou desenvolvedor aqui na mestes

e bora lá para para mais um [Música] conteúdo bom então eu estou aqui na documentação né do ayn storage dentro do Expo Aqui nós temos tudo o que diz respeito à compatibilidade né de plataforma e também para instalar nós usamos esse comando aqui lembrando sempre né de usar o Expo install né no caso aqui npx Expo install para que o Expo instale a versão do compatível com a versão da SDK do Expo que nós estamos usando tá E e a parte de uso nós temos um documentação própria do a Storage tá você pode ver aqui

mais detalhes do uso e da api também e configurações avançadas e uma coisa que eu quero falar aqui é que o a Storage né como o Expo secure Storage que nós vimos em aula na aula passada em alguma aula passada e o Storage também ele vai ser um armazenamento ali de chave valor nós trabalhamos com Chaves e armazenamos alguns valores e esses valores e vão no formato string né então se eu quiser armazenar um objeto eu tenho que transformar aquele objeto em string né usando ali o Jason string f e armazeno a string Quando eu

fizer a leitura Depois eu pego a string e rodo um Jason parse que é para transformar a string em objeto de novo para mim trabalhar na minha aplicação então a gente faz esse a gente tem esse essa mesma ideia do Chave valor igual lá no Expo Security Storage e Aqui nós temos detalhes né do da implementação do a Storage que aqui fala que para o Android né ele usa um skq Lite e nós temos aqui alguns limites que o o limite Total essa essas limitações aqui são referentes ao Android né Eh um armazenamento total de

6is megas e nós podemos aumentar isso aqui caso seja de nosso interesse e o limite para cada item e pode ser até aí 2 megas né então lá no no no exp secur Storage nós tínhamos um limite para cada item de 2 KB Aqui nós já temos um limite para cada item de até 2 m então a gente consegue armazenar bastante formação aqui de um jeito mais tranquilo né com com bastante limite aí para cada item que nós estamos armazenando então esses links das documentações vão ficar aí na descrição e aqui no código eu já

tenho aqui a nossa Nossa aplicação ela já tá rodando eu já instalei o Expo né aqui ó Expo AC Storage certo ele baixou aqui na versão 1.17 a minha stk do Expo é a 48 tá Então nesse meu projeto aqui eu nós estamos trabalhando na tela inicial e basicamente o que eu fiz o exemplo que nós vamos estar trabalhando aqui é igual o exemplo que eu trouxe lá no Expo secure Storage nós temos aqui um text input eu vou escrever algum valor quando eu clicar em enviar né no enviar aqui do próprio teclado que é

no on submit editing né ele vai fazer o vai salvar o item eu vou ter um botão de ler o valor esse botão vai mostrar um alerta aqui na tela e eu vou ter o botão também de apagar valor que quando eu clicar ele vai apagar esse item aí essa chave do meu um aplicativo né então lembrando isso aqui são valores que vão ficar persistidos se eu fechar aplicativo voltar de novo eu vou conseguir recuperar esses dados para tá trabalhando tá então vamos iniciar aqui criando uma chave eu vou criar uma variável que chave uma

variável k que o valor é chave que é o que nós vamos usar para armazenar né E nesse exemplo aqui como ele é extremamente simples eu vou sempre armazenar valores dentro da mesma chave mas num aplicação real nós teríamos Chaves diferentes para valores diferentes que nós iríamos usar aí e na nossa aplicação para armazenar diferentes tipos de valores tá então vou criar aqui já as funções que seria o save item é uma função assíncrona eu vou criar aqui as três que vai ser o save item a outra vai ser o remove né para remover e

outra aqui vai ser o get que é para pegar o item então como eu já instalei eu vou importar aqui ó ayc Storage ele já tá até me sugerindo aqui ó from react Nate ayc storage barra aing Storage que é o pacote que nós instalamos então quando eu salvar Um item eu vou fazer o qu né eu vou receber um valor certo que é uma string e aqui dentro de save item eu vou chamar ACN Storage e aqui dentro nós temos alguns métodos né O que nós vamos usar para salvar é o set item que

eu vou definir Um item e para definir o item Eu preciso da chave daquele it que é a variável q que eu criei e o valor é o valor que eu estou recebendo como parâmetro da minha função tá o set item ele é assíncrono então eu posso aguardar isso aqui ele retorna aqui pra gente ele retorna void né não retorna nada então se der algum erro para salvar o item ele vai lançar uma exceção e para pegar essa exceção nós usamos aqui o TR Cat então eu movo esse código para dentro do try E caso

der algum erro aqui no nosso exemplo eu vou dar só um conso log do erro mas numa aplicação real eu faria um tratamento aí desse erro Caso seja viável mas o no CAT aqui que eu pegaria caso desse algum erro remove item Ou seja eu vou remover vou apagar o item então eu posso chamar né Storage e Aqui nós temos o método remove item onde eu passo a chave né que é a chave do item que eu quero apagar e aqui igualmente no save item esse ele vai retornar void Promise de void também né então

como é assíncrono posso dar um ait botar um triat aqui para caso de algum erro vou fazer um console log desse meu erro aqui certo então por último aqui que é o get item ou seja vou fazer a leitura de Um item e o mesmo exemplo tá a api é muito intuitiva muito simples e a gente pode seguir tudo aqui já intuitivamente que a gente vai conseguir fazer as coisas no caso do get item eu tenho aqui o método get item get item ele precisa de uma chave né que é o item que eu quero

ler chave que indica qual que é aquele item e o segundo parâmetro eu posso passar aqui uma callback que vai ser vai ser executada ess callback quando el faça a leitura do quando ele fizer a leitura dos itens né mas eu eu posso também simplesmente pegar o valor que ele retorna O get item né ele retorna um string ou nulo que é o mesmo valor que eu receberia como parâmetro caso eu passasse aqui uma função callback então eu não vou usar a função callback eu vou pegar o valor aqui na variável ó vou chamar de

response e aqui esse response ele pode ser um string ou nulo né então string vai ser o valor e o valor o valor correto né o valor que eu estou lendo nulo seria se eu tiver apagado o valor daquela chave e ele retornaria para mim nulo então que eu vou verificar né se response é diferente de nulo que que eu vou fazer eu vou fazer um alerta vamos usar aqui um alerta para basicamente mostrar em tela esse esse essa string né que eu estou lendo então eu vou colocar aqui o valor Lido é response no

CAT é o consol log do erro e Aqui nós temos as funções as três funções para fazer para salvar o item remover o item e para fazer a leitura então aqui já na nossa interface vamos passar Essas funções né então quando eu enviar quando eu pressionar aqui salvar o ok né do teclado eu vou disparar o salvamento né então eu vou chamar aqui ó no on submit editing eu vou chamar o save item passando para ele event Native event. text que é o texto que foi digitado dentro do Tex input no botão de ler valor

eu vou simplesmente chamar o get item que é a função que eu criei aqui n get item que ela vai fazer a leitura daquela chave específica e o remove item também da mesma forma no botão apagar valor eu vou chamar aqui remove item e reforçando tá Essas funções elas estão funcionando só com uma chave que é a chave que eu criei mas no ambiente real nós teríamos Chaves diferentes a chave poderia vir como parâmetro né da função pra gente estar fazendo aí um trabalho um pouco mais dinâmico né onde os valores estão sempre mudando Mas

vamos lá né tem eu tenho aqui os botões então aqui a gente já consegue testar eu vou digitar aqui por exemplo 1 do aqui não aqui no app 1 2 3 se eu clico em enviar ele vai simplesmente fechou o teclado eu eu não coloquei nenhum feedback aqui né que salvou com sucesso mas pra gente saber disso eu vou pressionar aqui o ler valor né que o ler valor vai chamar a minha função get item e vai eh printar aqui um alerta caso a caso o valor exista eu posso até colocar aqui um else que

é no caso da do da resposta não existir printando aqui um alerta eh nenhum valor encontrado então digitei lá 1 2 3 clique em ler valor o valor lido é 1 23 beleza que foi o valor que eu digitei que eu pedi para salvar quando eu clicar em apagar ele também não tá dando nenhum feedback no remove mas quando eu ler de novo olha nenhum valor foi encontrado Ou seja eu apaguei né ele retornou aqui nulo nessa segunda nessa segunda vez que eu que eu pressionei o ler valor E aí caiu aqui no wse tá

então eu vou salvar de novo esse valor 1 2 3 e aqui se eu fechar o meu aplicativo né abrir de novo a gente vai ver que esse valor ele vai ser persistido C aí ó já abri a aplicação de novo vou clicar em ler valor eu tenho aqui 1 2 3 então o Storage né o armazenamento foi feito aí foi persistido eu reiniciei a aplicação e o valor se Manteve armazenado aí na memória do dispositivo tá então para dar um exemplo um pouco mais complexo aqui do que seria na verdade eu vou fazer um

exemplo de duas coisas porque aqui a Storage nós temos um método que é o merge né merge item nós temos aqui multi né multiget e multim merge que é basicamente para mim ler mais de um valor ou para mim Eh fazer o merge de mais de um valor ou e o parâmetro ao invés de ser uma chave é uma lista de Chaves então se eu passo uma lista de três chaves para ele buscar ele vai retornar os três itens para mim de uma só vez tá esse esse é a diferença dos dos métodos multi aqui

tá eh mas no nosso caso aqui eu vou dar um exemplo eu vou até criar aqui uma função que é do merge Por que do merge esse M ele vai assumir que o valor que a gente tá armazenando é um Jason é um string Jason e a gente usa isso para objetos né porque para quem não lembra Jason é o JavaScript Object notation né anotação de objeto para JavaScript que a gente consegue transformar ela em texto né em string então se eu tenho aqui um objeto vou chamar aqui de objeto um ele tem uma chave

e tem um valor esse objeto eu posso transformar transformar ele em string Então vou chamar aqui objeto um string vai ser um Jason string F objeto um tá então aqui eu já vol ter uma string que representa esse objeto e o que que eu vou fazer eu vou salvar essa string né esse objeto PR no meu a Storage tá então vou chamar aqui ó a Storage ponto set item a chave desse item eu vou chamar de merge passar aqui a string merge e o valor vai ser objeto string 1 tá Ou seja eu tô salvando

vou dar aqui um a wait para aguardar o salvamento Beleza então aonde é que entra o merge é ele vai ele vai a gente vai usar ele a partir de agora porque o que que acontece eu tenho um item armazenado que ele é um objeto Jason e eu sei qual chave é que é a chave mge essa chave talvez vai ficar confusa eu vou chamar essa chave aqui de objeto um também o bj1 ó a criatividade do garoto é muita né então beleza salvo o item logo após de salvar eu vou dar aqui um eu

vou criar aqui um segundo objeto esse segundo objeto vai ter um name que é o meu nome tá eu vou chamar esse eu vou transformar esse cara em string também vai receber o Jason string F objeto 2 e agora o que que eu vou vou fazer eu vou chamar o a Storage pon merge item ou seja o que que ele vai fazer e a chave aqui né vai ser obj1 e o valor vai ser obj2 string então o que que ele vai fazer ele vai pegar esses dois objetos e vai fazer o merge Vai juntar

os dois em um objeto só então quando eu fizer a leitura dessa chave obj1 ela vai me retornar uma string que representa dois objetos então depois disso aqui depois de fazer o Eu vou recuperar o item it vou chamar de item n vai ter aqui um get item a chave do item que eu quero pegar é bj1 eu vou fazer aqui um alerta um Aler com a mensagem que vai oor o merge é esse esse Alerta vai ficar vai ficar estranho eu acredito é a minha variável item tá então repassando aqui no merge eu salvo

um objeto como string no formato string depois eu vou vou conseguir juntar um outro objeto naquele objeto que já foi salvo desde que eu use a mesma chave né eu tenho que usar a mesma chave para indicar aqueles dois objetos e aqui no final tô fazendo a leitura daquela mesma chave e a gente vai comprovar isso vendo que o valor lido vai ser a junção dos dois objetos o primeiro que eu mandei salvar o segundo eu mandei fazer o MH e o final a gente vai ter isso aí tudo junto tá então esse MH item

eu vou chamar eu vou criar um botão aqui ó eu vou chamar aqui esse método o valor aqui vai ser o o título do botão né vai ser merge então quando eu clicar em merge nós já veremos o alerta dos dois objetos juntos né que é isso aqui ó o valor L após o merge é um objeto né Key value que é o primeiro valor aqui que eu armazenei o segundo é name Janer que é o meu nome então ele juntou os dois em um cara só então a gente pode até fazer aqui além do

alerta um console log do json pass do item Ou seja é que item pode ser nulo né eu tenho que verificar aqui vamos lá se item é diferente de nulo eu vou dar o alerta e vou fazer aqui também o console log aon Pass que o que que é o Jason pass vai fazer Vai transformar a string de volta em um objeto A gente vai ver esse objeto aqui no console tá então clicando aqui de novo em merge eu tenho aqui o mesmo Alerta e no log eu já tenho aqui o meu objeto então aqui

se eu der um item e ponto name não não é aqui não é depois é fora do Jason pass né aqui ó item pon name ele vai fazer o log ali no console quando eu clicar aqui em me de novo somente do meu nome Janer né então ele realmente transformou aquela string em um objeto válido que eu tô extraindo aqui somente um propriedade Beleza então para essa aula aqui vai ser isso eu espero aí que eu tenha ajudado qualquer dúvida pode estar deixando um comentário a logo abaixo e é isso aí muito obrigado e até

a [Música] próxima l