Firebase Extensions ile web uygulamanıza hızlı bir şekilde yeni işlevler ekleyin

1. Giriş

Hedefler

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

Ne oluşturacaksınız?

Bu codelab'de, online pazar yeri web uygulamasına aşağıdaki özellikleri ekleyeceksiniz:

• Kullanıcıları elde tutma oranını artırmak için görüntüleri daha hızlı yükleme
• Performansı artırmak ve faturanızı düşürmek için veritabanınızdaki girişleri sınırlayın
• Kullanıcı verilerinin korunmasını artırmak için eski kullanıcı verilerinin otomatik olarak silinmesini uygulama

Neler öğreneceksiniz?

• Yaygın kullanım alanları için uzantıları keşfetme
• Projenize uzantı yükleme ve uzantıyı yapılandırma
• Projenizdeki uzantıları koruma (izleme, güncelleme ve kaldırma)

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

Gerekenler

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

2. Firebase projesi oluşturma ve ayarlama

Firebase projesi oluşturma

1. Google Hesabınızı kullanarak Firebase konsolunda oturum açın.
2. Yeni bir proje oluşturmak için düğmeyi tıklayın ve ardından bir proje adı girin (örneğin, FriendlyMarket).
   
3. Devam'ı tıklayın.
4. İstenirse Firebase şartlarını inceleyip kabul edin ve Devam'ı tıklayın.
5. (İsteğe bağlı) Firebase konsolunda yapay zeka yardımını etkinleştirin ("Firebase'de Gemini" olarak adlandırılır).
6. Bu codelab için Google Analytics'e ihtiyacınız yoktur. Bu nedenle, Google Analytics seçeneğini devre dışı bırakın.
7. Proje oluştur'u tıklayın, projenizin hazırlanmasını bekleyin ve ardından Devam'ı tıklayın.

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

• Kullanıcılarınızı kolayca tanımlamak için Firebase Authentication
• Yapılandırılmış verileri buluta kaydetmek ve veriler güncellendiğinde anında bildirim almak için Firebase Realtime Database
• Görüntüleri buluta kaydetmek için Cloud Storage for Firebase

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

Firebase fiyatlandırma planınızı yükseltme

Firebase Extensions'ı, temel alınan bulut hizmetlerini ve Firebase için Cloud Storage'ı kullanmak istiyorsanız Firebase projenizin kullandıkça öde (Blaze) fiyatlandırma planında olması gerekir. Bu da projenin bir Cloud Faturalandırma hesabına bağlı olduğu anlamına gelir.

• Cloud Faturalandırma hesabı için kredi kartı gibi bir ödeme yöntemi gerekir.
• Firebase ve Google Cloud'u yeni kullanmaya başladıysanız 300 ABD doları değerinde kredi ve ücretsiz deneme Cloud Faturalandırma hesabı için uygun olup olmadığınızı kontrol edin.
• Bu codelab'i bir etkinliğin parçası olarak yapıyorsanız düzenleyicinize Cloud kredisi olup olmadığını sorun.

Projenizi Blaze planına yükseltmek için şu adımları uygulayın:

1. Firebase konsolunda planınızı yükseltmeyi seçin.
2. Blaze planını seçin. Bir Cloud Faturalandırma hesabını projenize bağlamak için ekrandaki talimatları uygulayın.
   Bu yükseltme kapsamında bir Cloud Faturalandırma hesabı oluşturmanız gerekiyorsa yükseltmeyi tamamlamak için Firebase Console'daki yükseltme akışına geri dönmeniz gerekebilir.

E-posta ile giriş özelliğini etkinleştirme

Bu codelab'in odak noktası kimlik doğrulama olmasa da uygulamanızda kimlik doğrulama olması, uygulamayı kullanan herkesi benzersiz şekilde tanımlamak için önemlidir. E-posta ile giriş yaparsınız.

1. Firebase konsolunda, sol paneldeki Geliştir'i tıklayın.
2. Kimlik doğrulama'yı ve ardından Oturum açma yöntemi sekmesini 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/Şifre'yi tıklayın, Etkinleştir anahtarını açık konuma getirin ve Kaydet'i tıklayın.

