דף זה תורגם על ידי Cloud Translation API.

הכירו את Firebase for web

1. סקירה כללית

במעבדת הקוד הזה תלמדו כמה מהיסודות של Firebase ליצירת יישומי אינטרנט אינטראקטיביים. אתה תבנה אפליקציית RSVP לאירועים ואפליקציית צ'אט ספר אורחים באמצעות מספר מוצרי Firebase.

צילום מסך של שלב זה

מה תלמד

אימות משתמשים באמצעות Firebase Authentication ו-FirebaseUI.
סנכרן נתונים באמצעות Cloud Firestore.
כתוב כללי אבטחה של Firebase כדי לאבטח מסד נתונים.

מה אתה צריך

דפדפן לבחירתך, כגון Chrome.
גישה אל stackblitz.com (אין צורך בחשבון או כניסה).
חשבון גוגל, כמו חשבון Gmail. אנו ממליצים על חשבון הדוא"ל שבו אתה כבר משתמש עבור חשבון GitHub שלך. זה מאפשר לך להשתמש בתכונות מתקדמות ב-StackBlitz.
הקוד לדוגמה של מעבדת הקוד. ראה את השלב הבא כיצד להשיג את הקוד.

2. קבל את קוד ההתחלה

במעבדת הקוד הזה, אתה בונה אפליקציה באמצעות StackBlitz , עורך מקוון שמשולב בו כמה זרימות עבודה של Firebase. Stackblitz אינו דורש התקנת תוכנה או חשבון StackBlitz מיוחד.

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

עבור אל כתובת האתר הזו עבור קוד ההתחלה: https://stackblitz.com/edit/firebase-gtk-web-start
בחלק העליון של דף StackBlitz, לחץ על Fork :

צילום מסך של שלב זה

כעת יש לך עותק של קוד ההתחלה כפרויקט StackBlitz משלך, בעל שם ייחודי, יחד עם כתובת URL ייחודית. כל הקבצים והשינויים שלך נשמרים בפרויקט StackBlitz זה.

3. ערוך מידע על האירוע

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

כדי להתחיל, בואו נכיר קצת יותר את ממשק StackBlitz.

ב-StackBlitz, פתח את הקובץ index.html .
אתר event-details-container ו- description-container , ולאחר מכן נסה לערוך חלק מפרטי האירוע.

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

<!-- ... -->

<div id="app">
  <img src="..." />

  <section id="event-details-container">
     <h1>Firebase Meetup</h1>

     <p><i class="material-icons">calendar_today</i> October 30</p>
     <p><i class="material-icons">location_city</i> San Francisco</p>

  </section>

  <hr>

  <section id="firebaseui-auth-container"></section>

  <section id="description-container">
     <h2>What we'll be doing</h2>
     <p>Join us for a day full of Firebase Workshops and Pizza!</p>
  </section>
</div>

<!-- ... -->

התצוגה המקדימה של האפליקציה שלך צריכה להיראות בערך כך:

תצוגה מקדימה של האפליקציה

צילום מסך של שלב זה

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

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

צור פרויקט Firebase

היכנס ל- Firebase .
במסוף Firebase, לחץ על הוסף פרויקט (או צור פרויקט ), ולאחר מכן תן שם לפרויקט Firebase שלך Firebase-Web-Codelab .
לחץ על אפשרויות יצירת הפרויקט. קבל את תנאי Firebase אם תתבקש. במסך Google Analytics, לחץ על "אל תפעיל", מכיוון שלא תשתמש ב-Analytics עבור אפליקציה זו.

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

הפעל והגדר מוצרי Firebase במסוף

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

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

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

כדי לאפשר למשתמשים להיכנס לאפליקציית האינטרנט, תשתמש בשיטת הכניסה לדוא"ל/סיסמה עבור מעבדת קוד זה:

בחלונית הימנית של מסוף Firebase, לחץ על Build > Authentication . לאחר מכן לחץ על התחל . אתה נמצא כעת בלוח המחוונים של האימות, שבו אתה יכול לראות משתמשים רשומים, להגדיר ספקי כניסה ולנהל הגדרות.
בחר בכרטיסייה שיטת כניסה (או לחץ כאן כדי לעבור ישירות לכרטיסייה).
לחץ על דוא"ל/סיסמה מתוך אפשרויות הספק, העבר את המתג לאפשר ולאחר מכן לחץ על שמור .

הגדר את Cloud Firestore

אפליקציית האינטרנט משתמשת ב- Cloud Firestore כדי לשמור הודעות צ'אט ולקבל הודעות צ'אט חדשות.

