إنشاء تطبيق قائمة مهام وتنسيقه باستخدام Angular

تطبيقات إدارة المهام أو “قوائم المهام” تعد من أكثر التطبيقات العملية انتشاراً في عالم البرمجيات، لما لها من دور كبير في تنظيم العمل اليومي وتحسين الإنتاجية الشخصية والجماعية. ومن بين أشهر أطر العمل المستخدمة حالياً لتطوير تطبيقات الويب التفاعلية، يأتي Angular كواحد من الحلول الأمثل لبناء تطبيقات قوية ومرنة. في هذا المقال، سنتناول بشكل موسع كيفية إنشاء تطبيق قائمة مهام (To-Do List) باستخدام إطار العمل Angular، مع التركيز على تصميم التطبيق وتنسيقه بأسلوب احترافي يتوافق مع معايير واجهات المستخدم الحديثة.

مقدمة عن Angular

Angular هو إطار عمل مفتوح المصدر يعتمد على TypeScript، طورته شركة Google، ويهدف إلى تسهيل تطوير تطبيقات الويب الديناميكية والمعقدة من خلال هيكلة واضحة ومنهجية تعتمد على مكونات (Components)، خدمات (Services)، ونظام توجيه (Routing). يتيح Angular إمكانية إنشاء تطبيقات ذات واجهة مستخدم تفاعلية، قابلة للصيانة والتطوير المستقبلي بسهولة.

من أبرز مزايا Angular:

• المكونات القابلة لإعادة الاستخدام: تصميم مكونات صغيرة مستقلة يمكن دمجها بسهولة.

• الربط الثنائي للبيانات (Two-Way Data Binding): التزامن التلقائي بين النموذج والواجهة.

• نظام التوجيه المتقدم: إدارة التنقل بين الصفحات داخل التطبيق بشكل سلس.

• الخدمات (Services) والحقن (Dependency Injection): تسهيل إدارة البيانات والمنطق عبر التطبيق.

خطوات بناء تطبيق قائمة مهام باستخدام Angular

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

1. إعداد بيئة التطوير

لبدء العمل مع Angular، يجب تثبيت Node.js و Angular CLI (واجهة الأوامر الخاصة بـ Angular).

• تثبيت Node.js: https://nodejs.org

• تثبيت Angular CLI عبر الأمر:

bash
CopyEdit
npm install -g @angular/cli

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

bash
CopyEdit
ng new todo-app

• الدخول إلى مجلد المشروع وتشغيله محلياً:

bash
CopyEdit
cd todo-app
ng serve

يفتح التطبيق على المتصفح عبر العنوان http://localhost:4200/.

2. بناء الهيكل الأساسي للمكونات

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

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

bash
CopyEdit
ng generate component task-list

• إنشاء مكون لإضافة مهمة جديدة:

bash
CopyEdit
ng generate component task-add

3. تصميم نموذج بيانات المهمة

ينبغي تعريف نموذج بيانات يمثل كل مهمة في قائمة المهام. يمكن ذلك باستخدام TypeScript class أو interface.

typescript
CopyEdit
export interface Task {
  id: number;
  title: string;
  completed: boolean;
}

يحتوي هذا النموذج على ثلاثة خصائص أساسية:

• id: معرف فريد لكل مهمة.

• title: نص المهمة.

• completed: حالة المهمة، إذا كانت مكتملة أم لا.

4. إدارة حالة المهام باستخدام الخدمة (Service)

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

bash
CopyEdit
ng generate service task

داخل هذه الخدمة يتم تعريف قائمة المهام، بالإضافة إلى الوظائف اللازمة مثل:

• إضافة مهمة جديدة.

• حذف مهمة.

• تحديث حالة مهمة (مكتملة/غير مكتملة).

• جلب قائمة المهام.

typescript
CopyEdit
import { Injectable } from '@angular/core';
import { Task } from './task.model';

@Injectable({
  providedIn: 'root'
})
export class TaskService {
  private tasks: Task[] = [];
  private nextId = 1;

  constructor() { }

  getTasks(): Task[] {
    return this.tasks;
  }

  addTask(title: string): void {
    this.tasks.push({ id: this.nextId++, title, completed: false });
  }

  deleteTask(id: number): void {
    this.tasks = this.tasks.filter(task => task.id !== id);
  }

  toggleTaskCompletion(id: number): void {
    const task = this.tasks.find(task => task.id === id);
    if (task) {
      task.completed = !task.completed;
    }
  }
}

5. ربط المكونات بالخدمة

مكون إضافة المهمة (task-add)

يحتوي على نموذج لإدخال نص المهمة والزر لإضافتها:

typescript
CopyEdit
import { Component } from '@angular/core';
import { TaskService } from '../task.service';

@Component({
  selector: 'app-task-add',
  template: `
    
    إضافة
  `
})
export class TaskAddComponent {
  taskTitle = '';

