Applikationer med Firebase Auth och Realtime Database · Lektion

Läsa och skriva data

Lär dig utföra grundläggande create-, read-, update- och delete-operationer (CRUD) i din Realtime Database

Lektion 2 av 411 steg

Läsa och skriva data är en gratis lektion i Applikationer med Firebase Auth och Realtime Database på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Applikationer med Firebase Auth och Realtime Database, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Applikationer med Firebase Auth och Realtime Database innehåller totalt 4 lektioner.

CRUD: Skapa, läs, uppdatera, ta bort

Välkommen till arbetet med Firebase Realtime Database! I dag lär vi oss de grundläggande åtgärderna som kallas CRUD:

Create: Lägga till nya data
Read: Hämta befintliga data
Update: Ändra befintliga data
Delete: Ta bort data

Dessa åtgärder utgör grunden för nästan alla applikationer som lagrar information.

Hämta en databasreferens

Innan vi kan utföra CRUD-åtgärder måste vi hämta en referens till vår Realtime Database. Denna referens pekar på en specifik plats i databasens JSON-träd.

Kontrollera först att Firebase är initierat i appen. Därefter kan ni hämta databasinstansen och en referens till en specifik sökväg.

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

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Get a reference to the database service
const db = getDatabase(app);

// Get a reference to the 'users' path
const usersRef = ref(db, 'users');
console.log("Database reference obtained.");

Skapa data med set()

Metoden set() används för att skriva eller skriva över data vid en specifik databasreferens. Det motsvarar att tilldela ett värde till en nyckel i ett JSON-objekt.

Om det redan finns data vid den angivna sökvägen ersätter set() den helt med de nya data ni anger.

Skapa data med push()

När ni arbetar med listor med data, till exempel ett chattflöde eller en lista med blogginlägg, vill ni ofta lägga till nya objekt utan att skriva över befintliga. Metoden push() passar perfekt för detta.

push() genererar en unik, tidsstämpelbaserad nyckel för varje nytt underordnat objekt. Det säkerställer att nya data alltid läggs till som en separat post.

Kod: Skriva data (set och push)

Vi tittar på set() och push() i praktiken. Vi skapar en enskild användare med set() och lägger sedan till flera meddelanden med push().

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