Realtime Database'i etkinleştirme

Uygulama, satılacak öğeleri kaydetmek için Firebase Realtime Database'i kullanır.

1. Firebase konsolunun sol panelinde Build'i (Oluştur) genişletin ve Realtime Database'i (Anlık Veritabanı) seçin.
2. Create database'i (Veritabanı oluştur) tıklayın.
3. Veritabanınız 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.
4. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
   Bu codelab'in sonraki adımlarında, verilerinizi güvence altına almak için güvenlik kuralları ekleyeceksiniz. Veritabanınıza güvenlik kuralları eklemeden uygulamayı herkese açık şekilde dağıtmayın veya herkese açık olarak kullanıma sunmayın.
5. Oluştur'u tıklayın.

Veritabanınız için güvenlik kuralları belirleme

Şimdi bu uygulama için gereken güvenlik kurallarını ayarlayacaksınız. Bunlar, uygulamanızın güvenliğini sağlamanıza yardımcı olacak bazı temel örnek kurallardır. Bu kurallar, herkesin satılık öğeleri görüntülemesine izin verir ancak 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ıyla ilgili endişelenmeyin. Uygulamanızı kullanıma hazır hale getirmek için bu kuralları kopyalayıp yapıştırmanız yeterlidir.

1. Realtime Database kontrol panelinin üst kısmındaki Kurallar sekmesini tıklayın.

2. Aşağıdaki kural grubunu 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"
         }
     }
   }
   

3. Yayınla'yı tıklayın.

Cloud Storage for Firebase'i ayarlama

Uygulama, satılık öğelerin resimlerini kaydetmek için Cloud Storage for Firebase'i kullanıyor.

Firebase projenizde Cloud Storage for Firebase'i ayarlamak için:

1. Firebase konsolunun sol panelinde Build'i (Oluştur) genişletin ve Storage'ı (Depolama) seçin.
2. Başlayın'ı tıklayın.
3. Varsayılan depolama paketinize bir konum seçin.
   US-WEST1, US-CENTRAL1 ve US-EAST1 bölgelerindeki paketler, Google Cloud Storage için "Daima Ücretsiz" katmanından yararlanabilir. Diğer tüm konumlardaki paketler için Google Cloud Storage fiyatlandırması ve kullanımı geçerlidir.
4. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
   Bu codelab'in sonraki adımlarında, verilerinizi güvence altına almak için güvenlik kuralları ekleyeceksiniz. Depolamapaketinize güvenlik kuralları eklemeden uygulamayı herkese açık olarak dağıtmayın veya kullanıma sunmayın.
5. Oluştur'u tıklayın.

Depolama paketinize yönelik güvenlik kuralları oluşturma

Şimdi bu uygulama için gereken güvenlik kurallarını ayarlayacaksınız. Bu kurallar yalnızca kimliği doğrulanmış kullanıcıların yeni resimler yayınlamasına izin verir ancak listelenen bir öğenin resmini herkesin görüntülemesine olanak tanır.

1. Depolama alanı kontrol panelinin üst kısmındaki Kurallar sekmesini tıklayın.

2. Aşağıdaki kural grubunu kopyalayıp Kurallar sekmesindeki kurallar alanına yapıştırın:

   rules_version = '2';
   service firebase.storage {
     match /b/{bucket}/o {
       match /friendlymarket/{ImageId} {
         allow read;
         allow write: if request.auth != null;
       }
     }
   }
   

3. Yayınla'yı tıklayın.

3. Örnek uygulamayı çalıştırma

StackBlitz projesini çatallama

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

StackBlitz, projeleri başkalarıyla paylaşmanıza olanak tanır. StackBlitz proje URL'nize sahip olan diğer kullanıcılar 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/friendlymarket-codelab.
2. StackBlitz sayfasının üst kısmında Fork'u (Çatal) tıklayın.

Başlangıç kodunun bir kopyası artık kendi StackBlitz projeniz olarak kullanılabilir. Oturum açmadığınız için "hesabınız" @anonymous olarak adlandırılır ancak bu durum sorun teşkil etmez. Projenin benzersiz bir adı ve benzersiz bir URL'si vardır. Tüm dosyalarınız ve değişiklikleriniz bu StackBlitz projesine kaydedilir.

