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

1. Genel Bakış

Bu codelab olarak, ilgili bazı temel unsurları öğreneceksiniz Firebase interaktif web uygulamaları yaratmak için. Birkaç Firebase ürünü kullanarak bir etkinlik LCV ve ziyaretçi defteri sohbet uygulaması oluşturacaksınız.

59abdefbcc23bbbe.png

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ı.
  • Erişim stackblitz.com (hesap veya oturum açma gerekli).
  • 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 olarak, kullanarak bir uygulamayı kurmak StackBlitz birkaç Firebase içine entegre iş akışları olan bir online editörü. 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: f5135360aef481cc.png

Artık kendi StackBlitz projeniz olarak başlangıç ​​kodunun bir kopyasına sahipsiniz. Oturum olmadığı için, hesabınız denir @anonymous , ancak proje eşsiz bir URL ile birlikte, eşsiz bir adı vardır. 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 yılında açılması index.html dosyasını.
  2. Bulun event-details-container ve description-container , daha sonra bir 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

908cc57ce3a5b5fe.png

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. Oturum açın Firebase .
  2. Firebase konsolunda, tıklayın Project ekleyin (veya proje oluşturun), ardından Firebase proje Firebase-Web Codelab isim.
    a67c239f8cc7f4b5.png
  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 kurulumunu atlayın.

Firebase projeleri hakkında daha fazla bilgi edinmek için bkz Firebase projeleri anlayın .

Konsolda Firebase ürünlerini etkinleştirin

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

  • Firebase Kimlik Doğrulama ve Firebase UI kolayca kullanıcılar uygulamanıza oturum açmak için izin vermek.
  • Bulut Firestore bulut yapılandırılmış verileri kaydetmek ve ne zaman veri değişiklikleri anında bildirim almak için.
  • Firebase Güvenlik Kuralları veritabanını güvenli.

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 izin vermek için, bu codelab için yönteminde oturum açma E-posta / Şifre kullanacağız:

  1. Firebase konsolunda, sol paneldeki Oluştur tıklayın.
  2. Doğrulama, ardından Oturum açma yöntemi sekmesine tıklayın tıklayın (veya buraya tıklayın Sign-in yöntemi sekmesine doğrudan gitmek için).
  3. Anahtarı açık konumuna etkinleştirme ayarlayın sağlayıcılar Oturum listede E-posta / Şifre tıklayın, ardından Kaydet'i tıklayın.
    4c88427cfd869bee.png

Cloud Firestore'u Etkinleştir

Web uygulaması kullanan Bulut FireStore sohbet mesajlarını kaydetmek ve yeni sohbet mesajları almak için.

Cloud Firestore'u etkinleştirin:

  1. Firebase konsolunun Yapı bölümünde, Firestore veritabanı.
  2. Veritabanı oluşturun tıklayın.
    3ce19fd6467e51c5.png
  3. Test modu seçeneğini Başlat 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.
    56369cebb9300eb.png
  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.
    32f815f4648c3174.png
  5. Bitti 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. Olarak bunu yapmanın birden çok yolu vardır Firebase belgelerinde açıklanan . Ö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. Sen modüler SDK'larla ilgili daha fazla bilgi edinebilirsiniz docs .

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 ithalat ifadeleri zaten üst kısmında yer almaktadır index.js dosyası ve biz giderken her Firebase kütüphaneden daha yöntemleri ithal olacak:

// 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';

Projeye bir Firebase web uygulaması ekleyin

  1. Geri Firebase konsolunda, üst Proje Özeti tıklayarak projenizin Genel Bakış sayfasına gidin bıraktı.
  2. Projenizin genel bakış sayfasının ortasındaki web simgesine tıklayın b286f3d215e1f578.png yeni bir Firebase web uygulaması oluşturmak için.
    c167e9526fad2825.png
  3. Takma Web Uygulaması ile app kaydedin.
  4. Bu codelab için de bu uygulama için Hosting Firebase kurmak yanındaki kutuyu işaretleyin DEĞIL. Şimdilik StackBlitz'in önizleme bölmesini kullanacaksınız.
  5. Kayıt uygulamasını tıklayın.
    c85ac8aa351e2560.png
  6. Kopya Firebase yapılandırma nesnesi panoya.
    ed1e598c6132f734.png
  7. Teselli etmeye devam edin tıklayın.

