Integrando o Firebase no React

Todo desenvolvedor que quer enriquecer o seu portfólio já fez o questionamento em algum momento da vida sobre onde fazer o deploy do back-end da sua aplicação sem muita dor de cabeça. Geralmente, existem repositórios que oferecem serviços pagos ou limitados e com uma burocracia que demanda um tempo considerável para que você aprenda a utilizar, de forma que dá um trabalhão para arrumar tudo isso, maior do que, até mesmo, o que você teve em seu código/aplicação. Visando esta problemática, trago para vocês a solução de todos os nossos problemas: o Firebase!

Hoje, aprenderemos como integrar o Firebase ao React, construindo uma aplicação com consultas suficientemente úteis para que você nunca mais esqueça como utilizar este conjunto de serviços.

Mas afinal: o que é o Firebase?

O Firebase é uma aplicação que disponibiliza diversos serviços computacionais em nuvem para o back-end, fornecidos pelo Google. Nela, é possível integrar diversas linguagens de programação e aplicativos (Node.js, Unity, PHP, Javascript, C++, etc.) para serviços de hospedagem de banco de dados, autenticação e muito mais!

O que é o React?

O React é uma biblioteca Javascript de código aberto e utilizada por diversas empresas gigantes, como o facebook, a netflix, o Instagram, etc. Focado em criar interfaces para o usuário de maneira muito mais prática do que utilizando o Javascript puro, o React foi ganhando mais e mais espaço por ser de fácil assimilação, compreensão e adaptação.

Primeiros Passos

Chegou a hora de sair um pouco do campo dos conceitos e começar a colocar a mão na massa. Como já foi dito, utilizaremos o Firebase como back-end para uma aplicação React que criaremos. Que tal um site onde é possível cadastrar funcionários de uma determinada empresa? Criaremos então nosso projeto React executando o seguinte comando no terminal:

npx create-react-app employee-register

cd employee-register

npm start

OBS - Foi utilizado o npm como ferramenta de gerenciamento de pacotes, mas sinta-se à vontade para utilizar a que lhe for mais confortável. Além disso, neste exemplo estamos utilizando comandos que são executados de maneira efetiva no terminal do Linux. Para outros sistemas operacionais, consulte a documentação do React.

Se tudo der certo, ao fim da execução dos comandos anteriores, será aberto no browser uma página com o símbolo do React:

OBS - Dentre os arquivos que são criados dentro da pasta “src” do nosso projeto, só é necessário manter os arquivos “App.css”, “App.js”, “index.css” e “index.js”, visto que não abordaremos as funcionalidades que envolvem os outros arquivos. Apague-os, remova as conexões que eles possuem nestes arquivos citados e limpe o arquivo “App.js”:

Criando um banco de dados no Firebase

Agora que temos a estrutura básica já construída no React, chegou a hora de direcionar nossa atenção para o Firebase. Acesse o site da aplicação e faça login com uma conta google de sua preferência. Depois, clique em “Ir para console”. Por fim, clique em “Adicionar projeto” e, agora, seremos direcionados para a página onde iremos configurar nosso primeiro banco de dados.

Nesta fase de criação, basta inserir um nome para seu banco de dados (no nosso caso, utilizaremos “employee-register”), clique em continuar, concorde em utilizar o Google Analytics (não é necessário, mas de graça até injeção na testa, concorda?) e clique em “Criar projeto”. Você será direcionado para a página da Figura 3, ou alguma similar:

Conectando o Firebase ao React

Uma vez criado o projeto que iremos utilizar na nossa aplicação, podemos estabelecer a conexão entre ele e o React. Na tela da figura 3, clique na opção “Web” ( exibida na tela com o símbolo “< />”, o terceiro botão branco abaixo de “Comece adicionando o Firebase ao seu aplicativo”). Crie um apelido para o app, clique em “Registrar App” e, após isso, será disponibilizado para você um passo a passo para realizar a integração.

A primeira ação é instalar o firebase por meio do comando a seguir:

npm install firebase

Após isso, copie o código disponibilizado na página em questão e cole em um documento com extensão javascript. Por questões de organização, criaremos um repositório chamado “back-end” e, dentro dele, um arquivo chamado “connection.js”. É nele que implementamos este código.

Faremos algumas modificações neste documento, apenas para deixá-lo mais simplificado. Primeiro, exclua as interações que existem com “getAnalytics”. Não utilizaremos esta funcionalidade no nosso projeto. Depois, adicionaremos um “export default app” no fim do código, para que possamos ter acesso a esta conexão em outros documentos. O seu código ficará parecido ao que consta na figura 4, com a diferença de que os valores serão diferentes para cada conta:

Retorne para o Firebase e clique em “Continuar para o Console”. Certifique-se de que você está no projeto “employee-register” e procure a opção “Cloud Firestore”. Aparecerá a opção “Criar banco de dados” da qual você deve clicar. Clique em avançar sem precisar alterar as configurações da página seguinte e, ao selecionar uma região para seu banco de dados (quanto mais perto melhor, então selecione o servidor de São Paulo), finalmente teremos concluído todas as configurações para criar um banco de dados no Firebase!

Criando uma coleção

O banco de dados que criamos no Firebase é não relacional, ou seja, não utiliza um esquema de tabelas, com linhas e colunas. É como se você, ao invés de inserir dados em uma linha de uma tabela com N colunas, você criasse um objeto com N chaves.

