הכירו את 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 שלך.

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

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

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

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

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

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

  1. ב-StackBlitz, פתח את הקובץ index.html .
  2. אתר את 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

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

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

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

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

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

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

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

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

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

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

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

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

  2. בחר בכרטיסייה שיטת כניסה (או לחץ כאן כדי לעבור ישירות לכרטיסייה).

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

  3. לחץ על דוא"ל/סיסמה מתוך אפשרויות הספק, העבר את המתג לאפשר ולאחר מכן לחץ על שמור .

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

הגדר את Cloud Firestore

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

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

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

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

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

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

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

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

  5. לחץ על סיום .

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 שלך

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

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

  3. רשום את האפליקציה עם הכינוי Web App .
  4. עבור מעבד קוד זה, אל תסמן את התיבה שליד הגדר גם אירוח Firebase עבור אפליקציה זו . אתה תשתמש בחלונית התצוגה המקדימה של StackBlitz לעת עתה.
  5. לחץ על הרשמה אפליקציה .

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

  6. העתק את אובייקט התצורה של Firebase ללוח שלך.

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

  7. לחץ על המשך למסוף . הוסף את אובייקט התצורה של Firebase לאפליקציה שלך:
  8. בחזרה ב-StackBlitz, עבור לקובץ index.js .
  9. אתר את Add Firebase project configuration object here בשורת ההערות, ולאחר מכן הדבק את קטע התצורה שלך ממש מתחת להערה.
  10. הוסף את קריאת הפונקציה 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 .

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

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

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

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

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

  1. ב-StackBlitz, עבור לקובץ index.js .
  2. בחלק העליון, אתר את הצהרת ה- 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';
    
  3. שמור הפניה לאובייקט האישור מיד לאחר initializeApp , כך:
    initializeApp(firebaseConfig);
    auth = getAuth();
    
  4. שים לב שתצורת FirebaseUI כבר מסופקת בקוד ההתחלה. זה כבר מוגדר לשימוש בספק אימות הדוא"ל.
  5. בתחתית הפונקציה main() ב- index.js , הוסף את הצהרת האתחול של FirebaseUI, כך:
    async function main() {
      // ...
    
      // Initialize the FirebaseUI widget using Firebase
      const ui = new firebaseui.auth.AuthUI(auth);
    }
    main();
    
    

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

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

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

    שים לב שבקובץ index.html , יש מיכל עם המזהה firebaseui-auth-container . זהו המזהה שתעביר ל-FirebaseUI כדי להחזיק את פרטי הכניסה שלך. תצוגה מקדימה של האפליקציה
    <!-- ... -->
    
    <section id="event-details-container">
        <!-- ... -->
        <!-- ADD THE RSVP BUTTON HERE -->
        <button id="startRsvp">RSVP</button>
    </section>
    <hr>
    <section id="firebaseui-auth-container"></section>
    <!-- ... -->
    


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

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

    הוסף את הקוד הבא לתחתית הפונקציה main() ב- index.js :
    async function main() {
      // ...
    
      // Listen to RSVP button clicks
      startRsvpButton.addEventListener("click",
       () => {
            ui.start("#firebaseui-auth-container", uiConfig);
      });
    }
    main();
    

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

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

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

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

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

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

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

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

  1. ב-StackBlitz, עבור לקובץ index.js .
  2. בחלק העליון, אתר את הצהרת ה- 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';
    
  3. הוסף את הקוד הבא בתחתית הפונקציה main() :
    async function main() {
      // ...
    
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
        } else {
          startRsvpButton.textContent = 'RSVP';
        }
      });
    }
    main();
    
  4. במאזין הכפתורים, בדוק אם יש משתמש נוכחי והתנתק ממנו. לשם כך, החלף את 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 עבור רכיבי ממשק המשתמש (שדה הודעה וכפתור שלח). לאחר מכן, אתה מוסיף את הקוד שמחבר את האלמנטים הללו למסד הנתונים.

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

  1. ב-StackBlitz, עבור לקובץ index.html .
  2. אתר את 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 .

  1. ב-StackBlitz, עבור לקובץ index.js .
  2. בחלק העליון, אתר את הצהרת הייבוא 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';
    
  3. כעת נשמור הפניה לאובייקט Firestore db מיד לאחר initializeApp :
    initializeApp(firebaseConfig);
    auth = getAuth();
    db = getFirestore();
    
  4. בתחתית הפונקציה 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 . (יש מידע נוסף על כללי אבטחה בהמשך מעבדת הקוד.)

  1. ב-StackBlitz, עבור לקובץ index.js .
  2. ערוך את המאזין 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';
      }
    });
    

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

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

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

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

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

קונסולת Firebase

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

8. קרא הודעות

