Applikationer med Firebase Auth och Realtime Database · Lektion

Grundläggande datafrågor

Utför grundläggande frågor för att hämta specifika delmängder av data från din Realtime Database

Lektion 1 av 412 steg

Grundläggande datafrågor är en gratis lektion i Applikationer med Firebase Auth och Realtime Database på CoddyKit. Detta är lektion 1 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.

Introduktion till databassökningar

Välkommen till grundläggande datasökningar! I den här lektionen lär du dig hur du effektivt hämtar specifika data från Firebase Realtime Database.

En databassökning är som att ställa en precis fråga till databasen. I stället för att hämta alla data hämtar du bara det du behöver, vilket sparar bandbredd och förbättrar applikationens prestanda.

Vi använder Firebase JavaScript SDK i våra exempel. Utgångspunkten för alla sökningar är firebase.database().ref(), som pekar på en specifik plats i databasen.

Exempeldata och grundläggande konfiguration

Först konfigurerar vi en enkel HTML-sida som interagerar med Firebase och fyller på med exempeldata. Den fungerar som vår "huvudingång" i exemplen.

Vi använder en enkel datauppsättning med "users", där varje användare har ett name, ett age och en city.

Viktigt: Ersätt YOUR_API_KEY, YOUR_PROJECT_ID och så vidare med den faktiska konfigurationen för ditt Firebase-projekt.

<!DOCTYPE html>
<html>
<head>
  <title>Firebase Query Demo</title>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
</head>
<body>
  <h1>Firebase Query Setup</h1>
  <p>Check your browser's console for output.</p>

  <script>
    // Your Firebase project configuration
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      databaseURL: "https://YOUR_PROJECT_ID-default-rtdb.firebaseio.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    const db = firebase.database();

    // Reference to the 'users' node
    const usersRef = db.ref('users');

    // Sample data to write (only if not already present)
    const sampleUsers = {
      "user1": { "name": "Alice", "age": 30, "city": "New York" },
      "user2": { "name": "Bob", "age": 25, "city": "London" },
      "user3": { "name": "Charlie", "age": 35, "city": "New York" },
      "user4": { "name": "David", "age": 25, "city": "Paris" }
    };

    // Write data to the database (only once for demo)
    usersRef.once('value', snapshot => {
      if (!snapshot.exists()) {
        usersRef.set(sampleUsers)
          .then(() => console.log('Sample data written successfully!'))
          .catch(error => console.error('Error writing sample data:', error));
      } else {
        console.log('Sample data already exists. Skipping write.');
      }
    });

    console.log('Firebase initialized and sample data check complete.');
  </script>
</body>
</html>

Sortera data: orderByChild()

Ett av de vanligaste sätten att sortera dina data är att använda orderByChild(). Metoden sorterar de underordnade noderna till en viss referens efter värdet på en angiven underordnad nyckel.

Om du till exempel har en lista med användare och varje användare har egenskapen 'age' kan du använda orderByChild('age') för att sortera dem efter ålder.

Den tar ett argument: namnet på den underordnade nyckel som sorteringen ska baseras på.
Resultaten returneras som standard i stigande ordning.

orderByChild() i praktiken

Låt oss hämta våra användare sorterade efter deras age. Resultatet visar användarna från yngst till äldst.

Kör koden och kontrollera resultatet i konsolen eller listan på sidan!

<!DOCTYPE html>
<html>
<head>
  <title>OrderByChild Demo</title>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
</head>
<body>
  <h1>OrderByChild Query</h1>
  <p>Users ordered by age:</p>
  <ul id="user-list"></ul>

  <script>
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      databaseURL: "https://YOUR_PROJECT_ID-default-rtdb.firebaseio.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
    firebase.initializeApp(firebaseConfig);
    const db = firebase.database();
    const usersRef = db.ref('users');

    usersRef.orderByChild('age').on('value', (snapshot) => {
      const userList = document.getElementById('user-list');
      userList.innerHTML = ''; // Clear previous list
      snapshot.forEach((childSnapshot) => {
        const user = childSnapshot.val();
        const li = document.createElement('li');
        li.textContent = `${user.name} (Age: ${user.age}, City: ${user.city})`;
        userList.appendChild(li);
      });
      console.log('Users ordered by age:', snapshot.val());
    }, (error) => {
      console.error('Error fetching data:', error);
    });
  </script>
</body>
</html>

Andra sorteringsmetoder: orderByKey() och orderByValue()

Förutom orderByChild() erbjuder Firebase Realtime Database två andra sorteringsmetoder:

orderByKey(): Sorterar resultaten efter de underordnade nodernas nycklar. Detta är användbart när nycklarna representerar ID:n eller sekventiella tal.
orderByValue(): Används när de underordnade noderna själva är enkla primitiva värden (strängar, tal eller booleska värden) i stället för objekt. Den sorterar direkt efter dessa värden.

Kom ihåg att du bara kan använda en orderBy-metod per sökning.

Exempel med orderByKey()

Låt oss se orderByKey() i praktiken. Detta sorterar våra användare efter deras unika användar-ID:n (till exempel 'user1' och 'user2').

Detta är ofta standardbeteendet om ingen orderBy anges, men genom att använda den uttryckligen blir avsikten tydligare.

<!DOCTYPE html>
<html>
<head>
  <title>OrderByKey Demo</title>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
