Travailler avec des listes de données sur le Web

Obtenir une référence de base de données

Pour lire ou écrire des données à partir de la base de données, vous avez besoin d'une instance de firebase.database.Reference :

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

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

Listes de lecture et d'écriture

Ajouter à une liste de données

Utilisez la méthode push() pour ajouter des données à une liste dans les applications multi-utilisateurs. La méthode push() génère une clé unique chaque fois qu'un nouvel enfant est ajouté à la référence Firebase spécifiée. En utilisant ces clés générées automatiquement pour chaque nouvel élément de la liste, plusieurs clients peuvent ajouter des enfants au même emplacement en même temps sans conflits d'écriture. La clé unique générée par push() est basée sur un horodatage, de sorte que les éléments de la liste sont automatiquement classés par ordre chronologique.

Vous pouvez utiliser la référence aux nouvelles données renvoyées par la méthode push() pour obtenir la valeur de la clé générée automatiquement de l'enfant ou définir des données pour l'enfant. La propriété .key d'une référence push() contient la clé générée automatiquement.

Vous pouvez utiliser ces clés générées automatiquement pour simplifier l'aplatissement de votre structure de données. Pour plus d'informations, consultez l' exemple de répartition des données .

Par exemple, push() pourrait être utilisé pour ajouter un nouveau message à une liste de messages dans une application sociale :

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

// Create a new post reference with an auto-generated id
const db = getDatabase();
const postListRef = ref(db, 'posts');
const newPostRef = push(postListRef);
set(newPostRef, {
    // ...
});
rtdb_social_push.js

// Create a new post reference with an auto-generated id
var postListRef = firebase.database().ref('posts');
var newPostRef = postListRef.push();
newPostRef.set({
    // ...
});
lists-of-data.js

Écoutez les événements pour enfants

Les événements enfants sont déclenchés en réponse à des opérations spécifiques qui se produisent sur les enfants d'un nœud à partir d'une opération telle qu'un nouvel enfant ajouté via la méthode push() ou un enfant mis à jour via la méthode update() .

Chacun de ces ensembles peut être utile pour écouter les modifications apportées à un nœud spécifique dans une base de données. Par exemple, une application de blog social peut utiliser ces méthodes ensemble pour surveiller l'activité dans les commentaires d'un message, comme indiqué ci-dessous :

import { getDatabase, ref, onChildAdded, onChildChanged, onChildRemoved } from "firebase/database";

