Codelab בנושא Firebase Angular Web Frameworks

1. מה תייצרו

בקודלאב הזה תלמדו ליצור בלוג נסיעות עם מפה שיתופית בזמן אמת, באמצעות הגרסה העדכנית ביותר של ספריית Angular: AngularFire. אפליקציית האינטרנט הסופית תכלול בלוג נסיעות שבו תוכלו להעלות תמונות מכל מקום שביקרתם בו.

נשתמש ב-AngularFire כדי ליצור את אפליקציית האינטרנט, ב-Emulator Suite לבדיקה מקומית, באימות כדי לעקוב אחרי נתוני המשתמשים, ב-Firestore וב-Storage כדי לשמור נתונים ומדיה, באמצעות Cloud Functions, ולבסוף ב-Firebase Hosting כדי לפרוס את האפליקציה.

מה תלמדו

• איך לפתח מקומית עם מוצרי Firebase באמצעות Emulator Suite
• איך לשפר את אפליקציית האינטרנט באמצעות AngularFire
• איך לשמור את הנתונים ב-Firestore
• איך שומרים מדיה ב-Storage
• איך פורסים את האפליקציה ב-Firebase Hosting
• איך משתמשים ב-Cloud Functions כדי ליצור אינטראקציה עם מסדי הנתונים וממשקי ה-API

מה צריך

• Node.js בגרסה 10 ואילך
• חשבון Google ליצירה ולניהול של פרויקט Firebase
• Firebase CLI בגרסה 11.14.2 ואילך
• דפדפן לבחירתכם, כמו Chrome
• הבנה בסיסית של Angular ו-JavaScript

2. קבלת קוד לדוגמה

משכפלים את מאגר הנתונים ב-GitHub של הקוד למעבדה משורת הפקודה:

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

לחלופין, אם לא התקנתם את git, תוכלו להוריד את המאגר כקובץ ZIP.

מאגר GitHub מכיל פרויקטים לדוגמה לכמה פלטפורמות.

בקודלאב הזה נעשה שימוש רק במאגר של Web Framework:

• 📁 webframework: הקוד הבסיסי שעליו תבנו במהלך ה-Codelab הזה.

התקנת יחסי תלות

אחרי היצירה באמצעות קלון, צריך להתקין את יחסי התלות בתיקיית השורש ובתיקייה functions לפני שמפתחים את אפליקציית האינטרנט.

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

התקנת Firebase CLI

מתקינים את Firebase CLI באמצעות הפקודה הבאה בטרמינל:

npm install -g firebase-tools

מוודאים שגרסת ה-CLI של Firebase גדולה מ-11.14.2 באמצעות:

firebase  --version

אם הגרסה שלך נמוכה מ-11.14.2, עליך לעדכן אותה באמצעות:

npm update firebase-tools

3. יצירת פרויקט Firebase והגדרתו

יצירת פרויקט Firebase

1. נכנסים ל-Firebase.
2. במסוף Firebase, לוחצים על Add Project (הוספת פרויקט) ומזינים שם לפרויקט ב-Firebase – <your-project>. חשוב לזכור את מזהה הפרויקט ב-Firebase.
3. לוחצים על Create Project.

חשוב: שם הפרויקט ב-Firebase יהיה <your-project>, אבל מערכת Firebase תקצה לו באופן אוטומטי מזהה פרויקט ייחודי בפורמט <your-project>-1234. המזהה הייחודי הזה הוא האופן שבו הפרויקט מזוהה בפועל (כולל ב-CLI), ואילו <your-project> הוא פשוט שם מוצג.

באפליקציה שנבנה נשתמש במוצרי Firebase שזמינים לאפליקציות אינטרנט:

• אימות ב-Firebase כדי לאפשר למשתמשים להיכנס לאפליקציה בקלות.
• Cloud Firestore כדי לשמור נתונים מובְנים בענן ולקבל התראות מיידיות כשהנתונים משתנים.
• Cloud Storage for Firebase לשמירת קבצים בענן.
• אירוח ב-Firebase לאירוח הנכסים ולהצגתם.
• פונקציות ליצירת אינטראקציה עם ממשקי API פנימיים וחיצוניים.

חלק מהמוצרים האלה דורשים הגדרות מיוחדות או צריך להפעיל אותם באמצעות מסוף Firebase.

הוספת אפליקציית אינטרנט של Firebase לפרויקט

1. לוחצים על סמל האינטרנט כדי ליצור אפליקציית אינטרנט חדשה ב-Firebase.
2. בשלב הבא יופיע אובייקט תצורה. מעתיקים את התוכן של האובייקט הזה לקובץ environments/environment.ts.

הפעלת כניסה באמצעות חשבון Google לאימות ב-Firebase

