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

  • Gibi seçtiğiniz IDE / metin editörü, WebStorm , Atom , Sublime veya VS Kanunu
  • Paket yöneticisi, NPM tipik ile birlikte, node.js
  • 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 en Klon GitHub depo komut satırından:

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

Eğer git yüklemiş yoksa Alternatif olarak, şunları yapabilirsiniz bir ZIP dosyası olarak depo indirmek .

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

Açık, IDE kullanarak veya 📁 içe web-start klonlanmış deposundan dizini. Bu 📁 web-start dizini tamamen işlevsel sohbet web uygulaması olacak codelab, başlangıç kodu içerir.

Bir Firebase projesi oluşturun

  1. Oturum açın Firebase .
  2. Firebase konsolunda Add Project tıklatın ve sonra da Firebase proje FriendlyChat isim. Firebase projenizin proje kimliğini unutmayın.
  3. İşareti kaldırın bu proje için Google Analytics etkinleştirme
  4. Proje oluşturma tıklayın.

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

  • Firebase Kimlik kolayca Kullanıcıların uygulamanızın oturum açmak için izin vermek.
  • Bulut Firestore bulut yapılandırılmış verileri kaydetmek ve ne zaman veri değişiklikleri anında bildirim almak için.
  • Firebase için Bulut Depolama bulut içinde dosyaları kaydetmek için.
  • Firebase ana Barındırma ve öğelerini sunması.
  • Firebase Bulut Mesajlaşma push bildirimleri ve ekran tarayıcı açılır bildirimler göndermek.
  • Firebase Performans uygulamanız için toplamak kullanıcı performans verilerine izleme.

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. Takma Dostu Sohbet uygulamayı Kayıt ardından da bu uygulama için Hosting Firebase kurmak yanındaki kutuyu işaretleyin. Kayıt uygulamasını tıklayın.
  3. Bir sonraki adımda bir yapılandırma nesnesi göreceksiniz. Sadece JS nesne kopyalama (değil HTML çevreleyen) içine Firebase-config.js

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

Google Firebase Kimlik Doğrulama için oturum açma etkinleştirme

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

Google oturumu etkinleştirebilirsiniz gerekir:

  1. Firebase konsolunda, sol panelde Yapı bölümünü bulun.
  2. Kimlik tıklayın, ardından Oturum açma yöntemi sekmesine tıklayın (veya buraya tıklayın doğrudan oraya gitmek).
  3. Google oturum açma sağlayıcının etkinleştirme, ardından Kaydet'i tıklayın.
  4. Dostu Sohbet için uygulama kamu bakan adını ayarlayın ve açılır menüden bir proje destek e-posta seçin.
  5. İçinde OAuth rıza ekranını yapılandır Google Bulut Konsolundan ve logo ekleyin:

d89fb3873b5d36ae.png

Cloud Firestore'u Etkinleştir

Web uygulaması kullanan Bulut FireStore sohbet mesajlarını kaydetmek ve yeni sohbet mesajları almak için.

Cloud Firestore'u etkinleştirmeniz gerekecek:

  1. Firebase konsolunun Yapı bölümünde, Firestore veritabanı.
  2. Bulut Firestore bölmesinde veritabanı oluşturun 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. Hüküm Firestore için Bitti 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 Yapı bölümünde, Depolama tıklayın.
  2. Düğmesine orada Başlayın hiçbir istiyorsa, kesin Bulut depolama zaten etkin demektir ve aşağıdaki adımları izlemeniz gerekmez.
  3. Başlayın tıklayın.
  4. Senin Firebase projesi için güvenlik kuralları hakkında yasal uyarıyı okuyun ve İ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 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. Emin komut satırı uygulamanızın yerel erişen emin olun web-start dizini.
  2. Aşağıdaki komutu çalıştırarak uygulamanızı Firebase projenizle ilişkilendirin:
firebase use --add
  1. İstendiğinde, ardından Firebase projeyi bir takma ad vermek, Project kimliğini seçin.

Takma ad, birden çok ortamınız (üretim, hazırlama, vb.) varsa kullanışlıdır. Ancak, bu codelab için, 'adil diğer adını kullanmasına izin default .

  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. Bir konsolunda web-start dizininde aşağıdaki Firebase CLI komutu ç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

