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
כדי לאפשר למשתמשים להיכנס לאפליקציית האינטרנט, תשתמש בשיטת הכניסה לדוא"ל/סיסמה עבור מעבדת קוד זה:
- בחלונית הימנית של מסוף Firebase, לחץ על Build > Authentication . לאחר מכן לחץ על התחל . אתה נמצא כעת בלוח המחוונים של האימות, שבו אתה יכול לראות משתמשים רשומים, להגדיר ספקי כניסה ולנהל הגדרות.
- בחר בכרטיסייה שיטת כניסה (או לחץ כאן כדי לעבור ישירות לכרטיסייה).
- לחץ על דוא"ל/סיסמה מתוך אפשרויות הספק, העבר את המתג לאפשר ולאחר מכן לחץ על שמור .
הגדר את Cloud Firestore
אפליקציית האינטרנט משתמשת ב-Cloud Firestore כדי לשמור הודעות צ'אט ולקבל הודעות צ'אט חדשות.
כך מגדירים את Cloud Firestore:
- בחלונית הימנית של מסוף Firebase, לחץ על Build > Firestore Database . לאחר מכן לחץ על צור מסד נתונים .
- לחץ על צור מסד נתונים .
- בחר באפשרות התחל במצב בדיקה . קרא את כתב הוויתור על כללי האבטחה. מצב בדיקה מבטיח שאתה יכול לכתוב בחופשיות למסד הנתונים במהלך הפיתוח. הקש "הבא .
- בחר את המיקום עבור מסד הנתונים שלך (אתה יכול פשוט להשתמש בברירת המחדל). עם זאת, שים לב שלא ניתן לשנות את המיקום הזה מאוחר יותר.
- לחץ על סיום .
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 לעת עתה.
- לחץ על הרשמה אפליקציה .
- העתק את אובייקט התצורה של 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 .
אמת את המשתמשים שלך באמצעות כניסה לדוא"ל ו-FirebaseUI
תזדקק ללחצן RSVP שמבקש מהמשתמש להיכנס עם כתובת האימייל שלו. אתה יכול לעשות זאת על ידי חיבור FirebaseUI ללחצן RSVP. FirebaseUI היא ספרייה שנותנת לך ממשק משתמש בנוי מראש על גבי Firebase Auth.
FirebaseUI דורש תצורה (ראה את האפשרויות בתיעוד ) שעושה שני דברים:
- אומר ל-FirebaseUI שברצונך להשתמש בשיטת הכניסה לדוא"ל/סיסמה .
- מטפל בהתקשרות חזרה לכניסה מוצלחת ומחזיר false כדי למנוע הפניה מחדש. אינך רוצה שהדף ירענן כי אתה בונה אפליקציית אינטרנט של עמוד אחד.
הוסף את הקוד כדי לאתחל FirebaseUI Auth
- ב-StackBlitz, עבור לקובץ
index.js
. - בחלק העליון, אתר את הצהרת ה-
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"> <!-- ... --> <!-- ADD THE RSVP BUTTON HERE --> <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/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
בחלק זה, תוסיף את הפונקציונליות למשתמשים לכתוב הודעות חדשות למסד הנתונים. ראשית, אתה מוסיף את ה-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/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
.
המאזין של FirestoreonSnapshot
מחזיר פונקציית ביטול הרשמה שבה תוכל להשתמש כדי לבטל את מאזין תמונת המצב מאוחר יותר.// ... // 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(); // 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(); } });
- נסה להיכנס כמספר משתמשים וראה את הספירה עולה עם כל לחיצה נוספת על כפתור 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
איך זה הלך?
נשמח למשוב שלך! אנא מלא טופס קצר (מאוד) כאן .