Utiliser 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 dans 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

Lire et écrire des listes

Ajouter des éléments à 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 conflit d'écriture. La clé unique générée par push() est basée sur un code temporel. Les éléments de la liste sont donc 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 en savoir plus, consultez l'exemple de distribution ramifiée des données .

Par exemple, push() peut être utilisé pour ajouter un nouveau post à une liste de posts 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

Écouter les événements 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 éléments peut être utile pour écouter les modifications apportées à un nœud spécifique d'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 post, comme illustré 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

Écouter 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 est parfois utile d'écouter les événements de valeur sur une référence de liste.

L'association d'un observateur value à une liste de données renvoie la liste complète des données sous forme d'instantané unique, que vous pouvez ensuite parcourir en boucle pour accéder à des enfants individuels.

Même lorsqu'il n'y a qu'une seule correspondance pour la requête, l'instantané reste une liste. Il ne contient qu'un seul élément. Pour accéder à l'élément, vous devez parcourir le résultat en boucle :

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 extraire tous les enfants d'une liste en une seule opération, plutôt que d'écouter d'autres événements enfants ajoutés.

Trier et filtrer des 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 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 afin de déterminer l'ordre des résultats :

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 récupérer une liste des meilleurs posts 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, combinée à un écouteur enfant synchronise le client avec les posts de l'utilisateur à partir du chemin d'accès dans la base de données en fonction de son ID utilisateur, triés par le nombre d'étoiles que chaque post a reçu. Cette technique d'utilisation des ID comme clés d'index est appelée distribution des données. Pour en savoir plus, consultez la section Structurer votre base de données.

L'appel à la méthode orderByChild() spécifie la clé enfant par laquelle trier les résultats. Dans ce cas, les posts sont triés par la valeur de leur enfant "starCount" respectif. Les requêtes peuvent également être triées par enfants imbriqués, si vos données se présentent comme suit :

"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 trier les éléments de notre 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 en savoir plus sur l'ordre des autres types de données, consultez Ordre des données de requête.

Filtrer les données

Pour filtrer les données, vous pouvez combiner n'importe quelle méthode de limite ou de plage avec une méthode de tri lors de la création 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 maximal 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 au maximum. Si vous avez moins de 100 éléments stockés dans votre base de données Firebase, un événement child_added est déclenché pour chaque élément.

Lorsque des é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, de sorte que le nombre total reste à 100.

L'exemple suivant montre comment l'application de blog d'exemple définit une requête pour récupérer une liste des 100 posts 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 ne définit qu'une requête. Pour synchroniser réellement les données, il doit avoir un écouteur associé.

Filtrer par clé ou par 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 trouver des éléments avec des enfants ayant une valeur spécifique.

Ordre des données de requête

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

orderByChild

Lorsque vous utilisez orderByChild(), les données contenant la clé enfant spécifiée sont triées comme suit :

1. Les enfants dont la valeur de la clé enfant spécifiée est null apparaissent en premier.
2. Les enfants dont la valeur de la clé enfant spécifiée est false apparaissent ensuite. Si plusieurs enfants ont la valeur false, ils sont triés de manière lexicographique par clé.
3. Les enfants dont la valeur de true pour la clé enfant spécifiée apparaissent ensuite. Si plusieurs enfants ont la valeur true, ils sont triés de manière lexicographique par clé.
4. Les enfants ayant une valeur numérique apparaissent 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 de manière lexicographique par ordre croissant. Si plusieurs enfants ont la même valeur pour le nœud enfant spécifié, ils sont triés de manière lexicographique par clé.
6. Les objets apparaissent en dernier et sont triés de manière lexicographique par clé par ordre croissant.

orderByKey

Lorsque vous utilisez orderByKey() pour trier vos données, celles-ci sont renvoyées par ordre croissant par clé.

1. Les enfants dont la clé peut être analysée comme un entier 32 bits apparaissent en premier, triés par ordre croissant.
2. Les enfants dont la clé est une valeur de chaîne apparaissent ensuite, triés de manière lexicographique par ordre croissant.

orderByValue

Lorsque vous utilisez orderByValue(), les enfants sont triés par leur valeur. Les critères de tri 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 écouteurs

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 transmettant en tant que paramètre à off(). L'appel de off() à l'emplacement sans arguments supprime tous les écouteurs à cet emplacement.

L'appel de 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.

Étapes suivantes

• Découvrez comment structurer les données.
• Stocker des données hors connexion