AngularFire web codelab'i

1. Genel bakış

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

Neler öğreneceksiniz?

• Angular ve Firebase kullanarak web uygulaması derleyin.
• Cloud Firestore ve Cloud Storage for Firebase kullanarak verileri senkronize edebilirsiniz.
• Firebase Authentication'ı kullanarak kullanıcılarınızın kimliğini 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ğı
• Tercih ettiğiniz WebStorm, Sublime veya VS Code gibi IDE/metin düzenleyici
• Genellikle Node.js ile birlikte gelen paket yöneticisi npm
• Terminal/konsol
• Tercih ettiğiniz bir tarayıcı (ör. Chrome)
• Codelab'in örnek kodu (Kodu nasıl alacağınızı öğrenmek için codelab'in sonraki adımına bakın.)

2. Örnek kodu alın

GitHub deposu oluşturma

codelab'i 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. Terminal kullanarak bilgisayarınızda yeni bir klasör oluşturun ve bu klasörü yeni dizinde değiştirin:

   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. Git:

   git init
   
   git add .
   
   git commit -m "codelab starting point"
   
   git branch -M main
   

   ile değişiklikleri yerel olarak izleyin
4. Yeni bir GitHub deposu oluşturun: https://github.com/new. İstediğiniz adı verin.
   1. GitHub size https://github.com/[user-name]/[repository-name].git veya git@github.com:[user-name]/[repository-name].git şeklinde görünen yeni bir kod deposu URL'si verir. Bu URL'yi kopyalayın.
5. Yerel değişiklikleri yeni GitHub deponuza aktarın. Depo URL'nizi your-repository-url yer tutucusu

   git remote add origin your-repository-url
   
   git push -u origin main
   

   ile değiştirerek aşağıdaki komutu çalıştırın.
6. Başlangıç kodunu GitHub deponuzda görmeniz gerekir.

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.

Derleyeceğiniz uygulama, web uygulamalarıyla kullanılabilen Firebase ürünlerini kullanır:

• Kullanıcılarınızın uygulamanızda kolayca oturum açmasına izin vermek 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.
• Dosyaları buluta kaydetmek için Cloud Storage for Firebase.
• Uygulamayı oluşturmak, barındırmak ve sunmak için Firebase Uygulama Barındırma.
• Push bildirimleri göndermek ve tarayıcı pop-up bildirimlerini görüntülemek için Firebase Cloud Messaging.
• Uygulamanızın kullanıcı performansı verilerini toplamak için Firebase Performance Monitoring'i kullanın.

Bu ürünlerden bazılarının özel olarak yapılandırılması veya Firebase konsolu üzerinden 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ı gerekir, yani bir Cloud Faturalandırma Hesabı ile ilişkilendirilmiş olmalıdır.

• Cloud Faturalandırma hesabı için kredi kartı gibi bir ödeme yöntemi gerekir.
• Firebase ve Google Cloud'u kullanmaya yeni başladıysanız 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 aşağıdaki adımları izleyin:

1. Firebase konsolunda planınızı yükseltmeyi seçin.
2. İletişim kutusunda Blaze planını seçin, ardından projenizi bir Cloud Faturalandırma Hesabı ile ilişkilendirmek için ekrandaki talimatları uygulayın.
   Cloud Faturalandırma Hesabı oluşturmanız gerekiyorsa yükseltmeyi tamamlamak için Firebase konsolunda 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 tıklayın.
2. Uygulamayı Arkadaşlık Sohbet takma adıyla kaydedin. Bu uygulama için Firebase Hosting'i de kur seçeneğinin yanındaki kutuyu işaretlemeyin. Uygulamayı kaydet'i tıklayın.
3. Sonraki adımda bir yapılandırma nesnesi görürsünüz. Şu an için bu özelliğe ihtiyacınız yok. Konsola devam et'i tıklayın.

Kimlik doğrulamayı ayarlama

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ştirme

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

Cloud Firestore'u etkinleştirmeniz gerekir:

1. Firebase konsolunda Firestore'a gidin.
2. Veritabanı oluştur > Sonraki > Test modunda başlat > Sonraki seçeneğini tıklayın.
   Bu codelab'in ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Veritabanınıza Güvenlik Kuralları eklemeden bir uygulamayı herkese açık olarak dağıtmayın veya kullanıma açık hale getirmeyinyapmayın uygulamayı herkese açık olarak dağıtmayın veya kullanıma sunmayın.
3. Varsayılan konumu kullanın veya istediğiniz bir konumu seçin.
   Gerçek bir uygulama için kullanıcılarınıza yakın bir konum seçmek istersiniz. 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ı resimleri depolamak, yüklemek ve paylaşmak için Cloud Storage for Firebase'i kullanır.

Cloud Storage'ı etkinleştirmeniz gerekir:

1. Firebase konsolunda Storage'a gidin.
2. Başlayın > Test modunda başlat > Sonraki'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 şekilde dağıtmayın veya açığa çıkarmayınyapmayın uygulamayı herkese açık olarak dağıtmayın veya kullanıma sunmayın.
3. Paketinizin konumu önceden seçilmiş olmalıdır (önceki adımda Firestore'un ayarlanması nedeniyle).
4. Done'ı (Bitti) tıklayın.

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'yı yükleyin:

npm -g install firebase-tools@latest

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

firebase --version

Firebase CLI'ın, 13.9.0 veya üzeri 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 sayede, projeniz için gerekli tüm bağımlılıklar yüklenecektir.

3. İstendiğinde, boşluk çubuğunu kullanarak ng deploy -- hosting öğesinin işaretini kaldırın. Ok tuşlarını ve boşluk çubuğunu kullanarak 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. "Load AngularFire" kayıt mesajıyla bir kayıt oluşturun ve GitHub deponuza gönderin.

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 oluşturacaksınız.

Bu bölümün sonunda GitHub'daki deponuza bağlı bir App Hosting arka ucunuz olacak. Bu arka ucunuz, main dalınıza yeni kayıt aktardığınızda uygulamanızın yeni sürümünü otomatik olarak yeniden oluşturacak ve kullanıma sunacaktır.

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 tut
   2. Canlı dalı main olarak ayarla
   3. Otomatik kullanıma sunmayı etkinleştir
5. Arka ucunuzu 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. "Bitir ve dağıt"ı tıklayın. Kısa bir süre sonra yeni Uygulama Barındırma arka ucunuzun 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öreceksiniz.

Uygulama şu anda hiçbir şey yapamıyor, ancak sizin yardımınızla yakında bunu 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

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

1. Firebase konsolunda Proje ayarlarınıza gidin
2. "Uygulamalarınız" kartında, yapılandırma nesnesine ihtiyaç duyduğunuz 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. Config nesnesi snippet'ini kopyalayın ve ardından angularfire-start/src/firebase-config.js hedefine 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örüntüleme

Konsolda seçtiğiniz özelliklerin otomatik olarak /angularfire-start/src/app/app.config.ts dosyasına 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ı yapın

AngularFire, app.config.ts yazılımına aktarılıp başlatıldığı için artık kullanıma hazır olmalıdı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 App Hosting alanınızı alan adları 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 codelab'de, kimlik sağlayıcı olarak Google'ı kullanması için Firebase'e yetki vermek istiyorsunuz. 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ümüzü uygun şekilde güncellemek için, kullanıcının giriş yapıp yapmadığını veya çıkış yapıp yapmadığını kontrol edecek bir yönteme ihtiyacınız vardır. AngularFire, kimlik doğrulama durumu her değiştiğinde güncellenen bir gözlemlenebilir işlev sağlayan 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 user AngularFire işlevini çağırır. Kimlik doğrulama durumu her değiştiğinde (kullanıcı oturum açtığında veya oturumu kapattığında) tetiklenir. FriendlyChat'teki Angular şablon bileşenleri, kullanıcı arayüzünü güncellemek, başlık gezinme bölümünde kullanıcıyı görüntülemek ve diğer işlemler için bu gözlemlenebilir öğeyi 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ü doldurabilmeniz 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 bu işlemi uygulamanın içinden yapabilirsiniz.

Veri modeli

Cloud Firestore verileri koleksiyonlar, belgeler, alanlar ve alt koleksiyonlara ayrılır. Sohbetteki her mesajı messages adlı üst düzey koleksiyonda bir doküman olarak saklarsı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 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;
  }
};

İleti göndermeyi test etme

1. "Post new chat to Firestore" (Yeni sohbetleri Firestore'a gönder) kayıt mesajını kullanarak bir kayıt 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 girin ve GÖNDER'i tıklayın. Bu işlem, mesajı Cloud Firestore'a yazar. Ancak yine de verileri alma işlemini 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'i (Firestore Veritabanı) tıklayın (veya burayı tıklayın). Yeni eklenen mesajınızı içeren messages koleksiyonunu göreceksiniz.

10. Mesajları okuma

İletileri senkronize edin

Uygulamadaki 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 kodda, messages koleksiyonunun anlık görüntüsünü alacaksınız. Yükleme sırasında çok uzun bir geçmiş görüntülememek 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 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 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, en yeni 12 mesajı almak için limit(12) ile yalnızca son 12 mesajı dinleyip orderBy('timestamp', 'desc') kullanarak mesajları tarihe göre sıralayarak da sınır uyguluyorsunuz.

collectionData işlevi, arka planda anlık görüntüleri kullanır. Sorguyla eşleşen dokümanlarda herhangi bir değişiklik olduğunda geri çağırma işlevi 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. "Show new chat in the UI" (Kullanıcı arayüzünde yeni sohbetleri göster) kayıt mesajıyla bir kayıt oluşturup 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. Veritabanında daha önce oluşturduğunuz mesajlar FriendlyChat kullanıcı arayüzünde gösterilecektir (aşağıya bakın). Yeni mesajlar yazmaktan çekinmeyin. İletiler anında görünür.
4. (İsteğe bağlı) Doğrudan Emulator paketinin Firestore bölümünden yeni mesajları manuel olarak silmeyi, değiştirmeyi veya eklemeyi deneyebilirsiniz. Yapılan değişiklikler kullanıcı arayüzüne yansıtılmalıdır.

Tebrikler! Uygulamanızda Cloud Firestore belgelerini okuyorsunuz.

11. Yapay zeka özellikleri ekle

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 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ı kopyala

Uzantı yükleme

Bu uzantı, Firestore'daki messages koleksiyonuna her yeni doküman 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ı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 Create secret'ı (Gizli anahtar oluştur) 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, AI uzantısından yanıtları okuyacak koda zaten sahip. Denemek için tek yapmanız gereken yeni bir sohbet mesajı göndermek.

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. Resmin sonunda, gerçek bir kullanıcı değil, üretken yapay zekayla oluşturulduğunu belirten bir ✨ ai generated notu bulunur.

12. Resimleri gönder

Şimdi resim paylaşan bir özellik ekleyeceksiniz.

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. Bu hizmeti, kullanıcının uygulamamızı kullanarak paylaştığı resimleri depolamak için kullanırsınız.

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

Bu codelab'e, 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çili dosyaya ilişkin bir referans 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 herkes tarafından okunabilen bir URL oluşturur.
4. Sohbet mesajını, geçici yüklenen resim 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. "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 uygulamasını 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 resimle birlikte yeni bir mesaj görüntülenir:

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 ekleyeceksiniz. Uygulama, sohbette yeni mesaj yayınlandığında kullanıcıları bilgilendirir. Firebase Cloud Messaging (FCM), ücretsiz olarak güvenilir bir şekilde mesaj ve bildirim iletmenizi sağlayan, platformlar arası bir mesajlaşma çözümüdür.

FCM hizmet çalışanını ekleme

Web uygulaması, web bildirimlerini alacak ve 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. Aşağıdaki kodun /angularfire-start/src/app/app.module.ts aracının içe aktarmalar bölümünde bulunduğundan emin olun

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

app/app.module.ts

Service Worker'ın yalnızca Firebase Cloud Messaging SDK'sını yükleyip başlatması yeterlidir. Böylece bildirimler gösterilir.

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. Bu aşamada tarayıcıdan FCM cihaz jetonunu alıp Cloud Firestore'a kaydedersiniz.

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 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 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 uygulamasını 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 gereklidir.

Cihazınıza bildirim gönderme

Artık cihaz jetonunuzu aldığınıza göre bildirim gönderebilirsiniz.

1. Firebase konsolunun Cloud Messaging 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 JavaScript konsolunda bildirimi görürsünüz.

Uygulamanız arka plandaysa tarayıcınızda bir bildirim görüntülenir:

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 konsolundaki Veritabanı bölümündeki Kurallar sekmesinde bu kuralları görüntüleyebilir ve değiştirebilirsiniz.

Bu noktada, veri deposuna erişimi kısıtlamayan varsayılan kuralları görmeniz gerekir. 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;
    }
  }
}

Bu kuralları, aşağıdaki kuralları kullanarak kısıtlama olacak şekilde güncelleyebilirsiniz:

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 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çmiş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 belirli klasörlerine yazmasına izin ver
• Herkesin Cloud Storage'dan veri okumasına izin ver
• Yüklenen dosyaların resim olduğundan emin olun.
• Yüklenebilecek resimlerin boyutunu en fazla 5 MB ile sınırlandırın

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

depolama.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ı bir sohbet web uygulaması oluşturmak için Firebase'i kullandınız.

İşlediğiniz konular

• 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.tr

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

Firebase Uygulama Kontrolü, hizmetlerinizi istenmeyen trafikten korumaya ve arka ucunuzun kötüye kullanıma karşı korunmasına 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ği şekilde hizmeti etkinleştirin ve Anahtar Oluştur'u tıklayın.
3. İstendiği gibi bir görünen ad girin ve platform türü olarak Web sitesi'ni seçin.
4. Dağıtılan URL'lerinizi Alan adı listesine ekleyin ve "Onay kutusu sorgulaması kullan" seçeneğinin işaretsiz olduğundan emin olun.
5. Anahtar Oluştur'u tıklayın ve oluşturulan anahtarı, güvenle saklamak için bir yerde saklayın. Bu adımın ilerleyen bölümlerinde bunlara 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ü ve 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 Kaydet'i tıklayın.
4. API'ler Görünümü'nde Depolama'yı seçin ve Uygula'yı tıklayın. Aynı işlemi Cloud Firestore için de yapın.

Uygulama Kontrolü artık zorunlu kılınacak. Uygulamanızı yenileyin ve 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 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ü başlatma özelliğini ekleyin ve jetonların otomatik olarak yenilenmesine izin vermek için isTokenAutoRefreshEnabled öğesini 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. 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.

Ş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 konsolunuzdaki 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, diğer Firebase hizmetlerinin yanı sıra Uygulama Kontrolü'nü ekleyin.

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

1. "Uygulama Kontrolü ile yetkisiz istemcileri engelle" 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.

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