Alura > Cursos de Mobile > Cursos de React Native > Conteúdos de React Native > Primeiras aulas do curso React Native: guardando informações localmente

React Native: guardando informações localmente

Armazenamento com AsyncStorage - Apresentação

Olá, meu nome é Matheus, eu sou instrutor da Alura e vou te acompanhar durante todo o curso React Native: Guardando informações localmente.

Nesse curso, vamos ver qual é a importância de guardar informações localmente, dentro do nosso dispositivo. Também conheceremos as ferramentas para podermos salvar essas informações dentro do dispositivo, que é o AsyncStorage e o SQLite.

Aprenderemos a diferença entre essas duas ferramentas, para o que cada uma delas serve, qual a funcionalidade e em qual situação elas devem ser usadas.

No final desse projeto, você será capaz de montar uma aplicação que guardará informações localmente.

Nosso projeto vai ser um aplicativo para salvar notas. Nessa aplicação, podemos criar uma nova nota, clicando no botão "+" no canto inferior direito, o que abre uma janela flutuante com os campos para preenchermos. Eu vou clicar e escrever "Criar uma nova nota" como título, também podemos escolher a categoria dessa nota, que vou selecionar "Trabalho", e inserir o conteúdo da nota, que eu vou escrever "Conteúdo da nota".

Quando clicamos em "Salvar", no canto inferior esquerdo da janela flutuante, essa nota será guardada no banco de dados, atualizando a lista automaticamente. Podemos também editar uma nota, clicando nela, trocando o título, então vou apagar o título atual e escrever “Trocar o título”, trocando a categoria dela, então vou clicar na categoria e selecionar "Outros", e até mesmo o conteúdo, então vou apagar o conteúdo e escrever "Outro conteúdo", depois vou clicar em "Salvar".

Também é possível apagar uma nota. Então clicamos em uma nota que já existe, nós podemos deletá-la do banco de dados, clicando no botão "Deletar", localizado no centro inferior da janela flutuante, aberta quando clicamos na nota. Tudo isso atualizando automaticamente, em tempo real, a lista.

Então, nesse curso, você terá vários exercícios, para poder treinar e guardar tudo que foi visto dentro do curso, e um desafio no final para exercitar um pouco tudo que foi visto durante o curso.

Nele você poderá expressar sua criatividade e, quem sabe, explorar um novo mundo dentro do React Native.

Meu nome é Matheus, vejo você no próximo vídeo.

Armazenamento com AsyncStorage - Instalando o projeto

Logo após você ter baixado o ZIP e encontrado os arquivos do projeto, antes de começarmos realmente a rodar o projeto, precisamos instalar algumas coisas.

Vou abrir o Terminal no meu Visual Studio Code e vou rodar o comando npm install, porque precisamos instalar todas as dependências que o projeto precisa antes de conseguirmos inicializar o projeto.

Enquanto ele vai instalando as coisas do Node, eu quero apresentar um pouco como o projeto já está. Temos três arquivos principais. O “App.js”, que já foi editado e já importa alguns componentes, que vou apresentar mais tarde. Ele está bem simples, tem só um SafeAreaView, tem o nosso componente novo, que é o NotaEditor, e um StatusBar.

Dentro da raiz do projeto, temos uma pasta chamada source, ou "src". Dentro dessa pasta, tem outra pasta chamada "components", onde temos dois componentes: o "Nota.js" e o "NotaEditor.js".

O “Nota.js” vai ser a nossa representação do que é uma nota. Dentro do arquivo tem todas as estilizações e toda a estrutura do componente, que é uma View com texto dentro.

Ele também tem uma estilização um pouco mais adaptada, que vai ser bem importante para nós no futuro. Outro componente é o “NotaEditor.js” em que vamos usar um componente novo, que não foi visto ainda, que é o Modal.

O Modal é um componente do próprio React Native, e ele vai servir para subir uma caixa na parte de baixo do meu dispositivo. Vou até mostrar para vocês.

Já terminou de instalar todo o meu Node. Vou inicializar o processo, escrevendo npm start, e esperar ele inicializar.

O Expo abriu e vou abrir agora o emulador de Android. Depois do projeto já buildado, eu vou mostrar como funcionam os componentes. O componente Nota não vamos conseguir visualizar ainda, mas a estrutura, como você pôde ver, é bem simples.

A modal aparece quando apertamos o botão verde com o sinal de “+” no canto inferior direito. Apertando esse botão, ele vai subir a nossa modal. Então, a modal é, simplesmente, esse encapsulamento, como se fosse um componente, ou uma view, para poder mostrar uma modal que vai subir e descer.

Voltando para o VSCode, notamos que a estrutura também é tranquila. Tem o encapsulamento da Modal, tem a View em que ficam todas as informações do título da Modal, e o TextInput, em que vamos realmente adicionar uma nota.

Voltando para o celular, notamos o componente de teste para podermos ver o título da nota e assim por diante. Além disso, temos dois botões na modal: o botão de “Salvar”, que por enquanto não faz nada, e o botão de “Cancelar”, que a única função, por enquanto, fechando essa modal.

Com tudo isso pronto, já a aplicação rodando no nosso emulador, já apresentado todo o projeto, podemos começar a desenvolver.

Armazenamento com AsyncStorage - Por que salvar localmente?

Depois de termos configurado o nosso ambiente e preparado o nosso projeto, nosso próximo passo será entender por que precisamos guardar informações localmente.

No mundo em que tudo é online, nós nos perguntamos porque precisamos guardar informações no nosso celular. Vamos pensar em um aplicativo mensageiro, como, por exemplo, o WhatsApp, o Telegram, entre outros.

