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

• المتطلبات الأساسية: يوصَى على الأقل بأن تكون على دراية بأساسيات لغات HTML وCSS وجافاسكربت JavaScript، ومعرفة باستخدام سطر الأوامر أو الطرفية.
• الهدف: إضافة وظيفة الترشيح Filtering لتطبيقنا، ومعرفة كيفية بناء تطبيق Angular.

شيفرة الترشيح

يعتمد ترشيح العناصر على الخاصية filter التي أضفناها مسبقًا إلى الملف app.component.ts:

filter: 'all' | 'active' | 'done' = 'all';

القيمة الافتراضية للخاصية filter هي all، ولكن يمكن أن تكون active أو done.

إضافة عناصر تحكم الترشيح

أضِف شيفرة HTML التالية في الملف app.component.html قبل زر "الإضافة Add" وفوق القسم الذي يعطي قائمةً بالعناصر، وتكون فيما يلي الأقسام الموجودة في ملف HTML ضمن تعليقات لتتمكن من معرفة مكان وضع الأزرار بالضبط.

<!-- <button class="btn-primary" (click)="addItem(newItem.value)">Add</button>
 -->

  <!-- الأزرار التي تعرض جميع العناصر أو العناصر النشطة أو العناصر المكتملة عند النقر عليها -->
  <div class="btn-wrapper">
    <button
      class="btn btn-menu"
      [class.active]="filter == 'all'"
      (click)="filter = 'all'">
      All
    </button>

    <button
      class="btn btn-menu"
      [class.active]="filter == 'active'"
      (click)="filter = 'active'">
      To Do
    </button>

    <button
      class="btn btn-menu"
      [class.active]="filter == 'done'"
      (click)="filter = 'done'">
      Done
    </button>
  </div>

  <!-- <h2>{{items.length}} item(s)</h2>
        <ul>... -->

يؤدي النقر على الأزرار إلى تغيير قيم خاصية الترشيح filter التي تحدِّد العناصر items المعروضة والتنسيق الذي يطبّقه إطار عمل Angular على الزر النشط.

• إذا نقر المستخدِم على زر "جميع العناصر All"، فستظهر كافة العناصر.
• إذا نقر المستخدِم على زر " العناصر النشطة To do"، فستظهر العناصر التي تكون فيها قيمة done هي false.
• إذا نقر المستخدِم على زر "العناصر المكتملة Done"، فستظهر العناصر التي تكون فيها قيمة done هي true.

يتحكم ربط سِمة الصنف باستخدام الأقواس المربعة [] في لون نص الأزرار، إذ يطبِّق ربط الأصناف [class.active] الصنفَ active عندما تتطابق قيمة الخاصية filter مع التعبير، فإذا نقر المستخدِم مثلًا على زر "العناصر المكتملة Done" الذي يضبط الخاصية filter على القيمة done، فسيُقيَّم تعبير ربط الأصناف filter == 'done'‎ على أنه true، كما يطبق إطار عمل Angular الصنف active على زر "العناصر المكتملة Done" عندما تكون قيمة الخاصية filter هي done لجعل لون النص أخضر، فإذا نقر المستخدِم على أحد الأزرار الأخرى، فلن تكون قيمة الخاصية filter هي done، وبالتالي لن يكون لون النص أخضرًا.

بناء تطبيق Angular النهائي

يمكنك الآن بعد أن انتهيت من تطوير تطبيقك تشغيل أمر البناء build في واجهة سطر الأوامر CLI في إطار عمل Angular، فإذا شغّلتَ الأمر build في المجلد todo، فسيُصرَّف تطبيقك في مجلد خرج بالاسم dist/‎.

شغّل الأمر التالي في سطر الأوامر في المجلد todo:

ng build -c production

تصرِّف واجهة CLI التطبيق وتضع الخرج في مجلد dist جديد، كما تتخلص الراية --configuration production/-c production مع الأمر ng build من الأشياء التي لا تحتاجها في عملية الإنتاج.

نشر تطبيقك

يمكنك نسخ محتويات المجلد dist/my-project-name إلى خادم الويب لنشر تطبيقك، وبما أنّ هذه الملفات ساكنة static files، فيمكنك استضافتها على أيّ خادم ويب يمتلك القدرة على تشغيل الملفات مثل:

• Node.js
• Java
• ‎.NET

يمكنك استخدام أيّ منصة واجهة خلفية مثل Firebase أو Google Cloud أو App Engine.

الخلاصة

بما أنه كان لديك شيفرة المرشح filter في الملف app.component.ts مسبقًا، فكل ما عليك فعله هو تعديل القالب لتوفير عناصر التحكم بترشيح العناصر والتعلم به، كما تناولنا في هذا المقال كيفية بناء تطبيق Angular جاهز للإنتاج.

أنشأت حتى الآن تطبيقًا أساسيًا، لكن رحلتك في تعلم إطار عمل Angular بدأت للتو، ويمكنك معرفة المزيد من خلال الاطلاع على سلسلة مقالات Angular في أكاديمية حسوب التي تعزّز معرفتك في رحلة تعلّمك لإطار عمل Angular.

ترجمة -وبتصرُّف- للمقالين Filtering our to-do items وBuilding Angular applications and further resources.

اقرأ أيضًا

• تهيئة بيئة تطبيقات Angular ونشرها على الويب
• إضافة التنقل وإدارة البيانات في تطبيق Angular
• كيفية استعمال Angular في بناء تطبيقات الويب
• مقدمة في بناء تطبيقات الويب باستخدام إطار العمل Angular وقاعدة بيانات Firestore

توفّر المكونات طريقةً لتنظيم تطبيقك، لذا سنرشدك في هذا المقال لإنشاء مكوِّن للتعامل مع العناصر الفردية في قائمة المهام الذي بدأنا العمل عليه في المقال السابق، وإضافة وظائف تحديد المهام وتعديلها وحذفها، حيث سنغطي نموذج أحداث Angular.

• المتطلبات الأساسية: يوصَى على الأقل بأن تكون على دراية بأساسيات لغات HTML وCSS وجافاسكربت JavaScript، ومعرفة باستخدام سطر الأوامر أو الطرفية.
• الهدف: معرفة المزيد حول المكونات بما في ذلك كيفية عمل الأحداث للتعامل مع التحديثات، وإضافة وظائف تحديد المهام وتعديلها وحذفها.

إنشاء مكون جديد

أنشئ مكونًا بالاسم item باستخدام أمر واجهة سطر الأوامر CLI التالي:

ng generate component item

ينشئ الأمر ng generate component مكونًا ومجلدًا بالاسم الذي تحدده، حيث سيكون في مثالنا اسم المجلد والمكوِّن هو item، كما يمكنك العثور على مجلد العناصر item ضمن المجلد app.

يتكون المكوِّن ItemComponent من الملفات التالية مثل المكون AppComponent:

• الملف item.component.html الخاص بالتوصيف باستخدام لغة HTML.
• الملف item.component.ts الخاص بالشيفرة البرمجية أو بالمنطق باستخدام لغة TypeScript +الملف item.component.css الخاص بالتنسيق باستخدام لغة CSS.

يمكنك رؤية مرجع لملفات HTML وCSS في البيانات الوصفية لعنصر التصميم ‎@Component()‎ في الملف item.component.ts كما يلي:

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css'],
})

إضافة توصيف HTML الخاص بالمكون ItemComponent

يمكن أن يتولى المكوِّن ItemComponent مهمة منح المستخدِم طريقة لتحديد العناصر بوصفها مكتملةً أو لتعديلها أو حذفها، لذا أضِف شيفرة HTML لإدارة العناصر من خلال استبدال محتوى العنصر البديل Placeholder في الملف item.component.html بما يلي:

<div class="item">

  <input [id]="item.description" type="checkbox" (change)="item.done = !item.done" [checked]="item.done" />
  <label [for]="item.description">{{item.description}}</label>

  <div class="btn-wrapper" *ngIf="!editable">
    <button class="btn" (click)="editable = !editable">Edit</button>
    <button class="btn btn-warn" (click)="remove.emit()">Delete</button>
  </div>

  ‏<-- ‫يظهر هذا القسم فقط في حالة نقر المستخدم على زر "التعديل Edit" –!>
  <div *ngIf="editable">
    <input class="sm-text-input" placeholder="edit item" [value]="item.description" #editedItem (keyup.enter)="saveItem(editedItem.value)">

    <div class="btn-wrapper">
      <button class="btn" (click)="editable = !editable">Cancel</button>
      <button class="btn btn-save" (click)="saveItem(editedItem.value)">Save</button>
    </div>
  </div>

</div>

حقل الإدخال Input الأول هو مربع اختيار بحيث يمكن للمستخدِمين تحديد العناصر عند اكتمال أحدها، كما تشير الأقواس المزدوجة المعقوصة {{}} في حقل الإدخال <input> والتسمية <label> الخاصين بمربع الاختيار إلى استخدام إطار عمل Angular الذي يستخدِم الصيغة {{item.description}} لاسترداد وصف العنصر item الحالي من مصفوفة العناصر items، وسنوضّح في القسم التالي كيفية مشاركة المكونات للبيانات بالتفصيل.

كما يوجد زران لتعديل العنصر الحالي وحذفه ضمن الوسم <div> الذي يوجد فيه الموجّه ‎*ngIf، وهو موجّه Angular مبني مسبقًا يمكنك استخدامه لتغيير بنية نموذج DOM ديناميكيًا، إذ يشير الموجّه ‎*ngIf إلى أنه إذا كانت قيمة المتغير editable هي false، فإنّ العنصر <div> موجود في نموذج DOM؛ وإذا كانت قيمة المتغير editable هي true، فسيزيل إطار عمل Angular العنصر <div> من نموذج DOM.

<div class="btn-wrapper" *ngIf="!editable">
  <button class="btn" (click)="editable = !editable">Edit</button>
  <button class="btn btn-warn" (click)="remove.emit()">Delete</button>
</div>

إذا نقر المستخدِم على زر "التعديل Edit"، فستصبح قيمة المتغير editable هي true، مما يؤدي إلى إزالة العنصر <div> وأبنائه من نموذج DOM، فإذا نقر المستخدِم على زر "الحذف Delete"، فسيرفع المكوِّن ItemComponent حدثًا يعلِم فيه المكوِّن AppComponent بعملية الحذف.

لاحظ أيضًا وجود الموجه ‎*ngIf في عنصر <div> التالي، ولكن ضُبِط المتغير editable على القيمة true، فإذا كانت قيمة المتغير editable هي true في هذه الحالة، فسيضع إطار عمل Angular العنصر <div> وعناصره الأبناء <input> و <button> في نموذج DOM.

‏<-- ‫يظهر هذا القسم فقط في حالة نقر المستخدم على زر "التعديل Edit" –!>
<div *ngIf="editable">
  <input class="sm-text-input" placeholder="edit item" [value]="item.description" #editedItem (keyup.enter)="saveItem(editedItem.value)">

  <div class="btn-wrapper">
    <button class="btn" (click)="editable = !editable">Cancel</button>
    <button class="btn btn-save" (click)="saveItem(editedItem.value)">Save</button>
  </div>
</div>

تكون قيمة العنصر <input> مرتبطةً بوصف description العنصر الحالي باستخدام الصيغة ‎[value]="item.description"‎، وبالتالي يكون وصف description العنصر هو قيمة العنصر <input>، لذا إذا كانت قيمة الوصف description هي eat، فسيكون الوصف description موجودًا مسبفًا في العنصر <input>، وبذلك إذا عدّل المستخدِم العنصر، فستكون قيمة العنصر <input> هي eat مسبقًا.

يعني متغير القالب ‎#editedItem في العنصر <input> أنّ إطار عمل Angular يخزّن كل ما يكتبه المستخدِم في العنصر <input> في متغير اسمه editedItem، إذ يستدعي الحدث keyup التابع saveItem()‎ ويمرّر قيمة المتغير editedItem إذا اختار المستخدِم الضغط على مفتاح Enter بدلًا من النقر على زر "الحفظ Save".

إذا نقر المستخدِم على زر "الإلغاء Cancel"، فستتبدّل قيمة المتغير editable إلى false، مما يزيل حقل الإدخال والأزرار الخاصة بالتعديل من نموذج DOM، فإذا كانت قيمة المتغير editable هي false، فسيعيد إطار عمل Angular وضع العنصر <div> مع زرَّي "التعديل Edit" و"الحذف Delete" في نموذج DOM.

يؤدي النقر على زر "الحفظ Save" إلى استدعاء التابع saveItem()‎ الذي يأخذ القيمة من المتغير ‎#editedItem الخاص بالعنصر <input> ويغير وصف description العنصر إلى السلسلة النصية editedItem.value.

إعداد المكون AppComponent

سنضيف في القسم التالي شيفرةً برمجيةً تعتمد على الاتصال بالمكونين AppComponent و ItemComponent، إذ يجب إعداد المكون AppComponent أولًا عبر إضافة السطر التالي لاستيراد Item في بداية الملف app.component.ts:

import { Item } from "./item";

بعد ذلك اضبط المكون AppComponent بإضافة ما يلي في نفس ملف الصنف:

