Bu sayfa, Cloud Translation API ile çevrilmiştir.

AngularFire web kod laboratuvarı

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'ı nasıl kullanacağınızı öğreneceksiniz.

Ne öğreneceksin

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

İhtiyacınız olan şey

WebStorm , Atom , Sublime veya VS Code gibi seçtiğiniz IDE/metin düzenleyicisi
Genellikle Node.js ile birlikte gelen paket yöneticisi npm
Bir terminal/konsol
Chrome gibi seçtiğiniz bir tarayıcı
Codelab'in örnek kodu (Kodu nasıl alacağınızı öğrenmek için codelab'in bir sonraki adımına bakın.)

2. Örnek kodu alın

Codelab'in GitHub deposunu komut satırından kopyalayın:

git clone https://github.com/firebase/codelab-friendlychat-web

Alternatif olarak, git yüklü değilse depoyu ZIP dosyası olarak indirebilirsiniz .

Başlangıç uygulamasını içe aktar

IDE'nizi kullanarak, klonlanmış depodan 📁 angularfire-start dizinini açın veya içe aktarın. Bu 📁 angularfire-start dizini, tamamen işlevsel bir sohbet web uygulaması olacak codelab'in başlangıç kodunu içerir.

3. Firebase projesi oluşturun ve kurun

Firebase projesi oluşturma

Firebase'de oturum açın.
Firebase konsolunda Proje Ekle'ye tıklayın ve ardından Firebase projenize FriendlyChat adını verin. Firebase projenizin proje kimliğini unutmayın.
Bu proje için Google Analytics'i etkinleştir seçeneğinin işaretini kaldırın
Proje Oluştur'a tıklayın.

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

Kullanıcılarınızın uygulamanızda kolayca oturum açmasına olanak tanıyan Firebase Kimlik Doğrulaması .
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 Firebase için Cloud Storage .
Varlıklarınızı barındırmak ve sunmak için Firebase Hosting .
Anlık bildirimler göndermek ve tarayıcı açılır bildirimlerini görüntülemek için Firebase Cloud Messaging .
Uygulamanız için kullanıcı performansı verilerini toplamak için Firebase Performance Monitoring .

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

Projeye Firebase web uygulaması ekleme

Web simgesini tıklayın yeni bir Firebase web uygulaması oluşturmak için.
Uygulamayı Dostça Sohbet takma adıyla kaydedin ve ardından Bu uygulama için Firebase Hosting'i de kur seçeneğinin yanındaki kutuyu işaretleyin. Uygulamayı kaydet'i tıklayın.
Bir sonraki adımda bir yapılandırma nesnesi göreceksiniz. Firebase-config.js'ye yalnızca JS nesnesini (çevreleyen HTML'yi değil) kopyalayın

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

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

Google ile oturum açmayı etkinleştirmeniz gerekecek:

Firebase konsolunda sol paneldeki Derleme bölümünü bulun.
Kimlik Doğrulama 'yı ve ardından Oturum açma yöntemi sekmesini tıklayın (veya doğrudan oraya gitmek için burayı tıklayın ).
Google oturum açma sağlayıcısını etkinleştirin ve ardından Kaydet'i tıklayın.
Uygulamanızın herkese açık adını Dostça Sohbet olarak ayarlayın ve açılır menüden bir Proje destek e-postası seçin.
OAuth izin ekranınızı Google Cloud Console'da yapılandırın ve bir logo ekleyin:

Cloud Firestore'u etkinleştirin

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

Cloud Firestore'u etkinleştirmeniz gerekecek:

Firebase konsolunun Derleme bölümünde Firestore Veritabanı'na tıklayın.
Cloud Firestore bölmesinde Veritabanı oluştur'a tıklayın.

Test modunda başlat seçeneğini seçin ve güvenlik kurallarına ilişkin sorumluluk reddi beyanını okuduktan sonra İleri'ye tıklayın.

Test modu, geliştirme sırasında veritabanına serbestçe yazabilmenizi sağlar. Bu codelab'de daha sonra veritabanımızı daha güvenli hale getireceksiniz.

