Ler e gravar dados na web

(Opcional) Protótipo e teste com Firebase Local Emulator Suite

Antes de falar sobre como seu aplicativo lê e grava no Realtime Database, vamos apresentar um conjunto de ferramentas que você pode usar para criar protótipos e testar a funcionalidade do Realtime Database: Firebase Local Emulator Suite. Se você estiver experimentando diferentes modelos de dados, otimizando suas regras de segurança ou trabalhando para encontrar a maneira mais econômica de interagir com o back-end, poder trabalhar localmente sem implantar serviços ativos pode ser uma ótima ideia.

Um emulador do Realtime Database faz parte do Local Emulator Suite, que permite que seu aplicativo interaja com o conteúdo e a configuração do banco de dados emulado, bem como, opcionalmente, com os recursos do projeto emulado (funções, outros bancos de dados e regras de segurança).

Usar o emulador do Realtime Database envolve apenas algumas etapas:

1. Adicionando uma linha de código à configuração de teste do seu aplicativo para conectar-se ao emulador.
2. Na raiz do diretório local do projeto, executando firebase emulators:start .
3. Fazer chamadas a partir do código do protótipo do seu aplicativo usando um SDK da plataforma Realtime Database normalmente ou usando a API REST do Realtime Database.

Um passo a passo detalhado envolvendo o Realtime Database e o Cloud Functions está disponível. Você também deve dar uma olhada na introdução do Local Emulator Suite .

Obtenha uma referência de banco de dados

Para ler ou gravar dados do banco de dados, você precisa de uma instância de firebase.database.Reference :

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

var database = firebase.database();
index.js

Gravar dados

Este documento aborda os princípios básicos da recuperação de dados e como ordenar e filtrar dados do Firebase.

Os dados do Firebase são recuperados anexando um ouvinte assíncrono a firebase.database.Reference . O ouvinte é acionado uma vez para o estado inicial dos dados e novamente sempre que os dados são alterados.

Operações básicas de gravação

Para operações básicas de gravação, você pode usar set() para salvar dados em uma referência especificada, substituindo quaisquer dados existentes nesse caminho. Por exemplo, um aplicativo de blog social pode adicionar um usuário com set() da seguinte forma:

import { getDatabase, ref, set } from "firebase/database";

function writeUserData(userId, name, email, imageUrl) {
  const db = getDatabase();
  set(ref(db, 'users/' + userId), {
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}
rtdb_write_new_user.js

function writeUserData(userId, name, email, imageUrl) {
  firebase.database().ref('users/' + userId).set({
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}
read-and-write.js

Usar set() substitui os dados no local especificado, incluindo quaisquer nós filhos.

Ler dados

Ouça eventos de valor

Para ler dados em um caminho e ouvir alterações, use onValue() para observar eventos. Você pode usar esse evento para ler instantâneos estáticos do conteúdo em um determinado caminho, conforme eles existiam no momento do evento. Este método é acionado uma vez quando o ouvinte é anexado e novamente sempre que os dados, incluindo filhos, são alterados. O retorno de chamada do evento recebe um instantâneo contendo todos os dados naquele local, incluindo dados filho. Se não houver dados, o instantâneo retornará false quando você chamar exists() e null quando você chamar val() nele.

O exemplo a seguir demonstra um aplicativo de blog social recuperando a contagem de estrelas de uma postagem do banco de dados:

import { getDatabase, ref, onValue } from "firebase/database";

const db = getDatabase();
const starCountRef = ref(db, 'posts/' + postId + '/starCount');
onValue(starCountRef, (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);
});
rtdb_social_listen_star_count.js

var starCountRef = firebase.database().ref('posts/' + postId + '/starCount');
starCountRef.on('value', (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);
});
read-and-write.js

O ouvinte recebe um snapshot que contém os dados no local especificado no banco de dados no momento do evento. Você pode recuperar os dados do snapshot com o método val() .

Leia os dados uma vez

Leia os dados uma vez com get()

O SDK foi projetado para gerenciar interações com servidores de banco de dados, esteja seu aplicativo online ou offline.

Geralmente, você deve usar as técnicas de evento de valor descritas acima para ler dados e ser notificado sobre atualizações nos dados do back-end. As técnicas de ouvinte reduzem o uso e o faturamento e são otimizadas para oferecer aos usuários a melhor experiência on-line e off-line.

Se precisar dos dados apenas uma vez, você pode usar get() para obter um instantâneo dos dados do banco de dados. Se por algum motivo get() não conseguir retornar o valor do servidor, o cliente investigará o cache de armazenamento local e retornará um erro se o valor ainda não for encontrado.

O uso desnecessário de get() pode aumentar o uso da largura de banda e levar à perda de desempenho, o que pode ser evitado usando um ouvinte em tempo real conforme mostrado acima.

import { getDatabase, ref, child, get } from "firebase/database";

const dbRef = ref(getDatabase());
get(child(dbRef, `users/${userId}`)).then((snapshot) => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
  } else {
    console.log("No data available");
  }
}).catch((error) => {
  console.error(error);
});
rtdb_read_once_get.js

