Firebase Uzantıları ile web uygulamanıza hızla yeni işlevler ekleyin

1. Giriş

Hedefler

Bu codelab'de, Firebase Extensions'ın yardımıyla bir çevrimiçi pazar uygulamasına işlevsellik ekleyeceksiniz. Bu codelab aracılığıyla uzantıların, uygulama geliştirme ve yönetim görevlerine daha az zaman harcamanıza nasıl yardımcı olabileceğini anlayacaksınız.

3b6977f679c67db.png

Ne inşa edeceksin

Bu codelab'de bir çevrimiçi pazaryeri web uygulamasına aşağıdaki özellikleri ekleyeceksiniz:

  • Kullanıcının elde tutulmasını artırmak için görselleri daha hızlı yükleyin
  • Performansı artırmak ve faturanızı düşürmek için veritabanınızdaki girişleri sınırlayın
  • Kullanıcı verilerinin korunmasını geliştirmek için eski kullanıcı verilerinin otomatik olarak silinmesini uygulayın

Ne öğreneceksin

  • Yaygın kullanım örneklerine yönelik uzantılar nasıl keşfedilir?
  • Projenize bir uzantı nasıl kurulur ve yapılandırılır
  • Projenizdeki uzantıların bakımı nasıl yapılır (izlenir, güncellenir ve kaldırılır)

Bu codelab, Firebase Uzantılarına odaklanmıştır. Bu codelab'de bahsedilen diğer Firebase ürünleri hakkında ayrıntılı bilgi için Firebase belgelerine ve diğer codelab'lere bakın.

İhtiyacınız olan şey

  • Modern bir web tarayıcısının yüklü olduğu bir bilgisayar (Chrome önerilir)
  • Bir Google hesabı

2. Firebase projesi oluşturun ve kurun

Firebase projesi oluşturma

  1. Firebase konsolunda Proje ekle'yi tıklayın ve Firebase projesine FriendlyMarket adını verin.
  2. Proje oluşturma seçeneklerine tıklayın. Firebase şartlarını kabul edin. Bu uygulamada Analytics'i kullanmayacağınız için Google Analytics kurulumunu atlayın.
  3. Projenin sağlanmasını bekleyin ve ardından Devam'a tıklayın.

Oluşturacağınız uygulama, web uygulamaları için kullanılabilen birkaç Firebase ürününü kullanır:

  • Kullanıcılarınızı kolayca tanımlamak için Firebase Kimlik Doğrulaması
  • Yapılandırılmış verileri buluta kaydetmek ve veriler güncellendiğinde anında bildirim almak için Firebase Gerçek Zamanlı Veritabanı
  • Görüntüleri buluta kaydetmek için Firebase için Cloud Storage

Artık Firebase konsolunu kullanarak bu Firebase ürünlerini etkinleştirecek ve yapılandıracaksınız.

E-posta girişini etkinleştir

Kimlik doğrulama bu codelab'in odak noktası olmasa da, onu kullanan herkesi benzersiz şekilde tanımlamak için uygulamanızda bir tür kimlik doğrulamanın bulunması önemlidir. E-posta girişini kullanacaksınız.

  1. Firebase konsolunda sol paneldeki Geliştir'e tıklayın.
  2. Kimlik Doğrulama 'ya tıklayın ve ardından Oturum açma yöntemi sekmesine tıklayın (veya doğrudan Oturum açma yöntemi sekmesine gitmek için burayı tıklayın ).
  3. Oturum açma sağlayıcıları listesinde E-posta/Parola'ya tıklayın, Etkinleştir anahtarını açık konuma getirin ve ardından Kaydet'e tıklayın.

ed0f449a872f7287.png

Gerçek Zamanlı Veritabanını Etkinleştir

Uygulama, satılık öğeleri kaydetmek için Firebase Gerçek Zamanlı Veritabanını kullanır.

  1. Firebase konsolunun sol panelindeki Geliştirme bölümünde Veritabanı'nı tıklayın.
  2. Sayfayı Cloud Firestore bölmesini geçecek şekilde aşağı kaydırın ve Gerçek Zamanlı Veritabanı bölmesinde Veritabanı oluştur'a tıklayın.