כדי לאפשר למשתמשים להיכנס לאפליקציית האינטרנט באמצעות חשבונות Google שלהם, נשתמש בשיטת הכניסה Google.

כדי להפעיל את הכניסה באמצעות Google:

1. במסוף Firebase, מאתרים את הקטע Build בחלונית השמאלית.
2. לוחצים על אימות ואז על הכרטיסייה שיטת כניסה (או לוחצים כאן כדי לעבור ישירות לשם).
3. מפעילים את ספק הכניסה Google ולוחצים על שמירה.
4. מגדירים את השם הציבורי של האפליקציה כ-<your-project-name> ובוחרים Project support email (כתובת אימייל לתמיכה בפרויקט) מהתפריט הנפתח.

הפעלת Cloud Firestore

1. בקטע Build במסוף Firebase, לוחצים על Firestore Database.
2. לוחצים על Create database בחלונית של Cloud Firestore.
3. הגדרת המיקום שבו נתוני Cloud Firestore מאוחסנים. אפשר להשאיר את האפשרות הזו כברירת המחדל או לבחור אזור קרוב אליכם.

הפעלת Cloud Storage

אפליקציית האינטרנט משתמשת ב-Cloud Storage for Firebase כדי לאחסן, להעלות ולשתף תמונות.

1. בקטע Build במסוף Firebase, לוחצים על Storage.
2. אם הלחצן תחילת העבודה לא מופיע, סימן ש-Cloud Storage כבר

מופעלת, ואין צורך לבצע את השלבים הבאים.

2. לוחצים על Get Started.
3. קוראים את כתב הוויתור לגבי כללי האבטחה של הפרויקט ב-Firebase ולוחצים על הבא.
4. המיקום ב-Cloud Storage נבחר מראש לפי אותו אזור שבחרתם למסד הנתונים של Cloud Firestore. לוחצים על סיום כדי להשלים את ההגדרה.

לפי כללי האבטחה שמוגדרים כברירת מחדל, כל משתמש מאומת יכול לכתוב כל דבר ב-Cloud Storage. בהמשך הסדנה נבטיח שהאחסון יהיה מאובטח יותר.

4. קישור לפרויקט Firebase

ממשק שורת הפקודה (CLI) של Firebase מאפשר לכם להשתמש באירוח ב-Firebase כדי להציג את אפליקציית האינטרנט באופן מקומי, וגם לפרוס את אפליקציית האינטרנט בפרויקט Firebase.

צריך לוודא ששורת הפקודה ניגשת לספרייה המקומית webframework של האפליקציה.

מקשרים את הקוד של אפליקציית האינטרנט לפרויקט Firebase. קודם כול, מתחברים ל-Firebase CLI בשורת הפקודה:

firebase login

לאחר מכן, מריצים את הפקודה הבאה כדי ליצור כינוי לפרויקט. מחליפים את $YOUR_PROJECT_ID במזהה של פרויקט Firebase.

firebase  use  $YOUR_PROJECT_ID

הוספת AngularFire

כדי להוסיף את AngularFire לאפליקציה, מריצים את הפקודה:

ng add @angular/fire

לאחר מכן, פועלים לפי ההוראות בשורת הפקודה ובוחרים את התכונות שקיימות בפרויקט Firebase.

איך מפעילים את Firebase

כדי לאתחל את פרויקט Firebase, מריצים את הפקודה:

firebase init

לאחר מכן, פועלים לפי ההנחיות בשורת הפקודה ובוחרים את התכונות והמכשירים להדמיה ששימשו בפרויקט Firebase.

הפעלת הסימולטורים

בספרייה webframework, מריצים את הפקודה הבאה כדי להפעיל את המהדמנים:

firebase  emulators:start

בסוף אמור להופיע משהו כזה:

$  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!, אפשר להשתמש במהדמנים.

אמור להופיע ממשק המשתמש של אפליקציית הנסיעות, שעדיין לא פועל:

עכשיו נתחיל לבנות!

5. חיבור אפליקציית האינטרנט לאמולטורים

על סמך הטבלה ביומני האמולטור, אמולטור Cloud Firestore מקשיב ביציאה 8080 ואמולטור האימות מקשיב ביציאה 9099.

פתיחת EmulatorUI

בדפדפן האינטרנט, עוברים לכתובת http://127.0.0.1:4000/. אמור להופיע ממשק המשתמש של Emulator Suite.

ניתוב האפליקציה לשימוש במהדמנים

ב-src/app/app.module.ts, מוסיפים את הקוד הבא לרשימת הייבוא של AppModule:

@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;
		}),
		...
	]

האפליקציה מוגדרת עכשיו להשתמש באמולטורים מקומיים, כך שאפשר לבצע פיתוח ובדיקה באופן מקומי.

