Firebase - Uma alternativa segura, simples e confiável
Tags: javascript, firebase, react, nosql
Published: 2021-02-02 16:04:20

Clientes mais exigentes, mercado mais acirrado e tempo mais curto são questões que exigem um desdobramento muito maior de um desenvolvedor/empresa para entregar resultados. E atento à estas necessidades, surgem diversas soluções que contribuem com a vida das pessoas envolvidas e com as respectivas entregas aos clientes. Vamos falar um pouco sobre o Firebase, um complexo criado e mantido pelo Google, de forma dinâmica e bastante prática com um caso real.
Este artigo é um desdobramento de um trabalho realizado por [Daniel Patrício](https://github.com/danielpatricio-wa), Carlos Paludetto e [Thiago Novato](https://github.com/thiagonovato), que serviu para apresentação interna na empresa [WA Project](http://www.waproject.com.br).

##**O que é o Firebase**
É um complexo de ferramentas disponíveis para facilitar o desenvolvimento de aplicações web e/ou mobile, muito prática e intuitiva.

##**Quem está usando?**
Grandes empresas já utilizam em seus projetos (The New York Times, The Economist, Alibaba.com, todoist etc). É possível ver alguns cases de sucesso [aqui](https://firebase.google.com/use-cases?hl=pt-br)

##**Principais funções**
Dentre várias funções disponíveis no Firebase, iremos focar nas mais utilizadas em nosso projeto prático. São elas:

**Authentication**: O sistema de autenticação do Firebase permite habilitar em sua aplicação diversas formas de autenticar seu usuário, desde um simples login/senha ou até mesmo com a utilização dos principais serviços de autenticação de terceiros, como o próprio Google, Facebook, Twitter, GitHub, Microsoft, Apple entre outros. É possível também personalizar um template SMS para validação de usuário, template de email para criação/recuperação de senha e confirmação de número e email.

**Cloud Firestore**: Banco de Dados NoSql de leitura e escrita rápida, permitindo múltiplas conexões de usuários e criação de regras de acesso para melhora a segurança dos dados. Permite a sincronização dos dados em tempo real com todos os dispositivos conectados.

**Cloud Functions**: Permite executar código de back-end em Javascript e Typescript sem a necessidade de construir um servidor.

**Hosting**: Serviço de hospedagem rápida e segura para aplicativos web, com conteúdo estáticos, dinâmicos e microsserviços. Altamente escalável.

**Cloud Storage**: Armazenamento e compartilhamento de arquivos ou conteúdos gerados pelos próprios usuários.

##**Caso prático**
Vamos criar um aplicativo de Chat, baseado nos principais serviços do Firebase

###**Criando o projeto no Firebase**
* Acesse http://firebase.google.com, entre com sua conta Google (é obrigatório) e crie um novo projeto
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/00m168bvxco5he8pm7i5.jpg)

* Insira o nome do seu projeto, aceite os termos e clique em continuar
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ewqi6jleuvfvve3p2qos.jpg)

* Clique em WEB para registrar seu APP, inserindo um apelido.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tws56t4pi2p7uj6jsn1v.jpg)

* Ao final, será gerado um objeto de configuração do Firebase, onde usaremos ele no projeto React.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/khyomvhbzoetf93i0pps.png)


###**Criando o projeto React**
Agora vamos iniciar o projeto React e logo sem seguida vamos instalar as bibliotecas Firebase e Formik para gerenciar nossos formulários. Vamos partir do princípio que seu ambiente de desenvolvimento esteja configurado corretamente.
```
npx create-react-app firebase-chat-wa
cd firebase-chat-wa
yarn add firebase formik
```

Após a instalação, vamos abrir o projeto no VS Code
```
code ./
```

Vamos criar algumas pastas e arquivos. No diretório "src/services", criaremos um serviço "auth.ts" com as seguintes funções:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cdkd2pkfyf6hkahzi6bt.png)

Depois usaremos esta funções na tela de Login, sendo uma no onSubmit do formulário caso queira autenticar seu usuário com login/senha, e as demais diretamente em buttons, como o "loginWithGoogle()" para autenticação Google ou "loginWithGitHub()" para autenticação via GitHub.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v324oadzo6ouz02vzeml.png)

Essa é a tela de Login
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xe4i12uskjh7imaldn43.jpg)

Essa é a tela de cadastro (para uso de autenticação com login/senha)
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sqkklyh9kl25h6mz4kfa.jpg)

Uma vez autenticado, é redirecionado para esta tela principal
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wayt0ogm1176egt5a8uc.jpg)

No diretório "src/services", criaremos o serviço "cloudFirestore.ts" com o seguinte conteúdo, responsável por enviar as mensagens (salvando no banco), buscar uma determinada mensagem e listar todo o chat.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gr0nuwmrirdl1i1jy1dc.png)

Usaremos a função de listar o chat no useEffect da página principal
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q59c3ex84gnzg65ykfxk.png)

O campo de texto para enviar as mensagens está em um formulário do Formik, cujo onSubmit é:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nx9p5tx4ongo7tuput27.png)

Toda vez que uma mensagem é enviada, é feito um registro do Firestore, e pelo fato do banco ser real time, imediatamente é atualizado para todos os usuários conectados no chat, atualizando quase que instantaneamente a tela com a nova mensagem enviada.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ur84jnu51ssu6wkwke2t.jpg)

O código completo do projeto pode ser acessado [aqui](https://github.com/danieltpatricio/firebase-chat.git).