Projeye Firebase web uygulaması ekleme

1. StackBlitz'te src/firebase-config.js dosyanızı görüntüleyin. Firebase yapılandırma nesnesini buraya ekleyeceksiniz.
2. Firebase konsoluna geri dönün ve sol üstteki Project Overview'ı tıklayarak projenizin genel bakış sayfasına gidin.
3. Projenizin genel bakış sayfasının ortasında, yeni bir Firebase web uygulaması oluşturmak için web simgesini tıklayın.
4. Uygulamayı FriendlyMarket Codelab takma adıyla kaydedin.
5. Bu codelab için Bu uygulama için Firebase Hosting'i de ayarlayın 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ı uygulayın.

8. Konsola git'i tıklayın.

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

1. StackBlitz'e geri dönün ve src/firebase-config.js dosyasına gidin.
2. Yapılandırma snippet'inizi dosyaya yapıştırın. Bu işlemi yaptıktan sonra, yapılandırma nesnesinde kendi projenizin değerleriyle birlikte aşağıdaki gibi görünmelidir:

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

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

Bu codelab, temel bir pazar yeri uygulaması için kodla baş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 bağlantıyı tıklayabilir. Oturum açmış kullanıcılar, fiyat pazarlığı yapabilmek ve öğeyi satın alabilmek için satıcının iletişim bilgilerini görür.

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. Listeleme oluşturmak için sağ alt köşedeki Bir şey sat düğmesini tıklayın.
3. Başlık için Xylophonedeğişkenini girin.
4. İstenen Fiyat için 50girin.
5. Öğe Açıklaması için şunları girin: This high quality xylophone can be used to play music.
6. Bu ksilofon resmini bilgisayarınıza indirip ÜRÜNÜNÜZÜN RESMİ düğmesiyle yükleyin.

file_downloadResmi İndir

7. Tüm alanları doldurup bir resim yükledikten sonra Yayınla'yı tıklayın.
8. Yeni girişinizi bulun. Öğenizi tıklayarak ayrıntılar ekranını görün ve Satıcının iletişim bilgileri panelini genişletin.
9. Firebase konsoluna geri dönün. Veritabanı kontrol panelinde, yayınladığınız öğe için forsale düğümü altında bir giriş görürsünüz. Depolama kontrol panelinde, friendlymarket yoluna yüklediğiniz resmi de bulabilirsiniz.

4. Uzantı bulma ve yükleme

Sorun

Uygulamanızla ilgili kullanıcı araştırması yaptıktan sonra çoğu kullanıcının sitenizi masaüstünden değil, akıllı telefonundan ziyaret ettiğini öğreniyorsunuz. Ancak istatistikleriniz, mobil kullanıcıların yalnızca birkaç saniye sonra sitenizden ayrılma ("müşteri kaybı") eğiliminde olduğunu da gösteriyor.

Merak edip sitenizi mobil bağlantı hızlarıyla test ediyorsunuz. (Bunun nasıl yapılacağını buradan öğrenebilirsiniz.) Resimlerin yüklenmesinin çok uzun sürdüğünü ve tarayıcıda hiç önbelleğe alınmadığını fark edebilirsiniz. Bu uzun yükleme süresi her sayfa görüntülemede yaşanır.

Çözüm

Resimleri optimize etme hakkında bilgi edindikten sonra, resim yükleme performansını artırmak için iki adım atmaya karar verirsiniz:

• Resimleri sıkıştırın. Cep telefonları bile bu uygulamanın ihtiyaçları için gerekenden çok daha yüksek çözünürlüklü fotoğraflar çekiyor. Dosya boyutunu küçültmek, uygulamadaki çözünürlükte fark edilebilir bir düşüş olmadan yükleme sürelerini hızlandırır.
• Önbelleğe alma Varsayılan olarak, Cloud Storage nesnelerinde tarayıcılara resimleri önbelleğe almamalarını söyleyen başlıklar bulunur. Bu da kullanıcının tarayıcısının aynı resmi tekrar tekrar indirmesi anlamına gelir. Neyse ki bu başlıkları, önbelleğe almaya izin verecek şekilde değiştirebilirsiniz. Hem istemci tarafı Cloud Storage SDK'sı hem de Firebase Admin SDK bu üstbilgileri ayarlamanıza olanak tanır.

