Angular Services

رأينا في درس سابق أن إطار العمل أنجولار يعتمد على مفهوم المكونات (Components) بشكل كامل، وشرحنا معنى المكونات وطريقة إنشائها وإضافتها في تطبيقات Angular.
في درس اليوم، سنكتشف معا مفهوما آخرا له أهمية قصوى في إطار العمل أنجولار : الخدمات أو Services.

لماذا الخدمات في أنجولار ؟

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

Components shouldn’t fetch or save data directly and they certainly shouldn’t knowingly present fake data. They should focus on presenting data and delegate data access to a service.

في هذا الدرس سنقوم بتطبيق هذه الفكرة عن طريق جلب بيانات وهمية (fake data) من خادم بعيد (Remote server) وإظهارها في الصفحة الرئيسية لتطبيقنا.

سنقوم باستخدام واجهة JSONPlaceholder لهذا الغرض. من خلال النقطة posts/ نستطيع جلب عدد من المقالات الوهمية، كل مقال يكون على الشكل التالي :

نحن سنعرض فقط العنون title، ففي النهاية غرضنا الوحيد هو أن نتعلم كيف نقوم باستخدام Services لجلب البيانات وتقديمها للمكونات.

إنشاء مشروع جديد

لنقم أولا بإنشاء مشروع جديد بواسطة Angular CLI من خلال تنفيذ هذا الأمر على Terminal :

angular-services هو اسم المشروع ويمكنك طبعا اختيار الإسم الذي تريده.

بعد إنتهاء إعداد المشروع، سنقوم بالدخول إلى المجلد angular-services عن طريق الأمر :

بعد ذلك نقوم بتنفيذ الأمر ng serve –watch حتى يمكننا فتح المشروع على المتصفح من خلال الرابط : http://localhost:4200. 

ستظهر الصفحة الرئيسية الإفتراضية، وسنقوم فيما بعد بالتعديل عليها.

إنشاء الخدمة PostService

سنقوم بإنشاء الخدمة PostService عن طريق نافذة الأوامر السطرية :

هذا الأمر سيقوم بإنشاء ملفين :

  • post.service.ts : وهو الملف الذي يحتوي على الكلاس PostService.
  • post.service.spec.ts : الملف الذي نضع فيه الإختبارات التي نريد إجراءها للخدمة PostService. هذا الملف لن نركز عليه في هذا الدرس.

محتوى الملف post.service.ts سيكون شئيا من هذا القبيل :

نلاحظ أن الكلاس PostService مسبوقة بالمصمم injectable@، هذا ضروري في تطبيقات أنجولار.

جلب البيانات بواسطة Ajax

1. إعداد الملف app.module.ts

لجلب البيانات باستخدام تقنية Ajax يلزمنا اضافة وحدة جديدة للمشروع إسمها HttpClientModule وذلك من الملف app.module.ts. بعد استيراد الوحدة HttpClientModule لا يجب أن ننسى إضافتها إلى المصفوفة imports في المصمم NgModule@ :

2. إعداد الملف post.service.ts

بعد ذلك سنعود إلى PostService ونقوم باستيراد الكائن HttpClient. هذا الأخير هو الذي يستخدم للقيام بطلبات أجاكس في إطار العمل أنجولار.
أولا سنقوم بحقنه (Inject) داخل Constructor الخاص بالكلاس PostService، ثم نقوم باستخدامه داخل الدالة fetchPosts التي سنقوم بإنشائها، بحيث تكون مهمتها الوحيدة هي جلب المقالات من الواجهة البرمجية REST API.

2. إعداد الملف app.component.ts

الملف app.component.ts سبق إنشاؤه من قبل Angular CLI عندما قمنا بتوليد المشروع، وفيه يوجد الكلاس AppComponent المسؤول عن المكون الرئيسي للتطبيق.

  1. أولا لكي يتمكن هذا المكون من الإستعانة بالخدمة PostService يجب أن نضيف هذه الأخيرة إلى المصفوفة providers الموجودة بداخل المصمم component@ الخاص بالكلاس AppComponent، هذا طبعا بعد استيراد (import) الكلاس PostService.
  2. ثانيا سنقوم بحقن الخدمة في بَنَّاءِ (Constructor) الكلاس AppComponent.
  3. ثالثا سننشئ خاصية بداخل AppComponent اسمها posts. هذه الخاصية سنستخدمها لإستقبال مصفوفة المقالات القادمة من الواجهة البرمجية.
  4. رابعا سنقوم بإنشاء دالة جديدة اسمها getPosts وبداخلها سنطلب من الخدمة PostService أن تقوم بجلب البيانات من الواجهة البرمجية REST API. سننتظر وصول البيانات بداخل الدالة subscribe لنقوم باستقبالها في المصفوفة this.posts.
  5. خامسا، يجب أن نقوم باستدعاء الدالة getPosts حالما يتم عرض المكون AppComponent على المتصفح. أفضل مكان لفعل ذلك هو في الدالة ngOnInit. هذه الأخيرة لا تتوفر لتطبيق أنجولار إلا بعد استيراد الواجهة OnInit وجعل المكون يستخدمها بواسطة التعبير implements OnInit.
ngOnInit هي جزء مما يسمى دورة حياة المكونات في أنجولار. والكود الذي نضعه بداخلها يتم تنفيذه بمجرد إنشاء وإعداد المكون.
ngOnInit هي المكان الأفضل للقيام بطلبات الأجاكس التي يحتجاها المكون في بداية حياته، ولا ينصح أبدا بالقيام بمثل هذه الأمور في Constructor.

بعد إتمام كل هذه الخطوات، يفترض أن يكون شكل الملف app.component.ts على هذا النحو :

4. عرض البيانات في واجهة المستخدم

الآن لم يبقى لنا سوى عرض البيانات التي حصلنا عليها في واجهة المستخدم UI. وسيلتنا لذلك هي القالب app.component.html الخاص بالمكون AppComponent.

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

ترون بأننا استخدمنا الحلقة ngFor* التي يتيحها أنجولار من أجل قراءة المصفوفة posts وعرض العناوين داخل وسوم <h2>.

بعد تحديث المتصفح سنرى بأن عناوين المقالات معروضة وفق المتوقع.


تعلمنا معا من خلال هذا الدرس كيف نقوم بإنشاء الخدمات في إطار العمل Angular، ورأينا كيف نقوم بحقنها للمكونات لجلب البيانات التي تحتاجاها. هذه الخدمات تكرس مبدأ مهما في البرمجة، وهو مبدأ المسؤولية الواحدة Single Responsibility Principle، بحيث أن كل جزء من التطبيق مسؤول عن مهام محددة بدقة، وكلما تم توزيع المهام بشكل أفضل كلما كان الكود أكثر تنظيما وقابلية للفهم والقراءة والصيانة.

ترك الرد

Please enter your comment!
Please enter your name here