כך מגדירים את Cloud Firestore:

בחלונית הימנית של מסוף Firebase, לחץ על Build > Firestore Database . לאחר מכן לחץ על צור מסד נתונים .
לחץ על צור מסד נתונים .
בחר באפשרות התחל במצב בדיקה . קרא את כתב הוויתור על כללי האבטחה. מצב בדיקה מבטיח שאתה יכול לכתוב בחופשיות למסד הנתונים במהלך הפיתוח. לחץ על הבא .

זהירות: בשלבים הראשונים של מעבדת קוד זה, אתה משתמש במצב בדיקה. עם זאת, בהמשך מעבדת הקוד, תכתוב את כללי האבטחה של Firebase כדי לאבטח את מסד הנתונים שלך.
עבור האפליקציות שלך, במיוחד אפליקציות ייצור, חשוב מאוד שתבטח את מסד הנתונים שלך באמצעות כללי אבטחה. למידע נוסף על כללי אבטחה בתיעוד של Firebase .
בחר את המיקום עבור מסד הנתונים שלך (אתה יכול פשוט להשתמש בברירת המחדל). עם זאת, שים לב שלא ניתן לשנות את המיקום הזה מאוחר יותר.
לחץ על סיום .

5. הוסף והגדר את Firebase

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

הוסף את ספריות Firebase

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

StackBlitz מספק צרור אוטומטי, כך שתוכל להוסיף את ספריות Firebase באמצעות הצהרות ייבוא. אתה תשתמש בגרסאות המודולריות (v9) של הספריות, שעוזרות להקטין את הגודל הכולל של דף האינטרנט באמצעות תהליך שנקרא "טלטול עצים". תוכל ללמוד עוד על SDKs המודולריים במסמכים .

כדי לבנות את האפליקציה הזו, אתה משתמש בספריות Firebase Authentication, FirebaseUI ו-Cloud Firestore. עבור מעבדת קוד זה, הצהרות הייבוא הבאות כבר כלולות בחלק העליון של קובץ index.js , ואנחנו נייבא שיטות נוספות מכל ספריית Firebase תוך כדי:

// Import stylesheets
import './style.css';

// Firebase App (the core Firebase SDK) is always required
import { initializeApp } from 'firebase/app';

// Add the Firebase products and methods that you want to use
import {} from 'firebase/auth';
import {} from 'firebase/firestore';

import * as firebaseui from 'firebaseui';

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

בחזרה למסוף Firebase, נווט אל דף הסקירה הכללית של הפרויקט שלך על ידי לחיצה על סקירת פרויקט בפינה הימנית העליונה.
במרכז דף הסקירה הכללית של הפרויקט שלך, לחץ על סמל האינטרנט כדי ליצור אפליקציית אינטרנט חדשה של Firebase.
רשום את האפליקציה עם הכינוי Web App .
עבור מעבד קוד זה, אל תסמן את התיבה שליד הגדר גם אירוח Firebase עבור אפליקציה זו . אתה תשתמש בחלונית התצוגה המקדימה של StackBlitz לעת עתה.
לחץ על הרשמה אפליקציה .
Stackblitz מנהל עבורך את התלות שלך, כך שתוכל לדלג על שלב npm install firebase המוצג במסוף.
העתק את אובייקט התצורה של Firebase ללוח שלך.
לחץ על המשך למסוף . הוסף את אובייקט התצורה של Firebase לאפליקציה שלך:
בחזרה ב-StackBlitz, עבור לקובץ index.js .
אתר את Add Firebase project configuration object here בשורת ההערות, ולאחר מכן הדבק את קטע התצורה שלך ממש מתחת להערה.

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

// ...
// Add Firebase project configuration object here
const firebaseConfig = {
  apiKey: "random-unique-string",
  authDomain: "your-projectId.firebaseapp.com",
  databaseURL: "https://your-projectId.firebaseio.com",
  projectId: "your-projectId",
  storageBucket: "your-projectId.appspot.com",
  messagingSenderId: "random-unique-string",
  appId: "random-unique-string",
};

// Initialize Firebase
initializeApp(firebaseConfig);

6. הוסף כניסה למשתמש (RSVP)

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

תזדקק ללחצן RSVP שמבקש מהמשתמש להיכנס עם כתובת האימייל שלו. אתה יכול לעשות זאת על ידי חיבור FirebaseUI ללחצן RSVP. FirebaseUI היא ספרייה שנותנת לך ממשק משתמש בנוי מראש על גבי Firebase Auth.

