AngularFire web codelab'i

1. Genel bakış

Bu codelab'de, Firebase ürün ve hizmetlerini kullanarak sohbet istemcisi uygulayıp dağıtarak web uygulamaları oluşturmak için AngularFire'ı nasıl kullanacağınızı öğreneceksiniz.

Kullanıcıların Firebase hakkında konuştuğu bir sohbet uygulaması

Neler öğreneceksiniz?

  • Angular ve Firebase kullanarak bir web uygulaması oluşturun.
  • Cloud Firestore ve Cloud Storage for Firebase kullanarak verileri senkronize edin.
  • Firebase Authentication kullanarak kullanıcılarınızın kimliklerini doğrulayın.
  • Web uygulamanızı Firebase App Hosting'de dağıtın.
  • Firebase Cloud Messaging ile bildirim gönderin.
  • Web uygulamanızın performans verilerini toplayın.

Gerekenler

  • GitHub hesabı
  • Firebase projenizi Blaze fiyatlandırma planına yükseltme olanağı
  • WebStorm, Sublime veya VS Code gibi istediğiniz bir IDE/metin düzenleyici
  • Genellikle Node.js ile gelen paket yöneticisi npm
  • Terminal/konsol
  • Chrome gibi istediğiniz bir tarayıcı
  • Codelab'in örnek kodu (Kodu nasıl alacağınızı öğrenmek için codelab'in bir sonraki adımına bakın.)

2. Örnek kodu alın

GitHub deposu oluşturma

Codelab kaynağını https://github.com/firebase/codelab-friendlychat-web adresinde bulabilirsiniz. Depo, birden fazla platform için örnek projeler içerir. Ancak bu codelab yalnızca angularfire-start dizinini kullanır.

angularfire-start klasörünü kendi deponuza kopyalayın:

  1. Bir terminal kullanarak bilgisayarınızda yeni bir klasör oluşturun ve yeni dizine geçin:
    mkdir codelab-friendlyeats-web

cd codelab-friendlyeats-web
  2. Yalnızca angularfire-start klasörünü getirmek için giget npm paketini kullanın:
    npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
  3. Değişiklikleri git:
    git init

git add .

git commit -m "codelab starting point"

git branch -M main
    ile yerel olarak izleyin
  4. Yeni bir GitHub deposu oluşturun: https://github.com/new. İstediğiniz adı verin.
    1. GitHub, https://github.com/[user-name]/[repository-name].git veya git@github.com:[user-name]/[repository-name].git gibi görünen yeni bir kod deposu URL'si sağlayacak. Bu URL'yi kopyalayın.
  5. Yerel değişiklikleri yeni GitHub deponuza aktarın. Kod deposu URL'nizi your-repository-url yer tutucusuyla değiştirerek aşağıdaki komutu çalıştırın.
    git remote add origin your-repository-url

git push -u origin main
  6. GitHub deponuzda başlangıç kodunu artık görüyor olmalısınız.

3. Firebase projesi oluşturma ve ayarlama

Firebase projesi oluşturma

  1. Firebase konsolunda oturum açın.
  2. Firebase konsolunda Proje Ekle'yi tıklayın ve ardından Firebase projenizi FriendlyChat olarak adlandırın. Firebase projenizin proje kimliğini unutmayın.
  3. Bu proje için Google Analytics'i etkinleştir seçeneğinin işaretini kaldırın.
  4. Proje Oluştur'u tıklayın.

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

  • Kullanıcılarınızın uygulamanızda oturum açmasını kolayca sağlamak için Firebase Authentication.
  • Yapılandırılmış verileri buluta kaydetmek ve veriler değiştiğinde anında bildirim almak için Cloud Firestore.
  • Cloud Storage for Firebase ile dosyaları buluta kaydedin.
  • Uygulamayı oluşturmak, barındırmak ve sunmak için Firebase App Hosting.
  • Push bildirimleri göndermek ve tarayıcı pop-up bildirimlerini görüntülemek için Firebase Cloud Messaging.
  • Uygulamanız için kullanıcı performansı verilerini toplamak üzere Firebase Performance Monitoring.

Bu ürünlerden bazıları özel yapılandırma gerektirir veya Firebase konsolu kullanılarak etkinleştirilmesi gerekir.

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

Uygulama Barındırma'yı kullanmak için Firebase projenizin Blaze fiyatlandırma planı kapsamında olması, yani Cloud Faturalandırma Hesabı ile ilişkilendirilmiş olması gerekir.

  • Cloud Faturalandırma hesabı için kredi kartı gibi bir ödeme yöntemi gerekir.
  • Firebase ve Google Cloud'da yeniyseniz 300 ABD doları kredi ve Ücretsiz Deneme Cloud Faturalandırma Hesabı için uygun olup olmadığınızı kontrol edin.

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

  1. Firebase konsolunda planınızı yükseltmeyi seçin.
  2. İletişim kutusunda Blaze planını seçin, ardından ekrandaki talimatları uygulayarak projenizi bir Cloud Faturalandırma Hesabı ile ilişkilendirin.
    Cloud Faturalandırma Hesabı oluşturmanız gerekiyorsa yükseltme işlemini tamamlamak için Firebase konsolundaki yükseltme akışına geri dönmeniz gerekebilir.

