Cloud Firestore Web Codelab'i

1. Genel Bakış

Gol sayısı

Bu codelab'de, Cloud Firestore tarafından desteklenen bir restoran önerisi web uygulaması oluşturacaksınız.

Neler öğreneceksiniz?

• Web uygulamasından Cloud Firestore'a veri okuma ve yazma
• Cloud Firestore verilerindeki değişiklikleri gerçek zamanlı olarak dinleme
• Cloud Firestore verilerinin güvenliğini sağlamak için Firebase Authentication ve güvenlik kurallarını kullanma
• Karmaşık Cloud Firestore sorguları yazma

Gerekenler

Bu codelab'i başlatmadan önce şunları yüklediğinizden emin olun:

• Genellikle Node.js ile birlikte gelen npm (Node 16 ve sonraki sürümler önerilir)
• WebStorm, VS Code veya Sublime gibi tercih ettiğiniz IDE/metin düzenleyici

Not: Node.js, uygulamamızı geliştirme sırasında çalıştırmak ve test etmek için gerekli olsa da nihai uygulama Node.js'ye bağlı olmayacaktır.

2. Firebase projesi oluşturup ayarlama

Firebase projesi oluşturma

1. Firebase konsolunda Proje ekle'yi tıklayın ve Firebase projesini FriendlyEats olarak adlandırın.

Firebase projenizin proje kimliğini unutmayın.

2. Proje oluştur'u tıklayın.

Önemli: Firebase projeniz MutluYemek olarak adlandırılır ancak Firebase, projeye otomatik olarak mutluyemek-1234 şeklinde benzersiz bir proje kimliği atar. Bu benzersiz tanımlayıcı, projenizin gerçekte nasıl tanımlandığını (CLI dahil) gösterir. ArkadaşçaYemekler ise yalnızca bir görünen addır.

Oluşturacağımız uygulamada web'de kullanılabilen birkaç Firebase hizmeti kullanılmaktadır:

• Kullanıcılarınızı kolayca tanımlamak için Firebase Authentication
• Yapılandırılmış verileri Cloud'a kaydetmek ve veriler güncellendiğinde anında bildirim almak için Cloud Firestore
• Statik öğelerinizi barındırmak ve yayınlamak için Firebase Hosting

Bu codelab için Firebase Hosting'i zaten yapılandırdık. Ancak Firebase Auth ve Cloud Firestore için Firebase konsolunu kullanarak hizmetlerin yapılandırılmasında ve etkinleştirilmesinde size yol göstereceğiz.

Anonymous Auth'u etkinleştirme

Bu codelab'in odak noktası kimlik doğrulama olmasa da uygulamamızda bir tür kimlik doğrulamanın olması önemlidir. Anonymous login (anonim giriş) özelliğini kullanacağız. Bu özellik, kullanıcıdan istem alınmadan sessizce oturum açılmasını sağlar.

Anonim giriş'i etkinleştirmeniz gerekir.

1. Firebase konsolunda, sol gezinme menüsündeki Derleme bölümünü bulun.
2. Kimlik doğrulama'yı, ardından Giriş yöntemi sekmesini tıklayın (veya doğrudan bu sekmeye gitmek için burayı tıklayın).
3. Anonim oturum açma sağlayıcısını etkinleştirin ve Kaydet'i tıklayın.

Bu, uygulamanın web uygulamasına erişen kullanıcılarınız için sessizce oturum açmasına olanak tanır. Daha fazla bilgi edinmek için Anonymous Authentication documentation (Anonymous Authentication dokümanları) başlıklı makaleyi inceleyebilirsiniz.

Cloud Firestore'u etkinleştirin

Uygulama, restoran bilgilerini ve puanlarını kaydetmek ve almak için Cloud Firestore'u kullanır.

Cloud Firestore'u etkinleştirmeniz gerekir. Firebase konsolunun Derleme bölümünde Firestore Veritabanı'nı tıklayın. Cloud Firestore bölmesinde Veritabanı oluştur'u tıklayın.