6. הוספת אימות

עכשיו, אחרי שההדמיות מוגדרות לאפליקציה, אנחנו יכולים להוסיף תכונות אימות כדי לוודא שכל משתמש נכנס לחשבון לפני שהוא מפרסם הודעות.

כדי לעשות זאת, אפשר לייבא פונקציות signin ישירות מ-AngularFire ולעקוב אחרי מצב האימות של המשתמש באמצעות הפונקציה authState. משנים את הפונקציות של דף ההתחברות כך שהדף יבדוק את מצב האימות של המשתמש בזמן הטעינה.

הזרקת AngularFire Auth

ב-src/app/pages/login-page/login-page.component.ts, מייבאים את Auth מ-@angular/fire/auth ומחדירים אותו ל-LoginPageComponent. אפשר גם לייבא ישירות מאותה חבילה ספקי אימות כמו Google ופונקציות כמו signin ו-signout, ולהשתמש בהם באפליקציה.

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

עכשיו דף ההתחברות פועל! מנסים להתחבר ולבדוק את התוצאות במהדמ ה-Authentication.

7. הגדרת Firestore

בשלב הזה תוסיפו פונקציונליות לפרסום ולעדכון של פוסטים בבלוג הנסיעות שמאוחסנים ב-Firestore.

בדומה לאימות, הפונקציות של Firestore מגיעות מאריזות מוכנות מ-AngularFire. כל מסמך שייך לאוסף, וכל מסמך יכול לכלול גם אוספים בתצוגת עץ. כדי ליצור ולעדכן פוסט בבלוג נסיעות, צריך לדעת את הערך של path של המסמך ב-Firestore.

הטמעת TravelService

מכיוון שדפים רבים שונים יצטרכו לקרוא ולעדכן מסמכי Firestore באפליקציית האינטרנט, אנחנו יכולים להטמיע את הפונקציות ב-src/app/services/travel.service.ts כדי להימנע מהחדרת אותן פונקציות של AngularFire שוב ושוב בכל דף.

מתחילים בהחדרת Auth, בדומה לשלב הקודם, וגם Firestore לשירות שלנו. כדאי גם להגדיר אובייקט user$ שניתן לצפות בו, שמקשיב לסטטוס האימות הנוכחי.

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

הוספת פוסט בנושא נסיעות

פוסטים בנושא נסיעות יהיו מסמכים ששמורים ב-Firestore. מאחר שמסמכים חייבים להימצא בתוך אוספים, האוסף שמכיל את כל הפוסטים בנושא נסיעות ייקרא travels. לכן, הנתיב של כל פוסט בנושא נסיעות יהיה travels/

אפשר להשתמש בפונקציה addDoc מ-AngularFire כדי להוסיף אובייקט לאוסף:

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;

	})
}

עדכון ומחיקה של נתונים

לפי uid של כל פוסט בנושא נסיעות, אפשר להסיק את הנתיב של המסמך שנשמר ב-Firestore. לאחר מכן אפשר לקרוא, לעדכן או למחוק את המסמך באמצעות הפונקציות updateFoc ו-deleteDoc של AngularFire:

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

קריאת נתונים כאירוע גלוי

מכיוון שאפשר לשנות את הפוסטים על נסיעות ואת תחנות העצירה בדרך אחרי היצירה שלהם, עדיף לקבל אובייקטים של מסמכים כמשתנים שניתן לצפות בהם, כדי להירשם לכל שינוי שיתבצע. הפונקציונליות הזו זמינה באמצעות הפונקציות docData ו-collectionData מ-@angular/fire/firestore.

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[]>
}

הוספת תחנות לפוסט בנושא נסיעות

עכשיו, אחרי שהגדרתם את הפעולות של פוסטים בנושא נסיעות, הגיע הזמן להתייחס לתחנות. התחנות יהיו חלק מאוסף משנה של פוסט בנושא נסיעות, כך: travels//stops/

התהליך הזה כמעט זהה ליצירת פוסט על טיול, אז אתם יכולים לנסות להטמיע אותו בעצמכם או לעיין בהטמעה שמפורטת בהמשך:

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

מצוין! הפונקציות של Firestore יושמו בשירות Travel, כך שאפשר לראות אותן בפעולה.

שימוש בפונקציות של Firestore באפליקציה

עוברים אל src/app/pages/my-travels/my-travels.component.ts ומחדירים את TravelService כדי להשתמש בפונקציות שלו.

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

TravelService נקרא ב-constructor כדי לקבל מערך Observable של כל הנסיעות.

אם רוצים לקבל רק את הנסיעות של המשתמש הנוכחי, משתמשים בפונקציה query.