Projeye bir Firebase web uygulaması ekleyin

  1. Yeni bir Firebase web uygulaması oluşturmak için web simgesini 58d6543a156e56f9.png tıklayın.
  2. Uygulamayı Dostu Sohbet takma adıyla kaydedin. Bu uygulama için Firebase Hosting'i de ayarla seçeneğinin yanındaki kutuyu işaretlemeyin. Uygulamayı kaydet'i tıklayın.
  3. Sonraki adımda, bir yapılandırma nesnesi göreceksiniz. Şu anda ihtiyacınız yok. Konsola git'i tıklayın.

Web uygulaması ekran görüntüsünü kaydet

Kimlik doğrulamayı ayarla

Kullanıcıların web uygulamasında Google hesaplarıyla oturum açmasına izin vermek için Google oturum açma yöntemini kullanırsınız.

  1. Firebase konsolunda Kimlik Doğrulama'ya gidin.
  2. Başlayın'ı tıklayın.
  3. Ek sağlayıcılar sütununda Google > Etkinleştir'i tıklayın.
  4. Proje için herkese açık ad metin kutusuna My Next.js app gibi akılda kalıcı bir ad girin.
  5. Proje için destek e-posta adresi açılır menüsünden e-posta adresinizi seçin.
  6. Kaydet'i tıklayın.

Cloud Firestore'u etkinleştir

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

Cloud Firestore'u etkinleştirmeniz gerekir:

  1. Firebase konsolunda Firestore'a gidin.
  2. Veritabanı oluştur > İleri > Test modunda başlat > İleri'yi tıklayın.
    Bu codelab'in ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Veritabanınız için Güvenlik Kuralları eklemeden bir uygulamayı herkese açık olarak kullanıma dağıtmayın.
  3. Varsayılan konumu kullanın veya tercih ettiğiniz bir konumu seçin.
    Gerçek bir uygulama için kullanıcılarınıza yakın bir konum seçmeniz gerekir. Bu konumun daha sonra değiştirilemeyeceğini ve otomatik olarak varsayılan Cloud Storage paketinizin konumu olacağını unutmayın (sonraki adım).
  4. Done'ı (Bitti) tıklayın.

Cloud Storage'ı etkinleştirme

Web uygulaması resim depolamak, yüklemek ve paylaşmak için Cloud Storage for Firebase'i kullanır.

Cloud Storage'ı etkinleştirmeniz gerekir:

  1. Firebase konsolunda Depolama alanı'na gidin.
  2. Başlayın > Test modunda başlat > İleri'yi tıklayın.
    Bu codelab'in ilerleyen bölümlerinde verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Depolama paketiniz için Güvenlik Kuralları eklemeden bir uygulamayı herkese açık olarak kullanıma dağıtmayın.
  3. Paketinizin konumu önceden seçilmiş olmalıdır (önceki adımda Firestore kurulduğundan).
  4. Done'ı (Bitti) tıklayın.

4. Firebase komut satırı arayüzünü yükleme

Firebase komut satırı arayüzü (CLI), web uygulamanızı yerel olarak sunmak ve web uygulamanızı Firebase projenize dağıtmak için Firebase Hosting'i kullanmanıza olanak tanır.

  1. Aşağıdaki npm komutunu çalıştırarak CLI'yı yükleyin:
npm -g install firebase-tools@latest
  1. Aşağıdaki komutu çalıştırarak CLI'nın doğru şekilde yüklendiğini doğrulayın:
firebase --version

Firebase CLI sürümünün v13.9.0 veya üzeri olduğundan emin olun.

  1. Şu komutu çalıştırarak Firebase CLI'yi yetkilendirin:
firebase login

