Web için Firebase'i tanıyın

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

1. Genel Bakış

Bu kod laboratuvarında, etkileşimli web uygulamaları oluşturmak için Firebase'in bazı temellerini öğreneceksiniz. Birkaç Firebase ürünü kullanarak bir etkinlik LCV ve ziyaretçi defteri sohbet uygulaması oluşturacaksınız.

bu adımın ekran görüntüsü

ne öğreneceksin

  • Firebase Authentication ve FirebaseUI ile kullanıcıların kimliğini doğrulayın.
  • Cloud Firestore'u kullanarak verileri senkronize edin.
  • Bir veritabanının güvenliğini sağlamak için Firebase Güvenlik Kuralları yazın.

Neye ihtiyacın olacak

  • Chrome gibi seçtiğiniz bir tarayıcı.
  • stackblitz.com'a erişim (hesap veya oturum açma gerekmez).
  • Gmail hesabı gibi bir Google hesabı. GitHub hesabınız için halihazırda kullandığınız e-posta hesabını öneririz. Bu, StackBlitz'deki gelişmiş özellikleri kullanmanıza olanak tanır.
  • Codelab'ın örnek kodu. Kodun nasıl alınacağını öğrenmek için sonraki adıma bakın.

2. Başlangıç ​​kodunu alın

Bu codelab'de, entegre edilmiş birkaç Firebase iş akışına sahip bir çevrimiçi düzenleyici olan StackBlitz'i kullanarak bir uygulama oluşturursunuz. Stackblitz, yazılım kurulumu veya özel StackBlitz hesabı gerektirmez.

StackBlitz, projeleri başkalarıyla paylaşmanıza olanak tanır. StackBlitz projenizin URL'sine sahip olan diğer kişiler kodunuzu görebilir ve projenizi çatallayabilir, ancak StackBlitz projenizi düzenleyemezler.

  1. Başlangıç ​​kodu için bu URL'ye gidin: https://stackblitz.com/edit/firebase-gtk-web-start
  2. StackBlitz sayfasının üst kısmında Çatal'ı tıklayın:

bu adımın ekran görüntüsü

Artık benzersiz bir URL ile birlikte benzersiz bir adı olan kendi StackBlitz projeniz olarak başlangıç ​​kodunun bir kopyasına sahipsiniz. Tüm dosyalarınız ve değişiklikleriniz bu StackBlitz projesine kaydedilir.

3. Etkinlik bilgilerini düzenleyin

Bu kod laboratuvarı için başlangıç ​​malzemeleri, uygulama için bazı stil sayfaları ve birkaç HTML kapsayıcı dahil olmak üzere web uygulaması için bazı yapılar sağlar. Bu kod laboratuvarında daha sonra, bu kapsayıcıları Firebase'e bağlayacaksınız.

Başlamak için, StackBlitz arayüzüne biraz daha aşina olalım.

  1. StackBlitz'de index.html dosyasını açın.
  2. event-details-container ve description-container öğelerini bulun, ardından bazı etkinlik ayrıntılarını düzenlemeyi deneyin.

Metni düzenlerken, StackBlitz'deki otomatik sayfa yeniden yükleme, yeni etkinlik ayrıntılarını görüntüler. Harika, değil mi?

<!-- ... -->

<div id="app">
  <img src="..." />

  <section id="event-details-container">
     <h1>Firebase Meetup</h1>

     <p><i class="material-icons">calendar_today</i> October 30</p>
     <p><i class="material-icons">location_city</i> San Francisco</p>

  </section>

  <hr>

  <section id="firebaseui-auth-container"></section>

  <section id="description-container">
     <h2>What we'll be doing</h2>
     <p>Join us for a day full of Firebase Workshops and Pizza!</p>
  </section>
</div>

<!-- ... -->

Uygulamanızın önizlemesi şöyle görünmelidir:

Uygulama önizlemesi

bu adımın ekran görüntüsü

4. Bir Firebase projesi oluşturun ve kurun

Etkinlik bilgilerini görüntülemek konuklarınız için harikadır, ancak yalnızca etkinlikleri göstermek hiç kimse için pek yararlı değildir. Bu uygulamaya bazı dinamik işlevler ekleyelim. Bunun için Firebase'i uygulamanıza bağlamanız gerekir. Firebase'i kullanmaya başlamak için bir Firebase projesi oluşturmanız ve ayarlamanız gerekir.

Bir Firebase projesi oluşturun

  1. Firebase'de oturum açın.
  2. Firebase konsolunda, Proje Ekle'yi (veya Bir proje oluştur ) tıklayın, ardından Firebase projenizi Firebase-Web-Codelab olarak adlandırın .

    bu adımın ekran görüntüsü

  3. Proje oluşturma seçeneklerine tıklayın. İstenirse Firebase şartlarını kabul edin. Bu uygulama için Analytics kullanmayacağınız için Google Analytics ekranında "Etkinleştirme"yi tıklayın.

Firebase projeleri hakkında daha fazla bilgi edinmek için Firebase projelerini anlama bölümüne bakın.

Konsolda Firebase ürünlerini etkinleştirin ve ayarlayın

Oluşturduğunuz uygulama, web uygulamaları için kullanılabilen birkaç Firebase ürünü kullanıyor:

  • Kullanıcılarınızın uygulamanızda kolayca oturum açmasına izin vermek için Firebase Kimlik Doğrulaması ve Firebase Kullanıcı Arayüzü .
  • Bulutta yapılandırılmış verileri kaydetmek ve veriler değiştiğinde anında bildirim almak için Cloud Firestore .
  • Veritabanınızın güvenliğini sağlamak için Firebase Güvenlik Kuralları .