Biz kullanıyoruz Firebase Barındırma lokal bizim app hizmet etmek emülatör. Web uygulaması bugünden itibaren kullanılabilir olmalıdır http: // localhost: 5000 . Altında bulunan tüm dosyalar public alt dizin sunulmaktadır.

  1. Tarayıcınızı kullanarak adresinden uygulamayı açıp http: // localhost: 5000 .

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. Olarak bunu yapmanın birden çok yolu vardır bizim belgelerinde açıklanan . Ö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.

Biz NPM gelen Firebase SDK almak ve kullanmak için gidiyoruz WebPack kodumuzu paketlemek için. Bunu, Webpack'in gereksiz tüm 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, zaten oluşturduk web-start/package.json üstündeki bir bağımlılık olarak Firebase SDK yanı sıra ithal gerekli işlevleri içeren dosyayı web-start/src/index.js .

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ı kurun 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. Eğer olduğunuzdan emin olun web-start dizininde
  3. Run npm install Firebase SDK'yı indirmek için
  4. Run npm run start WebPack başlatmak için. 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. Senin git Firebase konsolda Proje ayarlarında
  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. Daha sonra ekleyin, yapılandırma nesnesini pasajını kopyalama 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, en alt bölümüne gidip web-start/src/index.js ve ilklendir Firebase:

index.js

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

İthal ve başlatılmış beri Firebase SDK artık kullanıma hazır olmalıdır index.html . Şimdi kullanarak oturum açın kullanıcılı uygulamaya gidiyoruz Firebase Authentication .

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

Bir kullanıcı, Google düğmesi ile Giriş tıkladığında uygulamasında, olarak, signIn fonksiyonu 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. Biz bir pop-up kullanacağız, ancak birçok başka yöntem Firebase edinilebilir.

  1. In web-start dizininde, alt dizin içinde src/ açık index.js .
  2. Bul işlevini signIn .
  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 kullanıcı düğmeye çıkış yap tıkladığında fonksiyon tetiklenir.

  1. Dosya geri dön src/index.js .
  2. Fonksiyon bulun signOutUser .
  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. Dosya geri dön src/index.js .
  2. Bul işlevini initFirebaseAuth .
  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);
}

Kayıt Yukarıdaki kod fonksiyonu authStateObserver doğrulama durumu gözlemci. 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

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 yılında oturum açılan kullanıcı verilerinin her zaman mevcuttur currentUser nesne. Daha önce, kurmak authStateObserver zaman kullanıcı oturum yani bizim UI güncellemeleri o buna göre tetiğe işlevi. Bu arayacak getProfilePicUrl ve getUserName tetiklendiklerinde.

  1. Dosya geri dön src/index.js .
  2. Bul fonksiyonları getProfilePicUrl ve getUserName .
  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. Dosya geri dön src/index.js .
  2. Bul işlevini isUserSignedIn .
  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, çalıştırmak firebase serve --only hosting uygulamayı sunmaya başlamak komut satırında : // localhost: 5000 http ve sonra tarayıcınızda açın.
  2. Oturum açma düğmesini ve Google hesabınızı kullanarak uygulamada oturum açın. Eğer bir hata mesajı bildiren görürseniz auth/operation-not-allowed etkin olduğunu, çek emin olmak için Google Oturum Açma Firebase konsolunda bir kimlik doğrulama sağlayıcısı olarak.
  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 manuel yapılabilir Firebase konsoluna , ama biz de temel Bulut Firestore yazma göstermek için uygulamanın kendisindeki yapacağım.

Veri örneği

Cloud Firestore verileri koleksiyonlara, belgelere, alanlara ve alt koleksiyonlara bölünür. Biz denilen bir üst düzey koleksiyonunda bir belge olarak sohbet her mesajı saklayacaktır messages .

688d7bc5fb662b57.png

Cloud Firestore'a mesaj ekleyin

Kullanıcılarına aittir sohbet mesajlarını saklamak için, kullanacağız Bulut FireStore .

