Leggere e scrivere dati sul web

(Facoltativo) Crea prototipi ed esegui test con Firebase Local Emulator Suite

Prima di parlare di come la tua app legge e scrive in Realtime Database, introduciamo un insieme di strumenti che puoi utilizzare per creare prototipi e testare la funzionalità di Realtime Database: Firebase Local Emulator Suite. Se stai provando diversi modelli di dati, ottimizzando le regole di sicurezza o cercando di trovare il modo più conveniente per interagire con il backend, poter lavorare localmente senza eseguire il deployment di servizi live può essere un'ottima idea.

Un emulatore Realtime Database fa parte della Local Emulator Suite, che consente alla tua app di interagire con i contenuti e la configurazione del database emulato, nonché, facoltativamente, con le risorse del progetto emulato (funzioni, altri database e regole di sicurezza).

L'utilizzo dell'emulatore Realtime Database prevede solo pochi passaggi:

1. Aggiungere una riga di codice alla configurazione di test dell'app per connetterti all'emulatore.
2. Dalla directory root del progetto locale, esegui firebase emulators:start.
3. Effettuare chiamate dal codice del prototipo della tua app utilizzando un SDK della piattaforma Realtime Database come di consueto o utilizzando l'API REST Realtime Database.

È disponibile una procedura dettagliata che coinvolge Realtime Database e Cloud Functions. Ti consigliamo inoltre di dare un'occhiata all'introduzione a Local Emulator Suite.

Ottieni un riferimento al database

Per leggere o scrivere dati dal database, devi avere un'istanza di firebase.database.Reference:

Web

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

Web

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

Nota: se utilizzi l'API con spazio dei nomi precedente firebase.database(), devi includere lo script firebase-database.js insieme a firebase-app.js. Questo passaggio non è necessario quando si utilizza la nuova API modulare import { getDatabase } from "firebase/database".

Scrivi dati

Questo documento illustra le nozioni di base sul recupero dei dati e su come ordinarli e filtrarli in Firebase.

I dati di Firebase vengono recuperati collegando un listener asincrono a un firebase.database.Reference. Il listener viene attivato una volta per lo stato iniziale dei dati e di nuovo ogni volta che i dati cambiano.

Nota: per impostazione predefinita, l'accesso in lettura e scrittura al database è limitato, pertanto solo gli utenti autenticati possono leggere o scrivere dati. Per iniziare senza configurare Authentication, puoi configurare le regole per l'accesso pubblico. In questo modo, il database sarà aperto a chiunque, anche a chi non utilizza la tua app, quindi assicurati di limitare nuovamente il database quando configuri l'autenticazione.

Operazioni di scrittura di base

Per le operazioni di scrittura di base, puoi utilizzare set() per salvare i dati in un riferimento specificato, sostituendo i dati esistenti in quel percorso. Ad esempio, un'applicazione di social blogging potrebbe aggiungere un utente con set() come segue:

Web

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

Web

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

L'utilizzo di set() sovrascrive i dati nella posizione specificata, inclusi eventuali nodi secondari.

Lettura di dati

Ascolta gli eventi di valore

Per leggere i dati in un percorso e ascoltare le modifiche, utilizza onValue() per osservare gli eventi. Puoi utilizzare questo evento per leggere snapshot statici dei contenuti in un determinato percorso, così come esistevano al momento dell'evento. Questo metodo viene attivato una volta quando il listener viene collegato e di nuovo ogni volta che i dati, inclusi i nodi secondari, cambiano. Al callback dell'evento viene passato uno snapshot contenente tutti i dati in quella posizione, inclusi i dati secondari. Se non sono presenti dati, l'istantanea restituirà false quando chiami exists() e null quando chiami val().

Importante: onValue() viene chiamata ogni volta che i dati vengono modificati nel riferimento al database specificato, comprese le modifiche ai figli. Per limitare le dimensioni degli snapshot, collegali solo al livello più basso necessario per monitorare le modifiche. Ad esempio, non è consigliabile collegare un listener alla radice del database.

L'esempio seguente mostra un'applicazione di social blogging che recupera il numero di stelle di un post dal database:

Web

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

Web

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

