הכירו את Firebase לאינטרנט

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

מה תלמד

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

מה אתה צריך

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

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

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

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

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

חומרי המוצא של קוד קוד זה מספקים מבנה כלשהו לאפליקציית האינטרנט, כולל כמה גיליונות סגנונות וכמה מכלי 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>



<!-- ... -->

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

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

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

צור פרויקט Firebase

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

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

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

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

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

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

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

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

אפשר ענן Firestore

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

אפשר ענן Firestore:

בחלק של פיתוח קונסולת Firebase, לחץ על מסד נתונים .
תחת Cloud Firestore , לחץ על צור מסד נתונים .

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

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

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

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

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

StackBlitz מספק חבילה אוטומטית, כך שתוכל להוסיף את ספריות Firebase באמצעות הצהרות ייבוא.

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

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

// Firebase App (the core Firebase SDK) is always required
// and must be listed first
import * as firebase from "firebase/app";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

import * as firebaseui from "firebaseui";

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

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

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

חזרה ל- StackBlitz, עבור לקובץ index.js .
אתר Add Firebase project configuration object here שורת ההערות Add Firebase project configuration object here והדבק את קטע התצורה שלך ממש מתחת לתגובה.
הוסף את קריאת הפונקציה initializeApp כדי להגדיר את Firebase באמצעות תצורת פרויקט Firebase הייחודית שלך.

// ...

// Add Firebase project configuration object here
var 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
firebase.initializeApp(firebaseConfig);

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

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

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

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

ראשית, הוסף את הקוד לאתחול FirebaseUI:

ב- StackBlitz, עבור לקובץ index.js . שים לב שתצורת FirebaseUI כבר מסופקת.
בתחתית index.js, הוסף את הצהרת האתחול של FirebaseUI, כך:

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

לאחר מכן, הוסף כפתור RSVP ל- HTML:

ב- StackBlitz, עבור לקובץ index.html .
הוסף את ה- 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>
<!-- ... -->

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

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

// ... 
// At the bottom

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

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

בחלון התצוגה המקדימה של StackBlitz, לחץ על כפתור ה- RSVP כדי להיכנס לאפליקציה.

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

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

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

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

כעת ודא כי ממשק המשתמש משקף את העובדה שאתה מחובר.

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

ב- StackBlitz, עבור לקובץ index.js .
הוסף את הקוד הבא בתחתית:

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

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

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

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

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

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

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

מודל נתונים

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

הוסף הודעות ל- 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 של מסד הנתונים. באופן ספציפי, שיטת add מוסיפה את תוכן ההודעה למסמך חדש (עם מזהה שנוצר אוטומטית) לאוסף guestbook .

ב- StackBlitz, עבור לקובץ index.js .
בתחתית הקובץ, הוסף את הקוד הבא.

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

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

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

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

ב- StackBlitz, עבור לקובץ index.js .
ערוך את המאזין onAuthStateChanged כדי להסתיר ולהציג את ספר האורחים.

// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((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, במרכז השליטה של מסד הנתונים , אתה אמור לראות את אוסף guestbook עם ההודעה החדשה שלך. אם תמשיך לשלוח הודעות, אוסף ספרי האורחים שלך יכלול מסמכים רבים, כמו זה:

קונסולת Firebase

סנכרן הודעות

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

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

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

ב- StackBlitz, עבור לקובץ index.html .
guestbook-container , הוסף קטע חדש עם מזהה guestbook .

<!-- ... -->

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

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

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

 </section>

<!-- ... -->

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

ב- StackBlitz, עבור לקובץ index.js .
בתחתית הקובץ, הוסף את הקוד הבא שיעבור את כל המסמכים (הודעות ספר האורחים) במסד הנתונים:

// ...
// Create query for messages
firebase.firestore().collection("guestbook")
.orderBy("timestamp","desc")
.onSnapshot((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);
 });
});

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

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

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

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

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

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

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

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

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

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

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

זהה אוספים

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

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

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

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

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

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 ספר האורחים בתוך המאזין לאימות. אחרת, יתרחשו שגיאות הרשאה והאפליקציה תנותק כאשר המשתמש יתנתק.

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

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

