Firebase-todennus- ja reaaliaikaisten tietokantasovellusten rakentaminen · Oppitunti

Datan peruskyselyt

Suoritatte peruskyselyitä tiettyjen datajoukkojen hakemiseksi Realtime Databasesta

Oppitunti 1/412 vaihetta

Datan peruskyselyt on ilmainen Firebase-todennus- ja reaaliaikaisten tietokantasovellusten rakentaminen-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Firebase-todennus- ja reaaliaikaisten tietokantasovellusten rakentaminen-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Firebase-todennus- ja reaaliaikaisten tietokantasovellusten rakentaminen-kurssilla on yhteensä 4 oppituntia.

Johdanto tietokantakyselyihin

Tervetuloa perustason tietokantakyselyihin! Tällä oppitunnilla opitte hakemaan tiettyjä tietoja Firebase Realtime Databasesta tehokkaasti.

Tietokantakysely on kuin esittäisitte tietokannalle täsmällisen kysymyksen. Kaikkien tietojen hakemisen sijaan haette vain tarvitsemanne tiedot, mikä säästää kaistanleveyttä ja parantaa sovelluksen suorituskykyä.

Käytämme esimerkeissä Firebase JavaScript SDK:ta. Minkä tahansa kyselyn perusta on firebase.database().ref(), joka osoittaa tietokannan tiettyyn sijaintiin.

Esimerkkitiedot ja alkuasetukset

Ensin määritetään perus-HTML-sivu, jonka avulla Firebaseen voidaan olla yhteydessä ja täyttää tietokantaan esimerkkitietoja. Tämä toimii esimerkkiemme pääasiallisena aloituspisteenä.

Käytämme yksinkertaista users-tietoaineistoa, jossa jokaisella käyttäjällä on name-, age- ja city-kenttä.

Tärkeää: Korvatkaa YOUR_API_KEY, YOUR_PROJECT_ID ja muut vastaavat arvot oman Firebase-projektinne määrityksillä.

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

Tietojen järjestäminen: orderByChild()

Yksi yleisimmistä tavoista järjestää tiedot on käyttää orderByChild()-metodia. Tämä metodi järjestää tietyn viitteen alisolmut määritetyn lapsiavaimen arvon perusteella.

Jos teillä on esimerkiksi käyttäjäluettelo, jossa jokaisella käyttäjällä on age-ominaisuus, voitte käyttää orderByChild('age')-metodia käyttäjien järjestämiseen iän mukaan.

  • Se ottaa yhden argumentin: lapsiavaimen nimen, jonka perusteella järjestetään.
  • Tulokset palautetaan oletusarvoisesti nousevassa järjestyksessä.

orderByChild() käytännössä

Haetaan käyttäjät age-kentän perusteella järjestettyinä. Tuloksissa käyttäjät näkyvät nuorimmasta vanhimpaan.

Suorittakaa tämä koodi ja tarkistakaa konsolin tuloste tai sivulla näkyvä luettelo!

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

Muut järjestystavat: orderByKey() ja orderByValue()

orderByChild()-metodin lisäksi Firebase Realtime Database tarjoaa kaksi muuta järjestysmetodia:

  • orderByKey(): Järjestää tulokset alisolmujen avainten perusteella. Tämä on hyödyllistä, kun avaimet ovat tunnisteita tai järjestysnumeroita.
  • orderByValue(): Käytetään, kun alisolmut ovat objektien sijaan yksinkertaisia primitiivisiä arvoja (merkkijonoja, lukuja tai totuusarvoja). Se järjestää tulokset suoraan näiden arvojen perusteella.

Muistakaa, että kyselyssä voi käyttää vain yhtä orderBy-metodia.

orderByKey()-esimerkki

Katsotaan, miten orderByKey() toimii käytännössä. Tämä järjestää käyttäjät heidän yksilöllisten käyttäjätunnisteidensa (esimerkiksi 'user1' ja 'user2') perusteella.

Tämä on usein oletustoiminta, jos orderBy-metodia ei määritetä, mutta sen nimenomainen käyttö voi tehdä tarkoituksesta selkeämmän.

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

Tulosten rajoittaminen: limitToFirst()

Usein kaikkia tuloksia ei tarvita, vaan ainoastaan osa niistä. limitToFirst()- ja limitToLast()-metodeilla voi määrittää haettavien kohteiden enimmäismäärän.

  • limitToFirst(n): Palauttaa järjestyksen mukaiset ensimmäiset n kohdetta.
  • limitToLast(n): Palauttaa järjestyksen mukaiset viimeiset n kohdetta.