Bu ürünlerden bazıları özel yapılandırmaya ihtiyaç duyar veya Firebase konsolu kullanılarak etkinleştirilmesi gerekir.

Firebase Kimlik Doğrulaması için e-posta ile oturum açmayı etkinleştirin

Kullanıcıların web uygulamasında oturum açmasına izin vermek için bu codelab için E-posta/Parola ile oturum açma yöntemini kullanacaksınız:

  1. Firebase konsolunun sol tarafındaki panelde, Oluştur > Kimlik Doğrulama öğesine tıklayın. Ardından Başlayın'ı tıklayın. Artık, kaydolmuş kullanıcıları görebileceğiniz, oturum açma sağlayıcılarını yapılandırabileceğiniz ve ayarları yönetebileceğiniz Kimlik Doğrulama panosundasınız.

    bu adımın ekran görüntüsü

  2. Oturum açma yöntemi sekmesini seçin (veya doğrudan sekmeye gitmek için burayı tıklayın).

    bu adımın ekran görüntüsü

  3. Sağlayıcı seçeneklerinden E-posta/Parola'ya tıklayın, anahtarı Etkinleştir'e getirin ve ardından Kaydet'e tıklayın .

    bu adımın ekran görüntüsü

Cloud Firestore'u kurun

Web uygulaması, sohbet mesajlarını kaydetmek ve yeni sohbet mesajları almak için Cloud Firestore'u kullanır.

Cloud Firestore'u nasıl kuracağınız aşağıda açıklanmıştır:

  1. Firebase konsolunun sol tarafındaki panelde, Oluştur > Firestore Veritabanı öğesine tıklayın. Ardından Veritabanı oluştur'u tıklayın.
  2. Veritabanı oluştur 'u tıklayın.

    bu adımın ekran görüntüsü

  3. Test modunda başlat seçeneğini seçin. Güvenlik kurallarıyla ilgili sorumluluk reddini okuyun. Test modu, geliştirme sırasında veritabanına özgürce yazabilmenizi sağlar. İleri'yi tıklayın.

    bu adımın ekran görüntüsü

  4. Veritabanınız için konumu seçin (yalnızca varsayılanı kullanabilirsiniz). Ancak, bu konumun daha sonra değiştirilemeyeceğini unutmayın.

    bu adımın ekran görüntüsü

  5. Bitti'yi tıklayın.

5. Firebase'i ekleyin ve yapılandırın

Artık Firebase projenizi oluşturduğunuza ve bazı hizmetleri etkinleştirdiğinize göre, Firebase'i kullanmak istediğiniz kodu ve hangi Firebase projesini kullanacağınızı söylemeniz gerekir.

Firebase kitaplıklarını ekleyin

Uygulamanızın Firebase'i kullanması için uygulamaya Firebase kitaplıklarını eklemeniz gerekir. Firebase belgelerinde açıklandığı gibi bunu yapmanın birden çok yolu vardır. Örneğin, kitaplıkları Google'ın CDN'sinden ekleyebilir veya npm kullanarak yerel olarak yükleyebilir ve ardından Browserify kullanıyorsanız bunları uygulamanızda paketleyebilirsiniz.

StackBlitz otomatik gruplama sağlar, böylece import deyimlerini kullanarak Firebase kitaplıklarını ekleyebilirsiniz. "Ağaç sallama" adı verilen bir işlemle web sayfasının genel boyutunu azaltmaya yardımcı olan kitaplıkların modüler (v9) sürümlerini kullanacaksınız. Belgelerde modüler SDK'lar hakkında daha fazla bilgi edinebilirsiniz.

Bu uygulamayı oluşturmak için Firebase Authentication, FirebaseUI ve Cloud Firestore kitaplıklarını kullanırsınız. Bu codelab için, aşağıdaki import ifadeleri index.js dosyasının en üstüne zaten dahil edilmiştir ve ilerledikçe her Firebase kitaplığından daha fazla yöntem içe aktaracağız:

// Import stylesheets
import './style.css';

// Firebase App (the core Firebase SDK) is always required
import { initializeApp } from 'firebase/app';

// Add the Firebase products and methods that you want to use
import {} from 'firebase/auth';
import {} from 'firebase/firestore';

import * as firebaseui from 'firebaseui';

Firebase projenize bir Firebase web uygulaması ekleyin

  1. Firebase konsoluna geri dönün, sol üstteki Projeye Genel Bakış'ı tıklayarak projenizin genel bakış sayfasına gidin.
  2. Projenizin genel bakış sayfasının ortasındaki web simgesine tıklayın web uygulaması simgesi yeni bir Firebase web uygulaması oluşturmak için.

    bu adımın ekran görüntüsü

  3. Uygulamayı Web App takma adıyla kaydedin.
  4. Bu codelab için, Bu uygulama için Firebase Hosting'i de ayarla seçeneğinin yanındaki kutuyu İŞARETLEMEYİN. Şimdilik StackBlitz'in önizleme bölmesini kullanacaksınız.
  5. Uygulamayı kaydet'i tıklayın.

    bu adımın ekran görüntüsü

  6. Firebase yapılandırma nesnesini panonuza kopyalayın.

    bu adımın ekran görüntüsü

  7. Konsola devam et seçeneğine tıklayın. Firebase yapılandırma nesnesini uygulamanıza ekleyin:
  8. StackBlitz'e geri dönün, index.js dosyasına gidin.
  9. Yorum satırına Add Firebase project configuration object here bulun, ardından yapılandırma snippet'inizi yorumun hemen altına yapıştırın.
  10. Benzersiz Firebase proje yapılandırmanızı kullanarak Firebase'i kurmak için initializeApp işlev çağrısını ekleyin.
    // ...
    // Add Firebase project configuration object here
    const firebaseConfig = {
      apiKey: "random-unique-string",
      authDomain: "your-projectId.firebaseapp.com",
      databaseURL: "https://your-projectId.firebaseio.com",
      projectId: "your-projectId",
      storageBucket: "your-projectId.appspot.com",
      messagingSenderId: "random-unique-string",
      appId: "random-unique-string",
    };
    
    // Initialize Firebase
    initializeApp(firebaseConfig);
    

