Apps met Firebase-authenticatie en realtime database · Les

Gegevens lezen en schrijven

Leer basisbewerkingen voor maken, lezen, bijwerken en verwijderen (CRUD) uit te voeren in uw Realtime Database

Les 2 van 411 stappen

Gegevens lezen en schrijven is een gratis Apps met Firebase-authenticatie en realtime database-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Apps met Firebase-authenticatie en realtime database. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Apps met Firebase-authenticatie en realtime database bevat in totaal 4 lessen.

CRUD: maken, lezen, bijwerken, verwijderen

Welkom bij het werken met Firebase Realtime Database! Vandaag beheersen we de fundamentele bewerkingen die bekendstaan als CRUD:

  • Create: nieuwe gegevens toevoegen
  • Read: bestaande gegevens ophalen
  • Update: bestaande gegevens wijzigen
  • Delete: gegevens verwijderen

Deze bewerkingen vormen de basis voor vrijwel elke toepassing die informatie opslaat.

Een databaseverwijzing ophalen

Voordat we CRUD-bewerkingen kunnen uitvoeren, moeten we een verwijzing naar onze Realtime Database ophalen. Deze verwijzing wijst naar een specifieke locatie in de JSON-boom van je database.

Zorg eerst dat Firebase in je app is geïnitialiseerd. Daarna kun je de database-instantie en een verwijzing naar een specifiek pad ophalen.

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.");

Gegevens maken met set()

De methode set() wordt gebruikt om gegevens te schrijven naar of te overschrijven op een specifieke databaseverwijzing. Het is vergelijkbaar met het toewijzen van een waarde aan een sleutel in een JSON-object.

Als er al gegevens bestaan op het opgegeven pad, vervangt set() deze volledig door de nieuwe gegevens die je opgeeft.

Gegevens maken met push()

Wanneer je werkt met lijsten met gegevens, zoals een chatfeed of een lijst met blogberichten, wil je vaak nieuwe items toevoegen zonder bestaande items te overschrijven. De methode push() is hiervoor ideaal.

push() genereert voor elk nieuw onderliggend item een unieke sleutel op basis van een tijdstempel. Zo worden nieuwe gegevens altijd als een afzonderlijke vermelding toegevoegd.

Code: gegevens schrijven (set en push)

Laten we set() en push() in actie bekijken. We maken één gebruiker met set() en voegen daarna meerdere berichten toe met 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.");
});

Gegevens lezen met onValue()

Om gegevens op te halen biedt Firebase Realtime Database krachtige realtime-listeners. De methode onValue() wordt gebruikt om te luisteren naar wijzigingen bij een databaseverwijzing.

Telkens wanneer gegevens op die locatie (of op een onderliggende locatie) veranderen, wordt de opgegeven callbackfunctie aangeroepen met een DataSnapshot met de nieuwe gegevens.

Code: gegevens lezen (onValue)

Dit voorbeeld laat zien hoe je onValue() gebruikt om naar alle berichten in ons pad 'messages' te luisteren en ze te loggen. Het wordt in realtime bijgewerkt wanneer er nieuwe berichten worden toegevoegd!

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...");

Gegevens bijwerken met update()

Soms hoef je alleen specifieke velden van een bestaand record te wijzigen zonder het hele knooppunt te overschrijven. Daarvoor gebruik je de methode update().

update() accepteert een object met sleutel-waardeparen. De nieuwe waarden worden samengevoegd met de bestaande gegevens op het opgegeven pad, terwijl andere velden ongewijzigd blijven.

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);
});

Gegevens verwijderen met remove()

Wanneer gegevens niet meer nodig zijn, kun je ze verwijderen met de methode remove(). Deze methode verwijdert de gegevens op de opgegeven databaseverwijzing, inclusief alle onderliggende knooppunten.

Wees voorzichtig met remove()! Zodra gegevens zijn verwijderd, zijn ze voorgoed uit je database verdwenen.

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);

Korte controle: CRUD-bewerkingen

Welke Firebase Realtime Database-methode gebruik je om een nieuw item aan een lijst toe te voegen zonder bestaande gegevens te overschrijven, waarbij elk nieuw item een unieke sleutel krijgt?

Samenvatting en volgende stappen

Goed gedaan! Je hebt de belangrijkste CRUD-bewerkingen voor Firebase Realtime Database geleerd:

  • Maken: Gebruik set() om gegevens te schrijven of te overschrijven, of push() voor unieke sleutels in lijsten.
  • Lezen: Gebruik onValue() om naar realtime wijzigingen in gegevens te luisteren.
  • Bijwerken: Gebruik update() om specifieke velden te wijzigen zonder het hele knooppunt te vervangen.
  • Verwijderen: Gebruik remove() om gegevens op een specifieke verwijzing te verwijderen.

Inzicht in deze bewerkingen is essentieel voor het bouwen van dynamische, gegevensgestuurde applicaties. Vervolgens bekijken we aanbevolen methoden voor het structureren van je gegevens, zodat je prestaties en schaalbaarheid optimaliseert!

Gratis beginnen

Leer Apps met Firebase-authenticatie en realtime database met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
11
Lessen
44

Veelgestelde vragen

Is de les “Gegevens lezen en schrijven” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Apps met Firebase-authenticatie en realtime database, waaronder “Gegevens lezen en schrijven”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Apps met Firebase-authenticatie en realtime database bevat in totaal 4 lessen.

Wat leer ik in “Gegevens lezen en schrijven”?

Leer basisbewerkingen voor maken, lezen, bijwerken en verwijderen (CRUD) uit te voeren in uw Realtime Database Je oefent met Apps met Firebase-authenticatie en realtime database door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Apps met Firebase-authenticatie en realtime database te beginnen?

Ervaring vooraf is niet nodig. Apps met Firebase-authenticatie en realtime database op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Gegevens lezen en schrijven”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Apps met Firebase-authenticatie en realtime database?

Ja. Elke les over Apps met Firebase-authenticatie en realtime database bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. De basisprincipes van Realtime Database
  2. Gegevens lezen en schrijven
  3. Uw gegevens structureren
  4. Luisteren naar realtimewijzigingen
← Terug naar Apps met Firebase-authenticatie en realtime database