const dbRef = firebase.database().ref();
dbRef.child("users").child(userId).get().then((snapshot) => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
  } else {
    console.log("No data available");
  }
}).catch((error) => {
  console.error(error);
});
read-and-write.js

Leia os dados uma vez com um observador

Em alguns casos você pode querer que o valor do cache local seja retornado imediatamente, em vez de verificar um valor atualizado no servidor. Nesses casos você pode usar once() para obter os dados do cache do disco local imediatamente.

Isso é útil para dados que só precisam ser carregados uma vez e não se espera que sejam alterados com frequência ou que exijam escuta ativa. Por exemplo, o aplicativo de blog dos exemplos anteriores usa este método para carregar o perfil de um usuário quando ele começa a criar uma nova postagem:

import { getDatabase, ref, onValue } from "firebase/database";
import { getAuth } from "firebase/auth";

const db = getDatabase();
const auth = getAuth();

const userId = auth.currentUser.uid;
return onValue(ref(db, '/users/' + userId), (snapshot) => {
  const username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  // ...
}, {
  onlyOnce: true
});
rtdb_social_single_value_read.js

var userId = firebase.auth().currentUser.uid;
return firebase.database().ref('/users/' + userId).once('value').then((snapshot) => {
  var username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  // ...
});
read-and-write.js

Atualizando ou excluindo dados

Atualizar campos específicos

Para gravar simultaneamente em filhos específicos de um nó sem substituir outros nós filhos, use o método update() .

Ao chamar update() , você pode atualizar valores filho de nível inferior especificando um caminho para a chave. Se os dados forem armazenados em vários locais para melhor escalar, você poderá atualizar todas as instâncias desses dados usando o data fan-out .

Por exemplo, um aplicativo de blog social pode criar uma postagem e atualizá-la simultaneamente para o feed de atividades recentes e para o feed de atividades do usuário da postagem usando um código como este:

import { getDatabase, ref, child, push, update } from "firebase/database";

function writeNewPost(uid, username, picture, title, body) {
  const db = getDatabase();

  // A post entry.
  const postData = {
    author: username,
    uid: uid,
    body: body,
    title: title,
    starCount: 0,
    authorPic: picture
  };

  // Get a key for a new Post.
  const newPostKey = push(child(ref(db), 'posts')).key;

  // Write the new post's data simultaneously in the posts list and the user's post list.
  const updates = {};
  updates['/posts/' + newPostKey] = postData;
  updates['/user-posts/' + uid + '/' + newPostKey] = postData;

  return update(ref(db), updates);
}
rtdb_social_write_fan_out.js

