AngularFire web codelab'i

1. Genel Bakış

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

Kullanıcıların Firebase'i tartıştığı bir sohbet uygulaması

Neler öğreneceksiniz?

  • Angular ve Firebase kullanarak bir web uygulaması oluşturun.
  • Firebase için Cloud Firestore ve Cloud Storage'ı kullanarak verileri senkronize edin.
  • Firebase Authentication'i kullanarak kullanıcılarınızın kimliğini doğrulayın.
  • Web uygulamanızı Firebase App Hosting'e dağıtın.
  • Firebase Cloud Messaging ile bildirim gönderme.
  • 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 tercih ettiğiniz IDE/metin düzenleyici
  • Genellikle Node.js ile birlikte gelen paket yöneticisi npm
  • Terminal/konsol
  • Chrome gibi tercih ettiğiniz bir tarayıcı
  • Codelab'in örnek kodu (Kodu nasıl alacağınız için codelab'in 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 kod laboratuvarında yalnızca angularfire-start dizini kullanılır.

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

  1. 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ü almak için giget npm paketini kullanın:
    npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
  3. git ile değişiklikleri yerel olarak izleme:
    git init

git add .

git commit -m "codelab starting point"

git branch -M main
  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 depo URL'si sağlar. Bu URL'yi kopyalayın.
  5. Yerel değişiklikleri yeni GitHub deponuza aktarın. your-repository-url yer tutucusunun yerine depo URL'nizi koyarak aşağıdaki komutu çalıştırın.
    git remote add origin your-repository-url

git push -u origin main
  6. Artık GitHub deponuzda başlangıç kodunu görebilirsiniz.

3. Firebase projesi oluşturup ayarlama

Firebase projesi oluşturma

  1. Firebase konsolunda oturum açın.
  2. Firebase konsolunda Proje Ekle'yi tıklayın ve 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 uygulamada, web uygulamaları için kullanılabilen Firebase ürünleri kullanılır:

  • Kullanıcılarınızın uygulamanızda kolayca oturum açmasına olanak tanımak için Firebase Authentication'i kullanın.
  • Yapılandırılmış verileri bulutta depolamak ve veriler değiştiğinde anında bildirim almak için Cloud Firestore'u kullanın.
  • Dosyaları bulutta depolamak için Cloud Storage for Firebase.
  • Uygulamayı oluşturmak, barındırmak ve sunmak için Firebase App Hosting'i kullanın.
  • Push bildirimleri göndermek ve tarayıcı pop-up bildirimleri göstermek için Firebase Cloud Messaging.
  • Uygulamanızla ilgili kullanıcı performansı verilerini toplamak için Firebase Performance Monitoring'i kullanabilirsiniz.

Bu ürünlerin bazıları için özel yapılandırma veya Firebase Konsolu'nun kullanılması gerekir.

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

Firebase için Firebase Uygulama Barındırma ve Cloud Storage'ı kullanmak istiyorsanız Firebase projenizin kullandıkça öde (Blaze) fiyatlandırma planında olması gerekir. Yani projeniz bir Cloud Faturalandırma hesabına bağlı olmalıdır.

  • Cloud Billing 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ı almaya uygun olup olmadığınızı kontrol edin.
  • Bu kod laboratuvarını bir etkinlik kapsamında yapıyorsanız düzenleyen kişiye Cloud kredisi olup olmadığını sorun.

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

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

Projeye Firebase web uygulaması ekleme

  1. Yeni bir Firebase web uygulaması oluşturmak için web simgesini 58d6543a156e56f9.png tıklayın.
  2. Uygulamayı Arkadaşça Sohbet takma adıyla kaydedin. Bu uygulama için Firebase Hosting'i de ayarlayın seçeneğinin yanındaki kutuyu işaretlemeyin. Uygulamayı kaydet'i tıklayın.
  3. Bir sonraki adımda bir yapılandırma nesnesi görürsünüz. Şu an için buna ihtiyacınız yoktur. Konsol'a devam et'i tıklayın.

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

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. Projenin herkese açık adı metin kutusuna My Next.js app gibi akılda kalıcı bir ad girin.
  5. Proje için destek e-postası açılır listesinden e-posta adresinizi seçin.
  6. Kaydet'i tıklayın.

Cloud Firestore'u ayarlama

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

Cloud Firestore'u Firebase projenizde ayarlamak için:

  1. Firebase konsolunun sol panelinde Derleme'yi genişletin ve ardından Firestore veritabanı'nı seçin.
  2. Create database'i (Veritabanı oluştur) tıklayın.
  3. Veritabanı Kimliği'ni (default) olarak bırakın.
  4. Veritabanı için bir konum seçip Sonraki'yi tıklayın.
    Gerçek bir uygulama için kullanıcılarınıza yakın bir konum seçmeniz gerekir.
  5. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
    Bu kod laboratuvarının 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ı dağıtmayın veya herkese açık olarak göstermeyin.
  6. Oluştur'u tıklayın.

Cloud Storage for Firebase'i ayarlama

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

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

  1. Firebase konsolunun sol panelinde Derleme'yi genişletin ve ardından Depolama'yı seçin.
  2. Başlayın'ı tıklayın.
  3. Varsayılan Storage paketiniz için bir konum seçin.
    US-WEST1, US-CENTRAL1 ve US-EAST1'deki paketler, Google Cloud Storage'ın "Daima Ücretsiz" katmanından yararlanabilir. Diğer tüm konumlardaki paketler için Google Cloud Storage fiyatlandırması ve kullanımı geçerlidir.
  4. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
    Bu kod laboratuvarının ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Depolama alanı paketiniz için Güvenlik Kuralları eklemedenbir uygulamayı dağıtmayın veya herkese açık olarak göstermeyin.
  5. Oluştur'u 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 yayınlamak 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
  1. 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.

  1. Aşağıdaki komutu çalıştırarak Firebase CLI'yi 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.

  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.

Birden fazla ortamınız (üretim, hazırlık vb.) varsa takma ad 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 CLI 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 tuşuyla aşağıdaki özellikleri seçin:
    • Authentication
    • Firestore
    • Cloud Messaging
    • Cloud Storage
  2. enter düğmesine basın ve kalan talimatları uygulayın.
  3. "AngularFire'ı yükleyin" 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ın yeni sürümünü otomatik olarak yeniden derleyip kullanıma sunar.

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

"Başlayın" düğmesi içeren Uygulama Barındırma Konsolu'nun sıfır durumu

  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 dizini / olarak kalsın
    2. Canlı şubeyi main olarak ayarlayın
    3. Otomatik kullanıma sunma işlemlerini etkinleştirme
  4. Arka uçunuzu friendlychat-codelab olarak adlandırın.
  5. "Firebase web uygulaması oluşturma veya ilişkilendirme" bölümünde, "Mevcut bir Firebase web uygulaması seçin" açılır menüsünden daha önce yapılandırdığınız web uygulamasını seçin.
  6. "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.
  7. Kullanıma sunma işleminiz tamamlandıktan sonra "Alanlar" bölümünde ücretsiz alanınızı tıklayın. DNS yayımı nedeniyle bu özelliğin çalışmaya başlaması birkaç dakika sürebilir.

İlk web uygulamasını dağıttınız. GitHub deponuzun main dalına her yeni kaydetme işlemi aktardığınızda Firebase konsolunda yeni bir derleme ve dağıtım işleminin başladığını görürsünüz. Dağıtım tamamlandığında siteniz otomatik olarak güncellenir.

"Başlayın" düğmesi içeren Uygulama Barındırma Konsolu'nun sıfır durumu

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 gerçek zamanlı bir sohbet uygulaması oluşturalım.

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 konsolundaki 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 snippet bölmesinden "Yapılandırma"yı seçin.

Sizin için bir ortam dosyası /angularfire-start/src/environments/environment.ts oluşturulduğunu görürsünüz.

  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.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. Artık Firebase Authentication'i kullanarak kullanıcı oturum açma özelliğini uygulayacaksınız.

Yetkilendirilen alan ekleyin

Firebase Authentication yalnızca kontrol ettiğiniz belirli bir alan listesinden oturum açmaya izin verir. Ücretsiz uygulama barındırma alanınızı alan listesine ekleyin:

  1. Uygulama Barındırma'ya gidin.
  2. Arka uç alanınızın adını kopyalayın.
  3. Kimlik doğrulama ayarları'na gidin.
  4. Yetkilendirilen alanlar sekmesini seçin.
  5. Alan ekle'yi tıklayın ve uygulama barındırma arka uç alanınızın adını yapıştırın.

Google ile oturum açma özelliğini kullanarak 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 kullanacaksınız ancak Firebase'de başka yöntemler de mevcuttur.

  1. /src/app/services/ alt dizinindeki chat.service.ts dosyasını açın.
  2. login işlevini 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ı Oturumu kapat düğmesini tıkladığında tetiklenir.

  1. src/app/services/chat.service.ts dosyasına geri dönün.
  2. logout işlevini 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 özellik zaten uygulanmış olsa da göz atmaya değer.

  1. src/app/services/chat.service.ts dosyasına geri dönün.
  2. user$ değişken atama işlemini 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 oturumu 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 etme

  1. "Google Kimlik Doğrulaması Ekleniyor" mesajını içeren bir kaydetme işlemi oluşturun ve bu kaydetme işlemini 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 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üyorsanız Firebase Console'da kimlik doğrulama sağlayıcısı 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österilir: angularfire-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 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.

688d7bc5fb662b57.png

Cloud Firestore'a mesaj ekleme

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

Bu bölümde, kullanıcıların veritabanınıza yeni mesajlar yazmasını sağlayacak işlevi ekleyeceksiniz. Kullanıcı GÖNDER düğmesini tıkladığında aşağıdaki kod snippet'i tetiklenir. Bu işlev, messages koleksiyonundaki Cloud Firestore örneğinize ileti alanlarının içeriğini içeren bir ileti nesnesi ekler. add() yöntemi, koleksiyona otomatik olarak oluşturulmuş kimliğe sahip yeni bir belge 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'i 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:

6812efe7da395692.png

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 eklersiniz. Bu kodda, messages koleksiyonunun anlık görüntüsünü alırsınız. Yükleme sırasında çok uzun bir geçmişin gösterilmemesi 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ında mesajları dinlemek için, dinlemek istediğiniz verilerin hangi koleksiyonda olduğunu 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) 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üler kullanır. Geri çağırma işlevi, sorguyla eşleşen belgelerde herhangi bir değişiklik olduğunda tetiklenir. Bu durum, bir mesajın silinmesi, değiştirilmesi veya eklenmesi durumunda ortaya çıkabilir. Bu konuda daha fazla bilgi için Cloud Firestore belgelerine göz atın.

Mesaj senkronizasyonunu 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'i yenileyin. Daha önce veritabanında oluşturduğunuz mesajlar FriendlyChat kullanıcı arayüzünde gösterilir (aşağıya bakın). Yeni mesajlar yazabilirsiniz. Bu mesajlar 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.

angularfire-2.png

11. Yapay zeka özellikleri ekleme

Chat uygulamasına faydalı 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 kod laboratuvarı 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. Elde edilen API anahtarını kopyalayın

Uzantı yükleme

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

  1. Chatbot with the Gemini API ile Chatbot oluşturma uzantı sayfasında Firebase konsoluna 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 Yapay Zeka 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
    • Sıralama 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

Yapay zeka özelliğini test etme

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çıp mesaj gönderin.
  2. Bir süre sonra mesajınızın yanında bir yanıt pop-up'ı 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 iyi 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 aşağıdakileri gerçekleştirir:

  1. Resmi yüklerken kullanıcıların "Yükleniyor" animasyonu görmesini sağlamak için sohbet akışında bir "yer tutucu" sohbet mesajı oluşturur.
  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.

Ardından, resim gönderme işlevini ekleyeceksiniz:

  1. src/chat.service.ts dosyasına geri dönün.
  2. saveImageMessage işlevini 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 bu kaydetme işlemini 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 angularfire-4.png tıklayın ve dosya seçiciyi kullanarak bir resim dosyası seçin. Görsel arıyorsanız bu kahve fincanı resmini kullanabilirsiniz.
  4. Uygulamanın kullanıcı arayüzünde, seçtiğiniz resmi içeren yeni bir mesaj gösterilir: angularfire-2.png

Oturumunuz kapalıyken resim eklemeye çalışırsanız 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, sohbete yeni mesajlar gönderildiğinde 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.

Mesajlaşma sağlayıcı, AngularFire eklendiğinde zaten ayarlanmış olmalıdır. /angularfire-start/src/app/app.config.ts dosyasının içe aktarma bölümünde aşağıdaki kodun 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 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. Tarayıcıdan FCM cihaz jetonunu alıp Cloud Firestore'a kaydedeceğiniz yer burasıdır.

chat.service.ts

  1. saveMessagingDeviceToken işlevini 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 ilk baş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ı).

Bildirim göstermek için izin isteme

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

8b9d0c66dc36153d.png

  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. "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 bildirimler için izin iletişim kutusu gösterilir: bd3454e6dbfb6723.png
  4. İzin ver'i tıklayın.
  5. Tarayıcınızın JavaScript konsolunu açın. Aşağıdaki mesajı görürsünüz: 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"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örünür:

de79e8638a45864c.png

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 kod laboratuvarının başında Firebase projesini oluştururken, veri deposuna erişimi kısıtlamamak için "Test modu" varsayılan güvenlik kurallarını kullanmayı seçtiniz. 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, herhangi bir kullanıcının veri deponuzdaki tüm 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 Alanı bölümünün 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 yapmak için 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

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, kimlik bilgisi doğrulaması ekleyecek ve Uygulama Kontrolü ile reCAPTCHA Enterprise'ı kullanarak yetkisiz istemcileri engelleyeceksiniz.

Öncelikle Uygulama Kontrolü 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üvenli 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 paneldeki 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. Cloud Firestore için de aynı işlemi 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ı 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 ö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 testlere izin vermek için self.FIREBASE_APPCHECK_DEBUG_TOKEN değerini true olarak ayarlayın. localhost'te uygulamanızı yenilediğinizde konsola aşağıdakine 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.

Aşırı dolgu 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.