كيفية تخزين البيانات وتحديثها وحذفها واستردادها من قاعدة بيانات Firebase باستخدام Angular

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

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

كيفية إنشاء وإضافة بيانات إلى قاعدة بيانات Firebase

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

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

1. من صفحة Firebase الرئيسية، تحديد اذهب إلى وحدة التحكم في الزاوية العلوية اليمنى من الموقع.
2. ضمن "مشاريع Firebase الخاصة بك" ، حدد أضف مشروع.
3. اتبع التعليمات لإنشاء مشروع جديد.
instagram viewer
4. بمجرد الانتهاء ، سيفتح المشروع. على الجانب الأيسر من الشاشة ، توجد لوحة تسرد الميزات التي يوفرها Firebase. تحوم فوق الرموز حتى ترى قاعدة بيانات Firestore، واختره.
5. يختار إنشاء قاعدة بيانات، واتبع المطالبات لإنشاء قاعدة بيانات.
6. عند تحديد قواعد الأمان ، حدد ابدأ في وضع الاختبار. يمكن تغيير هذا لاحقًا للتأكد من أن البيانات أكثر أمانًا. يمكنك قراءة المزيد حول قواعد أمان Firestore باتباع ملف وثائق Firebase.
7. بمجرد الانتهاء ، ستفتح قاعدة البيانات. تستخدم بنية قاعدة البيانات المجموعات ، والتي هي أساسًا نفس مفهوم جداول قاعدة البيانات. على سبيل المثال ، إذا كنت بحاجة إلى جدولين ، أحدهما لتخزين معلومات الحساب والآخر لتخزين معلومات المستخدم ، فيمكنك إنشاء مجموعتين باسم الحساب والمستخدم.
8. يختار بدء المجموعة وأضف معرف مجموعة يسمى "المستخدم".
9. أضف السجل الأول بمعلومات عن مستخدم واحد. انقر فوق إضافة حقل لإضافة ثلاثة حقول جديدة: FirstName (سلسلة) ، و lastName (سلسلة) ، و vipMember (منطقي). يمكن إنشاء معرف المستند تلقائيًا.
10. انقر يحفظ.
11. لإضافة المزيد من السجلات إلى مجموعة "المستخدم" ، انقر فوق أضف الوثيقة (إضافة وثيقة تعادل إضافة سجل جديد أو مستخدم). أضف أربعة مستخدمين آخرين بنفس الحقول الثلاثة.

تم الآن إعداد قاعدة البيانات ببعض بيانات الاختبار.

كيفية دمج Firebase في تطبيق Angular الخاص بك

للوصول إلى هذه البيانات في تطبيق Angular المحلي لديك ، قم أولاً بتهيئة بعض إعدادات التطبيق للاتصال بقاعدة بيانات Firebase:

1. في Firebase ، انتقل إلى اللوحة اليمنى وانقر فوق ملخص المشروع.
2. حدد ملف الويب زر (يشار إليه بأقواس زاوية).
3. قم بتسجيل التطبيق المحلي الخاص بك عن طريق إضافة اسم التطبيق.
4. ثبّت Firebase في تطبيق Angular المحلي.

   npm أنا Firebase
   

5. سيعرض Firebase بعد ذلك بعض تفاصيل التكوين. احفظ هذه التفاصيل وانقر تابع إلى وحدة التحكم.
6. استنادًا إلى التفاصيل الواردة في الخطوة السابقة ، انسخ الكود التالي إلى environment.prod.ts و environment.ts في تطبيق Angular.

   بيئة التصدير المستمر = {
    الإنتاج: صحيح ،
    firebaseConfig: {
    apiKey: "your-api-key"،
    authDomain: "your-auth-domain" ،
    معرّف المشروع: "معرّف مشروعك" ،
    StorageBucket: "your-storage-buckey"،
    messagingSenderId: "معرف المرسل الخاص بك" ،
    معرف التطبيق: "your-api-id"،
    معرف القياس: "معرّف القياس الخاص بك"
    }
   };
   

7. AngularFirestore من @ الزاوي / النار / فيريستور لتكوين Firebase في Angular. لاحظ أن AngularFirestore غير متوافق مع Angular الإصدار 9 وما فوق. في تطبيق Angular المحلي ، قم بتشغيل:

   npm أنا @ الزاوي / النار
   