FirebaseUI דורש תצורה (ראה את האפשרויות בתיעוד ) שעושה שני דברים:

אומר ל-FirebaseUI שברצונך להשתמש בשיטת הכניסה לדוא"ל/סיסמה .
מטפל בהתקשרות חזרה לכניסה מוצלחת ומחזיר false כדי למנוע הפניה מחדש. אינך רוצה שהדף ירענן כי אתה בונה אפליקציית אינטרנט של עמוד אחד.

הוסף את הקוד כדי לאתחל FirebaseUI Auth

ב-StackBlitz, עבור לקובץ index.js .

בחלק העליון, אתר את הצהרת ה-firebase firebase/auth import, ולאחר מכן הוסף getAuth ו- EmailAuthProvider , כך:

// ...
// Add the Firebase products and methods that you want to use
import { getAuth, EmailAuthProvider } from 'firebase/auth';

import {} from 'firebase/firestore';

שמור הפניה לאובייקט האישור מיד לאחר initializeApp , כך:
```
initializeApp(firebaseConfig);
auth = getAuth();
```
שים לב שתצורת FirebaseUI כבר מסופקת בקוד ההתחלה. זה כבר מוגדר לשימוש בספק אימות הדוא"ל.

בתחתית הפונקציה main() ב- index.js , הוסף את הצהרת האתחול של FirebaseUI, כך:

async function main() {
  // ...

  // Initialize the FirebaseUI widget using Firebase
  const ui = new firebaseui.auth.AuthUI(auth);
}
main();

הוסף כפתור RSVP ל-HTML

ב-StackBlitz, עבור לקובץ index.html .
הוסף את כפתור ה-HTML עבור RSVP בתוך event-details-container כפי שמוצג בדוגמה למטה.

היזהר להשתמש באותם ערכי id כפי שמוצגים להלן, כי עבור מעבדת קוד זה, כבר קיימים הוקס למזהים ספציפיים אלה בקובץ index.js .

שים לב שבקובץ index.html , יש מיכל עם המזהה firebaseui-auth-container . זהו המזהה שתעביר ל-FirebaseUI כדי להחזיק את פרטי הכניסה שלך. תצוגה מקדימה של האפליקציה
```


<section id="event-details-container">
    
    
    <button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>

```
הגדר מאזין בלחצן RSVP וקרא לפונקציית ההתחלה של FirebaseUI. זה אומר ל-FirebaseUI שאתה רוצה לראות את חלון הכניסה.

הוסף את הקוד הבא לתחתית הפונקציה main() ב- index.js :
```
async function main() {
  // ...

  // Listen to RSVP button clicks
  startRsvpButton.addEventListener("click",
   () => {
        ui.start("#firebaseui-auth-container", uiConfig);
  });
}
main();
```

בדוק את הכניסה לאפליקציה

בחלון התצוגה המקדימה של StackBlitz, לחץ על כפתור RSVP כדי להיכנס לאפליקציה.
- עבור מעבד קוד זה, אתה יכול להשתמש בכל כתובת דוא"ל, אפילו כתובת דוא"ל מזויפת, מכיוון שאינך מגדיר שלב אימות דוא"ל עבור מעבד קוד זה.
- אם אתה רואה הודעת שגיאה המציינת אישור auth/operation-not-allowed או The given sign-in provider is disabled for this Firebase project , ודא שהפעלת אימייל/סיסמה כספק כניסה במסוף Firebase.
תצוגה מקדימה של האפליקציה
עבור אל לוח המחוונים של האימות במסוף Firebase. בכרטיסייה משתמשים , אתה אמור לראות את פרטי החשבון שהזנת כדי להיכנס לאפליקציה.

הוסף מצב אימות לממשק המשתמש

לאחר מכן, ודא שממשק המשתמש משקף את העובדה שאתה מחובר.

אתה תשתמש ב-Firebase Authentication State Lister callback, שמקבל התראה בכל פעם שסטטוס הכניסה של המשתמש משתנה. אם יש כרגע משתמש מחובר, האפליקציה שלך תחליף את כפתור ה-"RSVP" ללחצן "יציאה".

ב-StackBlitz, עבור לקובץ index.js .

בחלק העליון, אתר את הצהרת ה-firebase firebase/auth import, ולאחר מכן הוסף signOut ו- onAuthStateChanged , כך:

// ...
// Add the Firebase products and methods that you want to use
import {
  getAuth,
  EmailAuthProvider,
  signOut,
  onAuthStateChanged
} from 'firebase/auth';

import {} from 'firebase/firestore';

