Apper med Firebase Auth og Realtime Database · leksjon

Grunnleggende dataspørringer

Utfør grunnleggende spørringer for å hente bestemte delmengder av data fra Realtime Database

Leksjon 1 av 412 trinn

Grunnleggende dataspørringer er en gratis leksjon i Apper med Firebase Auth og Realtime Database på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Apper med Firebase Auth og Realtime Database, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Apper med Firebase Auth og Realtime Database inneholder totalt 4 leksjoner.

Introduksjon til databasespørringer

Velkommen til grunnleggende dataspørringer! I denne leksjonen lærer du hvordan du effektivt henter bestemte data fra Firebase Realtime Database.

En databasespørring er som å stille databasen et presist spørsmål. I stedet for å hente alle dataene henter du bare det du trenger, noe som sparer båndbredde og forbedrer appens ytelse.

Vi bruker Firebase JavaScript SDK i eksemplene våre. Utgangspunktet for enhver spørring er en firebase.database().ref(), som peker på en bestemt plassering i databasen.

Eksempeldata og første oppsett

Først setter vi opp en grunnleggende HTML-side for å samhandle med Firebase og fylle inn eksempeldata. Denne fungerer som «hovedinngangspunktet» for eksemplene våre.

Vi bruker et enkelt datasett med «users», der hver bruker har en name, age og city.

Viktig: Erstatt YOUR_API_KEY, YOUR_PROJECT_ID og så videre med den faktiske Firebase-prosjektkonfigurasjonen din.

<!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>

Sortere data: orderByChild()

En av de vanligste måtene å sortere data på er å bruke orderByChild(). Denne metoden sorterer de underordnede nodene til en gitt referanse etter verdien til en angitt underordnet nøkkel.

Hvis du for eksempel har en liste over brukere, og hver bruker har egenskapen «age», kan du bruke orderByChild('age') for å sortere dem etter alder.

Den tar ett argument: navnet på den underordnede nøkkelen det skal sorteres etter.
Resultatene returneres som standard i stigende rekkefølge.

orderByChild() i praksis

La oss hente brukerne våre, sortert etter age. Resultatet viser brukerne fra yngst til eldst.

Kjør denne koden og se på resultatet i konsollen eller på listen på siden!

<!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>

Andre sorteringsmetoder: orderByKey() og orderByValue()

I tillegg til orderByChild() tilbyr Firebase Realtime Database to andre sorteringsmetoder:

orderByKey(): Sorterer resultatene etter nøklene til de underordnede nodene. Dette er nyttig når nøklene representerer ID-er eller sekvensielle tall.
orderByValue(): Brukes når de underordnede nodene selv er enkle primitive verdier (strenger, tall eller boolske verdier) i stedet for objekter. Den sorterer direkte etter disse verdiene.

Husk at du bare kan bruke én orderBy-metode per spørring.

Eksempel på orderByKey()

La oss se orderByKey() i praksis. Dette sorterer brukerne etter de unike bruker-ID-ene deres (for eksempel «user1» og «user2»).

Dette er ofte standardoppførselen når ingen orderBy er angitt, men hvis du bruker den eksplisitt, blir hensikten tydeligere.

<!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>

Begrense resultater: limitToFirst()

Ofte trenger du ikke alle resultatene, men bare et utvalg. limitToFirst() og limitToLast() lar deg angi det maksimale antallet elementer som skal hentes.

limitToFirst(n): Returnerer de første n elementene etter sortering.
limitToLast(n): Returnerer de siste n elementene etter sortering.

Disse brukes alltid sammen med én av orderBy-metodene for å sikre et konsistent resultatsett.

Eksempel på limitToFirst()

La oss bare hente de to første brukerne når de er sortert etter alder. Dette er nyttig for ledertavler eller visning av nylig aktivitet.

Legg merke til hvordan vi kombinerer orderByChild() med limitToFirst() for å hente et bestemt utsnitt av dataene.

<!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>

Filtrere med equalTo()

For å finne elementer som samsvarer nøyaktig med en bestemt verdi, bruker du equalTo(). Denne metoden kombineres nesten alltid med én av orderBy-metodene.

Den tar ett argument: den nøyaktige verdien det skal samsvare med.
For eksempel finner orderByChild('city').equalTo('New York') alle brukere som bor i «New York».

Husk at equalTo() trenger en orderBy-klausul for å vite hvilken underordnet nøkkel eller nøkkel den skal sammenligne.

Eksempel på equalTo()

La oss hente alle brukere som bor i «New York». Vi sorterer etter city og filtrerer deretter etter et nøyaktig samsvar.

Denne spørringen er nyttig for å finne bestemte poster basert på egenskapene deres.

<!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>

Rask sjekk: grunnleggende spørringer

Gitt en users-node med underordnede noder som { name: 'Alice', age: 30, city: 'New York' }, hvilken spørring henter brukere fra «New York» på riktig måte?

Besvar den i den interaktive leksjonen

Oppsummering: grunnleggende dataspørringer

Gratulerer! Du har fullført det grunnleggende om spørringer i Firebase Realtime Database.

Vi gikk gjennom:

Bruk av orderByChild() for å sortere data etter en bestemt egenskap.
orderByKey() og orderByValue() for ulike sorteringsbehov.
Begrensning av resultater med limitToFirst() og limitToLast().
Filtrering etter nøyaktige samsvar ved hjelp av equalTo(), alltid med en orderBy-klausul.

Disse grunnleggende spørringsteknikkene er avgjørende for å bygge effektive og responsive applikasjoner. I neste leksjon skal vi gå dypere inn i mer avansert filtrering og sortering!

Gratis å komme i gang

Lær deg Apper med Firebase Auth og Realtime Database med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 11
Leksjoner: 44

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Grunnleggende dataspørringer» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Apper med Firebase Auth og Realtime Database, inkludert «Grunnleggende dataspørringer», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Apper med Firebase Auth og Realtime Database inneholder totalt 4 leksjoner.

Hva lærer jeg i «Grunnleggende dataspørringer»?

Utfør grunnleggende spørringer for å hente bestemte delmengder av data fra Realtime Database Du øver på Apper med Firebase Auth og Realtime Database med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Apper med Firebase Auth og Realtime Database?

Ingen tidligere erfaring er nødvendig. Apper med Firebase Auth og Realtime Database på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Grunnleggende dataspørringer»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Apper med Firebase Auth og Realtime Database-leksjonen?

Ja. Alle Apper med Firebase Auth og Realtime Database-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Grunnleggende dataspørringer
Filtrering og sortering av data
Teknikker for paginering av data
Indeksering av spørringer for bedre ytelse

← Tilbake til Apper med Firebase Auth og Realtime Database