Resimleri sıkıştırmak için yükleme kalitesini sınırlamanız veya resimleri yeniden boyutlandıran bir sunucu tarafı sürecine sahip olmanız gerekir. Avantajlara ve dezavantajlara göz atalım:

• İstemci tarafı. İstemci tarafı bir işlem için yüklenen resimlerin dosya boyutunu sınırlayabilirsiniz. Bu nedenle, yeni bir sunucu mantığı yazmanız veya mevcut sunucu mantığını korumanız gerekmez. Ancak bu durum, satıcılarınızın kendi resimlerini yeniden boyutlandırmanın yolunu 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ı. Cloud Functions for Firebase kullanıyorsanız yükleme sırasında bir görüntüyü otomatik olarak yeniden boyutlandıran bir işlevi tetikleyebilirsiniz. Bu sayede satıcılar istedikleri boyutta resim yükleyebilir (ekstra işlem yapmaları gerekmez) ve arka uç işleviniz resmi sorunsuz bir şekilde yeniden boyutlandırabilir. Bu işlev için örnek bile var.

Sunucu tarafı yaklaşımı daha uygun görünüyor. Ancak bu fikirde de örneğin klonlanması, kurulum talimatlarının uygulanması ve ardından işlevin Firebase CLI ile dağıtılması gerekiyor. Resimleri yeniden boyutlandırma çok yaygın bir kullanım alanı gibi görünüyor. Daha kolay bir çözüm yok mu?

Daha kolay bir çözüm

Size iyi bir haberimiz var. Daha kolay bir çözüm var: Firebase Extensions. Firebase web sitesindeki mevcut uzantıların kataloğuna göz atalım.

Şuna bak! "Resize Images" (Resimleri Yeniden Boyutlandır) adlı bir uzantı vardır. Bu umut verici görünüyor.

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

Uzantı yükleme

1. Bu uzantı hakkında daha fazla bilgi edinmek için Ayrıntıları göster'i tıklayın. Yapılandırabileceğiniz ayarlar bölümünde, yeniden boyutlandırmak istediğiniz boyutları ayarlayabilir ve hatta önbellek başlığını belirleyebilirsiniz. Mükemmel!
2. Uzantının ayrıntılar sayfasında Konsola yükle düğmesini tıklayın. Tüm projelerinizin listelendiği bir Firebase konsolu sayfasına yönlendirilirsiniz.
3. Bu codelab için oluşturduğunuz FriendlyMarket projesini seçin.
4. Uzantıyı yapılandırın adımına ulaşana kadar ekrandaki talimatları uygulayın. Talimatlarda, uzantının temel bir özeti, oluşturacağı kaynaklar ve gerektirdiği erişim rolleri gösterilir.
5. **Cache-Control** Yeniden boyutlandırılmış resimler için üstbilgi alanına aşağıdakileri girin:

public, max-age=31536000

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

Yüklemenin tamamlanmasını beklerken...

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

Komut satırı araçlarını kullanmayı tercih ediyorsanız uzantıları Firebase CLI ile de yükleyip yönetebilirsiniz. CLI'nın en son sürümünde bulunan firebase ext komutunu kullanmanız yeterlidir. Daha fazla bilgiye buradan ulaşabilirsiniz.

(İsteğe bağlı) Cache-Control başlıkları hakkında daha fazla bilgi edinin.

Cache-Control başlık değeri public, max-age=31536000, resmin en fazla 1 yıl boyunca önbelleğe alınacağı anlamına gelir. Cache-Control başlığı hakkında daha fazla bilgi edinmek için bu belgeye göz atın.

İstemci kodunu güncelleme

