קוד קוד אינטרנט של Firebase

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

3b1284f5144b54f6.png

מה תלמד

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

מה אתה צריך

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

Clone של codelab מאגר GitHub משורת הפקודה:

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

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

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

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

צור פרויקט Firebase

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

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

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

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

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

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

רשום צילום מסך של אפליקציית אינטרנט

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

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

תצטרך לאפשר כניסה ל- Google:

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

d89fb3873b5d36ae.png

הפעל את Cloud Firestore

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

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

  1. במקטע בנה של Firebase המסוף, לחץ מסד firestore.
  2. לחץ על צור מסד נתונים בחלונית ענן firestore.

729991a081e7cd5.png

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

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

77e4986cbeaf9dee.png

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

9f2bb0d4e7ca49c7.png

אפשר אחסון בענן

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

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

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

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

62f1afdcd1260127.png

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

1d7f49ebaddb32fc.png

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

  1. התקן את CLI על ידי הפעלת הפקודה npm הבאה:
npm -g install firebase-tools
  1. ודא כי ה- CLI הותקן כהלכה על ידי הפעלת הפקודה הבאה:
firebase --version

ודא שגירסת ה- CLI של Firebase היא גרסה 4.0.1 ואילך.

  1. אשר את ה- CLI של Firebase על ידי הפעלת הפקודה הבאה:
firebase login

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

  1. ודא כי שורת הפקודה שלך ניגש המקומית באפליקציה web-start בספרייה.
  2. שייך את האפליקציה שלך לפרויקט Firebase שלך ​​על ידי הפעלת הפקודה הבאה:
firebase use --add
  1. כשתתבקש, בחר מזהה הפרויקט שלך, ואז לתת פרויקט Firebase שלך בדוי.

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

  1. בצע את ההוראות הנותרות בשורת הפקודה שלך.

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

  1. בשנת קונסולה מן web-start הספרייה, הפעל את פקוד Firebase CLI הבאה:
firebase serve --only hosting
  1. שורת הפקודה שלך אמורה להציג את התגובה הבאה:
✔  hosting: Local server: http://localhost:5000

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

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

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

4c23f9475228cef4.png

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

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

ייבא את ה- SDK של Firebase

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

אנחנו הולכים לקבל את Firebase SDK מ NPM ולהשתמש Webpack לחבילה הקוד שלנו. אנו עושים זאת על מנת ש- Webpack תוכל להסיר כל קוד לא נחוץ, ולשמור על גודל צרור ה- JS שלנו קטן כדי לוודא שהאפליקציה שלנו נטענת במהירות האפשרית. עבור codelab הזה, אנחנו כבר יצרנו web-start/package.json קובץ הכולל את SDK Firebase כתלות, כמו גם מיובאות פונקציות הצורכות בראש 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, בענן Firestore, אחסון בענן, העברת הודעות בענן וניטור ביצועים, ולכן אנו מייבאים את כל הספריות שלהם. באפליקציות העתידיות שלך, וודא שאתה מייבא רק את החלקים הנדרשים ל- Firebase כדי לקצר את זמן הטעינה של האפליקציה שלך.

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

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

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

הגדר את Firebase

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

  1. עבור אל שלך הגדרות הפרויקט במסוף Firebase
  2. בכרטיס "האפליקציות שלך", בחר את כינוי האפליקציה שעבורה אתה צריך אובייקט תצורה.
  3. בחר "Config" מחלונית קטע הקוד של Firebase SDK.
  4. העתק את קטע אובייקט config, אז להוסיף אותו 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);

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

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

באפליקציה, כאשר המשתמש לוחץ על כניסה עם כפתור גוגל, signIn הפונקציה מופעלת. (כבר הגדרנו את זה עבורך!) עבור codelab זה, אנו רוצים לאשר ל- 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 פונקצית הדק כאשר המשתמש נכנס כך עדכוני UI שלנו בהתאם. זה ייקרא 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 כספק אימות במסוף Firebase.
  3. לאחר הכניסה יש להציג את תמונת הפרופיל ושם המשתמש שלך: c7401b3d44d0d78b.png

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

מודל נתונים

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

688d7bc5fb662b57.png

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

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

בחלק זה, תוסיף את הפונקציונליות למשתמשים לכתוב הודעות חדשות למסד הנתונים שלך. משתמש לחיצה על הלחצן שלח יפעיל את קטע הקוד שלהלן. זה מוסיף אובייקט הודעה עם התוכן של שדות הודעה למופע הענן 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. עם זאת, תוכלו עדיין לא רואה את הנתונים של יישום האינטרנט שלך בפועל, כי אנחנו עדיין צריכים ליישם אחזור נתונים (בחלק הבא של codelab).
  3. תוכל לראות את ההודעה שנוספה לאחרונה במסוף Firebase שלך. פתח את מסוף Firebase שלך. תחת סעיף Build לחץ מסד Firestore (או לחץ כאן ובחר הפרויקט שלך) ואתה צריך לראות את האוסף מסרים עם הודעה חדשה שהוסיפה:

6812efe7da395692.png

הודעות סנכרן

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

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

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

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

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

2168dec79b573d07.png

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

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

שמור תמונות באחסון ענן

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

  1. יוצר הודעת צ'אט "מציין מקום" בפיד הצ'אט, כך שמשתמשים יראו אנימציה "טוען" בזמן שאנו מעלים את התמונה.
  2. העלאות קובץ התמונה באחסון בענן לדרך זו: /<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. לאחר הכניסה לחצו על כפתור העלאת התמונה 13734cb66773e5a3.png ובחר קובץ תמונה באמצעות בורר הקבצים. אם אתה מחפש תמונה, אל תהסס להשתמש זו תמונה יפה של כוס קפה .
  3. הודעה חדשה אמורה להופיע בממשק המשתמש של האפליקציה עם התמונה שבחרת: 3b1284f5144b54f6.png

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

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

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

אפליקציית האינטרנט זקוק לעובד שירות שיקבל והודעות אינטרנט תצוגה.

  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');

עובד השירות פשוט צריך לטעון ולאתחל את ה- SDK של הודעות ענן של Firebase, שידאג להצגת התראות.

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

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

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

8b9d0c66dc36153d.png

  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. לאחר הכניסה, תיבת הדו -שיח של הרשאת ההתראות צריכה להופיע: bd3454e6dbfb6723.png
  3. לחץ אפשר.
  4. פתח את מסוף ה- JavaScript של הדפדפן שלך. אתה צריך לראות את ההודעה הבאה: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. העתק את אסימון המכשיר שלך. תזדקק לזה לשלב הבא של ה- codelab.

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

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

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

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

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

de79e8638a45864c.png

כללים צפו אבטחה באתר

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

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

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

rules_version = '2';

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

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

כללי firestore

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 או מקובץ כללים מקומיים שנפרס באמצעות CLI Firebase.

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

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

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

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

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. הפעל את חוקי האבטחה באמצעות CLI Firebase על ידי הפעלת הפקודה הבאה:
firebase deploy --only firestore
  1. שורת הפקודה שלך אמורה להציג את התגובה הבאה:
=== 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

צפה בכללי האבטחה בענן

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

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

rules_version = '2';

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

אנו נעדכן את הכללים כך:

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

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

כללי אחסון

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

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

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

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

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

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

  1. מתוך web-start ספרייה, פתוח storage.rules .
  2. החלף את כללי ברירת המחדל שכבר נמצאים בקובץ בכללים המוצגים למעלה.
  3. מתוך web-start ספרייה, פתוח firebase.json .
  4. מוסיפים את storage.rules מייחסים מצביעה על storage.rules קובץ, כפי שמוצג להלן. (The 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"
  }
}
  1. הפעל את חוקי האבטחה באמצעות CLI Firebase על ידי הפעלת הפקודה הבאה:
firebase deploy --only storage
  1. שורת הפקודה שלך אמורה להציג את התגובה הבאה:
=== 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

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

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

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

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

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

index.js

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

מדוד עיכוב קלט ראשון (אופציונלי)

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

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

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

  1. Open public/index.html .
  2. Uncomment 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>

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

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

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

29389131150f33d7.png

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

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

הצעות Firebase שירות אירוח לשרת יישומי נכסי אינטרנט שלך. תוכל לפרוס את הקבצים שלך לאירוח Firebase באמצעות CLI Firebase. לפני הפריסה, אתה צריך לציין שלך firebase.json קובץ אילו קבצים מקומיים צריכים להתפרס. עבור codelab זה, כבר עשינו זאת עבורך כיוון ששלב זה נדרש לשרת את הקבצים שלנו במהלך codelab זה. הגדרות האירוח מפורטות תחת 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
  1. הקונסולה צריכה להציג את הדברים הבאים:
=== 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
  1. בקר באפליקציית האינטרנט שלך המאוחסנת כעת במלואה ב- CDN גלובלי באמצעות Firebase Hosting בשני תת -דומיינים משלך:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

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

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

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

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

מה שסיקרנו

  • אימות Firebase
  • Cloud Firestore
  • Firebase SDK לאחסון ענן
  • הודעות ענן של Firebase
  • ניטור ביצועי Firebase
  • אירוח Firebase

הצעדים הבאים

Learn more