AngularFire web codelab'i

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

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

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

npm -g install firebase-tools@latest

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

firebase --version

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

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

firebase login

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

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

firebase use --add

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

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

7. Komut satırınızda kalan talimatları uygulayın.

5. AngularFire'ı yükleme

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

1. Konsolda aşağıdaki komutu çalıştırın:

npm install -g @angular/cli

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

3. İstendiğinde, boşluk çubuğunu kullanarak ng deploy -- hosting öğesinin işaretini kaldırın. Ok tuşları ve boşluk tuşuyla aşağıdaki özellikleri seçin:
   • Authentication
   • Firestore
   • Cloud Messaging
   • Cloud Storage
4. enter tuşuna basın ve geri kalan istemleri uygulayın.
5. "Install AngularFire" (AngularFire'i yükle) mesajını içeren bir kaydetme işlemi oluşturun ve bu kaydetme işlemini GitHub deponuza gönderin.

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

Bu bölümde, git deponuzdaki bir dalı izlemek için bir App Hosting arka ucu oluşturacaksınız.

Bu bölümün sonunda, GitHub'daki deponuza bağlı bir uygulama barındırma arka ucuna sahip olacaksınız. Bu arka uç, main dalınıza yeni bir gönderim gönderdiğinizde uygulamanızı otomatik olarak yeniden derleyip yeni bir sürümünü kullanıma sunar.

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

2. 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:
3. Daha önce oluşturduğunuz GitHub deposuna bağlanmak için ilk adımdaki talimatları uygulayın.
4. Dağıtım ayarlarını belirleyin:
   1. Kök dizini / olarak kalsın
   2. Canlı dalı main olarak ayarla
   3. Otomatik kullanıma sunma işlemlerini etkinleştirme
5. Arka uçunuzu friendlychat-codelab olarak adlandırın.
6. "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.
7. "Sonlandır ve dağıt"ı tıklayın. Bir süre sonra, yeni uygulama barındırma arka uç sunucunuzun durumunu görebileceğiniz yeni bir sayfaya yönlendirilirsiniz.
8. Kullanıma sunma işleminiz tamamlandıktan sonra "alanlar" bölümünde ücretsiz alan adınızı tıklayın. DNS yayılımı nedeniyle bu işlemin ç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 aktardığınızda, 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.

FriendlyChat uygulamanızın henüz çalışmayan oturum açma ekranını görürsünüz.

Uygulama şu anda hiçbir şey yapamıyor ancak yardımınızla yakında yapabilecek.

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

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

Firebase'i yapılandırma

Firebase SDK'sını, hangi Firebase projesini kullandığınızı belirtecek şekilde yapılandırmanız gerekir.

1. Firebase konsolunda Proje ayarlarınıza gidin
2. "Uygulamalarınız" kartında, yapılandırma nesnesine ihtiyacınız olan uygulamanın takma adını seçin.
3. Firebase SDK'sı snippet bölmesinde "Yapılandırma"yı seçin.

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

4. 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.firebasestorage.app",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

AngularFire kurulumunu görüntüleme

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

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

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

Yetkilendirilen alan ekleyin

Firebase Authentication, yalnızca kontrol ettiğiniz alan adları listesinden oturum açılmasına izin verir. Ücretsiz uygulama barındırma alanınızı alanlar listesine ekleyin:

1. Uygulama Barındırma'ya gidin.
2. Arka ucunuzun alanını kopyalayın.
3. Kimlik doğrulama ayarları'na gidin.
4. Yetkili alanlar sekmesini seçin.
5. Add domain (Alan ekle) seçeneğini 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 kod laboratuvarının amacı, Firebase'i kimlik sağlayıcı olarak Google'ı kullanması için yetkilendirmektir. Bir pop-up kullanırsınız, ancak Firebase'de birkaç farklı yöntem de kullanılabilir.

1. /src/app/services/ alt dizininde chat.service.ts öğesini 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;
    })
}