6. Kullanıcı oturum açma (RSVP) ekleyin

Firebase'i uygulamaya eklediğinize göre, kişileri Firebase Authentication kullanarak kaydeden bir LCV düğmesi ayarlayabilirsiniz.

E-posta ile Oturum Açma ve FirebaseUI ile kullanıcılarınızın kimliğini doğrulayın

Kullanıcıdan e-posta adresiyle oturum açmasını isteyen bir LCV düğmesine ihtiyacınız olacak. Bunu, FirebaseUI'yi bir RSVP düğmesine bağlayarak yapabilirsiniz.FirebaseUI, size Firebase Auth'nin üzerinde önceden oluşturulmuş bir UI sağlayan bir kitaplıktır.

FirebaseUI, iki şey yapan bir yapılandırma gerektirir ( belgelerdeki seçeneklere bakın):

  • FirebaseUI'ye E- posta/Parola oturum açma yöntemini kullanmak istediğinizi söyler.
  • Başarılı bir oturum açma için geri aramayı işler ve yeniden yönlendirmeyi önlemek için false döndürür. Tek sayfalık bir web uygulaması oluşturduğunuz için sayfanın yenilenmesini istemiyorsunuz.

FirebaseUI Auth'u başlatmak için kodu ekleyin

  1. StackBlitz'de index.js dosyasına gidin.
  2. En üstte, firebase/auth import ifadesini bulun, ardından getAuth ve EmailAuthProvider ekleyin, şöyle:
    // ...
    // Add the Firebase products and methods that you want to use
    import { getAuth, EmailAuthProvider } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. auth nesnesine bir başvuruyu initializeApp öğesinden hemen sonra kaydedin, şöyle:
    initializeApp(firebaseConfig);
    auth = getAuth();
    
  4. FirebaseUI yapılandırmasının başlangıç ​​kodunda zaten sağlandığına dikkat edin. E-posta kimlik doğrulama sağlayıcısını kullanmak için zaten ayarlanmış.
  5. index.js main() işlevinin altına, FirebaseUI başlatma ifadesini şu şekilde ekleyin:
    async function main() {
      // ...
    
      // Initialize the FirebaseUI widget using Firebase
      const ui = new firebaseui.auth.AuthUI(auth);
    }
    main();
    
    

HTML'ye bir LCV düğmesi ekleyin

  1. StackBlitz'de index.html dosyasına gidin.
  2. Aşağıdaki örnekte gösterildiği gibi event-details-container içine bir LCV düğmesi için HTML ekleyin.

    Aşağıda gösterilenle aynı id değerlerini kullanmaya dikkat edin, çünkü bu kod laboratuvarı için index.js dosyasında bu belirli kimlikler için zaten kancalar vardır.

    index.html dosyasında firebaseui-auth-container kimliğine sahip bir kapsayıcı olduğunu unutmayın. Bu, oturum açma bilgilerinizi tutmak için FirebaseUI'ye ileteceğiniz kimliktir.
    <!-- ... -->
    
    <section id="event-details-container">
        <!-- ... -->
        <!-- ADD THE RSVP BUTTON HERE -->
        <button id="startRsvp">RSVP</button>
    </section>
    <hr>
    <section id="firebaseui-auth-container"></section>
    <!-- ... -->
    
    Uygulama önizlemesi

    bu adımın ekran görüntüsü

  3. RSVP düğmesinde bir dinleyici ayarlayın ve FirebaseUI başlatma işlevini çağırın. Bu, FirebaseUI'ye oturum açma penceresini görmek istediğinizi söyler.

    index.js main() işlevinin altına aşağıdaki kodu ekleyin:
    async function main() {
      // ...
    
      // Listen to RSVP button clicks
      startRsvpButton.addEventListener("click",
       () => {
            ui.start("#firebaseui-auth-container", uiConfig);
      });
    }
    main();
    

Uygulamada oturum açmayı test edin

  1. StackBlitz'in önizleme penceresinde, uygulamada oturum açmak için LCV düğmesini tıklayın.
    • Bu kod laboratuvarı için bir e-posta doğrulama adımı ayarlamadığınız için, bu kod laboratuvarı için herhangi bir e-posta adresi, hatta sahte bir e-posta adresi kullanabilirsiniz.
    • Bu Firebase projesi için auth/operation-not-allowed veya The given sign-in provider is disabled for this Firebase project olduğunu belirten bir hata mesajı görürseniz, Firebase konsolunda oturum açma sağlayıcısı olarak E-posta/Parolayı etkinleştirdiğinizden emin olun.
    Uygulama önizlemesi

    bu adımın ekran görüntüsü

  2. Firebase konsolundaki Kimlik Doğrulama panosuna gidin. Kullanıcılar sekmesinde, uygulamada oturum açmak için girdiğiniz hesap bilgilerini görmelisiniz.

    bu adımın ekran görüntüsü

