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

1. Genel Bakış

Bu codelab'de, etkileşimli web uygulamaları oluşturmak için Firebase'in temel özelliklerinden bazılarını öğreneceksiniz. Birkaç Firebase ürünü kullanarak etkinlik katılımı ve konuk defteri sohbet uygulaması oluşturacaksınız.

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

Neler öğreneceksiniz?

  • Firebase Authentication ve FirebaseUI ile kullanıcı kimliklerini 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.

Gerekenler

  • Chrome gibi tercih ettiğiniz bir tarayıcı.
  • stackblitz.com adresine erişim (hesap veya oturum açma gerekmez).
  • Gmail hesabı gibi bir Google Hesabı. GitHub hesabınız için zaten kullandığınız e-posta hesabını kullanmanızı öneririz. Bu sayede StackBlitz'teki gelişmiş özellikleri kullanabilirsiniz.
  • Codelab'in örnek kodu. Kodu nasıl alacağınızı öğrenmek için sonraki adıma bakın.

2. Başlangıç kodunu alma

Bu codelab'de, çeşitli Firebase iş akışlarının entegre edildiği bir online düzenleyici olan StackBlitz'i kullanarak bir uygulama oluşturacaksınız. Stackblitz için yazılım yüklemeniz veya özel bir StackBlitz hesabınız olması gerekmez.

StackBlitz, projeleri başkalarıyla paylaşmanıza olanak tanır. StackBlitz proje URL'niz olan diğer kullanıcılar kodunuzu görebilir ve projenizi çatallayabilir ancak StackBlitz projenizi düzenleyemez.

  1. Başlangıç kodu için şu 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 başlangıç kodunun bir kopyasını kendi StackBlitz projeniz olarak kullanabilirsiniz. Bu projenin benzersiz bir adı ve URL'si vardır. Tüm dosyalarınız ve değişiklikleriniz bu StackBlitz projesine kaydedilir.

3. Etkinlik bilgilerini düzenleme

Bu codelab'in başlangıç materyalleri, web uygulaması için bazı stiller ve uygulamaya ait birkaç HTML kapsayıcı da dahil olmak üzere bazı yapı sağlar. Bu codelab'in ilerleyen bölümlerinde bu kapsayıcıları Firebase'e bağlayacaksınız.

Başlamak için StackBlitz arayüzüyle biraz daha yakından tanışalım.

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

Metni düzenlerken StackBlitz'te otomatik sayfa yeniden yükleme özelliği yeni etkinlik ayrıntılarını gösterir. Güzel, 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 aşağıdaki gibi görünmelidir:

Uygulama önizlemesi

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

4. Firebase projesi oluşturup ayarlama

Etkinlik bilgilerini göstermek konuklarınız için harika bir özelliktir ancak etkinlikleri göstermek herkes için çok yararlı değildir. Bu uygulamaya 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şturup ayarlamanız gerekir.

Firebase projesi oluşturma

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

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

  3. Proje oluşturma seçeneklerini tıklayın. İstenirse Firebase şartlarını kabul edin. Bu uygulama için Analytics'i 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 başlıklı makaleyi inceleyin.

Konsolda Firebase ürünlerini etkinleştirme ve ayarlama

Oluşturduğunuz uygulama, web uygulamaları için kullanılabilen çeşitli Firebase ürünlerini kullanır:

  • Kullanıcılarınızın uygulamanızda kolayca oturum açmasına olanak tanımak için Firebase Authentication ve Firebase UI'yi kullanın.
  • Yapılandırılmış verileri bulutta depolamak ve veriler değiştiğinde anında bildirim almak için Cloud Firestore'u kullanın.
  • Firebase Güvenlik Kuralları'nı kullanarak veritabanınızın güvenliğini sağlayın.

Bu ürünlerin bazıları için özel yapılandırma veya Firebase Konsolu'nun kullanılması gerekir.

