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

باستخدام مزيج من React و Firebase ، يمكنك إنتاج تطبيقات فائقة الاستجابة. إذا كنت معتادًا على React بالفعل ، فإن تعلم كيفية دمج Firebase يعد خطوة تالية ممتازة.

لفهم أساسيات معالجة بيانات Firebase ، يجب أن تتعلم كيفية إقران قاعدة بيانات Firestore الخاصة به مع React لإنشاء تطبيق CRUD. باستخدام هذه المعرفة ، يمكنك البدء في إنشاء تطبيقات مكدسة كاملة قابلة للتطوير مع القليل من التعليمات البرمجية الخلفية أو معدومة.

قم بتوصيل تطبيق React الخاص بك بـ Firebase Firestore

إذا لم تكن قد قمت بذلك بالفعل ، فانتقل إلى وحدة تحكم Firebase و قم بتوصيل Firestore بمشروع React الخاص بك.

العملية سهلة إذا كنت بالفعل أنشأ تطبيق React الخاص بك.

بعد ذلك ، اصنع ملف firebase_setup الدليل داخل مشروعك src مجلد. إنشاء firebase.js ملف داخل هذا المجلد. الصق رمز التكوين الذي ستحصل عليه أثناء إنشاء مشروع Firebase داخل الملف الجديد:

يستورد {initializeApp} من "Firebase / التطبيق" ؛
يستورد {getFirestore} من "@ firebase / firestore"





instagram viewer



مقدار ثابت firebaseConfig = {
مفتاح API: عملية.envمفتاح REACT_APP_api,
نطاق التأليف: عملية.env.REACT_APP_authDomain,
معرف المشروع: عملية.env.REACT_APP_projectId,
التخزين: عملية.env.REACT_APP_storageBucket,
المراسلة: عملية.env.REACT_APP_messagingSenderId,
معرف التطبيق: عملية.env.REACT_APP_appId,
معرف القياس: عملية.env.REACT_APP_measurementId
};
مقدار ثابت app = initializeApp (firebaseConfig) ؛
يصدّرمقدار ثابت firestore = getFirestore (تطبيق)

ال فايرستور متغير يحمل بيئة Firebase Firestore الخاصة بك. ستستخدم هذا عبر التطبيق أثناء إجراء طلبات واجهة برمجة التطبيقات.

على الرغم من أن هذا الرمز يستخدم طريقة .env لإخفاء معلومات التكوين ، إلا أن هناك أفضل طرق تخزين الأسرار في React.

الآن ، قم بتثبيت فايربيس و uuid المكتبات في تطبيق React الخاص بك. بينما يعد uuid اختياريًا ، يمكنك استخدامه كمعرف فريد لكل مستند يتم نشره في قاعدة بيانات Firestore.

npm ثَبَّتَ فايربيس uuid

إليك عرض توضيحي لما أنت على وشك إنشائه باستخدام React و Firestore:

اكتب البيانات إلى قاعدة بيانات Firestore

يمكنك استخدام ال setDoc أو addDoc طريقة لإضافة المستندات إلى Firebase. ال addDoc يتميز الأسلوب بأنه يوجه Firebase لإنشاء معرف فريد لكل سجل.

للبدء ، قم باستيراد التبعيات التالية إلى App.js:

يستورد './App.css';
يستورد {useEffect، useState} من 'تتفاعل'؛
يستورد {addDoc، collection، setDoc، deleteDoc، doc، query، onSnapshot} من "firebase / firestore" ؛
يستورد {firestore} من "./firebase_setup/firebase" ؛
يستورد {v4 مثل uuidv4} من "uuid" ؛

قبل المتابعة ، انظر إلى بنية DOM والحالات التي يستخدمها هذا البرنامج التعليمي:

وظيفةبرنامج() {
مقدار ثابت [info، setInfo] = useState ([])
مقدار ثابت [isUpdate، setisUpdate] = useState (خطأ شنيع)
 const [docId، setdocId] = useState ("")
 const [التفاصيل ، setDetail] = useState ("")
مقدار ثابت [معرفات ، setIds] = useState ([])
يعود (
<div className ="برنامج">
<استمارة>
<نوع الإدخال = "نص" القيمة = {التفاصيل} onChange = {handledatachange} />
 {
 تحديث؟ (
<>
<button onClick = نوع {handlesubmitchange} = "يُقدِّم">تحديث</button>
<زر onClick = {() => {setisUpdate (خطأ) ، تعيين التفاصيل ("")}}>
 X
</button>
</>
 ): (<button onClick = {submithandler} type ="يُقدِّم">يحفظ</button>)
 }
</form>


{info.map ((data، index) =>
<مفتاح div = {ids [index]} className ='حاوية البيانات' معرف ='حاوية البيانات'>
<ص className ='بيانات' معرف ='بيانات' معرّف البيانات = {معرفات [فهرس]} مفتاح = {معرفات [فهرس]}>{بيانات}</ ص>
<زر className ='زر detele' معرف ='زر الحذف' onClick = {handledelete}>
يمسح
</button>


<زر className ='زر التحديث' معرف ='زر التحديث' onClick = {handleupdate}>
 يحرر
</button>
</div>
 )}
</div>
 );
}
يصدّرتقصير برنامج؛

بعد ذلك ، قم بإنشاء معالج إرسال لكتابة البيانات في قاعدة بيانات Firestore. هذا عند تقديم حدث. لذلك ستستخدمه في زر الإرسال.

بالإضافة إلى ذلك ، قم بإنشاء معالج التغيير. يستمع هذا الحدث إلى التغييرات في حقل النموذج ويمرر الإدخال إلى مصفوفة (ملف التفاصيل مجموعة في هذه الحالة). هذا يذهب إلى قاعدة البيانات.

مقدار ثابت handledatachange = (e) => {
تعيين التفاصيل(ه.هدف.قيمة)
 };
مقدار ثابت معالج الإرسال = (هـ) => {
ه.منع افتراضي()
 const ref = collection (firestore، "test_data")


يترك البيانات = {
 uuid: uuidv4 () ،
 testData: التفاصيل
 }


يحاول {
 addDoc (المرجع ، البيانات)
 } يمسك(يخطئ) {
وحدة التحكم.log (يخطئ)
 }
تعيين التفاصيل ("")
 }

بينما يقوم Firebase تلقائيًا بإنشاء معرفات المستندات (ما لم تمنع ذلك) ، يعمل حقل UUID أيضًا كمعرف فريد لكل مستند.

قراءة البيانات من قاعدة بيانات Firestore

قم بإحضار البيانات من قاعدة بيانات Firestore داخل ملف useEffect ربط باستخدام طريقة الاستعلام Firestore:

 useEffect (() => {
مقدار ثابت getData = غير متزامن () => {
مقدار ثابت البيانات = انتظر الاستعلام (مجموعة (فيريستور ، "test_data")) ؛
onSnapshot (البيانات ، (querySnapshot) => {
مقدار ثابت databaseInfo = [] ،
مقدار ثابت dataIds = []


الاستعلاملكل((وثيقة) => {
قاعدة البيانات.يدفع(وثيقة.بيانات().testData);
بيانات.يدفع(وثيقة.بطاقة تعريف)
 });


setIds (بيانات)
 setInfo (databaseInfo)
 });
 }
احصل على البيانات()
 }, [])

يستخدم الكود أعلاه استعلام Firebase للحصول على لقطة من البيانات المرسلة إلى Firestore باستخدام ملف على لقطة وظيفة.

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

ال setInfo تستحوذ الدولة على البيانات الموجودة في كل مستند. ستقوم بالتخطيط من خلال هذا (ملف معلومات مجموعة) أثناء التقديم إلى DOM.

