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
- Ves a la consola de Firebase.
- Crea un nou projecte o selecciona un projecte existent.
- Afegeix una aplicació al projecte (Android, iOS o web).
Pas 2: Afegir la base de dades en temps real al projecte
- A la consola de Firebase, selecciona "Database" al menú de navegació.
- Fes clic a "Create Database" a la secció de la base de dades en temps real.
- 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:
- 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>
- 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:
- Configura un projecte de Firebase i afegeix la base de dades en temps real.
- Crea una interfície d'usuari amb un formulari per enviar missatges i una llista per mostrar els missatges.
- Implementa la funcionalitat per enviar missatges a la base de dades.
- 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
- Introducció a l'autenticació de Firebase
- Autenticació amb correu electrònic i contrasenya
- Autenticació amb xarxes socials
- Gestió d'usuaris
Mòdul 3: Base de dades en temps real de Firebase
- Introducció a la base de dades en temps real
- Lectura i escriptura de dades
- Estructura de dades i regles de seguretat
- Capacitats fora de línia
Mòdul 4: Cloud Firestore
- Introducció a Cloud Firestore
- Model de dades de Firestore
- Operacions CRUD
- Consultes avançades
- Regles de seguretat
Mòdul 5: Emmagatzematge de Firebase
- Introducció a l'emmagatzematge de Firebase
- Carregar fitxers
- Descarregar fitxers
- Metadades de fitxers i seguretat
Mòdul 6: Missatgeria en el núvol de Firebase
- Introducció a la missatgeria en el núvol
- Enviar notificacions
- Gestionar notificacions
- Funcions avançades de missatgeria
Mòdul 7: Analítica de Firebase
Mòdul 8: Funcions de Firebase
Mòdul 9: Monitoratge del rendiment de Firebase
- Introducció al monitoratge del rendiment
- Configuració del monitoratge del rendiment
- Analitzar dades de rendiment