// ...
// Listen to guestbook updates
function subscribeGuestbook(){
   // Create query for messages
 guestbookListener = firebase.firestore().collection("guestbook")
 .orderBy("timestamp","desc")
 .onSnapshot((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 אינו ריק ואז התקשר לפונקציה לביטול המאזין.

// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook(){
 if (guestbookListener != null)
 {
   guestbookListener();
   guestbookListener = null;
 }
};

לבסוף, הוסף את הפונקציות החדשות onAuthStateChanged (השתמש בשני השלבים הבאים).
הוסף subscribeGuestbook() בתחתית if (user) .
הוסף unsubscribeGuestbook() בתחתית הצהרת else .

// ...
firebase.auth().onAuthStateChanged((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();
}
});

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

אתה יכול להשתמש בשילוב Firebase של StackBlitz כדי לספר ל- StackBlitz לאיזה פרויקט Firebase ברצונך לפרוס נכסים:

אם עדיין לא נכנסת עם GitHub ב- StackBlitz, לחץ על היכנס בפינה השמאלית העליונה והזן את אישורי חשבון GitHub שלך.

אם כבר יש לך חשבון GitHub, היכנס באמצעות חשבון GitHub שלך.
אם עדיין אין לך חשבון GitHub, צור חשבון GitHub באמצעות אותה כתובת דוא"ל בה השתמשת כדי להיכנס ל- Firebase.

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

3. לחץ על היכנס ל- Google . היכנס באמצעות אותה כתובת דוא"ל בה השתמשת בכניסה ל- Firebase. 4. מרשימת פרוייקטים של Firebase בחר בפרויקט Firebase-Web-Codelab שלך .

פריסה לאירוח Firebase עם StackBlitz היא ממש פעולה בלחיצה אחת:

בסביבת העבודה של StackBlitz, לחץ על פרוס בצד שמאל של הדף. כן, זהו. צעד אחד!

חלק משילובי Firebase האחרים ש- StackBlitz מספקים כוללים את הדברים הבאים:

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

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

Firebase נותן לך שני דומיינים בחינם לאפליקציית האינטרנט שלך (שניהם your-projectID.firebaseapp.com את אותו התוכן): your-projectID.firebaseapp.com ו- your-projectID.web.app

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

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

הקלט את סטטוס ה- 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 .
בתחתית הקובץ, הוסף את הקוד הבא כדי להאזין למצב ה- RSVP:

// ...

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

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

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

// ...

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

 // If they RSVP'd yes, save a document with attending: true
 userDoc.set({
   attending: true
 }).catch(console.error)
}

ואז, אותו הדבר עבור rsvpNo , אך עם הערך false :

rsvpNo.onclick = () => {
 // Get a reference to the user's document in the attendees collection
 const userDoc = firebase.firestore().collection('attendees').doc(firebase.auth().currentUser.uid);

 // If they RSVP'd no, save a document with attending: false
 userDoc.set({
   attending: false
 }).catch(console.error)
}

הוסף כללים

מכיוון שכבר הוגדרו כמה כללים, הנתונים החדשים שאתה מוסיף באמצעות הכפתורים יידחו. יהיה עליך לעדכן את הכללים כדי לאפשר הוספה לאוסף 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 .
בתחתית הקובץ, הוסף את הקוד הבא כדי להאזין למצב ה- RSVP ולספור לחיצות YES .

// ...
// Listen for attendee list
firebase.firestore()
.collection('attendees')
.where("attending", "==", true)
.onSnapshot(snap => {
 const newAttendeeCount = snap.docs.length;

 numberAttending.innerHTML = newAttendeeCount+' people going'; 
})

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

// ...
// Listen for attendee list
function subscribeCurrentRSVP(user){
 rsvpListener = firebase.firestore()
 .collection('attendees')
 .doc(user.uid)
 .onSnapshot((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
firebase.auth().onAuthStateChanged((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 guestbook collection
  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 .

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

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

מה סיקרנו

אימות Firebase
FirebaseUI
ענן Firestore
כללי אבטחה של Firebase
אירוח Firebase

הצעדים הבאים

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

למד עוד

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

איך זה הלך?

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

הכירו את Firebase לאינטרנט

מה תלמד

מה אתה צריך

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

צור פרויקט Firebase

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

אפשר ענן Firestore

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

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

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

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

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

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

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

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

מודל נתונים

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

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

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

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

קונסולת Firebase

סנכרן הודעות

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

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

זהה אוספים

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

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

אפס את המאזינים

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

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

הוסף כללים

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

קרא את סטטוס ה- RSVP

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

מה סיקרנו

הצעדים הבאים

למד עוד

איך זה הלך?