הוסף את הקוד הבא בתחתית הפונקציה main() :

async function main() {
  // ...

  // Listen to the current Auth state
  onAuthStateChanged(auth, user => {
    if (user) {
      startRsvpButton.textContent = 'LOGOUT';
    } else {
      startRsvpButton.textContent = 'RSVP';
    }
  });
}
main();

במאזין הכפתורים, בדוק אם יש משתמש נוכחי והתנתק ממנו. לשם כך, החלף את ה- startRsvpButton.addEventListener הנוכחי בקובץ הבא:

// ...
// Called when the user clicks the RSVP button
startRsvpButton.addEventListener('click', () => {
  if (auth.currentUser) {
    // User is signed in; allows user to sign out
    signOut(auth);
  } else {
    // No user is signed in; allows user to sign in
    ui.start('#firebaseui-auth-container', uiConfig);
  }
});

כעת, הכפתור באפליקציה שלך אמור להראות LOGOUT , והוא אמור לחזור ל- RSVP כאשר לוחצים עליו.

תצוגה מקדימה של האפליקציה

צילום מסך של שלב זה

7. כתוב הודעות ל-Cloud Firestore

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

כדי לאחסן את הודעות הצ'אט שמשתמשים כותבים באפליקציה, תשתמש ב- Cloud Firestore .

מודל נתונים

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

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

הוסף הודעות ל-Firestore

בחלק זה, תוסיף את הפונקציונליות למשתמשים לכתוב הודעות חדשות למסד הנתונים. ראשית, אתה מוסיף את ה-HTML עבור רכיבי ממשק המשתמש (שדה הודעה וכפתור שלח). לאחר מכן, אתה מוסיף את הקוד שמחבר את האלמנטים הללו למסד הנתונים.

כדי להוסיף את רכיבי ממשק המשתמש של שדה הודעה ולחצן שלח:

ב-StackBlitz, עבור לקובץ index.html .

אתר את guestbook-container ולאחר מכן הוסף את ה-HTML הבא כדי ליצור טופס עם שדה קלט ההודעה וכפתור השליחה.

<!-- ... -->

 <section id="guestbook-container">
   <h2>Discussion</h2>

   <form id="leave-message">
     <label>Leave a message: </label>
     <input type="text" id="message">
     <button type="submit">
       <i class="material-icons">send</i>
       <span>SEND</span>
     </button>
   </form>

 </section>

<!-- ... -->

תצוגה מקדימה של האפליקציה

צילום מסך של שלב זה

משתמש שילחץ על כפתור שלח יפעיל את קטע הקוד למטה. זה מוסיף את התוכן של שדה קלט ההודעה לאוסף guestbook של מסד הנתונים. באופן ספציפי, שיטת addDoc מוסיפה את תוכן ההודעה למסמך חדש (עם מזהה שנוצר אוטומטית) לאוסף guestbook .

ב-StackBlitz, עבור לקובץ index.js .

בחלק העליון, אתר את הצהרת הייבוא של firebase firebase/firestore , ולאחר מכן הוסף getFirestore , addDoc ו- collection , כך:

// ...

// Add the Firebase products and methods that you want to use
import {
  getAuth,
  EmailAuthProvider,
  signOut,
  onAuthStateChanged
} from 'firebase/auth';

import {
  getFirestore,
  addDoc,
  collection
} from 'firebase/firestore';

כעת נשמור הפניה לאובייקט Firestore db מיד לאחר initializeApp :
```
initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
```

בתחתית הפונקציה main() , הוסף את הקוד הבא.

שים לב ש- auth.currentUser.uid הוא הפניה למזהה הייחודי שנוצר אוטומטית ש-Firebase Authentication נותן עבור כל המשתמשים המחוברים.

async function main() {
  // ...

  // Listen to the form submission
  form.addEventListener('submit', async e => {
    // Prevent the default form redirect
    e.preventDefault();
    // Write a new message to the database collection "guestbook"
    addDoc(collection(db, 'guestbook'), {
      text: input.value,
      timestamp: Date.now(),
      name: auth.currentUser.displayName,
      userId: auth.currentUser.uid
    });
    // clear message input field
    input.value = '';
    // Return false to avoid redirect
    return false;
  });
}
main();

הצג את ספר האורחים רק למשתמשים מחוברים

אתה לא רוצה שסתם מישהו יראה את הצ'אט של האורחים. דבר אחד שאתה יכול לעשות כדי לאבטח את הצ'אט הוא לאפשר רק למשתמשים מחוברים לראות את ספר האורחים. עם זאת, עבור האפליקציות שלך, תרצה גם לאבטח את מסד הנתונים שלך עם כללי אבטחה של Firebase . (יש מידע נוסף על כללי אבטחה בהמשך מעבדת הקוד.)