Bu bölümde, kullanıcıların veritabanınıza yeni mesajlar yazması için işlevsellik ekleyeceksiniz. GÖNDER butonuna tıklayarak 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() metodu toplama otomatik olarak oluşturulan bir kimliğe sahip yeni bir belge ekler.

  1. Dosya geri dön src/index.js .
  2. Fonksiyon bulun saveMessage .
  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, çalıştırmak firebase serve --only hosting uygulamayı sunmaya başlamak komut satırında : // localhost: 5000 http ve sonra tarayıcınızda açın.
  2. Oturum açtıktan sonra, bu tür "Hey!" Ve ardından SEND olarak bir mesaj girin. Bu, mesajı Cloud Firestore'a yazacaktır. Biz hala veri (codelab sonraki bölümü) alınırken uygulamak gerekir çünkü Ancak, henüz gerçek bir web uygulamasında verileri görmez.
  3. Yeni eklenen mesajı Firebase Konsolunuzda görebilirsiniz. Firebase Konsolunuzu açın. Yapı bölümün altında Firestore Veritabanı tıklayın (veya tıklayın burada ve projenizi seçin) ve size yeni eklenen mesajla mesajlar koleksiyonunu görmelisiniz:

6812efe7da395692.png

Senkronize mesajları

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. Dosya geri dön src/index.js .
  2. Fonksiyon bulun loadMessages .
  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ında mesajları dinlemek için, kullanarak bir koleksiyon üzerinde bir sorgu oluşturmak collection biz içindedir dinlemek istediğiniz hangi toplama verileri belirtmek için işlev. Kodunda, biz üzerindeyiz dinleme içindeki değişikliklere messages sohbet mesajlarının depolandığı koleksiyon. Biz de sadece kullanılarak son 12 mesajlar dinleyerek bir sınır uyguluyorsanız .limit(12) ve kullanarak tarihe göre iletileri sipariş orderBy('timestamp', 'desc') 12 yeni iletileri almak için.

onSnapshot fonksiyonu ilk parametre olarak bir sorgu, ve ikinci olarak bir geri arama işlevi 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. Sen bu konuda daha fazla bilgi edinebilirsiniz Bulut Firestore belgelerinde .

Senkronizasyon mesajlarını test edin

  1. Uygulamanız hâlâ sunuluyorsa uygulamanızı tarayıcıda yenileyin. Aksi takdirde, çalıştırmak firebase serve --only hosting uygulamayı sunmaya başlamak komut satırında : // localhost: 5000 http ve sonra 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. (Opsiyonel), silme, değiştirme veya Firebase konsolunun Veritabanı bölümünde doğrudan yeni mesajlar manuel olarak eklemek 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 Bulut Depolama bir dosya / damla depolama hizmeti ve biz bir kullanıcı payları bizim uygulamasını kullanarak herhangi 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 dosyayı seçtikten sonra, saveImageMessage fonksiyon denir ve seçilen dosyaya bir başvuru alabilirsiniz. saveImageMessage fonksiyonu aşağıdaki yapar:

  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. Bu yola Cloud Storage görüntü dosyasının Yüklenenler: /<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. Dosya geri dön src/index.js .
  2. Fonksiyon bulun saveImageMessage .
  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, çalıştırmak firebase serve --only hosting uygulamayı sunmaya başlamak komut satırında : // localhost: 5000 http ve sonra 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 resmin arıyorsanız, bu kullanmaktan çekinmeyin kahve fincan güzel resmini .
  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 Bulut Mesajlaşma (FKM) güvenilir şekilde hiçbir ücret ödemeden mesaj veya bildirim teslim sağlayan bir çapraz platform mesajlaşma çözümüdür.

FCM hizmet çalışanını ekleyin

Web uygulaması bir ihtiyacı hizmet işçisi alabilir ve görüntüleyebilir web bildirimleri olacaktır.

  1. Gönderen web-start dizininde src dizininde, açık 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

Bildirimleri bir cihaz veya tarayıcıda etkinleştirilmiş olduğunda, jeton bir cihaz 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, dediğimiz zaman saveMessagingDeviceToken fonksiyonunu. Biz tarayıcıdan belirteci FCM cihazı alırsınız en That ve ona tasarruf Bulut Firestore için.

  1. Dosya geri dön src/index.js .
  2. Bul işlevini saveMessagingDeviceToken .
  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, biz diyoruz firebase.messaging().requestPermission() bir tarayıcı iletişim (bu izin isteyen gösterecektir yöntem desteklenen tarayıcılarda ).

