كيفية إنشاء تطبيق دردشة باستخدام React و Firebase

هل تساءلت يومًا كيف يعمل WhatsApp أو أي تطبيق آخر للمُراسلة؟ أو كيف يُمكن لمُختلف المُستخدمين التواصل بسلاسة وتبادل الرسائل والصور في المُحادثات؟ يمكن أن يكون إنشاء تطبيق دردشة مبسط طريقة رائعة لفهم الوظائف الأساسية لتطبيقات الدردشة.

قد يبدو إنشاء تطبيق دردشة مُهمة شاقة ، إلا أنَّ Firebase تُبسط العملية بأكملها. حيث تُمكِّنك من تمهيد أي تطبيق بسرعة ، مما يُلغي الحاجة إلى خلفية مُخصصة أو إعداد قاعدة بيانات. تحقق من أفضل تطبيقات الدردشة الخاصة والمُشفرة لمستخدمي Linux.

ما المقصود بقاعدة بيانات Firebase السحابية

Firebase عبارة عن منصة للتطوير قائمة على الحوسبة السحابية تُوفر خدمات الخلفية (BaaS) مثل قاعدة البيانات في الوقت الفعلي والمُصادقة والاستضافة ، إذ تعمل كوسيط لربط تطبيقات ومواقع الإنترنت الخاصّة بالمُطوّرين مع الخدمات المختلفة على السحابة من خلال واجهات برمجة التطبيقات (API) وأدوات تطوير البرمجيات (SDK) التي تستخدم لتحقيق التوافق مع الأنظمة المُختلفة.

وهي منصّة تهدف إلى توفير نهج شامل لبناء وتحسين وتطوير مواقع الانترنت وتطبيقات الهاتف ، من خلال العديد من الأدوات التي يحتاجها أي مُطوّر لإنجاز خدمات سيستغرق بناؤها يدوياً زمناً وجهداً كبيرين ، خاصةً لمن ليس لديه الخبرة الكافية.

في صميم خدمات قاعدة البيانات الخاصة بها ، توجد قاعدة بيانات سحابية NoSQL تستخدم نموذج مُستند لتخزين البيانات في الوقت الفعلي.

إعداد مشروع Firebase وعميل React

ملاحظة: يُمكنك التحقق من التعليمات البرمجية لتطبيق الدردشة المُتاح في مستودع GitHub وهي مجانية للاستخدام بموجب ترخيص MIT. تأكد من تهيئة Firebase قبل تشغيل التطبيق.

للبدء ، توجه إلى Firebase وقم بالتسجيل للحصول على حساب. في لوحة معلومات المستخدم ، انقر فوق إنشاء مشروع لإعداد مشروع جديد.

بعد إنشاء مشروعك ، حدد رمز تطوير الويب الموجود في صفحة نظرة عامة على المشروع وانقر فوقه لتسجيل تطبيقك. يُتيح لك التسجيل في Firebase الوصول إلى مواردها واستخدامها لبناء تطبيق الويب React الخاص بك.

قم بتدوين تعليمات دمج Firebase SDK في مشروعك ضمن إضافة Firebase SDK.

بعد ذلك ، أنشئ تطبيق React وثبّت Firebase SDK في تطبيقك. بالإضافة إلى ذلك ، قم باستيراد حزمة react-firebase-hooks التي تُبسط العمل مع Firebase ضمن React.

npm install firebase react-firebase-hooks

تهيئة Firebase في تطبيق React

في دليل src المُخصص ، قم بإنشاء ملف جديد وقم بتسميته ، firebase-config.js. انسخ مُتغيِّرات البيئة من لوحة معلومات مشروع Firebase والصقها في هذا الملف.

import { initializeApp } from “firebase/app”;
import { getFirestore } from ‘@firebase/firestore’;
import { getAuth, GoogleAuthProvider } from “firebase/auth”;

const firebaseConfig = {
 apiKey: “API_KEY”,
 authDomain: “authDomain”,
 projectId: “project ID”,
 storageBucket: “storage Bucket”,
 messagingSenderId: “messanging sender ID”,
 appId: “App ID”
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app)
const provider = new GoogleAuthProvider();

export {db, auth, provider}

باستخدام تكوين مشروع Firebase ، يُمكنك تهيئة وظائف مصادقة Firebase و Firestore و Firebase للاستخدام داخل تطبيقك.

إعداد قاعدة بيانات Firestore

Cloud Firestore هي قاعدة بيانات مرنة وقابلة للتوسع لتطوير الأجهزة المحمولة والويب والخوادم من Firebase و Google Cloud. مثل Firebase Realtime Database ، تقوم بمزامنة بياناتك بين تطبيقات العميل من خلال مُستمعين في الوقت الفعلي وتُقدم دعمًا في وضع عدم الاتصال للهاتف والويب حتى تتمكن من إنشاء تطبيقات سريعة الاستجابة تعمل بغض النظر عن زمن انتقال الشبكة أو اتصال الإنترنت. تُوفر Cloud Firestore أيضًا تكاملاً سلسًا مع منتجات Firebase و Google Cloud الأخرى ، بما في ذلك وظائف السحابة.

