מעבדת קוד אינטרנט של Firebase

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

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

מה תלמד

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

מה אתה צריך

• עורך ה-IDE/טקסט לבחירתך, כגון WebStorm , Atom , Sublime או VS Code
• מנהל החבילות npm , שמגיע בדרך כלל עם Node.js
• טרמינל/קונסולה
• דפדפן לבחירתך, כגון Chrome
• הקוד לדוגמה של מעבדת הקוד (ראה את השלב הבא של מעבדת הקוד כדי לקבל את הקוד.)

2. קבל את הקוד לדוגמה

שיבוט את מאגר GitHub של Codelab משורת הפקודה:

git clone https://github.com/firebase/codelab-friendlychat-web

לחלופין, אם לא התקנת git, אתה יכול להוריד את המאגר כקובץ ZIP .

ייבא את אפליקציית המתנע

באמצעות ה-IDE שלך, פתח או ייבא את ספריית 📁 web-start מהמאגר המשובט. ספריית 📁 web-start מכילה את קוד ההתחלה של מעבדת הקוד, שתהיה אפליקציית אינטרנט צ'אט פונקציונלית מלאה.

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

צור פרויקט Firebase

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

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

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

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

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

1. לחץ על סמל האינטרנט כדי ליצור אפליקציית אינטרנט חדשה של Firebase.
2. רשום את האפליקציה עם הכינוי Friendly Chat , ולאחר מכן סמן את התיבה לצד הגדר גם אירוח Firebase עבור אפליקציה זו . לחץ על הרשמה אפליקציה .
3. בשלב הבא, תראה אובייקט תצורה. העתק רק את אובייקט JS (לא את ה-HTML שמסביב) לתוך firebase-config.js

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

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

יהיה עליך להפעיל את הכניסה של Google :

1. במסוף Firebase, אתר את הקטע Build בחלונית השמאלית.
2. לחץ על אימות ולאחר מכן לחץ על הכרטיסייה שיטת כניסה (או לחץ כאן כדי לעבור ישירות לשם).
3. הפעל את ספק הכניסה של Google ולאחר מכן לחץ על שמור .
4. הגדר את השם הפונה לציבור של האפליקציה שלך ל- Friendly Chat ובחר אימייל לתמיכה בפרויקט מהתפריט הנפתח.
5. הגדר את מסך ההסכמה שלך ל-OAuth ב- Google Cloud Console והוסף לוגו:

הפעל את Cloud Firestore

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

יהיה עליך להפעיל את Cloud Firestore:

1. בקטע Build של מסוף Firebase, לחץ על Firestore Database .
2. לחץ על צור מסד נתונים בחלונית Cloud Firestore.

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

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

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

הפעל אחסון בענן

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

יהיה עליך להפעיל אחסון בענן:

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

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

4. מיקום Cloud Storage נבחר מראש עם אותו אזור שבחרת עבור מסד הנתונים של Cloud Firestore שלך. לחץ על סיום כדי להשלים את ההגדרה.

4. התקן את ממשק שורת הפקודה של Firebase

ממשק שורת הפקודה של Firebase (CLI) מאפשר לך להשתמש ב-Firebase Hosting כדי לשרת את אפליקציית האינטרנט שלך באופן מקומי, כמו גם כדי לפרוס את אפליקציית האינטרנט שלך לפרויקט Firebase שלך.

1. התקן את ה-CLI על ידי הפעלת הפקודה npm הבאה:

npm -g install firebase-tools

2. ודא שה-CLI הותקן כהלכה על ידי הפעלת הפקודה הבאה:

firebase --version

ודא שהגרסה של Firebase CLI היא גרסה 4.1.0 ואילך.

3. אשר את Firebase CLI על ידי הפעלת הפקודה הבאה:

firebase login

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

4. ודא ששורת הפקודה שלך ניגשת לספריית web-start המקומית של האפליקציה שלך.
5. שייך את האפליקציה שלך לפרויקט Firebase שלך ​​על ידי הפעלת הפקודה הבאה:

firebase use --add

6. כשתתבקש, בחר את מזהה הפרויקט שלך ולאחר מכן תן לפרויקט Firebase שלך ​​כינוי.

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

7. עקוב אחר ההוראות הנותרות בשורת הפקודה שלך.