8b9d0c66dc36153d.png

  1. Dosya geri dön src/index.js .
  2. Fonksiyon bulun requestNotificationsPermissions .
  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, çalıştırmak firebase serve --only hosting uygulamayı sunmaya başlamak komut satırında : // localhost: 5000 http ve sonra tarayıcınızda açın.
  2. Oturum açtıktan sonra bildirimler izin iletişim kutusu görünmelidir: bd3454e6dbfb6723.png
  3. İzin tıklayın.
  4. Tarayıcınızın JavaScript konsolunu açın. : Aşağıdaki mesajı görmelisiniz 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 .
  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

Görünüm veritabanı güvenlik kurallarını

Bulut Firestore Belirli kullandığı kurallar dil erişim haklarını, güvenliğini ve veri doğrulamaları tanımlamak için.

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. In Firebase konsoluna , Veritabanı bölümün Kuralları sekmesinde görüntüleyebilir ve bu kuralları değiştirebilir.

Ş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 sonra Kuralları sekmesini tıklatın.
  2. Zaten konsolda bulunan varsayılan kuralları yukarıda gösterilen kurallarla değiştirin.
  3. Yayınla tıklayın.

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

  1. Gönderen web-start dizininde, açık firestore.rules .
  2. Dosyada zaten bulunan varsayılan kuralları yukarıda gösterilen kurallarla değiştirin.
  3. Gönderen web-start dizininde, açık firebase.json .
  4. Ekle firestore.rules işaret bağlıyor firestore.rules aşağıda gösterildiği gibi. ( hosting nitelik 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 Bulut Depolama belirli kullanır kurallar dil erişim haklarını, güvenliğini ve veri doğrulamaları tanımlamak için.

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. In Firebase konsoluna , Depolama bölümün Kuralları sekmesinde, görüntülemek ve kuralları değiştirebilir. 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 sonra Kuralları sekmesini tıklatın.
  2. Zaten konsolda bulunan varsayılan kuralı yukarıda gösterilen kurallarla değiştirin.
  3. Yayınla tıklayın.

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

  1. Gönderen web-start dizininde, açık storage.rules .
  2. Dosyada zaten bulunan varsayılan kuralları yukarıda gösterilen kurallarla değiştirin.
  3. Gönderen web-start dizininde, açık firebase.json .
  4. Ekle storage.rules işaret bağlıyor storage.rules aşağıda gösterildiği gibi, dosyanın. ( hosting ve database nitelik hala 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, biz Barındırma URL'lerden İzleme Performans sağladı. Bakınız belgelere SDK sağlayan diğer yöntemler görmek için.

Otomatik izler

Biz zaten ithal yana getPerformance üstündeki web-start/src/index.js , 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 web-start/src/index.js , mevcut altına aşağıdaki satırı ekleyin TODO Performans İzleme başlatmak için.

index.js

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

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

İlk giriş gecikmesi bir kullanıcı etkileşimine yanıt tarayıcı uygulamanızın yanıt hakkındaki kullanıcılara ilk izlenimlerini verir çünkü 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. Açık public/index.html .
  2. Yorumsuz script aşağıdaki satırda etiketi.

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ş gecikmesi Polyfill hakkında daha fazla bilgi edinmek için, bir göz atın belgelere .

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. Hakkında daha fazla bilgi için belgelerine ziyaret özel izleri ve metrikler ve özel ayrıntılara .

Firebase teklifler bir barındırma hizmeti varlıklarınızı ve web uygulamaları hizmet etmek. Firebase CLI'yi kullanarak dosyalarınızı Firebase Hosting'e dağıtabilirsiniz. Yerleştirilme önce, belirtmek gerekir firebase.json yerel dosyalar dağıtılabilir gereken dosyanın. 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ı altında belirtilir hosting özniteliği:

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 biz tüm dosyaları dağıtmak istediğinizi CLI anlatmak ./public dizinine ( "public": "./public" ).

  1. Emin komut satırı uygulamanızın yerel erişen emin olun web-start dizini.
  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, Çalıştırabileceğiniz firebase open hosting:site komut satırında.

Hakkında daha fazla bilgi için belgelerine ziyaret Firebase eserlerini Barındırma nasıl .

Senin dağıtır tarihinin, uygulamanızın önceki sürümlerine rulo arkasına işlevsellik ve özel bir alan adı kurmak için iş akışı dahil yararlı barındırma bilgileri ve araçları, görüntülemek için projenizin Firebase konsol Barındırma bölümüne gidin.

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

Daha fazla bilgi edin