إضافة خاصية ترشيح لتطبيق Angular وتجهيزه للنشر

بدأنا في مقال إنشاء تطبيق قائمة مهام باستخدام 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.