5. הפעל את אפליקציית המתנע באופן מקומי

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

1. במסוף מספריית web-start , הפעל את פקודת Firebase CLI הבאה:

firebase serve --only hosting

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

✔  hosting: Local server: http://localhost:5000

אנו משתמשים באמולטור Firebase Hosting כדי לשרת את האפליקציה שלנו באופן מקומי. אפליקציית האינטרנט אמורה להיות זמינה כעת מ- http://localhost:5000 . כל הקבצים הממוקמים תחת ספריית המשנה public מוצגים.

3. באמצעות הדפדפן שלך, פתח את האפליקציה שלך בכתובת http://localhost:5000 .

אתה אמור לראות את ממשק המשתמש של אפליקציית FriendlyChat שלך, אשר לא (עדיין!) פועל:

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

בואו נבנה עכשיו צ'אט בזמן אמת!

6. ייבא והגדר את Firebase

ייבא את Firebase SDK

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

אנחנו הולכים לקבל את Firebase SDK מ-npm ולהשתמש ב-Webpack כדי לאגד את הקוד שלנו. אנחנו עושים זאת כדי ש-Webpack תוכל להסיר כל קוד מיותר, ולשמור על גודל חבילת ה-JS שלנו קטן כדי לוודא שהאפליקציה שלנו תיטען במהירות האפשרית. עבור מעבדת קוד זה, כבר יצרנו קובץ web-start/package.json הכולל את Firebase SDK כתלות, וכן ייבאנו את הפונקציות הדרושות בחלק העליון של web-start/src/index.js .

package.json

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

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

התקן את Firebase SDK והתחל את בניית ה-Webpack שלך

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

1. פתח חלון מסוף חדש
2. ודא שאתה נמצא בספריית web-start
3. הפעל npm install כדי להוריד את Firebase SDK
4. הפעל npm run start כדי להפעיל את Webpack. Webpack יבנה כעת מחדש את קוד המקור שלנו עבור שאר מעבדת הקוד.

הגדר את Firebase

אנחנו גם צריכים להגדיר את Firebase SDK כדי לומר לו באיזה פרויקט Firebase אנחנו משתמשים.

1. עבור להגדרות הפרויקט שלך במסוף Firebase
2. בכרטיס "האפליקציות שלך", בחר את הכינוי של האפליקציה שעבורה אתה צריך אובייקט תצורה.
3. בחר "Config" מחלונית הקטעים של Firebase SDK.
4. העתק את קטע הקוד של אובייקט התצורה ולאחר מכן הוסף אותו ל- web-start/src/firebase-config.js .

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

כעת, עבור לתחתית web-start/src/index.js ואתחל את Firebase:

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

7. הגדר כניסה למשתמש

ה-SDK של Firebase אמור להיות מוכן כעת לשימוש מכיוון שהוא מיובא ואותחול ב- index.js . כעת אנו הולכים ליישם כניסה של משתמשים באמצעות אימות Firebase .

אמת את המשתמשים שלך עם Google Sign-In

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

1. בספריית web-start , בספריית המשנה src/ , פתח את index.js .
2. מצא את הפונקציה signIn .
3. החלף את כל הפונקציה בקוד הבא.

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

פונקציית signOut מופעלת כאשר המשתמש לוחץ על כפתור היציאה .

1. חזור לקובץ src/index.js .
2. מצא את הפונקציה signOutUser .
3. החלף את כל הפונקציה בקוד הבא.

index.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

עקוב אחר מצב האימות

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

1. חזור לקובץ src/index.js .
2. מצא את הפונקציה initFirebaseAuth .
3. החלף את כל הפונקציה בקוד הבא.

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

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

הצג את המידע של המשתמש המחובר

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

1. חזור לקובץ src/index.js .
2. מצא את הפונקציות getProfilePicUrl ו- getUserName .
3. החלף את שתי הפונקציות בקוד הבא.

index.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

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

1. חזור לקובץ src/index.js .
2. מצא את הפונקציה isUserSignedIn .
3. החלף את כל הפונקציה בקוד הבא.

index.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

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