cf8de951d2ab2e94.png

  1. Kilitli modda başlat'ı seçin ve ardından Etkinleştir'i tıklayın.

Güvenlik kurallarını ayarlayın

Artık bu uygulama için gereken güvenlik kurallarını belirleyeceksiniz. Bunlar, uygulamanızın güvenliğinin sağlanmasına yardımcı olacak bazı temel örnek kurallardır. Bu kurallar herkesin satılık öğeleri görüntülemesine izin verir, ancak bu kurallar yalnızca oturum açmış kullanıcıların diğer okuma ve yazma işlemlerini gerçekleştirmesine izin verir. Bu kuralların ayrıntıları konusunda endişelenmeyin; uygulamanızı çalışır duruma getirmek için bunları kopyalayıp yapıştırmanız yeterlidir.

  1. Gerçek Zamanlı Veritabanı panosunun üst kısmında Kurallar sekmesine tıklayın.

e233a24a38b37e95.png

  1. Aşağıdaki kural kümesini kopyalayıp Kurallar sekmesindeki kurallar alanına yapıştırın:
{
  "rules": {
    ".read": false,
    ".write": false,
      "drafts": {
        ".indexOn": "seller",
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
    "sellers": {
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
      "forsale": {
        ".read": true,
        ".write": "auth.uid !== null"
      }
  }
}
  1. Yayınla'yı tıklayın.

Bulut Depolamayı Etkinleştir

Uygulama, satılık öğelerin görüntülerini kaydetmek için Firebase için Cloud Storage'ı kullanıyor.

  1. Firebase konsolunun sol panelindeki Geliştirme bölümünde Depolama'yı tıklayın.
  2. Başlayın'ı tıklayın.

889013b9c7b8897c.png

  1. Varsayılan depolama paketinizi oluşturmak için varsayılanları kabul edin ( İleri'ye tıklayın, varsayılan konumu koruyun ve Bitti'ye tıklayın).

Artık bu uygulama için gereken güvenlik kurallarını belirleyeceksiniz. Bu kurallar yalnızca kimliği doğrulanmış kullanıcıların yeni görseller göndermesine izin verir, ancak herkesin listelenen bir öğenin görselini görüntülemesine izin verir.

  1. Depolama panosunun üst kısmında Kurallar sekmesine tıklayın.

e7003646b429500b.png

  1. Aşağıdaki kural kümesini kopyalayıp Kurallar sekmesindeki kurallar alanına yapıştırın:
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
    
    match /friendlymarket/{ImageId} {
      allow read;
      allow write: if request.auth != null;
    }
    
  }
}
  1. Yayınla'yı tıklayın.

3. Örnek uygulamayı çalıştırın

StackBlitz projesini çatallayın

Bu codelab'de, çeşitli Firebase iş akışlarının entegre edildiği çevrimiçi bir düzenleyici olan StackBlitz'i kullanarak bir uygulama oluşturup dağıtacaksınız. Stackblitz, herhangi bir yazılım kurulumu veya özel StackBlitz hesabı gerektirmez.

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

  1. Başlangıç ​​kodu için bu URL'ye gidin: https://stackblitz.com/edit/Friendlymarket-codelab .
  2. StackBlitz sayfasının üst kısmında Çatal'a tıklayın.

22c44cf92ed26208.png

Artık kendi StackBlitz projeniz olarak başlangıç ​​kodunun bir kopyasına sahipsiniz. Oturum açmadığınız için "hesabınıza" @anonymous adı verilir, ancak sorun değil. Projenin benzersiz bir URL'nin yanı sıra benzersiz bir adı vardır. Tüm dosyalarınız ve değişiklikleriniz bu StackBlitz projesine kaydedilir.