Yüklediğiniz uzantı, yeniden boyutlandırılmış bir resmi orijinal resimle aynı pakete yazar. Yeniden boyutlandırılan resmin dosya adına, yapılandırılan boyutlar eklenir. Bu nedenle, orijinal dosya yolu friendlymarket/user1234-car.png gibi görünüyorsa yeniden boyutlandırılan resmin dosya yolu friendlymarket/user1234-car_200x200.png gibi görünür.

Uygulamayı, tam boyutlu resimler yerine yeniden boyutlandırılmış resimleri getirecek şekilde güncelleyelim.

1. StackBlitz'de src/firebase-refs.js dosyasını açın.
2. Yeniden boyutlandırılmış resim için bir ref 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 resminizin boyutu değiştirilmez.

Uzantıyı kullanırken görmek için yeni bir yayın oluşturun:

1. Ana ekrana gitmek için uygulamanızın üst çubuğunda Friendly Market'ı tıklayın.
2. Uygulamanın sağ alt köşesindeki Bir şey sat düğmesini tıklayarak bir liste oluşturun.
3. Title (Başlık) için Coffee değişkenini girin.
4. İstenen Fiyat için 1 değerini girin.
5. Öğe Açıklaması için aşağıdakileri girin: Selling one cafe latte. It has foam art in the shape of a bear.
6. Bir fincan kahve resmini bilgisayarınıza indirin ve ÜRÜNÜNÜZÜN RESMİ düğmesiyle yükleyin. file_downloadResmi İndir
7. Tüm alanları doldurup bir resim yükledikten sonra Yayınla'yı tıklayın. Kahve listelemesinin Ksilofon'un altında göründüğünü görürsünüz.
8. Firebase konsolundaki Functions kontrol panelinde Günlükler sekmesini tıklayın. İşlevin yürütüldüğünü gösteren günlükler görürsünüz.

9. friendlymarket yolunda hem orijinal kahve resmini hem de yeniden boyutlandırılmış bir sürümünü görmek için Depolama kontrol paneline gidin.
10. StackBlitz önizleme bölmesinde, uygulamanızın ana ekranını birkaç kez yeniden yükleyin. Kahve resminin, ksilofon resminden çok daha hızlı yüklendiğini fark edeceksiniz.

Resim daha küçük olduğundan ilk sayfa yüklemesinde daha hızlı yüklenir. Sonraki sayfa yenilemelerinde ise ağ isteği tetiklemek yerine tarayıcı önbelleğinden yüklenir.

5. Uzantıyı yeniden yapılandırma

Sorun

Uygulamanız, satıcının girişinin 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 yayınlandığını, diğer% 90'ının ise veritabanınızda yer kapladığını gösteriyor.

Çözüm

Kabaca bir hesaplama yaptıktan sonra, herhangi bir zamanda yalnızca beş taslak kaydetmeniz gerektiğini anlarsınız.

Firebase Extensions kataloğunu hatırlıyor musunuz? Bu durum için önceden oluşturulmuş bir çözüm olabilir. Kayıtlı taslak sayısını otomatik olarak beş veya daha az tutmak için Limit Child Nodes uzantısını yükleyelim. Uzantı, yeni bir taslak eklendiğinde en eski taslağı siler.

1. Uzantının ayrıntılar sayfasında Yükle düğmesini tıklayın.
2. Pazar yeri web uygulamanız için kullandığınız Firebase projesini seçin.
3. Uzantıyı yapılandırın adımına ulaşana kadar ekrandaki talimatları uygulayın.
4. Realtime Database yolu için drafts girin. Bu, taslakların kaydedildiği veritabanındaki yoldur.
5. Tutulacak maksimum düğüm sayısı için 5 değerini girin. Bu durumda, her öğenin listelenmesi için beş taslak kaydedilir ve başka bir taslak eklenirse en eski taslak otomatik olarak silinir.
6. Uzantıyı yükle'yi tıklayın.

Yüklemenin tamamlanmasını beklerken...

İzleme uzantıları

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ı izleme hakkında ayrıntılı bilgi için Yüklü uzantıları yönetme başlıklı makaleyi inceleyin. Önceki adımda Resize Images uzantısı tarafından oluşturulan işlevleri görüntülemek için dokümandaki talimatları uygulayın.