8. أضف وحدات Firestore والبيئة إلى قسم الواردات في app.module.ts.

   استيراد {AngularFireModule} من "@ angular / fire" ؛
   استيراد {AngularFirestoreModule} من "@ angular / fire / firestore" ؛
   استيراد {بيئة} من "../environment/environment" ؛
   

9. يجب أيضًا تضمين وحدات Firestore النمطية في مصفوفة الواردات في app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig) ،
   AngularFirestoreModule ،

كيفية استرداد البيانات من Firebase باستخدام خدمة

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

1. قم بإنشاء ملف يسمى service.ts في ملف src / التطبيق / الخدمات مجلد.
2. أضف الوحدة النمطية AngularFirestore إلى قسم الواردات ، وقم بتضمينها في المنشئ.

   استيراد {Injectable} من "@ angular / core" ؛
   استيراد {AngularFirestore} من "@ angular / fire / firestore" ؛
   @ حقن ({
    المقدمة في: "الجذر"
   })
   خدمة فئة التصدير {
    مُنشئ (ديسيبل خاص: AngularFirestore) {}
   }
   

3. أضف وظيفة تُرجع وعدًا يحتوي على قائمة بجميع المستخدمين. "this.db.collection ("المستخدم")"يشير إلى مجموعة" المستخدم "في قاعدة البيانات.

   getAllUsers () {
    عودة الوعد الجديد((حل) => {
    this.db.collection ('User'). valueChanges ({idField: 'id'}). subscribe (users => delete (users))؛
    })
   }
   

4. لاستخدام هذه الوظيفة في ملف TypeScript آخر ، قم باستيراد الخدمة الجديدة وإضافتها إلى المنشئ.

   استيراد {Service} من 'src / app / services / service
   مُنشئ (خدمة خاصة: خدمة) {}
   

5. احصل على قائمة بجميع المستخدمين الذين يستخدمون الوظيفة التي تم إنشاؤها في ملف الخدمات.

   getUsers غير متزامن () {
    this.allUsers = wait this.service.getAllUsers () ،
    console.log (this.allUsers) ؛
   }
   

كيفية إضافة سجل جديد إلى قاعدة بيانات Firebase

قم بإضافة سجل جديد لمستخدم إلى قاعدة بيانات Firebase.

1. في services.ts ، أضف وظيفة جديدة لإنشاء سجل جديد. تأخذ هذه الوظيفة معرف مستخدم جديد وجميع التفاصيل الخاصة بهم. يستخدم وظيفة تعيين Firestore لإرسال هذه المعلومات إلى Firebase وإنشاء سجل جديد.

   addNewUser (_newId: any، _fName: string، _lName: string، _vip: boolean) {
    this.db.collection ("المستخدم"). doc (_newId) .set ({firstName: _fName، lastName: _lName، vipMember: _vip})؛
   }

2. قم باستدعاء الوظيفة addNewUser () في ملف TypeScript آخر. لا تنسَ استيراد الخدمة وإدراجها في المُنشئ ، كما هو موضح سابقًا. لا تتردد في استخدام مولد معرف عشوائي لإنشاء معرف جديد للمستخدم.

   this.service.addNewUser ("62289836"، "Jane"، "Doe"، صحيح)؛
   

كيفية تحديث البيانات في قاعدة بيانات Firebase

Firebase لديه الكثير من الوظائف التي اجعلها واحدة من أفضل الأدوات المتاحة. لتحديث حقول معينة في سجل معين ، استخدم وظيفة تحديث Firestore.

1. في ملف service.ts ، قم بإنشاء دالة تسمى updateUserFirstName (). ستعمل هذه الوظيفة على تحديث الاسم الأول لسجل المستخدم المختار. تأخذ الوظيفة معرّف السجل الذي يحتاج إلى تحديث ، والقيمة الجديدة للاسم الأول للمستخدم.

   updateUserFirstName (_id: any، _firstName: string) {
    this.db.doc (`User / $ {_ id}`) .update ({firstName: _firstName}) ؛
   }