// Assume Firebase is initialized and 'db' is available
const firebaseConfig = { databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com" }; // Simplified for demo
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

// 1. Using set() to create/overwrite a user
const userRef = ref(db, 'users/user123');
set(userRef, {
  name: "Alice",
  email: "alice@example.com"
}).then(() => {
  console.log("User 'Alice' set.");
}).catch(error => {
  console.error("Error setting user: ", error);
});

// 2. Using push() to add messages to a list
const messagesRef = ref(db, 'messages');
push(messagesRef, {
  text: "Hello Firebase!",
  timestamp: Date.now()
}).then(() => {
  console.log("Message 1 pushed.");
});

push(messagesRef, {
  text: "This is a second message.",
  timestamp: Date.now()
}).then(() => {
  console.log("Message 2 pushed.");
});

Läsa data med onValue()

För att hämta data erbjuder Firebase Realtime Database kraftfulla lyssnare i realtid. Metoden onValue() används för att lyssna efter ändringar vid en databasreferens.

Så snart data på den platsen (eller någon underordnad plats) ändras utlöses den angivna callback-funktionen med en DataSnapshot som innehåller de nya uppgifterna.

Kod: Läsa data (onValue)

Det här exemplet visar hur du använder onValue() för att lyssna efter och logga alla meddelanden i vår sökväg 'messages'. Det uppdateras i realtid om nya meddelanden läggs till!

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

// Assume Firebase is initialized and 'db' is available
const firebaseConfig = { databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com" }; // Simplified
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

const messagesRef = ref(db, 'messages');

// Listen for data changes
onValue(messagesRef, (snapshot) => {
  const data = snapshot.val();
  if (data) {
    console.log("--- Current Messages ---");
    // Iterate over the messages if they are an object
    Object.keys(data).forEach(key => {
      console.log(`ID: ${key}, Text: ${data[key].text}`);
    });
    console.log("------------------------");
  } else {
    console.log("No messages found.");
  }
}, (error) => {
  console.error("Error reading messages: ", error);
});

console.log("Listening for messages...");

Uppdatera data med update()

Ibland behöver du bara ändra specifika fält i en befintlig post utan att skriva över hela noden. Det är då metoden update() kommer till användning.

update() tar ett objekt som innehåller nyckel-värdepar. Den sammanfogar de nya värdena med befintliga data på den angivna sökvägen och lämnar övriga fält orörda.

import { initializeApp } from "firebase/app";
import { getDatabase, ref, update } from "firebase/database";

// Assume Firebase is initialized and 'db' is available
const firebaseConfig = { databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com" }; // Simplified
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

// Update specific fields of a user
const userRef = ref(db, 'users/user123');
update(userRef, {
  email: "alice.smith@example.com",
  age: 30
}).then(() => {
  console.log("User 'Alice' updated.");
}).catch(error => {
  console.error("Error updating user: ", error);
});

Ta bort data med remove()

När data inte längre behövs kan du ta bort den med metoden remove(). Metoden tar bort data på den angivna databasreferensen, inklusive alla dess underordnade noder.

Var försiktig med remove()! När data har tagits bort är den borta för alltid från databasen.

import { initializeApp } from "firebase/app";
import { getDatabase, ref, remove } from "firebase/database";

// Assume Firebase is initialized and 'db' is available
const firebaseConfig = { databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com" }; // Simplified
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

// Delete a specific user
const userToDeleteRef = ref(db, 'users/user123');
remove(userToDeleteRef).then(() => {
  console.log("User 'user123' deleted.");
}).catch(error => {
  console.error("Error deleting user: ", error);
});

// To delete a specific message (e.g., if you know its ID)
// const specificMessageRef = ref(db, 'messages/-M_someUniqueId');
// remove(specificMessageRef);

Snabbtest: CRUD-operationer

Vilken Firebase Realtime Database-metod bör du använda för att lägga till ett nytt objekt i en lista utan att skriva över befintliga data, samtidigt som varje nytt objekt får en unik nyckel?

Besvara frågan i den interaktiva lektionen

Sammanfattning och nästa steg

Bra jobbat! Du har lärt dig de grundläggande CRUD-operationerna för Firebase Realtime Database:

Skapa: Använd set() för att skriva över eller skriva data, eller push() för unika nycklar i listor.
Läsa: Använd onValue() för att lyssna efter dataändringar i realtid.
Uppdatera: Använd update() för att ändra specifika fält utan att ersätta hela noden.
Ta bort: Använd remove() för att ta bort data på en specifik referens.

Att förstå dessa operationer är avgörande för att bygga dynamiska, datadrivna applikationer. Härnäst utforskar vi bästa praxis för att strukturera dina data och optimera prestanda och skalbarhet!

Gratis att börja

Lär dig Applikationer med Firebase Auth och Realtime Database med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 11
Lektioner: 44

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Läsa och skriva data” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Applikationer med Firebase Auth och Realtime Database, inklusive ”Läsa och skriva data”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Applikationer med Firebase Auth och Realtime Database innehåller totalt 4 lektioner.

Vad lär jag mig i ”Läsa och skriva data”?

Lär dig utföra grundläggande create-, read-, update- och delete-operationer (CRUD) i din Realtime Database Ni övar på Applikationer med Firebase Auth och Realtime Database med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Applikationer med Firebase Auth och Realtime Database?

Du behöver inga förkunskaper. Utbildningen i Applikationer med Firebase Auth och Realtime Database på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Läsa och skriva data”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Applikationer med Firebase Auth och Realtime Database-lektionen?

Ja. Varje Applikationer med Firebase Auth och Realtime Database-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Applikationer med Firebase Auth och Realtime Database