Alura > Cursos de Mobile > Cursos de React Native > Conteúdos de React Native > Primeiras aulas do curso React Native: armazenando dados no Firestore

React Native: armazenando dados no Firestore

Entendendo o Firebase Firestore - Apresentação

Olá, seja muito bem-vindo e muito bem-vinda a mais um curso de React Native da Alura. Eu me chamo André Cunha, sou instrutor e nesse curso vamos aprender a utilizar o Firestore. Um banco de dados online oferecido pelo Firebase.

Ao longo do curso vamos passar pela documentação, aprendendo a criar um projeto no Firebase, criando no console, vendo também diversos recursos que conseguimos aplicar do Firestore no nosso projeto de forma básica. Vamos aplicar o CRUD completo, vamos conseguir criar um novo produto, editar, listar o produto e até excluir um produto.

Vamos também aprender a usar recursos do React Native, como, por exemplo, na tela principal atualizar a lista de produtos arrastando de cima para baixo. Vamos também modificar o nosso projeto que foi utilizado no curso anterior sobre autenticação com o Firebase, agora ele se chama ModSport, e tem uma nova tela, nessa tela podemos cadastrar um novo produto. Tem um campo “nome”, podemos inserir o nome do produto, e um campo “Preço”, adicionando o preço do produto.

Vamos também aprender a utilizar um novo recurso que o Firestore oferece para poder atualizar os produtos em tempo real. Então, vamos aprender a diferença entre uma requisição HTTP e uma requisição WebSocket. Então, com a requisição WebSocket vamos conseguir ver toda a nossa modificação sendo exibida em aplicativos com o Firestore. Ao editar o preço do produto, vamos conseguir ver essa modificação sendo refletida na tela principal, ou excluindo um produto, também sendo exibido na tela principal, isso em tempo real, sem precisarmos listar os produtos novamente manualmente.

Espero que você tenha se interessado e venha fazer parte comigo dessa jornada. Até lá.

Entendendo o Firebase Firestore - Introdução ao Firebase Firestore

Nesse curso abordaremos muito o conceito do Firestore, que é um dos produtos que o Firebase nos oferece. Então, antes de partirmos para a implementação do código, colocar a mão na massa e já começar a implementar, vamos ver melhor o que temos de recursos que esse produto do Firebase oferece.

Então, estou na página oficial do Firebase, em que estamos na seção do Firestore, e ele fala que podemos armazenar e sincronizar dados do nosso app em escala global. Só que só isso não é o suficiente, seria melhor conseguirmos ver realmente os recursos que conseguimos ter acesso com o Firestore. Então, vamos clicar em “Ver documentação”, que é uma página que vamos utilizar muito ao longo do nosso desenvolvimento, e ele já fala que o Firestore é um banco de dados em nuvem NoSQL.

Atualmente as empresas utilizam dois tipos de banco de dados, claro, podem ter outros, mas os mais famosos são o SQL e o NoSQL. Então, não é o objetivo desse curso explicar qual é a diferença entre os dois, o que cada um consegue fazer, e sim que você entenda que conseguimos armazenar dados neles. Esses dados podem ser nome de pessoas, nome de produtos, preços e por aí vai, o que o seu aplicativo estiver fazendo, e só para entender um pouco melhor a diferença, por que usar um NoSQL, por que usar um SQL, vamos ver uma imagem para fazer algumas associações.

Um banco de dados SQL, podemos imaginar como se fossem várias tabelas, então, podemos imaginar uma planilha de Excel, por exemplo, e na planilha temos as colunas, e uma coluna é do nome do produto, a outro coluna é do preço do produto, da quantidade do produto e por aí vai.

E essas tabelas se relacionam, então, você pode falar que o usuário André tem o produto X, e assim por diante, então, você consegue fazer uma associação nas tabelas. Então, você começa a trabalhar muito com linhas e colunas, e também adicionando dados que conseguimos adicionar na tabela. Então, por exemplo, se a tabela de usuários falar que só conseguimos armazenar informação de nome, CPF e telefone, se algum usuário no meio do caminho quiser colocar também o nome da mãe dele, você vai ter que criar uma nova tabela, com uma nova coluna.

