Firebase Angular Web Çerçeveleri Codelab

1. Ne yaratacaksınız?

Bu codelab'de, Angular kitaplığımızdan en son çıkanları içeren, gerçek zamanlı ortak çalışmaya dayalı bir harita içeren gezici bir blog oluşturacaksınız: AngularFire . Son web uygulaması, seyahat ettiğiniz her konuma resim yükleyebileceğiniz bir seyahat blogundan oluşacaktır.

Web uygulamasını oluşturmak için AngularFire, yerel testler için Emulator Suite, kullanıcı verilerini takip etmek için Kimlik Doğrulama, veri ve medyayı kalıcı hale getirmek için Firestore ve Storage, Cloud Functions tarafından desteklenecek ve son olarak uygulamanın dağıtımı için Firebase Hosting kullanılacak.

Ne öğreneceksin

• Emulator Suite ile Firebase ürünleriyle yerel olarak nasıl geliştirme yapılır?
• AngularFire ile web uygulamanızı nasıl geliştirebilirsiniz?
• Verilerinizi Firestore'da nasıl kalıcı hale getirebilirsiniz?
• Medya Depolama Alanında nasıl kalıcı hale getirilir?
• Uygulamanızı Firebase Hosting'e nasıl dağıtırsınız?
• Veritabanlarınız ve API'lerinizle etkileşim kurmak için Bulut İşlevleri nasıl kullanılır?

İhtiyacınız olan şey

• Node.js sürüm 10 veya üzeri
• Firebase Projenizin oluşturulması ve yönetimi için bir Google Hesabı
• Firebase CLI sürüm 11.14.2 veya üzeri
• Chrome gibi seçtiğiniz bir tarayıcı
• Angular ve Javascript'in temel anlayışı

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 .

Github deposu birden fazla platform için örnek projeler içerir.

Bu codelab yalnızca web çerçevesi deposunu kullanır:

• 📁 web çerçevesi : Bu codelab sırasında üzerine inşa edeceğiniz başlangıç ​​kodu.

Bağımlılıkları yükle

Klonlamanın ardından web uygulamasını oluşturmadan önce bağımlılıkları kök ve functions klasörüne yükleyin.

cd webframework && npm install
cd functions && npm install

Firebase CLI'yi yükleyin

Bu komutu kullanarak Firebase CLI'yi bir terminale yükleyin:

npm install -g firebase-tools

Aşağıdakileri kullanarak Firebase CLI sürümünüzün 11.14.2'den büyük olup olmadığını bir kez daha kontrol edin:

firebase  --version

Sürümünüz 11.14.2'den düşükse lütfen aşağıdakileri kullanarak güncelleyin:

npm update firebase-tools

3. Firebase projesi oluşturun ve kurun

Firebase projesi oluşturma

1. Firebase'de oturum açın.
2. Firebase konsolunda Proje Ekle'ye tıklayın ve ardından Firebase projenize <projeniz> adını verin. Firebase projenizin proje kimliğini unutmayın.
3. Proje Oluştur'a tıklayın.

Önemli : Firebase projeniz <your-project> olarak adlandırılacaktır, ancak Firebase ona otomatik olarak <your-project>-1234 biçiminde benzersiz bir Proje Kimliği atayacaktır. Bu benzersiz tanımlayıcı, projenizin gerçekte nasıl tanımlandığını gösterir (CLI dahil), oysa <projeniz> yalnızca bir görünen addır.

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 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 .
• Dahili ve harici API'lerle etkileşim kurma işlevleri .

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

Projeye Firebase web uygulaması ekleme

1. Yeni bir Firebase web uygulaması oluşturmak için web simgesini tıklayın.
2. Bir sonraki adımda bir yapılandırma nesnesi göreceksiniz. Bu nesnenin içeriğini environments/environment.ts dosyasına 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 kullanacağız.

Google ile oturum açmayı etkinleştirmek için:

1. Firebase konsolunda sol paneldeki Derleme bölümünü bulun.
2. 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 ).
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ı <projenizin-adı> olarak ayarlayın ve açılır menüden bir Proje destek e-postası seçin.

Cloud Firestore'u etkinleştirin

1. Firebase konsolunun Derleme bölümünde Firestore Veritabanı'na tıklayın.
2. Cloud Firestore bölmesinde Veritabanı oluştur'a tıklayın.
3. Cloud Firestore verilerinizin depolandığı konumu ayarlayın. Bunu varsayılan olarak bırakabilir veya size yakın bir bölgeyi seçebilirsiniz.

