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