Uzantıları kaldırma

Bir uzantıyı projenizden kaldırmak için uzantının oluşturduğu işlevleri tek tek silmek isteyebilirsiniz. Ancak bir uzantı birden fazla işlev oluşturabileceğinden bu durum beklenmedik davranışlara yol açabilir. Uzantıları nasıl kaldıracağınızı dokümanlardan öğrenebilirsiniz.

Yükleme kaldırıldığında tüm kaynaklar (ör. uzantının işlevleri) ve uzantının söz konusu örneği için oluşturulan hizmet hesabı silinir. Ancak, uzantı tarafından oluşturulan yapılar (ör. yeniden boyutlandırılan resimler), uzantı kaldırıldıktan sonra projenizde kalır.

Tek bir projeye bir uzantının birden fazla kopyasını yükleme

Bir projede belirli bir uzantının tek bir örneğini yüklemekle sınırlı değilsiniz. Girişleri başka bir yolda sınırlamak isterseniz 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.

İşleyiş şeklini görün

1. Ksilofon veya latte fotoğrafını yayınlamak için kullandığınız hesapla giriş yaptığınızdan emin olun.
2. Bazı taslaklar oluşturun:
3. Uygulamanın sağ alt köşesindeki Bir şey sat düğmesini tıklayın.
4. Başlığı "Taslak 1" olarak düzenleyin.
5. Taslaklar bölümüne gidip taslak sayısını görüntüleyin. En az iki tane olmalıdır.
6. Üst uygulama çubuğunda FRIENDLY MARKET (ARKADAŞ CANLISI PAZAR) düğmesini tıklayın. Bu şekilde, kaydedilmiş bir taslağınız olur ancak bunu yayınlamanız gerekmez.
7. "Taslak 2", "Taslak 3" ve "Taslak 6" için de aynı işlemi tekrarlayın.
8. "Taslak 6"yı oluşturduğunuzda "Taslak 1"in Taslaklar bölümünden kaybolduğunu fark edeceksiniz.
9. Resize Images uzantısında yaptığınız gibi, hangi işlevlerin tetiklendiğini görmek için işlev günlüklerini kontrol edebilirsiniz.

Oops, the limit of drafts to keep is too small

Müşteri desteği ekibiniz size ulaşarak en çok satış yapan satıcılarınızdan bazılarının, taslaklarını yayınlamadan önce silindiğinden şikayet ettiğini bildiriyor. Hesabınızı iş arkadaşınızla kontrol ettiğinizde, hesabınızın 10.000 kat hatalı olduğunu fark ediyorsunuz.

Bu sorunu nasıl düzeltebilirsiniz? 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öşede Uzantıyı yeniden yapılandır'ı tıklayın.
4. Tutulacak maksimum düğüm sayısı'nı 50000 olarak değiştirin.
5. Kaydet'i tıklayın.

Yapmanız gereken tek şey bu! Uzantının güncellenmesi sırasında destek ekibinizle konuşabilir ve düzeltmenin zaten dağıtıldığını bildirebilirsiniz.

6. Kullanıcı verilerini otomatik olarak silme

Sorun

Müşteri destek ekibiniz sizinle tekrar iletişime geçti. Hesaplarını silen satıcılar, diğer kullanıcılardan e-posta almaya devam ediyor ve bu durumdan rahatsız oluyor. Bu satıcılar, hesaplarını sildiklerinde e-posta adreslerinin sistemlerinizden silineceğini düşünüyordu.

Şu anda destek ekibi her kullanıcının verilerini manuel olarak siliyor ancak daha iyi bir yol olmalı. Bunu düşünür ve düzenli olarak çalışıp silinen hesaplardaki e-posta adreslerini temizleyen kendi toplu işinizi yazmayı değerlendirirsiniz. Ancak kullanıcı verilerini silmek oldukça yaygın bir sorun gibi görünüyor. Firebase Extensions da bu sorunu çözmenize yardımcı olabilir.