Il listener riceve un snapshot che contiene i dati nella posizione specificata nel database al momento dell'evento. Puoi recuperare i dati in snapshot con il metodo val().

Lettura dei dati una volta

Leggi i dati una volta con get()

L'SDK è progettato per gestire le interazioni con i server di database, indipendentemente dal fatto che la tua app sia online o offline.

In genere, per leggere i dati dovresti utilizzare le tecniche degli eventi di valore descritte sopra per ricevere notifiche sugli aggiornamenti dei dati dal backend. Le tecniche di ascolto riducono l'utilizzo e la fatturazione e sono ottimizzate per offrire agli utenti la migliore esperienza quando sono online e offline.

Se i dati ti servono una sola volta, puoi utilizzare get() per ottenere uno snapshot dei dati dal database. Se per qualsiasi motivo get() non è in grado di restituire il valore del server, il client eseguirà il probe della cache dello spazio di archiviazione locale e restituirà un errore se il valore non viene ancora trovato.

L'utilizzo non necessario di get() può aumentare l'utilizzo della larghezza di banda e causare una perdita di prestazioni, che può essere evitata utilizzando un listener in tempo reale come mostrato sopra.

Web

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

Web

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

Leggi i dati una volta con un osservatore

In alcuni casi potresti voler restituire immediatamente il valore dalla cache locale, anziché verificare la presenza di un valore aggiornato sul server. In questi casi, puoi utilizzare once() per recuperare immediatamente i dati dalla cache del disco locale.

Questa opzione è utile per i dati che devono essere caricati una sola volta e che non dovrebbero cambiare di frequente o richiedere un ascolto attivo. Ad esempio, l'app di blogging negli esempi precedenti utilizza questo metodo per caricare il profilo di un utente quando inizia a creare un nuovo post:

Web

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

Web

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

Aggiornamento o eliminazione dei dati

Aggiorna campi specifici

Per scrivere contemporaneamente in nodi secondari specifici di un nodo senza sovrascrivere altri nodi secondari, utilizza il metodo update().

Quando chiami update(), puoi aggiornare i valori secondari di livello inferiore specificando un percorso per la chiave. Se i dati vengono archiviati in più località per una scalabilità migliore, puoi aggiornare tutte le istanze di questi dati utilizzando il fan-out dei dati.

Ad esempio, un'app di social blogging potrebbe creare un post e aggiornarlo contemporaneamente nel feed delle attività recenti e nel feed delle attività dell'utente che ha pubblicato il post utilizzando un codice come questo:

Web

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

Web

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

Questo esempio utilizza push() per creare un post nel nodo contenente i post per tutti gli utenti in /posts/$postid e recuperare contemporaneamente la chiave. La chiave può quindi essere utilizzata per creare una seconda voce nei post dell'utente all'indirizzo /user-posts/$userid/$postid.

Utilizzando questi percorsi, puoi eseguire aggiornamenti simultanei in più posizioni nell'albero JSON con una singola chiamata a update(), ad esempio come questo esempio crea il nuovo post in entrambe le posizioni. Gli aggiornamenti simultanei eseguiti in questo modo sono atomici: o tutti gli aggiornamenti vanno a buon fine o tutti gli aggiornamenti non vanno a buon fine.

Aggiungi un callback di completamento

Se vuoi sapere quando è stato eseguito il commit dei dati, puoi aggiungere un callback di completamento. Sia set() che update() accettano un callback di completamento facoltativo che viene chiamato quando la scrittura è stata eseguita nel database. Se la chiamata non è andata a buon fine, al callback viene passato un oggetto di errore che indica il motivo dell'errore.

Web

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

Web

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

Elimina dati

Il modo più semplice per eliminare i dati è chiamare remove() su un riferimento alla posizione dei dati.

Puoi anche eliminare specificando null come valore per un'altra operazione di scrittura, ad esempio set() o update(). Puoi utilizzare questa tecnica con update() per eliminare più elementi secondari in una singola chiamata API.

Ricevi un Promise

Per sapere quando i dati vengono sottoposti a commit sul server Firebase Realtime Database, puoi utilizzare un Promise. Sia set() che update() possono restituire un Promise che puoi utilizzare per sapere quando viene eseguito il commit della scrittura nel database.