סנכרן הודעות

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

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

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

  1. ב-StackBlitz, עבור לקובץ index.html .
  2. במיכל guestbook-container , הוסף קטע חדש עם המזהה של guestbook .
    <!-- ... -->
    
      <section id="guestbook-container">
       <h2>Discussion</h2>
    
       <form><!-- ... --></form>
    
       <section id="guestbook"></section>
    
     </section>
    
    <!-- ... -->
    

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

  1. ב-StackBlitz, עבור לקובץ index.js .
  2. בחלק העליון, אתר את הצהרת הייבוא firebase/firestore , ולאחר מכן הוסף query , orderBy ו- onSnapshot , כך:
    // ...
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot
    } from 'firebase/firestore';
    
  3. בחלק התחתון של הפונקציה 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:

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

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

זיהוי אוספים

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

  1. מחק את משפט match /{document=**} הקיים, כך שהכללים שלך ייראו כך:
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
      }
    }
    
  2. ב- 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 של האימות ולוודא שלכל מי שמנסה לכתוב למסמך יש מזהה אימות תואם.

  1. הוסף את כללי הקריאה והכתיבה לקבוצת הכללים שלך כפי שמוצג להלן:
    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;
        }
      }
    }
    
  2. לחץ על פרסם כדי לפרוס את הכללים החדשים שלך. כעת, עבור ספר האורחים, רק משתמשים מחוברים יכולים לקרוא הודעות (כל הודעה!), אבל אתה יכול ליצור הודעה רק באמצעות מזהה המשתמש שלך. אנחנו גם לא מאפשרים לערוך או למחוק הודעות.

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

  1. הוסף אימות נתונים כדי לוודא שכל השדות הצפויים קיימים במסמך:
    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;
        }
      }
    }
    
  2. לחץ על פרסם כדי לפרוס את הכללים החדשים שלך.

אפס מאזינים

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

  1. ב-StackBlitz, עבור לקובץ index.js .
  2. משוך את אוסף ספרי האורחים במאזין 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);
        });
      });
    }
    
  3. הוסף פונקציה חדשה מתחת בשם unsubscribeGuestbook . בדוק אם המשתנה guestbookListener אינו null, ואז קרא לפונקציה כדי לבטל את המאזין.
    // ...
    // Unsubscribe from guestbook updates
    function unsubscribeGuestbook() {
      if (guestbookListener != null) {
        guestbookListener();
        guestbookListener = null;
      }
    }
    

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

  1. הוסף subscribeGuestbook() בתחתית if (user) .
  2. הוסף את 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 של משתתף

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

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

  1. ב-StackBlitz, עבור לקובץ index.html .
  2. במיכל 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 האימות שלו כדי לשמור את התגובה במסד הנתונים.

  1. ב-StackBlitz, עבור לקובץ index.js .
  2. בחלק העליון, אתר את הצהרת הייבוא 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';
    
  3. בתחתית הפונקציה main() הוסף את הקוד הבא כדי להאזין לסטטוס RSVP:
    async function main() {
      // ...
    
      // Listen to RSVP responses
      rsvpYes.onclick = async () => {
      };
      rsvpNo.onclick = async () => {
      };
    }
    main();
    
    
  4. לאחר מכן, צור אוסף חדש בשם 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 .

  1. עבור אוסף 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;
        }
      }
    }
    
  2. לחץ על פרסם כדי לפרוס את הכללים החדשים שלך.

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

  1. הוסף כמה כללי אימות נתונים כדי לוודא שכל השדות הצפויים קיימים במסמך:
    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;
    
        }
      }
    }
    
  2. אל תשכח ללחוץ על פרסם כדי לפרוס את הכללים שלך!

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

קרא סטטוס RSVP

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

  1. ב-StackBlitz, עבור לקובץ index.html .
  2. ב- description-container , הוסף אלמנט חדש עם המזהה של number-attending .
    <!-- ... -->
    
     <section id="description-container">
         <!-- ... -->
         <p id="number-attending"></p>
     </section>
    
    <!-- ... -->
    

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

  1. ב-StackBlitz, עבור לקובץ index.js .
  2. בתחתית הפונקציה 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();
    

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

  1. צור פונקציה שבודקת אם ל-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';
          }
        }
      });
    }
    
  2. כמו כן, בואו נעשה פונקציה לביטול הרשמה. זה ישמש כאשר המשתמש מתנתק.
    // ...
    function unsubscribeCurrentRSVP() {
      if (rsvpListener != null) {
        rsvpListener();
        rsvpListener = null;
      }
      rsvpYes.className = '';
      rsvpNo.className = '';
    }
    
  3. התקשר לפונקציות ממאזין האימות.
    // ...
    // 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();
          // Subscribe 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();
        }
      });
    
  4. נסה להיכנס כמספר משתמשים וראה את הספירה עולה עם כל לחיצה נוספת על כפתור YES .

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

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

11. מזל טוב!

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

מה שכיסינו

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

הצעדים הבאים

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

למד עוד

איך זה הלך?

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