Bulut Depolamayı Etkinleştir

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

1. Firebase konsolunun Derleme bölümünde Depolama'yı tıklayın.
2. Başlayın düğmesi yoksa bu, Bulut depolamanın zaten mevcut olduğu anlamına gelir

etkindir ve aşağıdaki adımları uygulamanıza gerek yoktur.

2. Başlayın'ı tıklayın.
3. Firebase projenizin güvenlik kurallarına ilişkin sorumluluk reddi beyanını okuyun ve ardından İleri'yi tıklayın.
4. 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.

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 getireceğiz.

4. Firebase projenize bağlanın

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.

Komut satırınızın uygulamanızın yerel webframework dizinine eriştiğinden emin olun.

Web uygulaması kodunu Firebase projenize bağlayın. Öncelikle komut satırından Firebase CLI'de oturum açın:

firebase login

Daha sonra bir proje takma adı oluşturmak için aşağıdaki komutu çalıştırın. $YOUR_PROJECT_ID Firebase projenizin kimliğiyle değiştirin.

firebase  use  $YOUR_PROJECT_ID

AngularFire'ı ekleyin

AngularFire'ı uygulamaya eklemek için şu komutu çalıştırın:

ng add @angular/fire

Ardından komut satırı talimatlarını izleyin ve Firebase projenizde bulunan özellikleri seçin.

Firebase'i başlat

Firebase projesini başlatmak için şunu çalıştırın:

firebase init

Ardından komut satırı istemlerini takip ederek Firebase projenizde kullanılan özellikleri ve emülatörleri seçin.

Emülatörleri başlat

Emülatörleri başlatmak için webframework dizininden aşağıdaki komutu çalıştırın:

firebase  emulators:start

Sonunda şöyle bir şey görmelisiniz:

$  firebase  emulators:start

i  emulators:  Starting  emulators:  auth,  functions,  firestore,  hosting,  functions

i  firestore:  Firestore  Emulator  logging  to  firestore-debug.log

i  hosting:  Serving  hosting  files  from:  public

✔  hosting:  Local  server:  http://localhost:5000

i  ui:  Emulator  UI  logging  to  ui-debug.log

i  functions:  Watching  "/functions"  for  Cloud  Functions...

✔  functions[updateMap]:  firestore  function  initialized.

  

┌─────────────────────────────────────────────────────────────┐

│  ✔  All  emulators  ready!  It  is  now  safe  to  connect  your  app.  │

│  i  View  Emulator  UI  at  http://localhost:4000  │

└─────────────────────────────────────────────────────────────┘

  

┌────────────────┬────────────────┬─────────────────────────────────┐

│  Emulator  │  Host:Port  │  View  in  Emulator  UI  │

├────────────────┼────────────────┼─────────────────────────────────┤

│  Authentication  │  localhost:9099  │  http://localhost:4000/auth  │

├────────────────┼────────────────┼─────────────────────────────────┤

│  Functions  │  localhost:5001  │  http://localhost:4000/functions  │

├────────────────┼────────────────┼─────────────────────────────────┤

│  Firestore  │  localhost:8080  │  http://localhost:4000/firestore  │

├────────────────┼────────────────┼─────────────────────────────────┤

│  Hosting  │  localhost:5000  │  n/a  │

└────────────────┴────────────────┴─────────────────────────────────┘

Emulator  Hub  running  at  localhost:4400

Other  reserved  ports:  4500

  

Issues?  Report  them  at  https://github.com/firebase/firebase-tools/issues  and  attach  the  *-debug.log  files.

✔All emulators ready! mesajı, emülatörler kullanıma hazır.

Seyahat uygulamanızın (henüz!) çalışmayan kullanıcı arayüzünü görmelisiniz:

Şimdi inşaata başlayalım!

5. Web uygulamasını emülatörlere bağlayın

Emülatör günlüklerindeki tabloya göre, Cloud Firestore emülatörü 8080 numaralı bağlantı noktasını dinliyor ve Kimlik Doğrulama emülatörü 9099 numaralı bağlantı noktasını dinliyor.

EmulatorUI'yi açın

Web tarayıcınızda http://127.0.0.1:4000/ adresine gidin. Emulator Suite kullanıcı arayüzünü görmelisiniz.

Uygulamayı öykünücüleri kullanacak şekilde yönlendirin

src/app/app.module.ts dosyasında, aşağıdaki kodu AppModule içe aktarma listesine ekleyin:

@NgModule({
	declarations: [...],
	imports: [
		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;
		}),
		...
	]

