هل تساءلت يومًا كيف يعمل WhatsApp؟ أو كيف يتصل المستخدمون المختلفون ويتبادلون الرسائل في الدردشات؟ يمكن أن يكون إنشاء تطبيق دردشة مبسط طريقة رائعة لفهم الوظائف الأساسية لتطبيقات الدردشة.
قد يبدو إنشاء تطبيق دردشة مهمة شاقة ، إلا أن Firebase يبسط العملية. يمكّنك من تمهيد أي تطبيق بسرعة ، مما يلغي الحاجة إلى خلفية مخصصة أو إعداد قاعدة بيانات.
ما المقصود بقاعدة بيانات Firebase السحابية
Firebase عبارة عن نظام أساسي للتطوير قائم على السحابة يقدم مجموعة من خدمات الواجهة الخلفية مثل قاعدة البيانات في الوقت الفعلي والمصادقة والاستضافة. في صميم خدمات قاعدة البيانات الخاصة بها ، توجد قاعدة بيانات سحابية NoSQL تستخدم نموذج مستند لتخزين البيانات في الوقت الفعلي.
قم بإعداد مشروع Firebase و React Client
يمكنك التحقق من رمز تطبيق الدردشة المتاح على هذا مستودع جيثب وهو مجاني للاستخدام بموجب ترخيص MIT. تأكد من تهيئة Firebase قبل تشغيل التطبيق.
للبدء ، توجه إلى Firebase وقم بالتسجيل للحصول على حساب. في لوحة تحكم المستخدم ، انقر فوق أنشئ مشروعًا لإنشاء مشروع جديد.
بعد إنشاء مشروعك ، حدد رمز الرمز الموجود في صفحة نظرة عامة على المشروع وانقر فوقه لتسجيل طلبك. يتيح لك التسجيل في Firebase الوصول إلى موارده واستخدامها لبناء تطبيق الويب React الخاص بك.
قم بتدوين تعليمات دمج Firebase SDK في مشروعك ضمن أضف Firebase SDK.
التالي، إنشاء تطبيق React وتثبيت Firebase SDK في تطبيقك. بالإضافة إلى ذلك ، قم باستيراد ملف رد فعل-فايربيس-السنانير الحزمة التي تبسط العمل مع Firebase In React.
npm تثبيت firebase رد فعل- firebase-hooksهيئ Firebase في تطبيق React الخاص بك
في الخاص بك src الدليل ، قم بإنشاء ملف جديد وقم بتسميته ، firebase-config.js. انسخ متغيرات البيئة من لوحة معلومات مشروع Firebase والصقها في هذا الملف.
يستورد {initializeApp} من"Firebase / التطبيق";
يستورد {getFirestore} من"@ firebase / firestore";
يستورد {getAuth ، GoogleAuthProvider} من"firebase / auth";مقدار ثابت firebaseConfig = {
مفتاح API: "مفتاح API",
نطاق التأليف: "authDomain",
معرف المشروع: "معرف المشروع",
التخزين "دلو التخزين",
المراسلة "إرسال معرف المرسل",
معرف التطبيق: "معرف التطبيق"
};
مقدار ثابت app = initializeApp (firebaseConfig) ؛
مقدار ثابت ديسيبل = getFirestore (التطبيق) ؛
مقدار ثابت المصادقة = getAuth (التطبيق)
مقدار ثابت مزود = جديد GoogleAuthProvider () ،
يصدّر {ديسيبل ، مصادقة ، موفر}
باستخدام تكوين مشروع Firebase ، يمكنك تهيئة وظائف مصادقة Firebase و Firestore و Firebase للاستخدام داخل تطبيقك.
قم بإعداد قاعدة بيانات Firestore
ستقوم قاعدة البيانات هذه بتخزين بيانات المستخدم ورسائل الدردشة. توجه إلى صفحة نظرة عامة على مشروعك وانقر فوق إنشاء قاعدة بيانات زر لإعداد Cloud Firestore الخاص بك.
تحديد وضع قاعدة البيانات والموقع.
أخيرًا ، قم بتحديث قواعد قاعدة بيانات Firestore للسماح بعمليات القراءة والكتابة من تطبيق React. اضغط على قواعد علامة التبويب وتغيير اقرا و اكتب حكم ل حقيقي.
بمجرد الانتهاء من إعداد قاعدة البيانات ، يمكنك إنشاء مجموعة تجريبية - هذه قاعدة بيانات NoSQL في Firestore. تتكون المجموعات من المستندات كسجلات.
لإنشاء مجموعة جديدة ، انقر فوق بدء المجموعة زر ، وتوفير معرف المجموعة - اسم الجدول.
دمج مصادقة مستخدم Firebase
يوفر Firebase خدمة جاهزة المصادقة والتخويل الحلول التي يسهل تنفيذها مثل موفري تسجيل الدخول الاجتماعي أو موفر كلمة مرور البريد الإلكتروني المخصص.
في صفحة نظرة عامة على مشروعك ، حدد المصادقة من قائمة المنتجات المعروضة. بعد ذلك ، انقر فوق إعداد طريقة تسجيل الدخول زر لتهيئة مزود Google. حدد Google من قائمة الموفرين ، وقم بتمكينه ، واملأ البريد الإلكتروني لدعم المشروع.
قم بإنشاء مكون تسجيل الدخول
بمجرد الانتهاء من تكوين الموفر على Firebase ، توجه إلى مجلد المشروع الخاص بك وأنشئ مجلدًا جديدًا ، عناصر، في ال /src الدليل. داخل عناصر مجلد ، قم بإنشاء ملف جديد: تسجيل الدخول js.
في ال تسجيل الدخول js ملف ، أضف الكود أدناه:
يستورد تتفاعل من'تتفاعل';
يستورد {تسجيل الدخول} من"firebase / auth";
يستورد {المصادقة ، المزود} من"../firebase-config"
وظيفةتسجيل الدخول() {
مقدار ثابت SignInWithGoogle = () => {
SignInWithPopup (المصادقة ، الموفر)
};
يعود (
يصدّرتقصير تسجيل الدخول
- يستورد هذا الرمز المصادقة وكائنات موفر Google التي قمت بتهيئتها في ملف تكوين Firebase.
- ثم تحدد أ تسجيل الدخول الوظيفة التي تنفذ تسجيل الدخول الطريقة من Firebase التي تأخذ ملف المصادقة و مزود المكونات كمعلمات. ستقوم هذه الوظيفة بمصادقة المستخدمين باستخدام عمليات تسجيل الدخول الاجتماعية الخاصة بهم على Google.
- أخيرًا ، تقوم بإرجاع عنصر div يحتوي على زر ، عند النقر عليه ، يقوم باستدعاء الدخول مع جوجل وظيفة.
قم بإنشاء مكون دردشة
سيضم هذا المكون الميزة الرئيسية لتطبيق الدردشة الخاص بك ، وهي نافذة الدردشة. قم بإنشاء ملف جديد داخل ملف عناصر المجلد ، وتسميته Chat.js.
أضف الكود أدناه في ملف Chat.js ملف:
يستورد React ، {useState ، useEffect} من'تتفاعل'
يستورد {ديسيبل ، مصادقة} من"../firebase-config"
يستورد إرسال رسالة من"./SendMessage"
يستورد {collection، query، limit، orderBy، onSnapshot} من"firebase / firestore";وظيفةمحادثة() {
مقدار ثابت [messages، setMessages] = useState ([])
مقدار ثابت {userID} = auth.currentUser
useEffect (() => {
مقدار ثابت q = استعلام (
جمع (ديسيبل ، "رسائل"),
ترتيب حسب("أنشئت في"),
حد(50)
);
مقدار ثابت data = onSnapshot (q، (QuerySnapshot) => {
يترك الرسائل = [] ؛
QuerySnapshot.forEach ((وثيقة) => {
messages.push ({... doc.data ()، بطاقة تعريف: doc.id}) ؛
});
setMessages (الرسائل)
});
يعود() => بيانات؛
}, []);
يعود (
- يستورد هذا الرمز قاعدة البيانات ، ومكونات المصادقة التي تمت تهيئتها في ملف firebase-config.js file ، وطرق مخصصة لـ Firestore تسهل معالجة البيانات المخزنة.
- ينفذ مجموعة, استفسار, حد, ترتيب حسب، و على لقطة طرق Firestore للاستعلام عن البيانات المخزنة حاليًا في مجموعة رسائل Firestore والتقاطها ، مرتبة حسب وقت إنشائها ، ولا يقرأ سوى أحدث 50 رسالة.
- يتم تغليف طرق Firestore وتشغيلها داخل ملف useEffect ربط لضمان عرض الرسائل على الفور ، في كل مرة تضغط فيها على زر الإرسال ، دون تحديث نافذة الصفحة. بمجرد قراءة البيانات ، يتم تخزينها في حالة الرسائل.
- ثم يتحقق من التمييز بين الرسائل المرسلة والمستلمة - إذا كان معرف المستخدم المخزن مع الرسالة متطابقًا معرف المستخدم للمستخدم الذي قام بتسجيل الدخول ، وبعد ذلك ، يحدد اسم الفئة ويطبق النمط المناسب لـ رسالة.
- أخيرًا ، يعرض الرسائل ، أ خروج زر و إرسال رسالة عنصر. ال خروج زر عند النقر المعالج يستدعي auth.signOut () الطريقة التي قدمتها Firebase.
قم بإنشاء مكون إرسال رسالة
قم بإنشاء ملف جديد ، SendMessage.js ملف ، وأضف الرمز أدناه:
يستورد رد فعل ، {useState} من'تتفاعل'
يستورد {ديسيبل ، مصادقة} من"../firebase-config"
يستورد {collection، addDoc، serverTimestamp} من"firebase / firestore";وظيفةإرسال رسالة() {
مقدار ثابت [msg، setMsg] = useState ('')
مقدار ثابت messagesRef = مجموعة (ديسيبل ، "رسائل");
مقدار ثابت sendMsg = غير متزامن (هـ) => {
مقدار ثابت {uid، photoURL} = auth.currentUser
انتظر addDoc (messagesRef، {
نص: رسالة ،
تم الإنشاء في: serverTimestamp () ،
uid: uid ،
عنوان URL: photoURL
})
setMsg ('');
};يعود (
'رسالة...'
اكتب ="نص" القيمة = {msg}
onChange = {(e) => setMsg (e.target.value)}
/>
يصدّرتقصير إرسال رسالة
- مشابهه ل Chat.js المكون ، قم باستيراد أساليب Firestore وقاعدة البيانات التي تمت تهيئتها ومكونات المصادقة.
- لإرسال الرسائل ، يجب أن يكون ملف إرسال رسالة وظيفة تنفذ addDoc طريقة Firestore التي تنشئ مستندًا جديدًا في قاعدة البيانات وتخزن البيانات التي تم تمريرها.
- ال addDoc تأخذ الطريقة معلمتين ، كائن البيانات وكائن مرجعي يشير إلى المجموعة التي تريد تخزين البيانات. تحدد طريقة جمع Firestore المجموعة لتخزين البيانات.
- أخيرًا ، يعرض حقل إدخال وزرًا على صفحة الويب للسماح للمستخدمين بإرسال رسائل إلى قاعدة البيانات.
قم باستيراد المكونات في ملف App.js
أخيرًا ، في ملف App.js ملف ، قم باستيراد ملف تسجيل الدخول و محادثة مكونات لعرضها على متصفحك.
في الخاص بك App.js ملف ، احذف الشفرة المعيارية ، وأضف الكود أدناه:
يستورد محادثة من"./components/Chat";
يستورد تسجيل الدخول من"./components/SignIn";
يستورد {المصادقة} من"./firebase-config.js"
يستورد {useAuthState} من"رد فعل-فايربيس-خطاطيف / مصادقة"
وظيفةبرنامج() {
مقدار ثابت [المستخدم] = useAuthState (المصادقة)
يعود (
<>
{مستخدم؟ <محادثة />: <تسجيل الدخول />}
</>
);
}
يصدّرتقصير برنامج؛ هذا الرمز يجعل ملف تسجيل الدخول و محادثة المكونات المشروط عن طريق التحقق من حالة مصادقة المستخدم. يتم إتلاف حالة المصادقة من مكون مصادقة Firebase بمساعدة ملف useAuthState ربط من رد فعل-فايربيس-السنانير طَرد.
يتحقق مما إذا كان المستخدم قد تمت مصادقته ، ويعرض ملف محادثة مكون خلاف ذلك تسجيل الدخول يتم تقديم المكون. أخيرًا ، أضف أي أنماط CSS ، وقم بتدوير خادم التطوير لحفظ التغييرات ، وتوجه إلى متصفحك لعرض النتائج النهائية.
وظائف Firebase بدون خادم
يوفر Firebase مجموعة من الميزات تتجاوز المصادقة وقاعدة البيانات في الوقت الفعلي. يمكنك استخدام وظائفه التي لا تحتاج إلى خادم لبدء تشغيل أي تطبيق وتوسيع نطاقه بسرعة. علاوة على ذلك ، يتكامل Firebase بسلاسة مع كل من تطبيقات الويب والجوال ، مما يجعل من السهل إنشاء تطبيقات عبر الأنظمة الأساسية.
