O Firebase é uma plataforma Backend as a Service (BaaS) que permite armazenar e sincronizar dados entre produtos da mesma plataforma. Além de serviços como autenticação, banco de dados e hosting, comumente mencionadas para aplicativos web, smartphones e serviços js, o Firebase também provê suporte para o desenvolvimento de aplicativos de jogos, por meio de SDKs.
Geralmente, a linguagem padrão para consulta de banco de dados é aStructured Query Language (SQL), a qual não é usada pelos bancosNot Only SQL (NoSQL), que no caso do Firebase utiliza notações em JavaScript Object Notation (JSON).
Essa plataforma, gratuita até 1GB de dados e 5GB de armazenamento, disponibiliza atualmente os seguintes produtos:
Authentication - O Firebase ajuda a autenticar e gerenciar usuários que acessam os aplicativos.
Realtime Database - O banco de dados em tempo real do Firebase, como o nome sugere, permite armazenar e consultar dados JSON em tempo real.
Hosting - é um recurso de hospedagem de conteúdo estático e dinâmico (js) na Web em nível de produção para desenvolvedores. O Firebase Hosting hospeda todos os tipos de conteúdo, desde seus arquivos CSS e HTML até microsserviços Express.js e APIs.
Storage - permite fazer upload e armazenar conteúdo gerado pelo usuário, como arquivos e imagens.
Cloud Firestore - é um banco de dados flexível e escalável para desenvolvimento em dispositivos móveis, aplicações web e no Google Cloud Platform.
Cloud Messaging - é uma solução de mensagens entre plataformas que permite entregar mensagens de forma confiável, sem nenhum custo.
Uma grande vantagem do Firebase é que ele vem com suporte embutido para dados em tempo real. Quando você salva um registro, ele é sincronizado com todos os clientes javascript conectados. Quando o cliente Web é programado para escutar as alterações feitas no banco de dados, assim que uma alteração é feita no banco, um gatilho é enviado para os aplicativos que executam retornos de chamada (callbacks) para o tratamento de outros dados.
Com um banco de dados em tempo real, os aplicativos recebem atualizações via push em uma única conexão em tempo real.
Passos para inserir o Firebase em um aplicativo Web
Inicialmente, acesse: https://console.firebase.google.com/u/0 , crie um projeto e em configurações do projeto, adicionar aplicativo Web.
Após adicionar o aplicativo as credenciais podem ser acessadas em firebaseconfig.
Código obtido:
var config = {
apiKey:"..."
authDomain:"..."
databaseURL:"..."
projectId:"..."
storageBucket:"..."
messagingSenderId:"..."
};
firebase.initializeApp(config);
Em todos os Apps js é necessário inserir esse snippet (trecho) de código var firebaseConfig com as credenciais. Substitua essas informações do seu projeto em todos os arquivos que encontrar firebaseConfig. Em alguns exemplos, você encontrará essa configuração em um arquivo separado como fireconf.js, mas em outras você fará a alteração no próprio HTML.
Anteriormente, no campo CDN (rede de entrega de conteúdo - content delivery network), era adicionado apenas uma biblioteca js genérica, por exemplo:
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script
Ou <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script> (ainda funcional)
Atualmente, com o surgimento dos subprodutos da Figura acima, são no mínimo três bibliotecas iniciais no campo CDN, onde somente a firebase-app.js é obrigatória:
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.2 /firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-firestore.js" ></script>
<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-storage.js" ></script>
<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-messaging.js"></script><
script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-functions.js"></script><script>
var app = firebase.initializeApp({ ... });
</script>
Continuando a Implementação de um projeto
Como mostrado, é necessário ter uma conta no google e criar um projeto no Firebase. Veja mais detalhes de como fazer isso em https://firebase.google.com/docs/web/setup
Implementação realizada seguindo o site. Passos iniciais google Firebase:
Como mostrado anteriormente, acesse https://console.firebase.google.com/ e adicione um projeto.
Agora em Database, selecione criar banco de dados no Realtime database.
Selecione modo Teste para permitir escrever e apagar e clique em Ativar.
Vale salientar que atualmente mesmo com Read: true, somente o proprietário pode ver a árvore do banco, como ilustrado na Figura abaixo. Se for colocado em Regras Read: false, os aplicativos web sem permissão não podem acessar os dados, porém com Read: True todos os aplicativos web podem acessá-los.
A partir de agora é possível iniciar a criação em árvore do banco JSON NoSQL:
Cada nó da árvore do banco de dados tem uma URL. Se for acessada pelo browser inserindo .json é obtido o conteúdo da árvore em JSON, se não houver filhos será o próprio valor armazenado (se Read: True em Rules), podendo ser utilizado comandos HTTP GET Resquest para resgatar o valor.
Exemplo:
https://sanusbfcm.firebaseio.com/esptrigger.json
https://sanusbfcm.firebaseio.com/esptrigger/esptrigger1.json
https://espupdate-4faf8.firebaseio.com/esptrigger.json
Como o Firebase utiliza o Node.js para a implementação do Firebase Command Line Interface (CLI) pelo terminal, vamos descrever algumas características desse ambiente.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
source ~/.bashrc # dar um refresh no bash para evitar reabrir o terminal
nvm install 10.20.1
Após a instalação, se for digitado nvm vai aparecer as características e nvm list, as versões do node instaladas, que nesse caso, ainda não existe.
Como foi visto, para instalar uma versão específica basta usar nvm install, como, por exemplo, nvm install 11.15.0 ou nvm install 10.20.1.
O NVM possibilita selecionar de forma simples uma versão em diferentes possíveis versões instaladas do node através do comando nvm use, assim, é permitido modificar a versão de execução corrente do node, por exemplo, com o comando nvm use 10.20.1. Para ver a versão em execução corrente basta digitar node –v.
Para verificar a versão do instalador de pacotes ou bibliotecas do node (node package manager), basta digitar npm –v. O NVM é prioritário, ou seja, caso ele seja instalado, as versões do node instaladas pelo NVM se sobrepõe em relação às versões instaladas manualmente.
Como o node serve para executar um programa javascript pelo terminal, podemos editar um programar simples index.js para testar o node: digitando nano index.js e escrevendo em seguida o conteúdo:
console.log("Deucerto!");.
Após Salvar, basta executar com node index.js. Se funcionar, vai aparecer no terminal:
Para testar o npm, vamos instalar uma biblioteca chamada my-cool-lib, com o comando npm install my-cool-lib. Depois de instalada, é criada uma pasta node_modules com o código da biblioteca e um arquivo chamado package-lock.json. Agora vou inserir no index.js funções da biblioteca, incluindo a biblioteca com comando require() e escrevendo o script abaixo.
const myLib = require ('my-cool-lib');
myLib.hello();
console.log("Deu certo!");
O resultado é mostrado na Figura abaixo:
Para instalar uma biblioteca global, para todos os usuários basta inserir no comando npm –g.
Para remover completamente o NVM e as versões instaladas do node, execute os comandos:
rm -rf $NVM_DIR ~/.npm ~/.bower && unset NVM_DIR
rm -rf /usr/local/{lib/node{,/.npm,_modules},bin,share/man}/{npm*,node*,man1/node*}
E remova as seguintes linhas no final de /root/.bashrc (nano /root/.bashrc):
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
curl -o node-v10.20.1-linux-armv6l.tar.xz https://nodejs.org/dist/latest-v10.x/node-v10.20.1-linux-armv6l.tar.xz
tar -xvf node-v10.20.1-linux-armv6l.tar.xz
sudo cp -r node-v10.20.1-linux-armv6l/* /usr/local/
node -v
npm –v
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash –
sudo apt install -y nodejs build-essential
Após o comando realizado com o Rpi zero W, surgiu a mensagem: “You appear to be running on ARMv6 hardware. Unfortunately this is not currently supported by the NodeSource Linux distributions. Please use the 'linux-armv6l' binary tarballs available directly from nodejs.org”. Dessa forma foi adotado a instalação automática com NVM. Existem outros setups do gerenciador de pacotes como setup_10.x, setup_12.x, etc.
npm install -g npm@latest
npm install -g cncjs@latest --unsafe-perm
Observe que as linhas WARN não são erros, portanto, não se preocupe com elas.
Após a instalação, é possível verificar se o cncjs está funcionando, digitando cncjs no terminal. Mais detalhes em https://sanusb.blogspot.com/2020/05/nodejs-no-raspberry-pi.html.
Algo assim deve ser exibido no terminal:
2019-10-04T22:45:16.701Z - info init Loading configuration from "/home/pi/.cncrc"
2019-10-04T22:45:17.931Z - info init Starting the server at http://127.0.1.1:8000
Isso significa que o servidor CNCjs adquiriu um IP e está em execução, pronto para aceitar conexões de um browser. Agora digite o IP do Rpi no browser e a porta 8000, como por exemplo "192.168.1.23:8000". Mais detalhes em: https://youtu.be/1UY5SrKLzxg.
Caso apresente algum erro durante a implementação em um computador Desktop, após comando cncjs, é recomendável inserir o comando:
npm rebuild bcrypt --update-binary
Instalar novamente o cncjs:
npm install -g npm@latest
npm install -g cncjs@latest --unsafe-perm
E executar novamente o comando cncjs. O resultado da aplicação do cncjs no Rpi é ilustrado na Figura abaixo:
Na aplicação em https://www.youtube.com/watch?v=CADF9Ut55S4, foi utilizado um Raspberry PI 3, como ilustrado na Figura abaixo:
A interação com a plataforma é realizada por meio de uma Command Line Interface (CLI), ou seja, Interface de Linha de Comando que nesse caso, é utilizado no terminal do Linux. Para instalar o Firebase CLI (após a criação de um projeto no Firebase em https://console.firebase.google.com/ ), no intuito de desenvolver um projeto no Hosting, se faz com o comando de instalação global.
O Hosting é um serviço de hospedagem de conteúdo web que oferece serviço js e conexão segura com o protocolo Secure Socket Layer (SSL). Já é incorporado ao Firebase, não havendo necessidade de configuração. Para iniciar a instalação:
curl -sL firebase.tools | bash
Esse script detecta automaticamente o sistema operacional, faz o download da versão mais recente da Firebase CLI e ativa o comando do firebase disponível globalmente ( substitue o comando npm install -g firebase-tools ). Para iniciar o processo é necessário se autenticar na nuvem fazendo login. Caso seja um sistema Windows ou WSL (Windows Subsystem for Linux), insira esse comando:
PATH="$PATH:/mnt/c/Windows/System32" firebase login
Para sistemas Unix, somente:
firebase login
Aparecerá uma notificação no navegador, com a Figura abaixo:
Depois da confirmação, para listar os projetos da plataforma Firebase, basta inserir:
firebase projects:list
Os projetos serão listados, como abaixo:
Crie uma pasta, por exemplo, mkdir jshosting, entre na pasta e digite firebase init.
O Firebase CLI é configurado no projeto web com o comando firebase init, o qual vincula a aplicação desenvolvida com o projeto Firebase auxiliando tanto o desenvolvimento local para a implantação posterior no website do Hosting. Nessta etapa, é necessário selecionar aplicativos (marcar por exemplo database ehosting, somente o firestore apresentou erro).
Depois de selecionados os produtos, é perguntado, se será criado um projeto novo, ou utilizado o existente. Como exemplo, foi inserido um novo projeto com Id do projeto e o nome do projeto como jshosting. Após as confirmações, são criados a pasta public, com o arquivo index.html, e os arquivos firebase.json e database.rules.json dentro da pasta jshosting.
Para a implantação na nuvem, executa-se o comando firebase deploy e a aplicação é gerada no domínio <nome-da-aplicação>.web.app.
*************************************************************************************************************************
Nota: Se houver o erro no sistema SWL: Error:Cloud resource location is not set for this project but the operation you are attempting to perform in Cloud Storage requires it. Please see this documentation for more details: https://firebase.google.com/docs/projects/locations Acesse o https://console.firebase.google.com/ e em Local do recurso do Google Cloud Platform nas configurações do projeto, selecione US-Central e tente novamente. Para acessar os diretórios do Windows via WSL digite: cd /mnt/c/Users/sandr/Dropbox/
*************************************************************************************************************************
O gerenciamento do domínio <nome-da-aplicação>.web.app é fornecido por meio do painel hosting do Firebase console, o qual é possível ver o histórico das implantações, conectar um domínio já existente e reverter o estado do website por meio das implantações já realizadas. Abaixo o código de instalação do CLI até o deploy dos aplicativos js dinâmicos para o hosting.O comando firebase serve habilita o conteúdo da pasta public em localhost:5000 (equivalente ao comando node server.js). Para abrir outra aplicação com localhost:5000, é recomendável, fechar o terminal e abrir novamente.
Ao abrir o navegador e digitar o endereço localhost:5000, os recursos do Node.JS local e do CLI do Firebase serão acionados. Após o comando firebase deploy, todos os arquivos que forem colocados em public vai ser espelhado para o firebase hosting. Para mais detalhes acesse https://firebase.google.com/docs/cli?hl=pt-br#sign-in-and-test-cli
*************************************************************************************************************************
# Instalação testada no Linux Mint e Ubuntu
#Seguindo: https://firebase.google.com/docs/cli?hl=pt-br#sign-in-and-test-cli
#Node v12.16.3: https://nodejs.org/
apt update
apt upgrade
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
source ~/.bashrc # Evita necessidade de reiniciar o terminal
nvm install 12
nvm list
node v
npm v
curl -sL firebase.tools | bash # Esse script
detecta automaticamente o sistema operacional, faz o download da versão
mais recente da Firebase CLI e ativa o comando do firebase disponível
globalmente (não é mais #npm install -g firebase-tools)
firebase login #wsl: PATH="$PATH:/mnt/c/Windows/System32" firebase login
mkdir fireintro # necessário criar uma pasta
cd fireintro
firebase init # Selecionar aplicativos (marcar aplicativos, por exemplo,
database e hosting) e cria pasta public
<<COMENTARIO
No final da etapa firebase init, é recomendável selecionar projeto padrão
do Firebase. Será criada em public uma página teste para verificar se o
servidor estava realmente funcionando.
O comando firebase serve habilita o conteúdo da pasta public em
localhost:5000 (equivalente ao node server.js). Para abrir outra aplicação
com localhost, é recomendável, fechar o terminal e abrir novamente.
Ao abrir o navegador e digitar o endereço localhost:5000, os recursos do
Node.JS local e do CLI do Firebase serão acionados.
Tudo que for colocado em public, vai ser espelhado para o firebase hosting,
com endereço configurado no init, quando o comando deploy for realizado.
Em todos os Apps js é necessário inserir esse snippet (trecho) de código
com as credenciais:
var config = {
apiKey: " ",
authDomain: " ",
databaseURL: " ",
projectId: " ",
storageBucket: " ",
messagingSenderId: " ",
appId: " "
};
COMENTARIO
firebase deploy #faz o upload da pasta public para o Hosting (recomendável
enviar pelo Linux)
firebase open # disponibiliza links de informações referentes a aplicação
*************************************************************************************************************************
Após o deploy, as aplicações estão na nuvem, como por exemplo: https://fir-usb.web.app https://js.sanusb.orgAgora que configuramos um projeto Firebase na nuvem e criamos um projeto no computador local com o Firebase CLI e apontamos para a nuvem, podemos começar a utilizar comandos Javascript do lado do cliente.
Antes de nos aprofundarmos no Firebase, é necessário comentar sobre bancos de dados, estrutura de banco de dados e métodos comuns para manipular dados.
Um banco de dados é uma coleção de dados organizados para pesquisa e recuperação rápidas. Bancos de dados preocupados principalmente com quatro operações (CRUD):
Criar dados (ou seja, create)
Ler dados (ou seja, read)
Atualizar dados (ou seja, update)
Destruir dados (ou seja, destroy ou remover)
O Firebase Realtime Database é um banco de dados hospedado na nuvem e o banco de dados oferecido como um serviço. O principal benefício do uso do Database é que seus dados serão sincronizados entre os aplicativos em tempo real, se houver uma alteração.
É utilizado o método ref (), para especificar o local em nosso banco de dados onde queremos ler ou gravar dados.
Podemos fazer referência à raiz usando:
firebase.database().ref(); ou firebase.database().ref('/');
Ou a um endereço específico:
firebasefirebase.database().ref('child/path');
São usados os métodos on () e once () para ler dados. São listeners que observam as alterações de dados feitas pelo usuário.
São usados os métodos set () ou push() para gravar dados no banco de dados.
São usados os métodos update () ou set () para atualizar os dados no banco de dados.
É usado o método remove () para remover os dados do banco de dados. No entanto, os dados podem ser removidos configurando um nó como nulo.
Bancos de dados, no entanto, permitem armazenar dados que persistirão, mesmo que o usuário feche a janela de navegação e abra-a posteriormente.
Ao gravar dados no banco de dados, estamos armazenando dados que persistirão, mesmo que o estado do programa seja alterado. Esses dados podem ser buscados mais tarde (READ) para forçar (push) o estado do programa de volta para onde estava no último fechamento.
Para escrever dados, existem basicamente duas coisas conceituais que você precisa fazer:
1. Definir um ponto de referência para escrever: - Pode ser um novo ponto de referência; - Pode ser um ponto de referência existente.
2. Escreva os dados nesse ponto de referência.
Todos os objetos de referência têm um método .set () disponível para gravação em uma referência definida. O padrão é:
refObject.set (dados);
Exemplo:
// catRef é um objeto de referência que aponta "/animals/cat"
var catRef = firebase.database().ref('/animals/cat');
// Grava os seguintes dados em /animals/cat
catRef.set({
name: "Fluffy",
sound: "meow"
});
O método .set () gravará dados no banco de dados do Firebase substituindo todos os dados no ponto de referência selecionado.
Lembre-se de que .set () substitui todos os dados existentes em /animals/cat pelos novos dados que são passados.
Se for desejado modificar apenas o nome (name) usando .set (), é possível ser mais específico com a referência com o termo child.
catRef.child('name').set("Furball");
Aqui está outro exemplo. Digamos que fosse necessário salvar o nome e o sobrenome dos usuários no banco de dados. Poderíamos usar o método .set () da seguinte maneira:
<input type='text' id='userFirst' value=''>
<input type='text' id='userLast' value=''>
<button type='button' onclick='saveUserData()'>Submit</button>
<script>
function saveUserData() {
// Getting user data
var userFirst = document.getElementById('userFirst').value;
var userLast = document.getElementById('userLast').value;
// Writing to the Database
var database = firebase.database();
database.ref('users').set({
first: userFirst,
last: userLast
});
}
</script>
A saída users no Firebase é ilustrada na Figura abaixo:
O método push() gera chaves exclusivas para cada novo filho adicionado.
animalsRef.push({ animalType: "tiger" });
Saída:
- animals
- Lx39slif03xm02dkv // unique key
- animalType: "tiger"
Lembre-se de que, com bancos de dados em tempo real, estamos interessados em alterações em tempo real, por isso, precisamos monitorar continuamente os dados do banco.
Para ler os dados, usaremos ouvintes (listeners) que detectarão qualquer alteração produzida no local especificado no banco. Portanto, precisamos especificar o ponto de referência de onde queremos ler os dados.
Para ler dados, precisamos utilizar três conceitos:
Um listener de eventos: usaremos o método on() e once() para ouvir as alterações.
Um acionador (trigger) de eventos: estaremos ouvindo o acionamento de eventos específicos que indicam alterações nos dados.
Uma função de retorno de chamada (call back): para executar algum código quando um evento é acionado.
Esse retorno de chamada nos fornecerá um objeto de captura instantânea que contém os dados do local especificado.
Para ler dados, vamos usar ouvintes de eventos. Podemos escolher se queremos ler os dados no local especificado uma vez ou sempre que houver uma alteração.
Métodos .on () e .once ()
Essas funções também são métodos de objetos de referência do firebase. O padrão, portanto, é:
refObj.on (evento, retorno de chamada);
Ou
refObj.once (evento, retorno de chamada); //only one time
Na implementação, fica assim:
myRef.on('eventName',function(){
// handler code to be executed
});
Sempre que o eventName for acionado, a function será executada.
Os dados exigem escuta ativa quando estão em constante mudança e queremos ser notificados sempre que os dados forem alterados. Uma vez que somos "notificados" por meio do acionador de eventos, nosso retorno de chamada pode, por exemplo, executar o código que atualizará nossa página.
Se, pelo contrário, queremos ouvir as alterações apenas uma vez e depois parar de ouvir, podemos usar o método once().
Se você deseja parar de ouvir alterações nos dados, pode usar o método off(). Usar once() é equivalente a usar on() e executar off() imediatamente após o ouvinte ser acionado e o retorno de chamada ser tratado.
Basicamente, qualquer alteração de dados aciona o evento value. Essa é a variável que será utilizada na maioria das operações de leitura.
var postsRef = firebase.database().ref('/posts');
postsRef.on('value', function(snapshot) { // snapshot, snap, banana - don't matter
console.log( snapshot.val()); // The actual data at the reference point
console.log( snapshot.key ); // Key, last part of path of location of snapshot
console.log( snapshot.ref ); // The reference for location of snapshot
// CODE to do something with data goes here: e.g. update Riot with new data
});
Vale salientar que snapshot.val()retorna os dados do objeto de captura instantânea, como é ilustrado no trecho de código:
var usersRef = firebase.database().ref('users');
usersRef.once('value', function(snapshot){
var data = snapshot.val(); // temporarily store the raw data
console.log(data);
});
Outro Exemplo:
// "Escutando" toda e qualquer alteração da chave "text"
textRef.on('value', function(snapshot){
// Escrevendo no campo de texto abaixo o que foi recebido do firebase
document.getElementById('text').value = snapshot.val();
});
O acrônimo API que provém do inglês Application Programming Interface (Em português, significa Interface de Programação de Aplicações), desenvolvida para que outras aplicações consigam utilizar as funcionalidades de uma aplicação distinta, sem precisar conhecer detalhes da implementação do software. Desta forma, entendemos que as APIs permitem uma interoperabilidade entre aplicações. Em outras palavras, a comunicação entre aplicações e entre os usuários.
Quando a API é baseada em protocolo HTTP para aplicações WEB é chamada de REST (Representational State Transfer, em português, Transferência de Estado Representacional) ou RESTfull. A API REST normalmente atende às requisições GET, PUT, POST e DELETE.
É possível acessar qualquer URL do banco de dados do Firebase com um terminal REST, bastando para isso, anexar .json ao final da URL e enviar uma solicitação a partir de um cliente HTTPS, pois o Firebase responde apenas ao tráfego criptografado (HTTPS ) para segurança dos dados. Mais detalhes em: https://firebase.google.com/docs/reference/rest/database .
Nesse tópico serão inseridos projetos desenvolvidos utilizando Firebase.