Firebase Authentication için e-posta ile oturum açma özelliğini etkinleştirme

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

  1. Firebase konsolunun sol panelinde Derleme > Kimlik doğrulama'yı tıklayın. Ardından Başlayın'ı tıklayın. Şimdi, kayıtlı 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 kontrol panelindesiniz.

    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/Şifre'yi tıklayın, anahtarı Etkinleştir konumuna getirin ve ardından Kaydet'i tıklayın.

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

Cloud Firestore'u ayarlama

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

Cloud Firestore'u Firebase projenizde ayarlamak için:

  1. Firebase konsolunun sol panelinde Derleme'yi genişletin ve ardından Firestore veritabanı'nı seçin.
  2. Create database'i (Veritabanı oluştur) tıklayın.
  3. Veritabanı Kimliği'ni (default) olarak bırakın.
  4. Veritabanı için bir konum seçip Sonraki'yi tıklayın.
    Gerçek bir uygulama için kullanıcılarınıza yakın bir konum seçmeniz gerekir.
  5. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
    Bu kod laboratuvarının ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Veritabanınıza Güvenlik Kuralları eklemeden bir uygulamayı dağıtmayın veya herkese açık olarak göstermeyin.
  6. Oluştur'u tıklayın.

5. Firebase'i ekleme ve yapılandırma

Firebase projenizi oluşturdunuz ve bazı hizmetleri etkinleştirdiniz. Şimdi, Firebase'i kullanmak istediğinizi ve hangi Firebase projesinin kullanılacağını koda bildirmeniz gerekir.

Firebase kitaplıklarını ekleme

Uygulamanızın Firebase'i kullanabilmesi için Firebase kitaplıklarını uygulamaya eklemeniz gerekir. Bunu yapmanın birden fazla yolu vardır. Firebase dokümanlarında bu yöntemler açıklanmaktadır. Örneğin, kitaplıkları Google'ın CDN'sinden ekleyebilir veya npm'yi kullanarak yerel olarak yükleyebilir ve ardından Browserify kullanıyorsanız bunları uygulamanızda paketleyebilirsiniz.

StackBlitz otomatik paket oluşturma özelliğine sahiptir. Bu sayede, içe aktarma ifadelerini kullanarak Firebase kitaplıklarını ekleyebilirsiniz. Kitaplıkların modüler (v9) sürümlerini kullanacaksınız. Bu sürümler, "ağaç sallama" adı verilen bir işlemle web sayfasının toplam boyutunu küçültmenize yardımcı olur. Modüler SDK'lar hakkında daha fazla bilgiyi dokümanlarda bulabilirsiniz.

Bu uygulamayı oluşturmak için Firebase Authentication, FirebaseUI ve Cloud Firestore kitaplıklarını kullanırsınız. Bu kod laboratuvarının index.js dosyasının üst kısmında aşağıdaki içe aktarma ifadeleri zaten yer almaktadır. İlerleyen süreçte 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 Firebase web uygulaması ekleme

  1. Firebase Konsolu'nda, sol üstteki Projeye Genel Bakış'ı tıklayarak projenizin genel bakış sayfasına gidin.
  2. Yeni bir Firebase web uygulaması oluşturmak için projenizin genel bakış sayfasının ortasındaki web simgesini web uygulaması simgesitıklayın.

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

  3. Uygulamayı Web Uygulaması takma adıyla kaydedin.
  4. Bu codelab için Bu uygulama için Firebase Hosting'i de ayarlayın 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'i tıklayın.Firebase yapılandırma nesnesini uygulamanıza ekleyin:
  8. StackBlitz'te index.js dosyasına gidin.
  9. Add Firebase project configuration object here yorum satırını bulun ve yapılandırma snippet'inizi yorumun hemen altına yapıştırın.
  10. Benzersiz Firebase proje yapılandırmanızı kullanarak Firebase'i ayarlamak 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.firebasestorage.app",
  messagingSenderId: "random-unique-string",
  appId: "random-unique-string",
};