const db = getDatabase();
const commentsRef = ref(db, 'post-comments/' + postId);
onChildAdded(commentsRef, (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

onChildChanged(commentsRef, (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

onChildRemoved(commentsRef, (data) => {
  deleteComment(postElement, data.key);
});
rtdb_social_listen_children.js

var commentsRef = firebase.database().ref('post-comments/' + postId);
commentsRef.on('child_added', (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_changed', (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_removed', (data) => {
  deleteComment(postElement, data.key);
});
lists-of-data.js

Écoutez les événements de valeur

Bien que l'écoute des événements enfants soit la méthode recommandée pour lire des listes de données, il existe des situations où l'écoute des événements de valeur sur une référence de liste est utile.

L'attachement d'un observateur value à une liste de données renverra la liste complète des données sous la forme d'un instantané unique que vous pourrez ensuite parcourir pour accéder à des enfants individuels.

Même lorsqu'il n'y a qu'une seule correspondance pour la requête, l'instantané est toujours une liste ; il ne contient qu'un seul élément. Pour accéder à l'élément, vous devez boucler sur le résultat :

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

const db = getDatabase();
const dbRef = ref(db, '/a/b/c');

onValue(dbRef, (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    const childKey = childSnapshot.key;
    const childData = childSnapshot.val();
    // ...
  });
}, {
  onlyOnce: true
});
rtdb_social_listen_value.js

ref.once('value', (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    var childKey = childSnapshot.key;
    var childData = childSnapshot.val();
    // ...
  });
});
lists-of-data.js

Ce modèle peut être utile lorsque vous souhaitez récupérer tous les enfants d'une liste en une seule opération, plutôt que d'écouter les événements enfants supplémentaires ajoutés.

Trier et filtrer les données

Vous pouvez utiliser la classe Realtime Database Query pour récupérer des données triées par clé, par valeur ou par valeur d'un enfant. Vous pouvez également filtrer le résultat trié sur un nombre spécifique de résultats ou sur une plage de clés ou de valeurs.

Trier les données

Pour récupérer des données triées, commencez par spécifier l'une des méthodes de tri pour déterminer comment les résultats sont triés :

Vous ne pouvez utiliser qu'une seule méthode de tri à la fois. L'appel d'une méthode de tri plusieurs fois dans la même requête génère une erreur.

L'exemple suivant montre comment vous pouvez récupérer une liste des meilleurs messages d'un utilisateur triés par nombre d'étoiles :

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

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

const myUserId = auth.currentUser.uid;
const topUserPostsRef = query(ref(db, 'user-posts/' + myUserId), orderByChild('starCount'));
rtdb_social_most_starred.js

var myUserId = firebase.auth().currentUser.uid;
var topUserPostsRef = firebase.database().ref('user-posts/' + myUserId).orderByChild('starCount');
lists-of-data.js

Cela définit une requête qui, lorsqu'elle est combinée avec un écouteur enfant , synchronise le client avec les messages de l'utilisateur à partir du chemin dans la base de données en fonction de leur ID utilisateur, classés par le nombre d'étoiles que chaque message a reçues. Cette technique d'utilisation des identifiants comme clés d'index est appelée répartition des données, vous pouvez en savoir plus à ce sujet dans Structurez votre base de données .

L'appel à la méthode orderByChild() spécifie la clé enfant par laquelle ordonner les résultats. Dans ce cas, les messages sont triés par la valeur de leur enfant "starCount" respectif. Les requêtes peuvent également être triées par enfants imbriqués, au cas où vous auriez des données qui ressemblent à ceci :

"posts": {
  "ts-functions": {
    "metrics": {
      "views" : 1200000,
      "likes" : 251000,
      "shares": 1200,
    },
    "title" : "Why you should use TypeScript for writing Cloud Functions",
    "author": "Doug",
  },
  "android-arch-3": {
    "metrics": {
      "views" : 900000,
      "likes" : 117000,
      "shares": 144,
    },
    "title" : "Using Android Architecture Components with Firebase Realtime Database (Part 3)",
    "author": "Doug",
  }
},

Dans ce cas, nous pouvons ordonner nos éléments de liste par valeurs imbriquées sous la clé metrics en spécifiant le chemin relatif vers l'enfant imbriqué dans notre appel orderByChild() .

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

const db = getDatabase();
const mostViewedPosts = query(ref(db, 'posts'), orderByChild('metrics/views'));
rtdb_social_most_viewed.js

var mostViewedPosts = firebase.database().ref('posts').orderByChild('metrics/views');
lists-of-data.js

Pour plus d'informations sur la façon dont les autres types de données sont triés, voir Comment les données de requête sont triées .

Filtrage des données

Pour filtrer les données, vous pouvez combiner n'importe laquelle des méthodes de limite ou de plage avec une méthode de tri lors de la construction d'une requête.

Contrairement aux méthodes de tri, vous pouvez combiner plusieurs fonctions de limite ou de plage. Par exemple, vous pouvez combiner les méthodes startAt() et endAt() pour limiter les résultats à une plage de valeurs spécifiée.

Limiter le nombre de résultats

Vous pouvez utiliser les méthodes limitToFirst() et limitToLast() pour définir un nombre maximum d'enfants à synchroniser pour un événement donné. Par exemple, si vous utilisez limitToFirst() pour définir une limite de 100, vous ne recevez initialement que 100 événements child_added . Si vous avez moins de 100 éléments stockés dans votre base de données Firebase, un événement child_added se déclenche pour chaque élément.

Au fur et à mesure que les éléments changent, vous recevez des événements child_added pour les éléments qui entrent dans la requête et des événements child_removed pour les éléments qui en sortent afin que le nombre total reste à 100.

L'exemple suivant montre comment l'exemple d'application de blog définit une requête pour récupérer une liste des 100 messages les plus récents de tous les utilisateurs :

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

const db = getDatabase();
const recentPostsRef = query(ref(db, 'posts'), limitToLast(100));
rtdb_social_recent.js

var recentPostsRef = firebase.database().ref('posts').limitToLast(100);
lists-of-data.js

Cet exemple définit uniquement une requête, pour synchroniser réellement les données dont elle a besoin pour avoir un écouteur attaché.

Filtrer par clé ou valeur

Vous pouvez utiliser startAt() , startAfter() , endAt() , endBefore() et equalTo() pour choisir des points de départ, de fin et d'équivalence arbitraires pour les requêtes. Cela peut être utile pour paginer des données ou rechercher des éléments avec des enfants qui ont une valeur spécifique.

Comment les données de la requête sont triées

Cette section explique comment les données sont triées par chacune des méthodes de tri dans la classe Query .

orderByChild

Lors de l'utilisation orderByChild() , les données contenant la clé enfant spécifiée sont triées comme suit :

1. Les enfants avec une valeur null pour la clé enfant spécifiée viennent en premier.
2. Les enfants avec une valeur false pour la clé enfant spécifiée viennent ensuite. Si plusieurs enfants ont la valeur false , ils sont triés lexicographiquement par clé.
3. Les enfants avec une valeur true pour la clé enfant spécifiée viennent ensuite. Si plusieurs enfants ont la valeur true , ils sont triés lexicographiquement par clé.
4. Les enfants avec une valeur numérique viennent ensuite, triés par ordre croissant. Si plusieurs enfants ont la même valeur numérique pour le nœud enfant spécifié, ils sont triés par clé.
5. Les chaînes viennent après les nombres et sont triées lexicographiquement par ordre croissant. Si plusieurs enfants ont la même valeur pour le nœud enfant spécifié, ils sont triés lexicographiquement par clé.
6. Les objets viennent en dernier et sont triés lexicographiquement par clé dans l'ordre croissant.

orderByKey

Lorsque vous utilisez orderByKey() pour trier vos données, les données sont renvoyées dans l'ordre croissant par clé.

1. Les enfants avec une clé qui peut être analysée comme un entier 32 bits viennent en premier, triés par ordre croissant.
2. Les enfants avec une valeur de chaîne comme clé viennent ensuite, triés lexicographiquement par ordre croissant.

orderByValue

Lors de l'utilisation orderByValue() , les enfants sont triés par leur valeur. Les critères de classement sont les mêmes que dans orderByChild() , sauf que la valeur du nœud est utilisée à la place de la valeur d'une clé enfant spécifiée.

Détacher les auditeurs

Les rappels sont supprimés en appelant la méthode off() sur votre référence de base de données Firebase.

Vous pouvez supprimer un seul écouteur en le passant comme paramètre à off() . L'appel off() à l'emplacement sans argument supprime tous les écouteurs à cet emplacement.

L'appel off() sur un écouteur parent ne supprime pas automatiquement les écouteurs enregistrés sur ses nœuds enfants ; off() doit également être appelé sur tous les écouteurs enfants pour supprimer le rappel.

Prochaines étapes

• Apprendre à structurer les données
• Stocker les données hors ligne