Cloud Firestore'daki verilere erişim, Güvenlik Kuralları tarafından kontrol edilir. Bu codelab'in ilerleyen bölümlerinde kurallar hakkında daha fazla konuşacağız ancak başlamak için önce verilerimizde bazı temel kurallar belirlememiz gerekiyor. Firebase konsolunun Kurallar sekmesinde aşağıdaki kuralları ekleyin ve ardından Yayınla'yı tıklayın.

rules_version = '2';
service cloud.firestore {

  // Determine if the value of the field "key" is the same
  // before and after the request.
  function unchanged(key) {
    return (key in resource.data)
      && (key in request.resource.data)
      && (resource.data[key] == request.resource.data[key]);
  }

  match /databases/{database}/documents {
    // Restaurants:
    //   - Authenticated user can read
    //   - Authenticated user can create/update (for demo purposes only)
    //   - Updates are allowed if no fields are added and name is unchanged
    //   - Deletes are not allowed (default)
    match /restaurants/{restaurantId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null;
      allow update: if request.auth != null
                    && (request.resource.data.keys() == resource.data.keys())
                    && unchanged("name");

      // Ratings:
      //   - Authenticated user can read
      //   - Authenticated user can create if userId matches
      //   - Deletes and updates are not allowed (default)
      match /ratings/{ratingId} {
        allow read: if request.auth != null;
        allow create: if request.auth != null
                      && request.resource.data.userId == request.auth.uid;
      }
    }
  }
}

Bu kuralları ve nasıl çalıştıklarını kod laboratuvarının ilerleyen bölümlerinde ele alacağız.

3. Örnek kodu alın

GitHub deposunu komut satırından kopyalayın:

git clone https://github.com/firebase/friendlyeats-web

Örnek kod, 📁friendlyeats-web dizinine kopyalanmış olmalıdır. Artık tüm komutlarınızı şu dizinden çalıştırın:

cd friendlyeats-web/vanilla-js

Başlatıcı uygulamayı içe aktarma

IDE'nizi (WebStorm, Atom, Sublime, Visual Studio Code...) kullanarak 📁friendlyeats-web dizinini açın veya içe aktarın. Bu dizin, henüz işlevsel olmayan bir restoran önerisi uygulamasından oluşan codelab'in başlangıç kodunu içerir. Bu codelab boyunca işlevsel hale getireceğiz. Bu nedenle, yakında bu dizindeki kodu düzenlemeniz gerekecek.

4. Firebase Komut Satırı Arayüzü'nü yükleme

Firebase Komut Satırı Arayüzü (CLI), web uygulamanızı yerel olarak yayınlamanıza ve Firebase Hosting'e dağıtmanıza olanak tanır.

Not: CLI'yi yüklemek için genellikle NodeJS ile birlikte gelen npm'yi yüklemeniz gerekir.

1. Aşağıdaki npm komutunu çalıştırarak CLI'yi yükleyin:

npm -g install firebase-tools

Sorun mu yaşıyorsunuz? AİOY izinlerini değiştirmeniz gerekebilir.

2. Aşağıdaki komutu çalıştırarak CLI'nin doğru şekilde yüklendiğini doğrulayın:

firebase --version

Firebase CLI sürümünün 7.4.0 veya sonraki bir sürüm olduğundan emin olun.

3. Aşağıdaki komutu çalıştırarak Firebase CLI'yi yetkilendirin:

firebase login

Web uygulaması şablonunu, uygulamanızın Firebase Hosting yapılandırmasını uygulamanızın yerel dizininden ve dosyalarından alacak şekilde ayarladık. Ancak bunu yapabilmemiz için uygulamanızı Firebase projenizle ilişkilendirmemiz gerekir.

4. Komut satırınızın uygulamanızın yerel dizine eriştiğinden emin olun.
5. Aşağıdaki komutu çalıştırarak uygulamanızı Firebase projenizle ilişkilendirin:

firebase use --add

6. İstendiğinde proje kimliğinizi seçin, ardından Firebase projenize bir takma ad verin.

Birden fazla ortamınız (üretim, hazırlık vb.) varsa takma ad kullanışlıdır. Ancak bu codelab için yalnızca default takma adını kullanalım.

7. Komut satırınızdaki diğer talimatları uygulayın.

5. Yerel sunucuyu çalıştırma

Uygulamamız üzerinde çalışmaya başlamaya hazırız. Uygulamamızı yerel olarak çalıştıralım.

1. Aşağıdaki Firebase CLI komutunu çalıştırın:

firebase emulators:start --only hosting

2. Komut satırınızda aşağıdaki yanıt gösterilir:

hosting: Local server: http://localhost:5000

Uygulamamızı yerel olarak sunmak için Firebase Hosting emülatörünü kullanıyoruz. Web uygulaması artık http://localhost:5000 adresinden kullanılabilir.

3. Uygulamanızı http://localhost:5000 adresinde açın.

Firebase projenize bağlı FriendlyEats kopyanızı görürsünüz.

Uygulama, Firebase projenize otomatik olarak bağlandı ve sizi anonim kullanıcı olarak sessizce oturum açtı.

6. Cloud Firestore'a veri yazma

Bu bölümde, uygulamanın kullanıcı arayüzünü doldurabilmek için Cloud Firestore'a bazı veriler yazacağız. Bu işlem Firebase konsolu üzerinden manuel olarak yapılabilir ancak temel bir Cloud Firestore yazma işlemini göstermek için bunu uygulamanın içinde yapacağız.

Veri Modeli

Firestore verileri koleksiyonlar, belgeler, alanlar ve alt koleksiyonlara ayrılır. Her restoranı restaurants adlı üst düzey bir koleksiyonda doküman olarak depolarız.

Daha sonra her yorumu, her restoranın altındaki ratings adlı bir alt koleksiyonda depolarız.

İpucu: Firestore veri modeli hakkında daha fazla bilgi edinmek için dokümanlar bölümündeki dokümanlar ve koleksiyonlar hakkındaki bilgileri okuyun.

Firestore'a restoran ekleme

Uygulamamızdaki ana model nesnesi bir restorandır. restaurants koleksiyonuna restoran dokümanı ekleyen bir kod yazalım.

1. İndirdiğiniz dosyalardan scripts/FriendlyEats.Data.js dosyasını açın.
2. FriendlyEats.prototype.addRestaurant işlevini bulun.
3. İşlevin tamamını aşağıdaki kodla değiştirin.

FriendlyEats.Data.js

FriendlyEats.prototype.addRestaurant = function(data) {
  var collection = firebase.firestore().collection('restaurants');
  return collection.add(data);
};

Yukarıdaki kod, restaurants koleksiyonuna yeni bir belge ekler. Doküman verileri, düz bir JavaScript nesnesinden gelir. Bunu yapmak için önce bir Cloud Firestore koleksiyonuna referans alırız restaurants, ardından verileri add ederiz.

Restoran eklemeye başlayalım.

1. Tarayıcınızda FriendlyEats uygulamanıza dönüp uygulamayı yenileyin.
2. Örnek Veri Ekle'yi tıklayın.