2. لتحديث عدة حقول لنفس السجل ، ما عليك سوى توسيع الحقول التي يتم إدخالها داخل وظيفة تحديث Firestore. بدلاً من firstName فقط ، أضف lastName لتحديث ذلك بقيمة جديدة أيضًا.

   updateUserFullName (_id: any، _firstName: string، _lastName: string) {
    this.db.doc (`User / $ {_ id}`) .update ({firstName: _firstName، lastName: _lastName}) ؛
   }

3. يمكن استخدام أي من الوظائف المذكورة أعلاه في ملفات TypeScript أخرى.

   this.service.updateUserFirstName ("vLBnSegFl1pD7XQ42TBv"، "Kay") ؛
   this.service.updateUserFullName ("vLBnSegFl1pD7XQ42TBv"، "Kay"، "Jones") ؛

كيفية حذف سجل من قاعدة بيانات Firebase

لحذف سجل ، استخدم وظيفة الحذف في Firestore.

1. في ملف service.ts ، قم بإنشاء دالة تسمى deleteUser (). تأخذ هذه الوظيفة معرّف السجل الذي يجب حذفه.

   deleteUser (_id: أي) {
    this.db.doc (`User / $ {_ id}`) .delete ()؛
    }
   

2. يمكن بعد ذلك استخدام الوظيفة المذكورة أعلاه في ملفات TypeScript أخرى.

   this.service.deleteUser ("vLBnSegFl1pD7XQ42TBv") ؛

استرجع بيانات Firebase باستخدام الاستعلامات والفلاتر

يمكن لعامل التصفية "حيث" تصفية النتائج التي يتم إرجاعها بناءً على حالة معينة.

1. في services.ts ، أنشئ وظيفة تجذب جميع مستخدمي VIP (هذا إذا كان الحقل vipMember مضبوطًا على true). يشار إلى ذلك بجزء "ref.where ('vipMember'، '=='، true)" من استدعاء Firebase أدناه.

   getAllVipMembers () {
    عودة الوعد الجديد((حل) => {
    this.db.collection ('User'، ref => ref.where ('vipMember'، '=='، true)). valueChanges (). subscribe (users => delete (users))
    })
    }

2. استخدم هذه الوظيفة في ملف TypseScript آخر.

   getAllVipMembers غير متزامن () {
    this.vipUsers = wait this.service.getAllVipMembers () ،
    console.log (this.vipUsers) ؛
    }

3. يمكن تعديل الاستعلام لإضافة عمليات أخرى مثل Order By أو Start At أو Limit. قم بتعديل وظيفة getAllVipMembers () في services.ts للترتيب حسب الاسم الأخير. قد تتطلب عملية "ترتيب حسب" إنشاء فهرس في Firebase. إذا كانت هذه هي الحالة ، فانقر فوق الارتباط الموجود في رسالة الخطأ في وحدة التحكم.

   getAllVipMembers () {
    عودة الوعد الجديد((حل) => {
    this.db.collection ('User'، ref => ref.where ('vipMember'، '=='، true) .orderBy ('lastName')). valueChanges (). subscribe (users => delete (users) )
    })
    }

4. قم بتعديل الاستعلام لإرجاع السجلات الثلاثة الأولى فقط. يمكن استخدام عمليتي Start At و Limit لهذا الغرض. هذا مفيد إذا كنت بحاجة إلى تنفيذ الترحيل ، وهو عندما يتم عرض عدد معين من السجلات في كل صفحة.

   getAllVipMembers () {
    عودة الوعد الجديد((حل) => {
    this.db.collection ('User'، ref => ref.where ('vipMember'، '=='، true) .orderBy ('lastName'). startAt (0) .limit (3)). valueChanges () .subscribe (المستخدمون => حل (المستخدمون))
    })
    }

أضف المزيد من البيانات إلى Firebase والمزيد من الطلبات في تطبيق Angular

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

يمكنك أيضًا معرفة المزيد حول الخدمات الأخرى التي يوفرها Firebase. يعد Firebase أحد الأنظمة الأساسية العديدة التي يمكنك دمجها مع Angular ، وبغض النظر عما إذا كنت مبتدئًا أو متقدمًا ، فهناك دائمًا الكثير لتتعلمه.

أفضل 8 دورات زاوية للمبتدئين والمستخدمين المتقدمين

اقرأ التالي

عن المؤلف