// Initialize Firebase
initializeApp(firebaseConfig);

6. Kullanıcı oturum açma (LCV) özelliğini ekleme

Firebase'i uygulamaya eklediğinize göre, Firebase Authentication'i kullanarak kullanıcıları kaydeden bir katılım düğmesi oluşturabilirsiniz.

E-posta ile oturum açma ve FirebaseUI ile kullanıcılarınızın kimliğini doğrulama

Kullanıcıdan e-posta adresiyle oturum açmasını isteyen bir LCV düğmesine ihtiyacınız vardır. Bunu, FirebaseUI'yi bir katılım düğmesine bağlayarak yapabilirsiniz.FirebaseUI, Firebase Auth'un üzerine önceden oluşturulmuş bir kullanıcı arayüzü sağlayan bir kitaplıktır.

FirebaseUI, iki şeyi yapan bir yapılandırma (dokümanlar bölümündeki seçeneklere bakın) gerektirir:

  • FirebaseUI'ye E-posta/Şifre oturum açma yöntemini kullanmak istediğinizi bildirir.
  • Başarılı bir oturum açma işlemi için geri çağırma işlevini işler ve yönlendirmeyi önlemek için yanlış değerini döndürür. Tek sayfalık bir web uygulaması oluşturduğunuz için sayfanın yenilenmesini istemiyorsunuz.

FirebaseUI Auth'u başlatacak kodu ekleme

  1. StackBlitz'te index.js dosyasına gidin.
  2. Üstte, firebase/auth içe aktarma ifadesini bulun ve ardından getAuth ile EmailAuthProvider öğelerini aşağıdaki gibi ekleyin:
    // ...
// Add the Firebase products and methods that you want to use
import { getAuth, EmailAuthProvider } from 'firebase/auth';

import {} from 'firebase/firestore';
  3. initializeApp'ten hemen sonra auth nesnesine referans kaydedin. Örneğin:
    initializeApp(firebaseConfig);
auth = getAuth();
  4. FirebaseUI yapılandırmasının başlangıç kodunda zaten sağlandığını unutmayın. E-posta kimlik doğrulama sağlayıcıyı kullanmak üzere zaten ayarlanmış.
  5. index.js içindeki main() işlevinin en altına FirebaseUI başlatma ifadesini ekleyin. Örneğin:
    async function main() {
  // ...

  // Initialize the FirebaseUI widget using Firebase
  const ui = new firebaseui.auth.AuthUI(auth);
}
main();

HTML'ye LCV düğmesi ekleme

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

    Bu kod laboratuvarının index.js dosyasında bu kimlikler için zaten kanca bulunduğundan aşağıda gösterilenlerle aynı id değerlerini kullandığınızdan emin olun.

    index.html dosyasında firebaseui-auth-container kimlikli bir kapsayıcı olduğunu unutmayın. Bu, girişinizi saklamak 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 oluşturun ve FirebaseUI start işlevini çağırın. Bu, FirebaseUI'ye oturum açma penceresini görmek istediğinizi bildirir.

    index.js dosyasında 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 etme

  1. StackBlitz'in önizleme penceresinde, uygulamada oturum açmak için "Evet" düğmesini tıklayın.
    • Bu codelab için e-posta doğrulama adımı oluşturmadığınızdan, sahte e-posta adresi de dahil olmak üzere herhangi bir e-posta adresini kullanabilirsiniz.
    • auth/operation-not-allowed veya The given sign-in provider is disabled for this Firebase project belirten bir hata mesajı görürseniz Firebase konsolunda oturum açma sağlayıcısı olarak E-posta/Şifre'yi etkinleştirdiğinizden emin olun.
    Uygulama önizlemesi

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

  2. Firebase konsolundaki Kimlik Doğrulama kontrol paneline gidin. Kullanıcılar sekmesinde, uygulamada oturum açmak için girdiğiniz hesap bilgilerini görürsünüz.

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

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

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

