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

AngularFire web kod laboratuvarı

1. Genel Bakış

Bu kod laboratuvarında, Firebase ürün ve hizmetlerini kullanarak bir sohbet istemcisi uygulayıp konuşlandırarak web uygulamaları oluşturmak için AngularFire'ı nasıl kullanacağınızı öğreneceksiniz.

ne öğreneceksin

Angular ve Firebase kullanarak bir web uygulaması oluşturun.
Cloud Firestore ve Cloud Storage for Firebase kullanarak verileri senkronize edin.
Firebase Authentication'ı kullanarak kullanıcılarınızın kimliğini doğrulayın.
Web uygulamanızı Firebase Barındırma üzerinde dağıtın.
Firebase Cloud Messaging ile bildirim gönderin.
Web uygulamanızın performans verilerini toplayın.

Neye ihtiyacın olacak

WebStorm , Atom , Sublime veya VS Code gibi seçtiğiniz IDE/metin düzenleyici
Genellikle Node.js ile birlikte gelen paket yöneticisi npm
Bir terminal/konsol
Chrome gibi tercih ettiğiniz bir tarayıcı
Kod laboratuvarının örnek kodu (Kodun nasıl alınacağını öğrenmek için kod laboratuvarının sonraki adımına bakın.)

2. Örnek kodu alın

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

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

Alternatif olarak, git kurulu değilse depoyu bir ZIP dosyası olarak indirebilirsiniz .

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

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 olan codelab için başlangıç kodunu içerir.

3. Bir Firebase projesi oluşturun ve kurun

Bir Firebase projesi oluşturun

Firebase'de oturum açın.
Firebase konsolunda, Proje Ekle 'ye tıklayın ve ardından Firebase projenizi FriendlyChat olarak adlandırın. Firebase projeniz için proje kimliğini unutmayın.
Bu proje için Google Analytics'i etkinleştir'in işaretini kaldırın
Proje Oluştur'u tıklayın.

Oluşturacağınız uygulama, web uygulamaları için 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 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 Bulut Depolama .
Varlıklarınızı barındırmak ve sunmak için Firebase Barındırma .
Push bildirimleri 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ırmaya ihtiyacı var veya Firebase konsolu kullanılarak etkinleştirilmesi gerekiyor.

Projeye bir Firebase web uygulaması ekleyin

web simgesini tıklayın yeni bir Firebase web uygulaması oluşturmak için.
Uygulamayı Friendly Chat takma adıyla kaydedin, ardından Bu uygulama için Firebase Barındırma'yı da kurun 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. Yalnızca JS nesnesini (çevreleyen HTML'yi değil) firebase-config.js'ye kopyalayın

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

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 , ardından Oturum açma yöntemi sekmesine tıklayın (veya doğrudan oraya gitmek için buraya tıklayın ).
Google oturum açma sağlayıcısını etkinleştirin, 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 onay 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 Oluşturma bölümünde, Firestore Veritabanı'nı 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ıyla ilgili sorumluluk reddini okuduktan sonra İleri'ye tıklayın.

Test modu, geliştirme sırasında veritabanına serbestçe yazabilmenizi sağlar. Veritabanımızı daha sonra bu kod laboratuvarında daha güvenli hale getireceksiniz.

Cloud Firestore verilerinizin saklandığı konumu ayarlayın. Bunu varsayılan olarak bırakabilir veya size yakın bir bölge seçebilirsiniz. Firestore'u sağlamak için Bitti'ye tıklayın.

Bulut Depolamayı Etkinleştir

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

Bulut Depolamayı etkinleştirmeniz gerekecek:

Firebase konsolunun Derleme bölümünde, Depolama öğesini tıklayın.
Başlayın düğmesi yoksa bu, Bulut depolamanın zaten etkin olduğu ve aşağıdaki adımları izlemeniz gerekmediği anlamına gelir.
Başlayın'ı tıklayın.
Firebase projeniz için güvenlik kuralları hakkındaki sorumluluk reddini 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 kod laboratuvarında daha sonra 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çilmiştir. Kurulumu tamamlamak için Bitti'ye tıklayın.

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