Projeye Firebase Web Uygulaması ekleyin

  1. StackBlitz'de src/firebase-config.js dosyanızı görüntüleyin. Firebase yapılandırma nesnesini ekleyeceğiniz yer burasıdır.
  2. Firebase konsoluna geri döndüğünüzde, sol üstteki Projeye Genel Bakış'ı tıklayarak projenizin genel bakış sayfasına gidin.
  3. Projenizin genel bakış sayfasının ortasında web simgesini tıklayın 58d6543a156e56f9.png yeni bir Firebase Web Uygulaması oluşturmak için. 88c964177c2bccea.png
  4. Uygulamayı FriendlyMarket Codelab takma adıyla kaydedin.
  5. Bu codelab için, Bu uygulama için Firebase Hosting'i de kur seçeneğinin yanındaki kutuyu işaretlemeyin . Bunun yerine StackBlitz önizleme bölmesini kullanacaksınız.
  6. Uygulamayı kaydet'i tıklayın.
  7. Uygulamanızın Firebase yapılandırma nesnesini panonuza kopyalayın. <script> etiketlerini kopyalamayın. Not: Yapılandırmayı daha sonra bulmanız gerekirse buradaki talimatları izleyin.

6c0519e8f48a3a6f.png

  1. Konsola devam et'i tıklayın.

Projenizin yapılandırmasını uygulamanıza ekleyin:

  1. StackBlitz'e geri döndüğünüzde src/firebase-config.js dosyasına gidin.
  2. Yapılandırma pasajınızı dosyaya yapıştırın. Bunu yaptıktan sonra şöyle görünmelidir (ancak yapılandırma nesnesinde kendi projenizin değerleri bulunmalıdır):

177602cbe84f873d.png

Bu uygulamanın başlangıç ​​noktası nedir?

StackBlitz ekranının sağ tarafındaki etkileşimli önizlemeye bir göz atın:

f3ec800f27fa49b7.png

Bu codelab, temel bir Marketplace uygulamasının koduyla başlamanızı sağlar. Herhangi bir kullanıcı, satılık öğelerin listesini görüntüleyebilir ve bir öğenin ayrıntılar sayfasını görüntülemek için bir bağlantıya tıklayabilir. Bir kullanıcı oturum açtıysa satıcının iletişim bilgilerini görür, böylece fiyatta pazarlık yapabilir ve ürünü satın alabilir.

Uygulamayı deneyin:

  1. Ana ekranın üst kısmındaki düğmeyle oturum açın. Sahte bir e-posta adresi, ad ve şifre kullanabilirsiniz.
  2. Bir liste oluşturmak için sağ alt köşedeki Bir şey sat düğmesini tıklayın.
  3. Başlık için Xylophone girin .
  4. İstenen Fiyat için 50 girin .
  5. Öğe Açıklaması için aşağıdakini girin: This high quality xylophone can be used to play music.
  6. Bu ksilofon görselini bilgisayarınıza indirin ve ÜRÜNÜNÜZÜN RESMİ butonunu kullanarak yükleyin.

  1. Tüm alanları doldurup bir görsel yükledikten sonra Gönder'i tıklayın.
  2. Yeni kaydınızı bulun. Ayrıntılar ekranını görmek için öğenize tıklayın ve ardından Satıcı iletişim bilgileri panelini genişletin.
  3. Firebase konsoluna geri dönün. Artık Veritabanı kontrol panelinde, forsale düğümü altında yayınladığınız öğeye ilişkin bir giriş göreceksiniz. Depolama kontrol panelinde, yüklediğiniz görseli de friendlymarket yolunda bulacaksınız.

4. Bir uzantı bulun ve yükleyin

Sorun

Uygulamanız için biraz kullanıcı araştırması yaptıktan sonra çoğu kullanıcının sitenizi masaüstü bilgisayarlarından değil akıllı telefonlarından ziyaret ettiğini görüyorsunuz. Ancak istatistikleriniz, mobil kullanıcıların yalnızca birkaç saniye sonra sitenizi terk etme ("kaybolma") eğiliminde olduğunu da gösteriyor.