Kullanıcı arayüzüne kimlik doğrulama durumu ekleyin

Ardından, kullanıcı arayüzünün oturum açtığınız gerçeğini yansıttığından emin olun.

Kullanıcının oturum açma durumu değiştiğinde bildirim alan Firebase Authentication durum dinleyici geri aramasını kullanacaksınız. Halihazırda oturum açmış bir kullanıcı varsa, uygulamanız "LCV" düğmesini "çıkış" düğmesine çevirir.

  1. StackBlitz'de index.js dosyasına gidin.
  2. En üstte, firebase/auth import ifadesini bulun, ardından aşağıdaki gibi signOut ve onAuthStateChanged ekleyin:
    // ...
    // Add the Firebase products and methods that you want to use
    import {
      getAuth,
      EmailAuthProvider,
      signOut,
      onAuthStateChanged
    } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. main() fonksiyonunun altına şu kodu ekleyin:
    async function main() {
      // ...
    
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
        } else {
          startRsvpButton.textContent = 'RSVP';
        }
      });
    }
    main();
    
  4. Düğme dinleyicisinde, geçerli bir kullanıcı olup olmadığını kontrol edin ve oturumu kapatın. Bunu yapmak için mevcut startRsvpButton.addEventListener aşağıdakiyle değiştirin:
    // ...
    // Called when the user clicks the RSVP button
    startRsvpButton.addEventListener('click', () => {
      if (auth.currentUser) {
        // User is signed in; allows user to sign out
        signOut(auth);
      } else {
        // No user is signed in; allows user to sign in
        ui.start('#firebaseui-auth-container', uiConfig);
      }
    });
    

Şimdi, uygulamanızdaki düğme LOGOUT göstermeli ve tıklandığında RSVP'ye geri dönmelidir.

Uygulama önizlemesi

bu adımın ekran görüntüsü

7. Cloud Firestore'a mesaj yazın

Kullanıcıların geldiğini bilmek harika, ancak konuklara uygulamada yapacakları başka bir şey verelim. Ya bir ziyaretçi defterine mesaj bırakabilirlerse? Gelmek için neden heyecanlı olduklarını veya kiminle tanışmayı umduklarını paylaşabilirler.

Kullanıcıların uygulamada yazdığı sohbet mesajlarını saklamak için Cloud Firestore'u kullanacaksınız.

Veri örneği

Cloud Firestore bir NoSQL veritabanıdır ve veritabanında depolanan veriler koleksiyonlara, belgelere, alanlara ve alt koleksiyonlara bölünür. Sohbetin her mesajını, guestbook adı verilen üst düzey bir koleksiyonda bir belge olarak depolayacaksınız.

Birden çok mesaj belgesi içeren bir ziyaretçi defteri koleksiyonunu gösteren Firestore veri modeli grafiği

Firestore'a mesaj ekleyin

Bu bölümde, kullanıcıların veritabanına yeni mesajlar yazması için işlevsellik ekleyeceksiniz. İlk olarak, UI öğeleri için HTML'yi eklersiniz (mesaj alanı ve gönder düğmesi). Ardından, bu öğeleri veritabanına bağlayan kodu eklersiniz.

Bir mesaj alanının UI öğelerini ve bir gönder düğmesini eklemek için:

  1. StackBlitz'de index.html dosyasına gidin.
  2. guestbook-container bulun, ardından mesaj giriş alanı ve gönder düğmesi ile bir form oluşturmak için aşağıdaki HTML'yi ekleyin.
    <!-- ... -->
    
     <section id="guestbook-container">
       <h2>Discussion</h2>
    
       <form id="leave-message">
         <label>Leave a message: </label>
         <input type="text" id="message">
         <button type="submit">
           <i class="material-icons">send</i>
           <span>SEND</span>
         </button>
       </form>
    
     </section>
    
    <!-- ... -->
    

Uygulama önizlemesi

bu adımın ekran görüntüsü

GÖNDER düğmesini tıklayan bir kullanıcı aşağıdaki kod parçacığını tetikleyecektir. Mesaj giriş alanının içeriğini veritabanının guestbook koleksiyonuna ekler. Özellikle addDoc yöntemi, mesaj içeriğini yeni bir belgeye (otomatik olarak oluşturulan bir kimlikle) guestbook koleksiyonuna ekler.

  1. StackBlitz'de index.js dosyasına gidin.
  2. En üstte, firebase/firestore import ifadesini bulun, ardından getFirestore , addDoc ve collection öğelerini şu şekilde ekleyin:
    // ...
    
    // Add the Firebase products and methods that you want to use
    import {
      getAuth,
      EmailAuthProvider,
      signOut,
      onAuthStateChanged
    } from 'firebase/auth';
    
    import {
      getFirestore,
      addDoc,
      collection
    } from 'firebase/firestore';
    
  3. Şimdi, initializeApp :
    initializeApp(firebaseConfig);
    auth = getAuth();
    db = getFirestore();
    
    hemen sonra Firestore db nesnesine bir referans kaydedeceğiz
  4. main() fonksiyonunun altına aşağıdaki kodu ekleyin.

    auth.currentUser.uid , Firebase Authentication'ın oturum açmış tüm kullanıcılar için verdiği otomatik olarak oluşturulan benzersiz kimliğe bir referans olduğunu unutmayın.
    async function main() {
      // ...
    
      // Listen to the form submission
      form.addEventListener('submit', async e => {
        // Prevent the default form redirect
        e.preventDefault();
        // Write a new message to the database collection "guestbook"
        addDoc(collection(db, 'guestbook'), {
          text: input.value,
          timestamp: Date.now(),
          name: auth.currentUser.displayName,
          userId: auth.currentUser.uid
        });
        // clear message input field
        input.value = '';
        // Return false to avoid redirect
        return false;
      });
    }
    main();
    