remove(item) {
  this.allItems.splice(this.allItems.indexOf(item), 1);
}

يستخدِم التابع remove()‎ تابع جافاسكربت Array.splice()‎ لإزالة عنصر واحد عند فهرس indexOf العنصر ذي الصلة، ويعني ذلك أن التابع splice()‎ يزيل العنصر من المصفوفة.

إضافة الشيفرة البرمجية أو المنطق إلى المكون ItemComponent

يمكن استخدام واجهة المستخدِم الخاصة بالمكوِّن ItemComponent من خلال إضافة شيفرة برمجية إلى المكون مثل إضافة دوال وطرق لدخول البيانات وخروجها.

عدّل تعليمات استيراد جافاسكربت في الملف item.component.ts كما يلي:

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Item } from "../item";

تسمح إضافة Input و Output و EventEmitter للمكوِّن ItemComponent بمشاركة البيانات مع المكوِّن AppComponent، كما يمكن أن يفهم المكوِّن ItemComponent ما هو العنصر item من خلال استيراد Item.

استبدل الصنف ItemComponent الناتج في الملف item.component.ts بما يلي:

export class ItemComponent {

  editable = false;

  @Input() item: Item;
  @Input() newItem: string;
  @Output() remove = new EventEmitter<Item>();

  saveItem(description) {
    if (!description) return;
    this.editable = false;
    this.item.description = description;
  }
}

تساعد الخاصية editable في تبديل قسم من القالب حيث يمكن للمستخدِم تعديل عنصر، إذ تُعَدّ الخاصية editable هي الخاصية نفسها في توصيف HTML ضمن تعليمة ‎*ngIf التي هي ‎*ngIf="editable"‎، فإذا أردتَ استخدام خاصية في القالب، فيجب التصريح عنها في الصنف.

يسهّل كل من ‎@Input()‎ و ‎@Output()‎ و EventEmitter الاتصال بين مكونيك، إذ يعمل ‎@Input()‎ بوصفه وسيلةً لدخول البيانات إلى المكوِّن، ويعمل ‎@Output()‎ بوصفه وسيلةً لخروج البيانات من المكوِّن، كما يجب أن يكون ‎@Output()‎ من النوع EventEmitter بحيث يمكن للمكوِّن رفع حدث عندما تكون هناك بيانات جاهزة لمشاركتها مع مكوِّن آخر.

استخدم ‎@Input()‎ لتحديد أن قيمة الخاصية يمكن أن تأتي من خارج المكوِّن، واستخدم ‎@Output()‎ مع EventEmitter لتحديد أن قيمة الخاصية يمكن أن تترك المكوِّن بحيث يمكن لمكوِّن آخر تلقي تلك البيانات.

يأخذ التابع saveItem()‎ وسيطًا هو الوصف description الذي يُعَدّ النص الذي يدخله المستخدِم في حقل الإدخال <input> عند تعديل عنصر في القائمة، كما يُعَدّ الوصف description السلسلة النصية نفسها التي تأتي من العنصر <input> مع متغير القالب ‎#editedItem.

إذا لم يدخِل المستخدِم أيّ قيمة ولكنه نقر على زر "الحفظ Save"، فلن يعيد التابع saveItem()‎ شيئًا ولن يُحدِّث الوصف description، فإذا لم تكن تعليمة if موجودةً، فيمكن للمستخدِم النقر على زر "الحفظ Save" بدون وجود أيّ شيء في حقل الإدخال <input> وسيصبح الوصف description سلسلةً نصيةً فارغةً.

إذا أدخل المستخدِم نصًا ونقر على زر "الحفظ Save"، فسيضبط التابع saveItem()‎ الخاصية editable على القيمة false، مما يتسبب في أن يزيل الموجّه ‎*ngIf في القالب ميزة التعديل ويصيّر أزرار "التعديل Edit" و"الحذف Delete" مرةً أخرى.

يجب أن يُصرَّف التطبيق في هذه المرحلة، ولكن يجب استخدام المكوِّن ItemComponent ضمن المكوِّن AppComponent لتتمكّن من رؤية الميزات الجديدة في المتصفح.

استخدام المكون ItemComponent ضمن المكون AppComponent

يمنحك تضمين أحد المكونات ضمن مكوِّن آخر في سياق علاقة المكوِّن الأب بالمكوِّن الابن المرونةَ في استخدام المكونات حيثما تريد ذلك، إذ يُعَدّ المكوِّن AppComponent صدَفةً shell للتطبيق بحيث يمكنك تضمين مكونات أخرى.

يمكنك استخدام المكوِّن ItemComponent ضمن المكوِّن AppComponent من خلال وضع محدّد المكوِّن ItemComponent في قالب المكون AppComponent، كما يحدّد إطار عمل Angular محدّد المكوِّن في البيانات الوصفية لعنصر التصميم ‎@Component()‎، إذ يكون المحدّد Selector في مثالنا هو app-item:

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})

يمكنك استخدام محدّد المكون ItemComponent ضمن المكوِّن AppComponent من خلال إضافة العنصر <app-item> الذي يتوافق مع المحدّد الذي عرّفته لصنف المكوِّن في الملف app.component.html، لذا استبدل القائمة غير المرتبة الحالية في الملف app.component.html بما يلي:

<h2>{{items.length}} <span *ngIf="items.length === 1; else elseBlock">item</span>
<ng-template #elseBlock>items</ng-template></h2>

<ul>
  <li *ngFor="let item of items">
    <app-item (remove)="remove(item)" [item]="item"></app-item>
  </li>
</ul>

تدخِل صيغة الأقواس المزدوجة المتعرجة {{}} في العنصر <h2> طول المصفوفة items وتعرضه.

يستخدِم العنصر <span> في عنصر العنوان <h2> الموجّه ‎*ngIf وelse لتحديد ما إذا كان يجب أن يشير العنصر <h2> إلى "العنصر item" أو مجموعة "العناصر items"، فإذا كان هناك عنصر واحد فقط في القائمة، فسيُعرَض العنصر <span> الذي يحتوي على الكلمة "عنصر item"، في حين إذا كان طول المصفوفة items هو أيّ شيء آخر غير القيمة 1، فسيظهر العنصر <ng-template> الذي أطلقنا عليه الاسم elseBlock بالصورة ‎#elseBlock بدلًا من العنصر <span>، كما يمكنك استخدام العنصر <ng-template> في إطار عمل Angular عندما لا تريد عرض المحتوى افتراضيًا، وبالتالي إذا كان طول مصفوفة العناصر items يساوي 1، فسيعرض الموجّه ‎*ngIf العنصر elseBlock وليس العنصر <span>.

يستخدِم العنصر <li> موجّه التكرار ‎*ngFor للمرور على جميع العناصر في مصفوفة items، إذ يُعَدّ الموجَّه ‎*ngFor الخاص بإطار عمل Angular موجّهًا آخرًا يساعدك على تغيير بنية نموذج DOM مع كتابة شيفرة برمجية أقل، كما يكرّر إطار عمل Angular العنصر <li> وكل شيء بداخله لكل عنصر item حيث يتضمن العنصر <li> العنصر <app-item>، وهذا يعني أنّ إطار عمل Angular ينشئ نسخةً أخرى من العنصر <app-item> لكل عنصر في المصفوفة، وبالتالي سينشئ إطار عمل Angular العديد من عناصر <li> لأيّ عدد من العناصر في المصفوفة، كما يمكنك استخدام الموجّه ‎*ngFor مع عناصر أخرى مثل <div> أو <span> أو <p>.

يحتوي المكوِّن AppComponent على التابع remove()‎ لإزالة العنصر المرتبط بالخاصية remove من المكوِّن ItemComponent، كما تربط الخاصية item الموجودة بين قوسين مربعين [] قيمة العنصر item بين المكونين AppComponent و ItemComponent.

يجب أن تكون الآن قادرًا على تعديل العناصر وحذفها من القائمة، ويجب أن يتغير عدد العناصر عند إضافة عناصر أو حذفها، كما يمكنك جعل القائمة أسهل استخدامًا من خلال إضافة تنسيق إلى المكوِّن ItemComponent.

إضافة التنسيق إلى المكون ItemComponent

يمكنك استخدام ملف تنسيق لمكوِّن لإضافة تنسيقات خاصة به، إذ يضيف تنسيق CSS التالي التنسيقات الأساسية ونموذج الصندوق المرن Flexbox للأزرار ومربعات الاختيار المخصَّصة.

الصق التنسيق التالي في الملف item.component.css:

.item {
  padding: .5rem 0 .75rem 0;
  text-align: left;
  font-size: 1.2rem;
}

.btn-wrapper {
  margin-top: 1rem;
  margin-bottom: .5rem;
}

.btn {
  /* menu buttons flexbox styles */
  flex-basis: 49%;
}

.btn-save {
  background-color: #000;
  color: #fff;
  border-color: #000;

}

.btn-save:hover {
  background-color: #444242;
}

.btn-save:focus {
  background-color: #fff;
  color: #000;
}

.checkbox-wrapper {
  margin: .5rem 0;
}

.btn-warn {
  background-color: #b90000;
  color: #fff;
  border-color: #9a0000;
}

.btn-warn:hover {
  background-color: #9a0000;
}

.btn-warn:active {
  background-color: #e30000;
  border-color: #000;
}

.sm-text-input {
  width: 100%;
  padding: .5rem;
  border: 2px solid #555;
  display: block;
  box-sizing: border-box;
  font-size: 1rem;
  margin: 1rem 0;
}

/* Custom checkboxes
Adapted from https://css-tricks.com/the-checkbox-hack/#custom-designed-radio-buttons-and-checkboxes */

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1.25em; height: 1.25em;
  border: 2px solid #ccc;
  background: #fff;
}

/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '\2713\0020';
  position: absolute;
  top: .15em; left: .22em;
  font-size: 1.3em;
  line-height: 0.8;
  color: #0d8dee;
  transition: all .2s;
  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 2px dotted blue;
}

الخلاصة

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

ترجمة -وبتصرُّف- للمقال Creating an item component.

اقرأ أيضًا

• مقدمة في مفاهيم Angular
• تهيئة بيئة تطبيقات Angular ونشرها على الويب
• كيفية استعمال Angular في بناء تطبيقات الويب
• المرشحات (filters) في AngularJS
• الخدمات (Services) في AngularJS

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

• المتطلبات الأساسية: يوصَى على الأقل بأن تكون على دراية بأساسيات لغات HTML وCSS وجافاسكربت JavaScript، ومعرفة باستخدام سطر الأوامر أو الطرفية.
• الهدف: إنشاء بنية تطبيقك الأساسية، وعرض قائمة بعناصر المهام، وفهم مفاهيم Angular الأساسية مثل بنية المكونات ومشاركة البيانات بين المكونات وإنشاء حلقات المحتوى ومعرفة كيفية تنسيق تطبيق Angular.

بنية تطبيق قائمة المهام

يحتوي تطبيق Angular على الملف index.html مثل أيّ تطبيق أساسي لا يستخدِم إطار عمل، ويستخدِم عنصرًا خاصًا هو <app-root> ضمن الوسم <body>. في الملف index.html لإدراج مكوِّنك الرئيسي الذي يتضمن بدوره المكونات الأخرى التي تنشئها، كما لا تحتاج إلى تعديل الملف index.html بصورة عامة، وإنما يجب أن تركّز اهتمامك على مناطق متخصصة من تطبيقك هي المكونات Components.

تنظيم تطبيقك ضمن المكونات

تُعَدّ المكونات لبنة البناء المركزية لتطبيقات Angular، إذ يحتوي تطبيق قائمة المهام على مكونين هما مكوِّن يمثّل أساس تطبيقك ومكوِّن للتعامل مع عناصر المهام.

يتكون كل مكوِّن من صنف TypeScript وشيفرة HTML وCSS، إذ تُترجَم أو تُحوَّل شيفرة Typescript إلى شيفرة جافاسكربت، مما يعني أنّ تطبيقك يتحوّل في النهاية إلى شيفرة جافاسكربت عادية مع القدرة على استخدام ميزات لغة Typescript الموسَّعة وصيغتها المبسَّطة.

تعديل واجهة المستخدم ديناميكيا باستخدام الموجهين ‎ngIf* و‎*ngFor

سنغطي في هذا المقال أيضًا موجّهَين Directives مهمين في Angular لتعديل بنية نموذج DOM ديناميكيًا، إذ يشبه الموجّه الأمر الذي يمكنك استخدامه في لغة HTML لإحداث تغيير في تطبيقك.

الموجّه الأول هو المكرِّر ‎*ngFor الذي يمكنه إنشاء عناصر DOM ديناميكيًا بناءً على عناصر في مصفوفة؛ أما الموجّه الثاني فهو ‎*ngIf الذي يمكنك استخدامه لإضافة عناصر أو إزالتها من نموذج DOM بناءً على شرط معيّن، فإذا أراد المستخدِمون مثلًا تعديل عنصر في قائمة المهام، فيمكنك تزويدهم بالوسائل اللازمة لتعديل هذا العنصر؛ وإذا لم يرغبوا في تعديل عنصر، فيمكنك إزالة واجهة التعديل.

مشاركة البيانات بين المكونات