Merak ederek sitenizi mobil bağlantı hızlarıyla test ediyorsunuz. (Bunu nasıl yapacağınızı buradan öğrenin.) Resimlerin yüklenmesinin çok uzun sürdüğünü ve tarayıcıda önbelleğe alınmadığını görüyorsunuz. Her sayfa görüntülemede bu kadar uzun yükleme süresi söz konusudur!

Çözüm

Görsellerin nasıl optimize edileceğini okuduktan sonra görsel yükleme performansını iyileştirmek için iki adım atmaya karar veriyorsunuz:

  • Görüntüleri sıkıştırın. Cep telefonları bile bu uygulamanın ihtiyaçları için gerekenden çok daha yüksek çözünürlükte görüntüler çekiyor. Dosya boyutunu küçültmek, uygulamada çözünürlükte gözle görülür bir düşüş olmadan yükleme sürelerini hızlandıracaktır.
  • Önbelleğe almak . Varsayılan olarak Cloud Storage nesneleri, tarayıcılara görüntüleri önbelleğe almamalarını söyleyen başlıklara sahiptir; bu, kullanıcının tarayıcısının aynı görüntüyü tekrar tekrar indireceği anlamına gelir! Neyse ki, önbelleğe almaya izin vermek için bu başlıkları değiştirebilirsiniz. Hem istemci tarafı Cloud Storage SDK hem de Firebase Admin SDK bu başlıkları ayarlamanıza olanak tanır.

Resimleri sıkıştırmak için yükleme kalitesini sınırlamanız veya resimleri yeniden boyutlandıran sunucu tarafında bir işleme sahip olmanız gerekir. Takasları ele alalım:

  • İstemci tarafı . İstemci taraflı bir işlem için, yüklenen görsellerin dosya boyutunu sınırlayabilirsiniz. Bu, herhangi bir yeni sunucu mantığı yazmanıza veya sürdürmenize gerek olmadığı anlamına gelir. Ancak bu aynı zamanda satıcılarınızın kendi görsellerini nasıl yeniden boyutlandıracaklarını bulması gerektiği anlamına da gelir; bu da yeni bir liste oluşturmanın önünde acı verici ve sezgisel olmayan bir engeldir.
  • Sunucu tarafı . Firebase için Cloud Functions kullanıyorsanız yükleme sırasında görüntüyü otomatik olarak yeniden boyutlandıran bir işlevi tetikleyebilirsiniz . Bu, satıcıların istedikleri boyuttaki görseli yükleyebilecekleri (onlar için ekstra bir iş gerektirmeyecek) ve arka uç işlevinizin görseli sorunsuz bir şekilde yeniden boyutlandırabileceği anlamına gelir. Bu işlev için bir örnek bile mevcut!

Görünüşe göre sunucu tarafı gidilecek yol. Ancak bu fikir yine de örneğin klonlanmasını, kurulum talimatlarının izlenmesini ve ardından işlevin Firebase CLI ile dağıtılmasını içeriyor. Görüntüleri yeniden boyutlandırmak çok yaygın bir kullanım durumu gibi görünüyor. Daha kolay bir çözümü yok mu?

Daha kolay bir çözüm

Şanslısın. Daha kolay bir çözüm var: Firebase Uzantıları! Firebase web sitesindeki mevcut uzantıların kataloğunu kontrol edelim.

e6bc3874cf23f34f.png

Şuna bak! "Görüntüleri Yeniden Boyutlandır" adında bir uzantı var. Bu umut verici görünüyor.

Bu uzantıyı uygulamanızda kullanalım!

Bir uzantı yükleyin

  1. Bu uzantı hakkında daha fazla bilgi görüntülemek için Ayrıntıları görüntüle'yi tıklayın. Neleri yapılandırabilirsiniz altında, uzantı, yeniden boyutlandırmak istediğiniz boyutları ayarlamanıza olanak tanır ve hatta önbellek başlığını bile ayarlayabilirsiniz. Mükemmel!
  2. Uzantının ayrıntılar sayfasındaki Konsola yükle düğmesini tıklayın. Tüm projelerinizi listeleyen Firebase konsol sayfasına yönlendirileceksiniz.
  3. Bu codelab için oluşturduğunuz FriendlyMarket projesini seçin.
  4. Uzantıyı yapılandır adımına ulaşana kadar ekrandaki talimatları izleyin. Talimatlarda, uzantının temel bir özetinin yanı sıra oluşturacağı kaynaklar ve ihtiyaç duyduğu rollere erişim gösterilir.
  5. Yeniden boyutlandırılan resimler için ** Cache-Control ** başlığına aşağıdakini girin:

public, max-age=31536000

  1. Diğer parametreleri varsayılan değerlerinde bırakın.
  2. Uzantıyı yükle'yi tıklayın.

Kurulumun tamamlanmasını beklerken...

Firebase komut satırı arayüzüyle yükleme

Komut satırı araçlarıyla daha rahatsanız, uzantılar Firebase CLI kullanılarak da kurulabilir ve yönetilebilir! CLI'nin en son sürümünde bulunan firebase ext komutunu kullanmanız yeterlidir. Daha fazla bilgiyi burada bulabilirsiniz.

(İsteğe bağlı) Önbellek Denetimi başlıkları hakkında daha fazla bilgi edinin

Cache-Control başlık değeri public, max-age=31536000 görüntünün 1 yıla kadar önbelleğe alınacağı anlamına gelir. Önbellek Kontrolü başlığı hakkında daha fazla bilgi edinmek için bu belgelere göz atın.

İstemci kodunu güncelle

Yüklediğiniz uzantı, yeniden boyutlandırılmış bir görüntüyü orijinal görüntüyle aynı klasöre yazar. Yeniden boyutlandırılan görüntünün dosya adına eklenen yapılandırılmış boyutları vardır. Dolayısıyla, orijinal dosya yolu friendlymarket/user1234-car.png gibi görünüyorsa, yeniden boyutlandırılan görüntünün dosya yolu friendlymarket/user1234-car_200x200.png gibi görünecektir.

Uygulamayı, tam boyutlu görseller yerine yeniden boyutlandırılmış görselleri getirecek şekilde güncelleyelim.

  1. StackBlitz'de src/firebase-refs.js dosyasını açın.
  2. Yeniden boyutlandırılan görüntü için bir başvuru oluşturmak üzere mevcut getImageRef işlevini aşağıdaki kodla değiştirin:
export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

Test edin

Bu uzantı yeni resim yüklemelerini izlediğinden mevcut resminiz yeniden boyutlandırılmayacaktır.

Uzantıyı çalışırken görmek için yeni bir gönderi oluşturun:

  1. Ana ekrana gitmek için uygulamanızın üst çubuğundaki Dost Pazar'a tıklayın.
  2. Bir liste oluşturmak için uygulamanın sağ alt köşesindeki Bir şey sat düğmesini tıklayın.
  3. Başlık için Coffee girin
  4. İstenen Fiyat için 1 girin
  5. Öğe Açıklaması için aşağıdakini girin: Selling one cafe latte. It has foam art in the shape of a bear .
  6. Bir fincan kahvenin bu görselini bilgisayarınıza indirin ve ÜRÜNÜNÜZÜN RESMİ butonunu kullanarak yükleyin.
  7. Tüm alanları doldurup bir görsel yükledikten sonra Gönder'i tıklayın. Kahve listesinin Ksilofon'un altında göründüğünü göreceksiniz!
  8. Firebase konsolundaki İşlevler kontrol panelinde Günlükler sekmesini tıklayın. İşlevin yürütüldüğünü gösteren günlükleri görmelisiniz.

486d1226be84bb44.png

  1. friendlymarket yolunda hem orijinal kahve görselini hem de yeniden boyutlandırılmış versiyonunu görmek için Depolama kontrol paneline gidin.
  2. StackBlitz önizleme bölmesinde uygulamanızın ana ekranını birkaç kez yeniden yükleyin. Kahve görselinin ksilofon görselinden çok daha hızlı yüklendiğini fark edeceksiniz.