Kullanıcının oturum açma durumu her değiştiğinde bildirim alan Firebase Authentication durum dinleyicisi geri çağırma işlevini kullanırsınız. Şu anda oturum açmış bir kullanıcı varsa uygulamanız "Onay" düğmesini "Oturumu kapat" düğmesine çevirir.

  1. StackBlitz'te index.js dosyasına gidin.
  2. Üstte, firebase/auth içe aktarma ifadesini bulun ve ardından signOut ile onAuthStateChanged öğelerini aşağıdaki gibi 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() işlevinin en altına aşağıdaki 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, mevcut bir kullanıcı olup olmadığını kontrol edin ve kullanıcının oturumunu kapatın. Bunun için mevcut startRsvpButton.addEventListener öğesini 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);
  }
});

Artık uygulamanızdaki düğmede OTURUMA KAPANIŞ yazıyor olmalı ve düğme tıklandığında LCV'ye geri dönüyor olmalıdır.

Uygulama önizlemesi

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

7. Cloud Firestore'a mesaj yazma

Kullanıcıların uygulamanıza geldiğini bilmek harika bir şeydir. Ancak misafirlere uygulamada yapacakları başka bir şey verelim. Misafirler bir konuk defterine mesaj bırakabilirler. Davete katılmaktan neden heyecan duyduğunuzu veya kiminle tanışmayı umduğunuzu paylaşabilirsiniz.

Kullanıcıların uygulamada yazdığı sohbet mesajlarını depolamak için Cloud Firestore'u kullanırsınız.

Veri modeli

NoSQL veritabanı olan Cloud Firestore'da depolanan veriler koleksiyonlar, belgeler, alanlar ve alt koleksiyonlara ayrılır. Sohbetin her mesajını guestbook adlı üst düzey bir koleksiyonda doküman olarak depolarsınız.

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

Firestore'a mesaj ekleme

Bu bölümde, kullanıcıların veritabanına yeni mesajlar yazmasını sağlayacak işlevi ekleyeceksiniz. Öncelikle kullanıcı arayüzü öğelerinin (mesaj alanı ve gönder düğmesi) HTML'sini ekleyin. Ardından, bu öğeleri veritabanına bağlayan kodu eklersiniz.

Mesaj alanı ve gönder düğmesinin kullanıcı arayüzü öğelerini eklemek için:

  1. StackBlitz'te index.html dosyasına gidin.
  2. guestbook-container öğesini bulun, ardından mesaj giriş alanı ve gönder düğmesi içeren 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ü

Kullanıcı GÖNDER düğmesini tıkladığında aşağıdaki kod snippet'i tetiklenir. İleti giriş alanının içeriğini veritabanının guestbook koleksiyonuna ekler. Daha açık belirtmek gerekirse addDoc yöntemi, ileti içeriğini guestbook koleksiyonundaki yeni bir belgeye (otomatik olarak oluşturulan kimliğe sahip) ekler.

  1. StackBlitz'te index.js dosyasına gidin.
  2. En üstte firebase/firestore içe aktarma ifadesini bulun, ardından getFirestore, addDoc ve collection öğelerini aşağıdaki gibi 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 hemen sonrasında Firestore db nesnesine referans kaydedeceğiz:
    initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
  4. main() işlevinin en altına aşağıdaki kodu ekleyin.

    auth.currentUser.uid değerinin, Firebase Authentication'in giriş yapmış tüm kullanıcılar için verdiği otomatik olarak oluşturulan benzersiz kimliğe 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();

Anı defteri yalnızca oturum açmış kullanıcılara gösterilir