Ziyaretçi defterini yalnızca oturum açmış kullanıcılara göster

Konukların sohbetini sadece kimsenin görmesini istemezsin. Sohbeti güvenli hale getirmek için yapabileceğiniz şeylerden biri, yalnızca oturum açmış kullanıcıların ziyaretçi defterini görüntülemesine izin vermektir. Bununla birlikte, kendi uygulamalarınız için veritabanınızı Firebase Güvenlik Kuralları ile de güvence altına almak isteyeceksiniz. (Güvenlik kuralları hakkında daha sonra kod laboratuvarında daha fazla bilgi var.)

  1. StackBlitz'de index.js dosyasına gidin.
  2. Ziyaretçi defterini gizlemek ve göstermek için onAuthStateChanged dinleyicisini düzenleyin.
    // ...
    
    // Listen to the current Auth state
    onAuthStateChanged(auth, user => {
      if (user) {
        startRsvpButton.textContent = 'LOGOUT';
        // Show guestbook to logged-in users
        guestbookContainer.style.display = 'block';
      } else {
        startRsvpButton.textContent = 'RSVP';
        // Hide guestbook for non-logged-in users
        guestbookContainer.style.display = 'none';
      }
    });
    

Mesaj göndermeyi test et

  1. Uygulamada oturum açtığınızdan emin olun.
  2. "Merhaba!" gibi bir mesaj girin ve ardından GÖNDER 'i tıklayın.

Bu eylem, mesajı Cloud Firestore veritabanınıza yazar. Ancak, yine de verileri almayı uygulamanız gerektiğinden, mesajı gerçek web uygulamanızda görmezsiniz. Bunu daha sonra yapacaksın.

Ancak yeni eklenen mesajı Firebase konsolunda görebilirsiniz.

Firebase konsolunda, Firestore Veritabanı panosunda , yeni eklediğiniz mesajınızla birlikte guestbook koleksiyonunu görmelisiniz. Mesaj göndermeye devam ederseniz, ziyaretçi defteri koleksiyonunuz aşağıdaki gibi birçok belge içerecektir:

Firebase konsolu

bu adımın ekran görüntüsü

8. Mesajları okuyun

Mesajları senkronize et

Konukların veri tabanına mesaj yazabilmeleri çok hoş, ancak henüz uygulamada göremiyorlar.

Mesajları görüntülemek için, veri değiştiğinde tetiklenen dinleyiciler eklemeniz ve ardından yeni mesajları gösteren bir UI öğesi oluşturmanız gerekir.

Uygulamadan yeni eklenen mesajları dinleyen bir kod ekleyeceksiniz. İlk olarak, mesajları göstermek için HTML'ye bir bölüm ekleyin:

  1. StackBlitz'de index.html dosyasına gidin.
  2. guestbook-container , guestbook kimliğiyle yeni bir bölüm ekleyin.
    <!-- ... -->
    
      <section id="guestbook-container">
       <h2>Discussion</h2>
    
       <form><!-- ... --></form>
    
       <section id="guestbook"></section>
    
     </section>
    
    <!-- ... -->
    

Ardından, verilerde yapılan değişiklikleri dinleyen dinleyiciyi kaydedin:

  1. StackBlitz'de index.js dosyasına gidin.
  2. En üstte, firebase/firestore içe aktarma ifadesini bulun, ardından query , orderBy ve onSnapshot şu şekilde ekleyin:
    // ...
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot
    } from 'firebase/firestore';
    
  3. main() işlevinin altına, veritabanındaki tüm belgeler (ziyaretçi defteri mesajları) arasında geçiş yapmak için aşağıdaki kodu ekleyin. Bu kodda neler olduğu hakkında daha fazla bilgi edinmek için snippet'in altındaki bilgileri okuyun.
    async function main() {
      // ...
    
      // Create query for messages
      const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
      onSnapshot(q, snaps => {
        // Reset page
        guestbook.innerHTML = '';
        // Loop through documents in database
        snaps.forEach(doc => {
          // Create an HTML entry for each document and add it to the chat
          const entry = document.createElement('p');
          entry.textContent = doc.data().name + ': ' + doc.data().text;
          guestbook.appendChild(entry);
        });
      });
    }
    main();
    

Veritabanındaki mesajları dinlemek için, collection işlevini kullanarak belirli bir koleksiyon üzerinde bir sorgu oluşturdunuz. Yukarıdaki kod, sohbet mesajlarının saklandığı guestbook koleksiyonundaki değişiklikleri dinler. Mesajlar ayrıca en yeni mesajları en üstte görüntülemek için orderBy('timestamp', 'desc') kullanılarak tarihe göre sıralanır.

onSnapshot işlevi iki parametre alır: kullanılacak sorgu ve bir geri arama işlevi. Geri arama işlevi, sorguyla eşleşen belgelerde herhangi bir değişiklik olduğunda tetiklenir. Bu, bir mesajın silinmesi, değiştirilmesi veya eklenmesi olabilir. Daha fazla bilgi için Cloud Firestore belgelerine bakın.

Mesajları senkronize etmeyi test edin