Kullanıcı Çıkış yap düğmesini tıkladığında logout işlevi 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ünü buna göre güncellemek için kullanıcının oturum açıp açmadığını kontrol etmeniz gerekir. AngularFire, kimlik doğrulama durumu her değiştiğinde güncellenen bir gözlemlenebilir almak için bir işlev sağlar. Bu uygulama zaten uygulandı ancak incelemeye değer.

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şlevi user'ü çağırır. Kimlik doğrulama durumu her değiştiğinde (kullanıcı oturum açtığında veya kapattığında) tetiklenir. FriendlyChat'teki Angular şablon bileşenleri, kullanıcı arayüzünü yönlendirecek, kullanıcıyı başlık gezinme menüsünde gösterecek vb. şekilde güncellemek için bu gözlemlenebiliri kullanır.

Uygulamaya giriş yapmayı test edin

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

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 bunu uygulamanın içinde yapacaksınız.

Veri modeli

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

Cloud Firestore'a mesaj ekleme

Kullanıcılar tarafından yazılan sohbet mesajlarını depolamak için Cloud Firestore kullanılır.

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

1. src/app/services/chat.service.ts dosyasına geri dönün.
2. addMessage işlevini 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'a yeni sohbetler gönder" kaydetme mesajını içeren bir kaydetme işlemi oluşturun ve bunu GitHub deponuza aktarın.
2. Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
3. FriendlyChat uygulamasını yenileyin. Giriş yaptıktan sonra "Merhaba" gibi bir mesaj girip GÖNDER'i tıklayın. Bu işlem, mesajı Cloud Firestore'a yazar. Ancak verileri getirme işlemini (codelab'in sonraki bölümü) uygulamanız gerektiğinden 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. Derleme bölümünde Firestore Veritabanı'nı tıklayın (veya burayı tıklayın. Yeni eklenen mesajınızı içeren mesajlar koleksiyonunu görürsünüz:

10. Mesajları okuma

Mesajları senkronize etme

Uygulamadaki mesajları okumak için veriler değiştiğinde tetiklenecek bir gözlemlenebilir 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 kodda, messages koleksiyonunun anlık görüntüsünü alacaksınız. Yükleme sırasında çok uzun bir geçmişin gösterilmesini önlemek için sohbetin yalnızca son 12 mesajı gösterilir.

1. src/app/services/chat.service.ts dosyasına geri dönün.
2. loadMessages işlevini 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 collection işlevini kullanarak, dinlemek istediğiniz verilerin hangi koleksiyonda olduğunu belirterek koleksiyonda sorgu oluşturursunuz. Yukarıdaki kodda, sohbet mesajlarının depolandığı messages koleksiyonundaki değişiklikleri dinliyorsunuz. Ayrıca, limit(12) tuşunu kullanarak yalnızca son 12 mesajı dinliyor ve orderBy('timestamp', 'desc') tuşunu kullanarak en yeni 12 mesajı tarihe göre sıralayarak bir sınırlama da uyguluyorsunuz.

collectionData işlevi, arka planda anlık görüntüleri kullanır. Geri çağırma işlevi, sorguyla eşleşen belgelerde herhangi bir değişiklik olduğunda tetiklenir. Bunun nedeni bir iletinin silinmesi, değiştirilmesi veya eklenmesi olabilir. Bu konuda daha fazla bilgiye Cloud Firestore belgelerinden ulaşabilirsiniz.

İletileri senkronize etmeyi test etme

1. "Yeni sohbetleri kullanıcı arayüzünde göster" mesajını içeren bir gönderim oluşturun ve GitHub deponuza aktarın.
2. Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
3. FriendlyChat uygulamasını yenileyin. Daha önce veritabanında oluşturduğunuz mesajlar FriendlyChat kullanıcı arayüzünde gösterilir (aşağıya bakın). Yeni mesajlar yazmaktan çekinmeyin. İletiler anında görünür.
4. (İsteğe bağlı) Doğrudan Emülatör paketinin Firestore bölümünde manuel olarak mesajları silmeyi, değiştirmeyi veya yeni mesajlar eklemeyi deneyebilirsiniz. Yaptığınız değişiklikler kullanıcı arayüzüne yansıtılır.

Tebrikler! Uygulamanızda Cloud Firestore belgelerini okuyorsunuz.

11. Yapay zeka özellikleri ekleme

Sohbet uygulamasına faydalı yardımcı özellikler eklemek için Google Yapay Zeka'yı kullanacaksı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 içindir ancak her Firebase projesi bir Google Cloud projesidir.
3. Mevcut projede API anahtarı oluştur'u tıklayın.
4. Oluşturulan API anahtarını kopyala

Uzantı yükleme

Bu uzantı, Firestore'daki messages koleksiyonuna her yeni belge eklendiğinde tetiklenen bir bulut 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 Derleme sayfasında Firebase konsolunda yükle'yi tıklayın.
2. Talimatları uygulayın. Uzantıyı yapılandır 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üklenmesinin tamamlanmasını bekleyin

AI özelliğini test et

FriendlyChat'te, AI uzantısından gelen yanıtları okuyan bir kod zaten mevcuttur. Bunu test etmek için yeni bir sohbet mesajı göndermeniz yeterlidir.

1. FriendlyChat'i açın ve bir mesaj gönderin.
2. Bir süre sonra mesajınızın yanında bir yanıt pop-up penceresi görürsünüz. Sonunda, gerçek bir kullanıcı tarafından değil, üretken yapay zeka ile oluşturulduğunu belirten bir ✨ ai generated notu bulunur.

12. Resim gönderme

Artık resim paylaşan bir özellik ekleyeceğiz.

Cloud Firestore, yapılandırılmış verileri depolamak için ideal olsa da Cloud Storage, dosyaları depolamak için daha uygundur. Firebase için Cloud Storage, bir dosya/blob depolama hizmetidir. Kullanıcıların uygulamamızı kullanarak paylaştığı tüm resimleri depolamak için bu hizmeti kullanırsınız.

Resimleri Cloud Storage'a kaydetme

Bu codelab için dosya seçici iletişim kutusunu tetikleyen bir düğme zaten eklenmiştir. Bir dosya seçildikten sonra saveImageMessage işlevi çağrılır ve seçilen dosyanın referansını alabilirsiniz. saveImageMessage işlevi şunları gerçekleştirir:

1. Sohbet akışında bir "yer tutucu" sohbet mesajı oluşturur. Böylece kullanıcılar resmi yüklerken bir "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 herkese açık olarak okunabilen bir URL oluşturur.
4. Chat mesajını, geçici yükleme resmi yerine yeni yüklenen resim dosyasının URL'siyle 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);
  }
}