function writeNewPost(uid, username, picture, title, body) {
  // A post entry.
  var postData = {
    author: username,
    uid: uid,
    body: body,
    title: title,
    starCount: 0,
    authorPic: picture
  };

  // Get a key for a new Post.
  var newPostKey = firebase.database().ref().child('posts').push().key;

  // Write the new post's data simultaneously in the posts list and the user's post list.
  var updates = {};
  updates['/posts/' + newPostKey] = postData;
  updates['/user-posts/' + uid + '/' + newPostKey] = postData;

  return firebase.database().ref().update(updates);
}
read-and-write.js

Este exemplo usa push() para criar uma postagem no nó contendo postagens para todos os usuários em /posts/$postid e recuperar simultaneamente a chave. A chave pode então ser usada para criar uma segunda entrada nas postagens do usuário em /user-posts/$userid/$postid .

Usando esses caminhos, você pode realizar atualizações simultâneas em vários locais na árvore JSON com uma única chamada para update() , como este exemplo cria a nova postagem em ambos os locais. As atualizações simultâneas feitas dessa maneira são atômicas: ou todas as atualizações são bem-sucedidas ou todas as atualizações falham.

Adicionar um retorno de chamada de conclusão

Se quiser saber quando seus dados foram confirmados, você pode adicionar um retorno de chamada de conclusão. Tanto set() quanto update() recebem um retorno de chamada de conclusão opcional que é chamado quando a gravação é confirmada no banco de dados. Se a chamada não tiver êxito, o retorno de chamada receberá um objeto de erro indicando o motivo da falha.

import { getDatabase, ref, set } from "firebase/database";

const db = getDatabase();
set(ref(db, 'users/' + userId), {
  username: name,
  email: email,
  profile_picture : imageUrl
})
.then(() => {
  // Data saved successfully!
})
.catch((error) => {
  // The write failed...
});
rtdb_social_completion_callback.js

firebase.database().ref('users/' + userId).set({
  username: name,
  email: email,
  profile_picture : imageUrl
}, (error) => {
  if (error) {
    // The write failed...
  } else {
    // Data saved successfully!
  }
});
read-and-write.js

Excluir dados

A maneira mais simples de excluir dados é chamar remove() em uma referência à localização desses dados.

Você também pode excluir especificando null como o valor para outra operação de gravação, como set() ou update() . Você pode usar esta técnica com update() para excluir vários filhos em uma única chamada de API.

Receba uma Promise

Para saber quando seus dados são confirmados no servidor Firebase Realtime Database, você pode usar um Promise . Tanto set() quanto update() podem retornar uma Promise que você pode usar para saber quando a gravação foi confirmada no banco de dados.

Desanexar ouvintes

Os retornos de chamada são removidos chamando o método off() na referência do banco de dados do Firebase.

Você pode remover um único ouvinte passando-o como parâmetro para off() . Chamar off() no local sem argumentos remove todos os ouvintes naquele local.

Chamar off() em um ouvinte pai não remove automaticamente os ouvintes registrados em seus nós filhos; off() também deve ser chamado em qualquer ouvinte filho para remover o retorno de chamada.

Salvar dados como transações

Ao trabalhar com dados que podem ser corrompidos por modificações simultâneas, como contadores incrementais, você pode usar uma operação de transação . Você pode atribuir a esta operação uma função de atualização e um retorno de chamada de conclusão opcional. A função de atualização toma o estado atual dos dados como argumento e retorna o novo estado desejado que você gostaria de escrever. Se outro cliente gravar no local antes que seu novo valor seja gravado com êxito, sua função de atualização será chamada novamente com o novo valor atual e a gravação será repetida.

Por exemplo, no aplicativo de blog social de exemplo, você pode permitir que os usuários marquem e desmarquem postagens com estrela e controlem quantas estrelas uma postagem recebeu da seguinte maneira:

import { getDatabase, ref, runTransaction } from "firebase/database";