  constructor(private taskService: TaskService) { }

  addTask(): void {
    if (this.taskTitle.trim()) {
      this.taskService.addTask(this.taskTitle.trim());
      this.taskTitle = '';
    }
  }
}

مكون عرض المهام (task-list)

يعرض قائمة المهام ويتيح إكمال أو حذف المهام:

typescript
CopyEdit
import { Component } from '@angular/core';
import { TaskService } from '../task.service';
import { Task } from '../task.model';

@Component({
  selector: 'app-task-list',
  template: `
    

      

        
        {{ task.title }}
        حذف
      
    
  `,
  styles: [`
    .completed {
      text-decoration: line-through;
      color: gray;
    }
  `]
})
export class TaskListComponent {
  tasks: Task[] = [];

  constructor(private taskService: TaskService) {
    this.tasks = this.taskService.getTasks();
  }

  toggleCompletion(id: number): void {
    this.taskService.toggleTaskCompletion(id);
  }

  deleteTask(id: number): void {
    this.taskService.deleteTask(id);
  }
}

6. دمج المكونات في التطبيق الرئيسي

في ملف app.component.html يمكن تضمين مكونات الإضافة والعرض:

html
CopyEdit
<h1>تطبيق قائمة المهامh1>
<app-task-add>app-task-add>
<app-task-list>app-task-list>

تنسيق وتصميم التطبيق باستخدام CSS و Angular Material

لتحسين تجربة المستخدم من الناحية البصرية، يمكن استخدام عدة أساليب لتنسيق التطبيق:

1. استخدام CSS التقليدي

يمكن تخصيص الألوان، الخطوط، وحجم النصوص عبر ملفات CSS الخاصة بالمكونات، كما في المثال:

css
CopyEdit
input {
  padding: 10px;
  font-size: 16px;
  width: 300px;
  margin-right: 10px;
}

button {
  padding: 10px 15px;
  background-color: #007bff;
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #0056b3;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

li button {
  margin-left: auto;
  background-color: #dc3545;
}

li button:hover {
  background-color: #a71d2a;
}

2. استخدام مكتبة Angular Material

تقدم مكتبة Angular Material مجموعة من المكونات المصممة مسبقاً والتي تتبع مبادئ التصميم المادي (Material Design) مما يضيف للمشروع طابعاً احترافياً وأنيقاً.

خطوات تثبيت Angular Material

bash
CopyEdit
ng add @angular/material

سيتم توجيهك لاختيار الثيمات والأيقونات المطلوبة.

استخدام مكونات Angular Material في التطبيق

• استبدال عناصر الإدخال بالأزرار والحقول من Material.

مثال مكون إضافة المهمة بعد تطبيق Angular Material:

html
CopyEdit
<mat-form-field appearance="fill">
  <mat-label>أدخل مهمة جديدةmat-label>
  <input matInput [(ngModel)]="taskTitle" />
mat-form-field>
<button mat-raised-button color="primary" (click)="addTask()">إضافةbutton>

• قائمة المهام باستخدام mat-list و mat-checkbox:

html
CopyEdit
<mat-list>
  <mat-list-item *ngFor="let task of tasks">
    <mat-checkbox [(ngModel)]="task.completed" (change)="toggleCompletion(task.id)">{{ task.title }}mat-checkbox>
    <button mat-icon-button color="warn" (click)="deleteTask(task.id)">
      <mat-icon>deletemat-icon>
    button>
  mat-list-item>
mat-list>

تحسينات وتوسعات يمكن إضافتها لتطبيق قائمة المهام

1. تخزين البيانات محلياً

لحفظ حالة المهام حتى بعد إعادة تحميل الصفحة، يمكن استخدام LocalStorage.

typescript
CopyEdit
getTasks(): Task[] {
  const tasks = localStorage.getItem('tasks');
  return tasks ? JSON.parse(tasks) : [];
}

saveTasks(): void {
  localStorage.setItem('tasks', JSON.stringify(this.tasks));
}

addTask(title: string): void {
  this.tasks.push({ id: this.nextId++, title, completed: false });
  this.saveTasks();
}

deleteTask(id: number): void {
  this.tasks = this.tasks.filter(task => task.id !== id);
  this.saveTasks();
}

toggleTaskCompletion(id: number): void {
  const task = this.tasks.find(task => task.id === id);
  if (task) {
    task.completed = !task.completed;
    this.saveTasks();
  }
}

2. تقسيم المهام إلى مجموعات

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

3. دعم تعديل المهام

إضافة إمكانية تعديل نص المهمة بعد إضافتها.

4. إضافة خاصية البحث والفلترة

للبحث عن مهمة محددة أو عرض المهام المكتملة فقط.

جدول مقارنة بين استخدام CSS التقليدي و Angular Material في تنسيق التطبيق

الخاتمة

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

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

المصادر والمراجع

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

2. Angular Material Guide – https://material.angular.io/

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