Resim göndermeyi test etme

1. "Resim yayınlama özelliğini ekleyin" mesajını içeren bir kaydetme işlemi oluşturun ve GitHub deponuza aktarın.
2. Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
3. FriendlyChat'i yenileyin. Giriş yaptıktan sonra sol alttaki resim yükleme düğmesini tıklayın ve dosya seçiciyi kullanarak bir resim dosyası seçin. Bir resim arıyorsanız kahve fincanının bu güzel resmini kullanabilirsiniz.
4. Uygulamanın kullanıcı arayüzünde, seçtiğiniz resmi içeren yeni bir mesaj gösterilir:

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

13. Bildirimleri göster

Artık tarayıcı bildirimleri için destek ekleyebilirsiniz. Uygulama, sohbette yeni mesaj yayınlandığında kullanıcıları bilgilendirir. Firebase Cloud Messaging (FCM), mesajları ve bildirimleri ücretsiz olarak güvenilir bir şekilde yayınlamanızı sağlayan platformlar arası bir mesajlaşma çözümüdür.

FCM hizmet işçisini ekleme

Web uygulamasının, web bildirimlerini alıp görüntüleyecek bir hizmet çalışanına ihtiyacı vardır.

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

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

app/app.config.ts

Hizmet çalışanının tek yapması gereken, bildirimlerin gösterilmesini sağlayacak Firebase Cloud Messaging SDK'sını yükleyip başlatmaktır.

FCM cihaz jetonları alma

Bir cihazda 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 araçtır.

Kullanıcı oturum açtığında saveMessagingDeviceToken işlevini çağırırsınız. Tarayıcıdan FCM cihaz jetonunu alıp Cloud Firestore'a kaydedeceğiniz yer burasıdır.

chat.service.ts

2. saveMessagingDeviceToken fonksiyonunu bulun.
3. İş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 sonraki adımı).

Bildirimleri göstermek için izin isteme

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

