Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

1. Genel Bakış

Bu codelab'de, etkileşimli web uygulamaları oluşturmak için Firebase ile ilgili bazı temel bilgileri öğreneceksiniz. Çeşitli Firebase ürünlerini kullanarak etkinlik LCV'si 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ıların kimliğini doğrulayın.
Verileri Cloud Firestore kullanarak senkronize edin.
Bir veritabanının güvenliğini sağlamak için Firebase Güvenlik Kuralları yazın.

Gerekenler

Tercih ettiğiniz bir tarayıcı (ör. Chrome).
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ına entegre edilmiş bir online düzenleyici olan StackBlitz'i kullanarak bir uygulama geliştireceksiniz. Stackblitz, yazılım yüklemesi veya özel StackBlitz hesabı gerektirmez.

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

Başlangıç kodu için şu URL'ye gidin: https://stackblitz.com/edit/firebase-gtk-web-start
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ıç kodunuzun bir kopyasına sahipsiniz. Bu kopya, benzersiz bir URL ve benzersiz bir ada sahip olan kendi StackBlitz projenizdir. 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ünü biraz daha yakından tanıyalım.

StackBlitz'de index.html dosyasını açın.
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, evet?

<!-- ... -->

<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ünür:

Uygulama önizlemesi

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

4. Firebase projesi oluşturma ve ayarlama

Etkinlik bilgilerini göstermek konuklarınız için çok faydalı olur, ancak etkinlikleri göstermek hiç kimse için pek faydalı olmaz. 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

Firebase'de oturum açın.
Firebase konsolunda Proje Ekle'yi (veya Proje oluştur'u) tıklayın, ardından Firebase projenizi Firebase-Web-Codelab olarak adlandırın.
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ıyla 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.
Veritabanınızın güvenliğini sağlamak için Firebase Güvenlik Kuralları'nı kullanın.

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

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:

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.
Oturum açma yöntemi sekmesini seçin (veya doğrudan sekmeye gitmek için burayı tıklayın).
Sağlayıcı seçeneklerinden E-posta/Şifre'yi tıklayın, anahtarı Etkinleştir seçeneğine getirin ve ardından Kaydet'i tıklayın.

Cloud Firestore'u kurma

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

Firebase projenizde Cloud Firestore'u ayarlamak için:

Firebase konsolunun sol panelinde Derleme'yi genişletin ve ardından Firestore veritabanı'nı seçin.
Create database'i (Veritabanı oluştur) tıklayın.
Veritabanı Kimliği'ni (default) olarak bırakın.
Veritabanı için bir konum seçin ve Sonraki'yi tıklayın.
Gerçek bir uygulama için kullanıcılarınıza yakın bir konum seçmeniz gerekir.
Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
Bu codelab'in 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.
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 paketleme sağlar. Böylece, içe aktarma ifadelerini kullanarak Firebase kitaplıklarını ekleyebilirsiniz. "Ağaç sallama" adı verilen bir işlem aracılığıyla web sayfasının genel boyutunu küçültmeye yardımcı olan kitaplıkların modüler (v9) sürümlerini kullanırsınız. 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 codelab'de, aşağıdaki içe aktarma ifadeleri index.js dosyasının üst kısmına zaten eklenmiştir. İlerledikçe her bir 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

Firebase Konsolu'nda, sol üstteki Projeye Genel Bakış'ı tıklayarak projenizin genel bakış sayfasına gidin.
Yeni bir Firebase web uygulaması oluşturmak için projenizin genel bakış sayfasının ortasındaki web simgesini tıklayın.
Uygulamayı Web Uygulaması takma adıyla kaydedin.
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.
Uygulamayı kaydet'i tıklayın.
Stackblitz, bağımlılıklarınızı sizin için yönettiğinden konsolda gösterilen npm install firebase adımını atlayabilirsiniz.
Firebase yapılandırma nesnesini panonuza kopyalayın.
Konsola devam et'i tıklayın.Firebase yapılandırma nesnesini uygulamanıza ekleyin:
StackBlitz'te index.js dosyasına gidin.
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.

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) ekleme

Artık Firebase'i uygulamaya eklediğinize göre, Firebase Authentication'ı kullanarak kişileri kaydeden bir LCV düğmesi oluşturabilirsiniz.

Kullanıcının e-posta adresiyle oturum açmasını isteyen bir LCV düğmesine ihtiyacınız olacaktır. Bunun için FirebaseUI'yi bir LCV düğmesine bağlayın.FirebaseUI, Firebase Auth'a ek olarak önceden oluşturulmuş bir kullanıcı arayüzü sunan bir kitaplıktır.

FirebaseUI için iki işlevi yerine getiren bir yapılandırma (dokümanlar bölümündeki seçeneklere bakın) gerekir:

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şlatmak için kodu ekleyin

StackBlitz'te index.js dosyasına gidin.

En üstte firebase/auth içe aktarma ifadesini bulun, ardından getAuth ve 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';

initializeApp'ten hemen sonra auth nesnesine referans kaydedin.
```
initializeApp(firebaseConfig);
auth = getAuth();
```
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ış.

index.js içindeki main() işlevinin en altına FirebaseUI ilk 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 LCV düğmesi ekleme

StackBlitz'de index.html dosyasına gidin.
Aşağıdaki örnekte gösterildiği gibi event-details-container içindeki LCV düğmesinin HTML kodunu ekleyin.

Bu codelab için index.js dosyasında söz konusu kimlikler için zaten kancalar bulunduğundan, aşağıda gösterilenlerle aynı id değerlerini kullanmaya dikkat edin.

index.html dosyasında firebaseui-auth-container kimlikli bir kapsayıcı olduğunu unutmayın. Bu, girişinizi tutmak için FirebaseUI'ye ileteceğiniz kimliktir.
```


<section id="event-details-container">
    
    
    <button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>

```
Uygulama önizlemesi
LCV düğmesinde bir işleyici oluşturun ve FirebaseUI başlatma işlevini çağırın. Bu işlem, 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

StackBlitz'in önizleme penceresinde, uygulamada oturum açmak için LCV 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 adresi kullanabilirsiniz.
- auth/operation-not-allowed veya The given sign-in provider is disabled for this Firebase project şeklinde 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
Firebase konsolundaki Kimlik Doğrulama kontrol paneline gidin. Kullanıcılar sekmesinde, uygulamada oturum açmak için girdiğiniz hesap bilgilerini göreceksiniz.

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.

StackBlitz'te index.js dosyasına gidin.

En üstte firebase/auth içe aktarma ifadesini bulun, ardından signOut ve 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';

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();

Düğme işleyicide, geçerli bir kullanıcı olup olmadığını kontrol edin ve bu kullanıcıdan çıkış yapı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ı saklamak için Cloud Firestore'u kullanırsınız.

Veri modeli

Cloud Firestore, bir NoSQL veritabanıdır ve veritabanında depolanan veriler koleksiyonlar, belgeler, alanlar ve alt koleksiyonlara bölünür. Sohbetteki her mesajı guestbook adlı üst düzey koleksiyonda bir doküman olarak saklarsı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 ileti yazma işlevini kullanacaksınız. Ö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.

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

StackBlitz'te index.html dosyasına gidin.

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. Mesaj giriş alanının içeriğini, veritabanının guestbook koleksiyonuna ekler. Özellikle, addDoc yöntemi, ileti içeriğini yeni dokümana (otomatik olarak oluşturulan kimlikle) guestbook koleksiyonuna ekler.

StackBlitz'de index.js dosyasına gidin.

En üstte, firebase/firestore içe aktarma ifadesini bulun. Ardından getFirestore, addDoc ve collection değerlerini ekleyin. Örneğin:

// ...

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

Şimdi Firestore db nesnesine, initializeApp sonrasına referans kaydedeceğiz:
```
initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
```

main() işlevinin altına aşağıdaki kodu ekleyin.

auth.currentUser.uid değerinin, Firebase Authentication'ın giriş yapmış 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();

Konuk defterini yalnızca oturum açmış kullanıcılara gösterme

Davetlilerin sohbetini yalnızca herkesin görmesini istemezsiniz. Sohbetin güvenliğini sağlamak için, konuk defterini yalnızca oturum açmış kullanıcıların görüntülemesine izin verebilirsiniz. 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.)

StackBlitz'de index.js dosyasına gidin.

Konuk defterini gizlemek ve göstermek için onAuthStateChanged işleyicisini 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 etme

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

Bu işlem, mesajı Cloud Firestore veritabanınıza yazar. Ancak verileri alma işlemini de uygulamanız gerektiğinden 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. İleti 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

İletileri senkronize etme

Misafirlerin veritabanına mesaj yazabilmeleri çok güzel ancak bu mesajları henüz uygulamada 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:

StackBlitz'de index.html dosyasına gidin.

guestbook-container içinde, guestbook kimliğine sahip 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:

StackBlitz'te index.js dosyasına gidin.

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

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 geri çağırma işlevi. Sorguyla eşleşen dokümanlarda herhangi bir değişiklik olduğunda geri çağırma işlevi 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.

Veritabanında daha önce oluşturduğunuz mesajlar uygulamada görüntülenmelidir. Yeni mesajlar yazabilirsiniz. Bu mesajlar anında görünür.
Ç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 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 ayarlamanız gerekir. Bu ayar, veritabanınızın okuma ve yazma işlemleri için 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şturmanız gerekir. Güvenlik, uygulamanızın yapısı ve davranışının 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:

Firebase konsolunun 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).
Bugünden birkaç hafta sonra aşağıdaki varsayılan güvenlik kurallarını göreceksiniz. Herkese açık erişim süresi sınırlıdır.

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

Koleksiyonları tanımlama

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

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

match /databases/{database}/documents ürününde, 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 konuk defteri dokümanında alan olarak Kimlik Doğrulama UID'sini kullandığınızdan, Kimlik Doğrulama UID'sini alabilir ve dokümana yazmaya çalışan herkesin eşleşen bir Kimlik Doğrulama UID'si olduğunu doğrulayabilirsiniz.

Okuma ve yazma kurallarını aşağıda gösterildiği gibi, kural grubunuza 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;
    }
  }
}

Yeni kurallarınızı dağıtmak için Yayınla'yı tıklayın.Artık konuk defteri için yalnızca oturum açmış kullanıcılar iletileri (tüm iletileri) okuyabilir ancak yalnızca kullanıcı kimliğinizi kullanarak ileti oluşturabilirsiniz. Ayrıca, mesajların düzenlenmesine veya silinmesine de izin verilmez.

Doğrulama kuralları ekleme

Beklenen tüm alanların dokümanda 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;
    }
  }
}

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.

StackBlitz'de index.js dosyasına gidin.

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

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, yeni işlevleri onAuthStateChanged geri çağırmasına ekleyin.

if (user)'un alt kısmına subscribeGuestbook() ekleyin.

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 kişilerin sohbet etmeye başlamasına olanak tanıyor. Ayrıca, bir kullanıcının gelip gelmediğini anlamanın tek yolu, onu sohbette yayınlamasıdır. Organizasyona başlayalım ve kaç kişinin katılacağını herkese bildirin.

Etkinliğe katılmak isteyen kişileri kaydetmek için bir açma/kapatma düğmesi ekleyebilir ve ardından gelen kullanıcıların sayısını toplayabilirsiniz.

StackBlitz'de index.html dosyasına gidin.

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ü

Daha sonra, işleyiciyi 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.

StackBlitz'de index.js dosyasına gidin.

En üstte, firebase/firestore içe aktarma ifadesini bulun. Ardından doc, setDoc ve where ekleyin. Örneğin:

// ...
// Add the Firebase products and methods that you want to use
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot,
  doc,
  setDoc,
  where
} from 'firebase/firestore';

LCV durumunu dinlemek için main() işlevinin alt kısmına aşağıdaki kodu ekleyin:

async function main() {
  // ...

  // Listen to RSVP responses
  rsvpYes.onclick = async () => {
  };
  rsvpNo.onclick = async () => {
  };
}
main();

Daha sonra, attendees adında yeni bir koleksiyon oluşturun ve LCV 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, false değeri için rsvpNo için aynı durum geçerlidir:

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üncelleme

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

`attendees` koleksiyonuna eklemelere izin ver

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

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 (gizli 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;
    }
  }
}
```
Yeni kurallarınızı dağıtmak için Yayınla'yı tıklayın.

Doğrulama kuralları ekleme

Beklenen tüm alanların dokümanda 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;

    }
  }
}

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.

StackBlitz'de index.html dosyasına gidin.

description-container içinde, number-attending kimliğine sahip yeni bir öğe ekleyin.

<!-- ... -->

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

<!-- ... -->

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

StackBlitz'te index.js dosyasına gidin.

LCV durumunu dinlemek ve EVET tıklamalarını saymak için main() işlevinin 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.

Geçerli Kimlik Doğrulama UID'sinin attendees koleksiyonunda giriş 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';
      }
    }
  });
}

Ayrıca, abonelikten çıkmayı sağlayan bir işlev 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 = '';
}

Kimlik doğrulama işleyicisinden 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();
      // 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();
    }
  });

Birden fazla kullanıcı olarak giriş yapmayı deneyin ve her EVET düğmesi tıklandığında 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.

İşlediklerimiz

Firebase Authentication
FirebaseUI
Cloud 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 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 ister misiniz? Kullanıcıların yüklediği resim dosyalarını depolamak istiyor olabilirsiniz. Yoksa kullanıcılarınıza bildirim göndermek mi istiyorsunuz? Web için Firebase ile ilgili çok daha fazla ürünün ayrıntılarına inen bir codelab'e erişmek için Firebase web codelab'e 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. Alternatif olarak, Cloud Firestore'u daha yakından tanımak için bu YouTube serisine göz atabilirsiniz.

Daha fazla bilgi

Firebase sitesi: firebase.google.com
Firebase YouTube kanalı

Nasıl geçti?

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

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

1. Genel Bakış

Neler öğreneceksiniz?

Gerekenler

2. Başlangıç kodunu alma

3. Etkinlik bilgilerini düzenleme

Uygulama önizlemesi

4. Firebase projesi oluşturma ve ayarlama

Firebase projesi oluşturma

Konsolda Firebase ürünlerini etkinleştirme ve ayarlama

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

Cloud Firestore'u kurma

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

Firebase kitaplıklarını ekleme

Firebase projenize Firebase web uygulaması ekleme

6. Kullanıcı oturum açma (LCV) ekleme

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

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

HTML'ye LCV düğmesi ekleme

Uygulamada oturum açmayı test etme

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

Uygulama önizlemesi

7. Cloud Firestore'a mesaj yazma

Veri modeli

Firestore'a mesaj ekleme

Uygulama önizlemesi

Konuk defterini yalnızca oturum açmış kullanıcılara gösterme

Mesaj göndermeyi test etme

Firebase konsolu

8. Mesajları okuma

İletileri senkronize etme

Mesaj senkronizasyonunu test etme

Uygulama önizlemesi

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

Koleksiyonları tanımlama

Güvenlik kuralları ekleme

Doğrulama kuralları ekleme

Dinleyicileri sıfırlama

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

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

Uygulama önizlemesi

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

attendees koleksiyonuna eklemelere izin ver

Doğrulama kuralları ekleme

LCV durumunu okuma

Uygulama önizlemesi

11. Tebrikler!

İşlediklerimiz

Sonraki adımlar

Daha fazla bilgi

Nasıl geçti?

`attendees` koleksiyonuna eklemelere izin ver