Uygulama, otomatik olarak rastgele bir restoran nesnesi grubu oluşturur ve ardından addRestaurant işlevinizi çağırır. Ancak verileri getirme (codelab'in sonraki bölümü) işlemini uygulamamız gerektiğinden verileri gerçek web uygulamanızda henüz görmezsiniz.

Ancak Firebase konsolunda Cloud Firestore sekmesine giderseniz restaurants koleksiyonunda yeni dokümanlar göreceksiniz.

Tebrikler, bir web uygulamasından Cloud Firestore'a veri yazdınız.

Sonraki bölümde, Cloud Firestore'dan nasıl veri alacağınızı ve bunları uygulamanızda nasıl görüntüleyeceğinizi öğreneceksiniz.

7. Cloud Firestore'daki verileri görüntüleme

Bu bölümde, Cloud Firestore'dan nasıl veri alacağınızı ve bunları uygulamanızda nasıl görüntüleyeceğinizi öğreneceksiniz. İki önemli adım, sorgu oluşturmak ve anlık görüntü dinleyici eklemektir. Bu dinleyici, sorguyla eşleşen mevcut tüm veriler hakkında bilgilendirilir ve gerçek zamanlı olarak güncelleme alır.

Öncelikle, filtrelenmemiş varsayılan restoran listesini sunacak sorguyu oluşturalım.

1. scripts/FriendlyEats.Data.js dosyasına geri dönün.
2. FriendlyEats.prototype.getAllRestaurants işlevini bulun.
3. İşlevin tamamını aşağıdaki kodla değiştirin.

FriendlyEats.Data.js

FriendlyEats.prototype.getAllRestaurants = function(renderer) {
  var query = firebase.firestore()
      .collection('restaurants')
      .orderBy('avgRating', 'desc')
      .limit(50);

  this.getDocumentsInQuery(query, renderer);
};

Yukarıdaki kodda, restaurants adlı üst düzey koleksiyondan ortalama derecelendirmeye göre (şu anda tümü sıfır) sıralanmış en fazla 50 restoranı alacak bir sorgu oluşturuyoruz. Bu sorguyu beyan ettikten sonra, verileri yüklemekten ve oluşturmaktan sorumlu getDocumentsInQuery() yöntemine iletiriz.

Bunu, anlık görüntü dinleyicisi ekleyerek yapacağız.

1. scripts/FriendlyEats.Data.js dosyasına geri dönün.
2. FriendlyEats.prototype.getDocumentsInQuery işlevini bulun.
3. İşlevin tamamını aşağıdaki kodla değiştirin.

FriendlyEats.Data.js

FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
  query.onSnapshot(function(snapshot) {
    if (!snapshot.size) return renderer.empty(); // Display "There are no restaurants".

    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        renderer.remove(change.doc);
      } else {
        renderer.display(change.doc);
      }
    });
  });
};

Yukarıdaki kodda query.onSnapshot, sorgu sonucunda her değişiklik olduğunda geri çağırma işlevini tetikler.