Já no NoSQL, não trabalhamos com tabelas, e sim com documentos. Então, é muito mais flexível, conseguimos adicionar informação de um usuário específico, consegue retirar uma informação. Então, por exemplo, se todos os usuários têm nome, CPF e telefone, mas em um usuário específico você quer adicionar também a idade dele, então, conseguimos fazer isso de uma forma muito mais rápida e flexível. Sem falar que é mais tranquilo iniciarmos uma aplicação com NoSQL, no caso do Firestore.

Então, ele fala que conseguimos ter uma flexibilidade maior. E como eu acabei de falar, vamos trabalhar com documentos e ele vai estar organizado em coleções, mas vamos ver com calma ao longo do curso o que são essas coleções, como elas funcionam, como conseguimos criar ou até pegar, ler uma coleção específica.

Então, dentro dos principais recursos que o Firestore oferece, também temos a parte de consultas expressivas. Então, conseguimos buscar informações no nosso banco de dados, como por exemplo, pedir para que ele mostre todos os produtos com preço menor que 10 reais. Então, com Firestore, usando algumas funções que ele oferece, retornar apenas os produtos com preço menor que 10 reais.

Só que essa parte de consultas não vamos abordar nesse curso, mas é só para você ficar ciente que existe. Vamos focar mais na parte do CRUD, ou seja, criar uma informação, ler, editar e até apagá-la. Também temos um outro recurso, que é a atualização em tempo real, então, isso é bem legal, porque é uma forma de sincronizarmos todas as nossas informações, então, se eu edito os dados de um produto, todos os usuários que estão vendo aquele produto vão ver essa atualização em tempo real.

Basicamente, na hora que eu salvar a edição, isso vai sincronizar com todas as telas da aplicação. Também temos o suporte offline, que o Firestore oferece. Então, supondo que você está em uma região que não tenha acesso a internet, ou a internet está muito lenta, então, o Firestore oferece funcionalidades offline, em que você consegue ver os produtos que já tinham sido carregados anteriormente, até fazer algumas modificações. E quando você sincronizar com a internet, ele faz essa sincronização. Então, tem todo esse suporte.

Mas esse recurso específico não vamos também abordar aqui, vamos focar apenas no CRUD. E ele fala também que ele já está projetado para a escala. Então, se eu iniciar a minha aplicação fazendo testes, eu, o único usuário do meu aplicativo, agora ele está 100%, eu já quero publicá-lo na loja, eu posso já utilizar o Firestore, que ele já vai estar acessível para escalas maiores. Então, se do dia para a noite surgir um milhão de usuários, o Firestore vai conseguir lidar com todos os acessos ao meu banco de dados, já que ele já tem todo esse suporte. Mas claro, tudo tem um preço.

Então, vamos olhar na aba “Preço”, porque nem tudo é de graça no Firestore. Então, indo mais na parte do CloudFirestore, que é o que vamos utilizar nesse curso, temos a tabela do meio, que fala os serviços gratuitos que conseguimos ter com o Firestore. Temos um total de 1 giga para armazenar informações, textos do produto, o preço. Conseguimos também ter uma saída da rede, cerca de 10 gigas de arquivo, então, conseguimos ter envios de informação, leitura de informação num total de 10 gigas.

E também, conseguimos fazer cerca de 20 mil gravações por dia e 50 mil leituras por dia. Então, esse é o plano gratuito. Caso você ultrapasse o plano gratuito, ou seja, vamos supor que você aumentou, teve uma escala de 1 milhão de usuários, então, provavelmente você vai passar essas 20 mil leituras por dia. Então, temos a coluna da direita, que mostra o plano pago, então, a cada 1 giga a mais que você consumir, você vai pagar um total de 0,108 dólares para cada giga.

Você também consegue calcular o preço no próprio Firestore, no Firebase, o quanto você vai gastar se tiver mais leituras ou escritas, então, fique ciente que para um produto inicial, Firestore é muito bom, mas dependendo do quão grande a sua aplicação vai ficar, pode ser interessante procurar outros serviços.

Então, dito isso, já estamos um pouco mais cientes do que o Firestore nos oferece, e nos próprios vídeos vamos começar a criar o nosso banco de dados e implementar no nosso projeto. Até lá.

Entendendo o Firebase Firestore - Criando o banco de dados

