Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Angular
Code

إنشاء تطبيق تدويني باستخدام Angular و MongoDB : لحذف منشور

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Edit Post

Arabic (العربية/عربي) translation by Rachid Sakara (you can also view the original English article)

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

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

لتبدأ

دعونا نبدأ بنسخ شفرة المصدر (source code) لأخر جزء من سلسلة البرنامج التعليمية.

إذهب إلى دليل المشروع الخاص بك ثم قم بتثبيت جميع الملحقات الضرورية .

بمجرد تثبيت الملحقات (dependencies) ، قم بإعادة تشغيل تطبيق العميل والخادم .

توجه بمتصفحك إلى هذا العنوان http://localhost:4200 وسيكون لديك التطبيق شغال.

إضافة الموافقة على الحذف

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

دعونا نبدأ مع إضافة model نافدة التأكيد المنبثقة عند نقر المستخدم على زر الحذف. قم بإضافة التعليمات البرمجية لل model المنبثق التالي إلى ملف show-post.component.html .

قم بالتعديل على رمز الحذف ليشمل خاصية data-target كما هي ظاهرة :

قم بحفظ التغييرات أعلاه وأعد تشغيل ال client server. سجيل الدخول إلى التطبيق وانقر على أيقونة الحذف المقابلة لأي منشور، وسينبثق لك modal نافذة التأكيد .

Angular Blog App - Delete Confirmation Pop Up

إنشاء API لحذف منشور مدونة

دعونا نقوم بإنشاء مسار REST API  لحذف منشور مدونة . في ملف server/app.js ، أنشئ مسار REST API لتولي أمر حذف منشور مدونة إنطلاقا من id الخاص بها . إليك كيف سيبدو مسار REST API .

ابدأ من خلال الاتصال بقاعدة البيانات MongoDB باستخدام عميل Mongoose.

عليك الاستفادة من طريقة findByIdAndRemove للعثور على منشور مدونة وحذفه  باستخدام id . حالما يتم حدفه بنجاح ، ستعيد status إلى إستجابة . إليك كيف سيبدو مسار REST API :

المنادات على API الحدف

عندما ينقر المستخدم على رمز الحذف، يجب عليك الاحتفاظ بتفاصيل المنشور داخل متغير. إذا تابع المستخدم خيارالحذف بعد رسالة التأكيد ، سيتتوجب عليك المنادات على REST API الخاص بالحذف.

إضافة طريقة تسمى setDelete  إلى حدث النقر على زر الحذف show-post.component.html . إليك كيف سيبدو:

داخل ملف show-post.component.ts ، قم بتحديد متغير يسمى post_to_delete .

قم بتحديد طريقة تسمى setDelete  داخل ملف show-post.component.ts للحفاظ على إمكانية حذف تفاصيل المنشور . 

عندما ينقر المستخدم على زر الإلغاء للنافذة المنبثقة . سيتوجب عليك النداء على الطريقة المسمات ب  unsetDelete لإعادة قيمة post_to_delete إلى null . إليك كيف سيبدو الأمر :

إليك كيف سيبدو كود HTML  الخاص بزر Cancel لملف show-post.component.html :

الأن دعنا نقوم بتحديد طريقة الخذمة (service method) المسمات deletePost داخل ملف show-post.service.ts . إليك كيف تبدو :

للمنادات على الطريقة الخاصة بالخذمة من ShowPostComponent ، قم بتحديد طريقة تسمى deletePost التي ستصف لنا طريقة deletePost من ShowPostService . إليك كيف ستبدو طريقة deletePost على ShowPostComponent .

حالما يحذف المنشور ، سيكون عليك عمل refresh لقائمة المنشورات ، وبالتالي تحتاج إلى عمل نداء لطريقة getAllPost . ستحتاج إيضا إلى إغلاق النافذة المنبتقة حالما تنتهي عملية الحذف بنجاح . 

أولا ، قم بعمل import لمرجع ل ViewChild و ElementRef في ملف post.component.ts .

قم بتحديد المتغير closeBtn لإنشاء مرجع خاص بزر الإغلاق للنافذة المنبثقة. 

الأن ، غندما ثمت عملية نذاء الحذف (delete call) بنجاح ، تحتاج إلى إغلق نافذة تأكيد الحذف المنبثقة .

إليك كيف ستبدو طريقة deletePost المعدلة.

إليك كيف سيبدو ملف show-post.component.ts .

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

التعامل مع فترة تسجيل المستخدم (User Session) أثناء تسجيل الدخول

 عندما يقوم المستخدم بتسجيل الدخول إلى التطبيق، عليك أن تبقي على إسم المستخدم الذي سجل الدخول في localstorage .قمم بالتعديل على طريقة validateLogin  داخل LoginComponent  لتخزين اسم المستخدم الذي سجل الدخول في localstorage .

عندما يتم المصادقة (validated) على نتيجة القادمة من نذاء API ، قم بإضافة التعليمات البرمجية التالية لتخزين اسم المستخدم الذي تم تسجيل الدخول به.

إليك كيف ستبدو طريقة validateLogin .

الأن، داخل ملف home.component.html ، قم بإضافة طريقة تسمى logout لزر تسجيل الخروج .

 داخل ملف home.component.ts ، قمم بإنشاء طريقة تسمى logout . داخل طريقة logout ، تحتاج إلى مسح التخزين المحلي من أجل loggedInUser . إليك كيف ستبدو الطريقة :

في طريقة constructor  الخاصة ب HomeComponent ، تحتاج إلى إضافة تفقد لمفتاح loggedInUser على مستوى التخزين المحلي . إذا لم يتم إيجاده ،    فستحتاج إلى إعادة التوجيه إلى صفحة تسجيل الدخول . إليك كيف سيبدو ملف  home.component.ts .

قم بحفظ التغييرات أعلاه وأعد تشغيل client server . حاول الولوج إلى الصفحة الرئيسية عن طريق وضعك لعنوان http://localhost:4200/home في نافذة المتصفح. بحيت سيتم إعادة توجيهك إلى صفحة تسجيل الدخول.

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

أمور يجب تغطيتها

في هذا الجزء من السلسلة التعليمية، تعلمت كيفية عمل حذف لمنشور من خلال إضافة رمز إلى قائمة منشورات المدونة . قمت أيضا بإنشاء REST API  لحذف تفاصيل منشورمدونة من قاعدة البيانات MongoDB  باستخدام عميل Mongoose .

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

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

شفرة المصدر الخاصة بهذا الدرس تجدها على GitHub.

وأخيرا، تذكر أن JavaScript  هي لغة الويب.  وأنها ليست من دون منحنيات التعلم ، ولكن إذا كنت تبحث عن موارد إضافية للدراسة أو لاستخدامها في عملك، تفقد من ما لدينا متاح في Envato Market.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.