1. אם האפליקציה שלך עדיין מוגשת, רענן את האפליקציה שלך בדפדפן. אחרת, הפעל את firebase serve --only hosting בשורת הפקודה כדי להתחיל להגיש את האפליקציה מ- http://localhost:5000 , ולאחר מכן פתח אותה בדפדפן שלך.
2. היכנס לאפליקציה באמצעות לחצן הכניסה וחשבון Google שלך. אם אתה רואה הודעת שגיאה המציינת auth/operation-not-allowed , בדוק כדי לוודא שהפעלת את Google Sign-in כספק אימות במסוף Firebase.
3. לאחר הכניסה, תמונת הפרופיל ושם המשתמש שלך אמורים להיות מוצגים:

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

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

מודל נתונים

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

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

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

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

1. חזור לקובץ src/index.js .
2. מצא את הפונקציה saveMessage .
3. החלף את כל הפונקציה בקוד הבא.

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

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

1. אם האפליקציה שלך עדיין מוגשת, רענן את האפליקציה שלך בדפדפן. אחרת, הפעל את firebase serve --only hosting בשורת הפקודה כדי להתחיל להגיש את האפליקציה מ- http://localhost:5000 , ולאחר מכן פתח אותה בדפדפן שלך.
2. לאחר הכניסה, הזן הודעה כגון "היי!", ולאחר מכן לחץ על שלח . זה יכתוב את ההודעה לתוך Cloud Firestore. עם זאת, עדיין לא תראה את הנתונים באפליקציית האינטרנט שלך בפועל, כי אנחנו עדיין צריכים ליישם את אחזור הנתונים (החלק הבא של מעבדת הקוד).
3. אתה יכול לראות את ההודעה החדשה שנוספה במסוף Firebase שלך. פתח את מסוף Firebase שלך. בקטע Build לחץ על Firestore Database (או לחץ כאן ובחר בפרויקט שלך) ואתה אמור לראות את אוסף ההודעות עם ההודעה החדשה שנוספת:

9. קרא הודעות

סנכרן הודעות

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

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

1. חזור לקובץ src/index.js .
2. מצא את הפונקציה loadMessages .
3. החלף את כל הפונקציה בקוד הבא.

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

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

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

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

1. אם האפליקציה שלך עדיין מוגשת, רענן את האפליקציה שלך בדפדפן. אחרת, הפעל את firebase serve --only hosting בשורת הפקודה כדי להתחיל להגיש את האפליקציה מ- http://localhost:5000 , ולאחר מכן פתח אותה בדפדפן שלך.
2. ההודעות שיצרת קודם לכן במסד הנתונים צריכות להיות מוצגות בממשק המשתמש של FriendlyChat (ראה להלן). אתם מוזמנים לכתוב הודעות חדשות; הם צריכים להופיע באופן מיידי.
3. (אופציונלי) תוכל לנסות למחוק, לשנות או להוסיף הודעות חדשות באופן ידני ישירות במקטע מסד הנתונים של מסוף Firebase; כל שינוי צריך לבוא לידי ביטוי בממשק המשתמש.

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

10. שלח תמונות

כעת נוסיף תכונה המשתפת תמונות.

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

שמור תמונות ב-Cloud Storage

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

1. יוצר הודעת צ'אט "מציין מיקום" בפיד הצ'אט, כך שמשתמשים יראו אנימציה של "טעינה" בזמן שאנו מעלים את התמונה.
2. מעלה את קובץ התמונה ל-Cloud Storage לנתיב הזה: /<uid>/<messageId>/<file_name>
3. יוצר כתובת אתר הניתנת לקריאה ציבורית עבור קובץ התמונה.
4. מעדכן את הודעת הצ'אט עם כתובת האתר של קובץ התמונה שהועלה לאחרונה במקום תמונת הטעינה הזמנית.

כעת תוסיף את הפונקציונליות לשליחת תמונה:

1. חזור לקובץ src/index.js .
2. מצא את הפונקציה saveImageMessage .
3. החלף את כל הפונקציה בקוד הבא.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

בדיקת שליחת תמונות

