Firebase web kod laboratuvarı

1. Genel Bakış

Bu kod laboratuvarında, Firebase ürün ve hizmetlerini kullanarak bir sohbet istemcisi uygulayıp konuşlandırarak 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 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 📁 web-start dizinini açın veya içe aktarın. Bu 📁 web-start ​​dizini, tamamen işlevsel bir sohbet web uygulaması olacak 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 'ye tıklayın ve ardından Firebase projenizi FriendlyChat olarak adlandırın. Firebase projeniz için proje kimliğini unutmayın.
  3. Bu proje için Google Analytics'i etkinleştir'in işaretini kaldırın
  4. Proje Oluştur'u tıklayın.

Oluşturacağımız uygulama, web uygulamaları için mevcut olan 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

  1. web simgesini tıklayın 58d6543a156e56f9.png yeni bir Firebase web uygulaması oluşturmak için.
  2. 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.
  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 Authentication için Google ile 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 ile oturum açmayı etkinleştirmeniz gerekecek:

  1. Firebase konsolunda, sol paneldeki Derleme bölümünü bulun.
  2. 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 ).
  3. Google oturum açma sağlayıcısını etkinleştirin, 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. OAuth onay ekranınızı Google Cloud Console'da yapılandırın ve bir logo ekleyin:

d89fb3873b5d36ae.png

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:

  1. Firebase konsolunun Oluşturma bölümünde, Firestore Veritabanı'nı 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 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 yazabilmemizi sağlar. Veritabanımızı daha sonra bu kod laboratuvarında daha güvenli hale getireceğiz.

77e4986cbeaf9dee.png

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

9f2bb0d4e7ca49c7.png

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:

  1. Firebase konsolunun Derleme bölümünde, Depolama öğesini tıklayın.
  2. 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.
  3. Başlayın'ı tıklayın.
  4. Firebase projeniz için güvenlik kuralları hakkındaki sorumluluk reddi beyanını okuyun ve ardından İleri 'yi tıklayın.

Varsayılan güvenlik kurallarıyla, kimliği doğrulanmış herhangi bir kullanıcı Cloud Storage'a her şeyi yazabilir. Bu kod laboratuvarında daha sonra depolama alanımı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ü 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.

  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 yüklendiğini doğrulayın:
firebase --version

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

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

Web uygulaması şablonunu, uygulamanızın Firebase Barındırma için yapılandırmasını uygulamanızın yerel dizininden (kod laboratuvarında daha önce klonladığınız depo) çekmek için 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.

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.

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

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

  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 Barındırma ö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 yapamıyor, ancak sizin yardımınızla yakında yapacak! Şimdiye kadar yalnızca sizin için 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'sını uygulamaya aktarmamız gerekiyor. Belgelerimizde açıklandığı gibi bunu yapmanın birden çok yolu vardır. Örneğin, kitaplığı 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 olabildiğince çabuk yüklenmesini sağlamak için JS paket boyutumuzu küçük tutuyoruz. Bu kod laboratuvarı için, Firebase SDK'yı bir bağımlılık olarak içeren bir web-start/package.json dosyası oluşturduk ve gerekli işlevleri web-start/src/index.js dosyasının en üstüne 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 kod laboratuvarı sırasında Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging ve Performance Monitoring kullanacağız, dolayısıyla tüm kitaplıklarını içe aktarıyoruz. 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.

Firebase SDK'sını kurun ve Webpack derlemenizi başlatın

Uygulamamızın derlemesini başlatmak 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. Webpack'i başlatmak için npm run start çalıştırın. Webpack artık kod laboratuvarının geri kalanı için kaynak kodumuzu sürekli olarak yeniden oluşturacaktır.

Firebase'i Yapılandır

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 ihtiyaç duyduğunuz uygulamanın takma adını seçin.
  3. Firebase SDK parçacığı bölmesinden "Yapılandır"ı seçin.
  4. Yapılandırma nesnesi snippet'ini kopyalayın, ardından web-start/src/firebase-config.js dosyasına ekleyin.

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 dosyasının en altına gidin ve Firebase'i başlatın:

index.js

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

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

Firebase SDK'sı, içe aktarıldığı ve index.js 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 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 signIn işlevi tetiklenir. (Bunu sizin için zaten ayarladık!) Bu codelab için, Firebase'e kimlik sağlayıcı olarak Google'ı kullanma yetkisi vermek istiyoruz. Bir açılır pencere kullanacağız, ancak Firebase'de başka birçok yöntem de mevcuttur.

  1. web-start ​​dizininde, src/ alt dizininde index.js dosyasını 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);
}

signOut işlevi, kullanıcı Oturumu kapat düğmesine tıkladığında 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

Kullanıcı arayüzümüzü buna göre güncellemek için, kullanıcının oturum açmış mı yoksa oturumu kapatmış mı olduğunu 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üle

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

  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örüntülüyoruz. (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ç 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.
  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 konsoluyla manuel olarak yapılabilir, ancak temel bir Cloud Firestore yazısını göstermek için uygulamanın kendisinde yapacağı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 saklayacağız.

688d7bc5fb662b57.png

Cloud Firestore'a mesaj ekleyin

Kullanıcılar tarafından yazılan sohbet mesajlarını depolamak için Cloud Firestore kullanacağı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.

  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 (kod laboratuvarının bir sonraki bölümü) verileri henüz gerçek web uygulamanızda görmeyeceksiniz .
  3. Yeni eklenen mesajı Firebase Konsolunuzda görebilirsiniz. Firebase Konsolunuzu açın. Derleme bölümünün altında Firestore Veritabanı'na tıklayın (veya buraya tıklayın ve projenizi seçin) ve yeni eklediğiniz mesajla birlikte mesaj koleksiyonunu görmelisiniz:

6812efe7da395692.png

9. Mesajları oku

Mesajları senkronize et

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

Uygulamadan yeni eklenen mesajları dinleyen bir 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östereceğiz.

  1. src/index.js dosyasına geri dönün.
  2. loadMessages işlevini 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 ise collection fonksiyonunu kullanarak bir koleksiyon üzerinde sorgu oluşturarak dinlemek istediğimiz verinin hangi koleksiyonda olduğunu belirtiyoruz. 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 sorgu ve ikincisi olarak bir geri arama işlevi alır. Sorguyla eşleşen belgelerde herhangi bir değişiklik olduğunda geri arama işlevi tetiklenecektir. Bu, bir mesajın silinmesi, değiştirilmesi veya eklenmesi 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. Görüntüleri gönderin

Ş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. 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 kullanacağız.

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

Bu codelab için, sizin için bir 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. Sohbet akışında bir "yer tutucu" sohbet mesajı oluşturur, böylece biz resmi yüklerken kullanıcıların bir "Yükleniyor" animasyonu görmesini sağlar.
  2. Görüntü dosyasını Cloud Storage'a şu yola yükler: /<uid>/<messageId>/<file_name>
  3. Görüntü dosyası için herkesin okuyabileceği bir URL oluşturur.
  4. Sohbet mesajını, geçici yüklenen resim yerine yeni yüklenen resim dosyasının URL'siyle günceller.

Şimdi 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);
  }
}

Görüntüleri göndermeyi 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. Giriş yaptıktan sonra resim yükle butonuna tıklayın 13734cb66773e5a3.png 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.
  3. Uygulamanın kullanıcı arayüzünde seçtiğiniz resimle birlikte yeni bir mesaj görünmelidir: 3b1284f5144b54f6.png

Oturum açmamışken bir resim eklemeye çalışırsanız, resim eklemek için oturum açmanız gerektiğini söyleyen bir Toast 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ı 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.

  1. web-start ​​dizininden, src dizininde firebase-messaging-sw.js dosyasını açın.
  2. Aşağıdaki içeriği o 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, bildirimlerin görüntülenmesiyle ilgilenecek olan Firebase Bulut Mesajlaşma SDK'sını 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ığımız şeydir.

Kullanıcı oturum açtığında, saveMessagingDeviceToken işlevini çağırırız. FCM cihaz belirtecini tarayıcıdan alıp 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ış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 firebase.messaging().requestPermission() yöntemini çağırırız ( desteklenen tarayıcılarda ).

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 jetonunuzu 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, bildirim izni 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. Şu mesajı görmelisiniz: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. 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.

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

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 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üncelleyeceğiz:

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

Veritabanı güvenlik kurallarını güncelleme

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. Halihazırda konsolda bulunan varsayılan kuralları yukarıda gösterilen kurallarla değiştirin.
  3. Yayınla'yı tıklayın.

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

  1. web-start ​​dizininden firestore.rules dosyasını açın.
  2. Zaten dosyada bulunan varsayılan kuralları yukarıda gösterilen kurallarla değiştirin.
  3. web-start ​​dizininden firebase.json dosyasını açın.
  4. Aşağıda gösterildiği gibi, firestore.rules firestore.rules işaret eden 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ı

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

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

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

Depolama güvenlik kurallarınızı düzenlemenin iki yolu vardır: Firebase konsolunda veya Firebase CLI kullanılarak dağıtılan bir 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.

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

  1. web-start ​​dizininden, storage.rules açın.
  2. Zaten dosyada bulunan varsayılan kuralları yukarıda gösterilen kurallarla değiştirin.
  3. web-start ​​dizininden firebase.json dosyasını açın.
  4. Aşağıda gösterildiği gibi, storage.rules dosyasına işaret eden storage.rules özniteliğini 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 ve ardından bu verileri Firebase konsolunda inceleyip analiz etmek için Performance Monitoring SDK'yı kullanabilirsiniz. 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'sı ile entegre etmenin çeşitli yolları vardır. Bu kod laboratuvarında, 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 zaten web-start/src/index.js en üstüne içe aktardığımız için, Performance Monitoring'e kullanıcılar dağıtılan sitenizi ziyaret ettiğinde sayfa yükleme ve ağ isteği ölçümlerini sizin için otomatik olarak toplamasını söyleyen bir satır eklememiz yeterli!

  1. web-start/src/index.js , Performans İzlemeyi 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 verebilirliği hakkında ilk izlenimlerini verdiğinden , ilk giriş gecikmesi kullanışlıdır.

İlk giriş gecikmesi, kullanıcı sayfadaki bir öğeyle, örneğin bir düğmeyi veya köprüyü tıklatmak gibi ilk etkileşimde bulunduğunda başlar. Tarayıcı girişe yanıt verdikten hemen sonra durur, bu da 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 dosyasını açın.
  2. Aşağıdaki satırdaki script etiketinin açıklamasını 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 (sonraki adımda dağıtacaksınız), kullanıcıların dağıtılan sitenizle etkileşim kurmasından sonraki 30 dakika içinde Firebase konsolunda göreceğiniz sayfa yükleme performansıyla ilgili metrikleri gösteren bir ekran görüntüsünü burada bulabilirsiniz. :

29389131150f33d7.png

Performance Monitoring SDK'yı 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şime girme yeteneği ve daha fazlası gibi özellikleri günlüğe kaydeder.

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

15. 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ık çü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ğ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 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.

16. Tebrikler!

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

Neleri ele aldık

  • 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

Learn more