function toggleStar(uid) {
  const db = getDatabase();
  const postRef = ref(db, '/posts/foo-bar-123');

  runTransaction(postRef, (post) => {
    if (post) {
      if (post.stars && post.stars[uid]) {
        post.starCount--;
        post.stars[uid] = null;
      } else {
        post.starCount++;
        if (!post.stars) {
          post.stars = {};
        }
        post.stars[uid] = true;
      }
    }
    return post;
  });
}
rtdb_social_star_transaction.js

function toggleStar(postRef, uid) {
  postRef.transaction((post) => {
    if (post) {
      if (post.stars && post.stars[uid]) {
        post.starCount--;
        post.stars[uid] = null;
      } else {
        post.starCount++;
        if (!post.stars) {
          post.stars = {};
        }
        post.stars[uid] = true;
      }
    }
    return post;
  });
}
read-and-write.js

Usar uma transação evita que a contagem de estrelas fique incorreta se vários usuários marcarem a mesma postagem com estrela ao mesmo tempo ou se o cliente tiver dados desatualizados. Se a transação for rejeitada, o servidor retorna o valor atual ao cliente, que executa a transação novamente com o valor atualizado. Isso se repete até que a transação seja aceita ou você a cancele.

Incrementos atômicos do lado do servidor

No caso de uso acima, estamos gravando dois valores no banco de dados: o ID do usuário que marca/desmarca a postagem com estrela e a contagem incrementada de estrelas. Se já sabemos que o usuário está estrelando a postagem, podemos usar uma operação de incremento atômico em vez de uma transação.

function addStar(uid, key) {
  import { getDatabase, increment, ref, update } from "firebase/database";
  const dbRef = ref(getDatabase());

  const updates = {};
  updates[`posts/${key}/stars/${uid}`] = true;
  updates[`posts/${key}/starCount`] = increment(1);
  updates[`user-posts/${key}/stars/${uid}`] = true;
  updates[`user-posts/${key}/starCount`] = increment(1);
  update(dbRef, updates);
}
rtdb_social_star_increment.js

function addStar(uid, key) {
  const updates = {};
  updates[`posts/${key}/stars/${uid}`] = true;
  updates[`posts/${key}/starCount`] = firebase.database.ServerValue.increment(1);
  updates[`user-posts/${key}/stars/${uid}`] = true;
  updates[`user-posts/${key}/starCount`] = firebase.database.ServerValue.increment(1);
  firebase.database().ref().update(updates);
}
read-and-write.js

Este código não usa uma operação de transação, portanto, não será executado novamente se houver uma atualização conflitante. Porém, como a operação de incremento acontece diretamente no servidor de banco de dados, não há chance de conflito.

Se você quiser detectar e rejeitar conflitos específicos do aplicativo, como um usuário marcando uma postagem que já marcou com estrela antes, você deverá escrever regras de segurança personalizadas para esse caso de uso.

Trabalhe com dados off-line

Se um cliente perder a conexão de rede, seu aplicativo continuará funcionando corretamente.

Cada cliente conectado a um banco de dados Firebase mantém sua própria versão interna de quaisquer dados ativos. Quando os dados são gravados, eles são gravados primeiro nesta versão local. O cliente Firebase então sincroniza esses dados com os servidores de banco de dados remotos e com outros clientes com base no "melhor esforço".

Como resultado, todas as gravações no banco de dados acionam eventos locais imediatamente, antes que qualquer dado seja gravado no servidor. Isso significa que seu aplicativo permanece responsivo independentemente da latência ou conectividade da rede.

Depois que a conectividade for restabelecida, seu aplicativo receberá o conjunto apropriado de eventos para que o cliente sincronize com o estado atual do servidor, sem precisar escrever nenhum código personalizado.

Falaremos mais sobre comportamento offline em Saiba mais sobre recursos online e offline .

Próximos passos

• Trabalhando com listas de dados
• Aprenda como estruturar dados
• Saiba mais sobre recursos on-line e off-line