כיצד לבנות אפליקציית צ'אט עם React ו-Firebase

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

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

מה זה Firebase Cloud Database

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

הגדר את פרויקט Firebase ואת לקוח React

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

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

שים לב להוראות לשילוב ה-SDK של Firebase בפרויקט שלך תחת הוסף Firebase SDK.

הַבָּא, ליצור אפליקציית React והתקן את Firebase SDK באפליקציה שלך. בנוסף, ייבא את ה להגיב-פייס-קרסים חבילה שמפשטת את העבודה עם Firebase In React.

npm להתקין את Firebase react-firebase-hooks

הגדר את Firebase ביישום React שלך

אצלך src ספרייה, צור קובץ חדש ותן לו שם, firebase-config.js. העתק את משתני הסביבה מלוח המחוונים של פרויקט Firebase שלך ​​והדבק אותם בקובץ זה.

יְבוּא { initializeApp } מ"firebase/app";
יְבוּא { getFirestore } מ'@firebase/firestore';
יְבוּא { getAuth, GoogleAuthProvider } מ"firebase/auth";
const firebaseConfig = {
 apiKey: "API_KEY",
 authDomain: "authDomain",
 מזהה פרויקט: "מזהה פרויקט",
 דלי אחסון: "דלי אחסון",
 messagingSenderId: "מזהה שולח הודעות",
 appId: "מזהה אפליקציה"
};
const app = initializeApp (firebaseConfig);
const db = getFirestore (אפליקציה);
const auth = getAuth (אפליקציה)
const ספק = חָדָשׁ GoogleAuthProvider();
יְצוּא {db, auth, provider}

באמצעות התצורה של פרויקט Firebase שלך, אתה מאתחל את פונקציות האימות של Firebase, Firestore ו-Firebase לשימוש בתוך האפליקציה שלך.

הגדר מסד נתונים של Firestore

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

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

לבסוף, עדכן את כללי מסד הנתונים של Firestore כדי לאפשר פעולות קריאה וכתיבה מאפליקציית React. הקלק על ה כללים לשונית ושנה את תקרא ותכתוב כלל ל נָכוֹן.

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

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

שלב אימות משתמש של Firebase

Firebase מספקת מחוץ לקופסה אימות והרשאה פתרונות שקל ליישם כמו ספקי התחברות חברתיות או ספק סיסמא דוא"ל מותאם אישית.

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

צור רכיב כניסה

לאחר שתסיים להגדיר את הספק ב-Firebase, עבור אל תיקיית הפרויקט שלך וצור תיקיה חדשה, רכיבים, בתוך ה /src מַדרִיך. בתוך ה רכיבים תיקיה, צור קובץ חדש: SignIn.js.

בתוך ה SignIn.js קובץ, הוסף את הקוד למטה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { signInWithPopup } מ"firebase/auth";
יְבוּא { אישור, ספק } מ'../firebase-config'