Näitä käytetään aina yhdessä jonkin orderBy-metodin kanssa, jotta tulosjoukko pysyy johdonmukaisena.

limitToFirst()-esimerkki

Haetaan vain kaksi ensimmäistä käyttäjää iän mukaan järjestettyinä. Tämä on hyödyllistä tulostauluissa tai viimeaikaisen toiminnan näyttämisessä.

Huomaatte, miten orderByChild()- ja limitToFirst()-metodit yhdistetään tietyn tietojoukon osan hakemiseksi.

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

Suodattaminen equalTo()-metodilla

Kun haluatte löytää tietyn arvon kanssa täsmälleen täsmäävät kohteet, käyttäkää equalTo()-metodia. Tämä metodi yhdistetään lähes aina johonkin orderBy-metodiin.

  • Se ottaa yhden argumentin: täsmäävän tarkan arvon.
  • Esimerkiksi orderByChild('city').equalTo('New York') löytää kaikki käyttäjät, joiden kaupunki on 'New York'.

Muistakaa, että equalTo() tarvitsee orderBy-lausekkeen tietääkseen, mitä lapsisolmua tai avainta verrataan.

equalTo()-esimerkki

Haetaan kaikki 'New Yorkissa' asuvat käyttäjät. Järjestetään tiedot city-kentän perusteella ja suodatetaan sitten täsmällisen vastaavuuden mukaan.

Tämä kysely on tehokas, kun etsitään tietueita niiden ominaisuuksien perusteella.

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

Pikatesti: perustason kyselyt

Kun käytettävissä on users-solmu, jonka alisolmut sisältävät esimerkiksi { name: 'Alice', age: 30, city: 'New York' }, mikä kysely hakee oikein 'New Yorkissa' asuvat käyttäjät?

Kertaus: perustason tietokantakyselyt

Onnittelut! Olette suorittaneet Firebase Realtime Databasen kyselyiden perusteet.

Käsittelimme seuraavat aiheet:

  • Tietojen järjestäminen tietyn ominaisuuden perusteella orderByChild()-metodilla.
  • orderByKey()- ja orderByValue()-metodit erilaisiin järjestystarpeisiin.
  • Tulosten rajoittaminen limitToFirst()- ja limitToLast()-metodeilla.
  • Täsmällisten vastaavuuksien suodattaminen equalTo()-metodilla aina yhdessä orderBy-lausekkeen kanssa.

Nämä kyselytekniikat ovat olennaisen tärkeitä tehokkaiden ja nopeasti reagoivien sovellusten rakentamisessa. Seuraavalla oppitunnilla perehdymme tarkemmin edistyneempään suodattamiseen ja järjestämiseen!

Aloita maksutta

Opi Firebase-todennus- ja reaaliaikaisten tietokantasovellusten rakentaminen tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
11
Oppitunnit
44

Usein kysytyt kysymykset

Onko oppitunti ”Datan peruskyselyt” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Firebase-todennus- ja reaaliaikaisten tietokantasovellusten rakentaminen-oppimispolun 3 oppituntia, myös oppitunnin “Datan peruskyselyt”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Firebase-todennus- ja reaaliaikaisten tietokantasovellusten rakentaminen-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Datan peruskyselyt”?

Suoritatte peruskyselyitä tiettyjen datajoukkojen hakemiseksi Realtime Databasesta Harjoittelet Firebase-todennus- ja reaaliaikaisten tietokantasovellusten rakentaminen-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Firebase-todennus- ja reaaliaikaisten tietokantasovellusten rakentaminen-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Firebase-todennus- ja reaaliaikaisten tietokantasovellusten rakentaminen-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Datan peruskyselyt”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Firebase-todennus- ja reaaliaikaisten tietokantasovellusten rakentaminen-oppitunnilla?

Kyllä. Jokainen Firebase-todennus- ja reaaliaikaisten tietokantasovellusten rakentaminen-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Datan peruskyselyt
  2. Datan suodattaminen ja järjestäminen
  3. Datan sivutustekniikat
  4. Kyselyiden indeksointi suorituskykyä varten
← Takaisin: Firebase-todennus- ja reaaliaikaisten tietokantasovellusten rakentaminen