Agora que entendemos um pouco melhor sobre o Firestore, vamos criar o nosso banco de dados? Então, a primeira coisa que vamos fazer é acessar o console do nosso Firebase. Então, indo para console, já vamos abrindo o projeto, e como o nosso projeto tem a mesma estrutura do projeto do curso anterior, em que mexíamos com authentication, apenas modificamos o nome para “MobSport”, já que vamos conseguir adicionar mais informações, vamos realmente criar a lista de produtos no nosso aplicativo.

Antes, só víamos alguns produtos que já estavam lá, mas agora vamos realmente criar os nossos produtos. Mas ele tem a mesma configuração do que fizemos no curso de authentication, apenas mudamos o nome do nosso aplicativo. Então, já temos os serviços de autenticação configurados no nosso projeto, e vamos no menu da lateral esquerda, na parte de “Criação”, e vamos escolher “Firestore database”.

Vejam que existe um Realtime Database, que é um outro banco de dados que o Firebase também oferece, ele é mais focado em realtime mesmo, em tempo real. Então, ele é muito utilizado para chats, ou coisas que precisam de uma atualização muito rápida de informação, mas não é o objetivo do nosso curso, então, vamos utilizar o Firestore, que é um banco de dados NoSQL, como nós vimos.

Então, na seção do Firestore, temos a opção “Criar banco de dados”, então, vamos clicar nela, e ele te dá duas opções, você tem o modo de produção e tem o modo teste. Como vamos testar a nossa aplicação, não é algo que vamos desenvolver e colocar como um serviço para utilizar no mundo, é só para teste durante a aula, eu vou ativar o modo teste. E qual é a diferença entre um e outro?

O modo produção, basicamente te restringe o que você consegue ter de acesso nos seus dados. Então, você tem que deixar bem claro na regra de negócio dele, claro que na configuração vamos ver, mas você deixa bem claro quem pode criar um produto, ou quem pode editar o produto.

Como queremos que qualquer aplicativo nosso que está usando esse Firebase,consiga fazer a criação, edição, deletar um produto, então, vamos utilizar o modo de teste, que tudo vai estar liberado. Não vamos nos preocupar em ver como essa parte das requisições, autenticação e configurar só o usuário X, que pode editar. Vamos deixar qualquer usuário logado no aplicativo consiga fazer isso.

Então, vou iniciar o modo teste. Ele fala que após 30 dias vamos precisar atualizar o nosso banco de dados, porque ele está no modo teste. Basicamente, é adicionar essa permissão para termos mais 30 dias de utilização de modo teste. Vou clicar em avançar, ele vai pedir para você escolher o local do seu Firestore. Então, tem várias regiões no mundo que o Google tem seus computadores que armazenam esses dados espalhados, e vamos focar em uma região mais próxima de onde moramos, então, podemos escolher Europa, América do Norte, vamos ver se tem algo mais próximo.

Vamos escolher a América do Sul, e uma vez escolhido, não podemos modificar a região em que vamos armazenar as nossas informações. Vou clicar em “Ativar” e agora, ele pode demorar um pouco para começar a criar o nosso banco de dados, então, vamos aguardar.

Agora que ele finalizou a criação do nosso banco de dados, ele já nos mostra meio que uma tabela vazia. Na verdade, não é uma tabela, como vimos, é um banco de dados NoSQL, então, vamos trabalhar com documentos. Então, está tudo vazio por enquanto, porque não tem nada salvo nele, e temos alguns menus na parte superior, temos “Dados”, temos “Regras”, “Índice” e “Uso”. Então, se clicarmos em “Regras”, vamos ver aquilo que eu comentei, estamos no modo de teste e não modo de produção, então, estamos permitindo para leitura e escrita, tudo está liberado até o tempo da nossa aplicação seja menor do que dia 28/10. Hoje é 28/09, então, temos um mês para poder utilizar o nosso banco de dados.

Também temos a parte do “Uso”, conseguimos ver quantas leituras, quantas gravação fizemos com a nossa aplicação, por enquanto nenhuma. E “Dados” é onde realmente as nossas informações estarão armazenadas. E como vimos na própria documentação, vamos trabalhar com collections, ou seja, com coleções. As coleções, nada mais são do que indicar uma determinada funcionalidade ou um determinado serviço do nosso aplicativo.