Görüntü, daha küçük olduğundan ilk sayfa yüklemesinde daha hızlı yüklenir ve sonraki sayfada yenilendiğinde, bir ağ isteğini tetiklemek yerine tarayıcı önbelleğinden yüklenir.

5. Bir uzantıyı yeniden yapılandırın

Sorun

Uygulamanız bir satıcı listesinin taslak sürümlerini otomatik olarak kaydeder. Kullanıcılarınız bu özelliği beğeniyor ancak istatistikleriniz biraz endişe verici. Raporlarınız, taslakların yalnızca %10'unun gerçekte yayınlandığını ve diğer %90'ın yalnızca veritabanınızda yer kapladığını söylüyor.

Çözüm

Zarfın arkasında yapılan bazı hesaplamalardan sonra, herhangi bir zamanda yalnızca yaklaşık beş taslak kaydetmeniz gerektiğini fark ediyorsunuz.

Firebase Uzantıları kataloğunu hatırlıyor musunuz? Belki bu durum için zaten oluşturulmuş bir çözüm vardır. Kaydedilen taslakların sayısını otomatik olarak beş veya daha az tutmak için Alt Düğümleri Sınırla uzantısını yükleyelim. Yeni bir taslak eklendiğinde uzantı en eski taslağı silecektir.

  1. Uzantının ayrıntılar sayfasındaki Yükle düğmesini tıklayın.
  2. Market web uygulamanız için kullandığınız Firebase projesini seçin.
  3. Uzantıyı yapılandır adımına ulaşana kadar ekrandaki talimatları izleyin.
  4. Gerçek Zamanlı Veritabanı yolu için drafts girin. Bu, taslakların kaydedildiği veritabanındaki yoldur.
  5. Tutulacak maksimum düğüm sayısı için 5 girin. Bu, her öğenin listesi için beş taslağın kaydedileceği ve başka bir taslak eklenirse en eski taslağın otomatik olarak silineceği anlamına gelir.
  6. Uzantıyı yükle'yi tıklayın.

Kurulumun tamamlanmasını beklerken...

Uzantıları izleme

Bir uzantı yüklediğinizde işlem çeşitli işlevler oluşturur. Bu işlevlerin ne sıklıkta çalıştığını kontrol etmek veya günlükleri ve hata oranlarını görüntülemek isteyebilirsiniz. Uzantınızı nasıl izleyeceğiniz hakkında ayrıntılı bilgi için bkz. Yüklü uzantıları yönetme . Önceki adımda Resimleri Yeniden Boyutlandır uzantısı tarafından oluşturulan işlevleri görüntülemek için belgelerdeki talimatları izleyin.

Uzantıları kaldırma

Bir uzantıyı projenizden kaldırmak için, bir uzantının oluşturduğu bireysel işlevleri silmek isteyebilirsiniz, ancak bu, bir uzantı birden fazla işlev oluşturabileceğinden beklenmedik davranışlara yol açabilir. Belgelerden bir uzantının nasıl kaldırılacağını öğrenin.

Kaldırma işlemi, tüm kaynakları (uzantının işlevleri gibi) ve uzantının söz konusu örneği için oluşturulan hizmet hesabını siler. Ancak uzantı tarafından oluşturulan tüm yapılar (yeniden boyutlandırılan resimler gibi), uzantı kaldırıldıktan sonra projenizde kalacaktır.

Bir uzantının birden çok kopyasını tek bir projeye yükleme

Bir projeye belirli bir uzantının tek bir örneğini yüklemekle sınırlı değilsiniz. Başka bir yoldaki girişleri sınırlamak istiyorsanız bu uzantının başka bir örneğini yükleyebilirsiniz. Ancak bu codelab'in amaçları doğrultusunda uzantıyı yalnızca bir kez yükleyeceksiniz.

