10/06/2020 Alison Luis Lamb 1Comment

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”.

Seremos redirecionados para a tela a seguir:

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.

Console Firebase

Clicando em Authentication podemos ativar o método de login por E-mail e senha:

Sistemas de Login

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.

Regras banco de dados Realtime

Na tela inicial clicando em < /> podemos adicionar o Firebase à nossa aplicação web.

Adicionando Firebase ao app Web

Configurando o Firebase Hosting

Com a caixa de seleção para configurar o Firebase Hosting marcada, os seguintes passos devem ser seguidos:

Instalando Firebase CLI

Instalar o Firebase CLI no diretório do projeto

Implantação Firebase Hosting

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/.

Inicializando Firebase em linha de comando

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.

Importação do Firebase no código HTML

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.

Usuário criado através do formulário deste tutorial
Estrutura do banco de dados Realtime
Aplicação

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

One thought on “TUTORIAL FIREBASE

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *