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.
  • 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).
  • Google Hesabı (ör. Gmail hesabı). GitHub hesabınız için halihazırda kullandığınız e-posta hesabını öneririz. Bu sayede StackBlitz'deki 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 al

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.

  1. Başlangıç kodu için şu URL'ye gidin: https://stackblitz.com/edit/firebase-gtk-web-start
  2. StackBlitz sayfasının en üstündeki Fork'u 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üzenle

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

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

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

Siz metni düzenlerken StackBlitz'de otomatik sayfa yeniden yükleme işleminde yeni etkinlik ayrıntıları görüntülenir. 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ı olabilir ancak etkinliklerin gösterilmesi hiç kimse için pek faydalı 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, ardından Firebase projenizi Firebase-Web-Codelab olarak adlandırın.

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

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

Firebase projeleri hakkında daha fazla bilgi için Firebase projelerini anlama başlıklı makaleyi inceleyin.

Firebase ürünlerini konsolda etkinleştirme ve ayarlama

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

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

Bu ürünlerden bazılarının özel olarak yapılandırılması veya Firebase konsolu üzerinden etkinleştirilmesi gerekir.

Firebase Authentication için e-postayla oturum açmayı etkinleştir

Kullanıcıların web uygulamasında oturum açmasına izin vermek için bu codelab'de E-posta/Şifre oturum açma yöntemini kullanın:

  1. Firebase konsolunun sol tarafındaki panelde Derleme'yi tıklayın > Kimlik Doğrulama. Ardından Başlayın'ı tıklayın. Şimdi, kaydolan 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 olarak değiştirin ve ardından Kaydet'i tıklayın.

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

Cloud Firestore'u kurma

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

Cloud Firestore'u ayarlamak için aşağıdaki adımları uygulayın:

  1. Firebase konsolunun sol tarafındaki panelde Derleme'yi tıklayın > Firestore Veritabanı. Ardından Create database'i (Veritabanı oluştur) tıklayın.
  2. Create database'i (Veritabanı oluştur) tıklayın.

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

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

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

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

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

  5. Bitti'yi tıklayın.

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

Artık Firebase projenizi oluşturduğunuza ve bazı hizmetleri etkinleştirdiğinize göre koda Firebase'i kullanmak istediğinizi ve hangi Firebase projesini kullanacağınızı 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 çok yolu vardır. Bu yöntemler Firebase belgelerinde açıklandığı gibidir. Örneğin, kitaplıkları Google CDN'den ekleyebilir veya npm kullanarak yerel olarak yükleyebilir, ardından Browserify kullanıyorsanız 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ı derlemek 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

  1. Firebase konsoluna dönün ve sol üstteki Projeye Genel Bakış'ı tıklayarak projenizin genel bakış sayfasına gidin.
  2. Projenizin genel bakış sayfasının ortasındaki web simgesini web uygulaması simgesitıklayarak yeni bir Firebase web uygulaması oluşturun.

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

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

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

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

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

  7. Konsola devam et'i tıklayın.Firebase yapılandırma nesnesini uygulamanıza ekleyin:
  8. StackBlitz'de 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.appspot.com",
  messagingSenderId: "random-unique-string",
  appId: "random-unique-string",
};

// Initialize Firebase
initializeApp(firebaseConfig);

6. Kullanıcı oturum açma (LCV) özelliği ekleyin

Artık Firebase'i uygulamaya eklediğinize göre, Firebase Authentication'ı kullanarak kişileri kaydeden bir LCV 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ı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, iki işlem yapan bir yapılandırma gerektirir (belgelerdeki seçeneklere bakın):

  • 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şlemini gerçekleştirir ve bir yönlendirmeyi önlemek için false (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

  1. StackBlitz'de index.js dosyasına gidin.
  2. En üstte, firebase/auth içe aktarma ifadesini bulun. Ardından getAuth ve EmailAuthProvider ekleyin. Örneğin:
    // ...
// Add the Firebase products and methods that you want to use
import { getAuth, EmailAuthProvider } from 'firebase/auth';

import {} from 'firebase/firestore';
  3. Kimlik doğrulama nesnesine initializeApp ardından hemen bir referans kaydedin. Örneğin:
    initializeApp(firebaseConfig);
auth = getAuth();
  4. FirebaseUI yapılandırmasının başlangıç kodunda zaten sağlandığına dikkat edin. E-posta kimlik doğrulama sağlayıcısı kullanılacak şekilde zaten ayarlanmış.
  5. index.js uygulamasındaki main() işlevinin alt kısmına FirebaseUI ilk kullanıma hazırlama 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 ekleyin

  1. StackBlitz'de index.html dosyasına gidin.
  2. 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 kimliğine sahip bir kapsayıcı bulunduğuna dikkat edin. Bu, giriş 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

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

  3. 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.

    Aşağıdaki kodu, index.js içindeki main() işlevinin altına 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 LCV düğmesini tıklayın.
    • Bu codelab için e-posta doğrulama adımı ayarlamadığınızdan bu codelab'de sahte bir e-posta adresi 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 ş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.
    ziyaret edin. Uygulama önizlemesi

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

  2. Firebase konsolunda Kimlik doğrulama kontrol paneline gidin. Kullanıcılar sekmesinde, uygulamada oturum açmak için girdiğiniz hesap bilgilerini göreceksiniz.

    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 işleyici geri çağırma yöntemini kullanırsınız. Şu anda oturum açmış bir kullanıcı varsa uygulamanız "LCV"yi değiştirir düğmesini "çıkış" olarak ayarlamak düğmesini tıklayın.

  1. StackBlitz'de index.js dosyasına gidin.
  2. En üstte, firebase/auth içe aktarma ifadesini bulun. Ardından signOut ve onAuthStateChanged ekleyin. Örneğin:
    // ...
// 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 alt kısmı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 işleyicide, geçerli bir kullanıcı olup olmadığını kontrol edin ve bu kullanıcıdan çıkış yapın. Bunu yapmak için geçerli startRsvpButton.addEventListener değerini aşağıdakiyle değiştirin:
    // ...
// Called when the user clicks the RSVP button
startRsvpButton.addEventListener('click', () => {
  if (auth.currentUser) {
    // User is signed in; allows user to sign out
    signOut(auth);
  } else {
    // No user is signed in; allows user to sign in
    ui.start('#firebaseui-auth-container', uiConfig);
  }
});

Şimdi, uygulamanızdaki düğme Çıkış'ı gösterecek ve bu düğme tıklandığında tekrar LCV moduna dönecektir.

Uygulama önizlemesi

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

7. Cloud Firestore'a mesaj yazma

Kullanıcıların geleceğini bilmek çok güzel ama biz misafirlere uygulamada yapabilecekleri başka bir şey verelim. İletilerini konuk defterine bırakabilselerdi ne olurdu? Katılmak için neden heyecan duyduklarını veya kimlerle tanışmak istediklerini paylaşabilirler.

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 dokümanı içeren 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. İlk olarak, kullanıcı arayüzü öğeleri (ileti alanı ve gönder düğmesi) için HTML'yi eklersiniz. Ardından, bu öğeleri veritabanına bağlayan kodu ekleyin.

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

  1. StackBlitz'de index.html dosyasına gidin.
  2. guestbook-container öğesini bulun, ardından ileti giriş alanı ve gönder düğmesiyle bir form oluşturmak için aşağıdaki HTML'yi ekleyin.
    <!-- ... -->

 <section id="guestbook-container">
   <h2>Discussion</h2>

   <form id="leave-message">
     <label>Leave a message: </label>
     <input type="text" id="message">
     <button type="submit">
       <i class="material-icons">send</i>
       <span>SEND</span>
     </button>
   </form>

 </section>

<!-- ... -->

Uygulama önizlemesi

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

GÖNDER düğmesini tıklayan kullanıcı, aşağıdaki kod snippet'ini tetikler. 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.

  1. StackBlitz'de index.js dosyasına gidin.
  2. En üstte, firebase/firestore içe aktarma ifadesini bulun. Ardından getFirestore, addDoc ve collection 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';
  3. Şimdi Firestore db nesnesine, initializeApp sonrasına referans kaydedeceğiz:
    initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
  4. 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

Herkesin davetlileri görmesini istemiyorsanız sohbet. 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, Firebase Güvenlik Kuralları ile veritabanınızı kendi uygulamalarınız için de güvenli hale getirmenizi öneririz. (Güvenlik kuralları hakkında daha fazla bilgiyi codelab'de bulabilirsiniz.)

  1. StackBlitz'de index.js dosyasına gidin.
  2. 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';
  }
});

İleti 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 alma işlemini de uygulamanız gerektiğinden mesajı henüz gerçek web uygulamanızda görmezsiniz. Sonrasında bunu yapacaksınız.

Ancak yeni eklenen mesajı Firebase konsolunda görebilirsiniz.

Firebase konsolundaki Firestore Database kontrol panelinde, yeni eklediğiniz mesajı içeren guestbook koleksiyonu gösterilir. İ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 işleyiciler eklemeniz, ardından yeni mesajları gösteren bir kullanıcı arayüzü öğesi oluşturmanız gerekir.

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

  1. StackBlitz'de index.html dosyasına gidin.
  2. 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>

<!-- ... -->

Daha sonra, verilerde yapılan değişiklikleri dinleyen işleyiciyi kaydedin:

  1. StackBlitz'de index.js dosyasına gidin.
  2. En üstte, firebase/firestore içe aktarma ifadesini bulun. Ardından query, orderBy ve onSnapshot değerlerini ekleyin. Örneğin:
    // ...
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot
} from 'firebase/firestore';
  3. Veritabanındaki tüm dokümanlarda (konuk defteri mesajları) döngü oluşturmak 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ındaki mesajları dinlemek için collection işlevini kullanarak belirli bir koleksiyon üzerinde sorgu oluşturdunuz. Yukarıdaki kod, sohbet mesajlarının depolandığı guestbook koleksiyonundaki değişiklikleri dinler. Ayrıca iletiler tarihe göre sıralanır. En yeni iletilerin en üstte görüntülenmesi için orderBy('timestamp', 'desc') kullanılır.

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. Bunun nedeni bir iletinin silinmesi, değiştirilmesi veya eklenmesi olabilir. Daha fazla bilgi için Cloud Firestore belgelerine bakın.

İletileri senkronize etmeyi test etme

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österilecektir. Yeni mesajlar yazmaktan çekinmeyin. anında görünürler.
  • Çalışma alanınızı birden fazla pencere veya sekmede açarsanız mesajlar, sekmeler arasında gerçek zamanlı olarak senkronize edilir.
  • (İsteğe bağlı) Doğrudan Firebase konsolunun Veritabanı bölümüne giderek yeni mesajları manuel olarak silmeyi, değiştirmeyi veya eklemeyi deneyebilirsiniz; tüm 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üman ve koleksiyonlara erişimi kontrol etmenize olanak tanır. Esnek kurallar söz dizimi, veritabanının tamamına yazma işlemlerinden belirli bir dokümandaki 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 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. 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.

  1. Mevcut match /{document=**} ifadesini kaldırarak kurallarınız şu şekilde görünür:
    rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  }
}
  2. 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.

  1. 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;
    }
  }
}
  2. 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

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

İşleyicileri sıfırlama

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

  1. StackBlitz'de index.js dosyasına gidin.
  2. onSnapshot konuk defteri koleksiyonu işleyicisini subscribeGuestbook adlı yeni bir işleve çekin. Ayrıca, onSnapshot işlevinin sonuçlarını guestbookListener değişkenine atayın.

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

  1. if (user) öğesinin altına subscribeGuestbook() ekleyin.
  2. unsubscribeGuestbook() ifadesini else ifadesinin alt kısmına 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ının LCV durumunu 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. O zaman organize olalım ve insanlara kaç kişinin geldiğini bildirelim.

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.

  1. StackBlitz'de index.html dosyasına gidin.
  2. guestbook-container içine EVET ve HAYIR düğmeleri ekleyin. Örneğin:
    <!-- ... -->
  <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 kullanıcının Kimlik Doğrulama UID'sini kullanın.

  1. StackBlitz'de index.js dosyasına gidin.
  2. En üstte, firebase/firestore içe aktarma ifadesini bulun. Ardından doc, setDoc 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';
  3. 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();
  4. Daha sonra, attendees adında yeni bir koleksiyon oluşturun ve LCV düğmelerinden biri tıklandığında bir doküman referansı kaydedin. Tıklanan düğmeye bağlı olarak bu referansı true veya false olarak ayarlayın.

    İlk olarak rsvpYes için:
    // ...
// Listen to RSVP responses
rsvpYes.onclick = async () => {
  // Get a reference to the user's document in the attendees collection
  const userRef = doc(db, 'attendees', auth.currentUser.uid);

  // If they RSVP'd yes, save a document with attendi()ng: true
  try {
    await setDoc(userRef, {
      attending: true
    });
  } catch (e) {
    console.error(e);
  }
};
    Ardından, false değerine sahip olmak kaydıyla rsvpNo için aynı işlem yapılır:
    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

Halihazırda ayarlanmış bazı kurallarınız olduğu için düğmelerle eklediğiniz yeni veriler reddedilecektir.

attendees koleksiyonuna eklemelere izin ver

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

  1. attendees koleksiyonunda, doküman adı olarak Kimlik Doğrulama UID'sini kullandığınızdan, bu kimliği alabilir ve gönderenin uid bilgisinin, yazılan dokümanla aynı olduğunu doğrulayabilirsiniz. Gizli veri olmadığından herkesin katılımcı listesini okumasına izin verirsiniz ancak listeyi yalnızca oluşturan kişi 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 olduğundan emin olmak için birkaç veri doğrulama kuralı 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

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

  1. StackBlitz'de index.html dosyasına gidin.
  2. 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:

  1. StackBlitz'de index.js dosyasına gidin.
  2. 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.

  1. 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';
      }
    }
  });
}
  2. Ayrıca, abonelikten çıkmayı sağlayan bir işlev de oluşturalım. Kullanıcı çıkış yaptığında bu bilgiler kullanılır.
    // ...
function unsubscribeCurrentRSVP() {
  if (rsvpListener != null) {
    rsvpListener();
    rsvpListener = null;
  }
  rsvpYes.className = '';
  rsvpNo.className = '';
}
  3. 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();
    }
  });
  4. 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
  • FirebaseKullanıcı Arayüzü
  • Cloud Firestore
  • Firebase Güvenlik Kuralları

Sonraki adımlar

  • Firebase Geliştirici İş Akışı hakkında daha fazla bilgi edinmek ister misiniz? Uygulamanızı nasıl yerel olarak test edip çalıştıracağınızı öğrenmek için Firebase emülatörü codelab'e 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 için Firebase web codelab'e göz atın.
  • Cloud Firestore hakkında daha fazla bilgi edinmek ister misiniz? Alt koleksiyonlar ve işlemler hakkında bilgi edinmek istiyor olabilirsiniz. Cloud Firestore'da daha ayrıntılı bilgi veren bir codelab için Cloud Firestore web codelab'ine gidin. Alternatif olarak, Cloud Firestore'u daha yakından tanımak için bu YouTube serisine göz atabilirsiniz.

Daha fazla bilgi

Nasıl geçti?

Geri bildirimlerinizi öğrenmek isteriz. Lütfen buradan (çok) kısa bir form doldurun.