פוּנקצִיָהלהתחבר() {
const signInWithGoogle = () => {
 signInWithPopup (אישור, ספק)
 };
לַחֲזוֹר (


היכנס עם Google</button>
 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל להתחבר

• קוד זה מייבא את אובייקטי האימות וספק Google שאותחלת בקובץ התצורה של Firebase.
• לאחר מכן הוא מגדיר את א להתחבר פונקציה המיישמת את signInWithPopup שיטה מ-Firebase שמקבלת את אימות ו ספק רכיבים כפרמטרים. פונקציה זו תאמת את המשתמשים באמצעות כניסותיהם החברתיות של Google.
• לבסוף, הוא מחזיר div המכיל כפתור אשר, כאשר לוחצים עליו, קורא ל- signInWithGoogle פוּנקצִיָה.

צור רכיב צ'אט

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

הוסף את הקוד למטה ב- Chat.js קוֹבֶץ:

יְבוּא תגובה, { useState, useEffect } מ'לְהָגִיב'
יְבוּא {db, אישור } מ'../firebase-config'
יְבוּא לשלוח הודעה מ'./לשלוח הודעה'
יְבוּא { collection, query, limit, orderBy, onSnapshot } מ"firebase/firestore";
פוּנקצִיָהלְשׂוֹחֵחַ() {
const [messages, setMessages] = useState([])
const { userID } = auth.currentUser
 useEffect(() => {
const q = שאילתה(
 אוסף (db, "הודעות"),
 מיין לפי("נוצר ב"),
 לְהַגבִּיל(50)
 );
const data = onSnapshot (ש, (QuerySnapshot) => {
לתת הודעות = [];
 QuerySnapshot.forEach((דוק) => {
 messages.push({ ...doc.data(), תְעוּדַת זֶהוּת: doc.id });
 });
 setMessages (הודעות) 

 });
לַחֲזוֹר() => נתונים; 

 }, []);

לַחֲזוֹר (


 auth.signOut()}>יציאה</button>
 {messages && messages.map((הודעה, מזהה, uid, photoURL) =>
 key={id} 
 className={`מסר ${userID auth.currentUser.uid? 'שלח': 'קיבלו'}`}>

{message.text}</p>
 </div>
 )} 

 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל לְשׂוֹחֵחַ

• קוד זה מייבא את מסד הנתונים, את רכיבי האימות שהופעלו ב- firebase-config.js קובץ, ושיטות מותאמות אישית של Firestore המקלות על מניפולציה של הנתונים המאוחסנים.
• הוא מיישם את אוסף, שאילתא, לְהַגבִּיל, מיין לפי, ו על סנאפצ'ט שיטות Firestore לשאילתה ולכידת תמונת מצב של הנתונים המאוחסנים כעת באוסף ההודעות של Firestore, מסודרות לפי זמן יצירתן, וקוראת רק את 50 ההודעות האחרונות.
• שיטות Firestore עטופות ומופעלות בתוך a useEffect הוק כדי להבטיח שההודעות יוצגו מיד, בכל פעם שאתה לוחץ על כפתור השליחה, מבלי לרענן את חלון העמוד. לאחר קריאת הנתונים, הם מאוחסנים במצב ההודעות.
• לאחר מכן הוא בודק להבדיל בין הודעות שנשלחו להודעות שהתקבלו - אם מזהה המשתמש המאוחסן עם ההודעה תואם מזהה המשתמש של המשתמש המחובר, ולאחר מכן, מגדיר את שם המחלקה ומחיל את הסגנון המתאים עבור הוֹדָעָה.
• לבסוף, הוא מעבד את ההודעות, א התנתק כפתור, ואת לשלוח הודעה רְכִיב. ה התנתק לַחְצָן בלחיצה המטפל קורא ל- auth.signOut() שיטה שסופקה על ידי Firebase.

צור רכיב שלח הודעה

צור קובץ חדש, SendMessage.js קובץ, והוסיפו את הקוד למטה:

יְבוּא תגובה, { useState } מ'לְהָגִיב'
יְבוּא {db, אישור } מ'../firebase-config'
יְבוּא { collection, addDoc, serverTimestamp} מ"firebase/firestore";
פוּנקצִיָהלשלוח הודעה() {
const [msg, setMsg] = useState('')
const messagesRef = collection (db, "הודעות");

const sendMsg = אסינכרון (ה) => {
const { uid, photoURL } = auth.currentUser

לְהַמתִין addDoc (messagesRef, {
 טקסט: msg,
 createdAt: serverTimestamp(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg('');
 };
לַחֲזוֹר (



'הוֹדָעָה...'
 סוג="טֶקסט" value={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />
שלח</button>
 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל לשלוח הודעה

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

ייבא את הרכיבים בקובץ App.js

לבסוף, אצלך App.js קובץ, ייבא את להתחבר ו לְשׂוֹחֵחַ רכיבים כדי להציג אותם בדפדפן שלך.

אצלך App.js קובץ, מחק את קוד ה-boilerplate, והוסף את הקוד שלהלן:

יְבוּא לְשׂוֹחֵחַ מ'./components/Chat';
יְבוּא להתחבר מ'./components/SignIn';
יְבוּא { אישור } מ'./firebase-config.js'
יְבוּא { useAuthState } מ'react-firebase-hooks/auth'
פוּנקצִיָהאפליקציה() {
const [משתמש] = useAuthState (auth)
לַחֲזוֹר (
 <>
 {מִשׁתַמֵשׁ? <לְשׂוֹחֵחַ />: <להתחבר />}
 </>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה; 

קוד זה הופך את ה להתחבר ו לְשׂוֹחֵחַ רכיבים באופן מותנה על ידי בדיקת סטטוס האימות של משתמש. סטטוס האימות מפורק ממרכיב האימות של Firebase בעזרת useAuthState וו מה להגיב-פייס-קרסים חֲבִילָה.

הוא בודק אם משתמש מאומת ומציג את ה לְשׂוֹחֵחַ רכיב אחרת את להתחבר הרכיב מוצג. לבסוף, הוסף כל סגנונות CSS, הפוך את שרת הפיתוח כדי לשמור את השינויים, ועבור לדפדפן שלך כדי לראות את התוצאות הסופיות.

פונקציות ללא שרתים של Firebase

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