ستقوم قاعدة البيانات هذه بتخزين بيانات المستخدم ورسائل الدردشة. توجه إلى صفحة نظرة عامة على مشروعك وانقر على زر إنشاء قاعدة بيانات لإعداد Cloud Firestore.

قُم بتحديد نمط قاعدة البيانات والمكان.

أخيرًا ، قم بتحديث قواعد قاعدة بيانات Firestore للسماح بعمليات القراءة والكتابة من تطبيق React. انقر فوق علامة التبويب “القواعد” وقم بتغيير قاعدة القراءة والكتابة إلى “True”.

بمجرد الانتهاء من إعداد قاعدة البيانات ، يُمكنك إنشاء مجموعة تجريبية — والتي هي قاعدة بيانات NoSQL في Firestore. تتكون المجموعات من المُستندات كسجلات.

لإنشاء مجموعة جديدة ، انقر فوق الزر بدء المجموعة ، وقم بتوفير مُعرِّف المجموعة — اسم الجدول.

دمج مصادقة مستخدم Firebase

تُوفر Firebase حلول المُصادقة والتفويض الجاهزة التي يسهل تنفيذها مثل مُزوِّدي تسجيل الدخول بالحسابات الاجتماعية أو مُزوِّد كلمة مرور البريد الإلكتروني المُخصص.

في صفحة نظرة عامة على مشروعك ، حدد المصادقة من قائمة المُنتجات المعروضة. بعد ذلك ، انقر فوق الزر إعداد طريقة تسجيل الدخول لتهيئة مُزوِّد Google. حدد Google من قائمة المُزوِّدين ، وقم بتمكينها ، واملأ البريد الإلكتروني لدعم المشروع.

إنشاء مُكوِّن تسجيل الدخول

بمجرد الانتهاء من تكوين المُزوِّد على Firebase ، توجه إلى مجلد المشروع الخاص بك وأنشئ مجلدًا جديدًا ، وسمه بـ components ، في دليل /src. داخل مجلد components ، قم بإنشاء ملف جديد: SignIn.js.

في ملف SignIn.js ، أضف الكود أدناه:

import React from ‘react’;
import { signInWithPopup } from “firebase/auth”;
import { auth, provider } from ‘../firebase-config’
 
function SignIn() {
 const signInWithGoogle = () => {
 signInWithPopup(auth,provider)
 };
 return (
 <div>
 <button onClick={signInWithGoogle}>Sign In With Google</button>
 </div>
 )
}

export default SignIn

1. تستورد هذه التعليمات البرمجية المُصادقة وكائنات مُزوِّد Google التي قمت بتهيئتها في ملف تكوين Firebase.
2. ثم تقوم بتعريف وظيفة تسجيل الدخول التي تُنفذ أسلوب SignInWithPopup من Firebase والتي تأخذ مُكوِّنات المصادقة والمُزوِّد كمُعلمات. ستقوم هذه الوظيفة بمصادقة المستخدمين باستخدام عمليات تسجيل الدخول الاجتماعية الخاصة بهم على Google.
3. أخيرًا ، تقوم بإرجاع عنصر div يحتوي على زر والذي عند النقر عليه يستدعي وظيفة SignInWithGoogle.

إنشاء مُكوِّن دردشة

سيضم هذا المكون الميزة الرئيسية لتطبيق الدردشة الذي تُنشئه ، وهي نافذة الدردشة. قم بإنشاء ملف جديد داخل مجلد components ، وقم بتسميته Chat.js.

أضف الكود أدناه في ملف Chat.js:

import React, { useState, useEffect } from ‘react’
import { db, auth } from ‘../firebase-config’
import SendMessage from ‘./SendMessage’
import { collection, query, limit, orderBy, onSnapshot } from “firebase/firestore”;

function Chat() {
 const [messages, setMessages] = useState([])
 const { userID } = auth.currentUser

useEffect(() => {
 const q = query(
 collection(db, “messages”),
 orderBy(“createdAt”),
 limit(50)
 );
 const data = onSnapshot(q, (QuerySnapshot) => {
 let messages = [];
 QuerySnapshot.forEach((doc) => {
 messages.push({ …doc.data(), id: doc.id });
 });
 setMessages(messages) 
 
 });
 return () => data; 
 
 }, []);
 
 return (
 <div>
 <button onClick={() => auth.signOut()}>Sign Out</button>
 {messages && messages.map((message, id, uid, photoURL) => 
 <div 
 key={id} 
 className={`msg ${userID === auth.currentUser.uid ? ‘sent’ : ‘received’}`}>
 <img src={message.photoURL} />
 <p>{message.text}</p>
 </div>
 )} 
 <SendMessage />
 </div>
 )
}
export default Chat