Çözüm

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ında Yükle düğmesini tıklayın.
2. Pazar yeri web uygulamanız için kullandığınız Firebase projesini seçin.
3. Uzantıyı yapılandırın adımına ulaşana kadar ekrandaki talimatları uygulayın.
4. Realtime Database yolları için sellers/{UID} girin. sellers bölümü, alt öğelerinde kullanıcı e-posta adresleri bulunan düğümdür ve {UID} joker karakterdir. Bu yapılandırmayla uzantı, 1234 UID'sine sahip kullanıcı hesabını sildiğinde veritabanından sellers/1234 öğesini silmesi gerektiğini bilir.
5. Uzantıyı yükle'yi tıklayın.

Yüklemenin tamamlanmasını beklerken...

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

Bu codelab'de, Firebase Extensions'ın yaygın kullanım alanlarındaki sorunları çö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 bunun iyi bir örneğidir. Kullanıcı hesabını sildikten sonra e-postaların hâlâ gösterilmesiyle ilgili mevcut şikayeti Sil Kullanıcı Verileri uzantısı çözse de bu uzantı her şeyi silmez. Örneğin, öğe listelemesi kullanılmaya devam eder ve Cloud Storage'daki tüm resimler de korunur. Kullanıcı Verilerini Silme uzantısı, silinecek bir Cloud Storage yolu yapılandırmamıza olanak tanır. Ancak kullanıcılar, birçok farklı dosya adıyla çok sayıda farklı dosya yükleyebileceğ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ı için faturalandırma gerekebilir. Bu codelab, faturalandırma hesabı olmadan tamamlanacak şekilde tasarlanmıştır. Ancak Flame veya Blaze planı ayarlamak, birçok ilginç Firebase uzantısının kilidini açar.

Örneğin, URL'leri kısaltabilir, e-posta tetikleyebilir, koleksiyonları BigQuery'ye aktarabilirsiniz. Uzantıların tam kataloğuna buradan göz atabilirsiniz.

Kullanmak istediğiniz ancak şu anda mevcut olmayan bir uzantı varsa lütfen bize bildirin. Yeni bir uzantı önermek için Firebase Destek Ekibi'ne özellik isteği gönderin.

İşleyiş şeklini görün

Uzantınızın yüklenmesi tamamlandıktan sonra bir kullanıcıyı silin ve neler olduğunu görün:

1. Firebase konsolunda Realtime Database gösterge tablonuza gidin.
2. sellers düğümünü genişletin.
3. Her satıcının bilgileri, kullanıcı UID'sine göre anahtarlanır. Bir kullanıcının UID'sini seçin.
4. Firebase konsolunda Authentication kontrol panelinize gidin ve kullanıcı UID'sini bulun.
5. UID'nin sağındaki menüyü genişletin ve Hesabı Sil'i seçin.

6. Realtime Database kontrol panelinize geri dönün. Satıcının bilgileri silinir.

7. Tebrikler!

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

Uzantıları keşfetmeyi, yapılandırmayı, yüklemeyi ve yeniden yapılandırmayı öğrendiniz. Ayrıca, yüklü uzantıları nasıl izleyeceğinizi ve gerekirse nasıl kaldıracağınızı öğrendiniz.

Sırada ne var?

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

• Cloud Firestore'daki metin dizelerini çevirme (Faturalandırma hesabı gereklidir)
• Mailchimp e-posta listelerine yeni kullanıcı ekleme (faturalandırma hesabı gerekir)
• URL'leri kısaltma (faturalandırma hesabı gerekir)

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

• Cloud Functions for Firebase codelab'ine göz atın

Diğer faydalı dokümanlar

Uzantıları yönetme:

• Uzantıları Firebase CLI ile yönetmeyi deneyin
• Bütçe uyarıları ayarlama
• Yüklü bir uzantının ne sıklıkta çalıştığını kontrol etme
• Yüklü bir uzantıyı yeni bir sürüme güncelleme
• Uzantıların yüklemesini kaldırma

Uzantılarla ilgili daha ayrıntılı bilgi edinme:

• Her uzantının kaynak kodunu ve dokümanlarını GitHub'da görüntüleme
• Bir uzantıya verilen izinler ve erişim hakkında bilgi edinme