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

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

مقدمة حول Angular وميّزة الترشيح

Angular هو إطار عمل لتطبيقات الويب مطوّر بلغة TypeScript، ويعتمد على مفهوم المكونات (Components) والخدمات (Services) لإنشاء تطبيقات قوية على مستوى المؤسسة. واحدة من أهم مزايا Angular هي القدرة على إنشاء تطبيقات تفاعلية عالية الأداء، وخاصية الترشيح تُعتبر ضرورية لتسهيل عملية البحث ضمن البيانات أو تنظيمها بناءً على معايير معيّنة.

أهمية خاصية الترشيح في تطبيقات Angular

تتجلّى أهمية الترشيح في عدّة جوانب أهمها:

• تحسين تجربة المستخدم: يمكن للمستخدمين الوصول إلى المعلومات التي يحتاجونها بشكل أسرع.

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

• زيادة سرعة الأداء في التفاعل مع البيانات: خصوصاً في التطبيقات التي تحتوي على جداول أو قوائم ضخمة.

إعداد بيئة العمل في Angular

لبدء العمل يجب التأكد من إعداد بيئة تطوير Angular بشكل صحيح. يتطلب ذلك وجود:

• Node.js (الإصدار الموصى به)

• Angular CLI

• محرر كود مثل Visual Studio Code

تثبيت Angular CLI:

bash
CopyEdit
npm install -g @angular/cli

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

bash
CopyEdit
ng new filtroApp
cd filtroApp

إعداد نموذج بيانات بسيط للترشيح

نفترض وجود نموذج بيانات يمثل قائمة منتجات. سيتم إنشاء ملف بيانات مبدئي:

src/app/data/products.ts

typescript
CopyEdit
export const PRODUCTS = [
  { id: 1, name: 'حاسوب محمول', category: 'إلكترونيات' },
  { id: 2, name: 'هاتف ذكي', category: 'إلكترونيات' },
  { id: 3, name: 'كتاب تاريخ', category: 'كتب' },
  { id: 4, name: 'كرسي مكتبي', category: 'أثاث' },
  { id: 5, name: 'سماعات بلوتوث', category: 'إلكترونيات' },
];

إنشاء مكون عرض المنتجات

إنشاء المكون:

bash
CopyEdit
ng generate component product-list

إعداد الكود في product-list.component.ts:

typescript
CopyEdit
import { Component } from '@angular/core';
import { PRODUCTS } from '../data/products';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
})
export class ProductListComponent {
  products = PRODUCTS;
  filterText = '';

  get filteredProducts() {
    if (!this.filterText) {
      return this.products;
    }

    const lowerCaseFilter = this.filterText.toLowerCase();
    return this.products.filter(product =>
      product.name.toLowerCase().includes(lowerCaseFilter) ||
      product.category.toLowerCase().includes(lowerCaseFilter)
    );
  }
}

تصميم واجهة الترشيح

product-list.component.html

html
CopyEdit
<div class="container">
  <input type="text" [(ngModel)]="filterText" placeholder="ابحث عن منتج..." />

  <ul>
    <li *ngFor="let product of filteredProducts">
      {{ product.name }} - <strong>{{ product.category }}strong>
    li>
  ul>
div>

تمكين FormsModule

افتح ملف app.module.ts وتأكد من استيراد FormsModule:

typescript
CopyEdit
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent, ProductListComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

تحسين الترشيح بإضافة Pipe مخصص

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

bash
CopyEdit
ng generate pipe productFilter

product-filter.pipe.ts

typescript
CopyEdit
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items || !searchText) {
      return items;
    }

    const text = searchText.toLowerCase();
    return items.filter(item =>
      item.name.toLowerCase().includes(text) || item.category.toLowerCase().includes(text)
    );
  }
}

التعديل في HTML:

html
CopyEdit
<input type="text" [(ngModel)]="filterText" placeholder="ابحث عن منتج..." />
<ul>
  <li *ngFor="let product of products | productFilter:filterText">
    {{ product.name }} - <strong>{{ product.category }}strong>
  li>
ul>

دعم الترشيح حسب أكثر من معيار

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

جدول مقارنة: استخدام الترشيح داخل Component مقابل Pipe

تحسين الأداء في الترشيح

• استخدام trackBy مع ngFor لتقليل عمليات إعادة الرسم.

• دمج Angular CDK Virtual Scroll في حالة التعامل مع قوائم ضخمة.

• تخزين النتائج المفلترة مؤقتاً عند الحاجة لمنع إعادة الحسابات المكلفة.

تجهيز التطبيق للنشر

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

بناء التطبيق للإنتاج:

bash
CopyEdit
ng build --configuration production

الميزات في هذا الوضع:

• تقليص حجم الحزمة (Minification)

• إزالة تعليمات التصحيح

• تحسين ترتيب تحميل الملفات (Tree-shaking)

• تحسينات الأداء في الملفات المجمعة

مكان وجود الملفات الناتجة:

يتم وضع الملفات الناتجة في مجلد dist/filtroApp/

خيارات النشر

1. عبر Firebase Hosting

bash
CopyEdit
npm install -g firebase-tools
firebase login
firebase init
firebase deploy

2. عبر GitHub Pages

bash
CopyEdit
ng add angular-cli-ghpages
ng deploy --base-href=/اسم_المشروع/

3. عبر خادم Nginx

• نسخ محتوى مجلد dist/ إلى مجلد /var/www/html في الخادم

• إعداد ملف nginx.conf للإشارة إلى هذا المسار

• إعادة تشغيل الخدمة

اعتبارات إضافية للنشر

• تأكد من إعداد المسارات بشكل صحيح في angular.json تحت baseHref.

• تفعيل خدمة الـ Gzip Compression على الخادم لتسريع تحميل الملفات.

• إضافة ملفات robots.txt و sitemap.xml لتحسين توافق الموقع مع محركات البحث.

الخاتمة

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

المراجع:

1. Angular Documentation – https://angular.io/docs

2. Angular CLI Deployment Guide – https://angular.io/guide/deployment