Cloud Firestore, verileri veritabanına abone olan istemcilerle otomatik olarak ve anında senkronize eder.

  • Veritabanında daha önce oluşturduğunuz mesajlar uygulamada görüntülenmelidir. Yeni mesajlar yazmaktan çekinmeyin; anında görünmelidirler.
  • Çalışma alanınızı birden çok pencerede veya sekmede açarsanız, mesajlar sekmeler arasında gerçek zamanlı olarak eşitlenir.
  • (İsteğe bağlı) Doğrudan Firebase konsolunun Veritabanı bölümünden manuel olarak silmeyi, değiştirmeyi veya yeni mesajlar eklemeyi deneyebilirsiniz; herhangi bir değişiklik kullanıcı arayüzünde görünmelidir.

Tebrikler! Uygulamanızda Cloud Firestore belgelerini okuyorsunuz!

Uygulama önizlemesi

bu adımın ekran görüntüsü

9. Temel güvenlik kurallarını ayarlayın

Başlangıçta Cloud Firestore'u test modunu kullanacak şekilde ayarladınız; bu, veritabanınızın okuma ve yazma işlemlerine açık olduğu anlamına gelir. Ancak test modunu yalnızca geliştirmenin çok erken aşamalarında kullanmalısınız. En iyi uygulama olarak, uygulamanızı geliştirirken veritabanınız için güvenlik kuralları oluşturmalısınız. Güvenlik, uygulamanızın yapısı ve davranışının ayrılmaz bir parçası olmalıdır.

Güvenlik Kuralları, veritabanınızdaki belgelere ve koleksiyonlara erişimi denetlemenize olanak tanır. Esnek kurallar sözdizimi, tüm veritabanına tüm yazmalardan belirli bir belgedeki işlemlere kadar her şeyle eşleşen kurallar oluşturmanıza olanak tanır.

Firebase konsolunda Cloud Firestore için güvenlik kuralları yazabilirsiniz:

  1. Firebase konsolunun Oluştur bölümünde, Firestore Database öğesine tıklayın, ardından Kurallar sekmesini seçin (veya doğrudan Kurallar sekmesine gitmek için burayı tıklayın).
  2. Bugünden birkaç hafta sonra genel erişim süresi sınırı olan aşağıdaki varsayılan güvenlik kurallarını görmelisiniz.

bu adımın ekran görüntüsü

Koleksiyonları tanımlayın

İlk olarak, uygulamanın veri yazdığı koleksiyonları tanımlayın.

  1. Mevcut match /{document=**} yan tümcesini silin, böylece kurallarınız şöyle görünür:
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
      }
    }
    
  2. match /databases/{database}/documents , güvenliğini sağlamak istediğiniz koleksiyonu tanımlayın:
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /guestbook/{entry} {
         // You'll add rules here in the next step.
      }
    }
    

Güvenlik kuralları ekle

Her konuk defteri belgesinde bir alan olarak Kimlik Doğrulama UID'sini kullandığınız için, Kimlik Doğrulama UID'sini alabilir ve belgeye yazmaya çalışan herkesin eşleşen bir Kimlik Doğrulama UID'si olduğunu doğrulayabilirsiniz.

  1. Aşağıda gösterildiği gibi okuma ve yazma kurallarını kural kümenize ekleyin:
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /guestbook/{entry} {
          allow read: if request.auth.uid != null;
          allow create:
            if request.auth.uid == request.resource.data.userId;
        }
      }
    }
    
  2. Yeni kurallarınızı dağıtmak için Yayınla'yı tıklayın. Artık, ziyaretçi defteri için yalnızca oturum açmış kullanıcılar mesajları okuyabilir (herhangi bir mesaj!), ancak yalnızca kullanıcı kimliğinizi kullanarak bir mesaj oluşturabilirsiniz. Ayrıca mesajların düzenlenmesine veya silinmesine de izin vermiyoruz.

Doğrulama kuralları ekle

  1. Belgede beklenen tüm alanların mevcut olduğundan emin olmak için veri doğrulaması ekleyin:
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /guestbook/{entry} {
          allow read: if request.auth.uid != null;
          allow create:
          if request.auth.uid == request.resource.data.userId
              && "name" in request.resource.data
              && "text" in request.resource.data
              && "timestamp" in request.resource.data;
        }
      }
    }
    
  2. Yeni kurallarınızı dağıtmak için Yayınla'ya tıklayın.

Dinleyicileri sıfırla

Uygulamanız artık yalnızca kimliği doğrulanmış kullanıcıların oturum açmasına izin verdiğinden, ziyaretçi defteri firestore sorgusunu Kimlik Doğrulama dinleyicisinin içine taşımanız gerekir. Aksi takdirde, kullanıcı oturumu kapattığında izin hataları oluşacak ve uygulamanın bağlantısı kesilecektir.

  1. StackBlitz'de index.js dosyasına gidin.
  2. Anlık görüntü dinleyicisindeki konuk defteri koleksiyonunu subscribeGuestbook onSnapshot adlı yeni bir işleve çekin. Ayrıca onSnapshot işlevinin sonuçlarını guestbookListener değişkenine atayın.

    Firestore onSnapshot dinleyicisi, daha sonra anlık görüntü dinleyicisini iptal etmek için kullanabileceğiniz bir abonelikten çıkma işlevi döndürür .
    // ...
    // Listen to guestbook updates
    function subscribeGuestbook() {
      const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
      guestbookListener = onSnapshot(q, snaps => {
        // Reset page
        guestbook.innerHTML = '';
        // Loop through documents in database
        snaps.forEach(doc => {
          // Create an HTML entry for each document and add it to the chat
          const entry = document.createElement('p');
          entry.textContent = doc.data().name + ': ' + doc.data().text;
          guestbook.appendChild(entry);
        });
      });
    }
    
  3. Altına unsubscribeGuestbook adlı yeni bir işlev ekleyin. guestbookListener değişkeninin boş olup olmadığını kontrol edin, ardından dinleyiciyi iptal etmek için işlevi çağırın.
    // ...
    // Unsubscribe from guestbook updates
    function unsubscribeGuestbook() {
      if (guestbookListener != null) {
        guestbookListener();
        guestbookListener = null;
      }
    }
    