1. אם האפליקציה שלך עדיין מוגשת, רענן את האפליקציה שלך בדפדפן. אחרת, הפעל את firebase serve --only hosting בשורת הפקודה כדי להתחיל להגיש את האפליקציה מ- http://localhost:5000 , ולאחר מכן פתח אותה בדפדפן שלך.
2. לאחר הכניסה, לחץ על כפתור העלאת התמונה ובחר קובץ תמונה באמצעות בורר הקבצים. אם אתה מחפש תמונה, אל תהסס להשתמש בתמונה הנחמדה הזו של כוס קפה .
3. הודעה חדשה אמורה להופיע בממשק המשתמש של האפליקציה עם התמונה שבחרת:

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

11. הצג הודעות

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

הוסף את עובד שירות FCM

אפליקציית האינטרנט זקוקה ל- Service Worker שיקבל ויציג התראות אינטרנט.

1. מתוך ספריית ה- web-start , בספריית src , פתח את firebase-messaging-sw.js .
2. הוסף את התוכן הבא לקובץ זה.

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

ה-Service Worker פשוט צריך לטעון ולאתחל את Firebase Cloud Messaging SDK, שידאג להצגת התראות.

קבל אסימוני מכשיר FCM

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

כאשר המשתמש נכנס, אנו קוראים לפונקציה saveMessagingDeviceToken . שם נקבל את אסימון מכשיר ה-FCM מהדפדפן ונשמור אותו ב-Cloud Firestore.

1. חזור לקובץ src/index.js .
2. מצא את הפונקציה saveMessagingDeviceToken .
3. החלף את כל הפונקציה בקוד הבא.

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

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

בקש הרשאות להצגת הודעות

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

1. חזור לקובץ src/index.js .
2. מצא את הפונקציה requestNotificationsPermissions .
3. החלף את כל הפונקציה בקוד הבא.

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

קבל את אסימון המכשיר שלך

1. אם האפליקציה שלך עדיין מוגשת, רענן את האפליקציה שלך בדפדפן. אחרת, הפעל את firebase serve --only hosting בשורת הפקודה כדי להתחיל להגיש את האפליקציה מ- http://localhost:5000 , ולאחר מכן פתח אותה בדפדפן שלך.
2. לאחר הכניסה, תיבת הדו-שיח להרשאת הודעות אמורה להופיע:
3. לחץ על אפשר .
4. פתח את מסוף JavaScript של הדפדפן שלך. אתה אמור לראות את ההודעה הבאה: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
5. העתק את אסימון המכשיר שלך. תזדקק לזה לשלב הבא של מעבדת הקוד.

שלח הודעה למכשיר שלך

כעת, לאחר שיש לך את אסימון המכשיר שלך, תוכל לשלוח הודעה.

1. פתח את הכרטיסייה Cloud Messaging של מסוף Firebase .
2. לחץ על "הודעה חדשה"
3. הזן כותרת הודעה וטקסט הודעה.
4. בצד ימין של המסך, לחץ על "שלח הודעת בדיקה"
5. הזן את אסימון המכשיר שהעתקת ממסוף JavaScript של הדפדפן שלך, ולאחר מכן לחץ על סימן הפלוס ("+")
6. לחץ על "בדיקה"

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

אם האפליקציה שלך נמצאת ברקע, הודעה אמורה להופיע בדפדפן שלך, כמו בדוגמה זו:

12. כללי אבטחה של Cloud Firestore

הצג את כללי האבטחה של מסד הנתונים

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

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

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

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

אנו נעדכן את הכללים כדי להגביל דברים על ידי שימוש בכללים הבאים:

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

עדכן את כללי האבטחה של מסד הנתונים

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

כדי לעדכן כללי אבטחה במסוף Firebase:

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

כדי לעדכן כללי אבטחה מקובץ מקומי:

1. מתוך ספריית web-start , פתח את firestore.rules .
2. החלף את כללי ברירת המחדל שכבר נמצאים בקובץ עם הכללים המוצגים למעלה.
3. מתוך ספריית web-start , פתח את firebase.json .
4. הוסף את התכונה firestore.rules המצביע על firestore.rules , כפי שמוצג להלן. (תכונת hosting צריכה להיות כבר בקובץ.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

5. פרוס את כללי האבטחה באמצעות Firebase CLI על ידי הפעלת הפקודה הבאה:

firebase deploy --only firestore

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

=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

13. כללי אבטחה של Cloud Storage

הצג את כללי האבטחה של Cloud Storage

Cloud Storage for Firebase משתמש בשפת כללים ספציפית כדי להגדיר זכויות גישה, אבטחה ואימות נתונים.

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

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

אנו נעדכן את הכללים כדי לבצע את הפעולות הבאות:

• אפשר לכל משתמש לכתוב רק לתיקיות הספציפיות שלו
• אפשר לכל אחד לקרוא מ-Cloud Storage
• ודא שהקבצים שהועלו הם תמונות
• הגבל את גודל התמונות שניתן להעלות ל-5 MB לכל היותר

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

אחסון.כללים

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

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

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

כדי לעדכן כללי אבטחה במסוף Firebase:

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

כדי לעדכן כללי אבטחה מקובץ מקומי:

1. מתוך ספריית ה- web-start , פתח את storage.rules .
2. החלף את כללי ברירת המחדל שכבר נמצאים בקובץ עם הכללים המוצגים למעלה.
3. מתוך ספריית web-start , פתח את firebase.json .
4. הוסף את התכונה storage.rules המפנה לקובץ storage.rules , כפי שמוצג להלן. (תכונת hosting ומסד database אמורה להיות כבר בקובץ.)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

6. פרוס את כללי האבטחה באמצעות Firebase CLI על ידי הפעלת הפקודה הבאה:

firebase deploy --only storage

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

=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

14. איסוף נתוני ביצועים

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

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

עקבות אוטומטיות

מכיוון שאנו כבר מייבאים getPerformance בחלק העליון של web-start/src/index.js , אנחנו רק צריכים להוסיף שורה אחת כדי לומר לניטור ביצועים לאסוף אוטומטית מדדי טעינת דפים ובקשות לרשת עבורך כאשר משתמשים מבקרים באתר הפרוס שלך!

1. ב- web-start/src/index.js , הוסף את השורה הבאה מתחת ל- TODO הקיים כדי לאתחל את ניטור הביצועים.

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

מדידת השהיית קלט ראשון (אופציונלי)

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

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

אם תרצה למדוד את השהיית הקלט הראשון, תצטרך לכלול את הקוד הבא ישירות.

1. פתח את public/index.html .
2. בטל את ההערה לתג script בשורה הבאה.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

כדי לקרוא עוד על הפוליפיל הראשון של עיכוב קלט, עיין בתיעוד .

הצג נתוני ביצועים

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

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

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

15. פרוס את האפליקציה שלך באמצעות Firebase Hosting

Firebase מציעה שירות אירוח לשרת את הנכסים ואת אפליקציות האינטרנט שלך. אתה יכול לפרוס את הקבצים שלך ל-Firebase Hosting באמצעות Firebase CLI. לפני הפריסה, עליך לציין בקובץ firebase.json שלך אילו קבצים מקומיים יש לפרוס. עבור מעבדת קוד זה, כבר עשינו זאת עבורך מכיוון ששלב זה נדרש כדי להגיש את הקבצים שלנו במהלך מעבדת קוד זה. הגדרות האירוח מצויינות תחת תכונת hosting :

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

הגדרות אלו אומרות ל-CLI שאנו רוצים לפרוס את כל הקבצים בספריית ./public ( "public": "./public" ).

1. ודא ששורת הפקודה שלך ניגשת לספריית web-start המקומית של האפליקציה שלך.
2. פרוס את הקבצים שלך בפרויקט Firebase שלך ​​על ידי הפעלת הפקודה הבאה:

firebase deploy --except functions

3. הקונסולה אמורה להציג את הדברים הבאים:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

4. בקר באפליקציית האינטרנט שלך שמתארחת כעת במלואה ב-CDN גלובלי באמצעות Firebase Hosting בשניים מתת-דומיינים משלך של Firebase:

• https://<firebase-projectId>.firebaseapp.com
• https://<firebase-projectId>.web.app

לחלופין, אתה יכול להפעיל firebase open hosting:site בשורת הפקודה.

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

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

16. מזל טוב!

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

מה שכיסינו

• אימות Firebase
• Cloud Firestore
• Firebase SDK עבור אחסון בענן
• Firebase Cloud Messaging
• ניטור ביצועי Firebase
• אירוח ב-Firebase

הצעדים הבאים

Learn more

• firebase.google.com