Davetlilerin sohbetini herkesin görmesini istemiyorsunuz. Sohbeti güvence altına almak için yapabileceğiniz bir işlem, yalnızca oturum açmış kullanıcıların konuk 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 almanız gerekir. (Güvenlik kuralları hakkında daha fazla bilgiyi codelab'in ilerleyen bölümlerinde bulabilirsiniz.)

  1. StackBlitz'te index.js dosyasına gidin.
  2. onAuthStateChanged dinleyicisini düzenleyerek konuk defterini gizleyebilirsiniz.
    // ...

// 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 etme

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

Bu işlem, mesajı Cloud Firestore veritabanınıza yazar. Ancak verileri getirme işlemini uygulamanız gerektiği için mesajı henüz gerçek web uygulamanızda görmezsiniz. Ardından, bu adımı uygularsınız.

Ancak yeni eklenen mesajı Firebase konsolunda görebilirsiniz.

Firebase konsolundaki Firestore Veritabanı kontrol panelinde, yeni eklenen mesajınızı içeren guestbook koleksiyonunu görürsünüz. Mesaj göndermeye devam ederseniz konuk defteri koleksiyonunuz aşağıdaki gibi birçok doküman içerir:

Firebase konsolu

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

8. Mesajları okuma

Mesajları senkronize etme

Davetlilerin veritabanına mesaj yazabilmesi güzel bir özellik ancak henüz uygulamada bu mesajları göremiyorlar.

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

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

  1. StackBlitz'te index.html dosyasına gidin.
  2. guestbook-container dosyasına guestbook kimlikli 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'te index.js dosyasına gidin.
  2. En üstte firebase/firestore içe aktarma ifadesini bulun, ardından query, orderBy ve onSnapshot öğelerini aşağıdaki gibi ekleyin:
    // ...
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot
} from 'firebase/firestore';
  3. Veritabındaki tüm dokümanları (ziyaretçi defteri mesajları) döngü içinde işlemek için main() işlevinin altına 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ı mesajlarını dinlemek için collection işlevini kullanarak belirli bir koleksiyonda sorgu oluşturdunuz. Yukarıdaki kod, sohbet mesajlarının depolandığı guestbook koleksiyonundaki değişiklikleri dinler. Mesajlar tarihe göre de sıralanır. orderBy('timestamp', 'desc') simgesini kullanarak en yeni mesajları en üstte gösterebilirsiniz.

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

Mesaj senkronizasyonunu test etme

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

  • Daha önce veritabanında oluşturduğunuz mesajlar uygulamada gösterilir. Yeni mesajlar yazabilirsiniz. Bu mesajlar anında gösterilir.
  • Çalışma alanınızı birden fazla pencerede veya sekmede açarsanız iletiler sekmeler arasında gerçek zamanlı olarak senkronize edilir.
  • (İsteğe bağlı) Doğrudan Firebase konsolunun Veritabanı bölümünde manuel olarak mesajları silmeyi, değiştirmeyi veya yeni mesajlar eklemeyi deneyebilirsiniz. Yaptığınız değişiklikler kullanıcı arayüzünde görünür.

Tebrikler! Uygulamanızda Cloud Firestore dokümanlarını okuyorsunuz.

Uygulama önizlemesi

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

9. Temel güvenlik kuralları oluşturma

Cloud Firestore'u başlangıçta test modunu kullanacak şekilde ayarladıysanız veritabanınız okuma ve yazma işlemlerine açıktır. 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şturmanız gerekir. 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 dokümanlara ve koleksiyonlara erişimi kontrol etmenize olanak tanır. Esnek kurallar söz dizimi, veritabanının tamamına yapılan tüm yazma işlemlerinden 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 Konsolu'nun Derleme bölümünde Firestore Veritabanı'nı tıklayın, ardından Kurallar sekmesini seçin (veya doğrudan Kurallar sekmesine gitmek için burayı tıklayın).
  2. Aşağıdaki varsayılan güvenlik kurallarını göreceksiniz. Bu kurallarda, bugünden itibaren birkaç hafta sonra herkese açık erişim için zaman sınırı belirlenmiştir.

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