Firebase yapılandırma nesnesini uygulamanıza ekleyin:

  1. Geri StackBlitz içinde, gidin index.js dosyası.
  2. Locate Add Firebase project configuration object here sonra sadece yorumun altında yapılandırma pasajı yapıştırın, yorum hattı.
  3. Ekle initializeApp benzersiz Firebase proje yapılandırmayı kullanarak Firebase kurmak için işlev çağrısı.
    // ...
    // 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

Şimdi app Firebase eklediğiniz için, kullanmakta kayıtları insanlar o bir LCV düğmesi ayarlayabilirsiniz Firebase Authentication .

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. Sen bağlamak yapabilirsiniz FirebaseUI bir LCV button.FirebaseUI size Firebase Auth üstünde önceden oluşturulmuş bir UI veren bir kütüphanedir.

FirebaseUI bir yapılandırmayı (içinde seçeneklerini görmek gerektirir belgelere iki şey yapar):

  • Eğer yönteminde oturum açma E-posta / Şifre kullanmak istediğiniz FirebaseUI 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 olarak, gidin index.js dosyası.
  2. Üst kısımdaki bulun firebase/auth import ifadesini, daha sonra eklemek getAuth ve EmailAuthProvider : aynen bö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 hemen sonra bir referans kaydet initializeApp : Bunu gibi
    initializeApp(firebaseConfig);
    auth = getAuth();
    
  4. FirebaseUI yapılandırmasının başlangıç ​​kodunda zaten sağlandığına dikkat edin. E-posta doğrulama sağlayıcısını kullanmak için zaten ayarlandı.
  5. Alt kısmında main() işlevi index.js : Bunu gibi, FirebaseUI başlatma deyimi eklemek
    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 olarak, gidin index.html dosyasına.
  2. İçeride bir LCV düğmesi için HTML ekle event-details-container aşağıdaki örnekte görüldüğü gibi.

    Aynı kullanmaya özen gösterin id bu codelab için vardır, çünkü zaten bu özel kimlikleri yerine kanca değerleri aşağıda gösterildiği şekilde index.js dosyası.

    Not o index.html dosyasına, kimlik ile bir kap var firebaseui-auth-container . 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 önizleme
    ab9ad7d61bb7b28c.png
  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.

    Dibine aşağıdaki kodu ekleyin main() işlev index.js :
    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.
    • Eğer bildiren bir hata iletisi görürseniz auth/operation-not-allowed veya The given sign-in provider is disabled for this Firebase project , emin bir oturum açma sağlayıcının Firebase konsolunda gibi e-posta / Şifre etkin olduğunu olun.
    Uygulama önizlemesi
    3024f90b52ad55fe.png
  2. Git Kimlik Doğrulama pano Firebase konsolunda. Kullanıcılar sekmesinde, size uygulamasında işarete girdiği hesap bilgilerini görmeniz gerekir. 682fc0eca86a99fc.png

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 olarak, gidin index.js dosyası.
  2. Üst kısımdaki bulun firebase/auth import ifadesini, daha sonra eklemek signOut ve onAuthStateChanged : aynen böyle
    // ...
    // Add the Firebase products and methods that you want to use
    import {
      getAuth,
      EmailAuthProvider,
      signOut,
      onAuthStateChanged
    } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. Altındaki aşağıdaki kodu ekleyin main() fonksiyonu:
    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, cari değiştirmek startRsvpButton.addEventListener : Aşağıdaki ile
    // ...
    // 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ızda düğme Oturumu Kapat göstermelidir ve tıklandığında o RSVP geri dönmek gerekir.

Uygulama önizlemesi

4c540450924f1607.png

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 uygulama yazma sohbet mesajlarını saklamak için kullanacağız Bulut FireStore .

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. Sen adında bir üst düzey koleksiyonunda bir belge olarak sohbet her mesajı depolayacak guestbook .

b447950f9f993789.png

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 olarak, gidin index.html dosyasına.
  2. Bulun guestbook-container , ileti giriş alanına ve gönder düğmesi ile bir form oluşturmak için aşağıdaki HTML 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

4a892284443cf73d.png