ב-StackBlitz, עבור לקובץ index.js .

ערוך את המאזין onAuthStateChanged כדי להסתיר ולהציג את ספר האורחים.

// ...

// Listen to the current Auth state
onAuthStateChanged(auth, user => {
  if (user) {
    startRsvpButton.textContent = 'LOGOUT';
    // Show guestbook to logged-in users
    guestbookContainer.style.display = 'block';
  } else {
    startRsvpButton.textContent = 'RSVP';
    // Hide guestbook for non-logged-in users
    guestbookContainer.style.display = 'none';
  }
});

בדיקת שליחת הודעות

ודא שאתה מחובר לאפליקציה.
הזן הודעה כגון "היי!", ולאחר מכן לחץ על שלח .

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

אבל אתה יכול לראות את ההודעה החדשה שנוספה במסוף Firebase.

במסוף Firebase, בלוח המחוונים של מסד הנתונים של Firestore , אתה אמור לראות את אוסף guestbook עם ההודעה החדשה שהוספת. אם תמשיך לשלוח הודעות, אוסף ספר האורחים שלך יכיל מסמכים רבים, כמו זה:

קונסולת Firebase

צילום מסך של שלב זה

8. קרא הודעות

סנכרן הודעות

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

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

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

ב-StackBlitz, עבור לקובץ index.html .

guestbook-container , הוסף קטע חדש עם המזהה של guestbook .

<!-- ... -->

  <section id="guestbook-container">
   <h2>Discussion</h2>

   <form><!-- ... --></form>

   <section id="guestbook"></section>

 </section>

<!-- ... -->

לאחר מכן, רשום את המאזין שמאזין לשינויים שבוצעו בנתונים:

ב-StackBlitz, עבור לקובץ index.js .
בחלק העליון, אתר את הצהרת הייבוא של firebase/firestore , ולאחר מכן הוסף query , orderBy ו- onSnapshot , כך:
```
// ...
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot
} from 'firebase/firestore';
```

בחלק התחתון של הפונקציה main() , הוסף את הקוד הבא כדי לעבור דרך כל המסמכים (הודעות ספר האורחים) במסד הנתונים. למידע נוסף על מה שקורה בקוד זה, קרא את המידע מתחת לקטע הקוד.

async function main() {
  // ...

  // Create query for messages
  const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
  onSnapshot(q, snaps => {
    // Reset page
    guestbook.innerHTML = '';
    // Loop through documents in database
    snaps.forEach(doc => {
      // Create an HTML entry for each document and add it to the chat
      const entry = document.createElement('p');
      entry.textContent = doc.data().name + ': ' + doc.data().text;
      guestbook.appendChild(entry);
    });
  });
}
main();

כדי להאזין להודעות במסד הנתונים, יצרת שאילתה על אוסף מסוים באמצעות פונקציית collection . הקוד למעלה מקשיב לשינויים באוסף guestbook , שם מאוחסנות הודעות הצ'אט. ההודעות מסודרות גם לפי תאריך, באמצעות orderBy('timestamp', 'desc') כדי להציג את ההודעות החדשות ביותר בחלק העליון.

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

בדוק סנכרון הודעות

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

ההודעות שיצרת קודם לכן במסד הנתונים צריכות להיות מוצגות באפליקציה. אתם מוזמנים לכתוב הודעות חדשות; הם צריכים להופיע באופן מיידי.
אם תפתח את סביבת העבודה שלך במספר חלונות או כרטיסיות, הודעות יסונכרנו בזמן אמת בין כרטיסיות.
(אופציונלי) תוכל לנסות למחוק, לשנות או להוסיף הודעות חדשות באופן ידני ישירות במקטע מסד הנתונים של מסוף Firebase; כל שינוי אמור להופיע בממשק המשתמש.

מזל טוב! אתה קורא מסמכי Cloud Firestore באפליקציה שלך!

תצוגה מקדימה של האפליקציה

צילום מסך של שלב זה

9. הגדר כללי אבטחה בסיסיים

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

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

אתה יכול לכתוב כללי אבטחה עבור Cloud Firestore במסוף Firebase:

בקטע Build של מסוף Firebase, לחץ על Firestore Database ולאחר מכן בחר בכרטיסייה כללים (או לחץ כאן כדי לעבור ישירות ללשונית כללים ).
אתה אמור לראות את כללי האבטחה הבאים המוגדרים כברירת מחדל, עם מגבלת זמן לגישה ציבורית בעוד שבועיים מהיום.