1. تستورد هذه التعليمات البرمجية قاعدة البيانات ، ومُكوِّنات المُصادقة التي تمت تهيئتها في ملف firebase-config.js ، وطرق Firestore المُخصصة التي تُسهل معالجة البيانات المُخزنة.
2. تقوم بتنفيذ طرق collection و query و limit و orderBy ، بالإضافة إلى onSnapshot من Firestore للاستعلام عن البيانات المُخزنة حاليًا والتقاطها في مجموعة رسائل Firestore ، مرتبة حسب وقت إنشائها ، ولا تقرأ سوى أحدث 50 رسالة.
3. يتم تغليف طرق Firestore وتشغيلها داخل خُطّاف useEffect لضمان عرض الرسائل على الفور ، في كل مرة تضغط فيها على زر الإرسال ، دون تحديث نافذة الصفحة. بمجرد قراءة البيانات ، يتم تخزينها في حالة الرسائل.
4. تقوم بعد ذلك بالتحقق من التمييز بين الرسائل المُرسلة والمُستلمة — إذا كان مُعرِّف المستخدم المخزن مع الرسالة يطابق معرف المستخدم للمستخدم الذي قام بتسجيل الدخول ، وبعد ذلك ، تقوم بتعيين اسم الفئة وتطبيق النمط المُناسب للرسالة.
5. أخيرًا ، تعرض الرسائل وزر تسجيل الخروج ومُكوِّن SendMessage. يستدعي الزر SignOut بمُعالج onClick طريقة auth.signOut() التي تُوفرها Firebase.

إنشاء مُكوِّن إرسال رسالة

قم بإنشاء ملف جديد ، ملف SendMessage.js ، وأضف الكود أدناه:

import React, { useState } from ‘react’
import { db, auth } from ‘../firebase-config’
import { collection, addDoc, serverTimestamp} from “firebase/firestore”;

function SendMessage() {
 const [msg, setMsg] = useState(‘’)
 const messagesRef = collection(db, “messages”);
 
 const sendMsg = async (e) => {
 const { uid, photoURL } = auth.currentUser
 
 await addDoc(messagesRef, {
 text: msg,
 createdAt: serverTimestamp(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg(‘’);
 };

return (
 <div> 
 <input placeholder=’Message…’ 
 type=”text” value={msg} 
 onChange={(e) => setMsg(e.target.value)}
 />
 <button onClick={sendMsg}>Send</button>
 </div>
 )
}

export default SendMessage

1. على غرار مُكوِّن Chat.js ، قم باستيراد أساليب Firestore وقاعدة البيانات التي تمت تهيئتها ومُكوِّنات المصادقة.
2. لإرسال الرسائل ، تُنفذ وظيفة SendMessage طريقة addDoc Firestore التي تُنشئ مستندًا جديدًا في قاعدة البيانات وتُخزن البيانات التي تم تمريرها.
3. تأخذ طريقة addDoc مُعلمتين ، كائن البيانات وكائن مرجعي يُشير إلى المجموعة التي تُريد تخزين البيانات. تُحدد طريقة جمع Firestore المجموعة لتخزين البيانات.
4. أخيرًا ، يتم عرض حقل إدخال وزرًا على صفحة الويب للسماح للمُستخدمين بإرسال رسائل إلى قاعدة البيانات.

استيراد المُكوِّنات في ملف App.js

أخيرًا ، في ملف App.js الخاص بك ، قم باستيراد مُكوِّنات تسجيل الدخول والدردشة لعرضها على متصفحك.

في ملف App.js ، احذف الكود القياسي، وأضف الكود أدناه:

import Chat from ‘./components/Chat’;
import SignIn from ‘./components/SignIn’;
import { auth } from ‘./firebase-config.js’
import { useAuthState } from ‘react-firebase-hooks/auth’
function App() {
 const [user] = useAuthState(auth)
 return (
 <>
 {user ? <Chat /> : <SignIn />}
 </>
 );
}
export default App;

تعرض هذه التعليمات البرمجية مُكوِّنات تسجيل الدخول والدردشة بشكل مشروط عن طريق التحقق من حالة مُصادقة المستخدم. يتم إتلاف حالة المصادقة من خلال مُكوِّن مصادقة Firebase بمساعدة خطاف useAuthState من حزمة react-firebase-hooks.

والذي يتحقق مما إذا كان المستخدم قد تمت مصادقته ، ويعرض مُكوِّن الدردشة وإلا فسيتم تقديم مُكوِّن تسجيل الدخول. أخيرًا ، أضف أي أنماط CSS ، وقم بتدوير خادم التطوير لحفظ التغييرات ، وتوجه إلى متصفحك لعرض النتائج النهائية. تحقق من كيفية إنشاء مُشغِل فيديو في React.

وظائف Firebase بدون خادم

تُوفر Firebase مجموعة من الميزات تتجاوز المُصادقة وقاعدة البيانات في الوقت الفعلي. يُمكنك استخدام وظائفها التي لا تحتاج إلى خادم لبدء تشغيل أي تطبيق وتوسيع نطاقها بسرعة. علاوة على ذلك ، تتكامل Firebase بسلاسة مع كل من تطبيقات الويب والهاتف ، مما يجعل من السهل إنشاء تطبيقات مُتعددة المنصات الأساسية. يُمكنك الإطلاع الآن على كيفية إنشاء عناصر السحب والإفلات في React.