ال تعيينات الدولة تتعقب جميع معرفات المستندات (التي تم تمريرها كـ المعرفات مجموعة مصفوفة). يمكنك استخدام كل معرّف لتشغيل استعلامات الحذف والتحديث في كل مستند. يمكنك بعد ذلك تمرير معرّف كل مستند كسمة DOM أثناء التعيين عبر ملف معلومات مجموعة مصفوفة.

فيما يلي استخدام الحالة داخل DOM (كما هو موضح في مقتطف الشفرة السابق):

تحديث البيانات الموجودة في Firestore

استخدم ال setDoc طريقة لتحديث مستند أو حقل في مستند.

حدد معالجات لإجراء التحديث. يتعامل المرء مع زر الإرسال للبيانات المحررة (مقابض تقديم التغيير) ، بينما الآخر للزر الذي يعيد كتابة البيانات في حقل الإدخال للتحرير (معالجة):

مقدار ثابت handleupdate = (هـ) => {
 تحديث setis (حقيقي)
تعيين التفاصيل(ه.هدف.عقدة الأم.أطفال[0].محتوى النص)
setdocId(ه.هدف.عقدة الأم.أطفال[0].getAttribute(&مثل;معرف البيانات&مثل;))
};
مقدار ثابت handlesubmitchange = غير متزامن (هـ) => {
ه.منع افتراضي()
 const docRef = doc (firestore ، 'test_data'، docId)؛


مقدار ثابت updatedata = انتظر {
 testData: التفاصيل
 };


انتظرsetDoc(docRef, تحديث البيانات, { دمج:حقيقي })
 .then (console.log ("تم تغيير البيانات بنجاح"))
تحديث setis (خطأ شنيع)
 تعيين التفاصيل ("") 
}

كما هو موضح في مقتطف الشفرة السابق ، إليك عرض DOM لإجراءات الإنشاء والتحديث:

ال معالجة تستهدف الدالة كل معرف مستند في DOM باستخدام مسار العقدة الخاص بها. يستخدم هذا للاستعلام عن كل مستند من قاعدة البيانات لإجراء التغييرات. يستخدم الزر "تحرير" هذه الوظيفة.

لذا تحديث (متتبع بواسطة تحديث الدولة) حقيقي عندما ينقر المستخدم على الزر "تعديل". يُظهر هذا الإجراء زر التحديث ، والذي يرسل البيانات التي تم تحريرها عندما ينقر المستخدم عليها. اضافية X يغلق الزر إجراء التحرير عند النقر عليه - عن طريق الإعداد تحديث ل خطأ شنيع.

لو تحديث يكون خطأ شنيع، يحتفظ DOM بزر حفظ الأولي بدلاً من ذلك.

حذف البيانات من Firestore

يمكنك حذف البيانات الموجودة من Firestore باستخدام امتداد deleteDoc طريقة. كما فعلت في إجراء التحديث ، استرد كل مستند باستخدام معرفه الفريد من خلال استهداف سمة DOM الخاصة به باستخدام مسار العقدة:

مقدار ثابت معالجة الحذف = غير متزامن (هـ) => {
 const docRef = doc (firestore ، 'test_data'، e.target.parentNode.children [0] .getAttribute ("معرف البيانات"));
انتظر deleteDoc (docRef)
 ثم (() => {
وحدة التحكم.سجل(`$ {e.target.parentNode.children [0].محتوى النص} تم حذفه بنجاح)
 })
 .يمسك(خطأ => {
وحدة التحكم.log (خطأ) ؛
 })
}

قم بتمرير الوظيفة المذكورة أعلاه إلى زر الحذف. يزيل البيانات من قاعدة البيانات و DOM عندما ينقر المستخدم عليها.

إقران Firebase بأفضل إطار أمامي

يساعدك Firebase على كتابة رمز أقل أثناء الاستعلام عن البيانات مباشرة من جانب العميل. إلى جانب React ، فهو يدعم أطر عمل JavaScript أخرى ، بما في ذلك Angular.js و Vue.js وغيرها الكثير.

الآن بعد أن رأيت كيف تعمل مع React ، قد ترغب أيضًا في تعلم إقرانها بـ Angular.js.