شرح طريقة إنشاء تطبيق دردشة بلغة رياكت وفاير بيز (شرح بالصور والكود)

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

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

ما هي قاعدة بيانات فاير بيز “Firebase” السحابية؟

فاير بيز عبارة عن نظام أساسي للتطوير قائم على السحابة يوفر خدمات الخلفية (BaaS) مثل قاعدة البيانات في الوقت الفعلي والمصادقة والاستضافة (SDK) المستخدمة لتحقيق التوافق مع الأنظمة المختلفة.

إنها طريقة رائعة لإنشاء مواقع الويب وتطبيقات الهاتف المحمول مثل”تطبيق دردشة” وتحسينها وتطويرها مع العديد من الأدوات التي يحتاجها مطورو البرامج لتقديم خدمات قد تستغرق الكثير من الوقت والجهد لبنائها يدويًا. نظام أساسي يهدف إلى توفير نهج شامل. ليس لدي خبرة كافية.

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

شرح طريقة إنشاء تطبيق دردشة بلغة رياكت وفاير بيز

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

1- قبل إنشاء تطبيق دردشة، يجب إعداد مشروع فاير بيز وعميل رياكت

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

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

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

لاحظ التعليمات الخاصة بدمج فاير بيز SDK في مشروعك ضمن إضافات فاير بيز SDK.

بعد ذلك، أنشئ تطبيق رياكت وثبّت فاير بيز SDK في تطبيقك.

بالإضافة إلى ذلك، قم باستيراد حزمة react-firebase-hooks، مما يبسط العمل مع فاير بيز داخل رياكت.

npm install firebase react-firebase-hooks

2- هيئ فاير بيز في تطبيق رياكت

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

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}

يتيح لك تكوين مشروع فاير بيز تكوين ميزات مصادقة فاير بيز و Firestore وفاير بيز للاستخدام داخل تطبيقك.

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

Cloud Firestore هي قاعدة بيانات مرنة وقابلة للتطوير للجوّال والويب وتطوير الخادم من فاير بيز وجوجل كلاود. على غرار قاعدة بيانات فاير بيز Realtime، فهو يقوم بمزامنة البيانات بين تطبيقات العميل عبر مستمعين في الوقت الفعلي ويوفر دعمًا في وضع عدم الاتصال للهاتف والويب.

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

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

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

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

بعد إعداد قاعدة البيانات الخاصة بك، يمكنك إنشاء مجموعة اختبار، وهي قاعدة بيانات NoSQL لـ Firestore. حيث تتكون المجموعة من المستندات كسجلات.

لإنشاء مجموعة جديدة، انقر فوق الزر بدء المجموعة وحدد معرف المجموعة (اسم الجدول).

4- عمل دمج مصادقة مستخدم فاير بيز

يقدم فاير بيز حلول مصادقة وتفويض جاهزة للتنفيذ، بما في ذلك موفرو تسجيل الدخول الاجتماعي وموفرو كلمات مرور البريد الإلكتروني المخصص.

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

5- قم بإنشاء مكون تسجيل الدخول

بعد تكوين المزود في فاير بيز، انتقل إلى مجلد المشروع وأنشئ مجلدًا جديدًا باسم 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

• يستورد هذا الرمز المصادقة وكائنات مزود جوجل التي قمنا بتكوينها في ملف تهيئة فاير بيز.
• ثم بعد ذلك، حدد وظيفة تسجيل الدخول التي تنفذ أسلوب SignInWithPopup  في فاير بيز والتي تأخذ الموفر ومكون المصادقة كمعلمات. حيث تقوم هذه الوظيفة بمصادقة المستخدم باستخدام تسجيل الدخول الاجتماعي إلى جوجل.
• أخيرًا، يقوم بإرجاع عنصر div يحتوي على زر يستدعي وظيفة SignInWithGoogle عند النقر فوقه.

أفضل 7 مستودعات GitHub لتعلم لغة بايثون بسهولة!

6- الآن قم بإنشاء مكون دردشة

يضم هذا المكون نافذة الدردشة، وهي الميزة الرئيسية لتطبيق الدردشة الذي نقوم ببنائه. قم بإنشاء ملف جديد داخل مجلد 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

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

بايثون .. تعرف على كل شيء عن لغة البرمجة Python ومزاياها .. ولماذا عليك تعلمها؟

7- قم بإنشاء مكون إرسال رسالة

أنشئ ملف جديد واسمه 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

• على غرار Chat.js قم باستيراد أساليب Firestore وقاعدة البيانات المكونة ومكونات المصادقة بالإضافة إلى مكونات js.
• لإرسال الرسالة، تطبق وظيفة SendMessage طريقة addDoc الخاصة بـ Firestore. سيؤدي ذلك إلى إنشاء مستند جديد في قاعدة البيانات وتخزين البيانات التي تم تمريرها.
• كما تأخذ طريقة addDoc معلمتين، كائن بيانات وكائن مرجعي يشير إلى المجموعة التي تحتوي على البيانات. تحدد الطريقة التي يجمع بها Firestore المجموعات التي يخزن فيها البيانات.
• أخيرًا، ستعرض صفحة الويب حقول الإدخال والأزرار التي تسمح للمستخدم بإرسال الرسائل إلى قاعدة البيانات.

أفضل 7 مواقع لإنشاء مشروع ريادي خاص بك بدون الحاجة لتعلم البرمجة

8- أخيراً، استيراد ملف 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;

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

للتحقق مما إذا كان المستخدم قد تمت مصادقته ويعيد مكون الدردشة. خلاف ذلك، سيتم عرض مكون تسجيل الدخول.

أخيرًا، أضف أنماط CSS الخاصة بك، وقم بتدوير خادم التطوير، واحفظ التغييرات، وتوجه إلى متصفحك لرؤية النتيجة النهائية.

مع فاير بيز، أصبح إنشاء تطبيق دردشة أمر سهل

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

بالإضافة إلى ذلك، يتكامل فاير بيز بسلاسة مع كل من تطبيقات الويب والجوال، مما يسهل إنشاء تطبيقات عبر الأنظمة الأساسية.