GÖNDER butonuna tıklayarak bir kullanıcı aşağıdaki kod parçacığını tetikleyecektir. Bu ileti giriş alanın içeriğini ekler guestbook veritabanının koleksiyonu. Spesifik olarak, addDoc yöntemi (otomatik olarak üretilen bir kimlik ile) yeni bir belge için mesaj içeriğini ekler guestbook toplama.

  1. StackBlitz olarak, gidin index.js dosyası.
  2. Üst kısımdaki bulun firebase/firestore import ifadesini, ardından eklemek getFirestore , addDoc ve collection : aynen böyle
    // ...
    
    // 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 FireStore bir başvuru tasarruf edersiniz db sonra nesne sağa initializeApp :
    initializeApp(firebaseConfig);
    auth = getAuth();
    db = getFirestore();
    
  4. Alt kısmında main() işlevi, aşağıdaki kodu ekleyin.

    Not auth.currentUser.uid tüm giriş yapan için kullanıcılara Firebase Kimlik verdiği otomatik oluşturulan benzersiz bir kimlik bir referanstır.
    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

Sen konukların sohbet görmek üzere kimseyi istemiyorum. 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. Yani kendi uygulamalar için, ayrıca ile veritabanı güvenliğini sağlamak isteyeceksiniz dedi Firebase Güvenlik Kuralları . (Güvenlik kuralları hakkında daha sonra kod laboratuvarında daha fazla bilgi var.)

  1. StackBlitz olarak, gidin index.js dosyası.
  2. Düzenleme onAuthStateChanged gizlemek için dinleyici ve ziyaretçi defteri gösterir.
    // ...
    
    // 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. Örneğin "Hey!" Diye bir mesaj girin ve GÖNDER düğmesini 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 içindeki Veritabanı pano görmeniz gerekir guestbook Yeni eklenen mesajla koleksiyonu. Mesaj göndermeye devam ederseniz, ziyaretçi defteri koleksiyonunuz aşağıdaki gibi birçok belge içerecektir:

Firebase konsolu

713870af0b3b63c.png

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 olarak, gidin index.html dosyasına.
  2. Gelen guestbook-container , kimliği ile yeni bir bölüm eklemek guestbook .
    <!-- ... -->
    
      <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 olarak, gidin index.js dosyası.
  2. Üst kısımdaki bulun firebase/firestore import ifadesini, ardından eklemek query , orderBy ve onSnapshot : Bunu gibi
    // ...
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot
    } from 'firebase/firestore';
    
  3. Alt kısmında main() işlevi, veritabanındaki tüm belgeler (ziyaretçi defteri mesajlar) döngü 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ında mesajları dinlemek için, kullanarak belirli bir koleksiyonu bir sorgu oluşturduk collection işlevini. Değişikliklere dinler Yukarıdaki kod guestbook sohbet mesajlarını saklandığı yerdir koleksiyonu. Mesajlar da kullanarak, tarihe göre sıralanır orderBy('timestamp', 'desc') üstündeki yeni mesajları görüntülemek için.

onSnapshot kullanımına sorgu ve bir geri çağırma işlevi: function iki parametre alır. 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, bkz Bulut Firestore belgelerine .

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.
  • (Opsiyonel), silme, değiştirme veya Firebase konsolunun Veritabanı bölümünde doğrudan yeni mesajlar manuel olarak eklemek deneyebilirsiniz; herhangi bir değişiklik kullanıcı arayüzünde görünmelidir.

Tebrikler! Uygulamanızda Cloud Firestore belgelerini okuyorsunuz!

Uygulama önizlemesi

e30df0a9614bae7d.png

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 Yapı bölümünde, Kurallar sekmesini seçin, ardından Firestore veritabanı tıklayın (veya buraya tıklayın Kuralları sekmesi doğrudan gitmek için).
  2. Kuralların herkese açık olduğuna dair bir uyarıyla birlikte aşağıdaki varsayılan güvenlik kurallarını görmelisiniz.

7767a2d2e64e7275.png

Koleksiyonları tanımlayın

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

In match /databases/{database}/documents , korumak istediğiniz o koleksiyonunu tanımlamak:

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.

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

Şimdi, 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

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

Dinleyicileri sıfırla