Uygulamanızın Firebase Hosting yapılandırmasını uygulamanızın yerel dizininden (daha önce codelab'de klonladığınız depo) almak için web uygulaması şablonunu ayarladınız. Ancak yapılandırmayı almak için uygulamanızı Firebase projenizle ilişkilendirmeniz gerekir.

  1. Komut satırınızın uygulamanızın yerel angularfire-start dizinine eriştiğinden emin olun.
  2. Aşağıdaki komutu çalıştırarak uygulamanızı Firebase projenizle ilişkilendirin:
firebase use --add
  1. İstendiğinde Proje Kimliğinizi seçin, ardından Firebase projenize bir takma ad verin.

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

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

5. AngularFire'ı yükleme

Projeyi çalıştırmadan önce Angular KSA ve AngularFire'ı ayarladığınızdan emin olun.

  1. Konsolda aşağıdaki komutu çalıştırın:
npm install -g @angular/cli
  1. Ardından, angularfire-start dizinindeki bir konsolda aşağıdaki Angular CLI komutunu çalıştırın:
ng add @angular/fire

Bu işlem, projeniz için gerekli tüm bağımlılıkları yükler.

  1. İstendiğinde boşluk çubuğuyla ng deploy -- hosting işaretini kaldırın. Ok tuşları ve boşluk çubuğuyla aşağıdaki özellikleri seçin:
    • Authentication
    • Firestore
    • Cloud Messaging
    • Cloud Storage
  2. enter tuşuna basın ve geri kalan istemleri uygulayın.
  3. "Install AngularFire" kayıt mesajıyla bir kayıt oluşturup GitHub deponuza aktarın.

6. Uygulama Barındırma arka ucu oluşturma

Bu bölümde, Git deponuzdaki bir dalı izlemek için Uygulama Barındırma arka ucu ayarlayacaksınız.

Bu bölümün sonunda, main şubenize yeni bir kayıt aktardığınızda uygulamanızın yeni bir sürümünü otomatik olarak yeniden derleyip kullanıma sunacak olan bir App Hosting arka ucu, GitHub'daki kod deponuza bağlanmış olacak.

  1. Firebase konsolunda Uygulama Barındırma sayfasına gidin:

App Hosting konsolunun sıfır durumu ve bir "Başlayın" düğmesi

  1. Arka uç oluşturma akışını başlatmak için "Başlayın"ı tıklayın. Arka ucunuzu aşağıdaki gibi yapılandırın:
  2. Daha önce oluşturduğunuz GitHub deposunu bağlamak için ilk adımdaki talimatları uygulayın.
  3. Dağıtım ayarlarını yapın:
    1. Kök dizin / olarak kalsın
    2. Canlı dalı main olarak ayarlayın
    3. Otomatik kullanıma sunmaları etkinleştir
  4. Arka ucunuza friendlychat-codelab ad verin.
  5. "Firebase web uygulaması oluşturun veya ilişkilendirin" bölümünde, "Mevcut bir Firebase web uygulamasını seçin" açılır menüsünden daha önce yapılandırdığınız web uygulamasını seçin.
  6. "Bitir ve dağıt"ı tıklayın. Kısa bir süre sonra, yeni App Hosting arka ucunuzun durumunu görebileceğiniz yeni bir sayfaya yönlendirileceksiniz!
  7. Kullanıma sunma işleminiz tamamlandıktan sonra "domains" (alanlar) bölümünde ücretsiz alanınızı tıklayın. DNS yayılımı nedeniyle bunun çalışmaya başlaması birkaç dakika sürebilir.

İlk web uygulamasını dağıttınız. GitHub deponuzun main dalına her yeni kayıt gönderdiğinizde, Firebase konsolunda yeni bir derleme ve kullanıma sunma işleminin başladığını görürsünüz. Kullanıma sunma işlemi tamamlandığında siteniz otomatik olarak güncellenir.

App Hosting konsolunun sıfır durumu ve bir "Başlayın" düğmesi

FriendlyChat uygulamanızın (henüz) çalışmayan oturum açma ekranını görüyor olmalısınız.

Uygulama şu anda hiçbir şey yapamıyor, ancak sizin yardımınızla yakında bunu yapacak!

Şimdi bir gerçek zamanlı sohbet uygulaması geliştirelim.

7. Firebase'i içe aktarma ve yapılandırma

Firebase'i yapılandırma

Hangi Firebase projesini kullandığınızı belirtmek için Firebase SDK'sını yapılandırmanız gerekir.

  1. Firebase konsolunda Proje ayarları'na gidin.
  2. "Uygulamalarınız" kartında, yapılandırma nesnesine ihtiyaç duyduğunuz uygulamanın takma adını seçin.
  3. Firebase SDK snippet'i bölmesinden "Yapılandırma"yı seçin.

Sizin için bir ortam dosyasının (/angularfire-start/src/environments/environment.ts) oluşturulduğunu göreceksiniz.

  1. Yapılandırma nesnesi snippet'ini kopyalayıp angularfire-start/src/firebase-config.js öğesine ekleyin.

environment.ts

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

AngularFire kurulumunu göster

Konsolda seçtiğiniz özelliklerin /angularfire-start/src/app/app.config.ts dosyasına otomatik olarak eklendiğini göreceksiniz. Bu sayede uygulamanız, Firebase özelliklerini ve işlevlerini kullanabilir.

8. Kullanıcı oturum açma ayarlarını yapın

app.config.ts içinde içe aktarılıp başlatıldığı için AngularFire artık kullanıma hazır olmalıdır. Şimdi Firebase Authentication kullanarak kullanıcı oturum açma işlemini uygulayacaksınız.

Yetkilendirilen alan ekleyin

Firebase Authentication yalnızca kontrol ettiğiniz alanları içeren belirlenmiş bir listeden oturum açmaya izin verir. Ücretsiz App Hosting alanınızı, alan listesine ekleyin:

  1. App Hosting'e (Uygulama Barındırma) gidin.
  2. Arka ucunuzun alanını işleyin.
  3. Authentication settings (Kimlik doğrulama ayarları) sayfasına gidin.
  4. Yetkilendirilen alanlar sekmesini seçin.
  5. Add domain'i (Alan ekle) tıklayın ve App Hosting arka ucunuzun alanını yapıştırın.

Google ile Oturum Açma ile kullanıcılarınızın kimliğini doğrulama

Uygulamada, kullanıcı Google ile oturum aç düğmesini tıkladığında login işlevi tetiklenir. Bu codelab için Google'ı kimlik sağlayıcı olarak kullanmak üzere Firebase'e yetki vermek istiyorsunuz. Bir pop-up kullanırsınız, ancak Firebase'den birçok başka yöntem de kullanabilirsiniz.

  1. /src/app/services/ alt dizininde chat.service.ts sayfasını açın.
  2. login fonksiyonunu bulun.
  3. İşlevin tamamını aşağıdaki kodla değiştirin.

chat.service.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

logout işlevi, kullanıcı Çıkış yap düğmesini tıkladığında tetiklenir.

  1. src/app/services/chat.service.ts dosyasına geri dönün.
  2. logout fonksiyonunu bulun.
  3. İşlevin tamamını aşağıdaki kodla değiştirin.

chat.service.ts

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

Kimlik doğrulama durumunu izleme

Kullanıcı arayüzümüzü uygun şekilde güncellemek için kullanıcının giriş yapıp yapmadığını veya çıkış yapıp yapmadığını kontrol etmenin bir yolunu bulmanız gerekir. AngularFire, kimlik doğrulama durumu her değiştiğinde güncellenen bir gözlemlenebilir öğe elde etmek için bir işlev sağlar. Bu uygulama zaten uygulansa da göz atmak yararlı olabilir.

  1. src/app/services/chat.service.ts dosyasına geri dönün.
  2. user$ değişken atamasını bulun.

chat.service.ts

// observable that is updated when the auth state changes
user$ = user(this.auth);

Yukarıdaki kod, gözlemlenebilir bir kullanıcı döndüren AngularFire işlevini user çağırır. Etkinlik, kimlik doğrulama durumu her değiştiğinde (kullanıcı oturum açtığında veya oturumunu kapattığında) tetiklenir. FriendlyChat'teki Angular şablon bileşenleri, kullanıcı arayüzünü yönlendirmek, kullanıcıyı başlık gezinme panelinde görüntülemek ve benzeri işlemler için bu gözlemlenebilir öğeyi kullanır.

Uygulamaya giriş yapmayı test etme

  1. "Insert Google Authentication" (Google Kimlik Doğrulaması Ekleme) kayıt mesajını içeren bir kayıt oluşturun ve bu kaydı GitHub deponuza aktarın.
  2. Firebase konsolunda App Hosting (Uygulama Barındırma) sayfasını açın ve yeni kullanıma sunma sürecinizin tamamlanmasını bekleyin.
  3. Web uygulamasında, sayfayı yenileyin ve oturum açma düğmesini ve Google hesabınızı kullanarak uygulamaya giriş yapın. auth/operation-not-allowed ifadesini içeren bir hata mesajı görürseniz Firebase konsolunda kimlik doğrulama sağlayıcı olarak Google ile Oturum Açma'yı etkinleştirdiğinizden emin olun.
  4. Giriş yaptıktan sonra profil resminiz ve kullanıcı adınız görüntülenecektir: anglefire-3.png

9. Cloud Firestore'a mesaj yazma

Bu bölümde, uygulamanın kullanıcı arayüzünü doldurmak için Cloud Firestore'a bazı veriler yazacaksınız. Bu işlem Firebase konsolu ile manuel olarak yapılabilir. Ancak temel bir Cloud Firestore yazma işlemini göstermek için uygulamanın içinden kendiniz yapacaksınız.

Veri modeli

Cloud Firestore verileri koleksiyonlara, belgelere, alanlara ve alt koleksiyonlara ayrılır. Sohbetteki her mesajı messages adlı üst düzey bir koleksiyonda doküman olarak depolarsınız.

688d7bc5fb662b57.png

Cloud Firestore'a mesaj ekleme

Kullanıcılar tarafından yazılan sohbet mesajlarını depolamak için Cloud Firestore'u kullanacaksınız.

Bu bölümde, kullanıcıların veritabanınıza yeni iletiler yazma işlevi ekleyeceksiniz. GÖNDER düğmesini tıklayan bir kullanıcı, aşağıdaki kod snippet'ini tetikler. messages koleksiyonundaki Cloud Firestore örneğinize mesaj alanlarının içeriğini içeren bir mesaj nesnesi ekler. add() yöntemi, koleksiyona otomatik olarak oluşturulmuş bir kimliğe sahip yeni doküman ekler.

  1. src/app/services/chat.service.ts dosyasına geri dönün.
  2. addMessage fonksiyonunu bulun.
  3. İşlevin tamamını aşağıdaki kodla değiştirin.

chat.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async (
  textMessage: string | null,
  imageUrl: string | null,
): Promise<void | DocumentReference<DocumentData>> => {
  // ignore empty messages
  if (!textMessage && !imageUrl) {
    console.log(
      "addMessage was called without a message",
      textMessage,
      imageUrl,
    );
    return;
  }

  if (this.currentUser === null) {
    console.log("addMessage requires a signed-in user");
    return;
  }

  const message: ChatMessage = {
    name: this.currentUser.displayName,
    profilePicUrl: this.currentUser.photoURL,
    timestamp: serverTimestamp(),
    uid: this.currentUser?.uid,
  };

  textMessage && (message.text = textMessage);
  imageUrl && (message.imageUrl = imageUrl);

  try {
    const newMessageRef = await addDoc(
      collection(this.firestore, "messages"),
      message,
    );
    return newMessageRef;
  } catch (error) {
    console.error("Error writing new message to Firebase Database", error);
    return;
  }
};

Mesaj göndermeyi test etme

  1. "Firestore'da yeni sohbetler yayınlayın" kayıt mesajıyla bir kayıt oluşturun ve bu kaydı GitHub deponuza aktarın.
  2. Firebase konsolunda App Hosting (Uygulama Barındırma) sayfasını açın ve yeni kullanıma sunma sürecinizin tamamlanmasını bekleyin.
  3. FriendlyChat sayfasını yenileyin. Giriş yaptıktan sonra "Merhaba!" gibi bir mesaj girin ve GÖNDER'i tıklayın. Bu işlem, mesajı Cloud Firestore'a yazar. Ancak, verileri almayı uygulamanız gerektiğinden (codelab'in bir sonraki bölümü) verileri henüz gerçek web uygulamanızda görmezsiniz.
  4. Yeni eklenen mesajı Firebase Konsolunuzda görebilirsiniz. Emulator Suite kullanıcı arayüzünüzü açın. Build (Derleme) bölümünde Firestore Database (Firestore Veritabanı) seçeneğini tıklayın (veya burayı tıkladığınızda yeni eklenen mesajınızı içeren messages koleksiyonunu görürsünüz:

6812efe7da395692.png

10. Mesajları oku

İletileri senkronize etme

Uygulamada mesajları okumak için veriler değiştiğinde tetiklenecek bir gözlemlenebilir öğe eklemeniz ve ardından yeni mesajları gösteren bir kullanıcı arayüzü öğesi oluşturmanız gerekir.

Uygulamadan yeni eklenen mesajları dinleyen bir kod ekleyeceksiniz. Bu kodla messages koleksiyonunun anlık görüntüsünü alacaksınız. Yükleme sırasında çok uzun bir geçmişin görüntülenmesini önlemek için sohbetin yalnızca son 12 mesajını görüntüleyeceksiniz.

  1. src/app/services/chat.service.ts dosyasına geri dönün.
  2. loadMessages fonksiyonunu bulun.
  3. İşlevin tamamını aşağıdaki kodla değiştirin.

chat.service.ts

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

Veritabanındaki mesajları dinlemek için, dinlemek istediğiniz verilerin bulunduğu koleksiyonu belirtmek üzere collection işlevini kullanarak bir koleksiyonda sorgu oluşturursunuz. Yukarıdaki kodda, sohbet mesajlarının depolandığı messages koleksiyonundaki değişiklikleri dinliyorsunuz. Ayrıca, limit(12) ile yalnızca son 12 iletiyi dinleyerek ve en yeni 12 iletiyi almak için orderBy('timestamp', 'desc') kullanarak iletileri tarihe göre sıralayarak da sınır uyguluyorsunuz.

collectionData işlevi, arka planda anlık görüntüler kullanır. Sorguyla eşleşen dokümanlarda herhangi bir değişiklik olduğunda geri çağırma işlevi tetiklenir. Bu durum, bir iletinin silinmesi, değiştirilmesi veya eklenmesi olabilir. Bu konu hakkında daha fazla bilgiyi Cloud Firestore belgelerinde bulabilirsiniz.

Mesaj senkronizasyonunu test edin

  1. "Yeni sohbetleri kullanıcı arayüzünde göster" kayıt mesajı içeren bir kayıt oluşturun ve bu kaydı GitHub deponuza aktarın.
  2. Firebase konsolunda App Hosting (Uygulama Barındırma) sayfasını açın ve yeni kullanıma sunma sürecinizin tamamlanmasını bekleyin.
  3. FriendlyChat sayfasını yenileyin. Veritabanında daha önce oluşturduğunuz mesajlar FriendlyChat kullanıcı arayüzünde gösterilmelidir (aşağıya bakın). Yeni mesajlar yazmaktan çekinmeyin; mesajlar anında görünür.
  4. (İsteğe bağlı) Doğrudan Emülatör paketinin Firestore bölümünde yeni mesajları manuel olarak silmeyi, değiştirmeyi veya eklemeyi deneyebilirsiniz. Tüm değişiklikler kullanıcı arayüzüne yansıtılmalıdır.

Tebrikler! Uygulamanızda Cloud Firestore belgelerini okuyorsunuz.

anglefire-2.png

11. Yapay zeka özellikleri ekleyin

Sohbet uygulamasına yararlı yardımcı özellikler eklemek için Google Yapay Zeka'yı kullanırsınız.

Google AI API anahtarı alma

  1. Google AI Studio'ya gidin ve API anahtarı oluştur'u tıklayın.
  2. Bu codelab için oluşturduğunuz Firebase projesini seçin. İstem bir Google Cloud projesi olsa da her Firebase projesi bir Google Cloud projesidir.
  3. Mevcut projede API anahtarı oluştur'u tıklayın
  4. Oluşturulan API anahtarını kopyalayın

Uzantı yükleme

Bu uzantı, Firestore'daki messages koleksiyonuna her yeni belge eklendiğinde tetiklenen bir Cloud Functions işlevi dağıtır. İşlev Gemini'ı çağırır ve yanıtını dokümandaki response alanına yazar.

  1. Gemini API ile Chatbot Oluşturma sayfasında Firebase konsoluna yükle'yi tıklayın.
  2. Talimatları uygulayın. Uzantıyı yapılandırın adımına geldiğinizde, aşağıdaki parametre değerlerini ayarlayın:
    • Gemini API Sağlayıcısı: Google AI
    • Google AI API Anahtarı: Daha önce oluşturduğunuz anahtarı yapıştırın ve Gizli anahtar oluştur'u tıklayın.
    • Firestore koleksiyon yolu: messages
    • İstem alanı: text
    • Yanıt alanı: response
    • Sipariş alanı: timestamp
    • Bağlam: Keep your answers short, informal, and helpful. Use emojis when possible.
  3. Uzantıyı yükle'yi tıklayın
  4. Uzantının yüklemeyi tamamlamasını bekleyin

Test yapay zeka özelliği

FriendlyChat, yapay zeka uzantısından gelen yanıtları okuyacak koda zaten sahip. Özelliği denemek için yeni bir sohbet mesajı göndermeniz yeterli.

  1. FriendlyChat'i açıp mesaj gönderin.
  2. Kısa bir süre sonra, iletinizin yanında bir yanıt pop-up penceresi görürsünüz. Videonun sonunda, gerçek bir kullanıcı yerine üretken yapay zeka ile oluşturulduğunu belirten ✨ ai generated notu bulunur.

12. Resim gönderin

Şimdi de resim paylaşan bir özellik ekleyeceksiniz.

Cloud Firestore, yapılandırılmış verileri depolamak için iyiyken Cloud Storage, dosya depolamak için daha uygundur. Cloud Storage for Firebase bir dosya/blob depolama hizmetidir ve kullanıcıların uygulamamızı kullanarak paylaştığı tüm resimleri depolamak için kullanılır.

Görüntüleri Cloud Storage'a kaydetme

Bu codelab'de sizin için dosya seçici iletişim kutusunu tetikleyen bir düğme eklediniz. Bir dosya seçtikten sonra saveImageMessage işlevi çağrılır ve seçilen dosyaya yönelik bir başvuru alabilirsiniz. saveImageMessage işlevi şunları gerçekleştirir:

  1. Sohbet akışında bir "yer tutucu" sohbet mesajı oluşturur. Böylece kullanıcılar, siz resmi yüklerken "Yükleniyor" animasyonu görür.
  2. Resim dosyasını Cloud Storage'a şu yola yükler: /<uid>/<file_name>
  3. Resim dosyası için herkes tarafından okunabilir bir URL oluşturur.
  4. Sohbet mesajını, geçici yükleme resmi yerine yeni yüklenen resim dosyasının URL'si ile günceller.

Şimdi resim gönderme işlevini ekleyeceksiniz:

  1. src/chat.service.ts dosyasına geri dönün.
  2. saveImageMessage fonksiyonunu bulun.
  3. İşlevin tamamını aşağıdaki kodla değiştirin.

chat.service.ts

// Saves a new message containing an image in Firestore.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - Add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);

    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    messageRef ?
    await updateDoc(messageRef, {
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Görüntü göndermeyi test etme

  1. "Add the property to post Image"" kayıt mesajıyla bir kayıt oluşturun ve bunu GitHub deponuza aktarın.
  2. Firebase konsolunda App Hosting (Uygulama Barındırma) sayfasını açın ve yeni kullanıma sunma sürecinizin tamamlanmasını bekleyin.
  3. FriendlyChat sayfasını yenileyin. Giriş yaptıktan sonra sol alttaki resim yükleme düğmesini anglefire-4.png tıklayın ve dosya seçiciyi kullanarak bir resim dosyası seçin. Resim arıyorsanız bu güzel kahve fincanı resmini kullanabilirsiniz.
  4. Uygulamanın kullanıcı arayüzünde, seçtiğiniz görüntüyle birlikte yeni bir mesaj görünecektir: anglefire-2.png

Oturum açmadan resim eklemeyi denerseniz resim eklemek için oturum açmanız gerektiğini belirten bir hata alırsınız.

13. Bildirimleri göster

Şimdi tarayıcı bildirimleri için destek ekleyeceksiniz. Uygulama, sohbette yeni mesaj yayınlandığında kullanıcılara bildirim gönderir. Firebase Cloud Messaging (FCM), ücretsiz olarak mesajları ve bildirimleri güvenilir bir şekilde iletmenizi sağlayan, platformlar arası bir mesajlaşma çözümüdür.

FCM hizmet çalışanı ekleme

Web uygulaması için web bildirimlerini alıp görüntüleyecek bir hizmet çalışanı olmalıdır.

AngularFire eklendiğinde mesajlaşma sağlayıcısının önceden ayarlanmış olması gerekir. /angularfire-start/src/app/app.module.ts öğesinin içe aktarma bölümünde aşağıdaki kodun bulunduğundan emin olun

provideMessaging(() => {
    return getMessaging();
}),

app/app.module.ts

Service Worker'ın Firebase Cloud Messaging SDK'sını yükleyip başlatması yeterlidir. Bu SDK, bildirimleri görüntüler.

FCM cihaz jetonları alma

Bir cihaz veya tarayıcıda bildirimler etkinleştirildiğinde size bir cihaz jetonu verilir. Bu cihaz jetonu, belirli bir cihaza veya belirli bir tarayıcıya bildirim göndermek için kullandığınız jetondur.

Kullanıcı oturum açtığında saveMessagingDeviceToken işlevini çağırırsınız. Bu aşamada tarayıcıdan FCM cihaz jetonunu alır ve Cloud Firestore'a kaydedersiniz.

chat.service.ts

  1. saveMessagingDeviceToken fonksiyonunu bulun.
  2. İşlevin tamamını aşağıdaki kodla değiştirin.

chat.service.ts

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });
 
        // This will fire when a message is received while the app is in the foreground.
        // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
        onMessage(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

Ancak bu kod başlangıçta çalışmaz. Uygulamanızın cihaz jetonunu alabilmesi için kullanıcının uygulamanıza bildirim gösterme izni vermesi gerekir (codelab'in bir sonraki adımı).

Bildirimleri göstermek için izin isteme

Kullanıcı henüz uygulamanıza bildirim gösterme izni vermediyse size cihaz jetonu verilmez. Bu durumda, requestPermission() yöntemini çağırırsınız. Bu yöntemde, bu izni isteyen bir tarayıcı iletişim kutusu görüntülenir ( desteklenen tarayıcılarda).

8b9d0c66dc36153d.png

  1. src/app/services/chat.service.ts dosyasına geri dönün.
  2. requestNotificationsPermissions fonksiyonunu bulun.
  3. İşlevin tamamını aşağıdaki kodla değiştirin.

chat.service.ts

// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
    console.log('Requesting notifications permission...');
    const permission = await Notification.requestPermission();
    
    if (permission === 'granted') {
      console.log('Notification permission granted.');
      // Notification permission granted.
      await this.saveMessagingDeviceToken();
    } else {
      console.log('Unable to get permission to notify.');
    }
}

Cihaz jetonunuzu alma

  1. "Add the property to post Image"" kayıt mesajıyla bir kayıt oluşturun ve bunu GitHub deponuza aktarın.
  2. Firebase konsolunda App Hosting (Uygulama Barındırma) sayfasını açın ve yeni kullanıma sunma sürecinizin tamamlanmasını bekleyin.
  3. FriendlyChat sayfasını yenileyin. Giriş yaptıktan sonra bildirim izni iletişim kutusu görüntülenir: bd3454e6dbfb6723.png
  4. İzin ver'i tıklayın.
  5. Tarayıcınızın JavaScript konsolunu açın. Şu mesajı görmeniz gerekir: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  6. Cihaz jetonunuzu kopyalayın. Bu koda, codelab'in bir sonraki aşamasında ihtiyacınız olacaktır.

Cihazınıza bildirim gönderme

Artık cihaz jetonunuz olduğuna göre bildirim gönderebilirsiniz.

  1. Firebase konsolunun Cloud Messaging sekmesini açın.
  2. "Yeni Bildirim"i tıklayın.
  3. Bir bildirim başlığı ve bildirim metni girin.
  4. Ekranın sağ tarafında "test mesajı gönder"i tıklayın.
  5. Tarayıcınızın JavaScript konsolundan kopyaladığınız cihaz jetonunu girin ve ardından artı ("+") işaretini
  6. "Test et"i tıklayın

Uygulamanız ön plandaysa bu bildirimi JavaScript konsolunda görürsünüz.

Uygulamanız arka planda çalışıyorsa tarayıcınızda aşağıdaki örnekte olduğu gibi bir bildirim görünecektir:

de79e8638a45864c.png

14. Cloud Firestore güvenlik kuralları

Veritabanı güvenlik kurallarını görüntüle

Cloud Firestore; erişim haklarını, güvenliği ve veri doğrulamalarını tanımlamak için belirli bir kural dili kullanır.

Bu codelab'in başında Firebase projesini ayarlarken veri deposuna erişimi kısıtlamamak için"Test modu" varsayılan güvenlik kurallarını kullanmayı seçtiniz. Firebase konsolundaki Veritabanı bölümünde Kurallar sekmesinde bu kuralları görüntüleyebilir ve değiştirebilirsiniz.

Şu anda, veri deposuna erişimi kısıtlamayan varsayılan kuralları görüyor olmalısınız. Bu, tüm kullanıcıların veri deponuzdaki koleksiyonları okuyabileceği ve bunlara yazabileceği anlamına gelir.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Aşağıdaki kuralları kullanarak kuralları, öğeleri kısıtlayacak şekilde güncellersiniz:

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

Güvenlik kuralları Emulator Suite'te otomatik olarak güncellenir.

Cloud Storage güvenlik kurallarını görüntüleme

Cloud Storage for Firebase; erişim haklarını, güvenliği ve veri doğrulamalarını tanımlamak için belirli bir kural dili kullanır.

Bu codelab'in başında Firebase projesini ayarlarken, yalnızca kimliği doğrulanmış kullanıcıların Cloud Storage'ı kullanmasına izin veren varsayılan Cloud Storage güvenlik kuralını kullanmayı seçtiniz. Firebase konsolundaki Depolama alanı bölümünde Kurallar sekmesinde kuralları görüntüleyebilir ve değiştirebilirsiniz. Oturum açmış tüm kullanıcıların depolama paketinizdeki dosyaları okumasına ve yazmasına izin veren varsayılan kuralı görürsünüz.

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Kuralları, aşağıdakileri yapacak şekilde güncellersiniz:

  • Her kullanıcının yalnızca kendi klasörlerine yazmasına izin ver
  • Herkesin Cloud Storage'dan okumasına izin ver
  • Yüklediğiniz dosyaların resim olduğundan emin olun
  • Yüklenebilecek resimlerin boyutunu maksimum 5 MB ile sınırlandırın.

Bu, aşağıdaki kurallar kullanılarak uygulanabilir:

storage.rules

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

15. Tebrikler!

Firebase'i kullanarak gerçek zamanlı sohbet web uygulaması oluşturdunuz.

İşledikleriniz

  • Firebase App Hosting
  • Firebase Authentication
  • Cloud Firestore
  • Cloud Storage için Firebase SDK'sı
  • Firebase Cloud Messaging
  • Firebase Performance Monitoring

Sonraki adımlar

Daha fazla bilgi

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

Firebase Uygulama Kontrolü, hizmetlerinizi istenmeyen trafikten korumanıza ve arka ucunuzu kötüye kullanıma karşı korumanıza yardımcı olur. Bu adımda, Uygulama Kontrolü ve reCAPTCHA Enterprise ile kimlik bilgisi doğrulaması ekler ve yetkisiz müşterileri engellersiniz.

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

reCaptcha Enterprise'ı etkinleştirme

  1. Cloud Console'da, Security (Güvenlik) bölümünde reCaptcha Enterprise'ı bulup seçin.
  2. İstendiği şekilde hizmeti etkinleştirin ve Anahtar Oluştur'u tıklayın.
  3. İstendiği şekilde bir görünen ad girin ve platform türü olarak Web sitesi'ni seçin.
  4. Dağıtılan URL'lerinizi Alan listesine ekleyin ve "Onay kutusu sorgulamasını kullan" seçeneğinin işaretli olmadığından emin olun.
  5. Anahtar Oluştur'u tıklayın ve oluşturulan anahtarı saklama için bir yerde saklayın. Bu bilgiye daha sonra bu adımda ihtiyacınız olacaktır.

Uygulama Kontrolü'nü etkinleştirme

  1. Firebase konsolunda, sol panelden Derleme bölümünü bulun.
  2. Uygulama Kontrolü'nü tıklayın, ardından Uygulama Kontrolü'ne gitmek için Oturum açma yöntemi sekmesini tıklayın.
  3. Register'ı (Kaydol) tıklayın ve istendiğinde reCaptcha Enterprise anahtarınızı girin, ardından Save'i (Kaydet) tıklayın.
  4. API Görünümü'nde, Depolama'yı seçin ve Zorunlu kıl'ı tıklayın. Aynı işlemi Cloud Firestore için de yapın.

Uygulama Kontrolü artık zorunlu kılınmalıdır. Uygulamanızı yenileyip sohbet mesajlarını görüntülemeyi veya göndermeyi deneyin. Şu 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 ekleyelim.

environment.ts dosyanıza gidin ve environment nesnesine reCAPTCHAEnterpriseKey öğesini ekleyin.

export const environment = {
  firebase: {
    apiKey: 'API_KEY',
    authDomain: 'PROJECT_ID.firebaseapp.com',
    databaseURL: 'https://PROJECT_ID.firebaseio.com',
    projectId: 'PROJECT_ID',
    storageBucket: 'PROJECT_ID.appspot.com',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

key değerini reCaptcha Enterprise jetonunuzla değiştirin.

Ardından, app.module.ts dosyasına gidin ve aşağıdaki içe aktarma işlemlerini ekleyin:

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

Aynı app.module.ts dosyasına aşağıdaki genel değişken bildirimini ekleyin:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

İçe aktarma işlemlerinde, ReCaptchaEnterpriseProvider ile Uygulama Kontrolü'nün başlatılmasını ekleyin ve jetonların otomatik olarak yenilenmesine izin vermek için isTokenAutoRefreshEnabled değerini true olarak ayarlayın.

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

Yerel teste izin vermek için self.FIREBASE_APPCHECK_DEBUG_TOKEN öğesini true olarak ayarlayın. localhost uygulamasında uygulamanızı yenilediğinizde konsolda şuna benzer bir hata ayıklama jetonu kaydedilir:

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Şimdi, Firebase konsolunda Uygulama Kontrolü'nün Uygulama Görünümü'ne gidin.

Taşma 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 konsoldan hata ayıklama jetonunu istendiği şekilde yapıştırın.

chat.service.ts dosyasına gidin ve aşağıdaki içe aktarma işlemini ekleyin:

import { AppCheck } from '@angular/fire/app-check';

Aynı chat.service.ts dosyasına, Uygulama Kontrolü'nü diğer Firebase hizmetleriyle birlikte ekleyin.

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...
  1. "App Check ile yetkisiz istemcileri engelle" kayıt mesajını içeren bir kayıt oluşturun ve bunu GitHub deponuza aktarın.
  2. Firebase konsolunda App Hosting (Uygulama Barındırma) sayfasını açın ve yeni kullanıma sunma sürecinizin tamamlanmasını bekleyin.

Tebrikler! Uygulama Kontrolü'nün şu anda uygulamanızda çalışıyor olması gerekir.