Scollega i listener

I callback vengono rimossi chiamando il metodo off() sul riferimento al database Firebase.

Puoi rimuovere un singolo listener passandolo come parametro a off(). La chiamata di off() nella posizione senza argomenti rimuove tutti i listener in quella posizione.

La chiamata di off() su un listener principale non rimuove automaticamente i listener registrati sui relativi nodi secondari; off() deve essere chiamato anche su tutti i listener secondari per rimuovere il callback.

Salva i dati come transazioni

Quando utilizzi dati che potrebbero essere danneggiati da modifiche simultanee, come i contatori incrementali, puoi utilizzare un'operazione di transazione. Puoi assegnare a questa operazione una funzione di aggiornamento e un callback di completamento facoltativo. La funzione di aggiornamento accetta lo stato attuale dei dati come argomento e restituisce il nuovo stato desiderato che vuoi scrivere. Se un altro client scrive nella posizione prima che il nuovo valore venga scritto correttamente, la funzione di aggiornamento viene chiamata di nuovo con il nuovo valore corrente e la scrittura viene riprovata.

Ad esempio, nell'app di social blogging di esempio, potresti consentire agli utenti di aggiungere e rimuovere i post da Speciali e monitorare il numero di stelle ricevute da un post come segue:

Web

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

Web

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

L'utilizzo di una transazione impedisce che il conteggio delle stelle sia errato se più utenti aggiungono una stella allo stesso post contemporaneamente o se il client contiene dati obsoleti. Se la transazione viene rifiutata, il server restituisce il valore corrente al client, che esegue nuovamente la transazione con il valore aggiornato. Questo processo si ripete finché la transazione non viene accettata o non viene interrotta.

Nota: poiché la funzione di aggiornamento viene chiamata più volte, deve essere in grado di gestire i dati null. Anche se nel database remoto sono presenti dati, potrebbero non essere memorizzati nella cache locale quando viene eseguita la funzione di transazione, il che genera null per il valore iniziale.

Incrementi atomici lato server

Nel caso d'uso precedente, scriviamo due valori nel database: l'ID dell'utente che aggiunge/rimuove la stella dal post e il conteggio delle stelle incrementato. Se sappiamo già che l'utente ha aggiunto il post ai preferiti, possiamo utilizzare un'operazione di incremento atomico anziché una transazione.

Web

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

Web

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

Questo codice non utilizza un'operazione di transazione, quindi non viene eseguito di nuovo automaticamente se è presente un aggiornamento in conflitto. Tuttavia, poiché l'operazione di incremento avviene direttamente sul server di database, non c'è alcuna possibilità di conflitto.

Se vuoi rilevare e rifiutare i conflitti specifici dell'applicazione, ad esempio un utente che aggiunge una stella a un post a cui l'ha già aggiunta in precedenza, devi scrivere regole di sicurezza personalizzate per quel caso d'uso.

Lavora con i dati offline

Se un client perde la connessione di rete, l'app continuerà a funzionare correttamente.

Ogni client connesso a un database Firebase gestisce la propria versione interna di tutti i dati attivi. Quando i dati vengono scritti, vengono scritti prima in questa versione locale. Il client Firebase sincronizza quindi i dati con i server di database remoti e con altri client in base al principio "best-effort".

Di conseguenza, tutte le scritture nel database attivano immediatamente gli eventi locali, prima che i dati vengano scritti sul server. Ciò significa che la tua app rimane reattiva indipendentemente dalla latenza o dalla connettività di rete.

Una volta ripristinata la connettività, l'app riceve l'insieme appropriato di eventi in modo che il client si sincronizzi con lo stato attuale del server, senza dover scrivere codice personalizzato.

Nota: le API web Firebase Realtime Database non conservano i dati offline al di fuori della sessione. Affinché le scritture vengano mantenute sul server, la pagina web non deve essere chiusa prima che i dati vengano scritti sul server

Parleremo più approfonditamente del comportamento offline in Scopri di più sulle funzionalità online e offline.

Passaggi successivi

• Utilizzo di elenchi di dati
• Scopri come strutturare i dati
• Scopri di più sulle funzionalità online e offline