Uygulamanız şimdi sadece doğrulanmış sağlar kullanıcıların giriş yapmak olduğundan, ziyaretçi defteri hareket etmelidir firestore Doğrulama dinleyici iç sorgu. Aksi takdirde, kullanıcı oturumu kapattığında izin hataları oluşacak ve uygulamanın bağlantısı kesilecektir.

  1. Ziyaretçi defteri toplama çekin onSnapshot denilen ve yeni bir fonksiyon dinleyici subscribeGuestbook . Ayrıca sonuçlarını atama onSnapshot işlevin guestbookListener değişken.

    Firestore onSnapshot dinleyici döndürür daha sonra anlık dinleyici iptal için kullanmak mümkün olacak bir abonelik iptali işlevi.
    // ...
    // Listen to guestbook updates
    // 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);
        });
      });
    }
    
  2. Adlı yeni fonksiyon derini ekle unsubscribeGuestbook . Olmadığını kontrol edin guestbookListener değişken null değil, daha sonra dinleyici iptal etmek işlevini çağırın.
    // ...
    // Unsubscribe from guestbook updates
    function unsubscribeGuestbook() {
      if (guestbookListener != null) {
        guestbookListener();
        guestbookListener = null;
      }
    }
    

Son olarak, yeni fonksiyonlar ilave onAuthStateChanged callback'inde.

  1. Ekle subscribeGuestbook() altındaki if (user) .
  2. Ekle unsubscribeGuestbook() altındaki else açıklamada.
    // ...
    // 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 olarak, gidin index.html dosyasına.
  2. In guestbook-container :, şöyle, EVET ve HAYIR bir dizi düğme eklemek
    <!-- ... -->
      <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

73ca99ca35c13ee7.png

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

  1. StackBlitz olarak, gidin index.js dosyası.
  2. Üst kısımdaki bulun firebase/firestore import ifadesini, ardından eklemek doc , setDoc ve where , şöyle:
    // ...
    // 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. Alt kısmında main() işlevi, LCV durumlarıyla dinlemek için aşağıdaki kodu ekleyin:
    async function main() {
      // ...
    
      // Listen to RSVP responses
      rsvpYes.onclick = async () => {
      };
      rsvpNo.onclick = async () => {
      };
    }
    main();
    
    
  4. Adlı yeni koleksiyon oluşturun attendees ya LCV düğmesi tıklandığında, o zaman bir belge başvurusu kayıt olun.
  5. İçin başvuru ayarlayın true veya false düğmesi tıklandığında hangi bağlı.

    İlk, rsvpYes :
    // ...
    // 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);
      }
    };
    
    Sonra aynı rsvpNo ancak değer ile false :
    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);
      }
    };
    

Kural ekle

Halihazırda ayarlanmış bazı kurallarınız olduğundan, düğmelerle eklediğiniz yeni veriler reddedilecektir. Sen ekleyerek sağlayan kuralları güncellemeniz gerekir attendees koleksiyonu.

İçin attendees , doküman adı olarak Doğrulama UID kullanılan beri koleksiyonu, sen yakala ve gönderenin doğrulayabilirsiniz uid yazdıkları belgesi olarak aynıdır. 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;
    }
  }
}

Doğrulama kuralları ekle

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 /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}

(İsteğe bağlı) Artık düğmeleri tıklayarak sonuçlarını görebilirsiniz. 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 olarak, gidin index.html dosyasına.
  2. İn description-container , kimliği ile yeni bir öğe eklemek number-attending .
    <!-- ... -->
    
     <section id="description-container">
         <!-- ... -->
         <p id="number-attending"></p>
     </section>
    
    <!-- ... -->
    

Sonra, için dinleyici kayıt attendees toplama ve EVET yanıt sayısını saymak:

  1. StackBlitz olarak, gidin index.js dosyası.
  2. Alt kısmında main() işlevi, LCV durumlarıyla dinlemek ve EVET tıklamaları 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 bir girdi olup olmadığını kontrol eder bir işlev oluşturun attendees koleksiyonuna, ardından düğmesine sınıfını set clicked .
    // ...
    // 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 işlev 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 günlüğünü deneyin ve her ek EVET düğmesine tıklama ile sayım artış görmektedir.

Uygulama önizlemesi

3df607d3e0b3c35.png

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

  • 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? Check out Firebase web codelab web için daha birçok Firebase ürünlerde daha derinlemesine gider bir codelab için.
  • Cloud Firestore hakkında daha fazla bilgi edinmek ister misiniz? Belki alt koleksiyonlar ve işlemler hakkında bilgi edinmek istersiniz? Başının üzerinde Bulut Firestore web codelab Bulut Firestore ilgili ayrıntılı bilgileri daha giden bir codelab için. Ya da bu kontrol Bulut FireStore tanımak için YouTube serisi !

Daha fazla bilgi edin

Nasıl gitti?

Geri bildiriminizi çok isteriz! (Çok) kısa formu doldurun burada .