Então, podemos ter uma coleção de produtos. Então, vamos colocar “produtos”, que são os produtos que vamos salvar no nosso aplicativo “MobSport”. Então, vou clicar em “Próximo”, e ele vai pedir algumas informações. Por exemplo, todo documento no banco de dados NoSQL precisa ter um identificador. Por exemplo, para podermos conseguir fazer uma busca ou até poder editar e deletar esse documento.

Então, o que chamamos de ID do documento seria o identificador para podermos achar. Então, podemos colocar “Produto X”, por exemplo, nós mesmos podemos escrever. Mas o ideal é gerar um código automático, porque, por exemplo, você não pode ter dois produtos, ou seja, duas coleções, com o mesmo ID, senão daria conflito na hora de buscar, qual ele encontraria? Tem que ter números ou informações diferentes.

Então, quando fazemos ele gerar automaticamente, ele vai criar uma string um pouco estranha, aleatória, e isso garante que toda a nossa coleção vai ter um identificador único. E estamos criando um documento da coleção, estamos criando um produto. Então, vamos colocar os campos, vou colocar o “Nome”, podemos escolher o tipo, vamos deixar tipo string, e podemos colocar “Camisa”.

Se olharmos os tipos, por exemplo, conseguimos ver que o Firestore consegue oferecer alguns tipos para salvarmos, o tipo “number”, “boolean”, ou seja, true e false, “map”, “array”, e “timestamp”, que é o tempo de criação do produto. Então, vamos escolher o tipo “String”, podemos ter outra informação, como por exemplo o preço. E podemos colocar o preço como se fosse um “number”, então, vamos colocar 120,90.

Vou salvar, e quando salvarmos tudo, vamos ver que algumas coisas aconteceram. Então, ele criou uma coleção “Produto”, e dentro do produto ele criou um documento contendo um produto e esse produto tem um ID único que geramos. E podemos, por exemplo, criar um outro produto. Então, vamos gerar um novo código, vamos colocar os mesmos campos, então, vou colocar “Nome”, vou colocar “Bermuda”, vamos colocar também o preço, e vamos colocar como “Number”, e vamos colocar que essa bermuda custa 70 reais.

Vou salvar, e agora temos dois documentos dentro de uma coleção chamada “Produtos”. E também poderíamos criar outras coleções, como por exemplo, vamos criar coleções “Usuários”, em que podemos ter os dados do nosso usuário. Então, assim que funciona o nosso banco de dados no Firebase. E como podemos ver, temos acesso no console a essas informações, em que podemos editar o nome, por exemplo, então, clicamos e podemos colocar “BermudaX”, vou atualizar e essa informação é atualizada.

Da mesma forma, podemos excluir um campo, então, podemos apagar o preço, ou então, adicionar um campo. Como eu disse, o banco de dados NoSQL dá essa flexibilidade para nós. Então, podemos colocar “Cor”, é um campo que não tinha antes, agora tem, e vamos colocar “Azul”, vou salvar. Então, percebemos que esse produto específico, além do nome e do preço, agora ele tem um campo “Cor”, enquanto na camisa só temos o nome e o preço.

Então, o banco de dados do Firestore oferece essas possibilidades para nós. Podemos, por exemplo, excluir esse documento que criamos, ou então, até mesmo excluir uma coleção inteiro, e tome cuidado, porque se você já estiver utilizando em produção, pode ser que você exclua por acidente e isso não vai ser legal.

Então, agora que já criamos o nosso banco de dados, ele já está funcionando, vamos configurar isso no nosso projeto React Native, para eu conseguir fazer exatamente isso que fizemos. Vamos conseguir criar uma coleção dentro do nosso app, e criar um produto que vai ser um documento, que vai ter um ID único, e vamos conseguir depois fazer essa edição, ou até mesmo, vamos excluir a cor. Vou clicar em “Excluir”, ele vai pedir a confirmação e excluímos o campo “nome”. Vamos conseguir, por exemplo, excluir um documento inteiro, ou se quisermos, em um caso mais extremo, excluir todos os produtos, excluímos a coleção “Produtos”. Mas isso vamos ver nos próximos vídeos. Até lá.

Sobre o curso React Native: armazenando dados no Firestore

O curso React Native: armazenando dados no Firestore possui 137 minutos de vídeos, em um total de 45 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