Cloud Firestore verilerinizin depolandığı konumu ayarlayın. Bunu varsayılan olarak bırakabilir veya size yakın bir bölgeyi seçebilirsiniz. Firestore'un temel hazırlığını yapmak için Bitti'ye tıklayın.

Bulut Depolamayı Etkinleştir

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

Cloud Storage'ı etkinleştirmeniz gerekecek:

Firebase konsolunun Derleme bölümünde Depolama'yı tıklayın.
Başlayın düğmesi yoksa bu, Bulut depolamanın zaten etkin olduğu ve aşağıdaki adımları izlemenize gerek olmadığı anlamına gelir.
Başlayın'ı tıklayın.
Firebase projenizin güvenlik kurallarına ilişkin sorumluluk reddi beyanını okuyun ve ardından İleri'yi tıklayın.

Varsayılan güvenlik kurallarıyla, kimliği doğrulanmış herhangi bir kullanıcı Cloud Storage'a her şeyi yazabilir. Bu codelab'in ilerleyen bölümlerinde depolama alanımızı daha güvenli hale getireceksiniz.

Cloud Storage konumu, Cloud Firestore veritabanınız için seçtiğiniz bölgeyle önceden seçilir. Kurulumu tamamlamak için Bitti'ye tıklayın.

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

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

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

npm -g install firebase-tools

Aşağıdaki komutu çalıştırarak CLI'nin doğru şekilde kurulduğunu doğrulayın:

firebase --version

Firebase CLI sürümünün v4.1.0 veya üzeri olduğundan emin olun.

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.

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

firebase use --add

İstendiğinde Proje Kimliğinizi seçin ve Firebase projenize bir takma ad verin.

Birden fazla ortamınız (prodüksiyon, hazırlama vb.) varsa takma ad kullanışlıdır. Ancak bu codelab için sadece default takma adını kullanalım.

Komut satırınızdaki kalan talimatları izleyin.

5. AngularFire'ı yükleyin

Projeyi çalıştırmadan önce Angular CLI ve AngularFire'ın kurulu olduğundan emin olun.

Bir konsolda aşağıdaki komutu çalıştırın:

npm install -g @angular/cli

Ardından, angularfire-start dizinindeki bir konsolda aşağıdaki Angular CLI komutunu çalıştırın:

ng add @angular/fire

Bu, projeniz için gerekli tüm bağımlılıkları kuracaktır.

İstendiğinde, Firebase Konsolunda ayarlanmış olan özellikleri seçin ( ng deploy -- hosting , Authentication , Firestore , Cloud Functions (callable) , Cloud Messaging , Cloud Storage ) ve konsoldaki talimatları izleyin.

6. Başlangıç uygulamasını yerel olarak çalıştırın

Artık projenizi içe aktarıp yapılandırdığınıza göre web uygulamasını ilk kez çalıştırmaya hazırsınız.

angularfire-start dizinindeki bir konsolda aşağıdaki Firebase CLI komutunu çalıştırın:

firebase emulators:start

Komut satırınız aşağıdaki yanıtı görüntülemelidir:

✔  hosting: Local server: http://localhost:5000

Uygulamamızı yerel olarak sunmak için Firebase Hosting emülatörünü kullanıyorsunuz. Web uygulamasına artık http://localhost:5000 adresinden ulaşılabilir. src alt dizini altında bulunan tüm dosyalar sunulur.

Tarayıcınızı kullanarak uygulamanızı http://localhost:5000 adresinden açın.

FriendlyChat uygulamanızın (henüz!) çalışmayan kullanıcı arayüzünü görmelisiniz:

Uygulama şu anda hiçbir şey yapamaz, ancak sizin yardımınızla yakında yapacak! Şu ana kadar yalnızca sizin için kullanıcı arayüzünü hazırladınız.

Şimdi gerçek zamanlı bir sohbet oluşturalım!

7. Firebase'i içe aktarın ve yapılandırın

Firebase'i yapılandırın

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

Firebase konsolunda Proje ayarlarınıza gidin
"Uygulamalarınız" kartında, yapılandırma nesnesine ihtiyaç duyduğunuz uygulamanın takma adını seçin.
Firebase SDK pasajı bölmesinden "Yapılandırma"yı seçin.

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

Yapılandırma nesnesi parçacığını kopyalayın ve ardından angularfire-start/src/firebase-config.js dosyasına ekleyin.

çevre.ts

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",
  },
};

AngularFire'ı içe aktar

Konsolda seçtiğiniz özelliklerin otomatik olarak /angularfire-start/src/app/app.module.ts dosyasına yönlendirildiğini göreceksiniz. Bu, uygulamanızın Firebase özelliklerini ve işlevlerini kullanmasına olanak tanır. Ancak yerel bir ortamda geliştirme yapmak için Emulator paketini kullanmak üzere bunları bağlamanız gerekir.

/angularfire-start/src/app/app.module.ts içinde imports bölümünü bulun ve üretim dışı ortamlarda Emulator paketine bağlanmak için sağlanan işlevleri değiştirin.

// ...

import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { provideFirestore,getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage, connectStorageEmulator } from '@angular/fire/storage';

// ...

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
    const auth = getAuth();
    if (location.hostname === 'localhost') {
        connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
    }
    return auth;
}),
provideFirestore(() => {
    const firestore = getFirestore();
    if (location.hostname === 'localhost') {
        connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
    }
    return firestore;
}),
provideFunctions(() => {
    const functions = getFunctions();
    if (location.hostname === 'localhost') {
        connectFunctionsEmulator(functions, '127.0.0.1', 5001);
    }
    return functions;
}),
provideStorage(() => {
    const storage = getStorage();
    if (location.hostname === 'localhost') {
        connectStorageEmulator(storage, '127.0.0.1', 5001);
    }
    return storage;
}),
provideMessaging(() => {
    return getMessaging();
}),

// ...

app.module.ts

Bu codelab sırasında Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging ve Performance Monitoring'i kullanacaksınız, dolayısıyla bunların tüm kitaplıklarını içe aktaracaksınız. Gelecekteki uygulamalarınızda, uygulamanızın yükleme süresini kısaltmak için Firebase'in yalnızca ihtiyacınız olan kısımlarını içe aktardığınızdan emin olun.

8. Kullanıcı oturum açmayı ayarlayın

AngularFire, app.module.ts dosyasına aktarıldığı ve başlatıldığı için artık kullanıma hazır olmalıdır. Artık Firebase Authentication'ı kullanarak kullanıcı oturum açma işlemini uygulayacaksınız.

Uygulamada, kullanıcı Google ile oturum aç düğmesini tıkladığında login işlevi tetiklenir. (Bunu zaten sizin için ayarladınız!) Bu codelab için Firebase'e Google'ı kimlik sağlayıcı olarak kullanma yetkisi vermek istiyorsunuz. Bir açılır pencere kullanacaksınız ancak Firebase'de başka yöntemler de mevcuttur.

angularfire-start dizininde /src/app/services/ alt dizininde chat.service.ts dosyasını açın.
login işlevini bulun.
Fonksiyonun 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üğmesine tıkladığında tetiklenir.

src/app/services/chat.service.ts dosyasına geri dönün.
logout işlevini bulun.
Fonksiyonun 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ü buna göre güncellemek için kullanıcının oturum açıp açmadığını kontrol etmenin bir yoluna ihtiyacınız var. Firebase Authentication ile, kimlik doğrulama durumu her değiştiğinde tetiklenecek olan kullanıcı durumuna ilişkin gözlemlenebilir bilgileri alabilirsiniz.

src/app/services/chat.service.ts dosyasına geri dönün.
user$ değişken atamasını bulun.
Atamanın tamamını aşağıdaki kodla değiştirin.

chat.service.ts

// Observable user
user$ = user(this.auth);

Yukarıdaki kod, gözlemlenebilir bir kullanıcıyı 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. İşte bu noktada, kullanıcı arayüzünü yeniden yönlendirmek, kullanıcıyı başlık gezintisinde görüntülemek vb. için güncelleyeceksiniz. Bu kullanıcı arayüzü parçalarının tümü zaten uygulanmıştır.

Uygulamaya giriş yapmayı test edin

Uygulamanız hâlâ sunulmaya devam ediyorsa uygulamanızı tarayıcıda yenileyin. Aksi takdirde, uygulamayı http://localhost:5000 adresinden sunmaya başlamak için komut satırında firebase emulators:start komutunu çalıştırın ve ardından tarayıcınızda açın.
Oturum açma düğmesini ve Google hesabınızı kullanarak uygulamaya giriş yapın. auth/operation-not-allowed ifadesini belirten bir hata mesajı görürseniz Firebase konsolunda kimlik doğrulama sağlayıcısı olarak Google Oturum Açma'yı etkinleştirdiğinizden emin olun.
Giriş yaptıktan sonra profil resminiz ve kullanıcı adınız görüntülenmelidir:

9. Cloud Firestore'a mesaj yazın

Bu bölümde, uygulamanın kullanıcı arayüzünü doldurabilmek için Cloud Firestore'a bazı veriler yazacaksınız. Bu, Firebase konsoluyla manuel olarak yapılabilir, ancak temel bir Cloud Firestore yazma işlemini göstermek için bunu uygulamanın kendisinde yapacaksınız.

Veri örneği

Cloud Firestore verileri koleksiyonlara, belgelere, alanlara ve alt koleksiyonlara bölünmüştür. Sohbetin her mesajını, messages adı verilen üst düzey bir koleksiyonda bir belge olarak saklayacaksınız.

Cloud Firestore'a mesaj ekleme

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

Bu bölümde, kullanıcıların veritabanınıza yeni mesajlar yazmasına yönelik işlevselliği ekleyeceksiniz. GÖNDER düğmesini tıklayan bir kullanıcı aşağıdaki kod pasajını tetikleyecektir. messages koleksiyonundaki Cloud Firestore örneğinize, mesaj alanlarının içeriğini içeren bir mesaj nesnesi ekler. add() yöntemi, koleksiyona otomatik olarak oluşturulan kimliğe sahip yeni bir belge ekler.

src/app/services/chat.service.ts dosyasına geri dönün.
addMessage fonksiyonunu bulun.
Fonksiyonun 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>> => {
    let data: any;
    try {
      this.user$.subscribe(async (user) => 
      { 
        if(textMessage && textMessage.length > 0) {
          data =  await addDoc(collection(this.firestore, 'messages'), {
            name: user?.displayName,
            text: textMessage,
            profilePicUrl: user?.photoURL,
            timestamp: serverTimestamp(),
            uid: user?.uid
          })}
          else if (imageUrl && imageUrl.length > 0) {
            data =  await addDoc(collection(this.firestore, 'messages'), {
              name: user?.displayName,
              imageUrl: imageUrl,
              profilePicUrl: user?.photoURL,
              timestamp: serverTimestamp(),
              uid: user?.uid
            });
          }
          return data;
        }
      );
    }
    catch(error) {
      console.error('Error writing new message to Firebase Database', error);
      return;
    }
}

Mesaj göndermeyi test edin