Firebase komut satırı arabirimi (CLI), web uygulamanızı yerel olarak sunmak için Firebase Barındırma'yı kullanmanıza ve web uygulamanızı Firebase projenize dağıtmanıza olanak tanır.

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

npm -g install firebase-tools

Aşağıdaki komutu çalıştırarak CLI'nin doğru yüklendiğini 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 Barındırma için yapılandırmasını uygulamanızın yerel dizininden (kod laboratuvarında daha önce klonladığınız depo) alacak şekilde ayarladınız. Ancak yapılandırmayı çekmek 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 ardından Firebase projenize bir takma ad verin.

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

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

5. AngularFire'ı kurun

Projeyi çalıştırmadan önce, Angular CLI ve AngularFire'ı kurduğunuzdan 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 ayarlanan özellikleri seçin ( ng deploy -- hosting , Authentication , Firestore , Cloud Functions (callable) , Cloud Messaging , Cloud Storage ) ve konsoldaki istemleri 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östermelidir:

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

Uygulamamızı yerel olarak sunmak için Firebase Barındırma öykünücüsünü kullanıyorsunuz. Web uygulaması artık http://localhost:5000 adresinden erişilebilir olmalıdır. src alt dizini altında bulunan tüm dosyalar servis edilir.

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

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

Uygulama şu anda hiçbir şey yapamıyor, ancak sizin yardımınızla yakında yapacak! Şimdiye kadar yalnızca sizin için kullanıcı arayüzünü düzenlediniz.

Ş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

Hangi Firebase projesini kullandığınızı söylemek 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 parçacığı bölmesinden "Yapılandır"ı seçin.

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

Yapılandırma nesnesi snippet'ini kopyalayın, ardından onu 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'ı İç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ştirmek 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();
}),

// ...

uygulama.module.ts

Bu kod laboratuvarı sırasında Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging ve Performance Monitoring'i kullanacaksınız, dolayısıyla 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 bölümlerini içe aktardığınızdan emin olun.

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

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

Uygulamada, bir 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 kimlik sağlayıcı olarak Google'ı kullanma yetkisi vermek istiyorsunuz. Bir açılır pencere kullanacaksınız, ancak Firebase'de başka birçok yöntem de mevcuttur.

angularfire-start dizininde, /src/app/services/ alt dizininde chat.service.ts dosyasını açın.
İşlevi bulun login .
Tüm işlevi aşağıdaki kodla değiştirin.

sohbet.hizmet.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.

src/app/services/chat.service.ts dosyasına geri dönün.
logout işlevini bulun.
Tüm işlevi aşağıdaki kodla değiştirin.

sohbet.hizmet.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 izleyin

Kullanıcı arayüzümüzü buna göre güncellemek için, kullanıcının giriş yapıp yapmadığı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ı durumundaki gözlemlenebilir bilgileri alabilirsiniz.

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

sohbet.hizmet.ts

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

Yukarıdaki kod, gözlemlenebilir bir kullanıcı döndüren AngularFire işlev user çağırır. Kimlik doğrulama durumu her değiştiğinde (kullanıcı oturum açtığında veya oturumu kapattığında) tetiklenir. 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 UI bölümlerinin tümü zaten uygulandı.

Uygulamaya giriş yapmayı test edin

Uygulamanız hâlâ sunuluyorsa, 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 uygulamayı tarayıcınızda açın.
Oturum aç düğmesini ve Google hesabınızı kullanarak uygulamada oturum açın. auth/operation-not-allowed belirten bir hata mesajı görürseniz, Firebase konsolunda bir kimlik doğrulama sağlayıcısı olarak Google Sign-in'i 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ü doldurabilmeniz için Cloud Firestore'a bazı veriler yazacaksınız. Bu, Firebase konsoluyla manuel olarak yapılabilir, ancak temel bir Cloud Firestore yazısını göstermek için 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 ekleyin

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 yazabilmeleri için işlevsellik ekleyeceksiniz. GÖNDER düğmesini tıklayan bir kullanıcı, aşağıdaki kod parçacığı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şturulmuş bir kimliğe sahip yeni bir belge ekler.

src/app/services/chat.service.ts dosyasına geri dönün.
addMessage işlevini bulun.
Tüm işlevi aşağıdaki kodla değiştirin.

sohbet.hizmet.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 et

Uygulamanız hâlâ sunuluyorsa, 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 uygulamayı tarayıcınızda açın.
Giriş yaptıktan sonra "Merhaba!" gibi bir mesaj girin ve ardından GÖNDER'e tıklayın. Bu, mesajı Cloud Firestore'a yazacaktır. Ancak, gerçek web uygulamanızda henüz verileri görmeyeceksiniz çünkü yine de verileri almayı uygulamanız gerekiyor (kod laboratuvarının 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 ve yeni eklediğiniz mesajla birlikte mesaj koleksiyonunu görmelisiniz:

10. Mesajları oku

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 UI öğesi oluşturmanız gerekir.

Uygulamadan yeni eklenen mesajları dinleyen bir kod ekleyeceksiniz. Bu kodda, messages koleksiyonunun anlık görüntüsünü alacaksınız. Yükleme sırasında çok uzun bir geçmişin gö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 işlevini bulun.
Tüm işlevi aşağıdaki kodla değiştirin.

sohbet.hizmet.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 belirtmek için bir koleksiyon üzerinde bir sorgu oluşturursunuz. Yukarıdaki kodda, messages içindeki değişiklikleri dinliyorsunuz. sohbet mesajlarının depolandığı koleksiyon. Ayrıca limit limit(12) kullanarak sadece 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, kaputun altındaki anlık görüntüleri kullanır. Sorguyla eşleşen belgelerde herhangi bir değişiklik olduğunda geri arama işlevi tetiklenir. Bu, bir mesajın silinmesi, değiştirilmesi veya eklenmesi olabilir. Bununla ilgili daha fazla bilgiyi Cloud Firestore belgelerinde okuyabilirsiniz.

Senkronizasyon mesajlarını test edin

Uygulamanız hâlâ sunuluyorsa, 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 uygulamayı tarayıcınızda açın.
Veritabanında daha önce oluşturduğunuz mesajlar, FriendlyChat kullanıcı arayüzünde görüntülenmelidir (aşağıya bakın). Yeni mesajlar yazmaktan çekinmeyin; anında görünmelidirler.
(İsteğe bağlı) Doğrudan Emulator paketinin Firestore bölümünde manuel olarak silmeyi, değiştirmeyi veya yeni mesajlar 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

Şimdi 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. Cloud Storage for Firebase bir dosya/blob depolama hizmetidir ve bir kullanıcının uygulamamızı kullanarak paylaştığı tüm görüntüleri depolamak için kullanacaksınız.

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

Bu kod laboratuvarı için, bir dosya seçici iletişim kutusunu tetikleyen bir düğmeyi sizin yerinize zaten eklediniz. Bir dosya 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 resmi 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 herkesin okuyabileceği bir URL oluşturur.
Sohbet mesajını, geçici yüklenen resim yerine yeni yüklenen resim dosyasının URL'siyle günceller.

Şimdi bir resim gönderme işlevini ekleyeceksiniz:

src/index.js dosyasına geri dönün.
saveImageMessage işlevini bulun.
Tüm işlevi 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üleri göndermeyi test edin

Uygulamanız hâlâ sunuluyorsa, 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 uygulamayı tarayıcınızda açın.
Giriş yaptıktan sonra sol alttaki resim yükle butonuna tıklayın ve dosya seçiciyi kullanarak bir görüntü dosyası seçin. Bir görüntü arıyorsanız, bu güzel kahve fincanı resmini kullanmaktan çekinmeyin.
Uygulamanın kullanıcı arayüzünde seçtiğiniz resimle birlikte yeni bir mesaj görünmelidir:

Oturum açmamışken bir resim eklemeye çalışırsanız, resim eklemek için oturum açmanız gerektiğini söyleyen bir hata görmeniz gerekir.

12. Bildirimleri göster

Artık tarayıcı bildirimleri için destek ekleyeceksiniz. Uygulama, sohbete yeni mesajlar gönderildiğinde kullanıcıları bilgilendirir. Firebase Cloud Messaging (FCM), mesajları ve bildirimleri hiçbir ücret ödemeden güvenilir bir şekilde iletmenizi sağlayan 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.

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

sohbet.hizmet.ts

saveMessagingDeviceToken işlevini bulun.
Tüm işlevi aşağıdaki kodla değiştirin.

sohbet.hizmet.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 belirtecini alabilmesi için, kullanıcının uygulamanıza bildirimleri gösterme izni vermesi gerekir (kod laboratuvarının bir sonraki adımı).

Bildirimleri göstermek için izin isteyin

Kullanıcı, uygulamanıza bildirimleri gösterme iznini henüz vermediğinde, size bir cihaz belirteci verilmeyecektir. Bu durumda, bu izni isteyen bir tarayıcı iletişim kutusu görüntüleyecek olan 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.
Tüm işlevi aşağıdaki kodla değiştirin.

sohbet.hizmet.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 alın

Uygulamanız hâlâ sunuluyorsa, 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 uygulamayı tarayıcınızda açın.
Oturum açtı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. Şu mesajı görmelisiniz: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
Cihaz belirtecinizi kopyalayın. Kod laboratuvarının bir sonraki aşaması için buna ihtiyacınız olacak.

Cihazınıza bir bildirim gönderin

Artık cihaz belirtecinize sahip olduğunuza 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" i tıklayın
Tarayıcınızın JavaScript konsolundan kopyaladığınız cihaz belirtecini girin, ardından artı ("+") işaretini tıklayın
"test" e tıklayın

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

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

13. Cloud Firestore güvenlik kuralları

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

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 kurarken, 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 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 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

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

Bu kod laboratuvarının başında Firebase projesini kurarken, yalnızca kimliği doğrulanmış kullanıcıların Bulut Depolamayı kullanmasına izin veren varsayılan Bulut Depolama 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çmış herhangi bir kullanıcının depolama grubunuzdaki herhangi bir dosyayı 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 okumasına izin ver
Yüklenen dosyaların resim olduğundan emin olun
Yüklenebilecek resimlerin boyutunu maksimum 5 MB ile sınırlayı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 Barındırma 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ğıtmadan önce, hangi yerel dosyaların dağıtılacağını firebase.json dosyanızda belirtmeniz gerekir. Bu kod laboratuvarı için, bunu sizin için zaten yaptınız çünkü bu kod laboratuvarı sırasında dosyalarımızı sunmak için bu adım gerekliydi. Barındırma ayarları, hosting özniteliği 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 söyler.

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östermelidir:

=== 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

Kendi Firebase alt alan adlarınızdan ikisinde Firebase Barındırma kullanılarak artık tamamen küresel bir CDN'de barındırılan web uygulamanızı ziyaret edin:

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

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

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

Dağıtımlarınızın geçmişi, uygulamanızın önceki sürümlerine geri dönme işlevi ve özel bir etki alanı kurmaya yönelik iş akışı dahil olmak üzere faydalı 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

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

AngularFire web kod laboratuvarı

1. Genel Bakış

ne öğreneceksin

Neye ihtiyacın olacak

2. Örnek kodu alın

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

3. Bir Firebase projesi oluşturun ve kurun

Bir Firebase projesi oluşturun

Projeye bir Firebase web uygulaması ekleyin

Firebase Authentication 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'ı kurun

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

AngularFire'ı İçe Aktar

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

Google Sign-In ile kullanıcılarınızın kimliğini doğrulayın

Kimlik doğrulama durumunu izleyin

Uygulamaya giriş yapmayı test edin

9. Cloud Firestore'a mesaj yazın

Veri örneği

Cloud Firestore'a mesaj ekleyin

Mesaj göndermeyi test et

10. Mesajları oku

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üleri 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 jetonunuzu alın

Cihazınıza bir bildirim gönderin

13. Cloud Firestore güvenlik kuralları

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

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

14. Uygulamanızı Firebase Barındırma kullanarak dağıtın

15. Tebrikler!

Neleri ele aldın

Sonraki adımlar

Daha fazla bilgi edin

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

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