Çalışırken görün

  1. Ksilofon veya latteyi göndermek için kullandığınız hesapla oturum açtığınızdan emin olun.
  2. Bazı taslaklar oluşturun:
  3. Uygulamanın sağ alt köşesindeki Bir şey sat düğmesine tıklayın
  4. Başlığı "Taslak 1" olarak düzenleyin.
  5. Taslaklar bölümüne ilerleyin ve taslak sayısını görüntüleyin. En az iki tane olmalı.
  6. Üst uygulama çubuğundaki DOSTU PAZAR düğmesine tıklayın. Bu şekilde kayıtlı bir taslağınız olur ancak onu yayınlamanıza gerek kalmaz.
  7. "Taslak 2", "Taslak 3" ve "Taslak 6"ya kadar aynı işlemi tekrarlayın.
  8. "Taslak 6"yı oluşturduğunuzda, "Taslak 1"in Taslaklar bölümünüzden kaybolduğunu fark edin.
  9. Resimleri Yeniden Boyutlandır uzantısında yaptığınız gibi, hangi işlevlerin tetiklendiğini görmek için işlev günlüklerini kontrol edebilirsiniz.

Hata! Saklanacak taslak sınırı çok küçük

Müşteri destek ekibiniz size ulaşır ve en üretken satıcılarınızdan bazılarının taslaklarının daha yayınlanamadan silindiğinden şikayetçi olduklarını bildirir. Takım arkadaşınızla matematiğinizi kontrol ediyorsunuz ve matematiğinizin 10.000 kat hatalı olduğunu fark ediyorsunuz!

Bunu nasıl düzeltebilirsin? Yüklü uzantıyı yeniden yapılandıralım!

  1. Firebase konsolunun sol bölmesinde Uzantılar'ı tıklayın.
  2. Yüklü uzantının kartında Yönet'i tıklayın.
  3. Sağ üst köşedeki Uzantıyı yeniden yapılandır'ı tıklayın.
  4. Tutmak için Maksimum düğüm sayısını 50000 olarak değiştirin.
  5. Kaydet'i tıklayın.

Ve yapmanız gereken tek şey bu! Uzantının güncellenmesi sırasında destek ekibinizle konuşabilir ve onlara bir düzeltmenin halihazırda dağıtılmakta olduğunu bildirebilirsiniz.

6. Kullanıcı verilerini otomatik olarak silin

Sorun

Müşteri destek ekibiniz sizinle tekrar iletişime geçti. Hesaplarını silen satıcılar hâlâ diğer kullanıcılardan e-posta alıyor ve onlar da kızgın! Bu satıcılar, hesaplarını silerken e-posta adreslerinin de sistemlerinizden silinmesini bekliyordu.

Şimdilik destek, her kullanıcının verilerini manuel olarak siliyor, ancak daha iyi bir yol olmalı! Bunu düşünürsünüz ve periyodik olarak çalışan ve e-posta adreslerini silinen hesaplardan temizleyen kendi toplu işinizi yazmayı düşünürsünüz. Ancak kullanıcı verilerini silmek oldukça yaygın bir sorun gibi görünüyor. Belki Firebase Uzantıları da bu sorunun çözülmesine yardımcı olabilir.

Çözüm

Bir kullanıcı hesabını sildiğinde veritabanındaki users/uid düğümünü otomatik olarak silecek şekilde Kullanıcı Verilerini Sil uzantısını yapılandıracaksınız.

  1. Uzantının ayrıntılar sayfasındaki Yükle düğmesini tıklayın.
  2. Market web uygulamanız için kullandığınız Firebase projesini seçin.
  3. Uzantıyı yapılandır adımına ulaşana kadar ekrandaki talimatları izleyin.
  4. Gerçek Zamanlı Veritabanı yolları için sellers/{UID} girin. sellers kısmı, çocukları kullanıcı e-posta adreslerini içeren düğümdür ve {UID} bir joker karakterdir. Bu yapılandırma ile uzantı, 1234 UID'sine sahip kullanıcı hesabını sildiğinde, uzantının sellers/1234 veritabanından silmesi gerektiğini bilecektir.
  5. Uzantıyı yükle'yi tıklayın.

Kurulumun tamamlanmasını beklerken...

Özelleştirilebilirlik hakkında konuşalım