يجب إعداد مكوناتك لمشاركة البيانات في هذا التطبيق، إذ يجب على المكوِّن الرئيسي إرسال العنصر الجديد إلى المكوِّن الثاني لإضافة عناصر جديدة إلى قائمة المهام، ويدير هذا المكوِّن الثاني العناصر ويهتم بتعديل العناصر الفردية ووضع علامة عليها بوصفها مكتملةً وحذفها.

يمكن تحقيق مشاركة البيانات بين مكونات Angular باستخدام عناصر تصميم خاصة هي ‎@Input()‎ و ‎@Output()‎ التي يمكنك استخدامها لتحديد أنّ بعض الخاصيات تسمح للبيانات بالدخول إلى مكون أو الخروج منه، كما يجب رفع حدث في أحد المكونات لاستخدام عنصر التصميم ‎@Output()‎ حتى يعرف المكوِّن الآخر أنّ هناك بيانات متاحة.

تعريف عنصر

أنشئ ملفًا جديدًا بالاسم item.ts بالمحتويات التالية في المجلد app:

export interface Item {
  description: string;
  done: boolean;
}

لن تستخدِم هذا الملف حتى وقت لاحق، ولكن هذا هو الوقت المناسب لمعرفة ما هو العنصر item. تنشئ واجهة العنصر Item نموذج كائن عنصر بحيث يفهم تطبيقك ما هو العنصر، في حين يُعَدّ العنصر في تطبيق قائمة المهام كائنًا له وصف ويمكن إكماله.

إضافة شيفرة إلى القالب AppComponent

يمكنك الآن -بعد أن عرفت ما هو العنصر item- وضع بعض العناصر في تطبيقك عبر إضافتها إلى ملف TypeScript وهو app.component.ts واستبدال محتوياته بما يلي:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'todo';

  filter: 'all' | 'active' | 'done' = 'all';

  allItems = [
    { description: 'eat', done: true },
    { description: 'sleep', done: false },
    { description: 'play', done: false },
    { description: 'laugh', done: false },
  ];

  get items() {
    if (this.filter === 'all') {
      return this.allItems;
    }
    return this.allItems.filter((item) => this.filter === 'done' ? item.done : !item.done);
  }

}

السطر الأول هو تعليمة استيراد بلغة جافاسكربت تستورد إطار عمل Angular، إذ يحدد عنصر التصميم ‎@Component()‎ بيانات AppComponent الوصفية، وتكون خاصيات البيانات الوصفية الافتراضية كما يلي:

• selector: يخبرك باسم محدّد CSS الذي تستخدِمه في قالب لإنشاء نسخة من هذا المكوِّن وهو هنا 'app-root'، وقد أضافت واجهة Angular CLI الوسم <app-root></app-root> في الملف index.html ضمن الوسم body عند إنشاء تطبيقك، كما يمكنك استخدام جميع محددات المكونات بالطريقة نفسها من خلال إضافتها إلى قوالب HTML الخاصة بالمكونات الأخرى.
• templateUrl: يحدّد ملف HTML لربطه بهذا المكوِّن، وهو هنا '‎./app.component.html'.
• styleUrls: يوفّر موقع واسم ملف التنسيق الذي ينطبق تحديدًا على هذا المكوِّن، وهو هنا '‎./app.component.css'.

تكون خاصية الترشيح filter من النوع union، وبالتالي يمكن أن يكون للخاصية filter القيمة all أو active أو done، فإذا ارتكبت خطأً مطبعيًا أثناء كتابة القيمة التي تسندها إلى الخاصية filter مع النوع union، فستتيح لغة TypeScript معرفة ذلك لتتمكن من اكتشاف الخطأ مبكرًا، كما يوضح لك هذا المقال كيفية إضافة الترشيح في خطوة لاحقة، ولكن يمكنك استخدام خاصية الترشيح لإظهار القائمة الافتراضية لجميع العناصر.

تحتوي المصفوفة allItems على عناصر المهام وما إذا كانت مكتملةً done أم لا، وتكون قيمة الخاصية done للعنصر الأولeat هي true.

يعمل التابع الجالب get items()‎ على استرداد العناصر من المصفوفة allItems إذا كانت الخاصية filter مساويةً للقيمة all، وإلّا فسيعيد الجالب get items()‎ العناصر المكتملة done أو العناصر المعلَّقة اعتمادًا على كيفية ترشيح المستخدِم للعرض، إذ ينشئ الجالب Getter مصفوفةً بالاسم items التي سنستخدِمها لاحقًا.

إضافة شيفرة HTML إلى القالب AppComponent

استبدل محتويات الملف app.component.html بتوصيف HTML التالي للاطلاع على قائمة العناصر في المتصفح:

<div class="main">
  <h1>My To Do List</h1>
  <h2>What would you like to do today?</h2>

  <ul>
    <li *ngFor="let item of items">{{item.description}}</li>
  </ul>
</div>

يحتوي العنصر <li> على الموجّه ‎*ngFor، وهو موجّه Angular مضمَّن يُكرَّر على العناصر في المصفوفة items، إذ ينشئ الموجّه ‎*ngFor عنصر <li> جديد لكل عنصر، كما توجّه الأقواس المزدوجة المعقوصة التي تحتوي على item.description إطار عمل Angular لملء كل عنصر <li> بنص يصِف كل عنصر.

سترى قائمة العناصر في المتصفح كما يلي:

My To Do List
What would you like to do today?

* eat
* sleep
* play
* laugh

إضافة عناصر إلى القائمة

تحتاج قائمة المهام لطريقة ما لإضافة عناصر، لذا أضِف التابع التالي إلى الصنف في الملف app.component.ts:

addItem(description: string) {
  this.allItems.unshift({
    description,
    done: false
  });
}

يأخذ التابع addItem()‎ عنصرًا يوفّره المستخدِم ويضيفه إلى المصفوفة عندما ينقر المستخدِم على زر "الإضافة Add"، ويستخدِم هذا التابع تابع المصفوفة unshift()‎ لإضافة عنصر جديد إلى بداية المصفوفة وأعلى القائمة، أو يمكنك بدلًا من ذلك استخدام التابع push()‎ الذي سيضيف العنصر الجديد إلى نهاية المصفوفة وأسفل القائمة، كما يمكنك استخدام التابع addItem()‎ من خلال تعديل قسم HTML في القالب AppComponent.

استبدل العنصر <h2> بما يلي في الملف app.component.html:

<label for="addItemInput">What would you like to do today?</label>

<input
  #newItem
  placeholder="add an item"
  (keyup.enter)="addItem(newItem.value); newItem.value = ''"
  class="lg-text-input"
  id="addItemInput"
/>

<button class="btn-primary" (click)="addItem(newItem.value)">Add</button>

إذا كتب المستخدِم عنصرًا جديدًا في عنصر الإدخال <input> وضغط على مفتاح Enter، فسيضيف التابع addItem()‎ هذه القيمة إلى المصفوفة items، كما يؤدي الضغط على مفتاح Enter إلى إعادة ضبط قيمة حقل الإدخال <input> إلى سلسلة نصية فارغة، أو يمكن للمستخدِم النقر على زر "الإضافة Add" الذي يستدعي التابع addItem()‎ نفسه.

تنسيق تطبيق Angular

أصبحت بنية التطبيق الأساسية جاهزةً، إذًا لنطّلع على كيفية تعامل إطار عمل Angular مع تنسيق التطبيقات.

إضافة التنسيق إلى تطبيق Angular

تنشئ واجهة Angular CLI نوعين من ملفات التنسيق هما:

• تنسيق المكونات: توفِّر واجهة Angular CLI لكل مكوِّن ملفه الخاص بالتنسيق الذي يُطبَّق على هذا المكوِّن فقط.
• styles.css: يوجد هذا الملف في المجلد src، ويُطبَّق التنسيق الموجود في هذا الملف على التطبيق بأكمله ما لم تحدّد تنسيقًا على مستوى المكوِّن.

يمكن أن يختلف الامتداد الموجود في ملفات CSS اعتمادًا على ما إذا أردت معالج CSS المُسبَق، كما يدعم Angular لغات CSS و SCSS وSass و Less و Stylus.

الصق ما يلي في الملف src/styles.css:

body {
  font-family: Helvetica, Arial, sans-serif;
}