Koleksiyonları tanımlama

Öncelikle, uygulamanın veri yazdığı koleksiyonları tanımlayın.

  1. Mevcut match /{document=**} yan tümcesini silin. Böylece kurallarınız şu şekilde görünür:
    rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  }
}
  2. match /databases/{database}/documents'te, güvenliğini sağlamak istediğiniz koleksiyonu belirleyin:
    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ı ekleme

Her bir konuk defteri belgesinde kimlik doğrulama UID'sini bir alan olarak kullandığınız için kimlik doğrulama UID'sini alabilir ve dokümana yazmaya çalışan herkesin eşleşen bir kimlik doğrulama UID'sine sahip olduğunu doğrulayabilirsiniz.

  1. Okuma ve yazma kurallarını aşağıdaki gibi 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 yalnızca oturum açmış kullanıcılar mesajları (tüm mesajları) okuyabilir ancak yalnızca kullanıcı kimliğinizi kullanarak mesaj oluşturabilirsiniz. Mesajların düzenlenmesine veya silinmesine de izin verilmez.

Doğrulama kuralları ekleme

  1. Beklenen tüm alanların dokümanda bulunduğ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'yı tıklayın.

Dinleyicileri sıfırlama

Uygulamanız artık yalnızca kimliği doğrulanmış kullanıcıların giriş yapmasına izin verdiğinden, misafir defteri firestore sorgusunu Kimlik Doğrulama dinleyicisine taşımanız gerekir. Aksi takdirde, izin hataları meydana gelir ve kullanıcı oturumu kapattığında uygulamanın bağlantısı kesilir.

  1. StackBlitz'te index.js dosyasına gidin.
  2. onSnapshot dinleyicisi olan konuk defteri koleksiyonunu subscribeGuestbook adlı yeni bir işleve alın. 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 e-posta listesinden çı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. Aşağıya 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, yeni işlevleri onAuthStateChanged geri çağırma işlevine ekleyin.

  1. if (user)'un alt kısmına subscribeGuestbook() ekleyin.
  2. else beyanının 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

Katılımcıların LCV durumlarını kaydetme

Şu anda uygulamanız, etkinlikle ilgilenen kullanıcıların sohbet başlatmasına izin veriyor. Ayrıca, bir kullanıcının toplantıya katılıp katılmayacağını yalnızca sohbet üzerinden öğrenebilirsiniz. Organizasyona başlayalım ve kaç kişinin katılacağını herkese bildirin.

Etkinliğe katılmak isteyen kullanıcıları kaydettirmek için bir açma/kapatma düğmesi eklersiniz ve kaç kişinin katılacağını toplarsınız.

  1. StackBlitz'te index.html dosyasına gidin.
  2. guestbook-container alanına aşağıdaki gibi bir EVET ve HAYIR düğmesi grubu 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, dinleyiciyi düğme tıklamaları için kaydedin. Kullanıcı EVET'i tıklarsa yanıtı veritabanına kaydetmek için kimlik doğrulama kimlik bilgisini kullanın.

  1. StackBlitz'te index.js dosyasına gidin.
  2. En üstte firebase/firestore içe aktarma ifadesini bulun, ardından doc, setDoc ve where öğelerini aşağıdaki gibi ekleyin:
    // ...
// 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 en altına aşağıdaki kodu ekleyin:
    async function main() {
  // ...

  // Listen to RSVP responses
  rsvpYes.onclick = async () => {
  };
  rsvpNo.onclick = async () => {
  };
}
main();
  4. Ardından, attendees adlı yeni bir koleksiyon oluşturun ve katılım düğmelerinden biri tıklandığında bir doküman referansı kaydedin. Bu referansı, tıklanan düğmeye bağlı olarak true veya false olarak ayarlayın.

    Öncelikle 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ısını ancak 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);
  }
};
    değeriyle yapın

Güvenlik Kurallarınızı güncelleme