Uygulama artık yerel öykünücüleri kullanacak şekilde yapılandırılmış olup, test ve geliştirmenin yerel olarak yapılmasına olanak tanır.

6. Kimlik Doğrulama Ekleme

Artık uygulama için emülatörler ayarlandığına göre, her kullanıcının mesaj göndermeden önce oturum açtığından emin olmak için Kimlik Doğrulama özellikleri ekleyebiliriz.

Bunu yapmak için signin işlevlerini doğrudan AngularFire'dan içe aktarabilir ve kullanıcınızın kimlik doğrulama durumunu authState işleviyle takip edebiliriz. Sayfanın yüklendiğinde kullanıcı kimlik doğrulama durumunu kontrol etmesi için oturum açma sayfası işlevlerini değiştirin.

AngularFire Auth'u enjekte etme

src/app/pages/login-page/login-page.component.ts konumunda, Auth @angular/fire/auth öğesinden içe aktarın ve bunu LoginPageComponent öğesine enjekte edin. Google gibi kimlik doğrulama sağlayıcıları ve signin , signout gibi işlevler de doğrudan aynı paketten içe aktarılabilir ve uygulamada kullanılabilir.

import { Auth, GoogleAuthProvider, signInWithPopup, signOut, user } from  '@angular/fire/auth';

export  class  LoginPageComponent  implements  OnInit {
	private  auth: Auth = inject(Auth);
	private  provider = new  GoogleAuthProvider();
	user$ = user(this.auth);
	constructor() {}  

	ngOnInit(): void {} 

	login() {
		signInWithPopup(this.auth, this.provider).then((result) => {
			const  credential = GoogleAuthProvider.credentialFromResult(result);
			return  credential;
		})
	}

	logout() {
		signOut(this.auth).then(() => {
			console.log('signed out');}).catch((error) => {
				console.log('sign out error: ' + error);
		})
	}
}

Artık giriş sayfası işlevsel! Oturum açmayı deneyin ve Kimlik Doğrulama Emülatöründeki sonuçlara göz atın.

7. Firestore'u Yapılandırma

Bu adımda, Firestore'da depolanan seyahat blog gönderilerini yayınlamak ve güncellemek için işlevsellik ekleyeceksiniz.

Kimlik Doğrulamaya benzer şekilde, Firestore işlevleri AngularFire'dan önceden paketlenmiş olarak gelir. Her belge bir koleksiyona aittir ve her belge aynı zamanda iç içe geçmiş koleksiyonlara da sahip olabilir. Bir seyahat blog yazısı oluşturmak ve güncellemek için Firestore'daki belgenin path bilmek gerekir.

TravelService'in Uygulanması

Birçok farklı sayfanın web uygulamasında Firestore belgelerini okuması ve güncellemesi gerekeceğinden, aynı AngularFire işlevlerini her sayfaya tekrar tekrar enjekte etmekten kaçınmak için işlevleri src/app/services/travel.service.ts dosyasında uygulayabiliriz.

Önceki adıma benzer şekilde Auth yanı sıra Firestore da hizmetimize enjekte ederek başlayın. Geçerli kimlik doğrulama durumunu dinleyen gözlemlenebilir bir user$ nesnesinin tanımlanması da faydalıdır.

import { doc, docData, DocumentReference, Firestore, getDoc, setDoc, updateDoc, collection, addDoc, deleteDoc, collectionData, Timestamp } from  "@angular/fire/firestore";