</head>
<body>
  <h1>OrderByKey Query</h1>
  <p>Users ordered by key:</p>
  <ul id="user-list"></ul>

  <script>
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      databaseURL: "https://YOUR_PROJECT_ID-default-rtdb.firebaseio.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
    firebase.initializeApp(firebaseConfig);
    const db = firebase.database();
    const usersRef = db.ref('users');

    usersRef.orderByKey().on('value', (snapshot) => {
      const userList = document.getElementById('user-list');
      userList.innerHTML = '';
      snapshot.forEach((childSnapshot) => {
        const user = childSnapshot.val();
        const key = childSnapshot.key;
        const li = document.createElement('li');
        li.textContent = `ID: ${key}, Name: ${user.name} (Age: ${user.age})`;
        userList.appendChild(li);
      });
      console.log('Users ordered by key:', snapshot.val());
    }, (error) => {
      console.error('Error fetching data:', error);
    });
  </script>
</body>
</html>

Begränsa resultat: limitToFirst()

Ofta behöver du inte alla resultat, utan bara en delmängd. limitToFirst() och limitToLast() låter dig ange det maximala antalet objekt som ska hämtas.

limitToFirst(n): Returnerar de första n objekten efter sortering.
limitToLast(n): Returnerar de sista n objekten efter sortering.

De används alltid tillsammans med en av orderBy-metoderna för att säkerställa en konsekvent resultatuppsättning.

Exempel med limitToFirst()

Låt oss hämta endast de två första användarna när de sorteras efter ålder. Detta är användbart för topplistor eller visning av senaste aktivitet.

Lägg märke till hur vi kombinerar orderByChild() med limitToFirst() för att hämta en specifik delmängd av data.

<!DOCTYPE html>
<html>
<head>
  <title>LimitToFirst Demo</title>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
</head>
<body>
  <h1>LimitToFirst Query</h1>
  <p>First 2 users ordered by age:</p>
  <ul id="user-list"></ul>

  <script>
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      databaseURL: "https://YOUR_PROJECT_ID-default-rtdb.firebaseio.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
    firebase.initializeApp(firebaseConfig);
    const db = firebase.database();
    const usersRef = db.ref('users');

    usersRef.orderByChild('age').limitToFirst(2).on('value', (snapshot) => {
      const userList = document.getElementById('user-list');
      userList.innerHTML = '';
      snapshot.forEach((childSnapshot) => {
        const user = childSnapshot.val();
        const li = document.createElement('li');
        li.textContent = `${user.name} (Age: ${user.age}, City: ${user.city})`;
        userList.appendChild(li);
      });
      console.log('First 2 users by age:', snapshot.val());
    }, (error) => {
      console.error('Error fetching data:', error);
    });
  </script>
</body>
</html>

Filtrera med equalTo()

För att hitta objekt som exakt matchar ett visst värde använder du equalTo(). Den här metoden kombineras nästan alltid med en av orderBy-metoderna.

Den tar ett argument: det exakta värdet som ska matchas.
Till exempel hittar orderByChild('city').equalTo('New York') alla användare vars stad är 'New York'.

Kom ihåg att equalTo() behöver en orderBy-sats för att veta vilken underordnad nod eller nyckel som ska jämföras.

Exempel med equalTo()

Låt oss hämta alla användare som bor i 'New York'. Vi sorterar efter city och filtrerar sedan fram en exakt matchning.

Den här sökningen är användbar för att hitta specifika poster baserat på deras egenskaper.

<!DOCTYPE html>
<html>
<head>
  <title>EqualTo Demo</title>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
</head>
<body>
  <h1>EqualTo Query</h1>
  <p>Users living in New York:</p>
  <ul id="user-list"></ul>

  <script>
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      databaseURL: "https://YOUR_PROJECT_ID-default-rtdb.firebaseio.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
    firebase.initializeApp(firebaseConfig);
    const db = firebase.database();
    const usersRef = db.ref('users');

    usersRef.orderByChild('city').equalTo('New York').on('value', (snapshot) => {
      const userList = document.getElementById('user-list');
      userList.innerHTML = '';
      snapshot.forEach((childSnapshot) => {
        const user = childSnapshot.val();
        const li = document.createElement('li');
        li.textContent = `${user.name} (Age: ${user.age}, City: ${user.city})`;
        userList.appendChild(li);
      });
      console.log('Users in New York:', snapshot.val());
    }, (error) => {
      console.error('Error fetching data:', error);
    });
  </script>
</body>
</html>

Snabbtest: grundläggande sökningar

Om du har en users-nod med underordnade noder som { name: 'Alice', age: 30, city: 'New York' }, vilken sökning hämtar användare från 'New York' korrekt?

Besvara frågan i den interaktiva lektionen

Sammanfattning: grundläggande datasökningar

Grattis! Du har gått igenom grunderna i sökningar i Firebase Realtime Database.

Vi gick igenom:

Att använda orderByChild() för att sortera data efter en specifik egenskap.
orderByKey() och orderByValue() för olika sorteringsbehov.
Att begränsa resultat med limitToFirst() och limitToLast().
Att filtrera fram exakta matchningar med equalTo(), alltid tillsammans med en orderBy-sats.

Dessa grundläggande söktekniker är avgörande för att bygga effektiva och responsiva applikationer. I nästa lektion går vi djupare in på mer avancerad filtrering och sortering!

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 ”Grundläggande datafrågor” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Applikationer med Firebase Auth och Realtime Database, inklusive ”Grundläggande datafrågor”, 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 ”Grundläggande datafrågor”?

Utför grundläggande frågor för att hämta specifika delmängder av data från 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 1 av 4.

Hur lång tid tar lektionen ”Grundläggande datafrågor”?

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