Què és la base de dades en temps real de Firebase?

La base de dades en temps real de Firebase és una base de dades NoSQL allotjada al núvol que permet emmagatzemar i sincronitzar dades entre els teus usuaris en temps real. Aquesta base de dades és ideal per a aplicacions que necessiten actualitzacions instantànies, com ara aplicacions de xat, jocs multijugador, aplicacions de col·laboració en temps real, etc.

Característiques clau:

  • Sincronització en temps real: Les dades es sincronitzen automàticament entre tots els clients connectats.
  • Desconnexió automàtica: Les dades es mantenen disponibles fins i tot quan els usuaris estan fora de línia.
  • Escalabilitat: Pot gestionar grans volums de dades i usuaris simultanis.
  • Seguretat: Proporciona regles de seguretat basades en JSON per controlar l'accés a les dades.

Com funciona?

La base de dades en temps real de Firebase utilitza un model de dades en forma d'arbre JSON. Cada node de l'arbre és un objecte que pot contenir altres objectes, llistes o valors simples. Quan es realitza un canvi en qualsevol part de l'arbre, aquest canvi es propaga automàticament a tots els clients connectats.

Exemple de model de dades:

{
  "users": {
    "user1": {
      "name": "John Doe",
      "email": "[email protected]"
    },
    "user2": {
      "name": "Jane Smith",
      "email": "[email protected]"
    }
  },
  "messages": {
    "message1": {
      "sender": "user1",
      "text": "Hello, world!"
    },
    "message2": {
      "sender": "user2",
      "text": "Hi, John!"
    }
  }
}

Configuració inicial

Pas 1: Crear un projecte a Firebase

  1. Ves a la consola de Firebase.
  2. Crea un nou projecte o selecciona un projecte existent.
  3. Afegeix una aplicació al projecte (Android, iOS o web).

Pas 2: Afegir la base de dades en temps real al projecte

  1. A la consola de Firebase, selecciona "Database" al menú de navegació.
  2. Fes clic a "Create Database" a la secció de la base de dades en temps real.
  3. Selecciona el mode de seguretat (per a desenvolupament, pots seleccionar "Test mode" per permetre l'accés de lectura i escriptura a tothom).

Pas 3: Configurar el SDK de Firebase

Per a aplicacions web:

  1. Afegeix el SDK de Firebase al teu projecte:
    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-database.js"></script>
    
  2. Inicialitza Firebase amb la configuració del teu projecte:
    // Configuració de Firebase
    const firebaseConfig = {
      apiKey: "API_KEY",
      authDomain: "PROJECT_ID.firebaseapp.com",
      databaseURL: "https://PROJECT_ID.firebaseio.com",
      projectId: "PROJECT_ID",
      storageBucket: "PROJECT_ID.appspot.com",
      messagingSenderId: "SENDER_ID",
      appId: "APP_ID"
    };
    
    // Inicialitza Firebase
    firebase.initializeApp(firebaseConfig);
    
    // Obtenir una referència a la base de dades
    const database = firebase.database();
    

Lectura i escriptura de dades bàsiques

Escriptura de dades

Per escriure dades a la base de dades, utilitza el mètode set:

// Referència a la ubicació on es volen escriure les dades
const userRef = database.ref('users/user1');

// Escriptura de dades
userRef.set({
  name: "John Doe",
  email: "[email protected]"
});

Lectura de dades

Per llegir dades de la base de dades, utilitza el mètode once o on:

// Referència a la ubicació des d'on es volen llegir les dades
const userRef = database.ref('users/user1');

// Lectura de dades una vegada
userRef.once('value').then((snapshot) => {
  const data = snapshot.val();
  console.log(data);
});

// Lectura de dades en temps real
userRef.on('value', (snapshot) => {
  const data = snapshot.val();
  console.log(data);
});

Exercici pràctic

Objectiu:

Crear una aplicació web simple que permeti als usuaris enviar i veure missatges en temps real.

Passos:

  1. Configura un projecte de Firebase i afegeix la base de dades en temps real.
  2. Crea una interfície d'usuari amb un formulari per enviar missatges i una llista per mostrar els missatges.
  3. Implementa la funcionalitat per enviar missatges a la base de dades.
  4. Implementa la funcionalitat per mostrar els missatges en temps real.

Codi exemple:

<!DOCTYPE html>
<html>
<head>
  <title>Chat en temps real</title>
  <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-database.js"></script>
</head>
<body>
  <h1>Chat en temps real</h1>
  <form id="messageForm">
    <input type="text" id="messageInput" placeholder="Escriu un missatge..." required>
    <button type="submit">Enviar</button>
  </form>
  <ul id="messagesList"></ul>

  <script>
    // Configuració de Firebase
    const firebaseConfig = {
      apiKey: "API_KEY",
      authDomain: "PROJECT_ID.firebaseapp.com",
      databaseURL: "https://PROJECT_ID.firebaseio.com",
      projectId: "PROJECT_ID",
      storageBucket: "PROJECT_ID.appspot.com",
      messagingSenderId: "SENDER_ID",
      appId: "APP_ID"
    };

    // Inicialitza Firebase
    firebase.initializeApp(firebaseConfig);

    // Obtenir una referència a la base de dades
    const database = firebase.database();

    // Referència a la ubicació dels missatges
    const messagesRef = database.ref('messages');

    // Enviar missatge
    document.getElementById('messageForm').addEventListener('submit', (e) => {
      e.preventDefault();
      const message = document.getElementById('messageInput').value;
      messagesRef.push().set({
        text: message
      });
      document.getElementById('messageInput').value = '';
    });

    // Mostrar missatges en temps real
    messagesRef.on('child_added', (snapshot) => {
      const message = snapshot.val();
      const li = document.createElement('li');
      li.textContent = message.text;
      document.getElementById('messagesList').appendChild(li);
    });
  </script>
</body>
</html>

Resum

En aquesta secció, hem après què és la base de dades en temps real de Firebase, com configurar-la i com realitzar operacions bàsiques de lectura i escriptura de dades. També hem creat una aplicació de xat simple per veure com funciona la sincronització en temps real. En la següent secció, explorarem més a fons la lectura i escriptura de dades, així com les regles de seguretat per protegir les nostres dades.

Curs de Firebase

Mòdul 1: Introducció a Firebase

Mòdul 2: Autenticació de Firebase

Mòdul 3: Base de dades en temps real de Firebase

Mòdul 4: Cloud Firestore

Mòdul 5: Emmagatzematge de Firebase

Mòdul 6: Missatgeria en el núvol de Firebase

Mòdul 7: Analítica de Firebase

Mòdul 8: Funcions de Firebase

Mòdul 9: Monitoratge del rendiment de Firebase

Mòdul 10: Laboratori de proves de Firebase

Mòdul 11: Temes avançats de Firebase

© Copyright 2024. Tots els drets reservats