export  class  TravelService {
	firestore: Firestore = inject(Firestore);
	auth: Auth = inject(Auth);
	user$ = authState(this.auth).pipe(filter(user  =>  user !== null), map(user  =>  user!));
	router: Router = inject(Router);

Seyahat yazısı ekleme

Seyahat gönderileri, Firestore'da depolanan belgeler olarak mevcut olacak ve koleksiyonların içinde belgelerin bulunması gerektiğinden, tüm seyahat gönderilerini içeren koleksiyon, travels olarak adlandırılacaktır. Bu nedenle, herhangi bir seyahat noktasının yolu travels/

AngularFire'ın addDoc işlevini kullanarak bir koleksiyona bir nesne eklenebilir:

async  addEmptyTravel(userId: String) {
	...
	addDoc(collection(this.firestore, 'travels'), travelData).then((travelRef) => {
		collection(this.firestore, `travels/${travelRef.id}/stops`);
		setDoc(travelRef, {... travelData, id:  travelRef.id})
		this.router.navigate(['edit', `${travelRef.id}`]);
		return  travelRef;

	})
}

Verileri güncelleme ve silme

Herhangi bir seyahat gönderisinin kullanıcı kimliği göz önüne alındığında, Firestore'da saklanan belgenin yolu çıkarılabilir ve bu daha sonra AngularFire'ın updateFoc ve deleteDoc işlevleri kullanılarak okunabilir, güncellenebilir veya silinebilir:

async  updateData(path: string, data: Partial<Travel | Stop>) {
	await  updateDoc(doc(this.firestore, path), data)
}

async  deleteData(path: string) {
	const  ref = doc(this.firestore, path);
	await  deleteDoc(ref)
}

Verileri gözlemlenebilir olarak okumak

Yol boyunca seyahat noktaları ve duraklar oluşturulduktan sonra değiştirilebildiğinden, belge nesnelerini gözlemlenebilir olarak almak ve yapılan değişikliklere abone olmak daha yararlı olacaktır. Bu işlevsellik, @angular/fire/firestore docData ve collectionData işlevleri tarafından sunulur.

getDocData(path: string) {
	return  docData(doc(this.firestore, path), {idField:  'id'}) as  Observable<Travel | Stop>
}

  
getCollectionData(path: string) {
	return  collectionData(collection(this.firestore, path), {idField:  'id'}) as  Observable<Travel[] | Stop[]>
}

Seyahat gönderisine durak ekleme

Artık seyahat postası işlemleri ayarlandığına göre, bir seyahat postasının alt koleksiyonu altında şu şekilde yer alacak durakları değerlendirmenin zamanı geldi: travels/ /stops/ travels/ /stops/

Bu, bir seyahat gönderisi oluşturmakla hemen hemen aynıdır; bu nedenle, bunu kendi başınıza uygulamaya çalışın veya aşağıdaki uygulamaya göz atın:

async  addStop(travelId: string) {
	...
	const  ref = await  addDoc(collection(this.firestore, `travels/${travelId}/stops`), stopData)
	setDoc(ref, {...stopData, id:  ref.id})
}

Güzel! Firestore işlevleri Seyahat hizmetinde uygulanmıştır; artık bunları çalışırken görebilirsiniz.

Uygulamada Firestore işlevlerini kullanma

src/app/pages/my-travels/my-travels.component.ts gidin ve işlevlerini kullanmak için TravelService enjekte edin.

travelService = inject(TravelService);
travelsData$: Observable<Travel[]>;
stopsList$!: Observable<Stop[]>;
constructor() {
	this.travelsData$ = this.travelService.getCollectionData(`travels`) as  Observable<Travel[]>
}

Tüm seyahatlerin Gözlemlenebilir dizisini elde etmek için yapıcıda TravelService çağrılır.

Yalnızca geçerli kullanıcının seyahatlerinin gerekli olduğu durumda query işlevini kullanın.

Güvenliği sağlamanın diğer yöntemleri arasında güvenlik kurallarının uygulanması veya aşağıdaki isteğe bağlı adımlarda açıklandığı gibi Cloud Functions'ın Firestore ile kullanılması yer alır.

Daha sonra TravelService uygulanan işlevleri çağırmanız yeterlidir.

async  createTravel(userId: String) {
	this.travelService.addEmptyTravel(userId);
}

deleteTravel(travelId: String) {
	this.travelService.deleteData(`travels/${travelId}`)
}

Artık Seyahatlerim sayfası işlevsel olmalı! Yeni bir seyahat gönderisi oluşturduğunuzda Firestore emülatörünüzde neler olduğuna göz atın.

Ardından, /src/app/pages/edit-travels/edit-travels.component.ts dosyasındaki güncelleme işlevleri için tekrarlayın:

travelService: TravelService = inject(TravelService)
travelId = this.activatedRoute.snapshot.paramMap.get('travelId');
travelData$: Observable<Travel>;
stopsData$: Observable<Stop[]>;

constructor() {
	this.travelData$ = this.travelService.getDocData(`travels/${this.travelId}`) as  Observable<Travel>
	this.stopsData$ = this.travelService.getCollectionData(`travels/${this.travelId}/stops`) as  Observable<Stop[]>
}

updateCurrentTravel(travel: Partial<Travel>) {
	this.travelService.updateData(`travels${this.travelId}`, travel)
}

  

updateCurrentStop(stop: Partial<Stop>) {
	stop.type = stop.type?.toString();
	this.travelService.updateData(`travels${this.travelId}/stops/${stop.id}`, stop)
}

  

addStop() {
	if (!this.travelId) return;
	this.travelService.addStop(this.travelId);
}

deleteStop(stopId: string) {
	if (!this.travelId || !stopId) {
		return;
	}
	this.travelService.deleteData(`travels${this.travelId}/stops/${stopId}`)
	this.stopsData$ = this.travelService.getCollectionData(`travels${this.travelId}/stops`) as  Observable<Stop[]>

}

8. Depolamayı Yapılandırma

Artık görüntüleri ve diğer medya türlerini depolamak için Depolama uygulayacaksınız.

Cloud Firestore, JSON nesneleri gibi yapılandırılmış verileri depolamak için en iyi şekilde kullanılır. Cloud Storage, dosyaları veya blobları depolamak için tasarlanmıştır. Bu uygulamada, kullanıcıların seyahat resimlerini paylaşmalarına izin vermek için kullanacaksınız.

Firestore'da olduğu gibi, Storage ile dosyaları depolamak ve güncellemek için her dosya için benzersiz bir tanımlayıcı gerekir.

TraveService fonksiyonları uygulayalım:

Dosya yükleme

src/app/services/travel.service.ts adresine gidin ve AngularFire'dan Storage'ı enjekte edin:

export  class  TravelService {
firestore: Firestore = inject(Firestore);
auth: Auth = inject(Auth);
storage: Storage = inject(Storage);

Ve yükleme işlevini uygulayın:

async  uploadToStorage(path: string, input: HTMLInputElement, contentType: any) {
	if (!input.files) return  null
	const  files: FileList = input.files;
		for (let  i = 0; i  <  files.length; i++) {
			const  file = files.item(i);
			if (file) {
				const  imagePath = `${path}/${file.name}`
				const  storageRef = ref(this.storage, imagePath);
				await  uploadBytesResumable(storageRef, file, contentType);
				return  await  getDownloadURL(storageRef);
			}
		}
	return  null;
}

Firestore'dan belgelere ve Cloud Storage'dan dosyalara erişim arasındaki temel fark, her ikisinin de klasör yapılandırılmış yolları izlemesine rağmen, temel URL ve yol kombinasyonunun getDownloadURL aracılığıyla elde edilmesi ve bunun daha sonra saklanıp bir dosyada kullanılmasıdır. dosya.

Uygulamadaki işlevi kullanma

src/app/components/edit-stop/edit-stop.component.ts adresine gidin ve aşağıdakileri kullanarak yükleme işlevini çağırın:

	async  uploadFile(file: HTMLInputElement, stop: Partial<Stop>) {
	const  path = `/travels/${this.travelId}/stops/${stop.id}`
	const  url = await  this.travelService.uploadToStorage(path, file, {contentType:  'image/png'});
	stop.image = url ? url : '';
	this.travelService.updateData(path, stop);
}

Görüntü yüklendiğinde, medya dosyasının kendisi depoya yüklenecek ve URL, buna göre Firestore'daki belgede saklanacaktır.

9. Uygulamayı dağıtma

Artık uygulamayı dağıtmaya hazırız!

firebase yapılandırmalarını src/environments/environment.ts src/environments/environment.prod.ts kopyalayın ve çalıştırın:

firebase deploy

Bunun gibi bir şey görmelisiniz:

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

=== Deploying to 'friendly-travels-b6a4b'...

i  deploying storage, firestore, hosting
i  firebase.storage: checking storage.rules for compilation errors...
✔  firebase.storage: rules file storage.rules compiled successfully
i  firestore: reading indexes from firestore.indexes.json...
i  cloud.firestore: checking firestore.rules for compilation errors...
✔  cloud.firestore: rules file firestore.rules compiled successfully
i  storage: latest version of storage.rules already up to date, skipping upload...
i  firestore: deploying indexes...
i  firestore: latest version of firestore.rules already up to date, skipping upload...
✔  firestore: deployed indexes in firestore.indexes.json successfully for (default) database
i  hosting[friendly-travels-b6a4b]: beginning deploy...
i  hosting[friendly-travels-b6a4b]: found 6 files in .firebase/friendly-travels-b6a4b/hosting
✔  hosting[friendly-travels-b6a4b]: file upload complete
✔  storage: released rules storage.rules to firebase.storage
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendly-travels-b6a4b]: finalizing version...
✔  hosting[friendly-travels-b6a4b]: version finalized
i  hosting[friendly-travels-b6a4b]: releasing new version...
✔  hosting[friendly-travels-b6a4b]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendly-travels-b6a4b/overview
Hosting URL: https://friendly-travels-b6a4b.web.app

10. Tebrikler!

Artık başvurunuz tamamlanmalı ve Firebase Hosting'e dağıtılmalıdır! Artık tüm verilere ve analizlere Firebase Konsolunuzdan erişebileceksiniz.

AngularFire, İşlevler, güvenlik kuralları ile ilgili daha fazla özellik için aşağıdaki isteğe bağlı adımların yanı sıra diğer Firebase Codelab'lere göz atmayı unutmayın!

11. İsteğe bağlı: AngularFire kimlik doğrulama korumaları

AngularFire, Firebase Kimlik Doğrulamanın yanı sıra rotalar üzerinde kimlik doğrulamaya dayalı korumalar da sunar, böylece erişimi yetersiz olan kullanıcılar yeniden yönlendirilebilir. Bu, uygulamanın korunan verilere erişen kullanıcılardan korunmasına yardımcı olur.

src/app/app-routing.module.ts dosyasında içe aktarın

import {AuthGuard, redirectLoggedInTo, redirectUnauthorizedTo} from  '@angular/fire/auth-guard'

Daha sonra, kullanıcıların belirli sayfalarda ne zaman ve nereye yönlendirilmeleri gerektiğine ilişkin işlevleri tanımlayabilirsiniz:

const  redirectUnauthorizedToLogin = () =>  redirectUnauthorizedTo(['signin']);
const  redirectLoggedInToTravels = () =>  redirectLoggedInTo(['my-travels']);

Daha sonra bunları rotalarınıza eklemeniz yeterli:

const  routes: Routes = [
	{path:  '', component:  LoginPageComponent, canActivate: [AuthGuard], data: {authGuardPipe:  redirectLoggedInToTravels}},
	{path:  'signin', component:  LoginPageComponent, canActivate: [AuthGuard], data: {authGuardPipe:  redirectLoggedInToTravels}},
	{path:  'my-travels', component:  MyTravelsComponent, canActivate: [AuthGuard], data: {authGuardPipe:  redirectUnauthorizedToLogin}},
	{path:  'edit/:travelId', component:  EditTravelsComponent, canActivate: [AuthGuard], data: {authGuardPipe:  redirectUnauthorizedToLogin}},
];

12. İsteğe bağlı: güvenlik kuralları

Hem Firestore hem de Cloud Storage, güvenliği sağlamak ve verileri doğrulamak için güvenlik kurallarını (sırasıyla firestore.rules ve security.rules ) kullanır.

Şu anda Firestore ve Storage verileri okuma ve yazma için açık erişime sahiptir, ancak insanların başkalarının gönderilerini değiştirmesini istemezsiniz! Koleksiyonlarınıza ve belgelerinize erişimi kısıtlamak için güvenlik kurallarını kullanabilirsiniz.

Firestore kuralları

Yalnızca kimliği doğrulanmış kullanıcıların seyahat gönderilerini görüntülemesine izin vermek için firestore.rules dosyasına gidin ve şunu ekleyin:

rules_version  =  '2';
service  cloud.firestore  {
	match  /databases/{database}/travels  {
		allow  read:  if  request.auth.uid  !=  null;
		allow  write:
		if  request.auth.uid  ==  request.resource.data.userId;
	}
}

Verileri doğrulamak için güvenlik kuralları da kullanılabilir:

rules_version  =  '2';
service  cloud.firestore  {
	match  /databases/{database}/posts  {
		allow  read:  if  request.auth.uid  !=  null;
		allow  write:
		if  request.auth.uid  ==  request.resource.data.userId;
		&&  "author"  in  request.resource.data
		&&  "text"  in  request.resource.data
		&&  "timestamp"  in  request.resource.data;
	}
}

Depolama kuralları

Benzer şekilde, storage.rules dosyasındaki depolama veritabanlarına erişimi zorlamak için güvenlik kurallarını kullanabiliriz. Daha karmaşık kontroller için de işlevleri kullanabileceğimizi unutmayın:

rules_version  =  '2';

function  isImageBelowMaxSize(maxSizeMB)  {
	return  request.resource.size  <  maxSizeMB  *  1024  *  1024
		&&  request.resource.contentType.matches('image/.*');
}

 service  firebase.storage  {
	match  /b/{bucket}/o  {
		match  /{userId}/{postId}/{filename}  {
			allow  write:  if  request.auth  !=  null
			&&  request.auth.uid  ==  userId  &&  isImageBelowMaxSize(5);
			allow  read;
		}
	}
}