1. Genel Bakış
Bu codelab'de, Firebase ürün ve hizmetlerini kullanarak bir sohbet istemcisi uygulayıp dağıtarak web uygulamaları oluşturmak için AngularFire'ı nasıl kullanacağınızı öğreneceksiniz.
Ne öğreneceksin
- Angular ve Firebase'i kullanarak bir web uygulaması oluşturun.
- Cloud Firestore ve Cloud Storage for Firebase'i kullanarak verileri senkronize edin.
- Firebase Authentication'ı kullanarak kullanıcılarınızın kimliklerini doğrulayın.
- Web uygulamanızı Firebase Hosting'e dağıtın.
- Firebase Cloud Messaging ile bildirim gönderin.
- Web uygulamanızın performans verilerini toplayın.
İhtiyacınız olan şey
2. Örnek kodu alın
Codelab'in GitHub deposunu komut satırından kopyalayın:
git clone https://github.com/firebase/codelab-friendlychat-web
Alternatif olarak, git yüklü değilse depoyu ZIP dosyası olarak indirebilirsiniz .
Başlangıç uygulamasını içe aktar
IDE'nizi kullanarak, klonlanmış depodan 📁 angularfire-start
dizinini açın veya içe aktarın. Bu 📁 angularfire-start
dizini, tamamen işlevsel bir sohbet web uygulaması olacak codelab'in başlangıç kodunu içerir.
3. Firebase projesi oluşturun ve kurun
Firebase projesi oluşturma
- Firebase'de oturum açın.
- Firebase konsolunda Proje Ekle'ye tıklayın ve ardından Firebase projenize FriendlyChat adını verin. Firebase projenizin proje kimliğini unutmayın.
- Bu proje için Google Analytics'i etkinleştir seçeneğinin işaretini kaldırın
- Proje Oluştur'a tıklayın.
Oluşturacağını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 olanak tanıyan 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 Cloud Storage .
- Varlıklarınızı barındırmak ve sunmak için Firebase Hosting .
- Anlık bildirimler 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ırması veya Firebase konsolu kullanılarak etkinleştirilmesi gerekir.
Projeye Firebase web uygulaması ekleme
- Web simgesini tıklayın
yeni bir Firebase web uygulaması oluşturmak için.
- Uygulamayı Dostça Sohbet takma adıyla kaydedin ve ardından Bu uygulama için Firebase Hosting'i de kur seçeneğinin yanındaki kutuyu işaretleyin. Uygulamayı kaydet'i tıklayın.
- Bir sonraki adımda bir yapılandırma nesnesi göreceksiniz. Firebase-config.js'ye yalnızca JS nesnesini (çevreleyen HTML'yi değil) kopyalayın
Firebase Kimlik Doğrulaması 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 kullanacaksınız.
Google ile oturum açmayı etkinleştirmeniz gerekecek:
- Firebase konsolunda sol paneldeki Derleme bölümünü bulun.
- Kimlik Doğrulama 'yı ve ardından Oturum açma yöntemi sekmesini tıklayın (veya doğrudan oraya gitmek için burayı tıklayın ).
- Google oturum açma sağlayıcısını etkinleştirin ve ardından Kaydet'i tıklayın.
- Uygulamanızın herkese açık adını Dostça Sohbet olarak ayarlayın ve açılır menüden bir Proje destek e-postası seçin.
- OAuth izin ekranınızı Google Cloud Console'da yapılandırın ve bir logo ekleyin:
Cloud Firestore'u etkinleştirin
Web uygulaması, sohbet mesajlarını kaydetmek ve yeni sohbet mesajları almak için Cloud Firestore'u kullanır.
Cloud Firestore'u etkinleştirmeniz gerekecek:
- Firebase konsolunun Derleme bölümünde Firestore Veritabanı'na tıklayın.
- Cloud Firestore bölmesinde Veritabanı oluştur'a tıklayın.
- Test modunda başlat seçeneğini seçin ve güvenlik kurallarına ilişkin sorumluluk reddi beyanını okuduktan sonra İleri'ye tıklayın.
Test modu, geliştirme sırasında veritabanına serbestçe yazabilmenizi sağlar. Bu codelab'de daha sonra veritabanımızı daha güvenli hale getireceksiniz.
- Cloud Firestore verilerinizin depolandığı konumu ayarlayın. Bunu varsayılan olarak bırakabilir veya size yakın bir bölgeyi seçebilirsiniz. Firestore'un temel hazırlığını yapmak için Bitti'ye tıklayın.
Bulut Depolamayı Etkinleştir
Web uygulaması, resimleri depolamak, yüklemek ve paylaşmak için Firebase için Cloud Storage'ı kullanır.
Cloud Storage'ı etkinleştirmeniz gerekecek:
- Firebase konsolunun Derleme bölümünde Depolama'yı tıklayın.
- Başlayın düğmesi yoksa bu, Bulut depolamanın zaten etkin olduğu ve aşağıdaki adımları izlemenize gerek olmadığı anlamına gelir.
- Başlayın'ı tıklayın.
- Firebase projenizin güvenlik kurallarına ilişkin 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 codelab'in ilerleyen bölümlerinde depolama alanımızı daha güvenli hale getireceksiniz.
- Cloud Storage konumu, Cloud Firestore veritabanınız için seçtiğiniz bölgeyle önceden seçilir. Kurulumu tamamlamak için Bitti'ye tıklayın.
4. Firebase komut satırı arayüzünü yükleyin
Firebase komut satırı arayüzü (CLI), web uygulamanızı yerel olarak sunmak ve web uygulamanızı Firebase projenize dağıtmak için Firebase Hosting'i kullanmanızı sağlar.
- Aşağıdaki npm komutunu çalıştırarak CLI'yi yükleyin:
npm -g install firebase-tools
- 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 üzeri olduğundan emin olun.
- Aşağıdaki komutu çalıştırarak Firebase CLI'yi yetkilendirin:
firebase login
Web uygulaması şablonunu, uygulamanızın Firebase Hosting yapılandırmasını uygulamanızın yerel dizininden (codelab'de daha önce klonladığınız depo) alacak şekilde ayarladınız. Ancak yapılandırmayı almak için uygulamanızı Firebase projenizle ilişkilendirmeniz gerekir.
- Komut satırınızın uygulamanızın yerel
angularfire-start
dizinine eriştiğinden emin olun. - Aşağıdaki komutu çalıştırarak uygulamanızı Firebase projenizle ilişkilendirin:
firebase use --add
- İstendiğinde Proje Kimliğinizi seçin ve Firebase projenize bir takma ad verin.
Birden fazla ortamınız (prodüksiyon, hazırlama vb.) varsa takma ad kullanışlıdır. Ancak bu codelab için sadece default
takma adını kullanalım.
- Komut satırınızdaki kalan talimatları izleyin.
5. AngularFire'ı yükleyin
Projeyi çalıştırmadan önce Angular CLI ve AngularFire'ın kurulu olduğundan emin olun.
- Bir konsolda aşağıdaki komutu çalıştırın:
npm install -g @angular/cli
- Ardından,
angularfire-start
dizinindeki bir konsolda aşağıdaki Angular CLI komutunu çalıştırın:
ng add @angular/fire
Bu, projeniz için gerekli tüm bağımlılıkları kuracaktır.
- İstendiğinde, Firebase Konsolunda ayarlanmış olan özellikleri seçin (
ng deploy -- hosting
,Authentication
,Firestore
,Cloud Functions (callable)
,Cloud Messaging
,Cloud Storage
) ve konsoldaki talimatları izleyin.
6. Başlangıç uygulamasını yerel olarak çalıştırın
Artık projenizi içe aktarıp yapılandırdığınıza göre web uygulamasını ilk kez çalıştırmaya hazırsınız.
-
angularfire-start
dizinindeki bir konsolda aşağıdaki Firebase CLI komutunu çalıştırın:
firebase emulators:start
- Komut satırınız aşağıdaki yanıtı görüntülemelidir:
✔ hosting: Local server: http://localhost:5000
Uygulamamızı yerel olarak sunmak için Firebase Hosting emülatörünü kullanıyorsunuz. Web uygulamasına artık http://localhost:5000 adresinden ulaşılabilir. src
alt dizini altında bulunan tüm dosyalar sunulur.
- Tarayıcınızı kullanarak uygulamanızı http://localhost:5000 adresinden açın.
FriendlyChat uygulamanızın (henüz!) çalışmayan kullanıcı arayüzünü görmelisiniz:
Uygulama şu anda hiçbir şey yapamaz, ancak sizin yardımınızla yakında yapacak! Şu ana kadar yalnızca sizin için kullanıcı arayüzünü hazırladınız.
Şimdi gerçek zamanlı bir sohbet oluşturalım!
7. Firebase'i içe aktarın ve yapılandırın
Firebase'i yapılandırın
Hangi Firebase projesini kullandığınızı belirtmek için Firebase SDK'sını yapılandırmanız gerekir.
- Firebase konsolunda Proje ayarlarınıza gidin
- "Uygulamalarınız" kartında, yapılandırma nesnesine ihtiyaç duyduğunuz uygulamanın takma adını seçin.
- Firebase SDK pasajı bölmesinden "Yapılandırma"yı seçin.
Sizin için /angularfire-start/src/environments/environment.ts
ortam dosyasının oluşturulduğunu göreceksiniz.
- Yapılandırma nesnesi parçacığını kopyalayın ve ardından
angularfire-start/src/firebase-config.js
dosyasına ekleyin.
çevre.ts
export const environment = {
firebase: {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
},
};
AngularFire'ı içe aktar
Konsolda seçtiğiniz özelliklerin otomatik olarak /angularfire-start/src/app/app.module.ts
dosyasına yönlendirildiğini göreceksiniz. Bu, uygulamanızın Firebase özelliklerini ve işlevlerini kullanmasına olanak tanır. Ancak yerel bir ortamda geliştirme yapmak için Emulator paketini kullanmak üzere bunları bağlamanız gerekir.
-
/angularfire-start/src/app/app.module.ts
içindeimports
bölümünü bulun ve üretim dışı ortamlarda Emulator paketine bağlanmak için sağlanan işlevleri değiştirin.
// ...
import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { provideFirestore,getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage, connectStorageEmulator } from '@angular/fire/storage';
// ...
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
const auth = getAuth();
if (location.hostname === 'localhost') {
connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
}
return auth;
}),
provideFirestore(() => {
const firestore = getFirestore();
if (location.hostname === 'localhost') {
connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
}
return firestore;
}),
provideFunctions(() => {
const functions = getFunctions();
if (location.hostname === 'localhost') {
connectFunctionsEmulator(functions, '127.0.0.1', 5001);
}
return functions;
}),
provideStorage(() => {
const storage = getStorage();
if (location.hostname === 'localhost') {
connectStorageEmulator(storage, '127.0.0.1', 5001);
}
return storage;
}),
provideMessaging(() => {
return getMessaging();
}),
// ...
app.module.ts
Bu codelab sırasında Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging ve Performance Monitoring'i kullanacaksınız, dolayısıyla bunların tüm kitaplıklarını içe aktaracaksınız. Gelecekteki uygulamalarınızda, uygulamanızın yükleme süresini kısaltmak için Firebase'in yalnızca ihtiyacınız olan kısımlarını içe aktardığınızdan emin olun.
8. Kullanıcı oturum açmayı ayarlayın
AngularFire, app.module.ts
dosyasına aktarıldığı ve başlatıldığı için artık kullanıma hazır olmalıdır. Artık Firebase Authentication'ı kullanarak kullanıcı oturum açma işlemini uygulayacaksınız.
Kullanıcılarınızın kimliğini Google ile Oturum Açma ile doğrulayın
Uygulamada, kullanıcı Google ile oturum aç düğmesini tıkladığında login
işlevi tetiklenir. (Bunu zaten sizin için ayarladınız!) Bu codelab için Firebase'e Google'ı kimlik sağlayıcı olarak kullanma yetkisi vermek istiyorsunuz. Bir açılır pencere kullanacaksınız ancak Firebase'de başka yöntemler de mevcuttur.
-
angularfire-start
dizininde/src/app/services/
alt dizinindechat.service.ts
dosyasını açın. -
login
işlevini bulun. - Fonksiyonun tamamını aşağıdaki kodla değiştirin.
chat.service.ts
// Signs-in Friendly Chat.
login() {
signInWithPopup(this.auth, this.provider).then((result) => {
const credential = GoogleAuthProvider.credentialFromResult(result);
this.router.navigate(['/', 'chat']);
return credential;
})
}
logout
işlevi, kullanıcı Oturumu kapat düğmesine tıkladığında tetiklenir.
-
src/app/services/chat.service.ts
dosyasına geri dönün. -
logout
işlevini bulun. - Fonksiyonun tamamını aşağıdaki kodla değiştirin.
chat.service.ts
// Logout of Friendly Chat.
logout() {
signOut(this.auth).then(() => {
this.router.navigate(['/', 'login'])
console.log('signed out');
}).catch((error) => {
console.log('sign out error: ' + error);
})
}
Kimlik doğrulama durumunu izleme
Kullanıcı 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ınız var. Firebase Authentication ile, kimlik doğrulama durumu her değiştiğinde tetiklenecek olan kullanıcı durumuna ilişkin gözlemlenebilir bilgileri alabilirsiniz.
-
src/app/services/chat.service.ts
dosyasına geri dönün. -
user$
değişken atamasını bulun. - Atamanın tamamını aşağıdaki kodla değiştirin.
chat.service.ts
// Observable user
user$ = user(this.auth);
Yukarıdaki kod, gözlemlenebilir bir kullanıcıyı döndüren AngularFire işlevi user
çağırır. Kimlik doğrulama durumu her değiştiğinde (kullanıcı oturum açtığında veya oturumu kapattığında) tetiklenir. İşte bu noktada, kullanıcı arayüzünü yeniden yönlendirmek, kullanıcıyı başlık gezintisinde görüntülemek vb. için güncelleyeceksiniz. Bu kullanıcı arayüzü parçalarının tümü zaten uygulanmıştır.
Uygulamaya giriş yapmayı test edin
- Uygulamanız hâlâ sunulmaya devam ediyorsa uygulamanızı tarayıcıda yenileyin. Aksi takdirde, uygulamayı http://localhost:5000 adresinden sunmaya başlamak için komut satırında
firebase emulators:start
komutunu çalıştırın ve ardından tarayıcınızda açın. - Oturum açma düğmesini ve Google hesabınızı kullanarak uygulamaya giriş yapın.
auth/operation-not-allowed
ifadesini belirten bir hata mesajı görürseniz Firebase konsolunda kimlik doğrulama sağlayıcısı olarak Google Oturum Açma'yı etkinleştirdiğinizden emin olun. - Giriş yaptıktan sonra profil resminiz ve kullanıcı adınız görüntülenmelidir:
9. Cloud Firestore'a mesaj yazın
Bu bölümde, uygulamanın kullanıcı arayüzünü doldurabilmek için Cloud Firestore'a bazı veriler yazacaksınız. Bu, Firebase konsoluyla manuel olarak yapılabilir, ancak temel bir Cloud Firestore yazma işlemini göstermek için bunu uygulamanın kendisinde yapacaksınız.
Veri örneği
Cloud Firestore verileri koleksiyonlara, belgelere, alanlara ve alt koleksiyonlara bölünmüştür. Sohbetin her mesajını, messages
adı verilen üst düzey bir koleksiyonda bir belge olarak saklayacaksınız.
Cloud Firestore'a mesaj ekleme
Kullanıcılar tarafından yazılan sohbet mesajlarını depolamak için Cloud Firestore'u kullanacaksınız.
Bu bölümde, kullanıcıların veritabanınıza yeni mesajlar yazmasına yönelik işlevselliği ekleyeceksiniz. GÖNDER düğmesini tıklayan bir kullanıcı aşağıdaki kod pasajı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şturulan kimliğe sahip yeni bir belge ekler.
-
src/app/services/chat.service.ts
dosyasına geri dönün. -
addMessage
fonksiyonunu bulun. - Fonksiyonun tamamını aşağıdaki kodla değiştirin.
chat.service.ts
// Adds a text or image message to Cloud Firestore.
addMessage = async(textMessage: string | null, imageUrl: string | null): Promise<void | DocumentReference<DocumentData>> => {
let data: any;
try {
this.user$.subscribe(async (user) =>
{
if(textMessage && textMessage.length > 0) {
data = await addDoc(collection(this.firestore, 'messages'), {
name: user?.displayName,
text: textMessage,
profilePicUrl: user?.photoURL,
timestamp: serverTimestamp(),
uid: user?.uid
})}
else if (imageUrl && imageUrl.length > 0) {
data = await addDoc(collection(this.firestore, 'messages'), {
name: user?.displayName,
imageUrl: imageUrl,
profilePicUrl: user?.photoURL,
timestamp: serverTimestamp(),
uid: user?.uid
});
}
return data;
}
);
}
catch(error) {
console.error('Error writing new message to Firebase Database', error);
return;
}
}
Mesaj göndermeyi test edin
- Uygulamanız hâlâ sunulmaya devam ediyorsa uygulamanızı tarayıcıda yenileyin. Aksi takdirde, uygulamayı http://localhost:5000 adresinden sunmaya başlamak için komut satırında
firebase emulators:start
komutunu çalıştırın ve ardından tarayıcınızda açın. - 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 henüz gerçek web uygulamanızda göremezsiniz çünkü hâlâ verileri almayı uygulamanız gerekir (codelab'in bir sonraki bölümü).
- Yeni eklenen mesajı Firebase Konsolunuzda görebilirsiniz. Emulator paketi kullanıcı arayüzünüzü açın. Derleme bölümünün altında Firestore Veritabanı'na tıklayın (veya buraya tıklayın; yeni eklenen mesajınızla birlikte mesaj koleksiyonunu görmelisiniz:
10. Mesajları okuyun
Mesajları senkronize et
Uygulamadaki mesajları okumak için, veriler değiştiğinde tetiklenecek bir gözlemlenebilir eklemeniz ve ardından yeni mesajları gösteren bir kullanıcı arayüzü öğesi oluşturmanız gerekir.
Uygulamadan yeni eklenen mesajları dinleyen kodu ekleyeceksiniz. Bu kodda, messages
koleksiyonunun anlık görüntüsünü alacaksınız. Yükleme sırasında çok uzun bir geçmişin görüntülenmesini önlemek için sohbetin yalnızca son 12 mesajını görüntüleyeceksiniz.
-
src/app/services/chat.service.ts
dosyasına geri dönün. -
loadMessages
fonksiyonunu bulun. - Fonksiyonun tamamını aşağıdaki kodla değiştirin.
chat.service.ts
// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
// Create the query to load the last 12 messages and listen for new ones.
const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
// Start listening to the query.
return collectionData(recentMessagesQuery);
}
Veritabanındaki mesajları dinlemek için, dinlemek istediğiniz verinin hangi koleksiyonda olduğunu belirtmek üzere collection
fonksiyonunu kullanarak bir koleksiyon üzerinde sorgu oluşturursunuz. Yukarıdaki kodda, messages
içindeki değişiklikleri dinliyorsunuz. sohbet mesajlarının saklandığı koleksiyon. Ayrıca limit 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 limit uyguluyorsunuz.
collectionData
işlevi, anlık görüntüleri kullanı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 durumunda meydana gelebilir. Bununla ilgili daha fazla bilgiyi Cloud Firestore belgelerinde okuyabilirsiniz.
Senkronizasyon mesajlarını test edin
- Uygulamanız hâlâ sunulmaya devam ediyorsa uygulamanızı tarayıcıda yenileyin. Aksi takdirde, uygulamayı http://localhost:5000 adresinden sunmaya başlamak için komut satırında
firebase emulators:start
komutunu çalıştırın ve ardından tarayıcınızda açın. - Veritabanında daha önce oluşturduğunuz mesajların FriendlyChat kullanıcı arayüzünde görüntülenmesi gerekir (aşağıya bakın). Yeni mesajlar yazmaktan çekinmeyin; anında görünmeleri gerekir.
- (İsteğe bağlı) Emulator paketinin Firestore bölümünde doğrudan yeni mesajları manuel olarak silmeyi, değiştirmeyi veya eklemeyi deneyebilirsiniz; herhangi bir değişiklik kullanıcı arayüzüne yansıtılmalıdır.
Tebrikler! Uygulamanızda Cloud Firestore belgelerini okuyorsunuz!
11. Görüntüleri gönderin
Artık görüntüleri paylaşan bir özellik ekleyeceksiniz.
Cloud Firestore, yapılandırılmış verileri depolamak için iyi olsa da Cloud Storage, dosyaları depolamak için daha uygundur. Firebase için Cloud Storage bir dosya/blob depolama hizmetidir ve bunu bir kullanıcının uygulamamızı kullanarak paylaştığı görüntüleri depolamak için kullanırsınız.
Görüntüleri Cloud Storage'a kaydedin
Bu codelab için, dosya seçici iletişim kutusunu tetikleyen bir düğmeyi zaten eklediniz. Bir dosyayı seçtikten sonra saveImageMessage
işlevi çağrılır ve seçilen dosyaya bir referans alabilirsiniz. saveImageMessage
işlevi aşağıdakileri gerçekleştirir:
- Sohbet akışında bir "yer tutucu" sohbet mesajı oluşturur, böylece siz görseli yüklerken kullanıcıların bir "Yükleniyor" animasyonu görmesini sağlar.
- Görüntü dosyasını Cloud Storage'a şu yola yükler:
/<uid>/<file_name>
- Görüntü dosyası için herkes tarafından okunabilen bir URL oluşturur.
- Sohbet mesajını, geçici yükleme resmi yerine yeni yüklenen resim dosyasının URL'siyle günceller.
Artık resim gönderme işlevini ekleyeceksiniz:
-
src/index.js
dosyasına geri dönün. -
saveImageMessage
fonksiyonunu bulun. - Fonksiyonun tamamını aşağıdaki kodla değiştirin.
index.js
// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
try {
// 1 - You add a message with a loading icon that will get updated with the shared image.
const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);
// 2 - Upload the image to Cloud Storage.
const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
const newImageRef = ref(this.storage, filePath);
const fileSnapshot = await uploadBytesResumable(newImageRef, file);
// 3 - Generate a public URL for the file.
const publicImageUrl = await getDownloadURL(newImageRef);
// 4 - Update the chat message placeholder with the image's URL.
messageRef ?
await updateDoc(messageRef,{
imageUrl: publicImageUrl,
storageUri: fileSnapshot.metadata.fullPath
}): null;
} catch (error) {
console.error('There was an error uploading a file to Cloud Storage:', error);
}
}
Görüntü göndermeyi test edin
- Uygulamanız hâlâ sunulmaya devam ediyorsa uygulamanızı tarayıcıda yenileyin. Aksi takdirde, uygulamayı http://localhost:5000 adresinden sunmaya başlamak için komut satırında
firebase emulators:start
komutunu çalıştırın ve ardından tarayıcınızda açın. - Giriş yaptıktan sonra sol alttaki resim yükleme butonuna tıklayın
ve dosya seçiciyi kullanarak bir görüntü dosyası seçin. Bir görsel arıyorsanız, bu güzel kahve fincanı resmini kullanmaktan çekinmeyin.
- Uygulamanın kullanıcı arayüzünde seçtiğiniz görseli içeren yeni bir mesaj görünmelidir:
Oturum açmamışken resim eklemeyi denerseniz, resim eklemek için oturum açmanız gerektiğini belirten bir hata görmelisiniz.
12. Bildirimleri göster
Artık tarayıcı bildirimleri için destek ekleyeceksiniz. 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 iletmenize olanak tanıyan 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.
AngularFire eklendiğinde mesajlaşma sağlayıcısının zaten kurulmuş olması gerekir; /angularfire-start/src/app/app.module.ts
dosyasının içe aktarma bölümünde aşağıdaki kodun mevcut olduğundan emin olun.
provideMessaging(() => {
return getMessaging();
}),
app/app.module.ts
Hizmet çalışanının, bildirimlerin görüntülenmesiyle ilgilenecek olan Firebase Cloud Messaging SDK'yı yüklemesi ve başlatması yeterlidir.
FCM cihaz belirteçlerini alın
Bir cihazda veya tarayıcıda bildirimler etkinleştirildiğinde size bir cihaz jetonu verilir. Bu cihaz belirteci, belirli bir cihaza veya belirli bir tarayıcıya bildirim göndermek için kullandığınız şeydir.
Kullanıcı oturum açtığında saveMessagingDeviceToken
işlevini çağırırsınız. FCM cihaz belirtecini tarayıcıdan alacağınız ve Cloud Firestore'a kaydedeceğiniz yer burasıdır.
chat.service.ts
-
saveMessagingDeviceToken
işlevini bulun. - Fonksiyonun tamamını aşağıdaki kodla değiştirin.
chat.service.ts
// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
try {
const currentToken = await getToken(this.messaging);
if (currentToken) {
console.log('Got FCM device token:', currentToken);
// Saving the Device Token to Cloud Firestore.
const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });
// This will fire when a message is received while the app is in the foreground.
// When the app is in the background, firebase-messaging-sw.js will receive the message instead.
onMessage(this.messaging, (message) => {
console.log(
'New foreground notification from Firebase Messaging!',
message.notification
);
});
} else {
// Need to request permissions to show notifications.
this.requestNotificationsPermissions();
}
} catch(error) {
console.error('Unable to get messaging token.', error);
};
}
Ancak bu kod başlangıçta çalışmayacaktır. Uygulamanızın cihaz jetonunu alabilmesi için kullanıcının uygulamanıza bildirimleri göstermesine izin vermesi gerekir (codelab'in 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 belirteci verilmez. Bu durumda, bu izni isteyen bir tarayıcı iletişim kutusu görüntüleyecek requestPermission()
yöntemini çağırırsınız ( desteklenen tarayıcılarda ).
-
src/app/services/chat.service.ts
dosyasına geri dönün. -
requestNotificationsPermissions
işlevini bulun. - Fonksiyonun tamamını aşağıdaki kodla değiştirin.
chat.service.ts
// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
console.log('Requesting notifications permission...');
const permission = await Notification.requestPermission();
if (permission === 'granted') {
console.log('Notification permission granted.');
// Notification permission granted.
await this.saveMessagingDeviceToken();
} else {
console.log('Unable to get permission to notify.');
}
}
Cihazınızın jetonunu alın
- Uygulamanız hâlâ sunulmaya devam ediyorsa uygulamanızı tarayıcıda yenileyin. Aksi takdirde, uygulamayı http://localhost:5000 adresinden sunmaya başlamak için komut satırında
firebase emulators:start
komutunu çalıştırın ve ardından tarayıcınızda açın. - Giriş yaptıktan sonra bildirim izni iletişim kutusu görünmelidir:
- İzin Ver'i tıklayın.
- Tarayıcınızın JavaScript konsolunu açın. Aşağıdaki mesajı görmelisiniz:
Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
- Cihaz jetonunuzu kopyalayın. Codelab'in bir sonraki aşaması için buna ihtiyacınız olacak.
Cihazınıza bildirim gönderin
Artık cihaz jetonunuzu aldığınıza göre bir bildirim gönderebilirsiniz.
- Firebase konsolunun Bulut Mesajlaşma sekmesini açın.
- "Yeni Bildirim"i tıklayın
- Bir bildirim başlığı ve bildirim metni girin.
- Ekranın sağ tarafında "test mesajı gönder"e tıklayın
- Tarayıcınızın JavaScript konsolundan kopyaladığınız cihaz jetonunu girin ve ardından artı ("+") işaretini tıklayın
- "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:
13. Cloud Firestore güvenlik kuralları
Veritabanı güvenlik kurallarını görüntüle
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 codelab'in başında Firebase projesini ayarlarken, veri deposuna erişimi kısıtlamamak için "Test modu" varsayılan güvenlik kurallarını kullanmayı seçtiniz. Firebase konsolunda Veritabanı bölümünün Kurallar sekmesinde bu kuralları görüntüleyebilir ve değiştirebilirsiniz.
Şu anda veri deposuna erişimi kısıtlamayan varsayılan kuralları görmelisiniz. Bu, herhangi bir kullanıcının veri deponuzdaki herhangi bir koleksiyonu 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üncelleyeceksiniz:
firestore.rules
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Messages:
// - Anyone can read.
// - Authenticated users can add and edit messages.
// - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
// - Deletes are not allowed.
match /messages/{messageId} {
allow read;
allow create, update: if request.auth != null
&& request.resource.data.name == request.auth.token.name
&& (request.resource.data.text is string
&& request.resource.data.text.size() <= 300
|| request.resource.data.imageUrl is string
&& request.resource.data.imageUrl.matches('https?://.*'));
allow delete: if false;
}
// FCM Tokens:
// - Anyone can write their token.
// - Reading list of tokens is not allowed.
match /fcmTokens/{token} {
allow read: if false;
allow write;
}
}
}
Güvenlik kuralları Emulator paketinize otomatik olarak güncellenmelidir.
Cloud Storage güvenlik kurallarını görüntüleyin
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 codelab'in başında Firebase projesini ayarlarken, yalnızca kimliği doğrulanmış kullanıcıların Cloud Storage'ı kullanmasına izin veren varsayılan Cloud Storage güvenlik kuralını kullanmayı seçtiniz. Firebase konsolunda , Depolama bölümünün Kurallar sekmesinde kuralları görüntüleyebilir ve değiştirebilirsiniz. Oturum açan herhangi bir kullanıcının depolama grubunuzdaki 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üncelleyeceksiniz:
- Her kullanıcının yalnızca kendi özel klasörlerine yazmasına izin ver
- Herkesin Cloud Storage'dan okuma yapmasına izin ver
- Yüklenen dosyaların resim olduğundan emin olun
- Yüklenebilecek görsellerin boyutunu maksimum 5 MB ile sınırlandırın
Bu, aşağıdaki kurallar kullanılarak uygulanabilir:
depolama kuralları
rules_version = '2';
// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
return request.resource.size < maxSizeMB * 1024 * 1024
&& request.resource.contentType.matches('image/.*');
}
service firebase.storage {
match /b/{bucket}/o {
match /{userId}/{messageId}/{fileName} {
allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
allow read;
}
}
}
14. Uygulamanızı Firebase Hosting'i 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ğıtımdan önce firebase.json
dosyanızda hangi yerel dosyaların dağıtılması gerektiğini belirtmeniz gerekir. Bu codelab için bunu zaten yaptınız çünkü bu codelab sırasında dosyalarımızı sunmak için bu adım gerekliydi. Barındırma ayarları, hosting
özelliğinin altında belirtilir:
firebase.json
{
// If you went through the "Cloud Firestore Security Rules" step.
"firestore": {
"rules": "firestore.rules"
},
// If you went through the "Storage Security Rules" step.
"storage": {
"rules": "storage.rules"
},
"hosting": {
"public": "./public"
}
}
Bu ayarlar CLI'ye ./public
dizinindeki ( "public": "./public"
) tüm dosyaları dağıtmak istediğinizi bildirir.
- Komut satırınızın uygulamanızın yerel
angularfire-start
dizinine eriştiğinden emin olun. - Aşağıdaki komutu çalıştırarak dosyalarınızı Firebase projenize dağıtın:
ng deploy
Ardından Firebase seçeneğini seçin ve komut satırındaki talimatları izleyin.
- Konsol aşağıdakileri görüntülemelidir:
=== 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
- Artık tamamen küresel bir CDN'de barındırılan web uygulamanızı, kendi Firebase alt alan adlarınızdan ikisinde Firebase Hosting'i kullanarak ziyaret edin:
-
https://<firebase-projectId>.firebaseapp.com
-
https://<firebase-projectId>.web.app
Alternatif olarak, firebase open hosting:site
komut satırında çalıştırabilirsiniz.
Firebase Hosting'in nasıl çalıştığı hakkında daha fazla bilgi edinmek için belgeleri inceleyin.
Dağıtımlarınızın geçmişi, uygulamanızın önceki sürümlerine geri dönme işlevi ve özel bir alan adı kurmaya yönelik iş akışı dahil olmak üzere yararlı barındırma bilgilerini ve araçlarını görüntülemek için projenizin Firebase konsolu Barındırma bölümüne gidin.
15. Tebrikler!
Gerçek zamanlı bir sohbet web uygulaması oluşturmak için Firebase'i kullandınız!
Neleri ele aldınız
- Firebase Kimlik Doğrulaması
- Bulut Firestore
- Bulut Depolama için Firebase SDK'sı
- Firebase Bulut Mesajlaşma
- Firebase Performans İzleme
- Firebase Barındırma
Sonraki adımlar
Daha fazla bilgi edin
16. [İsteğe Bağlı] Uygulama Kontrolüyle Zorunlu Hale Getirin
Firebase Uygulama Kontrolü, hizmetlerinizin istenmeyen trafiğe karşı korunmasına ve arka ucunuzun kötüye kullanıma karşı korunmasına yardımcı olur. Bu adımda, kimlik doğrulaması ekleyecek ve Uygulama Kontrolü ve reCAPTCHA Enterprise ile yetkisiz istemcileri engelleyeceksiniz.
Öncelikle Uygulama Kontrolü ve reCaptcha'yı etkinleştirmeniz gerekir.
reCaptcha Enterprise'ı etkinleştirme
- Bulut konsolunda Güvenlik altında reCaptcha Enterprise'ı bulun ve seçin.
- Hizmeti istendiği gibi etkinleştirin ve Anahtar Oluştur'u tıklayın.
- İstendiğinde bir görünen ad girin ve platform türünüz olarak Web sitesi'ni seçin.
- Dağıtılan URL'lerinizi Etki Alanı listesine ekleyin ve "Onay kutusu sorgulamasını kullan" seçeneğinin işaretli olmadığından emin olun.
- Anahtar Oluştur'a tıklayın ve oluşturulan anahtarı güvenli bir yerde saklayın. Bu adımda daha sonra ihtiyacınız olacak.
Uygulama Kontrolünü Etkinleştirme
- Firebase konsolunda sol paneldeki Derleme bölümünü bulun.
- Uygulama Kontrolü'ne tıklayın, ardından Uygulama Kontrolü'ne gitmek için Oturum açma yöntemi sekmesine tıklayın.
- Kaydol'a tıklayın ve istendiğinde reCaptcha Enterprise anahtarınızı girin, ardından Kaydet'e tıklayın.
- API Görünümünde Depolama'yı seçin ve Zorunlu kıl'a tıklayın. Cloud Firestore için de aynısını yapın.
Uygulama Kontrolü artık zorunlu kılınmalıdır! Uygulamanızı yenileyin ve sohbet mesajlarını görüntülemeyi veya göndermeyi deneyin. Hata mesajını almalısınız:
Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
Bu, Uygulama Kontrolü'nün doğrulanmamış istekleri varsayılan olarak engellediği anlamına gelir. Şimdi uygulamanıza doğrulama ekleyelim.
Environment.ts dosyanıza gidin ve reCAPTCHAEnterpriseKey
environment
nesnesine ekleyin.
export const environment = {
firebase: {
apiKey: 'API_KEY',
authDomain: 'PROJECT_ID.firebaseapp.com',
databaseURL: 'https://PROJECT_ID.firebaseio.com',
projectId: 'PROJECT_ID',
storageBucket: 'PROJECT_ID.appspot.com',
messagingSenderId: 'SENDER_ID',
appId: 'APP_ID',
measurementId: 'G-MEASUREMENT_ID',
},
reCAPTCHAEnterpriseKey: {
key: "Replace with your recaptcha enterprise site key"
},
};
key
değerini reCaptcha Enterprise jetonunuzla değiştirin.
Ardından app.module.ts dosyasına gidin ve aşağıdaki içe aktarmaları ekleyin:
import { getApp } from '@angular/fire/app';
import {
ReCaptchaEnterpriseProvider,
initializeAppCheck,
provideAppCheck,
} from '@angular/fire/app-check';
Aynı app.module.ts dosyasına aşağıdaki genel değişken bildirimini ekleyin:
declare global {
var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}
@NgModule({ ...
İçe aktarmalarda, ReCaptchaEnterpriseProvider
ile Uygulama Kontrolü'nün başlatılmasını ekleyin ve belirteçlerin otomatik olarak yenilenmesine izin vermek için isTokenAutoRefreshEnabled
true
olarak ayarlayın.
imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
provider: new ReCaptchaEnterpriseProvider(
environment.reCAPTCHAEnterpriseKey.key
),
isTokenAutoRefreshEnabled: true,
});
if (location.hostname === 'localhost') {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
return appCheck;
}),
Yerel teste izin vermek için self.FIREBASE_APPCHECK_DEBUG_TOKEN
değerini true
olarak ayarlayın. Uygulamanızı localhost
yenilediğinizde, konsolda aşağıdakine benzer bir hata ayıklama belirteci günlüğe kaydedilir:
App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.
Şimdi Firebase konsolunda Uygulama Kontrolü'nün Uygulama Görünümü'ne gidin.
Taşma menüsünü tıklayın ve Hata ayıklama jetonlarını yönet ' i seçin.
Ardından, Hata ayıklama belirtecini ekle'ye tıklayın ve istendiği gibi hata ayıklama belirtecini konsolunuzdan yapıştırın.
chat.service.ts dosyasına gidin ve aşağıdaki içe aktarmayı ekleyin:
import { AppCheck } from '@angular/fire/app-check';
Aynı chat.service.ts](angularfire-start/src/app/services/chat.service.ts) dosyasına, diğer Firebase hizmetlerinin yanına Uygulama Kontrolü'nü ekleyin.
export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...
Tebrikler! Uygulama Kontrolü artık uygulamanızda çalışıyor olmalıdır.