.btn-wrapper {
  /* flexbox */
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.btn {
  color: #000;
  background-color: #fff;
  border: 2px solid #cecece;
  padding: 0.35rem 1rem 0.25rem 1rem;
  font-size: 1rem;
}

.btn:hover {
  background-color: #ecf2fd;
}

.btn:active {
  background-color: #d1e0fe;
}

.btn:focus {
  outline: none;
  border: black solid 2px;
}

.btn-primary {
  color: #fff;
  background-color: #000;
  width: 100%;
  padding: 0.75rem;
  font-size: 1.3rem;
  border: black solid 2px;
  margin: 1rem 0;
}

.btn-primary:hover {
  background-color: #444242;
}

.btn-primary:focus {
  color: #000;
  outline: none;
  border: #000 solid 2px;
  background-color: #d7ecff;
}

.btn-primary:active {
  background-color: #212020;
}

يُطبَّق قسم CSS في الملف src/styles.css على التطبيق بأكمله، ولكن لا يؤثر هذا التنسيق على كل شيء في الصفحة، فالخطوة التالية هي إضافة التنسيق الذي يُطبَّق على الملف AppComponent على وجه التحديد.

أضِف التنسيق التالي في الملف app.component.css:

.main {
  max-width: 500px;
  width: 85%;
  margin: 2rem auto;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 600px) {
  .main {
    width: 70%;
  }
}

label {
  font-size: 1.5rem;
  font-weight: bold;
  display: block;
  padding-bottom: 1rem;
}

.lg-text-input {
  width: 100%;
  padding: 1rem;
  border: 2px solid #000;
  display: block;
  box-sizing: border-box;
  font-size: 1rem;
}

.btn-wrapper {
  margin-bottom: 2rem;
}

.btn-menu {
  flex-basis: 32%;
}

.active {
  color: green;
}

ul {
  padding-inline-start: 0;
}

ul li {
  list-style: none;
}

الخطوة الأخيرة هي زيارة المتصفح مرةً أخرى وإلقاء نظرة على كيفية تحديث تنسيق التطبيق

الخلاصة

يجب الآن أن يكون لديك قائمة المهام الأساسية معروضةً في متصفحك مع تنسيق جيد لتطبيق Angular، وسننشئ في المقال التالي مكونًا مناسبًا لعناصر المهام بحيث يمكنك تحديد عناصر المهام وتعديلها وحذفها.

ترجمة -وبتصرُّف- للمقالين Beginning our Angular todo list app وStyling our Angular app.

اقرأ أيضًا

• البدء باستخدام إطار عمل Angular
• مقدمة في بناء تطبيقات الويب باستخدام إطار العمل Angular وقاعدة بيانات Firestore
• بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore - إضافة التدوينات وعرضها

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

• المتطلبات الأساسية: يوصَى على الأقل بأن تكون على دراية بأساسيات لغات HTML وCSS وجافاسكربت JavaScript، ومعرفة باستخدام سطر الأوامر أو الطرفية.
• الهدف: إعداد بيئة تطوير Angular محلية وإنشاء تطبيق البداية وفهم أساسيات كيفية عمله.

ما هو إطار Angular؟

يُعَدّ إطار عمل Angular منصة تطوير مبنية على لغة TypeScript، ويشمل Angular بوصفه منصةً ما يلي:

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

إذا أنشأت تطبيقات باستخدام إطار عمل Angular، فستستفيد من المنصة التي يمكنها التوسع من مشاريع مطور واحد إلى تطبيقات على مستوى المؤسسة، وقد صُمِّم إطار عمل Angular لتسهيل عملية التحديث قدر الإمكان، بحيث يمكنك الاستفادة من أحدث التطورات بأقل جهد ممكن، وأفضل ما في الأمر هو أنّ نظام Angular البيئي يتكون من مجموعة متنوعة تضم أكثر من 1.7 مليون مطور ومؤلف مكتبات ومنشئ محتوى.

يجب أن تكون على دراية بواجهة CLI الخاصة بإطار عمل Angular قبل أن تبدأ في استكشاف منصة Angular، إذ تُعَدّ Angular CLI الطريقة الأسرع والأسهل والموصَى بها لتطوير تطبيقات Angular، وتسهّل عددًا من المهام، وإليك بعض الأمثلة عن هذه الأوامر:

• ‎ng build: يصرّف تطبيق Angular في مجلد الخرج.
• ‎ng serve: يبني تطبيقك ويشغّله ويعيد بناءه عند حدوث تغييرات في الملف.
• ‎ng generate: يولّد أو يعدّل الملفات على أساس تخطيطي.
• ‎ng test: يشغّل اختبارات الوحدة على مشروع معيّن.
• ‎ng e2e: يبني تطبيق Angular ويشغّله ثم يجري اختبارات شاملة.

ستجد أنّ واجهة سطر الأوامر CLI في Angular أداة قيّمة لبناء تطبيقاتك.

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

المتطلبات المسبقة

تحتاج إلى ما يلي لتثبيت Angular على نظامك المحلي:

• بيئة Node.js الخاصة بإطار عمل Angular التي تتطلب الإصدار الحالي أو الإصدار النشط للدعم طويل الأمد LTS أو إصدار الصيانة للدعم طويل الأمد من Node.js، ويمكنك الحصول على معلومات حول متطلبات الإصدار المحددة من خلال الاطلاع مفتاح engines في الملف package.json، كما يمكنك الحصول على مزيد من المعلومات حول تثبيت Node.js من خلال زيارة موقع nodejs.org، فإذا لم تكن متأكدًا من إصدار Node.js الذي يعمل على نظامك، فشغّل الأمر node -v في نافذة الطرفية.
• يعتمد مدير الحزم npm الخاص بإطار Angular وواجهة Angular CLI وتطبيقات Angular على حزم npm في العديد من الميزات والدوال، ويمكنك تنزيل حزم npm وتثبيتها باستخدام مدير حزم npm، كما سنستخدِم في هذا المقال واجهة سطر أوامر العميل في npm التي تُثبَّت افتراضيًا مع Node.js، وشغّل الأمر node -v في نافذة الطرفية للتحقق من تثبيت عميل npm.

إعداد التطبيق

يمكنك استخدام واجهة Angular CLI لتشغيل الأوامر في طرفيتك لإنشاء تطبيقات Angular وبنائها واختبارها ونشرها، لذا شغّل الأمر التالي في طرفيتك لتثبيت Angular CLI:

npm install -g @angular/cli

تبدأ أوامر Angular CLI جميعها بالاختصار ng متبوعة بما تريد أن تفعله واجهة سطر الأوامر CLI، لذا استخدم أمر ng new التالي في مجلد سطح المكتب لإنشاء تطبيق جديد بالاسم todo:

ng new todo --routing=false --style=css

ينشئ الأمر ng new تطبيق Angular صغير على سطح المكتب، إذ تحدد الرايات الإضافية ‎--routing و ‎--style كيفية التعامل مع التنقل والتنسيقات في التطبيق، وسنشرح هذه الميزات بمزيد من التفصيل لاحقًا، فإذا ظهرت رسالة تطالبك بفرض فحص أنواع أكثر صرامة، فيمكنك الرد بنعم.

انتقل إلى مشروعك الجديد باستخدام أمر cd التالي:

cd todo

استخدم الأمر التالي لتشغيل التطبيق todo:

ng serve

إذا أظهرت واجهة CLI رسالةً تطالبك بالتحليلات، فأجب بلا.

انتقل إلى المضيف المحلي http://localhost:4200/‎ في متصفحك لرؤية تطبيق البدء الجديد، فإذا عدّلتَ أيًا من ملفات المصدر، فسيُعاد تحميل التطبيق تلقائيًا.

يمكن أن ترغب في فتح تبويب أو نافذة طرفية ثانية لتشغيل الأوامر أثناء تشغيل الأمر ng serve، فإذا أردت في أيّ وقت التوقف عن تشغيل تطبيقك، فاضغط على الاختصار Ctrl+c في الطرفية.

تعرف على تطبيق Angular

توجد ملفات التطبيق التي سنركّز عليها في هذا المقال في المجلد src/app، إذ تتضمن الملفات الأساسية التي تنشئها واجهة CLI تلقائيًا ما يلي:

1. app.module.ts: يحدّد الملفات التي يستخدمها التطبيق، ويعمل هذا الملف على أساس موزّع مركزي للملفات الأخرى في تطبيقك.
2. app.component.ts: المعروف بوصفه صنفًا، ويحتوي على شيفرة صفحة التطبيق الرئيسية.
3. app.component.html: يحتوي على شيفرة HTML الخاصة بالمكوِّن AppComponent، وتُعرَف محتويات هذا الملف بوصفها قالبًا، إذ يحدد القالب العرض أو ما تراه في المتصفح.
4. app.component.css: يحتوي على تنسيق المكوِّن AppComponent، إذ يمكنك استخدام هذا الملف عندما تريد تعريف التنسيق الذي ينطبق على مكوِّن معيّن فقط وليس على تطبيقك الكامل.

يتكون المكوِّن في إطار عمل Angular من ثلاثة أجزاء رئيسية هي القالب والتنسيق والصنف، إذ تشكّل جميع الملفات app.component.ts و app.component.html و app.component.css مثلًا المكوِّن AppComponent، كما تفصل هذه البنية بين الشيفرة البرمجية والعرض والتنسيق بحيث يكون التطبيق أكثر قابلية للصيانة والتوسع، وبالتالي ستستخدِم أفضل الممارسات منذ البداية باستخدام هذه الطريقة.

كما تنشئ واجهة Angular CLI ملفًا لاختبار المكوِّن بالاسم app.component.spec.ts، ولكننا لن نتطرق للاختبار، لذا يمكنك تجاهل هذا الملف.

تنشئ واجهة CLI هذه الملفات الأربعة في مجلد بالاسم الذي تحدده عندما تنشئ مكوِّنًا.

بنية تطبيق Angular

إطار عمل Angular مبني باستخدام لغة TypeScript والتي تُعَدّ مشتقة من لغة جافاسكربت ومُوسِّعة لها، مما يعني أنّ أيّ شيفرة جافاسكربت صالحة هي شيفرة TypeScript صالحة، كما توفر لغة TypeScript أنواعًا وصيغةً أكثر إيجازًا من التي توفرها لغة جافاسكربت، مما يمنحك أداةً لإنشاء شيفرة برمجية أكثر قابليةً للصيانة مع أخطاء أقل.

تُعَدّ المكونات اللبنات الأساسية لتطبيق Angular، إذ يشتمل المكوِّن على صنف TypeScript الذي يحتوي على عنصر التصميم ‎@Component()‎ الذي يحدد البيانات الوصفية له مثل قالب HTML وملف التنسيق.

الصنف

يُعَدّ الصنف المكان الذي تضع فيه أيّ شيفرة برمجية أو منطقًا يحتاجه المكوِّن، ويمكن أن تتضمن هذه الشيفرة دوالًا ومستمعي أحداث وخاصيات ومراجع للخدمات على سبيل المثال. يوجد الصنف في ملف باسم مثل الاسم feature.component.ts، حيث feature هو اسم مكونك، لذا يمكن أن يكون لديك ملفات بأسماء مثل header.component.ts أو signup.component.ts أو feed.component.ts، ويمكنك إنشاء مكوِّن باستخدام عنصر التصميم ‎@Component()‎ الذي يحتوي على بيانات وصفية تخبر إطار Angular بمكان العثور على ملفات HTML وCSS.

إليك المكوِّن التالي:

import { Component } from '@angular/core';

@Component({
  selector: 'app-item',
    // تحدّد البيانات الوصفية التالية موقع الأجزاء الأخرى من المكون
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})

export class ItemComponent {
// ضع شيفرتك البرمجية هنا
}

يسمى هذا المكوِّن بالاسم ItemComponent ومحدّده selector بالاسم app-item، إذ يمكنك استخدام المحددات مثل وسوم HTML العادية من خلال وضعها ضمن قوالب أخرى، ويصيّر Render المتصفحُ قالب ذلك المكوِّن عندما يكون المحدِّد ضمن قالب، كما سنرشدك في المقالات اللاحقة لإنشاء مكوِّنين واستخدام أحدهما ضمن الآخر.

ملاحظة: لاحظ أن اسم المكون في الأعلى ItemComponent هو نفسه اسم الصنف فما السبب؟ ببساطة الاسمان متماثلان لأن المكون ما هو إلا صنف يصفه المزخرف ‎@Component. يوفر نموذج مكونات Angular تغليفًا قويًا وبنية تطبيق سهلة الاستخدام، وتعمل المكونات على تسهيل اختبار الوحدة الخاصة بتطبيقك ويمكنها تحسين قابلية قراءة شيفرتك البرمجية الكلية.

قالب HTML

يحتوي كل مكوِّن على قالب HTML يوضح كيفية تصيير هذا المكوِّن، ويمكنك تعريف هذا القالب إما بطريقة مضمَّنة أو باستخدام مسار ملف.

استخدم الخاصية templateUrl للإشارة إلى ملف HTML خارجي كما يلي:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
}

استخدم الخاصية template واكتب شيفرة HTML بين فواصل عليا مائلة Backticks لكتابة شيفرة HTML مضمّنة كما يلي:

@Component({
  selector: 'app-root',
  template: `<h1>Hi!</h1>`,
})

export class AppComponent {
}

يوسّع إطار عمل Angular لغة HTML باستخدام صيغة إضافية تتيح إدراج قيم ديناميكية من مكونك، كما يحدّث تلقائيًا نموذج DOM المصيَّر عندما تتغير حالة المكون، وأحد استخدامات هذه الميزة هو إدراج نص ديناميكي كما هو موضح في المثال التالي:

<h1>{{ title }}</h1>

توجّه الأقواس المزدوجة المعقوصة إطار عمل Angular لإدخال المحتويات ضمنها، وتأتي قيمة title من صنف المكوِّن:

import { Component } from '@angular/core';

@Component ({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'To do application';
}

يرى المتصفح ما يلي عندما يحمّل التطبيقُ المكوِّنَ وقالبه:

<h1>To do application</h1>

التنسيق

يمكن للمكوِّن أن يرث التنسيق العام من الملف styles.css الخاص بالتطبيق ثم يعدّل أو يعيد كتابته باستخدام تنسيقه الخاص، ويمكنك كتابة تنسيق خاص بالمكوِّن مباشرةً في عنصر التصميم ‎@Component()‎ أو تحديد المسار إلى ملف CSS.

استخدِم الخاصية styles لتضمين التنسيق مباشرةً في عنصر التصميم كما يلي:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: ['h1 { color: red; }']
})

يستخدِم المكوِّن عادةً تنسيقًا موجودًا ضمن ملف منفصل باستخدام الخاصية styleUrls كما يلي:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

يمكنك تنظيم ملف CSS بحيث يسهل صيانته ونقله باستخدام التنسيق الخاص بالمكونات.

الخلاصة

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

ترجمة -وبتصرُّف- للمقال Getting started with Angular.

اقرأ أيضًا

• مبادئ AngularJS
• مقدمة في بناء تطبيقات الويب باستخدام إطار العمل Angular وقاعدة بيانات Firestore
• بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore - إضافة التدوينات وعرضها

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

هذا المقال جزء من سلسلة عن بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore

• مقدمة في بناء تطبيقات الويب باستخدام إطار العمل Angular وقاعدة بيانات Firestore
• بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore - إضافة التدوينات وعرضها
• بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore - تعديل التدوينات
• بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore - إضافة الاستثيثاق
• نشر مدونة مبنية عبر Angular على Firebase

إضافة الملف الشخصي للكاتب

سنعرض الملف الشخصي للكاتب على الصفحة الرئيسية، فنفِّذ الأمر التالي لإنشاء مكون author-profile:

ng g c components/author-profile

سنعرض صورة للكاتب مع روابط لحساباته الاجتماعية، وستأتي الصورة من التطبيق نفسه، ونضعها داخل مجلد src/assets.

افتح الملف component.html وضع الشيفرة التالية فيه:

<mat-card class="rightpanel-card mat-elevation-z2">
 <mat-card-content>
  <h4 class="rightdivtext">
   Author
  </h4>
 </mat-card-content>
 <mat-card-content>
  <div class="authorimagecontainer">
   <img class="authorimage" mat-card-avatar
src="../../../assets/ankit-sharma.jpg">
   <h5>Ankit Sharma</h5>
  </div>
 </mat-card-content>
 <mat-divider></mat-divider>
 <mat-card-content>
  <h4 class="rightdivtext">
   Follow Me
  </h4>
 </mat-card-content>
 <mat-card-content>
  <a href="https://www.facebook.com/Ankit.Sharma.0709"
target="_blank"><i class="fa fa-facebook-square"
 aria-hidden="true"></i></a>
  <a href="https://twitter.com/ankitsharma_007" target="_blank"><i
class="fa fa-twitter-square"
 aria-hidden="true"></i></a>
  <a href="https://www.linkedin.com/in/ankitsharma-007/"
target="_blank"><i class="fa fa-linkedin-square"
 aria-hidden="true"></i></a>
  <a href="https://github.com/AnkitSharma-007" target="_blank"><i
class="fa fa-github-square"
 aria-hidden="true"></i></a>
 </mat-card-content>
</mat-card>

افتح الملف component.scss وضع تعريفات التنسيق التالية فيه:

.fa-twitter-square {
 color: #55acee;
}

.fa-facebook-square {
 color: #3b5998;
}

.fa-linkedin-square {
 color: #0976b4;
}

.fa-github-square {
 color: #333;
}

.fa {
 font-size: 3em;
 width: 1em;
 margin-top: 5px;
 cursor: pointer;
}

.mat-card-avatar {
 width: 100px;
 height: 100px;
 margin: auto
 padding: 5px;
}

.authorimagecontainer {
 text-align: center;
}

.rightdivtext {
 color: #636467;
 text-transform: uppercase;
 padding: 2px;
}

.rightpanel-card {
 margin-bottom: 15px;
}