Bu codelab'de Firebase Uzantılarının yaygın kullanım durumlarını çözmeye yardımcı olabileceğini ve uzantıların uygulamanızın ihtiyaçlarına uyacak şekilde yapılandırılabileceğini gördünüz.

Ancak uzantılar her sorunu çözemez ve kullanıcı verilerinin silinmesi sorunu buna iyi bir örnektir. Kullanıcı Verilerini Sil uzantısı, bir kullanıcı hesabını sildikten sonra e-postaların hâlâ açığa çıktığı yönündeki mevcut şikayeti ele alsa da, uzantı her şeyi silmez. Örneğin, öğe listesi hala mevcuttur ve Cloud Storage'daki tüm görüntüler de kalıcı olacaktır. Kullanıcı Verilerini Sil uzantısı, silinecek bir Bulut Depolama yolu yapılandırmamıza olanak tanır, ancak kullanıcılar birçok farklı adla birçok farklı dosya yükleyebildiğinden, bu uzantıyı bu yapıları otomatik olarak silecek şekilde yapılandıramazsınız. Bu gibi durumlarda, uygulamanızın veri modeline özel kod yazabilmeniz için Cloud Functions for Firebase daha uygun olabilir.

Uzantılar ve faturalandırma

Firebase uzantılarının kullanımı ücretsizdir (yalnızca kullandığınız temel kaynaklar için ücretlendirilirsiniz), ancak bir uzantının ihtiyaç duyduğu temel kaynaklardan bazıları faturalandırma gerektirebilir. Bu codelab, faturalandırma hesabı olmadan tamamlanacak şekilde tasarlandı. Bununla birlikte, bir Flame or Blaze planı oluşturmak gerçekten çok sayıda ilgi çekici Firebase uzantısının kilidini açar.

Örneğin, URL'leri kısaltabilir , e-postayı tetikleyebilir , koleksiyonları BigQuery'ye aktarabilir ve daha fazlasını yapabilirsiniz! Uzantıların tam kataloğuna buradan göz atın.

Sahip olmak istediğiniz bir uzantı varsa ancak şu anda mevcut değilse, bunu duymak isteriz! Yeni bir uzantı önermek için Firebase Desteğine bir özellik isteğinde bulunun.

Çalışırken görün

Uzantınızın kurulumu tamamlandıktan sonra bir kullanıcıyı silin ve ne olacağını görün:

  1. Firebase konsolunda Gerçek Zamanlı Veritabanı kontrol panelinize gidin.
  2. sellers düğümünü genişletin.
  3. Her satıcının bilgileri kullanıcı UID'sine şifrelenir. Bir kullanıcının UID'sini seçin.
  4. Firebase konsolunda Kimlik Doğrulama kontrol panelinize gidin ve söz konusu kullanıcı UID'sini bulun.
  5. UID'nin sağındaki menüyü genişletin ve Hesabı Sil ' i seçin.

2e03923c9d7f1f29.png

  1. Gerçek Zamanlı Veritabanı kontrol panelinize geri dönün. Satıcının bilgileri kaybolacak!

7. Tebrikler!

Bu codelab'de çok fazla kod yazmamış olsanız da, Marketplace uygulamanıza önemli özellikler eklediniz.

Uzantıları nasıl keşfedeceğinizi, yapılandıracağınızı, yükleyeceğinizi ve yeniden yapılandıracağınızı öğrendiniz. Ayrıca yüklü uzantıların nasıl izleneceğini ve gerekirse bunların nasıl kaldırılacağını da öğrendiniz.

Sıradaki ne?

Bu diğer uzantılardan bazılarına göz atın:

Daha fazla özel sunucu tarafı koduna mı ihtiyacınız var?

Diğer yararlı belgeler

Uzantıları yönetme:

Uzantılar hakkında daha ince ayrıntıları öğrenmek:

  • GitHub'da her uzantının kaynak kodunu ve belgelerini görüntüleyin
  • Bir uzantıya verilen izinler ve erişim hakkında bilgi edinin