Firebase web kod laboratuvarı

1. Genel Bakış

Bu kod laboratuvarında, Firebase ürün ve hizmetlerini kullanarak bir sohbet istemcisi uygulayarak ve dağıtarak kolayca web uygulamaları oluşturmak için Firebase'i nasıl kullanacağınızı öğreneceksiniz.

3b1284f5144b54f6.png

ne öğreneceksin

  • 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 Hosting'de dağıtın.
  • Firebase Cloud Messaging ile bildirimler 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üzenleyicisi
  • Genellikle Node.js ile birlikte gelen npm paket yöneticisi
  • 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 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 yüklü değilse , depoyu bir ZIP dosyası olarak indirebilirsiniz .

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

IDE'nizi kullanarak, klonlanmış depodan 📁 web-start ​​dizinini açın veya içe aktarın. Bu 📁 web-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

  1. Firebase'de oturum açın.
  2. Firebase konsolunda, Proje Ekle öğesini tıklayın ve ardından Firebase projenizi FriendlyChat olarak adlandırın. Firebase projenizin proje kimliğini unutmayın.
  3. Bu proje için Google Analytics'i etkinleştir seçeneğinin işaretini kaldırın
  4. Proje Oluştur 'u tıklayın.

Oluşturacağımı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 izin vermek için Firebase Kimlik Doğrulaması .
  • Bulutta yapılandırılmış verileri 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 Hosting .
  • Anında iletme bildirimleri göndermek ve tarayıcı açılır bildirimlerini görüntülemek için Firebase Bulut Mesajlaşma .
  • Uygulamanız için kullanıcı performans verilerini toplamak için Firebase Performance Monitoring .

Bu ürünlerden bazıları özel yapılandırmaya ihtiyaç duyar veya Firebase konsolu kullanılarak etkinleştirilmesi gerekir.

Projeye bir Firebase web uygulaması ekleyin

  1. Web simgesini tıklayın 58d6543a156e56f9.png yeni bir Firebase web uygulaması oluşturmak için.
  2. Uygulamayı Dostça Sohbet takma adıyla kaydedin, ardından Bu uygulama için Firebase Hosting'i de ayarla seçeneğinin yanındaki kutuyu işaretleyin. Uygulamayı kaydet'i tıklayın.
  3. 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

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

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

Google oturum açmayı etkinleştirmeniz gerekir:

  1. Firebase konsolunda, sol paneldeki Oluştur bölümünü bulun.
  2. Kimlik Doğrulama 'yı tıklayın, ardından Oturum açma yöntemi sekmesini tıklayın (veya doğrudan oraya gitmek için burayı tıklayın ).
  3. Google oturum açma sağlayıcısını etkinleştirin ve ardından Kaydet 'i tıklayın.
  4. 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.
  5. Google Cloud Console'da OAuth izin ekranınızı yapılandırın ve bir logo ekleyin:

d89fb3873b5d36ae.png

Cloud Firestore'u Etkinleştir

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

Cloud Firestore'u etkinleştirmeniz gerekecek:

  1. Firebase konsolunun Oluştur bölümünde, Firestore Database öğesine tıklayın.
  2. Cloud Firestore bölmesinde Veritabanı oluştur'a tıklayın.

729991a081e7cd5.png

  1. Test modunda başlat seçeneğini seçin, ardından güvenlik kurallarıyla ilgili sorumluluk reddini okuduktan sonra İleri'ye tıklayın.

Test modu, geliştirme sırasında veritabanına özgürce yazabilmemizi sağlar. Bu codelab'de daha sonra veritabanımızı daha güvenli hale getireceğiz.

77e4986cbeaf9dee.png

  1. Cloud Firestore verilerinizin depolandığı 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.

9f2bb0d4e7ca49c7.png

Bulut Depolamayı Etkinleştir

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

Bulut Depolamayı etkinleştirmeniz gerekecek:

  1. Firebase konsolunun Oluştur bölümünde, Depolama öğesini tıklayın.
  2. Başlayın düğmesi yoksa, Bulut depolama zaten etkindir ve aşağıdaki adımları uygulamanıza gerek yoktur.
  3. Başlayın 'ı tıklayın.
  4. Firebase projenizin güvenlik kurallarıyla ilgili 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 depolamamızı daha güvenli hale getireceğiz.

62f1afdcd1260127.png

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

1d7f49ebaddb32fc.png

4. Firebase komut satırı arayüzünü kurun

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

  1. Aşağıdaki npm komutunu çalıştırarak CLI'yi kurun:
npm -g install firebase-tools
  1. 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 üstü olduğundan emin olun.

  1. Aşağıdaki komutu çalıştırarak Firebase CLI'yi yetkilendirin:
firebase login

Web uygulaması şablonunu, uygulamanızın yerel dizininden (daha önce kod laboratuvarında klonladığınız depo) Firebase Hosting için uygulamanızın yapılandırmasını alacak şekilde ayarladık. Ancak yapılandırmayı çekmek için uygulamanızı Firebase projenizle ilişkilendirmemiz gerekiyor.

  1. Komut satırınızın uygulamanızın yerel web-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 ve ardından Firebase projenize bir takma ad verin.

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

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

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

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

  1. web-start ​​dizinindeki bir konsolda aşağıdaki Firebase CLI komutunu çalıştırın:
firebase serve --only hosting
  1. 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 Hosting öykünücüsünü kullanıyoruz. Web uygulaması artık http://localhost:5000 adresinden erişilebilir olmalıdır. public alt dizinde bulunan tüm dosyalar sunulur.

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

4c23f9475228cef4.png

Uygulama şu anda hiçbir şey yapamaz, ancak sizin yardımınızla yakında yapacak! Şimdiye kadar sizin için sadece kullanıcı arayüzünü belirledik.

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

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

Firebase SDK'sını içe aktarın

Firebase SDK'yı uygulamaya aktarmamız gerekiyor. Belgelerimizde açıklandığı gibi bunu yapmanın birden çok yolu vardır. Örneğin, kütüphaneyi CDN'mizden içe aktarabilirsiniz. Veya npm kullanarak yerel olarak yükleyebilir, ardından Browserify kullanıyorsanız uygulamanızda paketleyebilirsiniz.