إذا أردنا عرض الملف الشخصي للكاتب على الصفحة الرئيسية، نحتاج إلى إضافة AuthorProfileComponent إلى HomeComponent.

افتح الملف home.component.html وحدِّث المحتوى الموجود فيه كما يلي:

<div class="row left-panel">
 <div class="col-md-9">
  <app-blog-card></app-blog-card>
 </div>
 <div class="col-md-3">
  <app-author-profile></app-author-profile>
 </div>
</div>

افتح المتصفح لترى الملف الشخصي للكاتب على الجانب الأيمن من الصفحة الرئيسية، وسيعرض الملف الشخصي صورة الكاتب مع روابط حساباته الاجتماعية:

إضافة خيار تمرير إلى أعلى صفحة التدوينة

سنضيف خيارًا للتمرير إلى أعلى صفحة التدوينة عندما يمرر المستخدم الصفحة إلى الأسفل، بحيث يعرض زر Scroll To top، وإذا نقر المستخدم عليه ينقله إلى أعلى الصفحة بتأثير انتقال ناعم وسلس.

نفّذ الأمر التالي لإنشاء مكون التمرير:

ng g c components/Scroller

افتح الملف component.ts واستبدل الشيفرة التالية بالموجودة فيه:

import { Component, HostListener } from '@angular/core';

@Component({
 selector: 'app-scroller',
 templateUrl: './scroller.component.html',
 styleUrls: ['./scroller.component.scss']
})
export class ScrollerComponent {

 showScroller: boolean;
 showScrollerPosition = 100;

 @HostListener('window:scroll')
 checkScroll() {
  const scrollPosition = window.pageYOffset ||
document.documentElement.scrollTop || document.body.scrollTop || 0;

  if (scrollPosition >= this.showScrollerPosition) {
    this.showScroller = true;
  } else {
    this.showScroller = false;
  }
 }

 gotoTop() {
  window.scroll({
   top: 0,
   left: 0,
   behavior: 'smooth'
  });
 }
}

سنعيِّن قيمة المتغير showScrollerPosition لتكون 100، وهي تمثل عدد البكسلات التي يكون الممرِّر مرئيًا بعدها، وسيراقب التابع checkScroll أحداث التمرير باستخدام المزخرِف ‎@HostListener، ونحسب موضع التمرير الحالي للصفحة، فإن كان أكبر من showScrollerPosition فإننا نعرض زر التمرير إلى الأعلى على الصفحة، ويعيّن التابع gotoTop سلوك الممرِّر، بحيث يمرِّر الصفحة إلى الأعلى بتأثير ناعم.

افتح الملف scroller.component.html واستبدل الشيفرة التالية بالموجود فيه:

<div *ngIf="showScroller" (click)="gotoTop()" class="scroll-to-top"><i class="fa fa-angle-up"></i></div>

افتح الملف scroller.component.scss وضع الشيفرة التالية فيه:

.scroll-to-top {
 display: block;
 background: rgba(100, 100, 100, 0.4);
 color: #ffffff;
 bottom: 4%;
 cursor: pointer;
 position: fixed;
 right: 20px;
 z-index: 999;
 font-size: 24px;
 text-align: center;
 width: 45px;
 height: 45px;
 border-radius: 50%;

 .fa {
  font-weight: 900;
 }
}

.scroll-to-top:hover {
 background-color: #b2b2b2;
}

سنضيف الآن ScrollerComponent إلى BlogComponent، فافتح الملف blog.component.html وأضف السطر التالي في نهاية الملف:

<app-scroller></app-scroller>

وهكذا نكون قد أنشأنا ممرِّرًا لصفحة التدوينة بنجاح، وسنرى في القسم التالي عرضًا لذلك الممرِّر مع خاصية التعليقات.

نشر التعليقات على التدوينة

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

إنشاء نموذج التعليق

أنشئ الملف comment.ts وضع الشيفرة التالية فيه:

export class Comments {
 commentId: string;
 blogId: string;
 email: string;
 commentedBy: string;
 content: string;
 commentDate: any;
}

إنشاء خدمة التعليقات

سننشئ خدمة تتولى معالجة العمليات المتعلقة بقاعدة البيانات فيما يخص التعليقات، فنفّذ الأمر التالي لإنشاء هذه الخدمة:

ng g s services/Comment

افتح الملف comment.service.ts وأضف تعليمات الاستيراد التالية في أعلاه:

import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Comments } from '../models/comment'

والآن، أضف تعريفات التوابع التالية داخل الصنف CommentService:

export class CommentService {

 constructor(private db: AngularFirestore) { }

 saveComment(comment: Comments) {
  const commentData = JSON.parse(JSON.stringify(comment));
  return this.db.collection('comments').add(commentData);
 }

 getAllCommentsForBlog(blogId: string): Observable<Comments[]> {
  const comments = this.db.collection<Comments>('comments',
   ref => ref.where('blogId', '==', blogId).orderBy('commentDate',
'desc')).snapshotChanges().pipe(
    map(actions => {
     return actions.map(
      c => ({
       commentId: c.payload.doc.id,
       ...c.payload.doc.data()
      }));
    }));
  return comments;
 }

 deleteAllCommentForBlog(blogId: string) {
  const commentsToDelete = this.db.collection('comments', ref =>
ref.where('blogId', '==', blogId)).snapshotChanges();
  commentsToDelete.forEach(
   commentList => {
    commentList.forEach(comment => {
     this.db.doc('comments/' + comment.payload.doc.id).delete();
     });
   }
  );
 }

 deleteSingleComment(commentId: string) {
  return this.db.doc('comments/' + commentId).delete();
 }
}

سيقبل التابع saveComment كائنًا من النوع Comments كمعامِل، وسنحلل المعامِل إلى كائن JSON ونضيفه إلى تجميعة comments في قاعدة بياناتنا، فإذا كانت التجميعة موجودة مسبقًا فسيضاف كائن JSON إليها، أما إذا لم تكن موجودة في قاعدة البيانات فسينشئ تابع الإضافة تجميعة ويضيف الكائن الجديد إليها.

سيقبل التابع getAllCommentsForBlog معرِّف التدوينة كمعامِل، وسيستعلم هذا التابع في تجميعة comments ويعيد قائمة بجميع التعليقات المتوافقة مع معرِّف التدوينة الممرر إليه. ويرتب commentDate قائمة التعليقات تنازليًا وفق التاريخ، لضمان عرض التعليق الأخير في قمة التعليقات.

يقبل التابع deleteAllCommentForBlog معرِّف التدوينة كمعامِل له، ويحذف جميع التعليقات من تجميعة comments وفقًا لمعرِّف التدوينة الممرر إليه، أما التابع deleteSingleComment فسيأخذ معرِّف التعليق كمعامِل له، ويحذف تعليقًا واحدًا من تجميعة comments وفقًا لمعرِّف التعليق الذي مُرِّر إليه.

إنشاء مكون التعليق

نفِّذ الأمر التالي لإنشاء مكون التعليقات الذي يعالج التعليقات التي ينشرها المستخدم:

ng g c components/Comments

افتح الملف comments.component.ts وأضف تعليمات الاستيراد التالية في أعلاه:

import { Input, OnDestroy } from '@angular/core';
import { DatePipe } from '@angular/common';
import { AppUser } from 'src/app/models/appuser';
import { Comments } from 'src/app/models/comment';
import { CommentService } from 'src/app/services/comment.service';
import { AuthService } from 'src/app/services/auth.service';
import { SnackbarService } from 'src/app/services/snackbar.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

أضف مزود DataPipe في قسم مزخرِف ‎@component كما يلي:

@Component({
 ...
 providers: [DatePipe]
}

سنحدِّث الآن صنف CommentsComponent كما يلي:

export class CommentsComponent implements OnInit, OnDestroy {

 @Input()
 blogId;

 appUser: AppUser;
 public comments = new Comments();
 commentList: Comments[] = [];
 private unsubscribe$ = new Subject<void>();

 constructor(private datePipe: DatePipe,
  private commentService: CommentService,
  private authService: AuthService,
  private snackBarService: SnackbarService) { }
}

سيقبل هذا المكون معرِّف التدوينة blogId كمُدخَل له، وسنحقن الخدمات في منشئ الصنف، والآن، أضف تعريفات التوابع التالية داخل الصنف CommentsComponent:

ngOnInit() {
 this.authService.appUser$.subscribe(appUser => this.appUser =
appUser);
 this.getAllComments();
}

onCommentPost(commentForm) {
 this.comments.commentDate = this.datePipe.transform(Date.now(), 'MMdd-yyyy HH:mm:ss');
 this.comments.blogId = this.blogId;
 this.commentService.saveComment(this.comments).then(
  commentForm.resetForm()
 );
}

getAllComments() {
 this.commentService.getAllCommentsForBlog(this.blogId)
  .pipe(takeUntil(this.unsubscribe$))
  .subscribe(result => {
   this.commentList = result;
  });
}

deleteComment(commentId) {
 if (confirm('Do you want to delete this comment!!!')) {
  this.commentService.deleteSingleComment(commentId).then(
   () => {
    this.snackBarService.showSnackBar('Comment Deleted
successfully');
   }
 );
 }
}

login() {
 this.authService.login();
}

ngOnDestroy() {
 this.unsubscribe$.next();
 this.unsubscribe$.complete();
}

سنعيّن commentDate داخل التابع onCommentPost ليكون التاريخ الحالي، ونعيّن خاصية blogId الخاصة بكائن التعليق لتكون معرِّف التدوينة التي نُشر عليها التعليق، وسنستدعي التابع saveComment الخاص بالخدمة CommentService ليخزن التعليق في قاعدة البيانات.

كذلك فإن التابع getAllComments سيستدعي getAllCommentsForBlog من الخدمة CommentService ويستخدم blogId كمعامِل، وسيجلب هذا التابع قائمة التعليقات المنشورة على التدوينة.

سيسمح التابع deleteComment لنا بحذف تعليق بعينه، وسيعرض صندوق تأكيد يستدعي التابع deleteSingleComment من الخدمة CommentService إذا أكد المستخدم خيار حذف ذلك التعليق. أما التابع login فسيسمح للمستخدم أن يسجل الدخول إلى التطبيق باستخدام حساب جوجل.

افتح الملف comments.component.html واستبدل الشيفرة التالية بالموجودة فيه:

<ng-template #anonymousUser>
 <mat-card class="comment-card mat-elevation-z2">
  <a (click)="login()">Login with Google</a> to post comments
 </mat-card>
</ng-template>
<mat-card *ngIf="appUser; else anonymousUser" class="comment-card matelevation-z2">
 <mat-card-title>
 LEAVE A REPLY
 </mat-card-title>
 <mat-card-subtitle>
 Your email address will not be published. Required fields are
marked *
 </mat-card-subtitle>
 <mat-card-content>
  <form #commentForm="ngForm" (ngSubmit)="commentForm.form.valid
&& onCommentPost(commentForm)" novalidate>
   <mat-form-field class="full-width">
    <input matInput placeholder="Name" name="commentedBy"
[(ngModel)]="comments.commentedBy"
 #commentedBy="ngModel" required>
    <mat-error *ngIf="commentForm.submitted &&
commentedBy.errors?.required">Name is required</mat-error>
   </mat-form-field>
 <mat-form-field class="full-width">
  <input matInput placeholder="Email" name="email"
[(ngModel)]="comments.email" #email="ngModel" email
 required>
 <mat-error *ngIf="commentForm.submitted &&
email.errors?.required">Email is required</mat-error>
 <mat-error *ngIf="commentForm.submitted &&
email.errors?.email">Invalid email</mat-error>
 </mat-form-field>
 <mat-form-field class="full-width">
  <textarea matInput placeholder="Comment" name="content"
[(ngModel)]="comments.content"
 #content="ngModel" required></textarea>
  <mat-error *ngIf="commentForm.submitted &&
content.errors?.required">Comment is required</mat-error>
 </mat-form-field>
 <mat-card-actions>
  <button type="
 submit" mat-raised-button color="primary">Post
Comment</button>
   </mat-card-actions>
  </form>
 </mat-card-content>
</mat-card>
<mat-card *ngFor="let comment of commentList" class="comment-card matelevation-z2">
 <mat-card-title>
  <div class="comment-card-title">
   <div>
    {{comment.commentedBy}}
   </div>
   <div *ngIf="appUser?.isAdmin">
    <button mat-icon-button matTooltip="Delete comment"
matTooltipPosition="before" color="accent"
 (click)="deleteComment(comment.commentId)">
     <mat-icon>delete</mat-icon>
    </button>
   </div>
  </div>
 </mat-card-title>

 <mat-card-subtitle>{{comment.commentDate | date:'medium'}}</matcard-subtitle>
 <mat-card-content>
  <p>{{comment.content}}</p>
 </mat-card-content>
</mat-card>

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

ونحن نستخدم استمارة قالبية template-driven لالتقاط تعليقات المستخدم، وهي تستدعي التابع onCommentPost عند الإرسال الناجح، وستحتوي الاستمارة على الحقول الثلاثة التالية:

• Name: هذا الحقل إجباري ويُستخدم لالتقاط اسم الشخص الذي ينشر التعليق.
• Email: هذا الحقل إجباري ويُستخدم لالتقاط بريد الشخص الذي ينشر التعليق.
• Comment: هذا الحقل إجباري أيضًا ويُستخدم لالتقاط نص التعليق.

سنعرض التعليقات المنشورة على التدوينة في تخطيط بطاقة باستخدام العنصر <mat-card>، وسنعرض اسم الشخص الذي ينشر التعليق وتاريخ ذلك النشر ونص التعليق نفسه، وتُعرض قائمة التعليقات أسفل استمارة التعليق مباشرة. أما إذا كان المستخدم له صلاحية المدير فسنعرض أيقونة حذف في كل تعليق لتمكينه من حذف التعليق.

افتح الملف comments.component.scss وانسخ الشيفرة التالية فيه:

a:not([href]):not([tabindex]) {
 text-decoration: underline;
 cursor: pointer;
 color: #1565C0;
}
.comment-card-title{
 display: flex;
 justify-content: space-between;
}

.comment-card {
 margin: 10px 0 15px 0;
}

.full-width {
 width: 100%;
}

سنضيف الآن المكون CommentsComponent إلى BlogComponent، فافتح الملف blog.component.html وأضف الشيفرة التالية في نهاية الملف، مباشرة قبل السطر الذي أضفنا فيه مكون الممرِّر من قبل ScrollerComponent:

<mat-divider></mat-divider>
<app-comments [blogId]="postId"></app-comments>

تحديث مكون قائمة التدوينات

سنضيف الآن خاصية حذف جميع التعليقات المرتبطة بتدوينة عند حذف تلك التدوينة، فافتح الملف blogcard.component.ts وأضف تعريفات الاستيراد الخاصة بالخدمة CommentService، وسنحقن الخدمة في المنشئ:

import { CommentService } from 'src/app/services/comment.service';
...
constructor(
 // حقن خدمة
 private commentService: CommentService) { }

نحدِّث الآن تابع الحذف داخل صنف BlogCardComponent، ونستدعي التابع deleteAllCommentForBlog المعرَّف في CommentService، فأضف سطر الشيفرة التالي داخل كتلة التابع delete، مباشرة قبل استدعاء التابع showSnackBar، وذلك لضمان أن جميع التعليقات المرتبطة بتدوينة تُحذف عند حذف التدوينة نفسها.

this.commentService.deleteAllCommentForBlog(postId);

إنشاء فهرس في قاعدة بيانات Firebase

إذا فتحنا المتصفح الآن وانتقلنا إلى صفحة تفاصيل التدوينة سنحصل على خطأ في طرفية المتصفح يقول "ERROR FirebaseError: The query requires an index":

بما أننا نستخدم شرط where مع معامل تساوي داخل التابع getAllCommentsForBlog، فنحتاج إلى إنشاء فهرس في قاعدة بياناتنا، وهذا الفهرس ضروري كي يعمل استعلامنا، ونستطيع أن نرى أن رسالة الخطأ توفر رابطًا لإنشاء الفهرس كذلك، فإذا نقرنا على ذلك الرابط سننتقل إلى طرفية firebase، كما نرى في لقطة الشاشة التالية:

هنا نرى نافذة Create a composite index على الشاشة مع إعدادات الفهرس، فانقر على زر Create index لإنشاء الفهرس، وسيستغرق ذلك بضع دقائق لبنائه، ثم بمجرد تمام إنشائه تتغير حالة الفهرس إلى Enabled:

اختبار التعليقات

افتح المتصفح وسجل الخروج من التطبيق إذا كنت قد سجلت الدخول إليه، وانتقل إلى صفحة أي تدوينة، ثم مرر إلى أسفل الصفحة، يجب أن ترى زر scroll to top على الجانب الأيمن من الصفحة، فإذا نقرت على ذلك الزر ستعود الصفحة إلى الأعلى بتأثير انتقال ناعم، انظر الصورة أدناه:

كذلك تستطيع أن ترى رسالة تطلب منك تسجيل الدخول بحساب جوجل لتتمكن من نشر التعليقات، فسجل الدخول به لترى نموذج نشر التعليق. اكتب تفاصيل التعليق واضغط على زر Post Comment ليُنشر التعليق ويُعرض في بطاقة تحت النموذج مباشرة.

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

إضافة خيار مشاركة للتدوينة

سنضيف الآن خاصية مشاركة التدوينة بحيث نوفر خيار المشاركة من خلال الشبكات الاجتماعية والبريد الإلكتروني، ونستخدم لذلك مكتبة ngx-sharebuttons لإضافة خيار النشر، وهي مكتبة مفتوحة المصدر تزودنا بحل جاهز لإضافة أزرار النشر وأيقوناته لأغلب منصات الرسائل والشبكات الاجتماعية.

تثبيت ngx-sharebuttons

نفذ الأمر التالي لتثبيت حزم ngx-share:

npm i -S @ngx-share/core @ngx-share/button @ngx-share/buttons
@angular/cdk

كما سنثبت حزم الأيقونات باستخدام الأمر التالي:

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/angularfontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brandssvg-icons

استورد السمة الخاصة بأزرار المشاركة إلى التنسيق العام في الملف app/src/style.scss:

@import '~@ngx-share/button/themes/circles/circles-dark-theme';

كذلك، استورد كلًا من ShareButtonsModule و ShareButtonsConfig و HttpClientModule إلى الملف src/app/app.module.ts. سننشئ إعدادات خاصة للوحدة ShareButtonsModule كما يظهر في الشيفرة التالية:

import { ShareButtonsConfig, ShareModule } from '@ngx-share/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { HttpClientModule } from '@angular/common/http';

const customConfig: ShareButtonsConfig = {
 twitterAccount: 'ankitsharma_007'
};

@NgModule({
 ...
 imports: [
  ...
  HttpClientModule,
  FontAwesomeModule,
  ShareModule.withConfig(customConfig),
 ],
})

سنعيِّن اسم حساب تويتر twitterAccount الخاص بكاتب التدوينة في الإعدادات المخصصة، وذلك لضمان الإشارة إلى ذلك الحساب في كل مرة ننشر فيها تدوينة على موقع تويتر.

إنشاء مكون social-share

نفذ الأمر التالي لإنشاء مكون social-share:

ng g c components\social-share

افتح الملف social-share.component.html وضع الشيفرة التالية فيه:

<p><strong>Found this article helpful!!! Share this with your Friends</strong></p>

<button mat-fab shareButton="facebook" [style.backgroundColor]="share.prop.facebook.color">
 <fa-icon [icon]="share.prop.facebook.icon" size="lg"></fa-icon>
</button>
<button mat-fab shareButton="twitter" [style.backgroundColor]="share.prop.twitter.color">
 <fa-icon [icon]="share.prop.twitter.icon" size="lg"></fa-icon>
</button>
<button mat-fab shareButton="linkedin" [style.backgroundColor]="share.prop.linkedin.color">
 <fa-icon [icon]="share.prop.linkedin.icon" size="lg"></fa-icon>
</button>
<button mat-fab shareButton="reddit"
[style.backgroundColor]="share.prop.reddit.color">
 <fa-icon [icon]="share.prop.reddit.icon" size="lg"></fa-icon>
</button>
<button mat-fab shareButton="whatsapp" [style.backgroundColor]="share.prop.whatsapp.color">
 <fa-icon [icon]="share.prop.whatsapp.icon" size="lg"></fa-icon>
</button>
<button mat-fab shareButton="telegram" [style.backgroundColor]="share.prop.telegram.color">
 <fa-icon [icon]="share.prop.telegram.icon" size="lg"></fa-icon>
</button>
<button mat-fab shareButton="print" [style.backgroundColor]="share.prop.print.color">
 <fa-icon [icon]="share.prop.print.icon" size="lg"></fa-icon>
</button>
<button mat-fab shareButton="email" [style.backgroundColor]="share.prop.email.color">
 <fa-icon [icon]="share.prop.email.icon" size="lg"></fa-icon>
</button>

سنضيف SocialShareComponent في BlogComponent، فافتح الملف blog.component.html وضع السطر التالي فيه، مباشرة قبل وسم <mat-divider>.

<app-social-share></app-social-share>

إعداد حزمة الأيقونات

تستخدم مكتبة ngx-sharebuttons على المستوى الداخلي مكتبة FortAwesome/angularfontawesome لحزم أيقوناتها، لذا نحتاج إلى إعداد حزم أيقونات fontawesome في SocialShareComponent من أجل استخدام أيقوناتها لأزرار المشاركة.

أنشئ ملفًا جديدًا باسم icons.ts داخل مجلد src، وضع فيه الشيفرة التالية:

import { faTelegramPlane } from '@fortawesome/free-brands-svgicons/faTelegramPlane';
import { faFacebookF } from '@fortawesome/free-brands-svgicons/faFacebookF';
import { faTwitter } from '@fortawesome/free-brands-svgicons/faTwitter';
import { faRedditAlien } from '@fortawesome/free-brands-svgicons/faRedditAlien';
import { faLinkedinIn } from '@fortawesome/free-brands-svgicons/faLinkedinIn';
import { faWhatsapp } from '@fortawesome/free-brands-svgicons/faWhatsapp';
import { faPrint } from '@fortawesome/free-solid-svg-icons/faPrint';
import { faEnvelope } from '@fortawesome/free-solid-svgicons/faEnvelope';

export const iconpack = [
 faFacebookF, faTwitter, faLinkedinIn, faRedditAlien,
 faTelegramPlane, faWhatsapp, faEnvelope, faPrint
];

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

افتح الملف social-share.component.ts وأضف تعليمة الاستيراد التالية في أعلاه:

import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { iconpack } from 'src/icons';
import { ShareService } from '@ngx-share/core';

حدِّث منشئ الصنف SocialShareComponent كما يلي:

constructor(library: FaIconLibrary, public share: ShareService) {
 library.addIcons(...iconpack);
}

افتح الملف social-share.component.scss وأضف تعريفات التنسيق التالية:

button{
 margin: 5px;
}

اختبار أيقونات المشاركة

افتح المتصفح وانتقل إلى صفحة أي تدوينة ومرِّر إلى الأسفل، سترى قائمة من أزرار النشر معروضة فيها، وستحصل على خيارات النشر التي أعددناها من قبل، انظر الصورة التالية:

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

كما ترى فقد تمت الإشارة إلى حساب ‎@ankitsharma_007 (صاحب التدوينة) على تويتر، وخاصية الإشارة إلى الحساب تلك متاحة في تويتر فقط.

نشر التطبيق على Firebase

تتبقى آخر خطوة وهي نشر التطبيق على Firebase، من خلال الخطوات الموضحة أدناه:

الخطوة الأولى، ثبّت أدوات firebase CLI من خلال npm، كما يلي:

npm install -g firebase-tools

الخطوة الثانية، شغّل الأمر التالي لبناء التطبيق بإعدادات الإنتاج:

ng build --prod

سيعين الخيار prod إعدادات البناء إلى هدف الإنتاج، وهو مُعد في إعدادات مساحة العمل بحيث تستفيد جميع عمليات البناء من الربط bundling، وعمليات الإزالة المحدودة للشيفرة الميتة Dead Code -وهي عملية تحذف الشيفرة التي لا تؤثر على نتيجة البرنامج-، وكذلك عمليات حت الأشجار المحدود tree shaking -وهو مصطلح في جافاسكربت لنفس مفهوم إزالة الشيفرة الميتة.

الخطوة الثالثة، افتح نافذة الطرفية داخل مجلد ‎/blogsite/dist، وشغّل الأمر التالي لتسجيل الدخول إلى firebase:

firebase login

سيفتح ذلك نافذة متصفح تطلب تسجيل الدخول إلى firebase باستخدام حساب جوجل. بعد التسجيل، ارجع إلى الطرفية لتنفيذ الأمر التالي.

الخطوة الرابعة، نفّذ الأمر التالي لتهيئة التطبيق:

firebase init

سيبدأ هذا الأمر مشروع firebase، وسيُطلب منك بضعة أسئلة، فأجب عليها كما يلي:

• Are you ready to proceed?‎ أدخل y
• ?Which Firebase CLI features do you want to set up for this folder اختر Hosting
• Please select an option اختر use an existing project
• Select a default Firebase project for this directory: اختر اسم مشروعك من القائمة.
• ?What do you want to use as your public directory اختر blogsite.
• ?Configure as a single-page app (rewrite all urls to /index.html) أدخل y
• ?File blogsite/index.html already exists. Overwrite أدخل N. ستحصل الآن على رسالة Firebase initialization complete.

الخطوة الخامسة، انشر التطبيق على firebase، من خلال الأمر التالي:

firebase deploy

هذا الأمر سينشر التطبيق على Firebase، وسيعطيك رابط استضافة، فانتقل إليه لترى التطبيق منشورًا هناك، انظر الصورة التالية:

كذلك تستطيع الوصول إلى رابط الاستضافة من لوحة تحكم firebase، فانتقل إلى صفحة Page Overview الخاصة بمشروع Firebase واختر Hosting من قائمة Develop. تستطيع رؤية أسماء النطاقات لتطبيق الويب الخاص بك على اليمين.

خاتمة

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

ترجمة -وبتصرف- لفصول من كتاب Build a full stack web application using angular and firebase لصاحبه Ankit Sharma.

اقرأ أيضًا

• بناء تطبيق ويب كامل باستخدام Angular ومنصة Firebase
• ما هي Angular؟
• تهيئة بيئة تطبيقات Angular ونشرها على الويب

تعلمنا في الجزء الأول من هذا المقال كيفية بناء مدونة كتطبيق وحيد الصفحة باستخدام إطار العمل Angular للواجهة الأمامية، وقاعدة بيانات Firestore، وإضافة محرر للمدونة، ثم إضافة تدوينات جديدة وعرضها على الصفحة الرئيسية، ثم إضافة ميزات للتعديل على التدوينات وحذفها وتنسيق التدوينات في الصفحة الرئيسية وسنكمل في هذا الجزء العمل على المدونة وسنتعلم كيفية إضافة الاستيثاق authentication لتقييد وصول المستخدمين إلى المدونة وإعطاء كل مستخدم صلاحيات مناسبة لإضافة التدونيات والتعديل عليها.

هذا المقال جزء من سلسلة عن بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore

• مقدمة في بناء تطبيقات الويب باستخدام إطار العمل Angular وقاعدة بيانات Firestore.
• بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore - إضافة التدوينات وعرضها.
• بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore - تعديل التدوينات.
• بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore - إضافة الاستثيثاق.
• نشر مدونة مبنية عبر Angular على Firebase

إضافة استيثاق جوجل

سنضيف الآن ميزة التسجيل بحساب جوجل إلى التطبيق الخاص بنا، ونحتاج هنا إلى تفعيل خاصية الاستيثاق authentication من طرفية Firebase كما يلي:

1. انتقل إلى صفحة Project Overview الخاصة بمشروع Firebase.
2. في القائمة اليسرى، تحت تبويب Develop، اختر Authentication.
3. انتقل إلى التبويب Sign-in method.
4. اختر Google من القائمة التي تظهر تحته.
5. انقر على زر Enable المقابل لخيار Google، ثم انقر على Save للحفظ.

سنهيئ التطبيق الآن ليستخدم استيثاق جوجل من Firebase.

إنشاء نموذج AppUser

أنشئ الملف appuser.ts وضع الشيفرة التالية فيه:

export class AppUser {
 name: string;
 email: string;
 isAdmin: boolean;
 photoURL: string;
}

إنشاء خدمة الاستيثاق

لإنشاء خدمة تعالج عملية الاستيثاق، نكتب الأمر التالي:

ng g s services/auth

افتح الملف auth.service.ts وضع تعريفات الاستيراد التالية فيه:

import { AppUser } from '../models/appuser';
import { Observable, of } from 'rxjs';
import { AngularFireAuth } from '@angular/fire/auth';
import { ActivatedRoute, Router } from '@angular/router';
import { AngularFirestore } from '@angular/fire/firestore';
import { switchMap } from 'rxjs/operators';
import * as firebase from 'firebase/app';

صرِّح عن الكائن الملاحَظ observable الذي من النوع AppUser في الصنف AuthService كما يلي:

appUser$: Observable<AppUser>;

ثم احقن الخدمات في المنشئ:

constructor(
 public afAuth: AngularFireAuth,
 private route: ActivatedRoute,
 private router: Router,
 private db: AngularFirestore
)

يحصل الكائن الملاحَظ appUser$‎ على حالة الاستيثاق للمستخدم، فإذا كان قد سجل دخوله سيجلب بيانات المستخدم من قاعدة بيانات Firebase، وإلا يعيد قيمة غير معرَّفة null:

this.appUser$ = this.afAuth.authState.pipe(
 switchMap(user => {
 if (user) {
   return this.db.doc<AppUser>(`appusers/${user.uid}`).valueChanges();
 } else {
   return of(null);
   }
 })
);

كذلك، سنضيف التابع updateUserData لحفظ بيانات المستخدم في قاعدة بياناتنا عند نجاح تسجيل الدخول، فنخزن الاسم وعنوان البريد ورابط الصورة التي في حساب جوجل لكل مستخدم في قاعدة البيانات.

نضيف التابع updateUserData كما يلي:

private updateUserData(user) {
 const userRef = this.db.doc(`appusers/${user.uid}`);
 const data = {
  name: user.displayName,
  email: user.email,
  photoURL: user.photoURL
 };
 return userRef.set(data, { merge: true });
}

ونحن نخزن هذه البيانات لسببين:

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

أضف تعريف التابع التالي لتسجيل الدخول والخروج في صنف AuthService كما يلي:

async login() {
 const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl')
|| this.router.url;
 localStorage.setItem('returnUrl', returnUrl);

 const credential = await this.afAuth.auth.signInWithPopup(new
firebase.auth.GoogleAuthProvider());
 return this.updateUserData(credential.user);
}

async logout() {
 await this.afAuth.auth.signOut().then(() => {
  this.router.navigate(['/']);
 });
}

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

سيستوثق التابع signInWithPopup من عميل Firebase باستخدام تدفق توثيق OAuth منبثق -popup-based OAuth authentication flow-، فإذا نجحت عملية تسجيل الدخول سيعيد مستخدمًا مسجَّلًا دخوله مع اعتماديات المزود، أما إذا فشل فسيعيد كائن خطأ يحتوي على معلومات حول هذا الخطأ، وسينفذ التابع logout عملية تسجيل الخروج للمستخدم الحالي ويوجهه إلى الصفحة الرئيسية.

تحديث AppComponent

افتح الملف app.component.ts وأضف تعريفات الاستيراد التالية في بدايته:

import { AuthService } from './services/auth.service';
import { Router } from '@angular/router';

ثم احقن الخدمات في المنشئ كما يلي:

constructor(
 private authService: AuthService,
 private router: Router
) { }

سنشترك في الكائن الملاحَظ appUser$‎ داخل التابع ngOnInit الخاص بالصنف AppComponent كما يلي:

this.authService.appUser$.subscribe(user => {
 if (!user) {
   return;
 } else {
   const returnUrl = localStorage.getItem('returnUrl');
   if (!returnUrl) {
     return;
   }
   localStorage.removeItem('returnUrl');
   this.router.navigateByUrl(returnUrl);
   }
});

إذا كان المستخدم قد سجل دخوله فسنجلب قيمة الرابط المعاد من الذاكرة المحلية، فإذا كان ذلك الرابط متاحًا يُوجَّه المستخدم إليه، ثم نحذف الرابط من الذاكرة المحلية.

إضافة زر تسجيل الدخول في شريط التنقل

افتح الملف nav-bar.component.ts وأضف تعريفات الاستيراد التالية في بدايته:

import { AuthService } from 'src/app/services/auth.service';
import { AppUser } from 'src/app/models/appuser';

سنصرِّح عن خاصية تحتفظ ببيانات المستخدم، كما سنحقن AuthService في المنشئ، انظر الشيفرة التالية:

appUser: AppUser;

constructor(private authService: AuthService) {}

كما سنشترك في الكائن appUser$‎ الخاص بالخدمة AuthService ونعيِّن الخاصية appUser، فنفِّذ الواجهة OnInit على صنف NavBarComponent، وأضف السطر التالي إلى التابع ngOnInit:

this.authService.appUser$.subscribe(appUser => this.appUser = appUser);

كما سنضيف التابع من أجل معالجة تسجيل الدخول والخروج من تطبيقنا داخل الصنف NavBarComponent كما يلي:

login() {
 this.authService.login();
}

logout() {
 this.authService.logout();
}

سنحدِّث الآن قالب شريط التنقل، فافتح الملف الملف nav-bar.component.html واستبدل الشيفرة التالية بالموجود فيه:

<mat-toolbar class="nav-bar mat-elevation-z2">
 <button mat-button [routerLink]='["/"]'> My blog </button>
 <ng-container *ngIf="appUser">
  <button mat-button [routerLinkActive]='["link-active"]'
[routerLink]='["/addpost"]'>
   Add Post
  </button>
 </ng-container>
 <span class="spacer"></span>

 <ng-template #anonymousUser>
  <button mat-button (click)="login()">Login with Google</button>
 </ng-template>
 <ng-container *ngIf="appUser; else anonymousUser">
  <img mat-card-avatar class="user-avatar" src={{appUser.photoURL}}>
  <button mat-button [matMenuTriggerFor]="menu">
 {{appUser.name}}<mat-icon>arrow_drop_down</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
   <button mat-menu-item (click)=logout()>Logout</button>
  </mat-menu>
 </ng-container>
</mat-toolbar>

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

سنضيف تعريف التنسيق التالي في الملف nav-bar.component.scss:

.user-avatar {
 height: 40px;
 width: 40px;
 border-radius: 50%;
 flex-shrink: 0;
}

تحديث نموذج التطبيق

استورد AngularFireAuthModule إلى الملف app.module.ts كما يلي:

import { AngularFireAuthModule } from '@angular/fire/auth';

@NgModule({
  ...
  imports: [
   ...
   AngularFireAuthModule,
  ],
})

المستخدم ذو صلاحيات التحرير والحذف

افتح الملف blog-card.component.ts وأضف تعريفي الاستيراد التاليين:

import { AppUser } from 'src/app/models/appuser';
import { AuthService } from 'src/app/services/auth.service';

سنصرِّح عن خاصية في صنف BlogCardComponent -كما في مكون شريط التنقل-، ونحقن AuthService في المنشئ، انظر الشيفرة التالية:

appUser: AppUser;

constructor(
 // خدمات أخرى
 private authService: AuthService) {}

سنشترك في الكائن الملاحَظ appUser$‎ من AuthService ونعيّن الخاصية appUser، فأضف السطر التالي إلى التابع ngOnInit الخاص بالصنف BlogCardComponent.

this.authService.appUser$.subscribe(appUser => this.appUser = appUser);

ثم افتح الملف blog-card.components.html وأضف توجيه ngIf إلى الوسم <ng-container>، وهو يحتوي أزرار Edit و Delete، وذلك لقصر استخدام هذين الزرين على المستخدمين الذين سجلوا دخولهم.

<ng-container *ngIf="appUser">

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

الحصول على اسم الكاتب

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

أضف تعريفات الاستيراد التالية إلى الملف blog-card.components.ts:

import { AuthService } from 'src/app/services/auth.service';
import { AppUser } from 'src/app/models/appuser';

سنصرِّح عن خاصية لتحتوي بيانات المستخدم، ثم نحقن AuthService في المنشئ الخاص بالمكون BlogEditorComponent. كذلك، سنشترك في الكائن الملاحَظ appUser$‎ من AuthService، ونعيّن الخاصية appUser، انظر الشيفرة أدناه:

appUser: AppUser;

constructor(
 // حقن آخر للخدمات
 private authService: AuthService) { }

 ngOnInit() {
 ...
 this.authService.appUser$.subscribe(appUser => this.appUser =
appUser);
}

نعيّن خاصية الكاتب للكائن postData أثناء حفظ التدوينة الجديدة، فأضف السطر التالي داخل قسم else من التابع saveBlogPost، مباشرة قبل استدعاء التابع createPost الخاص بالصنف BlogService.

this.postData.author = this.appUser.name;

أضف السطر التالي في الملف blog.component.html، بعد السطر الذي نربط فيه createdDate داخل الوسم <mat-card-subtitle>. يُستخدم هذا لعرض اسم الكاتب إلى جانب تاريخ إنشاء التدوينة.

<i class="fa fa-user" aria-hidden="true"></i> {{postData.author}}

تأمين الوجهات

سنضيف حاجز استيثاق auth guard إلى التطبيق لتقييد الوصول غير المصرح له إلى وجهات routes بعينها لا يجب على أي مستخدم الوصول لها خصوصًا المستخدم غير المسجل.

شغِّل الأمر التالي لإضافة حاجز جديد:

ng g g guards/auth --implements CanActivate

افتح الملف src/app/guards/auth.guard.ts وأضف تعريفات الاستيراد التالية:

import { Router } from '@angular/router';
import { AuthService } from '../services/auth.service';
import { map } from 'rxjs/operators';

أضف منشئًا في الصنف AuthGuard، واحقن Router و AuthService في المنشئ كما يلي:

constructor(
 private router: Router,
 private authService: AuthService
) { }

سنحدِّث التابع canActivate ليعالج الوصول غير المصدَّق له unauthenticated إلى الوجهات فأضف الشيفرة التالية إلى هذا التابع:

return this.authService.appUser$.pipe(map(user => {
 if (user) {
  return true;
 }
 this.router.navigate(['/'], { queryParams: { returnUrl: state.url }
});
 return false;
}));

سنشترك في الكائن appUser$‎ لجلب حالة الاستيثاق authentication state للمستخدم، فإذا سجل المستخدم الدخول نعيد true، أما إذا لم يسجل الدخول فتحدث ثلاثة أشياء:

• نعيّن معامِل استعلام query parameter يسمى returnUrl على قيمة الرابط الحالي.
• ننقل المستخدم إلى الصفحة الرئيسية.
• نعيد false من التابع.

إضافة حواجز الوجهة route guards في نموذج التطبيق

إذا أردنا تفعيل حاجز الوجة لوجهة بعينها في التطبيق، نحتاج إلى إضافة الخاصية canActivate إلى الوجهة في الملف app.module.ts، وسنؤمن الوجهات الخاصة بإضافة تدوينة جديدة من خلال إضافة الخاصية canActivate.

أضف تعريف الاستيراد التالي في الملف app.module.ts:

import { AuthGuard } from './guards/auth.guard';

وحدِّث الاتجاه الخاص بالمكون addpost كما يلي:

{ path: 'addpost', component: BlogEditorComponent, canActivate:[AuthGuard] },

إذا حاول المستخدم أن يصل إلى الوجهة addpost فسيُستدعى الصنف AuthGuard، فإذا أعاد هذا الصنف true يُسمح للمستخدم أن يصل إلى تلك الوجهة لإضافة تدوينة جديدة، أما إذا أعاد false فلا يُسمح له بالوصول إلى تلك الوجهة ويُعاد إلى الصفحة الرئيسية.

اختبار عملية الاستيثاق

افتح المتصفح لترى أن بطاقة التدوينة لا تحتوي على زري التعديل والحذف، كذلك لا يظهر زر Add post في شريط التنقل، وذلك لأن المستخدم لم يسجل الدخول بعد، لهذا نرى زر Login with Google في الركن العلوي الأيمن من شريط التنقل.

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

ستحدِّث الصفحة نفسها بمجرد نجاح تصديق جوجل، ونرى أن الاتجاه الخاص بـ Add post قد ظهر على شريط التنقل، كما ظهر اسم المستخدم الذي سجل الدخول على الشريط، وسيظهر كل من زر Edit و Delete على بطاقة التدوينة، انظر:

تطبيق التصاريح

سنطبِّق الآن تصريحًا مبنيًا على قاعدة rule-based لموقعنا، وسنعرِّف دورًا -وهو دور المدير admin- بحيث يستطيع المستخدمون المدراء فقط أن يعدِّلوا ويحذفوا التدوينة، ثم سنضيف إمكانية نشر التعليقات على التدوينة لاحقًا، والتي يستطيع المدير حذفها هي أيضًا.

إعداد قاعدة بيانات Firebase لدور المدير

لقد عرَّفنا الخاصية البوليانية isAdmin في الصنف AppUser، وتُستخدم هذه الخاصية لتعريف دور المدير للمستخدم، وسنضيف -يدويًا- حقلًا جديدًا باسم isAdmin للمستخدمين الذين نريد منحهم صلاحية المدير، وسننفذ التغييرات في تجميعة appusers داخل قاعدة بيانات Firebase.

انتقل إلى قاعدة بيانات Firebase وافتح تجميعة appusers التي تخزن سجلًا لجميع المستخدمين الذين سجلوا الدخول إلى تطبيقنا، انظر الصورة أدناه:

انقر على زر Add field لتظهر نافذة تطلب تعريف حقل جديد، فاجعل اسم الحقل isAdmin، ونوعه boolean، وقيمته True، ثم انقر على زر Add لإضافته، انظر الصورة أدناه:

سيضاف الحقل الجديد إلى التجميعة:

عند نجاح عملية تسجيل الدخول سنجلب بيانات المستخدم من تجميعة appusers ونربطها بكائن يكون نوعه هو الصنف AppUser، ثم نستخدم الخاصية isAdmin بعدها لتقييد الدخول للمستخدم.

وبما أننا ننشئ تطبيقًا للتوضيح والشرح فقط يحتوي على دور واحد، فإننا نعيّن خاصية isAdmin يدويًا، أما التطبيقات الكبيرة فلا يُنصح فيها بهذا إذ قد نحتاج إلى التعامل مع أدوار كثيرة مختلفة، ففي تلك الحالة ننشئ تطبيقًا منفصلًا لإدارة الأدوار لجميع المستخدمين.

إنشاء حاجز admin-auth

نفّذ الأمر التالي لإنشاء حاجز جديد باسم AdminAuthGuard:

ng g g guards/admin-auth --implements CanActivate 

ثم افتح الملف src/app/guards/admin-auth.guard.ts وأضف تعليمات الاستيراد التالية في أعلاه:

import { AuthService } from '../services/auth.service';
import { map } from 'rxjs/operators';
import { AppUser } from '../models/appuser';

أضف منشئًا واحقن الموجِّه Router والخدمة AuthService فيه كما يظهر في الشيفرة التالية:

constructor(
 private router: Router,
 private authService: AuthService) { }

سنحدِّث التابع canActivate لمعالجة الوصول غير المصرح له إلى الوجهات، وذلك بإضافة الشيفرة التالية:

return this.authService.appUser$.pipe(map((user: AppUser) => {
 if (user && user.isAdmin) {
  return true;
 }
 this.router.navigate(['/'], { queryParams: { returnUrl: state.url }
});
 return false;
 }));

سنشترك في الكائن appUser$‎ لجلب حالة التصديق/التصريح للمستخدم، فإذا كان قد سجل دخوله وكانت قيمة الخاصية isAdmin للمستخدم على القيمة true فإننا نعيد القيمة true أيضًا.

بالمثل في سلوك الصنف AuthGuard فإذا لم يكن المستخدم قد سجل دخوله، فستحدث هذه الأشياء الثلاثة:

• نعين معامِل استعلام باسم returnUrl على قيمة الرابط الحالي.
• ننقل المستخدم إلى الصفحة الرئيسية.
• نعيد false من التابع.

إضافة صلاحيات مدير للتطبيق

لقد حدَّثنا المكون BlogCardComponent في القسم السابق ليقيد الوصول إلى أزرار Edit و Delete ويقصره على المستخدمين الذين سجلوا الدخول، أما الآن فسنحدِّث الشيفرة مرة أخرى لتقصر الوصول على المستخدمين المدراء فقط.

افتح الملف src/app/components/blog-card.component.html، وحدِّث التوجيه ngIf الذي في الوسم <ng-container>، والذي بدوره يحتوي على الزر Edit والزر Delete -انظر الشيفرة أدناه- وهذا سيقصر إمكانية التعديل والحذف على المستخدمين الذين سجلوا الدخول فقط.

<ng-container *ngIf="appUser?.isAdmin">

أضف تعليمة الاستيراد التالية في الملف app.module.ts:

import { AdminAuthGuard } from './guards/admin-auth.guard';

حدِّث الاتجاه الخاص بالمكون editpost كما يلي:

{ path: 'editpost/:id', component: BlogEditorComponent, canActivate:[AdminAuthGuard] },

لقد قصرنا إمكانية التعديل على التدوينة هنا لتكن للمستخدمين المدراء فقط، فحين يحاول المستخدم الوصول إلى اتجاه editpost، فسيُستدعى الصنف AdminAuthGuard، فإذا أعاد هذا الصنف true يُسمح للمستخدم بالوصول إلى الوجهة editpost لتعديل التدوينة، أما إذا أعاد false فلا يُسمح له بالذهاب لتلك الوجهة لتعديل التدوينة.

اختبار التصاريح

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

انتقل إلى قاعدة بيانات Firebase وأضف حقل isAdmin جديد للمستخدم كما سبق شرحه، أو يمكنك تسجيل الخروج وإعادة تسجيل الدخول بمستخدم آخر يكون فيه حقل isAdmin يحمل القيمة true، وهنا تستطيع أن ترى زري Edit و Delete على بطاقة التدوينة. انظر الصورة التالية:

تحديث قواعد الأمان لقاعدة بيانات Firebase

لقد أنشأنا قاعدة البيانات في وضع الاختبار، وسنحدِّث القاعدة الأمنية لقاعدة البيانات الآن لتسمح بعملية الكتابة للمستخدم المصرَّح له فقط.

من القائمة التي على اليسار، اختر Database في قسم Develop، ثم اختر تبويب Rules، وحدِّث قواعد الأمان كما يلي:

service cloud.firestore {
 match /databases/{database}/documents {
  match /{document=**} {
  allow read;
  allow write: if request.auth.uid != null;
  }
 }
}

ثم انقر على زر Publish لنشر القاعدة، انظر الصورة أدناه:

الخاتمة

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

ترجمة -وبتصرف- لفصول من كتاب Build a full stack web application using angular and firebase لصاحبه Ankit Sharma.

اقرأ أيضًا

• بناء تطبيق ويب كامل باستخدام Angular ومنصة Firebase
• تهيئة بيئة تطبيقات Angular ونشرها على الويب

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

هذا المقال جزء من سلسلة عن بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore

• مقدمة في بناء تطبيقات الويب باستخدام إطار العمل Angular وقاعدة بيانات Firestore
• بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore - إضافة التدوينات وعرضها
• بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore - تعديل التدوينات
• بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore - إضافة الاستثيثاق
• نشر مدونة مبنية عبر Angular على Firebase

حذف تدوينة

سننشئ الآن خدمة Snackbar، وهي خدمة تُظهر شريطًا يعرض رسائل للمستخدم نعرض عبرها رسالة بعد حذف التدوينة، وننشئها بكتابة الأمر التالي:

ng g s services/Snackbar

افتح الملف snackbar.service.ts وضع الشيفرة التالية فيه:

import { Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

@Injectable({
providedIn: 'root'
})
export class SnackbarService {

 constructor(private snackBar: MatSnackBar) { }

 showSnackBar(message: string) {
  this.snackBar.open(message, 'Close', {
   duration: 2000,
   panelClass: 'snackbar-ribon',
   verticalPosition: 'top',
   horizontalPosition: 'center'
  });
 }
}

لقد أنشأنا الآن التابع showSnackBar الذي يقبل معامِلًا يكون هو الرسالة التي نريد عرضها، والحد الأقصى لعرض هذه الرسالة هو 2000 مللي ثانية، وقد عرَّفنا موضع الشريط لينتصف أعلى الصفحة.

أضف الآن التنسيق التالي لشريط Snackbar في الملف styles.scss:

.snackbar-ribon {
 color: #FFFFFF;
 background: #17a2b8;
}

سنضيف الآن مزية حذف إحدى التدوينات الموجودة، وسنحذف التدوينة من تجميعة blogs وفقًا لمعرِّف التدوينة postID.

أضف الشيفرة التالية في الملف blog.service.ts:

deletePost(postId: string) {
 return this.db.doc('blogs/' + postId).delete();
}

افتح الملف blog-card.comonent.ts واستورد SnackbarService كما يلي:

deletePost(postId: string) { return this.db.doc('blogs/' + postId).delete();}

ثم احقن خدمة SnackbarService في المنشئ كما يلي:

constructor(
 // other service injection
 private snackBarService: SnackbarService
 ) { }

كما سنحدّث تابع الحذف في الملف blog-card.comonent.ts، بحيث يكون تعريفه كما يلي:

delete(postId: string) {
 if (confirm('Are you sure')) {
  this.blogService.deletePost(postId).then(
   () => {
    this.snackBarService.showSnackBar('Blog post deleted
successfully');
   }
  );
 }
}

سيقبل تابع الحذف postID كمعامِل وسيعرض رسالة تحذير تطلب تأكيد الحذف، وعند ضغط المستخدم على OK، يُستدعَى تابع deletePost الخاص بالخدمة BlogService، ثم نعرض رسالة تظهر نجاح عملية الحذف باستخدام شريط snackbar.

افتح المتصفح واضغط على زر Delete في بطاقة التدوينة، سيظهر صندوق جافاسكربت يطلب تأكيد عملية حذف التدوينة:

إذا ضغط المستخدم على OK ستُحذف التدوينة ونحصل على رسالة توكيد في شريط Snackbar:

التعديل على تدوينة موجودة

سننفذ الآن خاصية التعديل على تدوينة قائمة وموجودة، من خلال إضافة التعريف التالي إلى الملف blog.service.ts:

updatePost(postId: string, post: Post) {
 const putData = JSON.parse(JSON.stringify(post));
 return this.db.doc('blogs/' + postId).update(putData);
}

سيقبل التابع updatePost كلا من postID وكائنًا من النوع Post كمعاملات، وسنحلل كائن Post إلى كائن JSON ثم نحدّث الكائن في تجميعة blogs.

أضف توجيه وظيفة التعديل في الملف app.module.ts كما يلي:

RouterModule.forRoot([
 ...
 { path: 'editpost/:id', component: BlogEditorComponent },
 ...
])

ثم أضف تعريف الاستيراد التالي في الملف blog-editor.component.ts:

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

صرِّح الآن عن متغير Subject جديد:

private unsubscribe$ = new Subject<void>();

افتح الملف blog-editor.component.ts وأضف الشيفرة التالية في المنشئ:

if (this.route.snapshot.params['id']) {
 this.postId = this.route.snapshot.paramMap.get('id');
}

في الشيفرة أعلاه، نستخدم الصنف ActivatedRoute لجلب معرِّف التدوينة من الرابط.

سنضيف الآن تابعًا لإعداد استمارة التعديل عند النقر على زر Edit في بطاقة التدوينة في الصفحة الرئيسية، ويكون تعريف التابع كما يلي:

setPostFormData(postFormData) {
 this.postData.title = postFormData.title;
 this.postData.content = postFormData.content;
}