Son olarak, onAuthStateChanged geri çağrısına yeni işlevleri ekleyin.

  1. if (user) öğesinin altına subscribeGuestbook() ekleyin.
  2. else ifadesinin altına unsubscribeGuestbook() ekleyin.
    // ...
    // Listen to the current Auth state
    onAuthStateChanged(auth, user => {
      if (user) {
        startRsvpButton.textContent = 'LOGOUT';
        // Show guestbook to logged-in users
        guestbookContainer.style.display = 'block';
        // Subscribe to the guestbook collection
        subscribeGuestbook();
      } else {
        startRsvpButton.textContent = 'RSVP';
        // Hide guestbook for non-logged-in users
        guestbookContainer.style.display = 'none';
        // Unsubscribe from the guestbook collection
        unsubscribeGuestbook();
      }
    });
    

10. Bonus adım: Öğrendiklerinizi uygulayın

Bir katılımcının LCV durumunu kaydedin

Şu anda uygulamanız, etkinlikle ilgilenen kişilerin sohbet etmeye başlamasına izin veriyor. Ayrıca, birinin gelip gelmediğini anlamanın tek yolu, onu sohbette yayınlamasıdır. Organize olalım ve kaç kişinin geleceğini insanlara bildirelim.

Etkinliğe katılmak isteyen kişileri kaydetmek için bir geçiş ekleyeceksiniz, ardından kaç kişinin geldiğinin bir sayısını toplayacaksınız.

  1. StackBlitz'de index.html dosyasına gidin.
  2. guestbook-container , aşağıdaki gibi bir dizi EVET ve HAYIR düğmesi ekleyin:
    <!-- ... -->
      <section id="guestbook-container">
       <h2>Are you attending?</h2>
         <button id="rsvp-yes">YES</button>
         <button id="rsvp-no">NO</button>
    
       <h2>Discussion</h2>
    
       <!-- ... -->
    
     </section>
    <!-- ... -->
    

Uygulama önizlemesi

bu adımın ekran görüntüsü

Ardından, düğme tıklamaları için dinleyiciyi kaydedin. Kullanıcı EVET'i tıklarsa, yanıtı veritabanına kaydetmek için Kimlik Doğrulama UID'sini kullanın.

  1. StackBlitz'de index.js dosyasına gidin.
  2. En üstte, firebase/firestore içe aktarma ifadesini bulun, ardından doc , setDoc ekleyin ve where şöyle yapın:
    // ...
    // Add the Firebase products and methods that you want to use
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot,
      doc,
      setDoc,
      where
    } from 'firebase/firestore';
    
  3. LCV durumunu dinlemek için main() işlevinin altına şu kodu ekleyin:
    async function main() {
      // ...
    
      // Listen to RSVP responses
      rsvpYes.onclick = async () => {
      };
      rsvpNo.onclick = async () => {
      };
    }
    main();
    
    
  4. Ardından, attendees adında yeni bir koleksiyon oluşturun, ardından RSVP düğmelerinden birine tıklanırsa bir belge referansı kaydedin. Hangi düğmenin tıklandığına bağlı olarak bu referansı true veya false olarak ayarlayın.

    İlk olarak, rsvpYes için:
    // ...
    // Listen to RSVP responses
    rsvpYes.onclick = async () => {
      // Get a reference to the user's document in the attendees collection
      const userRef = doc(db, 'attendees', auth.currentUser.uid);
    
      // If they RSVP'd yes, save a document with attendi()ng: true
      try {
        await setDoc(userRef, {
          attending: true
        });
      } catch (e) {
        console.error(e);
      }
    };
    
    Ardından, rsvpNo için aynı, ancak false değeriyle:
    rsvpNo.onclick = async () => {
      // Get a reference to the user's document in the attendees collection
      const userRef = doc(db, 'attendees', auth.currentUser.uid);
    
      // If they RSVP'd yes, save a document with attending: true
      try {
        await setDoc(userRef, {
          attending: false
        });
      } catch (e) {
        console.error(e);
      }
    };
    

Güvenlik Kurallarınızı Güncelleyin

Halihazırda ayarlanmış bazı kurallarınız olduğundan, düğmelerle eklediğiniz yeni veriler reddedilecektir.

attendees koleksiyonuna eklemelere izin ver

attendees koleksiyonuna eklemeye izin vermek için kuralları güncellemeniz gerekir.

  1. attendees koleksiyonu için, belge adı olarak Kimlik Doğrulama uid kullandığınızdan, onu alabilir ve göndericinin kullanıcı kimliğinin yazdıkları belgeyle aynı olduğunu doğrulayabilirsiniz. Herkesin katılımcı listesini okumasına izin vereceksiniz (orada özel veri olmadığından), ancak yalnızca içerik oluşturucu onu güncelleyebilmelidir.
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        // ... //
        match /attendees/{userId} {
          allow read: if true;
          allow write: if request.auth.uid == userId;
        }
      }
    }
    
  2. Yeni kurallarınızı dağıtmak için Yayınla'ya tıklayın.