צילום מסך של שלב זה

זיהוי אוספים

ראשית, זהה את האוספים אליהם האפליקציה כותבת נתונים.

מחק את משפט match /{document=**} הקיים, כך שהכללים שלך ייראו כך:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  }
}

ב- match /databases/{database}/documents , זהה את האוסף שברצונך לאבטח:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

הוסף כללי אבטחה

מכיוון שהשתמשת ב-UID של האימות כשדה בכל מסמך של ספר אורחים, אתה יכול לקבל את ה-UID של האימות ולוודא שלכל מי שמנסה לכתוב למסמך יש זיהוי אימות תואם.

הוסף את כללי הקריאה והכתיבה לקבוצת הכללים שלך כפי שמוצג להלן:

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

לחץ על פרסם כדי לפרוס את הכללים החדשים שלך. כעת, עבור ספר האורחים, רק משתמשים מחוברים יכולים לקרוא הודעות (כל הודעה!), אבל אתה יכול ליצור הודעה רק באמצעות מזהה המשתמש שלך. אנחנו גם לא מאפשרים לערוך או למחוק הודעות.

הוסף כללי אימות

הוסף אימות נתונים כדי לוודא שכל השדות הצפויים קיימים במסמך:

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

לחץ על פרסם כדי לפרוס את הכללים החדשים שלך.

אפס מאזינים

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

ב-StackBlitz, עבור לקובץ index.js .

משוך את אוסף ספרי האורחים onSnapshot לפונקציה חדשה בשם subscribeGuestbook . כמו כן, הקצה את התוצאות של הפונקציה onSnapshot למשתנה guestbookListener .

המאזין של Firestore onSnapshot מחזיר פונקציית ביטול הרשמה שבה תוכל להשתמש כדי לבטל את מאזין תמונת המצב מאוחר יותר.

// ...
// Listen to guestbook updates
function subscribeGuestbook() {
  const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
  guestbookListener = onSnapshot(q, snaps => {
    // Reset page
    guestbook.innerHTML = '';
    // Loop through documents in database
    snaps.forEach(doc => {
      // Create an HTML entry for each document and add it to the chat
      const entry = document.createElement('p');
      entry.textContent = doc.data().name + ': ' + doc.data().text;
      guestbook.appendChild(entry);
    });
  });
}

הוסף פונקציה חדשה מתחת בשם unsubscribeGuestbook . בדוק אם המשתנה guestbookListener אינו null, ואז קרא לפונקציה כדי לבטל את המאזין.
```
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook() {
  if (guestbookListener != null) {
    guestbookListener();
    guestbookListener = null;
  }
}
```

לבסוף, הוסף את הפונקציות החדשות להתקשרות חוזרת של onAuthStateChanged .

הוסף subscribeGuestbook() בתחתית if (user) .

הוסף את unsubscribeGuestbook() בתחתית הצהרת else .

// ...
// Listen to the current Auth state
onAuthStateChanged(auth, user => {
  if (user) {
    startRsvpButton.textContent = 'LOGOUT';
    // Show guestbook to logged-in users
    guestbookContainer.style.display = 'block';
    // Subscribe to the guestbook collection
    subscribeGuestbook();
  } else {
    startRsvpButton.textContent = 'RSVP';
    // Hide guestbook for non-logged-in users
    guestbookContainer.style.display = 'none';
    // Unsubscribe from the guestbook collection
    unsubscribeGuestbook();
  }
});

10. שלב בונוס: תרגל את מה שלמדת

הקלט את סטטוס ה-RSVP של משתתף

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

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

ב-StackBlitz, עבור לקובץ index.html .

guestbook-container , הוסף קבוצה של כפתורי YES ו- NO , כך:

<!-- ... -->
  <section id="guestbook-container">
   <h2>Are you attending?</h2>
     <button id="rsvp-yes">YES</button>
     <button id="rsvp-no">NO</button>

   <h2>Discussion</h2>

   <!-- ... -->

 </section>
<!-- ... -->

תצוגה מקדימה של האפליקציה

צילום מסך של שלב זה

לאחר מכן, רשום את המאזין ללחיצות על כפתורים. אם המשתמש לוחץ על YES , השתמש ב-UID האימות שלו כדי לשמור את התגובה במסד הנתונים.

ב-StackBlitz, עבור לקובץ index.js .

בחלק העליון, אתר את הצהרת הייבוא של firebase/firestore , ולאחר מכן הוסף doc , setDoc where , כך:

// ...
// Add the Firebase products and methods that you want to use
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot,
  doc,
  setDoc,
  where
} from 'firebase/firestore';

בתחתית הפונקציה main() הוסף את הקוד הבא כדי להאזין לסטטוס RSVP:

async function main() {
  // ...

  // Listen to RSVP responses
  rsvpYes.onclick = async () => {
  };
  rsvpNo.onclick = async () => {
  };
}
main();

לאחר מכן, צור אוסף חדש בשם attendees , ולאחר מכן רשום הפניה למסמך אם לוחצים על אחד מהלחצנים של RSVP. הגדר את ההפניה ל- true או false בהתאם ללחצן שנלחץ.

ראשית, עבור rsvpYes :

// ...
// Listen to RSVP responses
rsvpYes.onclick = async () => {
  // Get a reference to the user's document in the attendees collection
  const userRef = doc(db, 'attendees', auth.currentUser.uid);

  // If they RSVP'd yes, save a document with attendi()ng: true
  try {
    await setDoc(userRef, {
      attending: true
    });
  } catch (e) {
    console.error(e);
  }
};

לאחר מכן, אותו הדבר עבור rsvpNo , אבל עם הערך false :

rsvpNo.onclick = async () => {
  // Get a reference to the user's document in the attendees collection
  const userRef = doc(db, 'attendees', auth.currentUser.uid);

  // If they RSVP'd yes, save a document with attending: true
  try {
    await setDoc(userRef, {
      attending: false
    });
  } catch (e) {
    console.error(e);
  }
};

עדכן את כללי האבטחה שלך

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

אפשר תוספות לאוסף `attendees`

יהיה עליך לעדכן את הכללים כדי לאפשר הוספה לאוסף attendees .