שיטות נוספות לשמירה על האבטחה כוללות הטמעת כללי אבטחה או שימוש ב-Cloud Functions עם Firestore, כפי שמתואר בשלבים האופציונליים שבהמשך.

לאחר מכן, פשוט קוראים לפונקציות שמופעלות ב-TravelService.

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

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

עכשיו הדף 'הנסיעות שלי' אמור לפעול. בודקים מה קורה במהלך יצירת פוסט חדש בנושא נסיעות במהלך הדמיה של Firestore.

לאחר מכן, חוזרים על הפעולה עבור פונקציות העדכון ב-/src/app/pages/edit-travels/edit-travels.component.ts :

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. הגדרת אחסון

עכשיו נטמיע את Storage כדי לאחסן תמונות וסוגים אחרים של מדיה.

הכי כדאי להשתמש ב-Cloud Firestore לאחסון נתונים מובְנים, כמו אובייקטי JSON. Cloud Storage מיועד לאחסון קבצים או blobs. באפליקציה הזו, תשתמשו בה כדי לאפשר למשתמשים לשתף את תמונות הנסיעה שלהם.

בדומה ל-Firestore, כדי לאחסן ולעדכן קבצים ב-Storage נדרש מזהה ייחודי לכל קובץ.

נטמיע את הפונקציות ב-TraveService:

העלאת קובץ

עוברים אל src/app/services/travel.service.ts ומחדירים את Storage מ-AngularFire:

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

ומטמיעים את פונקציית ההעלאה:

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 לבין גישה לקובצי Cloud Storage הוא ששניהם עוקבים אחרי נתיבי תיקיות מובְנים, אבל שילוב כתובת ה-URL הבסיסית והנתיב מתקבל דרך getDownloadURL, שאפשר לאחסן אותו ולהשתמש בו בקובץ .

שימוש בפונקציה באפליקציה

עוברים אל src/app/components/edit-stop/edit-stop.component.ts ומפעילים את פונקציית ההעלאה באמצעות:

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

כשמעלים את התמונה, קובץ המדיה עצמו מועלה לאחסון וכתובת ה-URL נשמרת בהתאם במסמך ב-Firestore.

9. פריסת האפליקציה

עכשיו אנחנו מוכנים לפרוס את האפליקציה.

מעתיקים את הגדרות firebase מ-src/environments/environment.ts אל src/environments/environment.prod.ts ומריצים את הפקודה:

firebase deploy

התוצאה אמורה להיראות כך:

✔ 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. כל הכבוד!

עכשיו האפליקציה אמורה להיות מושלמת ופרוסה ב-Firebase Hosting. מעכשיו, כל הנתונים והניתוחים יהיו זמינים במסוף Firebase.

רוצים לדעת עוד על AngularFire,‏ Functions וכללי אבטחה? אל תשכחו לעיין בשלבים האופציונליים שבהמשך, וגם בCodelabs אחרים של Firebase.

11. אופציונלי: אמצעי הגנה לאימות של AngularFire

בנוסף לאימות ב-Firebase, AngularFire מציע גם אמצעי הגנה מבוססי אימות בנתיבים, כדי שאפשר יהיה להפנות משתמשים עם גישה לא מספקת לכתובת אחרת. כך אפשר להגן על האפליקציה מפני משתמשים שמקבלים גישה לנתונים מוגנים.

ב-src/app/app-routing.module.ts, מייבאים

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

לאחר מכן תוכלו להגדיר פונקציות שקשורות למועד ולמקום שאליו המשתמשים יועברו בדפים מסוימים:

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

לאחר מכן, פשוט מוסיפים אותם למסלולים:

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. אופציונלי: כללי אבטחה

גם ב-Firestore וגם ב-Cloud Storage נעשה שימוש בכללי אבטחה (firestore.rules ו-security.rules, בהתאמה) כדי לאכוף את האבטחה ולאמת את הנתונים.

בשלב הזה, לנתונים של Firestore ו-Storage יש גישה פתוחה לקריאה ולכתיבה, אבל אתם לא רוצים שאנשים ישנו פוסטים של אחרים. אתם יכולים להשתמש בכללי אבטחה כדי להגביל את הגישה לאוספים ולמסמכים שלכם.

כללי Firestore

כדי לאפשר רק למשתמשים מאומתים לצפות בפוסטים בנושא נסיעות, עוברים לקובץ firestore.rules ומוסיפים:

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

אפשר להשתמש בכללי אבטחה גם כדי לאמת נתונים:

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

כללי אחסון

באופן דומה, אפשר להשתמש בכללי אבטחה כדי לאכוף גישה למסדי נתונים של אחסון ב-storage.rules. שימו לב שאפשר גם להשתמש בפונקציות לבדיקות מורכבות יותר:

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