Nas mensagens, podemos ter vídeos, áudios, além de texto. Agora imaginem que, toda vez que fôssemos abrir o aplicativo, tivéssemos que baixar todas as imagens, todos os vídeos, todos os áudios, além das mensagens do servidor.

Imaginem, mil mensagens, mil vídeos, mil fotos, todos eles tendo que ser baixados a partir do momento que o aplicativo é aberto. Iria ser tão custoso tanto para o aplicativo quanto para o servidor que cuidaria das informações, porque teria que baixar todas as informações de uma vez.

Isso é custoso também por conta da internet. Imagina, uma pessoa com internet móvel, com um pacote que não é muito grande. Ela abriria o aplicativo e acabaria a internet, por exemplo, ou a internet móvel é tão lenta que ela não conseguiria baixar as informações, as imagens, os vídeos e afins.

Então, o ideal seria que essas informações já ficassem salvas no dispositivo e, quando fosse carregar as mensagens, a atualização seria apenas das novas mensagens que aparecem no dispositivo.

Novamente, elas ficam salvas dentro do dispositivo e, quando for abrir o aplicativo, ele só carrega do próprio celular, e não baixando diretamente do servidor.

Quais são as nossas opções, então, para guardar essas informações? As principais no React Native são duas: o AsyncStorage e o SQLite.

O que é cada uma delas? Vou abrir a documentação do AsyncStorage. Na verdade, o AsyncStorage é nativo do próprio React Native, só que ele foi descontinuado, ou seja, o React Native não dá mais suporte para essa ferramenta nativa deles.

Porém, logo no começo da documentação, eles recomendam baixarmos alguns pacotes da comunidade. Clicando no link do "community packages" que eles nos dão, temos um diretório com várias outras bibliotecas que cuidam do AsyncStorage, do mesmo jeito que o Nativo cuidava.

O legal desse site também é que ele oferece várias outras opções para nós, não só a do AsyncStorage necessariamente. Além disso, ele tem uma nota para qualquer pacote dessa biblioteca da comunidade, informando quando ela foi atualizada a última vez, quantos downloads mensais e outras informações bem interessantes.

O que vamos usar vai ser o “react-native-async-storage-/async-storage”. Esse é o principal. Clicando no link deste pacote, vamos abrir o GitHub e, descendo toda a página do GitHub, ele apresenta uma documentação para nós, na seção "Getting Started".

Clicando no link da documentação, ele já dá os passos da instalação. Se clicarmos na “Home”, ou seja, no símbolo do "AsyncStorage", no canto superior esquerdo, ele dá uma pequena descrição do que é o AsyncStorage.

A ideia do AsyncStorage é persistir dados e informações na nossa aplicação. Outra vantagem dele é ser multiplataforma, ou seja, ele funciona tanto para Android, quanto para IOS, Web e os sistemas operacionais Windows e MacOS.

Outra coisa legal é que ele é uma API com algumas funcionalidades mais simples. Para podermos entender o que é esse mais simples, precisamos entender como ele guarda as informações.

O AsyncStorage guarda informação no seguinte sentido: ele guarda uma chave e um valor dentro de um array. Essa chave e valor é bem parecido com um objeto JSON, só que ao invés de guardar uma chave como, por exemplo, um inteiro, ele guarda apenas strings como chave e valor.

Ele não aceita nenhum outro tipo de informação a não ser strings, ou seja, textos. Então, a identificação pode ser, por exemplo, um número como string. Até mesmo uma letra ou uma palavra pode ser um identificador para aquele valor. O valor tem que ser string, como, por exemplo, o conteúdo de um lembrete de uma nota.

Como funciona o SQLite? Vamos ver a documentação dele. O que vamos usar é a versão do Expo, dado que estamos trabalhando com o Expo aqui.

O SQLite já é um pouco mais robusto que o AsyncStorage, porque o AsyncStorage só consegue guardar strings, e o SQLite já consegue ter uma abrangência maior de relacionamentos.

Conseguimos ter relacionamentos entre elementos, objetos, conseguimos guardar outros tipos de informações além de strings, como imagens, áudios, vídeos. Tudo isso também consegue ser guardado dentro do SQLite.

Essas são as principais diferenças entre eles. E qual deles vamos usar para essa aplicação? Vou voltar para a tela do simulador e percebemos que, neste momento, a nossa aplicação só guarda um lembrete com um texto.

Tela do aplicativo aberta no emulador com a opção de criar nota aberta na parte inferior na janela. Nela há o título com "Criar nota" em letras pretas, a descrição com "Conteúdo da nota" em letras pretas, um campo escrito "Digite aqui seu lembrete" em letras cinza-claro, o botão retangular verde claro escrito "Salvar", localizado no canto inferior esquerdo, e o botão retangular azul claro escrito "Cancelar", no canto inferior direito.

Então só vamos guardar o conteúdo textual do lembrete. Já que só vamos trabalhar com texto, podemos usar o AsyncStorage, já que ele é feito para guardar conteúdos mais simples desse tipo.

Vamos aprender, então, como conseguiremos implementar o AsyncStorage. Vejo você no próximo vídeo.

Sobre o curso React Native: guardando informações localmente

O curso React Native: guardando informações localmente possui 112 minutos de vídeos, em um total de 34 atividades. Gostou? Conheça nossos outros cursos de React Native em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda React Native acessando integralmente esse e outros cursos, comece hoje!

Plus

De
R$ 1.800
12X
R$109
à vista R$1.308
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

Matricule-se

Pro

De
R$ 2.400
12X
R$149
à vista R$1.788
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Luri powered by ChatGPT

    Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas