Google 致力于为黑人社区推动种族平等。查看具体举措

Firebase web kod laboratuvarı

Bu codelab, kullanmak öğreneceksiniz Firebase kolayca uygulanması ve Firebase ürün ve hizmetlerini kullanarak bir sohbet istemcisi dağıtarak web uygulamaları yaratmak için.

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

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 start web-start dizini, tamamen işlevsel bir sohbet web uygulaması olacak olan codelab için başlangıç ​​kodunu içerir.

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. Kalan adımları tıklayın. Şimdi talimatları izlemenize gerek yok; bunlar bu codelab'in sonraki adımlarında ele alınacaktır.

ea9ab0db531a104c.png

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 modu seçeneğinde Başlat seçin, ardından güvenlik kuralları hakkında yasal uyarıyı okuduktan sonra İleri'yi 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

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.

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!

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.

Uygulamamızı sunmak için Firebase Hosting kullandığımızdan, index.html dosyasındaki ( web-start/public/ dizininizde bulunan) yerel URL'leri içe index.html . Bu codelab için, aşağıdaki satırları sizin için index.html dosyasının altına zaten ekledik, ancak orada olduklarını bir kez daha kontrol edebilirsiniz.

index.html

<script src="/__/firebase/8.6.7/firebase-app.js"></script>
<script src="/__/firebase/8.6.7/firebase-auth.js"></script>
<script src="/__/firebase/8.6.7/firebase-storage.js"></script>
<script src="/__/firebase/8.6.7/firebase-messaging.js"></script>
<script src="/__/firebase/8.6.7/firebase-firestore.js"></script>
<script src="/__/firebase/8.6.7/firebase-performance.js"></script>

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'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. Firebase Hosting kullandığımız için, bu yapılandırmayı sizin için yapacak özel bir komut dosyasını içe aktarabilirsiniz. Yine, bu codelab için, aşağıdaki satırı sizin için public/index.html dosyasının en altına ekledik, ancak orada olduğunu bir kez daha kontrol edin.

index.html

<script src="/__/firebase/init.js"></script>

Bu komut dosyası, daha önce firebase use --add çalıştırırken firebase use --add projesini temel alan Firebase proje yapılandırmanızı içerir.

Proje yapılandırmanızın nasıl göründüğünü görmek için init.js dosyasını incelemekten çekinmeyin. Bunu yapmak için tarayıcınızda http://localhost:5000/__/firebase/init.js dosyasını açın. Aşağıdakine benzer bir şey görmelisiniz:

/__/firebase/init.js

if (typeof firebase === 'undefined') throw new Error('hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js');
firebase.initializeApp({
  "apiKey": "qwertyuiop_asdfghjklzxcvbnm1234568_90",
  "databaseURL": "https://friendlychat-1234.firebaseio.com",
  "storageBucket": "friendlychat-1234.appspot.com",
  "authDomain": "friendlychat-1234.firebaseapp.com",
  "messagingSenderId": "1234567890",
  "projectId": "friendlychat-1234",
  "appId": "1:1234567890:web:123456abcdef"
});

Firebase SDK, içe aktarıldığından ve index.html 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 public/scripts/ alt dizininde main.js public/scripts/ açın.
  2. signIn işlevini signIn .
  3. Tüm işlevi aşağıdaki kodla değiştirin.

ana.js

// Signs-in Friendly Chat.
function signIn() {
  // Sign into Firebase using popup auth & Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(provider);
}

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

  1. public/scripts/main.js dosyasına geri public/scripts/main.js .
  2. signOut işlevini signOut .
  3. Tüm işlevi aşağıdaki kodla değiştirin.

ana.js

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

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. public/scripts/main.js dosyasına geri public/scripts/main.js .
  2. initFirebaseAuth işlevini initFirebaseAuth .
  3. Tüm işlevi aşağıdaki kodla değiştirin.

ana.js

// Initiate Firebase Auth.
function initFirebaseAuth() {
  // Listen to auth state changes.
  firebase.auth().onAuthStateChanged(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.auth().currentUser , firebase.auth().currentUser kullanıcının verileri her zaman firebase.auth().currentUser nesnesinde bulunur. Daha önce, kullanıcı authStateObserver 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. public/scripts/main.js dosyasına geri public/scripts/main.js .
  2. getProfilePicUrl ve getUserName işlevlerini bulun.
  3. Her iki işlevi de aşağıdaki kodla değiştirin.

ana.js

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

// Returns the signed-in user's display name.
function getUserName() {
  return firebase.auth().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. public/scripts/main.js dosyasına geri public/scripts/main.js .
  2. isUserSignedIn işlevini isUserSignedIn .
  3. Tüm işlevi aşağıdaki kodla değiştirin.

ana.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!firebase.auth().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

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. Bu da Bulut Firestore örneğine mesaj alanlarının içeriği ile bir mesaj nesnesi ekler messages koleksiyonu. add() yöntemi, koleksiyona otomatik olarak oluşturulan bir kimliğe sahip yeni bir belge ekler.

  1. public/scripts/main.js dosyasına geri public/scripts/main.js .
  2. saveMessage işlevini saveMessage .
  3. Tüm işlevi aşağıdaki kodla değiştirin.

ana.js

// Saves a new message to your Cloud Firestore database.
function saveMessage(messageText) {
  // Add a new message entry to the database.
  return firebase.firestore().collection('messages').add({
    name: getUserName(),
    text: messageText,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).catch(function(error) {
    console.error('Error writing new message to 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. Oluştur bölümünün altında Veritabanı'na tıklayın (veya buraya tıklayın ve projenizi seçin) ve yeni eklediğiniz mesajınızla birlikte mesaj koleksiyonunu görmelisiniz:

6812efe7da395692.png

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. public/scripts/main.js dosyasına geri public/scripts/main.js .
  2. loadMessages fonksiyonunu loadMessages .
  3. Tüm işlevi aşağıdaki kodla değiştirin.

ana.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.
  var query = firebase.firestore()
                  .collection('messages')
                  .orderBy('timestamp', 'desc')
                  .limit(12);
  
  // Start listening to the query.
  query.onSnapshot(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, .collection fonksiyonunu kullanarak bir koleksiyon üzerinde, dinlemek istediğimiz verinin hangi koleksiyonda olduğunu belirtmek için bir sorgu oluşturuyoruz. Yukarıdaki kodda, içindeki değişiklikleri dinliyoruz. sohbet mesajlarının depolandığı messages koleksiyonu. 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 .orderBy('timestamp', 'desc') .

.onSnapshot işlevi bir parametre alır: bir geri arama işlevi. 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

Ş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. public/scripts/main.js dosyasına geri public/scripts/main.js .
  2. saveImageMessage işlevini saveImageMessage .
  3. Tüm işlevi aşağıdaki kodla değiştirin.

ana.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
function saveImageMessage(file) {
  // 1 - We add a message with a loading icon that will get updated with the shared image.
  firebase.firestore().collection('messages').add({
    name: getUserName(),
    imageUrl: LOADING_IMAGE_URL,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).then(function(messageRef) {
    // 2 - Upload the image to Cloud Storage.
    var filePath = firebase.auth().currentUser.uid + '/' + messageRef.id + '/' + file.name;
    return firebase.storage().ref(filePath).put(file).then(function(fileSnapshot) {
      // 3 - Generate a public URL for the file.
      return fileSnapshot.ref.getDownloadURL().then((url) => {
        // 4 - Update the chat message placeholder with the image's URL.
        return messageRef.update({
          imageUrl: url,
          storageUri: fileSnapshot.metadata.fullPath
        });
      });
    });
  }).catch(function(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.

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

GCM Gönderen Kimliğini beyaz listeye alın

Web uygulaması bildiriminde , gcm_sender_id bu uygulamaya mesaj göndermeye yetkili olduğunu belirten sabit kodlanmış bir değer olan gcm_sender_id belirtmeniz gerekir.

  1. web-start dizininden, public dizinde manifest.json açın.
  2. Tarayıcı gönderen kimliği değerini tam olarak aşağıda gösterildiği gibi gcm_sender_id özniteliğine gcm_sender_id . Değeri aşağıda gösterilenden değiştirmeyin.

manifest.json

{
  "name": "Friendly Chat",
  "short_name": "Friendly Chat",
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "portrait",
  "gcm_sender_id": "103953800507"
}

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, public dizinde, firebase-messaging-sw.js adlı yeni bir dosya oluşturun.
  2. Aşağıdaki içeriği bu yeni dosyaya ekleyin.

firebase-messaging-sw.js

importScripts('/__/firebase/6.0.4/firebase-app.js');
importScripts('/__/firebase/6.0.4/firebase-messaging.js');
importScripts('/__/firebase/init.js');

firebase.messaging();

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 saveMessagingDeviceToken . FCM cihaz jetonunu tarayıcıdan alacağımız ve Cloud Firestore'a kaydedeceğimiz yer burasıdır.

  1. public/scripts/main.js dosyasına geri public/scripts/main.js .
  2. saveMessagingDeviceToken işlevini saveMessagingDeviceToken .
  3. Tüm işlevi aşağıdaki kodla değiştirin.

ana.js

// Saves the messaging device token to the datastore.
function saveMessagingDeviceToken() {
  firebase.messaging().getToken().then(function(currentToken) {
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to the datastore.
      firebase.firestore().collection('fcmTokens').doc(currentToken)
          .set({uid: firebase.auth().currentUser.uid});
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  }).catch(function(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 firebase.messaging().requestPermission() .

8b9d0c66dc36153d.png

  1. public/scripts/main.js dosyasına geri public/scripts/main.js .
  2. requestNotificationsPermissions işlevini requestNotificationsPermissions .
  3. Tüm işlevi aşağıdaki kodla değiştirin.

ana.js

// Requests permission to show notifications.
function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  firebase.messaging().requestPermission().then(function() {
    // Notification permission granted.
    saveMessagingDeviceToken();
  }).catch(function(error) {
    console.error('Unable to get permission to notify.', error);
  });
}

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. Cihaz belirtecine ek olarak, Firebase uygulamanızın Sunucu Anahtarına da ihtiyacınız olacak. Bu anahtarı almak için Firebase Console > Project Settings > Cloud Messaging öğesine gidin , ardından Sunucu Anahtarını kopyalayın.

Bir bildirim göndermek için aşağıdaki HTTP isteğini göndermeniz gerekir:

POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Content-Type: application/json
Authorization: key=YOUR_SERVER_KEY

{
  "notification": {
    "title": "New chat message!",
    "body": "There is a new message in FriendlyChat",
    "icon": "/images/profile_placeholder.png",
    "click_action": "http://localhost:5000"
  },
  "to":"YOUR_DEVICE_TOKEN"
}
  1. Komut satırında aşağıdaki cURL komutunu çalıştırın.
curl -H "Content-Type: application/json" \
     -H "Authorization: key=YOUR_SERVER_KEY" \
     -d '{
           "notification": {
             "title": "New chat message!",
             "body": "There is a new message in FriendlyChat",
             "icon": "/images/profile_placeholder.png",
             "click_action": "http://localhost:5000"
           },
           "to": "YOUR_DEVICE_TOKEN"
         }' \
     https://fcm.googleapis.com/fcm/send

Bildirimin yalnızca FriendlyChat uygulaması arka plandaysa görüneceğini unutmayın. Bildirimin görüntülenmesi için uzaklaşmanız veya başka bir sekme görüntülemeniz gerekir. Uygulama ön plandayken FCM tarafından gönderilen mesajları yakalamanın bir yolu var.

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

de79e8638a45864c.png

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

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

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

Biz dahil beri firebase-performance.js ve init.js codelab önceki bir aşamada, sadece kullanıcıların dağıtılan sitesini ziyaret ettiğinizde sizin için otomatik toplama sayfa yük ve ağ isteği ölçümlerine İzleme Performans anlatmak için bir satır eklemem gerekiyor!

  1. In public/scripts/main.js , mevcut altına aşağıdaki satırı ekleyin TODO Performans İzleme başlatmak için.

ana.js

// TODO: Enable Firebase Performance Monitoring.
firebase.performance();

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

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. firebase.json ö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. 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 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.

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

Sonraki adımlar

Learn more