Diante do que foi explicado, criaremos uma coleção (o equivalente ao que entendemos por tabela em um banco de dados relacional) que armazenará cada informação do usuário. No painel do Firebase (em “Firestore Database”, que foi onde paramos), clique em “Iniciar Coleção” e dê um nome para ela (no nosso exemplo, usaremos “employee”. O id de cada documento contido nessa coleção pode ser gerado manualmente, mas se você clicar em “código automático", será inserido um valor aleatório de caracteres para preenchê-lo. Para um primeiro documento (usuário) dentro da coleção “employee”, criaremos os campos nome (string), cpf (string), salary (number), e sector (array de strings), conforme a figura 5:

Agora, iremos definir no Firebase que permitiremos consultas e subscrições no nosso banco de dados. Clique em “Regras” e, em “Editar Regras”, altere “false” para “true” (linha 5):

Da parte do Firebase, está tudo pronto. A partir de agora, todas as manipulações na coleção que criamos serão feitas dinamicamente via código.

Criando consultas para o Firebase

A ideia do nosso projeto é criar um CRUD básico utilizando o Firebase, ou seja, desenvolver a criação, leitura, atualização e remoção de elementos da nossa coleção “employee”. Dito isto, caminharemos juntos por cada uma dessas funcionalidades nos passos seguintes.

Leitura

É necessário criar uma função que irá consultar as informações contidas na nossa coleção. Primeiramente, iremos conectar a nossa aplicação com a coleção “employee”. A função que desempenha este papel é a “collection”, que importamos de “firebase/firestore/lite”. Ela recebe como parâmetros a conexão com o nosso banco de dados (utilizamos a função getFirestore para isso e repassamos a função que criamos no arquivo connection.js como parâmetro) e o nome da coleção.

Uma vez criada a conexão com nossa coleção “employee”, iremos resgatar os dados que estão contidos nela. Para isto, utilizaremos a função “getDocs”, importada também de “firebase/firestore/lite”:

Por fim, trataremos estes dados e o armazenaremos em um estado. A sugestão aqui é que você faça um “print” em “docsEmployee” e entenda um pouco o formato de como virão os dados. Você entenderá melhor o que faremos a seguir, em busca de salvar no estado um objeto limpo e apenas com as chaves e valores necessários para a exibição:

Agora é com você! Personalize a exibição destes dados como melhor convir. Deixarei abaixo o código, uma estilização simples em CSS e a exibição, para que sirva de exemplo:

Criação

Para adicionar novos usuários para nossa coleção, iremos utilizar a função “addDoc”, importada também de “firebase/firestore/lite”. Ela recebe como parâmetro a função “collectionEmployee” que já utilizamos no passo anterior, além de um objeto com as chaves e valores a serem adicionados no documento criado para a coleção. Para tal, criamos inputs que armazenam em estados os valores a serem adicionados e, ao clicar em “Adicionar”, estes dados serão enviados ao banco de dados:

Atualização

Para construir uma funcionalidade que permita a edição de usuários já cadastrados, começaremos criando um botão de edição para cada usuário, que passa dados do elemento em questão como parâmetro ao ser clicado:

Após isto, utilizaremos uma das chaves do elemento para realizar uma busca direcionada à nossa coleção (no nosso caso, será o cpf). A função “query” permite esta ação e passamos como parâmetro dela a nossa conhecida função “collectionEmployee”, além de uma função “where”, que recebe uma condição separada por vírgulas no modelo “campo / condição / elemento”. Depois disso, utilizamos a função getDocs para coletar os dados desta consulta e, para que possamos manipular os dados novamente, encaminhamos cada um deles para os estados que já criamos. Desta forma, os inputs serão preenchidos com os valores do documento que queremos editar:

Ao clicar em editar, todos os dados do documento estarão preenchendo os inputs, mas a função “addEmployee” continuará apenas inserindo novos dados ao invés de selecionar um já criado para a edição. Não é isto que queremos. Note na figura 19 que utilizamos um novo estado, setado por “setId”. A intenção de criar este estado é que, primeiro, utilizaremos o id do usuário que queremos editar mais à frente. Depois, podemos criar uma condição na função “addEmployee” em que, caso o estado “id” esteja preenchido com algum dado, a ação que esta função fará será de edição, não de criação. Ao fim de “addEmployee”, basta setarmos o id com uma string vazia, e tudo permanece do jeito que esperamos para nossa aplicação. Por fim, chamamos a função “getCollection” para atualizar os dados que foram manipulados no banco de dados. Veja:

Remoção

Por fim, e não menos importante, concluiremos nossa jornada criando a função de remoção de um elemento. Criaremos um botão “Excluir” assim como o fizemos para o botão “Editar”:

Para a função “removeItem”, assim como na função “editItem”, encontraremos o usuário pelo seu cpf e retornaremos os dados do mesmo em uma variável, de forma que seja possível coletar o Id nesse objeto de retorno. Depois, utilizaremos a função “deleteDoc”, passando como parâmetro a função “doc”, que por sua vez recebe como parâmetros a conexão com o banco de dados, o nome da coleção e o id. Por fim, chamamos a função “getCollection” para atualizar os dados que foram manipulados no banco de dados:

Considerações Finais

Isso é tudo pessoal! O Firebase é um repositório incrível que nos auxilia muito no armazenamento de dados e, de agora em diante, é com vocês! Pratiquem o máximo que puderem e nos deem feedbacks sobre o que acharam dele!

Se você achou esse artigo interessante, gostaria de tirar quaisquer dúvidas ou somente está afim de trocar uma ideia sobre esses e mais assuntos, você também pode entrar em contato comigo, seja por meio do e-mail bruno.cabral.silva2018@gmail.com ou pelo meu perfil do Linkedin!

Te espero ansiosamente!