Firebase دورة في React

نظرة عامة على الدورة

• دورة شاملة حول استخدام Firebase مع React
• المواضيع التي تم تغطيتها تشمل: إنشاء نظام مصادقة، تطبيقات CRUD باستخدام Firestore، تحميل الصور/الملفات إلى التخزين، تنفيذ الاستعلامات واستضافة التطبيقات باستخدام Firebase
• الفيديو مقسم إلى فصول لتسهيل التنقل
• الكود متاح في الوصف

إعداد Firebase

1. الإعداد الأولي

   • إنشاء مشروع في VS Code
   • إنشاء تطبيق React أساسي باستخدام create-react-app
   • فتح كونسول Firebase (الرابط) وتسجيل الدخول
   • إضافة مشروع في كونسول Firebase
   • تفعيل Google Analytics (اختياري)
   • متابعة واختيار الحساب الافتراضي لـ Firebase
   • إنشاء مشروع والانتظار حتى يكون جاهزًا

2. تكوين Firebase

   • إنشاء ملف تكوين Firebase وإضافة شريحة تكوين SDK
   • تهيئة تطبيق Firebase باستخدام initializeApp من firebase/app
   • تصدير auth للمصادقة باستخدام getAuth

المصادقة باستخدام Firebase

1. مصادقة البريد الإلكتروني وكلمة المرور

   • تفعيل مصادقة البريد الإلكتروني/كلمة المرور في كونسول Firebase
   • استيراد getAuth وcreateUserWithEmailAndPassword من firebase/auth
   • إنشاء واجهة مصادقة (حقول إدخال للبريد الإلكتروني/كلمة المرور وزر تسجيل الدخول)
   • التعامل مع حالة المصادقة باستخدام React state (useState)
   • مثال على إنشاء مستخدم باستخدام البريد الإلكتروني وكلمة المرور

2. مصادقة جوجل

   • تفعيل مصادقة جوجل
   • استيراد GoogleAuthProvider وsignInWithPopup من firebase/auth
   • تكوين مزود جوجل وطريقة تسجيل الدخول
   • مثال على تسجيل الدخول باستخدام جوجل

CRUD مع Firestore

1. إعداد Firestore

   • إنشاء قاعدة بيانات Firestore في كونسول Firebase
   • وضع القواعد لقاعدة بيانات Firestore (في البداية يتم ضبطها على true للتبسيط)
   • إنشاء مجموعة (مثل أفلام) في Firestore

2. قراءة البيانات من Firestore

   • استيراد getFirestore وgetDocs من firebase/firestore
   • تكوين Firestore في ملف تكوين Firebase
   • جلب البيانات باستخدام getDocs وعرضها في المكونات
   • استخدام useEffect لجلب البيانات عند عرض المكون

3. إنشاء البيانات في Firestore

   • إضافة نموذج وحقول إدخال للبيانات الجديدة
   • إنشاء وظيفة لإضافة البيانات باستخدام addDoc من Firestore
   • استخدام state لإدارة بيانات إدخال النموذج

4. تحديث البيانات في Firestore

   • إضافة حقول إدخال لتحديث البيانات في المكونات
   • إنشاء وظيفة لتحديث البيانات باستخدام updateDoc من Firestore
   • التحديث بناءً على معرّف المستند والبيانات الجديدة من النموذج

5. حذف البيانات في Firestore

   • إضافة زر حذف لكل عنصر بيانات
   • إنشاء وظيفة لحذف البيانات باستخدام deleteDoc من Firestore
   • الحذف بناءً على معرّف المستند

قواعد الأمان في Firestore

• عرض قواعد مثال: السماح بالقراءة للجميع، السماح بالكتابة (إنشاء، تحديث، حذف) فقط للمستخدمين المصادق عليهم
• إضافة معرّف المستخدم إلى مستند Firestore ومقارنته بمعرّف المستخدم من Firebase auth لعمليات الكتابة

تخزين Firebase

1. إعداد التخزين

   • إنشاء حاوية التخزين في كونسول Firebase
   • تحديث قواعد التخزين للوصول للقراءة/الكتابة
   • تكوين التخزين في ملف تكوين Firebase باستخدام getStorage

2. رفع الملفات

   • إنشاء إدخال ملف وزر رفع في الواجهة
   • التعامل مع اختيار الملف باستخدام React state (useState)
   • رفع الملف إلى مسار التخزين المحدد باستخدام uploadBytes

الاستضافة باستخدام Firebase

• خطوات نشر تطبيق React إلى استضافة Firebase
• تهيئة استضافة Firebase باستخدام Firebase init
• نشر التطبيق باستخدام Firebase deploy
• حل مشكلة قصيرة في حالة الخطأ مع خطوة البناء المفقودة

متفرقات

• رسالة رعاية عن Brilliant.org
• تشجيع على الإعجاب، والاشتراك وفحص الكود المتاح

الخاتمة

• مراجعة للقدرات المغطاة لـ Firebase وتشجيع على استكشاف المزيد من الميزات.

الروابط والموارد:

• كونسول Firebase: الرابط
• Brilliant: الرابط
• وثائق Firebase: الرابط