![](https://conexaopanvel.faccat.br/wp-content/uploads/2020/06/logo-built_black.png)
TUTORIAL FIREBASE
Como descrito em um post anterior, o Google Firebase é uma plataforma de desenvolvimento web e mobile muito utilizada pelo seu back-end completo e sua fácil utilização. Neste tutorial iremos criar uma simples aplicação utilizando os recursos de Hosting, cadastro/login de usuários e banco de dados do Firebase.
Criando um projeto
Podemos criar um novo projeto no Firebase acessando https://console.firebase.google.com/u/3/ e clicando em “Adicionar projeto”.![](https://conexaopanvel.faccat.br/wp-content/uploads/2020/06/adicionar_projeto.png)
Seremos redirecionados para a tela a seguir:
![](https://conexaopanvel.faccat.br/wp-content/uploads/2020/06/nome_projeto.png)
Escolha um nome para o seu projeto e clique em Continuar. Essa é a tela inicial do Console Firebase. Aqui podemos acessar as configurações de Autenticação, Banco de Dados, Hosting, Cloud Functions e muitas outras. Para este tutorial utilizaremos apenas Autenticação por E-mail com senha e Banco de Dados com o Realtime Database, que permite atualizações em tempo real.
![](https://conexaopanvel.faccat.br/wp-content/uploads/2020/06/Screenshot_2-1024x576.png)
Clicando em Authentication podemos ativar o método de login por E-mail e senha:
![](https://conexaopanvel.faccat.br/wp-content/uploads/2020/06/autenticacao.png)
Em Database, podemos ativar o Realtime Database e modificar suas regras de uso. Para este tutorial devemos por leitura e gravação como True, para podermos inserir e buscar dados do banco.
![](https://conexaopanvel.faccat.br/wp-content/uploads/2020/06/database_regras.png)
Na tela inicial clicando em < /> podemos adicionar o Firebase à nossa aplicação web.
![](https://conexaopanvel.faccat.br/wp-content/uploads/2020/06/adicionar_web.png)
Configurando o Firebase Hosting
Com a caixa de seleção para configurar o Firebase Hosting marcada, os seguintes passos devem ser seguidos:
![](https://conexaopanvel.faccat.br/wp-content/uploads/2020/06/firebase_cli.png)
Instalar o Firebase CLI no diretório do projeto
![](https://conexaopanvel.faccat.br/wp-content/uploads/2020/06/hosting.png)
Fazer login no Firebase com sua conta Google, inicializar o Firebase e fazer a implantação do App. Para fins de demonstração, podemos criar um simples ‘Hello World’ em uma página HTML e fazer a implantação. Após a implantação podemos visualizar a página online, o endereço é https://tutorial-firebase-a717b.web.app/.
![](https://conexaopanvel.faccat.br/wp-content/uploads/2020/06/firebase_init.png)
![](https://conexaopanvel.faccat.br/wp-content/uploads/2020/06/firebase_config-1024x369.png)
Adicionando Firebase no código
Para utilizarmos as funções do Firebase é necessário fazer a importação e inicialização no código. A importação em uma página HTML é feita pelas tags script.
![](https://conexaopanvel.faccat.br/wp-content/uploads/2020/06/html1.png)
Assim o Firebase está pronto para uso. Com o firebase.auth() temos acesso a todas as funções de login e autenticação, e com o firebase.database() podemos utilizar o banco de dados Realtime Database.
![](https://conexaopanvel.faccat.br/wp-content/uploads/2020/06/cadastrado1.png)
![](https://conexaopanvel.faccat.br/wp-content/uploads/2020/06/banco.png)
![](https://conexaopanvel.faccat.br/wp-content/uploads/2020/06/Screenshot_3-1024x576.png)
Conclusão
Com este tutorial temos uma pequena amostra do potencial do Firebase e do Realtime. Ao escrever na caixa de texto e clicar em Salvar no Banco, podemos ver o Realtime em ação, atualizando conforme são inseridos novos dados. O Firebase conta com diversas soluções, e com isso se mostra uma excelente opção para projetos pequenos, MVP’s, protótipos e projetos acadêmicos, com um backend pronto e facilmente customizável. Também pode ser utilizado para aplicações maiores, já que é facilmente escalável.
Este projeto pode ser encontrado em nosso Github
https://github.com/Conexao-Panvel/tutorial-firebase
Autor: Alison Lamb
O post está bem ilustrado, facilitando o entendimento. Curti e vou testar, parabéns ao autor!