Doğrulama kuralları ekle

  1. Belgede beklenen tüm alanların mevcut olduğundan emin olmak için bazı veri doğrulama kuralları ekleyin:
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        // ... //
        match /attendees/{userId} {
          allow read: if true;
          allow write: if request.auth.uid == userId
              && "attending" in request.resource.data;
    
        }
      }
    }
    
  2. Kurallarınızı dağıtmak için Yayınla'ya tıklamayı unutmayın!

(İsteğe bağlı) Artık düğmelere tıklamanın sonuçlarını görüntüleyebilirsiniz. Firebase konsolunda Cloud Firestore kontrol panelinize gidin.

LCV durumunu oku

Artık yanıtları kaydettiğinize göre, kimin geldiğini görelim ve bunu kullanıcı arayüzüne yansıtalım.

  1. StackBlitz'de index.html dosyasına gidin.
  2. description-container , number-attending kimliğine sahip yeni bir öğe ekleyin.
    <!-- ... -->
    
     <section id="description-container">
         <!-- ... -->
         <p id="number-attending"></p>
     </section>
    
    <!-- ... -->
    

Ardından, attendees koleksiyonu için dinleyiciyi kaydedin ve EVET yanıtlarının sayısını sayın:

  1. StackBlitz'de index.js dosyasına gidin.
  2. main() işlevinin altına, LCV durumunu dinlemek ve EVET tıklamalarını saymak için aşağıdaki kodu ekleyin.
    async function main() {
      // ...
    
      // Listen for attendee list
      const attendingQuery = query(
        collection(db, 'attendees'),
        where('attending', '==', true)
      );
      const unsubscribe = onSnapshot(attendingQuery, snap => {
        const newAttendeeCount = snap.docs.length;
        numberAttending.innerHTML = newAttendeeCount + ' people going';
      });
    }
    main();
    

Son olarak mevcut duruma karşılık gelen butonu vurgulayalım.

  1. Geçerli Kimlik Doğrulama UID'sinin attendees koleksiyonunda bir girişi olup olmadığını kontrol eden bir işlev oluşturun, ardından düğme sınıfını clicked olarak ayarlayın.
    // ...
    // Listen for attendee list
    function subscribeCurrentRSVP(user) {
      const ref = doc(db, 'attendees', user.uid);
      rsvpListener = onSnapshot(ref, doc => {
        if (doc && doc.data()) {
          const attendingResponse = doc.data().attending;
    
          // Update css classes for buttons
          if (attendingResponse) {
            rsvpYes.className = 'clicked';
            rsvpNo.className = '';
          } else {
            rsvpYes.className = '';
            rsvpNo.className = 'clicked';
          }
        }
      });
    }
    
  2. Ayrıca, abonelikten çıkmak için bir fonksiyon yapalım. Bu, kullanıcı oturumu kapattığında kullanılacaktır.
    // ...
    function unsubscribeCurrentRSVP() {
      if (rsvpListener != null) {
        rsvpListener();
        rsvpListener = null;
      }
      rsvpYes.className = '';
      rsvpNo.className = '';
    }
    
  3. Kimlik Doğrulama dinleyicisinden işlevleri çağırın.
    // ...
    // Listen to the current Auth state
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
          // Show guestbook to logged-in users
          guestbookContainer.style.display = 'block';
    
          // Subscribe to the guestbook collection
          subscribeGuestbook();
          // Subcribe to the user's RSVP
          subscribeCurrentRSVP(user);
        } else {
          startRsvpButton.textContent = 'RSVP';
          // Hide guestbook for non-logged-in users
          guestbookContainer.style.display = 'none'
          ;
          // Unsubscribe from the guestbook collection
          unsubscribeGuestbook();
          // Unsubscribe from the guestbook collection
          unsubscribeCurrentRSVP();
        }
      });
    
  4. Birden fazla kullanıcı olarak oturum açmayı deneyin ve her ek EVET düğmesi tıklamasıyla sayı artışını görün.

Uygulama önizlemesi

bu adımın ekran görüntüsü

11. Tebrikler!

Etkileşimli, gerçek zamanlı bir web uygulaması oluşturmak için Firebase'i kullandınız!

Neyi kapsadık

  • Firebase Kimlik Doğrulaması
  • Firebase Kullanıcı Arayüzü
  • Bulut Firestore
  • Firebase Güvenlik Kuralları

Sonraki adımlar

  • Firebase Geliştirici İş Akışı hakkında daha fazla bilgi edinmek ister misiniz? Uygulamanızı tamamen yerel olarak nasıl test edip çalıştıracağınızı öğrenmek için Firebase öykünücü kod laboratuvarına göz atın.
  • Diğer Firebase ürünleri hakkında daha fazla bilgi edinmek ister misiniz? Belki de kullanıcıların yüklediği resim dosyalarını saklamak istiyorsunuz? Veya kullanıcılarınıza bildirim göndermek mi? Web için çok daha fazla Firebase ürününde daha fazla derinliğe inen bir kod laboratuvarı için Firebase web kod laboratuvarına göz atın.
  • Cloud Firestore hakkında daha fazla bilgi edinmek ister misiniz? Belki alt koleksiyonlar ve işlemler hakkında bilgi edinmek istersiniz? Cloud Firestore'da daha derinlere inen bir kod laboratuvarı için Cloud Firestore web kod laboratuvarına gidin. Veya Cloud Firestore'u tanımak için bu YouTube serisine göz atın!

Daha fazla bilgi edin

Nasıl gitti?

Geri bildiriminizi çok isteriz! Lütfen burada (çok) kısa bir form doldurun.