Firebase SDK'sını npm'den alacağız ve kodumuzu paketlemek için Webpack'i kullanacağız. Bunu, Webpack'in gereksiz kodları kaldırabilmesi için yapıyoruz ve uygulamamızın mümkün olduğunca çabuk yüklendiğinden emin olmak için JS paketimizin boyutunu küçük tutuyoruz. Bu codelab için, bir bağımlılık olarak Firebase SDK'sını içeren bir web-start/package.json dosyası oluşturduk ve ayrıca web-start/src/index.js dosyasının en üstünde gerekli işlevleri içe aktardık.

paket.json

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

Bu codelab sırasında Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging ve Performance Monitoring'i kullanacağız, bu nedenle tüm kitaplıklarını içe aktarıyoruz. Gelecekteki uygulamalarınızda, uygulamanızın yükleme süresini kısaltmak için yalnızca ihtiyacınız olan Firebase parçalarını içe aktardığınızdan emin olun.

Firebase SDK'yı yükleyin ve Webpack derlemenizi başlatın

Uygulamamızın derlemesini devam ettirmek için birkaç komut çalıştırmamız gerekiyor.

  1. Yeni bir terminal penceresi aç
  2. web-start ​​dizininde olduğunuzdan emin olun
  3. Firebase SDK'sını indirmek için npm install çalıştırın
  4. npm run start . Webpack şimdi kod laboratuvarının geri kalanı için kaynak kodumuzu sürekli olarak yeniden oluşturacaktır.

Firebase'i yapılandırın

Hangi Firebase projesini kullandığımızı söylemek için Firebase SDK'sını da yapılandırmamız gerekiyor.

  1. Firebase konsolunda Proje ayarlarınıza gidin
  2. "Uygulamalarınız" kartında, yapılandırma nesnesine ihtiyacınız olan uygulamanın takma adını seçin.
  3. Firebase SDK snippet'i bölmesinden "Yapılandır"ı seçin.
  4. Yapılandırma nesnesi snippet'ini kopyalayın, ardından web-start/src/firebase-config.js .

firebase-config.js

const config = {
  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",
};

Şimdi web-start/src/index.js en altına gidin ve Firebase'i başlatın:

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

7. Kullanıcı oturum açma ayarlarını yapın

Firebase SDK, içe aktarıldığından ve index.js içinde başlatıldığından artık kullanıma hazır olmalıdır. Şimdi Firebase Authentication kullanarak kullanıcı oturum açma işlemini uygulayacağız.

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

Uygulamada, bir kullanıcı Google ile Oturum Aç düğmesini tıkladığında oturum signIn işlevi tetiklenir. (Bunu sizin için zaten ayarladık!) Bu kod laboratuvarı için, Firebase'e kimlik sağlayıcı olarak Google'ı kullanması için yetki vermek istiyoruz. Bir açılır pencere kullanacağız, ancak Firebase'de başka yöntemler de mevcut.

  1. web-start ​​dizininde, src/ alt dizininde index.js açın.
  2. signIn işlevini bulun.
  3. Tüm işlevi aşağıdaki kodla değiştirin.

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

Kullanıcı Oturumu Kapat düğmesini tıkladığında signOut işlevi tetiklenir.

  1. src/index.js dosyasına geri dönün.
  2. signOutUser işlevini bulun.
  3. Tüm işlevi aşağıdaki kodla değiştirin.

index.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

Kimlik doğrulama durumunu izleyin

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ımız var. Firebase Authentication ile, kimlik doğrulama durumu her değiştiğinde tetiklenecek olan kimlik doğrulama durumuna bir gözlemci kaydedebilirsiniz.

  1. src/index.js dosyasına geri dönün.
  2. initFirebaseAuth işlevini bulun.
  3. Tüm işlevi aşağıdaki kodla değiştirin.

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

Yukarıdaki kod, authStateObserver işlevini kimlik doğrulama durumu gözlemcisi olarak kaydeder. Kimlik doğrulama durumu her değiştiğinde (kullanıcı oturum açtığında veya oturumu kapattığında) tetiklenir. Bu noktada, oturum açma düğmesini, oturumu kapatma düğmesini, oturum açmış kullanıcının profil resmini vb. görüntülemek veya gizlemek için kullanıcı arayüzünü güncelleyeceğiz. Bu UI bölümlerinin tümü zaten uygulandı.

Oturum açmış kullanıcının bilgilerini görüntüleyin

Uygulamamızın üst çubuğunda oturum açmış kullanıcının profil resmini ve kullanıcı adını görüntülemek istiyoruz. Firebase'de, oturum açmış kullanıcının verileri her zaman currentUser nesnesinde bulunur. Daha önce, kullanıcı arayüzümüzün buna göre güncellenmesi için kullanıcı oturum açtığında tetiklenecek authStateObserver işlevini ayarladık. Tetiklendiğinde getProfilePicUrl ve getUserName arayacaktır.

  1. src/index.js dosyasına geri dönün.
  2. getProfilePicUrl ve getUserName işlevlerini bulun.
  3. Her iki işlevi de aşağıdaki kodla değiştirin.

index.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

Kullanıcı, oturum açmamışken mesaj göndermeye çalışırsa bir hata mesajı gösteriyoruz. (Yine de deneyebilirsiniz!) Bu nedenle, kullanıcının gerçekten oturum açıp açmadığını tespit etmemiz gerekiyor.

  1. src/index.js dosyasına geri dönün.
  2. isUserSignedIn işlevini bulun.
  3. Tüm işlevi aşağıdaki kodla değiştirin.

index.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

Uygulamada oturum açmayı test edin

  1. 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 serve --only hosting çalıştırın ve ardından tarayıcınızda açın.
  2. Oturum açma 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 ile Oturum Açmayı etkinleştirdiğinizden emin olun.
  3. Oturum açtıktan sonra profil resminiz ve kullanıcı adınız görüntülenmelidir: c7401b3d44d0d78b.png

8. Cloud Firestore'a mesaj yazın

Bu bölümde, uygulamanın kullanıcı arayüzünü doldurabilmemiz için Cloud Firestore'a bazı veriler yazacağız. Bu, Firebase konsolu ile manuel olarak yapılabilir, ancak temel bir Cloud Firestore yazımı göstermek için bunu uygulamanın kendisinde yapacağız.

Veri örneği

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

688d7bc5fb662b57.png

Cloud Firestore'a mesaj ekleyin

Kullanıcılar tarafından yazılan sohbet mesajlarını saklamak için Cloud Firestore kullanacağız.

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

  1. src/index.js dosyasına geri dönün.
  2. saveMessage işlevini bulun.
  3. Tüm işlevi aşağıdaki kodla değiştirin.

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

Mesaj göndermeyi test et

  1. 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 serve --only hosting çalıştırın ve ardından tarayıcınızda açın.
  2. 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 alma işlemini gerçekleştirmemiz gerektiğinden (codelab'in sonraki bölümü) hala gerçek web uygulamanızda verileri görmeyeceksiniz.
  3. Yeni eklenen mesajı Firebase Konsolunuzda görebilirsiniz. Firebase Konsolunuzu açın. Build bölümünün altında Firestore Database'e tıklayın (veya buraya tıklayın ve projenizi seçin) ve yeni eklenen mesajınızla birlikte mesaj koleksiyonunu görmelisiniz:

6812efe7da395692.png

9. Mesajları okuyun

Mesajları senkronize et

Uygulamadaki mesajları okumak için, veri değiştiğinde tetiklenen dinleyiciler eklememiz ve ardından yeni mesajları gösteren bir UI öğesi oluşturmamız gerekecek.

Uygulamadan yeni eklenen mesajları dinleyen kod ekleyeceğiz. Bu kodda, verilerde yapılan değişiklikleri dinleyen dinleyiciyi kaydedeceğiz. 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üleyeceğiz.

  1. src/index.js dosyasına geri dönün.
  2. loadMessages fonksiyonunu bulun.
  3. Tüm işlevi aşağıdaki kodla değiştirin.

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

Veritabanındaki mesajları dinlemek için, bir koleksiyon üzerinde, dinlemek istediğimiz verinin hangi koleksiyonda olduğunu belirtmek için collection fonksiyonunu kullanarak bir sorgu oluşturuyoruz. Yukarıdaki kodda, messages içindeki değişiklikleri dinliyoruz. sohbet mesajlarının depolandığı koleksiyon. Ayrıca .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 sınır uyguluyoruz.

onSnapshot işlevi, ilk parametresi olarak bir sorguyu ve ikinci parametresi olarak bir geri arama işlevini alı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

  1. 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 serve --only hosting çalıştırın ve ardından tarayıcınızda açın.
  2. 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.
  3. (İsteğe bağlı) Doğrudan Firebase konsolunun Veritabanı 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!

2168dec79b573d07.png

10. Resim gönder

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

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

Bu codelab için, sizin için dosya seçici iletişim kutusunu tetikleyen bir düğme ekledik. 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:

  1. Görüntüyü yüklerken kullanıcıların bir "Yükleniyor" animasyonu görmeleri için sohbet akışında bir "yer tutucu" sohbet mesajı oluşturur.
  2. Görüntü dosyasını şu yola Cloud Storage'a yükler: /<uid>/<messageId>/<file_name>
  3. Görüntü dosyası için genel olarak okunabilir bir URL oluşturur.
  4. Sohbet mesajını, geçici yükleme resmi yerine yeni yüklenen resim dosyasının URL'si ile günceller.

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

  1. src/index.js dosyasına geri dönün.
  2. saveImageMessage işlevini bulun.
  3. 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.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), 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.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Test gönderme görüntüleri

  1. 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 serve --only hosting çalıştırın ve ardından tarayıcınızda açın.
  2. Oturum açtıktan sonra resim yükle düğmesine tıklayın 13734cb66773e5a3.png ve dosya seçiciyi kullanarak bir görüntü dosyası seçin. Bir resim arıyorsanız, bu güzel kahve fincanı resmini kullanmaktan çekinmeyin.
  3. Seçtiğiniz resimle birlikte uygulamanın kullanıcı arayüzünde yeni bir mesaj görünmelidir: 3b1284f5144b54f6.png

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

11. Bildirimleri göster

Şimdi tarayıcı bildirimleri için destek ekleyeceğiz. 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 iletmenizi sağlayan platformlar arası bir mesajlaşma çözümüdür.

FCM hizmet çalışanını ekleyin

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

  1. web-start ​​dizininden, src dizininde firebase-messaging-sw.js .
  2. Aşağıdaki içeriği bu dosyaya ekleyin.

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

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

FCM cihaz jetonlarını 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ığımız şeydir.

Kullanıcı oturum saveMessagingDeviceToken işlevini çağırırız. FCM cihaz jetonunu tarayıcıdan alacağımız ve Cloud Firestore'a kaydedeceğimiz yer burasıdır.

  1. src/index.js dosyasına geri dönün.
  2. saveMessagingDeviceToken işlevini bulun.
  3. Tüm işlevi aşağıdaki kodla değiştirin.

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().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(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      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österme izni vermesi gerekir (kod laboratuvarının 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 jetonu verilmez. Bu durumda, bu izni isteyen bir tarayıcı iletişim kutusu görüntüleyen ( desteklenen tarayıcılarda ) firebase.messaging().requestPermission() yöntemini çağırırız.

8b9d0c66dc36153d.png

  1. src/index.js dosyasına geri dönün.
  2. requestNotificationsPermissions işlevini bulun.
  3. Tüm işlevi aşağıdaki kodla değiştirin.

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

Cihazınızın jetonunu alın

  1. 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 serve --only hosting çalıştırın ve ardından tarayıcınızda açın.
  2. Oturum açtıktan sonra bildirimler izin iletişim kutusu görünmelidir: bd3454e6dbfb6723.png
  3. İzin Ver'i tıklayın.
  4. Tarayıcınızın JavaScript konsolunu açın. Aşağıdaki mesajı Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. Cihazınızın jetonunu kopyalayın. Codelab'ın bir sonraki aşaması için buna ihtiyacınız olacak.

Cihazınıza bir bildirim gönderin

Artık cihaz jetonunuz olduğuna göre bir bildirim gönderebilirsiniz.

  1. Firebase konsolunun Bulut Mesajlaşma sekmesini açın.
  2. "Yeni Bildirim" e tıklayın
  3. Bir bildirim başlığı ve bildirim metni girin.
  4. Ekranın sağ tarafında, "test mesajı gönder"e tıklayın
  5. Tarayıcınızın JavaScript konsolundan kopyaladığınız cihaz jetonunu girin ve ardından artı ("+") işaretini tıklayın.
  6. "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:

de79e8638a45864c.png

12. 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çtik. 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üncelleyeceğiz:

firestore.kurallar

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

Veritabanı güvenlik kurallarını güncelleyin

Veritabanı güvenlik kurallarınızı Firebase konsolunda veya Firebase CLI kullanılarak dağıtılan bir yerel kurallar dosyasından düzenlemenin iki yolu vardır.

Firebase konsolunda güvenlik kurallarını güncellemek için:

  1. Sol panelden Veritabanı bölümüne gidin ve ardından Kurallar sekmesine tıklayın.
  2. Zaten konsolda bulunan varsayılan kuralları yukarıda gösterilen kurallarla değiştirin.
  3. Yayınla'yı tıklayın.

Yerel bir dosyadan güvenlik kurallarını güncellemek için:

  1. web-start ​​dizininden firestore.rules açın.
  2. Dosyada zaten bulunan varsayılan kuralları yukarıda gösterilen kurallarla değiştirin.
  3. web-start ​​dizininden firebase.json açın.
  4. Aşağıda gösterildiği gibi firestore.rules öğesini gösteren firestore.rules özniteliğini ekleyin. ( hosting özniteliği zaten dosyada olmalıdır.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Aşağıdaki komutu çalıştırarak Firebase CLI'yi kullanarak güvenlik kurallarını dağıtın:
firebase deploy --only firestore
  1. Komut satırınız aşağıdaki yanıtı göstermelidir:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

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

13. Bulut Depolama güvenlik kuralları

Bulut Depolama 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 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çtik. 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 paketinizdeki 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üncelleyeceğiz:

  • Her kullanıcının yalnızca kendi özel klasörlerine yazmasına izin verin
  • 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;
    }
  }
}

Cloud Storage güvenlik kurallarını güncelleyin

Depolama güvenliği kurallarınızı düzenlemenin iki yolu vardır: Firebase konsolunda veya Firebase CLI kullanılarak dağıtılan yerel kurallar dosyasından.

Firebase konsolunda güvenlik kurallarını güncellemek için:

  1. Sol panelden Depolama bölümüne gidin ve ardından Kurallar sekmesine tıklayın.
  2. Zaten konsolda bulunan varsayılan kuralı yukarıda gösterilen kurallarla değiştirin.
  3. Yayınla'yı tıklayın.

Yerel bir dosyadan güvenlik kurallarını güncellemek için:

  1. web-start ​​dizininden, storage.rules açın.
  2. Dosyada zaten bulunan varsayılan kuralları yukarıda gösterilen kurallarla değiştirin.
  3. web-start ​​dizininden firebase.json açın.
  4. storage.rules dosyasına işaret eden storage.rules özniteliğini aşağıda gösterildiği gibi ekleyin. ( hosting ve database özniteliği zaten dosyada olmalıdır.)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Aşağıdaki komutu çalıştırarak Firebase CLI'yi kullanarak güvenlik kurallarını dağıtın:
firebase deploy --only storage
  1. Komut satırınız aşağıdaki yanıtı göstermelidir:
=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

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

14. Performans verilerini toplayın

Uygulamanızdan gerçek dünya performans verilerini toplamak için Performans İzleme SDK'sını kullanabilir ve ardından bu verileri Firebase konsolunda inceleyip analiz edebilirsiniz. Performans İzleme, uygulamanızın performansının nerede ve ne zaman iyileştirilebileceğini anlamanıza yardımcı olur, böylece bu bilgileri performans sorunlarını gidermek için kullanabilirsiniz.

Firebase Performance Monitoring JavaScript SDK ile entegre etmenin çeşitli yolları vardır. Bu codelab'de, Barındırma URL'lerinden Performans İzlemeyi etkinleştirdik. SDK'yı etkinleştirmenin diğer yöntemlerini görmek için belgelere bakın.

Otomatik izler

getPerformance web-start/src/index.js dosyasının en üstünde içe aktardığımız için, Performans İzleme'ye, kullanıcılar konuşlandırılmış sitenizi ziyaret ettiğinde sizin için otomatik olarak sayfa yükü ve ağ isteği ölçümlerini toplamasını söylemek için bir satır eklememiz gerekiyor!

  1. web-start/src/index.js , Performance Monitoring'i başlatmak için mevcut TODO altına aşağıdaki satırı ekleyin.

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

İlk giriş gecikmesini ölçün (isteğe bağlı)

Bir kullanıcı etkileşimine yanıt veren tarayıcı, kullanıcılarınıza uygulamanızın yanıt verme hızı hakkında ilk izlenimlerini verdiği için ilk giriş gecikmesi yararlıdır.

İlk giriş gecikmesi, kullanıcı bir düğmeyi veya köprüyü tıklatmak gibi sayfadaki bir öğeyle ilk etkileşim kurduğunda başlar. Tarayıcı girişe yanıt verdikten hemen sonra durur; bu, tarayıcının sayfanızın içeriğini yüklemekle veya ayrıştırmakla meşgul olmadığı anlamına gelir.

İlk giriş gecikmesini ölçmek isterseniz, aşağıdaki kodu doğrudan eklemeniz gerekir.

  1. public/index.html açın.
  2. Aşağıdaki satırdaki script etiketini kaldırın.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

İlk giriş gecikmeli çoklu doldurma hakkında daha fazla bilgi edinmek için belgelere bakın.

Performans verilerini görüntüle

Sitenizi henüz dağıtmadığınız için (bir sonraki adımda dağıtacaksınız), kullanıcıların dağıtılan sitenizle etkileşime girmesinden sonraki 30 dakika içinde Firebase konsolunda göreceğiniz sayfa yükleme performansıyla ilgili ölçümleri gösteren bir ekran görüntüsü burada :

29389131150f33d7.png

Performans İzleme SDK'sını uygulamanıza entegre ettiğinizde, uygulamanız performansın birkaç kritik yönünü otomatik olarak izlemeye başlamadan önce başka bir kod yazmanız gerekmez. Web uygulamaları için SDK, ilk içerikli boyama, kullanıcıların uygulamanızla etkileşim kurma yeteneği ve daha fazlası gibi özellikleri günlüğe kaydeder.

Ayrıca uygulamanızın belirli yönlerini ölçmek için özel izler, ölçümler ve özellikler de ayarlayabilirsiniz. Özel izler ve ölçümler ve özel nitelikler hakkında daha fazla bilgi edinmek için belgeleri ziyaret edin.

15. Firebase Hosting'i kullanarak uygulamanızı dağıtın

Firebase, varlıklarınıza ve web uygulamalarınıza hizmet etmek için bir barındırma hizmeti sunar. Firebase CLI'yi kullanarak dosyalarınızı Firebase Hosting'e dağıtabilirsiniz. Dağıtımdan önce, hangi yerel dosyaların dağıtılması gerektiğini firebase.json dosyanızda belirtmeniz gerekir. Bu kod laboratuvarı için, bunu sizin için zaten yaptık çünkü bu adım, bu kod laboratuvarı sırasında dosyalarımızı sunmak için 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 ./public dizinindeki ( "public": "./public" ) tüm dosyaları dağıtmak istediğimizi söyler.

  1. Komut satırınızın uygulamanızın yerel web-start ​​dizinine eriştiğinden emin olun.
  2. Aşağıdaki komutu çalıştırarak dosyalarınızı Firebase projenize dağıtın:
firebase deploy --except functions
  1. 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
  1. Kendi Firebase alt alan adlarınızdan ikisinde Firebase Hosting'i kullanarak 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 komutunu ç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 alan oluşturma 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.

16. Tebrikler!

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

Neyi kapsadık

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

Sonraki adımlar

Learn more

,

1. Overview

In this codelab, you'll learn how to use Firebase to easily create web applications by implementing and deploying a chat client using Firebase products and services.

3b1284f5144b54f6.png

What you'll learn

  • Sync data using Cloud Firestore and Cloud Storage for Firebase.
  • Authenticate your users using Firebase Authentication.
  • Deploy your web app on Firebase Hosting.
  • Send notifications with Firebase Cloud Messaging.
  • Collect your web app's performance data.

What you'll need

  • The IDE/text editor of your choice, such as WebStorm , Atom , Sublime , or VS Code
  • The package manager npm , which typically comes with Node.js
  • A terminal/console
  • A browser of your choice, such as Chrome
  • The codelab's sample code (See the next step of the codelab for how to get the code.)

2. Get the sample code

Clone the codelab's GitHub repository from the command line:

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

Alternatively, if you do not have git installed, you can download the repository as a ZIP file .

Import the starter app

Using your IDE, open or import the 📁 web-start directory from the cloned repository. This 📁 web-start directory contains the starting code for the codelab, which will be a fully functional chat web app.

3. Create and set up a Firebase project

Create a Firebase project

  1. Sign in to Firebase .
  2. In the Firebase console, click Add Project , and then name your Firebase project FriendlyChat . Remember the project ID for your Firebase project.
  3. Uncheck Enable Google Analytics for this project
  4. Click Create Project .

The application that we're going to build uses Firebase products that are available for web apps:

  • Firebase Authentication to easily allow your users to sign into your app.
  • Cloud Firestore to save structured data on the cloud and get instant notification when data changes.
  • Cloud Storage for Firebase to save files in the cloud.
  • Firebase Hosting to host and serve your assets.
  • Firebase Cloud Messaging to send push notifications and display browser popup notifications.
  • Firebase Performance Monitoring to collect user performance data for your app.

Some of these products need special configuration or need to be enabled using the Firebase console.

Add a Firebase web app to the project

  1. Click the web icon 58d6543a156e56f9.png to create a new Firebase web app.
  2. Register the app with the nickname Friendly Chat , then check the box next to Also set up Firebase Hosting for this app . Click Register app .
  3. On the next step, you'll see a configuration object. Copy just the JS object (not the surrounding HTML) into firebase-config.js

Register web app screenshot

Enable Google sign-in for Firebase Authentication

To allow users to sign in to the web app with their Google accounts, we'll use the Google sign-in method.

You'll need to enable Google sign-in:

  1. In the Firebase console, locate the Build section in the left panel.
  2. Click Authentication , then click the Sign-in method tab (or click here to go directly there).
  3. Enable the Google sign-in provider, then click Save .
  4. Set the public-facing name of your app to Friendly Chat and choose a Project support email from the dropdown menu.
  5. Configure your OAuth consent screen in the Google Cloud Console and add a logo:

d89fb3873b5d36ae.png

Enable Cloud Firestore

The web app uses Cloud Firestore to save chat messages and receive new chat messages.

You'll need to enable Cloud Firestore:

  1. In the Firebase console's Build section, click Firestore Database .
  2. Click Create database in the Cloud Firestore pane.

729991a081e7cd5.png

  1. Select the Start in test mode option, then click Next after reading the disclaimer about the security rules.

Test mode ensures that we can freely write to the database during development. We'll make our database more secure later on in this codelab.

77e4986cbeaf9dee.png

  1. Set the location where your Cloud Firestore data is stored. You can leave this as the default or choose a region close to you. Click Done to provision Firestore.

9f2bb0d4e7ca49c7.png

Enable Cloud Storage

The web app uses Cloud Storage for Firebase to store, upload, and share pictures.

You'll need to enable Cloud Storage:

  1. In the Firebase console's Build section, click Storage .
  2. If there's no Get Started button, it means that Cloud storage is already enabled, and you don't need to follow the steps below.
  3. Click Get Started .
  4. Read the disclaimer about security rules for your Firebase project, then click Next .

With the default security rules, any authenticated user can write anything to Cloud Storage. We'll make our storage more secure later in this codelab.

62f1afdcd1260127.png

  1. The Cloud Storage location is preselected with the same region you chose for your Cloud Firestore database. Click Done to complete the setup.

1d7f49ebaddb32fc.png

4. Install the Firebase command-line interface

The Firebase command-line interface (CLI) allows you to use Firebase Hosting to serve your web app locally, as well as to deploy your web app to your Firebase project.

  1. Install the CLI by running the following npm command:
npm -g install firebase-tools
  1. Verify that the CLI has been installed correctly by running the following command:
firebase --version

Make sure that the version of the Firebase CLI is v4.1.0 or later.

  1. Authorize the Firebase CLI by running the following command:
firebase login

We've set up the web app template to pull your app's configuration for Firebase Hosting from your app's local directory (the repository that you cloned earlier in the codelab). But to pull the configuration, we need to associate your app with your Firebase project.

  1. Make sure that your command line is accessing your app's local web-start directory.
  2. Associate your app with your Firebase project by running the following command:
firebase use --add
  1. When prompted, select your Project ID , then give your Firebase project an alias.

An alias is useful if you have multiple environments (production, staging, etc). However, for this codelab, let's just use the alias of default .

  1. Follow the remaining instructions on your command line.

5. Run the starter app locally

Now that you have imported and configured your project, you are ready to run the web app for the first time.

  1. In a console from the web-start directory, run the following Firebase CLI command:
firebase serve --only hosting
  1. Your command line should display the following response:
✔  hosting: Local server: http://localhost:5000

We're using the Firebase Hosting emulator to serve our app locally. The web app should now be available from http://localhost:5000 . All the files that are located under the public subdirectory are served.

  1. Using your browser, open your app at http://localhost:5000 .

You should see your FriendlyChat app's UI, which is not (yet!) functioning:

4c23f9475228cef4.png

The app cannot do anything right now, but with your help it will soon! We've only laid out the UI for you so far.

Let's now build a realtime chat!

6. Import and configure Firebase

Import the Firebase SDK

We need to import the Firebase SDK into the app. There are multiple ways to do this as described in our documentation . For instance, you can import the library from our CDN. Or you can install it locally using npm, then package it in your app if you're using Browserify.

We're going to get the Firebase SDK from npm and use Webpack to bundle our code. We're doing this so that Webpack can remove any unnecessary code, keeping our JS bundle size small to make sure our app loads as quickly as possible. For this codelab, we've already created a web-start/package.json file that includes the Firebase SDK as a dependency, as well as imported the needed functions at the top of web-start/src/index.js .

package.json

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

During this codelab, we're going to use Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging, and Performance Monitoring, so we're importing all of their libraries. In your future apps, make sure that you're only importing the parts of Firebase that you need, to shorten the load time of your app.

Install the Firebase SDK and start your Webpack build

We need to run a few commands to get our app's build going.

  1. Open a new terminal window
  2. Make sure you're in the web-start directory
  3. Run npm install to download the Firebase SDK
  4. Run npm run start to start up Webpack. Webpack will now continually rebuild our cource code for the rest of the codelab.

Configure Firebase

We also need to configure the Firebase SDK to tell it which Firebase project that we're using.

  1. Go to your Project settings in the Firebase console
  2. In the "Your apps" card, select the nickname of the app for which you need a config object.
  3. Select "Config" from the Firebase SDK snippet pane.
  4. Copy the config object snippet, then add it to web-start/src/firebase-config.js .

firebase-config.js

const config = {
  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",
};

Now, go to the bottom of web-start/src/index.js and initialize Firebase:

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

7. Set up user sign-in

The Firebase SDK should now be ready to use since it's imported and initialized in index.js . We're now going to implement user sign-in using Firebase Authentication .

Authenticate your users with Google Sign-In

In the app, when a user clicks the Sign in with Google button, the signIn function is triggered. (We already set that up for you!) For this codelab, we want to authorize Firebase to use Google as the identity provider. We'll use a popup, but several other methods are available from Firebase.

  1. In the web-start directory, in the subdirectory src/ , open index.js .
  2. Find the function signIn .
  3. Replace the entire function with the following code.

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

The signOut function is triggered when the user clicks the Sign out button.

  1. Go back to the file src/index.js .
  2. Find the function signOutUser .
  3. Replace the entire function with the following code.

index.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

Track the authentication state

To update our UI accordingly, we need a way to check if the user is signed in or signed out. With Firebase Authentication, you can register an observer on the authentication state that will be triggered each time the authentication state changes.

  1. Go back to the file src/index.js .
  2. Find the function initFirebaseAuth .
  3. Replace the entire function with the following code.

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

The code above registers the function authStateObserver as the authentication state observer. It will trigger each time the authentication state changes (when the user signs in or signs out). It's at this point that we'll update the UI to display or hide the sign-in button, the sign-out button, the signed-in user's profile picture, and so on. All of these UI parts have already been implemented.

Display the information of the signed-in user

We want to display the signed-in user's profile picture and user name in the top bar of our app. In Firebase, the signed-in user's data is always available in the currentUser object. Earlier, we set up the authStateObserver function to trigger when the user signs in so that our UI updates accordingly. It will call getProfilePicUrl and getUserName when triggered.

  1. Go back to the file src/index.js .
  2. Find the functions getProfilePicUrl and getUserName .
  3. Replace both functions with the following code.

index.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

We display an error message if the user tries to send messages when the user isn't signed in. (You can try it, though!) So, we need to detect if the user is actually signed in.

  1. Go back to the file src/index.js .
  2. Find the function isUserSignedIn .
  3. Replace the entire function with the following code.

index.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

Test signing in to the app

  1. If your app is still being served, refresh your app in the browser. Otherwise, run firebase serve --only hosting on the command line to start serving the app from http://localhost:5000 , and then open it in your browser.
  2. Sign in to the app using the sign-in button and your Google account. If you see an error message stating auth/operation-not-allowed , check to make sure that you enabled Google Sign-in as an authentication provider in the Firebase console.
  3. After signing in, your profile picture and user name should be displayed: c7401b3d44d0d78b.png

8. Write messages to Cloud Firestore

In this section, we'll write some data to Cloud Firestore so that we can populate the app's UI. This can be done manually with the Firebase console , but we'll do it in the app itself to demonstrate a basic Cloud Firestore write.

Data model

Cloud Firestore data is split into collections, documents, fields, and subcollections. We will store each message of the chat as a document in a top-level collection called messages .

688d7bc5fb662b57.png

Add messages to Cloud Firestore

To store the chat messages that are written by users, we'll use Cloud Firestore .

In this section, you'll add the functionality for users to write new messages to your database. A user clicking the SEND button will trigger the code snippet below. It adds a message object with the contents of the message fields to your Cloud Firestore instance in the messages collection. The add() method adds a new document with an automatically generated ID to the collection.

  1. Go back to the file src/index.js .
  2. Find the function saveMessage .
  3. Replace the entire function with the following code.

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

Test sending messages

  1. If your app is still being served, refresh your app in the browser. Otherwise, run firebase serve --only hosting on the command line to start serving the app from http://localhost:5000 , and then open it in your browser.
  2. After signing in, enter a message such as "Hey there!", and then click SEND . This will write the message into Cloud Firestore. However, you won't yet see the data in your actual web app because we still need to implement retrieving the data (the next section of the codelab).
  3. You can see the newly added message in your Firebase Console. Open your Firebase Console. Under the Build section click Firestore Database (or click here and select your project) and you should see the messages collection with your newly added message:

6812efe7da395692.png

9. Read messages

Synchronize messages

To read messages in the app, we'll need to add listeners that trigger when data changes and then create a UI element that shows new messages.

We'll add code that listens for newly added messages from the app. In this code, we'll register the listener that listens for changes made to the data. We'll only display the last 12 messages of the chat to avoid displaying a very long history upon loading.

  1. Go back to the file src/index.js .
  2. Find the function loadMessages .
  3. Replace the entire function with the following code.

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

To listen to messages in the database, we create a query on a collection by using the collection function to specify which collection the data that we want to listen to is in. In the code above, we're listening to the changes within the messages collection, which is where the chat messages are stored. We're also applying a limit by only listening to the last 12 messages using .limit(12) and ordering the messages by date using orderBy('timestamp', 'desc') to get the 12 newest messages.

The onSnapshot function takes a query as its first parameter, and a callback function as its second. The callback function will be triggered when there are any changes to documents that match the query. This could be if a message gets deleted, modified, or added. You can read more about this in the Cloud Firestore documentation .

Test synchronizing messages

  1. If your app is still being served, refresh your app in the browser. Otherwise, run firebase serve --only hosting on the command line to start serving the app from http://localhost:5000 , and then open it in your browser.
  2. The messages that you created earlier into the database should be displayed in the FriendlyChat UI (see below). Feel free to write new messages; they should appear instantly.
  3. (Optional) You can try manually deleting, modifying, or adding new messages directly in the Database section of the Firebase console; any changes should be reflected in the UI.

Congratulations! You are reading Cloud Firestore documents in your app!

2168dec79b573d07.png

10. Send images

We'll now add a feature that shares images.

While Cloud Firestore is good for storing structured data, Cloud Storage is better suited for storing files. Cloud Storage for Firebase is a file/blob storage service, and we'll use it to store any images that a user shares using our app.

Save images to Cloud Storage

For this codelab, we've already added for you a button that triggers a file picker dialog. After selecting a file, the saveImageMessage function is called, and you can get a reference to the selected file. The saveImageMessage function accomplishes the following:

  1. Creates a "placeholder" chat message in the chat feed, so that users see a "Loading" animation while we upload the image.
  2. Uploads the image file to Cloud Storage to this path: /<uid>/<messageId>/<file_name>
  3. Generates a publicly readable URL for the image file.
  4. Updates the chat message with the newly uploaded image file's URL in lieu of the temporary loading image.

Now you'll add the functionality to send an image:

  1. Go back to the file src/index.js .
  2. Find the function saveImageMessage .
  3. Replace the entire function with the following code.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), 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.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Test sending images

  1. If your app is still being served, refresh your app in the browser. Otherwise, run firebase serve --only hosting on the command line to start serving the app from http://localhost:5000 , and then open it in your browser.
  2. After signing in, click the image upload button 13734cb66773e5a3.png and select an image file using the file picker. If you're looking for an image, feel free to use this nice picture of a coffee cup .
  3. A new message should appear in the app's UI with your selected image: 3b1284f5144b54f6.png

If you try adding an image while not signed in, you should see a Toast notification telling you that you must sign in to add images.

11. Show notifications

We'll now add support for browser notifications. The app will notify users when new messages are posted in the chat. Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably deliver messages and notifications at no cost.

Add the FCM service worker

The web app needs a service worker that will receive and display web notifications.

  1. From the web-start directory, in the src directory, open firebase-messaging-sw.js .
  2. Add the following content to that file.

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

The service worker simply needs to load and initialize the Firebase Cloud Messaging SDK, which will take care of displaying notifications.

Get FCM device tokens

When notifications have been enabled on a device or browser, you'll be given a device token . This device token is what we use to send a notification to a particular device or particular browser.

When the user signs-in, we call the saveMessagingDeviceToken function. That's where we'll get the FCM device token from the browser and save it to Cloud Firestore.

  1. Go back to the file src/index.js .
  2. Find the function saveMessagingDeviceToken .
  3. Replace the entire function with the following code.

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().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(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

However, this code won't work initially. For your app to be able to retrieve the device token, the user needs to grant your app permission to show notifications (next step of the codelab).

Request permissions to show notifications

When the user has not yet granted your app permission to show notifications, you won't be given a device token. In this case, we call the firebase.messaging().requestPermission() method, which will display a browser dialog asking for this permission ( in supported browsers ).

8b9d0c66dc36153d.png

  1. Go back to the file src/index.js .
  2. Find the function requestNotificationsPermissions .
  3. Replace the entire function with the following code.

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

Get your device token

  1. If your app is still being served, refresh your app in the browser. Otherwise, run firebase serve --only hosting on the command line to start serving the app from http://localhost:5000 , and then open it in your browser.
  2. After signing in, the notifications permission dialog should appear: bd3454e6dbfb6723.png
  3. Click Allow .
  4. Open the JavaScript console of your browser. You should see the following message: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. Copy your device token. You'll need it for the next stage of the codelab.

Send a notification to your device

Now that you have your device token, you can send a notification.

  1. Open the Cloud Messaging tab of the Firebase console .
  2. Click "New Notification"
  3. Enter a notification title and notification text.
  4. On the right side of the screen, click "send a test message"
  5. Enter the device token you copied from the JavaScript console of your browser, then click the plus ("+") sign
  6. Click "test"

If your app is in the foreground, you'll see the notification in the JavaScript console.

If your app is in the background, a notification should appear in your browser, as in this example:

de79e8638a45864c.png

12. Cloud Firestore security rules

View database security rules

Cloud Firestore uses a specific rules language to define access rights, security, and data validations.

When setting up the Firebase project at the beginning of this codelab, we chose to use "Test mode" default security rules so that we didn't restrict access to the datastore. In the Firebase console , in the Database section's Rules tab, you can view and modify these rules.

Right now, you should see the default rules, which do not restrict access to the datastore. This means that any user can read and write to any collections in your datastore.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

We'll update the rules to restrict things by using the following rules:

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

Update database security rules

There are two ways to edit your database security rules, either in the Firebase console or from a local rules file deployed using the Firebase CLI.

To update security rules in the Firebase console:

  1. Go to the Database section from the left panel, and then click the Rules tab.
  2. Replace the default rules that are already in the console with the rules shown above.
  3. Click Publish .

To update security rules from a local file:

  1. From the web-start directory, open firestore.rules .
  2. Replace the default rules that are already in the file with the rules shown above.
  3. From the web-start directory, open firebase.json .
  4. Add the firestore.rules attribute pointing to firestore.rules , as shown below. (The hosting attribute should already be in the file.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Deploy the security rules using the Firebase CLI by running the following command:
firebase deploy --only firestore
  1. Your command line should display the following response:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

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

13. Cloud Storage security rules

View Cloud Storage security rules

Cloud Storage for Firebase uses a specific rules language to define access rights, security, and data validations.

When setting up the Firebase project at the beginning of this codelab, we chose to use the default Cloud Storage security rule that only allows authenticated users to use Cloud Storage. In the Firebase console , in the Storage section's Rules tab, you can view and modify rules. You should see the default rule which allows any signed-in user to read and write any files in your storage bucket.

rules_version = '2';

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

We'll update the rules to do the following:

  • Allow each user to write only to their own specific folders
  • Allow anyone to read from Cloud Storage
  • Make sure that the files uploaded are images
  • Restrict the size of the images that can be uploaded to maximum 5 MB

This can be implemented using the following rules:

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

Update Cloud Storage security rules

There are two ways to edit your storage security rules: either in the Firebase console or from a local rules file deployed using the Firebase CLI.

To update security rules in the Firebase console:

  1. Go to the Storage section from the left panel, and then click the Rules tab.
  2. Replace the default rule that is already in the console with the rules shown above.
  3. Click Publish .

To update security rules from a local file:

  1. From the web-start directory, open storage.rules .
  2. Replace the default rules that are already in the file with the rules shown above.
  3. From the web-start directory, open firebase.json .
  4. Add the storage.rules attribute pointing to the storage.rules file, as shown below. (The hosting and database attribute should already be in the file.)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Deploy the security rules using the Firebase CLI by running the following command:
firebase deploy --only storage
  1. Your command line should display the following response:
=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

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

14. Collect performance data

You can use the Performance Monitoring SDK to collect real-world performance data from your app and then review and analyze that data in the Firebase console. Performance Monitoring helps you to understand where and when the performance of your app can be improved so that you can use that information to fix performance issues.

There are various ways to integrate with the Firebase Performance Monitoring JavaScript SDK. In this codelab, we enabled Performance Monitoring from Hosting URLs . Refer to the documentation to see other methods of enabling the SDK.

Automatic traces

Since we already import getPerformance at the top of web-start/src/index.js , we just need to add one line to tell Performance Monitoring to automatically collect page load and network request metrics for you when users visit your deployed site!

  1. In web-start/src/index.js , add the following line below the existing TODO to initialize Performance Monitoring.

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

Measure first input delay (optional)

First input delay is useful since the browser responding to a user interaction gives your users their first impressions about the responsiveness of your app.

First input delay starts when the user first interacts with an element on the page, like clicking a button or hyperlink. It stops immediately after the browser is able to respond to the input, meaning that the browser isn't busy loading or parsing your page's content.

If you'd like to measure first input delay, you'll need to include the following code directly.

  1. Open public/index.html .
  2. Uncomment the script tag on the following line.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

To read more about the first input delay polyfill, take a look at the documentation .

View performance data

Since you haven't deployed your site yet (you'll deploy it in the next step), here's a screenshot showing the metrics about page load performance that you'll see in the Firebase console within 30 minutes of users interacting with your deployed site:

29389131150f33d7.png

When you integrate the Performance Monitoring SDK into your app, you don't need to write any other code before your app starts automatically monitoring several critical aspects of performance. For web apps, the SDK logs aspects like first contentful paint, ability for users to interact with your app, and more.

You can also set up custom traces, metrics, and attributes to measure specific aspects of your app. Visit the documentation to learn more about custom traces and metrics and custom attributes .

15. Deploy your app using Firebase Hosting

Firebase offers a hosting service to serve your assets and web apps. You can deploy your files to Firebase Hosting using the Firebase CLI. Before deploying, you need to specify in your firebase.json file which local files should be deployed. For this codelab, we've already done this for you because this step was required to serve our files during this codelab. The hosting settings are specified under the hosting attribute:

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

These settings tell the CLI that we want to deploy all files in the ./public directory ( "public": "./public" ).

  1. Make sure that your command line is accessing your app's local web-start directory.
  2. Deploy your files to your Firebase project by running the following command:
firebase deploy --except functions
  1. The console should display the following:
=== 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
  1. Visit your web app that's now fully hosted on a global CDN using Firebase Hosting at two of your very own Firebase subdomains:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

Alternatively, you can run firebase open hosting:site in the command line.

Visit the documentation to learn more about how Firebase Hosting works .

Go to your project's Firebase console Hosting section to view useful hosting information and tools, including the history of your deploys, the functionality to roll back to previous versions of your app, and the workflow to set up a custom domain.

16. Congratulations!

You've used Firebase to build a real-time chat web application!

What we've covered

  • Firebase Authentication
  • Cloud Firestore
  • Firebase SDK for Cloud Storage
  • Firebase Cloud Messaging
  • Firebase Performance Monitoring
  • Firebase Hosting

Next steps

Learn more