Hâlihazırda ayarlanmış bazı kurallarınız olduğundan düğmelerle eklediğiniz yeni veriler reddedilir.

attendees koleksiyonuna ekleme yapılmasına izin verme

Kuralları attendees koleksiyonuna eklemeye izin verecek şekilde güncellemeniz gerekir.

  1. attendees koleksiyonu için belge adı olarak Kimlik Doğrulama UID'sini kullandığınızdan, bu UID'yi alıp gönderenin uid değerinin, yazmakta olduğu belgeyle aynı olup olmadığını doğrulayabilirsiniz. Katılımcı listesini herkese okuma izni verirsiniz (özel veri olmadığı için) ancak yalnızca oluşturucu listeyi güncelleyebilir.
    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'yı tıklayın.

Doğrulama kuralları ekleme

  1. Beklenen tüm alanların dokümanda bulunduğ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'yı tıklamayı unutmayın.

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

LCV durumunu okuma

Yanıtları kaydettiniz. Şimdi, kimlerin geldiğini görelim ve bunu kullanıcı arayüzüne yansıtalım.

  1. StackBlitz'te index.html dosyasına gidin.
  2. description-container öğesine number-attending kimlikli yeni bir öğe ekleyin.
    <!-- ... -->

 <section id="description-container">
     <!-- ... -->
     <p id="number-attending"></p>
 </section>

<!-- ... -->

Ardından dinleyiciyi attendees koleksiyonuna kaydedin ve EVET yanıtlarının sayısını hesaplayın:

  1. StackBlitz'te index.js dosyasına gidin.
  2. RSVP durumunu dinlemek ve EVET tıklamalarını saymak için main() işlevinin en altına 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 düğmeyi vurgulayalım.

  1. Mevcut kimlik doğrulama UID'sinin attendees koleksiyonunda bir girişi olup olmadığını kontrol eden bir işlev oluşturun ve 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, e-posta listesinden çıkma işlevi de oluşturalım. Bu, kullanıcı çıkış yaptığında kullanılır.
    // ...
function unsubscribeCurrentRSVP() {
  if (rsvpListener != null) {
    rsvpListener();
    rsvpListener = null;
  }
  rsvpYes.className = '';
  rsvpNo.className = '';
}
  3. İşlevleri Authentication dinleyicisinden ç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();
      // Subscribe 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 EVET düğmesi tıklamasıyla sayının arttığı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.

Ele aldığımız konular

  • Firebase Authentication
  • FirebaseUI
  • Cloud Firestore
  • Firebase Güvenlik Kuralları

Sonraki adımlar

  • Firebase geliştirici iş akışı hakkında daha fazla bilgi edinmek ister misiniz? Uygulamanızı tamamen yerel olarak test etme ve çalıştırma hakkında bilgi edinmek için Firebase emülatör kod laboratuvarına göz atın.
  • Diğer Firebase ürünleri hakkında daha fazla bilgi edinmek mi istiyorsunuz? Kullanıcıların yüklediği resim dosyalarını depolamak mı istiyorsunuz? Yoksa kullanıcılarınıza bildirim göndermek mi istiyorsunuz? Web için Firebase'in daha birçok ürünü hakkında ayrıntılı bilgi edinmek için Firebase web codelab'ine göz atın.
  • Cloud Firestore hakkında daha fazla bilgi edinmek mi istiyorsunuz? Alt koleksiyonlar ve işlemler hakkında bilgi edinmek mi istiyorsunuz? Cloud Firestore hakkında daha ayrıntılı bilgi edinmek için Cloud Firestore web codelab'ine göz atın. Dilerseniz Cloud Firestore'u tanımak için bu YouTube serisine göz atabilirsiniz.

Daha fazla bilgi

Nasıl geçti?

Geri bildirimlerinizi öğrenmekten memnuniyet duyarız. Lütfen buradaki (çok) kısa formu doldurun.