עבור אוסף attendees , מכיוון שהשתמשת ב-UID של האימות כשם המסמך, אתה יכול לתפוס אותו ולוודא שה- uid של המגיש זהה למסמך שהם כותבים. אתה תאפשר לכולם לקרוא את רשימת המשתתפים (מכיוון שאין שם נתונים פרטיים), אבל רק היוצר אמור להיות מסוגל לעדכן אותה.
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}
```
לחץ על פרסם כדי לפרוס את הכללים החדשים שלך.

הוסף כללי אימות

הוסף כמה כללי אימות נתונים כדי לוודא שכל השדות הצפויים קיימים במסמך:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}

אל תשכח ללחוץ על פרסם כדי לפרוס את הכללים שלך!

(אופציונלי) כעת תוכל לצפות בתוצאות של לחיצה על הכפתורים. עבור אל לוח המחוונים של Cloud Firestore שלך במסוף Firebase.

קרא סטטוס RSVP

כעת לאחר שרשמתם את התגובות, בואו נראה מי מגיע ולשקף זאת בממשק המשתמש.

ב-StackBlitz, עבור לקובץ index.html .

ב- description-container , הוסף אלמנט חדש עם המזהה של number-attending .

<!-- ... -->

 <section id="description-container">
     <!-- ... -->
     <p id="number-attending"></p>
 </section>

<!-- ... -->

לאחר מכן, רשמו את המאזין לאוסף attendees וספרו את מספר תגובות ה- YES :

ב-StackBlitz, עבור לקובץ index.js .

בתחתית הפונקציה main() , הוסף את הקוד הבא כדי להאזין לסטטוס RSVP ולספור קליקים ב- YES .

async function main() {
  // ...

  // Listen for attendee list
  const attendingQuery = query(
    collection(db, 'attendees'),
    where('attending', '==', true)
  );
  const unsubscribe = onSnapshot(attendingQuery, snap => {
    const newAttendeeCount = snap.docs.length;
    numberAttending.innerHTML = newAttendeeCount + ' people going';
  });
}
main();

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

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

// ...
// Listen for attendee list
function subscribeCurrentRSVP(user) {
  const ref = doc(db, 'attendees', user.uid);
  rsvpListener = onSnapshot(ref, doc => {
    if (doc && doc.data()) {
      const attendingResponse = doc.data().attending;

      // Update css classes for buttons
      if (attendingResponse) {
        rsvpYes.className = 'clicked';
        rsvpNo.className = '';
      } else {
        rsvpYes.className = '';
        rsvpNo.className = 'clicked';
      }
    }
  });
}

כמו כן, בואו נעשה פונקציה לביטול הרשמה. זה ישמש כאשר המשתמש מתנתק.

// ...
function unsubscribeCurrentRSVP() {
  if (rsvpListener != null) {
    rsvpListener();
    rsvpListener = null;
  }
  rsvpYes.className = '';
  rsvpNo.className = '';
}

התקשר לפונקציות ממאזין האימות.

// ...
// Listen to the current Auth state
  // Listen to the current Auth state
  onAuthStateChanged(auth, user => {
    if (user) {
      startRsvpButton.textContent = 'LOGOUT';
      // Show guestbook to logged-in users
      guestbookContainer.style.display = 'block';

      // Subscribe to the guestbook collection
      subscribeGuestbook();
      // Subcribe to the user's RSVP
      subscribeCurrentRSVP(user);
    } else {
      startRsvpButton.textContent = 'RSVP';
      // Hide guestbook for non-logged-in users
      guestbookContainer.style.display = 'none'
      ;
      // Unsubscribe from the guestbook collection
      unsubscribeGuestbook();
      // Unsubscribe from the guestbook collection
      unsubscribeCurrentRSVP();
    }
  });

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

תצוגה מקדימה של האפליקציה

צילום מסך של שלב זה

11. מזל טוב!

השתמשת ב-Firebase כדי לבנות יישום אינטרנט אינטראקטיבי בזמן אמת!

מה שכיסינו

אימות Firebase
FirebaseUI
Cloud Firestore
כללי אבטחה של Firebase

הצעדים הבאים

רוצה ללמוד עוד על זרימת העבודה של המפתחים של Firebase? בדוק את מעבדת הקוד של אמולטור Firebase כדי ללמוד כיצד לבדוק ולהפעיל את האפליקציה שלך באופן מקומי לחלוטין.
רוצה ללמוד עוד על מוצרים אחרים של Firebase? אולי אתה רוצה לאחסן קבצי תמונה שמשתמשים מעלים? או לשלוח הודעות למשתמשים שלך? בדוק את מעבדת הקוד של Firebase עבור מעבדת קוד שמעמיקה יותר במוצרי Firebase רבים נוספים לאינטרנט.
רוצה ללמוד עוד על Cloud Firestore? אולי אתה רוצה ללמוד על אוספי משנה ועסקאות? עברו למעבדת הקוד של Cloud Firestore עבור מעבדת קוד שמעמיקה יותר ב-Cloud Firestore. או בדוק את סדרת YouTube הזו כדי להכיר את Cloud Firestore !

למד עוד

אתר Firebase: firebase.google.com
ערוץ YouTube של Firebase

איך זה הלך?

נשמח למשוב שלך! אנא מלא טופס קצר (מאוד) כאן .

הכירו את Firebase for web

1. סקירה כללית

מה תלמד

מה אתה צריך

2. קבל את קוד ההתחלה

3. ערוך מידע על האירוע

תצוגה מקדימה של האפליקציה

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

צור פרויקט Firebase

הפעל והגדר מוצרי Firebase במסוף

אפשר כניסה בדוא"ל עבור אימות Firebase

הגדר את Cloud Firestore

5. הוסף והגדר את Firebase

הוסף את ספריות Firebase

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

6. הוסף כניסה למשתמש (RSVP)

אמת את המשתמשים שלך באמצעות כניסה לדוא"ל ו-FirebaseUI

הוסף את הקוד כדי לאתחל FirebaseUI Auth

הוסף כפתור RSVP ל-HTML

בדוק את הכניסה לאפליקציה

הוסף מצב אימות לממשק המשתמש

תצוגה מקדימה של האפליקציה

7. כתוב הודעות ל-Cloud Firestore

מודל נתונים

הוסף הודעות ל-Firestore

תצוגה מקדימה של האפליקציה

הצג את ספר האורחים רק למשתמשים מחוברים

בדיקת שליחת הודעות

קונסולת Firebase

8. קרא הודעות

סנכרן הודעות

בדוק סנכרון הודעות

תצוגה מקדימה של האפליקציה

9. הגדר כללי אבטחה בסיסיים

זיהוי אוספים

הוסף כללי אבטחה

הוסף כללי אימות

אפס מאזינים

10. שלב בונוס: תרגל את מה שלמדת

הקלט את סטטוס ה-RSVP של משתתף

תצוגה מקדימה של האפליקציה

עדכן את כללי האבטחה שלך

אפשר תוספות לאוסף attendees

הוסף כללי אימות

קרא סטטוס RSVP

תצוגה מקדימה של האפליקציה

11. מזל טוב!

מה שכיסינו

הצעדים הבאים

למד עוד

איך זה הלך?

אפשר תוספות לאוסף `attendees`