• İlk kez geri çağırma işlevi, sorgunun sonuç kümesinin tamamıyla (yani Cloud Firestore'daki restaurants koleksiyonunun tamamıyla) tetiklenir. Ardından, tüm belgeleri renderer.display işlevine iletir.
• Bir doküman silindiğinde change.type, removed değerine eşittir. Bu durumda, restoranı kullanıcı arayüzünden kaldıran bir işlev çağıracağız.

Her iki yöntemi de uyguladığımıza göre uygulamayı yenileyin ve daha önce Firebase konsolunda gördüğümüz restoranların artık uygulamada görünür olup olmadığını doğrulayın. Bu bölümü başarıyla tamamladıysanız uygulamanız artık Cloud Firestore ile veri okuyor ve yazıyor demektir.

Restoran listeniz değiştikçe bu dinleyici otomatik olarak güncellenmeye devam eder. Firebase konsoluna gidip bir restoranı manuel olarak silmeyi veya adını değiştirmeyi deneyin. Değişikliklerin sitenizde hemen göründüğünü göreceksiniz.

Not: Query.get() yöntemini kullanarak gerçek zamanlı güncellemeleri dinlemek yerine, Cloud Firestore'dan dokümanları bir kez almak da mümkündür.

8. Get() verileri

Şimdiye kadar, güncellemeleri gerçek zamanlı olarak almak için onSnapshot işlevinin nasıl kullanılacağını gösterdik. Ancak her zaman bunu yapmak istemeyiz. Bazen verileri yalnızca bir kez getirmek daha mantıklı olabilir.

Kullanıcı uygulamanızda belirli bir restoranı tıkladığında tetiklenecek bir yöntem uygulamak isteriz.

1. scripts/FriendlyEats.Data.js dosyanıza geri dönün.
2. FriendlyEats.prototype.getRestaurant işlevini bulun.
3. İşlevin tamamını aşağıdaki kodla değiştirin.

FriendlyEats.Data.js

FriendlyEats.prototype.getRestaurant = function(id) {
  return firebase.firestore().collection('restaurants').doc(id).get();
};

Bu yöntemi uyguladıktan sonra her restoranın sayfasını görüntüleyebilirsiniz. Listede bir restoranı tıkladığınızda restoranın ayrıntılar sayfasını görürsünüz:

Codelab'de derecelendirme ekleme özelliğini daha sonra uygulamamız gerektiğinden şu anda derecelendirme ekleyemezsiniz.

9. Verileri sıralama ve filtreleme

Şu anda uygulamamızda restoranların listesi gösteriliyor ancak kullanıcının ihtiyaçlarına göre filtreleme yapması mümkün değil. Bu bölümde, filtrelemeyi etkinleştirmek için Cloud Firestore'un gelişmiş sorgularını kullanacaksınız.

Tüm Dim Sum restoranları getirmek için basit bir sorgu örneğini aşağıda bulabilirsiniz:

var filteredQuery = query.where('category', '==', 'Dim Sum')

Adından da anlaşılacağı gibi where() yöntemi, sorgumuzun yalnızca alanları belirlediğimiz kısıtlamaları karşılayan koleksiyon üyelerini indirmesini sağlar. Bu durumda, yalnızca category değerinin Dim Sum olduğu restoranlar indirilir.

Uygulamamızda kullanıcı, "San Francisco'da pizza" veya "Los Angeles'ta popülerlik sırasına göre deniz ürünleri" gibi belirli sorgular oluşturmak için birden fazla filtreyi birbirine bağlayabilir.

Restoranlarımızı kullanıcılarımız tarafından seçilen birden fazla ölçüte göre filtreleyecek bir sorgu oluşturan bir yöntem oluşturacağız.

1. scripts/FriendlyEats.Data.js dosyanıza geri dönün.
2. FriendlyEats.prototype.getFilteredRestaurants işlevini bulun.
3. İşlevin tamamını aşağıdaki kodla değiştirin.

FriendlyEats.Data.js

FriendlyEats.prototype.getFilteredRestaurants = function(filters, renderer) {
  var query = firebase.firestore().collection('restaurants');

  if (filters.category !== 'Any') {
    query = query.where('category', '==', filters.category);
  }

  if (filters.city !== 'Any') {
    query = query.where('city', '==', filters.city);
  }

  if (filters.price !== 'Any') {
    query = query.where('price', '==', filters.price.length);
  }

  if (filters.sort === 'Rating') {
    query = query.orderBy('avgRating', 'desc');
  } else if (filters.sort === 'Reviews') {
    query = query.orderBy('numRatings', 'desc');
  }

  this.getDocumentsInQuery(query, renderer);
};

Yukarıdaki kod, kullanıcı girişine dayalı bir karma sorgu oluşturmak için birden fazla where filtresi ve tek bir orderBy yan tümcesi ekler. Sorgumuz artık yalnızca kullanıcının şartlarına uyan restoranları döndürecek.

Tarayıcınızda FriendlyEats uygulamanızı yenileyin, ardından fiyata, şehre ve kategoriye göre filtreleme yapabildiğinizi doğrulayın. Test sırasında tarayıcınızın JavaScript Konsolu'nda aşağıdaki gibi görünen hatalar görürsünüz:

The query requires an index. You can create it here: https://console.firebase.google.com/project/project-id/database/firestore/indexes?create_composite=...

Bu hatalar, Cloud Firestore'un çoğu bileşik sorgu için dizin gerektirmesinden kaynaklanır. Sorgular için dizine ekleme zorunluluğu, Cloud Firestore'un büyük ölçekte hızlı kalmasını sağlar.

Hata mesajındaki bağlantıyı açtığınızda Firebase konsolunda doğru parametrelerin doldurulduğu dizin oluşturma kullanıcı arayüzü otomatik olarak açılır. Sonraki bölümde, bu uygulama için gereken dizinleri yazıp dağıtacağız.

10. Dizinleri dağıtma

Uygulamamızdaki her yolu keşfetmek ve dizin oluşturma bağlantılarının her birini takip etmek istemiyorsanız Firebase CLI'yi kullanarak birden fazla dizini aynı anda kolayca dağıtabilirsiniz.

1. Uygulamanızın indirilen yerel dizininde bir firestore.indexes.json dosyası görürsünüz.

Bu dosya, tüm olası filtre kombinasyonları için gereken tüm dizinleri açıklar.

firestore.indexes.json

{
 "indexes": [
   {
     "collectionGroup": "restaurants",
     "queryScope": "COLLECTION",
     "fields": [
       { "fieldPath": "city", "order": "ASCENDING" },
       { "fieldPath": "avgRating", "order": "DESCENDING" }
     ]
   },

   ...

 ]
}

2. Aşağıdaki komutu kullanarak bu dizinleri dağıtın:

firebase deploy --only firestore:indexes

Birkaç dakika sonra dizinleriniz yayınlanır ve hata mesajları kaldırılır.

İpucu: Cloud Firestore'daki dizinler hakkında daha fazla bilgi edinmek için belgeleri ziyaret edin.

11. İşlemde veri yazma

Bu bölümde, kullanıcıların restoranlara yorum gönderme özelliğini ekleyeceğiz. Şimdiye kadar tüm yazma işlemlerimiz atomik ve nispeten basitti. Bunlardan herhangi birinde hata oluşursa muhtemelen kullanıcıdan bunları yeniden denemesi istenir veya uygulamamız yazma işlemini otomatik olarak yeniden dener.

Uygulamamızda, restoranlara derecelendirme eklemek isteyen çok sayıda kullanıcı olacağından birden fazla okuma ve yazma işlemini koordine etmemiz gerekir. Öncelikle yorumun gönderilmesi, ardından restoranın count ve average rating puanlarının güncellenmesi gerekir. Bunlardan biri başarısız olurken diğeri başarılı olursa veritabanımızın bir kısmındaki verilerin diğer kısmındaki verilerle eşleşmediği tutarsız bir durumda kalırız.

Neyse ki Cloud Firestore, tek bir atomik işlemde birden fazla okuma ve yazma yapmamıza olanak tanıyan işlem işlevi sunarak verilerin tutarlı kalmasını sağlar.

1. scripts/FriendlyEats.Data.js dosyanıza geri dönün.
2. FriendlyEats.prototype.addRating işlevini bulun.
3. İşlevin tamamını aşağıdaki kodla değiştirin.

FriendlyEats.Data.js

FriendlyEats.prototype.addRating = function(restaurantID, rating) {
  var collection = firebase.firestore().collection('restaurants');
  var document = collection.doc(restaurantID);
  var newRatingDocument = document.collection('ratings').doc();

  return firebase.firestore().runTransaction(function(transaction) {
    return transaction.get(document).then(function(doc) {
      var data = doc.data();

      var newAverage =
          (data.numRatings * data.avgRating + rating.rating) /
          (data.numRatings + 1);

      transaction.update(document, {
        numRatings: data.numRatings + 1,
        avgRating: newAverage
      });
      return transaction.set(newRatingDocument, rating);
    });
  });
};

Yukarıdaki blokta, restoran dokümanında avgRating ve numRatings değerlerini güncellemek için bir işlem tetikliyoruz. Aynı zamanda yeni rating öğesini ratings alt koleksiyonuna ekleriz.

Not: Puan ekleme, bu özel kod laboratuvarının işlemini kullanmaya yönelik iyi bir örnektir. Ancak üretim uygulamasında, kullanıcıların müdahale etmesini önlemek için ortalama puan hesaplamasını güvenilir bir sunucuda yapmanız gerekir. Bunu yapmanın iyi bir yolu, derecelendirme belgesini doğrudan istemciden yazmak ve ardından yeni restoran ortalama derecelendirmesini güncellemek için Cloud Functions'ı kullanmaktır.

Uyarı: Sunucuda bir işlem başarısız olduğunda geri çağırma da tekrar tekrar yürütülür. İşlem geri çağırma işlevinin içine asla uygulama durumunu değiştiren mantık yerleştirmeyin.

12. Verilerinizin güvenliğini sağlama

Bu kod laboratuvarının başında, uygulamamıza erişimi kısıtlamak için uygulamamızın güvenlik kurallarını belirledik.

firestore.rules

rules_version = '2';
service cloud.firestore {

  // Determine if the value of the field "key" is the same
  // before and after the request.
  function unchanged(key) {
    return (key in resource.data)
      && (key in request.resource.data)
      && (resource.data[key] == request.resource.data[key]);
  }

  match /databases/{database}/documents {
    // Restaurants:
    //   - Authenticated user can read
    //   - Authenticated user can create/update (for demo purposes only)
    //   - Updates are allowed if no fields are added and name is unchanged
    //   - Deletes are not allowed (default)
    match /restaurants/{restaurantId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null;
      allow update: if request.auth != null
                    && (request.resource.data.keys() == resource.data.keys())
                    && unchanged("name");

      // Ratings:
      //   - Authenticated user can read
      //   - Authenticated user can create if userId matches
      //   - Deletes and updates are not allowed (default)
      match /ratings/{ratingId} {
        allow read: if request.auth != null;
        allow create: if request.auth != null
                      && request.resource.data.userId == request.auth.uid;
      }
    }
  }
}

Bu kurallar, istemcilerin yalnızca güvenli değişiklikler yapmasını sağlamak için erişimi kısıtlar. Örneğin:

• Restoran belgelerinde yapılan güncellemeler yalnızca derecelendirmeleri değiştirebilir, adı veya diğer değişmez verileri değiştiremez.
• Derecelendirmeler yalnızca kullanıcı kimliği, oturum açmış kullanıcıyla eşleşirse oluşturulabilir. Bu, kimliğe bürünmeyi önler.

Firebase konsolunu kullanmanın alternatifi olarak, Firebase projenize kural dağıtmak için Firebase CLI'yi de kullanabilirsiniz. Çalışma dizininizdeki firestore.rules dosyası yukarıdaki kuralları zaten içerir. Bu kuralları yerel dosya sisteminizden dağıtmak için (Firebase konsolunu kullanmak yerine) aşağıdaki komutu çalıştırırsınız:

firebase deploy --only firestore:rules

Önemli: Güvenlik kuralları hakkında daha fazla bilgi edinmek için güvenlik kuralları dokümanlarına göz atın.

13. Sonuç

Bu codelab'de, Cloud Firestore ile temel ve gelişmiş okuma ve yazma işlemlerini nasıl gerçekleştireceğinizin yanı sıra güvenlik kurallarıyla veri erişimini nasıl güvence altına alacağınızı öğrendiniz. Çözümün tamamını quickstarts-js deposunda bulabilirsiniz.

Cloud Firestore hakkında daha fazla bilgi edinmek için aşağıdaki kaynakları ziyaret edin:

• Cloud Firestore'a giriş
• Veri Yapısı Seçme
• Cloud Firestore Web Örnekleri

14. [İsteğe bağlı] Uygulama Kontrolü ile zorunlu kılın

Firebase Uygulama Kontrolü, uygulamanıza gelen istenmeyen trafiği doğrulamaya ve önlemeye yardımcı olarak koruma sağlar. Bu adımda, reCAPTCHA Enterprise ile Uygulama Kontrolü'nü ekleyerek hizmetlerinize erişimi güvence altına alırsınız.

Bu adım, önceki adımların tamamlanmasına bağlıdır. FriendlyEats'in emülatörlerle yerel olarak çalıştığından veya Firebase hizmetleriyle dağıtıldığından emin olun.

Öncelikle Uygulama Kontrolü ve reCaptcha'yı etkinleştirmeniz gerekir.

reCaptcha Enterprise'ı etkinleştirme

1. Cloud Console'da Güvenlik bölümünde reCaptcha Enterprise'ı bulup seçin.
2. İstendiğinde hizmeti etkinleştirin ve Anahtar Oluştur'u tıklayın.
3. İstendiğinde bir görünen ad girin ve platform türü olarak Web sitesi'ni seçin.
4. Yayınlanan URL'lerinizi Alan listesi'ne ekleyin ve "Onay kutusu sorgusunu kullan" seçeneğinin seçilmediğinden emin olun.
5. Anahtar Oluştur'u tıklayın ve oluşturulan anahtarı güvenli bir yerde saklayın. Bu bilgiye bu adımın ilerleyen bölümlerinde ihtiyacınız olacak.

Uygulama Kontrolü'nü etkinleştirme

1. Firebase konsolunda, sol paneldeki Derleme bölümünü bulun.
2. Uygulama Kontrolü'nü, ardından Başlayın düğmesini tıklayın (veya doğrudan konsola yönlendirin).
3. Kaydet'i tıklayın ve istendiğinde reCaptcha Enterprise anahtarınızı girin, ardından Kaydet'i tıklayın.
4. API'ler görünümünde Depolama'yı seçin ve Zorunlu kıl'ı tıklayın. Cloud Firestore için de aynı işlemi yapın.

Uygulama Kontrolü artık uygulanıyor olmalıdır. Uygulamanızı yenileyin ve restoran oluşturmayı/görüntülemeyi deneyin. Aşağıdaki hata mesajını alırsınız:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

Bu, Uygulama Kontrolü'nün doğrulanmamış istekleri varsayılan olarak engellediği anlamına gelir. Şimdi uygulamanıza doğrulama özelliğini ekleyelim.

Uygulama Kontrolü'nü başlatmak için FriendlyEats.View.js dosyasına gidin, initAppCheck işlevini güncelleyin ve reCaptcha anahtarınızı ekleyin.

FriendlyEats.prototype.initAppCheck = function() {
    var appCheck = firebase.appCheck();
    appCheck.activate(
    new firebase.appCheck.ReCaptchaEnterpriseProvider(
      /* reCAPTCHA Enterprise site key */
    ),
    true // Set to true to allow auto-refresh.
  );
};

appCheck örneği, anahtarınızla bir ReCaptchaEnterpriseProvider ile başlatılır ve isTokenAutoRefreshEnabled, jetonların uygulamanızda otomatik olarak yenilenmesine olanak tanır.

Yerel testi etkinleştirmek için FriendlyEats.js dosyasında uygulamanın başlatıldığı bölümü bulun ve FriendlyEats.prototype.initAppCheck işlevine aşağıdaki satırı ekleyin:

if(isLocalhost) {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

Bu işlem, yerel web uygulamanızın konsoluna aşağıdakine benzer bir hata ayıklama jetonu kaydeder:

App Check debug token: 8DBDF614-649D-4D22-B0A3-6D489412838B. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Ardından Firebase konsolunda App Check'in Uygulamalar Görünümü'ne gidin.

Aşırı dolgu menüsünü tıklayın ve Hata ayıklama jetonlarını yönet'i seçin.

Ardından, Hata ayıklama jetonu ekle'yi tıklayın ve istenen şekilde konsolunuzdaki hata ayıklama jetonunu yapıştırın.

Tebrikler! Uygulamanızın kontrol edilmesi işlemi artık uygulamanızda çalışıyor olmalıdır.