Uygulamanız hâlâ sunulmaya devam ediyorsa uygulamanızı tarayıcıda yenileyin. Aksi takdirde, uygulamayı http://localhost:5000 adresinden sunmaya başlamak için komut satırında firebase emulators:start komutunu çalıştırın ve ardından tarayıcınızda açın.
Oturum açtıktan sonra "Merhaba!" gibi bir mesaj girin ve ardından GÖNDER'e tıklayın. Bu, mesajı Cloud Firestore'a yazacaktır. Ancak verileri henüz gerçek web uygulamanızda göremezsiniz çünkü hâlâ verileri almayı uygulamanız gerekir (codelab'in bir sonraki bölümü).
Yeni eklenen mesajı Firebase Konsolunuzda görebilirsiniz. Emulator paketi kullanıcı arayüzünüzü açın. Derleme bölümünün altında Firestore Veritabanı'na tıklayın (veya buraya tıklayın; yeni eklenen mesajınızla birlikte mesaj koleksiyonunu görmelisiniz:

10. Mesajları okuyun

Mesajları senkronize et

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 kodu 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örüntülenmesini önlemek için sohbetin yalnızca son 12 mesajını görüntüleyeceksiniz.

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

chat.service.ts

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

Veritabanındaki mesajları dinlemek için, dinlemek istediğiniz verinin hangi koleksiyonda olduğunu belirtmek üzere collection fonksiyonunu kullanarak bir koleksiyon üzerinde sorgu oluşturursunuz. Yukarıdaki kodda, messages içindeki değişiklikleri dinliyorsunuz. sohbet mesajlarının saklandığı koleksiyon. Ayrıca limit limit(12) kullanarak yalnızca son 12 mesajı dinleyerek ve en yeni 12 mesajı almak için orderBy('timestamp', 'desc') kullanarak mesajları tarihe göre sıralayarak bir limit uyguluyorsunuz.

collectionData işlevi, anlık görüntüleri kullanır. Sorguyla eşleşen belgelerde herhangi bir değişiklik olduğunda geri arama işlevi tetiklenecektir. Bu, bir mesajın silinmesi, değiştirilmesi veya eklenmesi durumunda meydana gelebilir. Bununla ilgili daha fazla bilgiyi Cloud Firestore belgelerinde okuyabilirsiniz.

Senkronizasyon mesajlarını test edin

Uygulamanız hâlâ sunulmaya devam ediyorsa uygulamanızı tarayıcıda yenileyin. Aksi takdirde, uygulamayı http://localhost:5000 adresinden sunmaya başlamak için komut satırında firebase emulators:start komutunu çalıştırın ve ardından tarayıcınızda açın.
Veritabanında daha önce oluşturduğunuz mesajların FriendlyChat kullanıcı arayüzünde görüntülenmesi gerekir (aşağıya bakın). Yeni mesajlar yazmaktan çekinmeyin; anında görünmeleri gerekir.
(İsteğe bağlı) Emulator paketinin Firestore bölümünde doğrudan yeni mesajları manuel olarak silmeyi, değiştirmeyi veya eklemeyi deneyebilirsiniz; herhangi bir değişiklik kullanıcı arayüzüne yansıtılmalıdır.

Tebrikler! Uygulamanızda Cloud Firestore belgelerini okuyorsunuz!

11. Görüntüleri gönderin

Artık görüntüleri paylaşan bir özellik ekleyeceksiniz.

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 ve bunu bir kullanıcının uygulamamızı kullanarak paylaştığı görüntüleri depolamak için kullanırsınız.

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

Bu codelab için, dosya seçici iletişim kutusunu tetikleyen bir düğmeyi zaten eklediniz. Bir dosyayı seçtikten sonra saveImageMessage işlevi çağrılır ve seçilen dosyaya bir referans alabilirsiniz. saveImageMessage işlevi aşağıdakileri gerçekleştirir:

Sohbet akışında bir "yer tutucu" sohbet mesajı oluşturur, böylece siz görseli yüklerken kullanıcıların bir "Yükleniyor" animasyonu görmesini sağlar.
Görüntü dosyasını Cloud Storage'a şu yola yükler: /<uid>/<file_name>
Görüntü dosyası için herkes tarafından okunabilen bir URL oluşturur.
Sohbet mesajını, geçici yükleme resmi yerine yeni yüklenen resim dosyasının URL'siyle günceller.

Artık resim gönderme işlevini ekleyeceksiniz:

src/index.js dosyasına geri dönün.
saveImageMessage fonksiyonunu bulun.
Fonksiyonun tamamını aşağıdaki kodla değiştirin.

index.js

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

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

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

Görüntü göndermeyi test edin

Uygulamanız hâlâ sunulmaya devam ediyorsa uygulamanızı tarayıcıda yenileyin. Aksi takdirde, uygulamayı http://localhost:5000 adresinden sunmaya başlamak için komut satırında firebase emulators:start komutunu çalıştırın ve ardından tarayıcınızda açın.
Giriş yaptıktan sonra sol alttaki resim yükleme butonuna tıklayın ve dosya seçiciyi kullanarak bir görüntü dosyası seçin. Bir görsel arıyorsanız, bu güzel kahve fincanı resmini kullanmaktan çekinmeyin.
Uygulamanın kullanıcı arayüzünde seçtiğiniz görseli içeren yeni bir mesaj görünmelidir:

Oturum açmamışken resim eklemeyi denerseniz, resim eklemek için oturum açmanız gerektiğini belirten bir hata görmelisiniz.

12. Bildirimleri göster

Artık tarayıcı bildirimleri için destek ekleyeceksiniz. Uygulama, sohbete yeni mesajlar gönderildiğinde kullanıcıları bilgilendirecektir. Firebase Cloud Messaging (FCM), mesajları ve bildirimleri hiçbir ücret ödemeden güvenilir bir şekilde iletmenize olanak tanıyan platformlar arası bir mesajlaşma çözümüdür.

FCM hizmet çalışanını ekleyin

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

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

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

app/app.module.ts

Hizmet çalışanının, bildirimlerin görüntülenmesiyle ilgilenecek olan Firebase Cloud Messaging SDK'yı yüklemesi ve başlatması yeterlidir.

FCM cihaz belirteçlerini alın

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

Kullanıcı oturum açtığında saveMessagingDeviceToken işlevini çağırırsınız. FCM cihaz belirtecini tarayıcıdan alacağınız ve Cloud Firestore'a kaydedeceğiniz yer burasıdır.

chat.service.ts

saveMessagingDeviceToken işlevini bulun.
Fonksiyonun 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ışmayacaktır. Uygulamanızın cihaz jetonunu alabilmesi için kullanıcının uygulamanıza bildirimleri göstermesine izin vermesi gerekir (codelab'in bir sonraki adımı).

Bildirimleri göstermek için izin isteyin

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

src/app/services/chat.service.ts dosyasına geri dönün.
requestNotificationsPermissions işlevini bulun.
Fonksiyonun 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ınızın jetonunu alın

Uygulamanız hâlâ sunulmaya devam ediyorsa uygulamanızı tarayıcıda yenileyin. Aksi takdirde, uygulamayı http://localhost:5000 adresinden sunmaya başlamak için komut satırında firebase emulators:start komutunu çalıştırın ve ardından tarayıcınızda açın.
Giriş yaptıktan sonra bildirim izni iletişim kutusu görünmelidir:
İzin Ver'i tıklayın.
Tarayıcınızın JavaScript konsolunu açın. Aşağıdaki mesajı görmelisiniz: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
Cihaz jetonunuzu kopyalayın. Codelab'in bir sonraki aşaması için buna ihtiyacınız olacak.

Cihazınıza bildirim gönderin

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

Firebase konsolunun Bulut Mesajlaşma sekmesini açın.
"Yeni Bildirim"i tıklayın
Bir bildirim başlığı ve bildirim metni girin.
Ekranın sağ tarafında "test mesajı gönder"e tıklayın
Tarayıcınızın JavaScript konsolundan kopyaladığınız cihaz jetonunu girin ve ardından artı ("+") işaretini tıklayın
"Test"e tıklayın

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

Uygulamanız arka plandaysa, bu örnekte olduğu gibi tarayıcınızda bir bildirim görünmelidir:

13. Cloud Firestore güvenlik kuralları

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

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

Bu codelab'in başında Firebase projesini ayarlarken, veri deposuna erişimi kısıtlamamak için "Test modu" varsayılan güvenlik kurallarını kullanmayı seçtiniz. Firebase 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örmelisiniz. Bu, herhangi bir kullanıcının veri deponuzdaki herhangi bir koleksiyonu okuyabileceği ve 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 bazı şeyleri kısıtlamak 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 paketinize otomatik olarak güncellenmelidir.

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

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çtiniz. Firebase konsolunda , Depolama bölümünün Kurallar sekmesinde kuralları görüntüleyebilir ve değiştirebilirsiniz. Oturum açan herhangi bir kullanıcının depolama grubunuzdaki dosyaları okumasına ve yazmasına izin veren varsayılan kuralı görmelisiniz.

rules_version = '2';

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

Aşağıdakileri yapmak için kuralları güncelleyeceksiniz:

Her kullanıcının yalnızca kendi özel klasörlerine yazmasına izin ver
Herkesin Cloud Storage'dan okuma yapmasına izin ver
Yüklenen dosyaların resim olduğundan emin olun
Yüklenebilecek görsellerin boyutunu maksimum 5 MB ile sınırlandırın

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

depolama kuralları

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;
    }
  }
}

14. Uygulamanızı Firebase Hosting'i kullanarak dağıtın

Firebase, varlıklarınıza ve web uygulamalarınıza hizmet vermek için bir barındırma hizmeti sunar. Firebase CLI'yi kullanarak dosyalarınızı Firebase Hosting'e dağıtabilirsiniz. Dağıtımdan önce firebase.json dosyanızda hangi yerel dosyaların dağıtılması gerektiğini belirtmeniz gerekir. Bu codelab için bunu zaten yaptınız çünkü bu codelab sırasında dosyalarımızı sunmak için bu adım gerekliydi. Barındırma ayarları, hosting özelliğinin altında belirtilir:

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

Bu ayarlar CLI'ye ./public dizinindeki ( "public": "./public" ) tüm dosyaları dağıtmak istediğinizi bildirir.

Komut satırınızın uygulamanızın yerel angularfire-start dizinine eriştiğinden emin olun.
Aşağıdaki komutu çalıştırarak dosyalarınızı Firebase projenize dağıtın:

ng deploy

Ardından Firebase seçeneğini seçin ve komut satırındaki talimatları izleyin.

Konsol aşağıdakileri görüntülemelidir:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

Artık tamamen küresel bir CDN'de barındırılan web uygulamanızı, kendi Firebase alt alan adlarınızdan ikisinde Firebase Hosting'i kullanarak ziyaret edin:

https://<firebase-projectId>.firebaseapp.com
https://<firebase-projectId>.web.app

Alternatif olarak, firebase open hosting:site komut satırında çalıştırabilirsiniz.

Firebase Hosting'in nasıl çalıştığı hakkında daha fazla bilgi edinmek için belgeleri inceleyin.

Dağıtımlarınızın geçmişi, uygulamanızın önceki sürümlerine geri dönme işlevi ve özel bir alan adı kurmaya yönelik iş akışı dahil olmak üzere yararlı barındırma bilgilerini ve araçlarını görüntülemek için projenizin Firebase konsolu Barındırma bölümüne gidin.

15. Tebrikler!

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

Neleri ele aldınız

Firebase Kimlik Doğrulaması
Bulut Firestore
Bulut Depolama için Firebase SDK'sı
Firebase Bulut Mesajlaşma
Firebase Performans İzleme
Firebase Barındırma

Sonraki adımlar

Daha fazla bilgi edin

firebase.google.com

16. [İsteğe Bağlı] Uygulama Kontrolüyle Zorunlu Hale Getirin

Firebase Uygulama Kontrolü, hizmetlerinizin istenmeyen trafiğe karşı korunmasına ve arka ucunuzun kötüye kullanıma karşı korunmasına yardımcı olur. Bu adımda, kimlik doğrulaması ekleyecek ve Uygulama Kontrolü ve reCAPTCHA Enterprise ile yetkisiz istemcileri engelleyeceksiniz.

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

reCaptcha Enterprise'ı etkinleştirme

Bulut konsolunda Güvenlik altında reCaptcha Enterprise'ı bulun ve seçin.
Hizmeti istendiği gibi etkinleştirin ve Anahtar Oluştur'u tıklayın.
İstendiğinde bir görünen ad girin ve platform türünüz olarak Web sitesi'ni seçin.
Dağıtılan URL'lerinizi Etki Alanı listesine ekleyin ve "Onay kutusu sorgulamasını kullan" seçeneğinin işaretli olmadığından emin olun.
Anahtar Oluştur'a tıklayın ve oluşturulan anahtarı güvenli bir yerde saklayın. Bu adımda daha sonra ihtiyacınız olacak.

Uygulama Kontrolünü Etkinleştirme

Firebase konsolunda sol paneldeki Derleme bölümünü bulun.
Uygulama Kontrolü'ne tıklayın, ardından Uygulama Kontrolü'ne gitmek için Oturum açma yöntemi sekmesine tıklayın.
Kaydol'a tıklayın ve istendiğinde reCaptcha Enterprise anahtarınızı girin, ardından Kaydet'e tıklayın.
API Görünümünde Depolama'yı seçin ve Zorunlu kıl'a tıklayın. Cloud Firestore için de aynısını yapın.

Uygulama Kontrolü artık zorunlu kılınmalıdır! Uygulamanızı yenileyin ve sohbet mesajlarını görüntülemeyi veya göndermeyi deneyin. Hata mesajını almalısı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 reCAPTCHAEnterpriseKey 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.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 aktarmaları 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 aktarmalarda, ReCaptchaEnterpriseProvider ile Uygulama Kontrolü'nün başlatılmasını ekleyin ve belirteçlerin otomatik olarak yenilenmesine izin vermek için isTokenAutoRefreshEnabled 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 yenilediğinizde, konsolda aşağıdakine benzer bir hata ayıklama belirteci günlüğe 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 belirtecini ekle'ye tıklayın ve istendiği gibi hata ayıklama belirtecini konsolunuzdan yapıştırın.

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

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

Aynı chat.service.ts](angularfire-start/src/app/services/chat.service.ts) dosyasına, diğer Firebase hizmetlerinin yanına Uygulama Kontrolü'nü ekleyin.

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

Tebrikler! Uygulama Kontrolü artık uygulamanızda çalışıyor olmalıdır.

AngularFire web kod laboratuvarı

1. Genel Bakış

Ne öğreneceksin

İhtiyacınız olan şey

2. Örnek kodu alın

Başlangıç ​​uygulamasını içe aktar

3. Firebase projesi oluşturun ve kurun

Firebase projesi oluşturma

Projeye Firebase web uygulaması ekleme

Firebase Kimlik Doğrulaması için Google ile oturum açmayı etkinleştirin

Cloud Firestore'u etkinleştirin

Bulut Depolamayı Etkinleştir

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

5. AngularFire'ı yükleyin

6. Başlangıç ​​uygulamasını yerel olarak çalıştırın

7. Firebase'i içe aktarın ve yapılandırın

Firebase'i yapılandırın

AngularFire'ı içe aktar

8. Kullanıcı oturum açmayı ayarlayın

Kullanıcılarınızın kimliğini Google ile Oturum Açma ile doğrulayın

Kimlik doğrulama durumunu izleme

Uygulamaya giriş yapmayı test edin

9. Cloud Firestore'a mesaj yazın

Veri örneği

Cloud Firestore'a mesaj ekleme

Mesaj göndermeyi test edin

10. Mesajları okuyun

Mesajları senkronize et

Senkronizasyon mesajlarını test edin

11. Görüntüleri gönderin

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

Görüntü göndermeyi test edin

12. Bildirimleri göster

FCM hizmet çalışanını ekleyin

FCM cihaz belirteçlerini alın

Bildirimleri göstermek için izin isteyin

Cihazınızın jetonunu alın

Cihazınıza bildirim gönderin

13. Cloud Firestore güvenlik kuralları

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

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

14. Uygulamanızı Firebase Hosting'i kullanarak dağıtın

15. Tebrikler!

Neleri ele aldınız

Sonraki adımlar

Daha fazla bilgi edin

16. [İsteğe Bağlı] Uygulama Kontrolüyle Zorunlu Hale Getirin

Başlangıç uygulamasını içe aktar

6. Başlangıç uygulamasını yerel olarak çalıştırın