1. src/app/services/chat.service.ts dosyasına geri dönün.
2. requestNotificationsPermissions işlevini 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 image to post images" (Görüntü gönderme yeteneği ekleyin) kayıt mesajıyla bir kayıt oluşturun ve GitHub deponuza gönderin.
2. Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
3. FriendlyChat'i yenileyin. Giriş yaptıktan sonra bildirim izni iletişim kutusu görünecektir:
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. Codelab'in sonraki aşamasında bu kimliğe ihtiyacınız olacak.

Cihazınıza bildirim gönderme

Cihaz jetonunuzu aldıktan sonra bildirim gönderebilirsiniz.

1. Firebase konsolunun Cloud Mesajlar sekmesini açın.
2. "Yeni Bildirim"i tıklayın
3. 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, ardından artı ("+") işaretini tıklayın.
6. "Test et"i tıklayın

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

Uygulamanız arka plandaysa tarayıcınızda aşağıdaki örnekte gösterildiği gibi bir bildirim gösterilir:

14. Cloud Firestore güvenlik kuralları

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

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 oluştururken, veri deposuna erişimi kısıtlamamak için "Test modu" varsayılan güvenlik kurallarını kullanmayı tercih ettiniz. Firebase konsolunda, Veritabanı bölümünün 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ürsünüz. Bu, tüm kullanıcıların veri deponuzdaki koleksiyonları okuyup 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 kısıtlamalar uygulamak için kuralları güncelleyeceksiniz:

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 paketinizde otomatik olarak güncellenir.

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

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

Bu kod laboratuvarının başında Firebase projesini oluştururken, yalnızca kimliği doğrulanmış kullanıcıların Cloud Storage'u kullanmasına izin veren varsayılan Cloud Storage güvenlik kuralını kullanmayı seçtiniz. Firebase konsolunda, Depolama bölümündeki Kurallar sekmesinde kuralları görüntüleyip 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 gerçekleştirecek şekilde güncelleyeceksiniz:

• Her kullanıcının yalnızca kendi klasörlerine yazmalarına izin verin.
• Herkesin Cloud Storage'dan okuma yapmasına izin verme
• Yüklenen dosyaların resim olduğundan emin olun.
• Yüklenebilecek resimlerin boyutunu en fazla 5 MB'a sınırlama

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!

Gerçek zamanlı sohbet web uygulaması oluşturmak için Firebase'i kullandınız.

Kapsamınız

• 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

• firebase.google.com

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

Firebase Uygulama Kontrolü, hizmetlerinizi istenmeyen trafikten ve arka uçlarınızı kötüye kullanımdan korumanıza yardımcı olur. Bu adımda, Uygulama Kontrolü ve reCAPTCHA Enterprise ile kimlik bilgisi doğrulaması ekleyecek, yetkisiz müşterileri engelleyeceksiniz.

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

reCaptcha Enterprise'ı etkinleştirme

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

Uygulama Kontrolü'nü etkinleştirme

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

Uygulama Kontrolü artık uygulanıyor olmalıdır. Uygulamanızı yenileyin ve sohbet mesajlarını görüntülemeyi veya göndermeyi deneyin. Aşağıdaki hata mesajını görürsünüz:

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

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

environment.ts dosyanıza gidin ve reCAPTCHAEnterpriseKey öğesini environment nesnesine 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.firebasestorage.app',
    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.config.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.config.ts dosyasına aşağıdaki global değişken tanımını ekleyin:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

İçe aktarma işlemlerinde, App Check'in ReCaptchaEnterpriseProvider ile başlatılmasını ekleyin ve jetonların otomatik olarak yenilenmesine izin vermek için isTokenAutoRefreshEnabled'yi 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 değerini true olarak ayarlayın. Uygulamanızı localhost üzerinde 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.

Ardından Firebase konsolunda Uygulama Denetimi'nin Uygulamalar 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 istenen şekilde konsolunuzdaki hata ayıklama jetonunu 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ında, diğer Firebase hizmetlerinin yanı sıra App Check'i de ekleyin.

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...

1. "App Check ile yetkisiz istemcileri engelleyin" commit mesajını içeren bir commit oluşturun ve GitHub deponuza gönderin.
2. Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.

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