كيف أستخدم Angular AI في المشاريع الحقيقية

عمار نجار · نُشر في 13 يوليو 2026 — angularaimcpngrxarchitecture

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

أطلقت Angular مؤخراً مجموعة من الإضافات المخصصة للذكاء الاصطناعي، مثل MCP وAgent Skills وAI Instructions وSignal Forms. وعند النظر إليها معاً، نجد أنها تشكل أكثر من مجرد تكامل جديد مع الذكاء الاصطناعي.

في هذا المقال أشارك كيف أستخدم هذه الأدوات ضمن سير عمل Angular في المشاريع المؤسسية.

كيف أستخدم Angular AI في المشاريع الحقيقية

توقفت عن النظر إلى كل ميزة بشكل منفصل

عندما قرأت لأول مرة عن Angular CLI MCP وAgent Skills وAI Instructions وSignal Forms وغيرها، كنت أقيم كل ميزة بمفردها. لاحقاً أدركت أن هذه كانت الطريقة الخاطئة.

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

بمجرد أن بدأت أتعامل معها كنظام متكامل، أصبح فهمها أسهل بكثير.

عندما أطلب من المساعد إضافة ميزة جديدة، يخبره MCP بالمشروع المستهدف، وأوامر البناء المطلوبة، والاختبارات المرتبطة به. وتوضح Agent Skills طريقة تنظيم المكونات داخل مساحة العمل، بينما تضمن AI Instructions الالتزام بقواعد الفريق. في الماضي كنت أصحح كل ذلك يدوياً، أما الآن فيصل المساعد وهو يمتلك معظم السياق الذي يحتاجه.

معمارية التطبيق لم تتغير

هناك أمر لم يفاجئني إطلاقاً. معمارية التطبيق أثناء التشغيل بقيت كما هي تقريباً.

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

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

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

أكبر تغيير يحدث قبل كتابة أي سطر من الكود

في السابق كنت أبدأ مباشرة بالتنفيذ.

اليوم أبدأ بمواصفة صغيرة.

ليست وثيقة طويلة، وإنما وصف مختصر يجيب عن أسئلة بسيطة:

• ما المشكلة التي نحاول حلها؟
• ما الذي يشمله هذا التطوير؟
• ما الذي لا يشمله؟
• ما الحدود المعمارية التي يجب احترامها؟
• ومتى نعتبر العمل منتهياً؟

تبدو هكذا في المستودع عادةً:

## Feature: Audit log export

### Problem
Compliance team needs to export audit logs as CSV for quarterly reports.
Currently manual DB queries.

### Scope
- New route: /audit/export
- BFF endpoint: GET /api/audit/logs/export?from=&to=&format=csv
- NgRx effect to trigger download
- Loading state in toolbar component

### Boundaries
- No UI changes beyond toolbar button
- BFF handles auth + rate limiting
- CSV generation happens server-side

### Out of scope
- PDF export (future)
- Real-time streaming

### Done
- Export completes < 10s for 30-day range
- Error state handled in UI
- E2E test for happy path

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

Angular أصبح يفهم Angular

أكثر ما أعجبني أن Angular نفسه أصبح جزءاً من هذا الأسلوب الجديد في العمل.

فكل من AI Instructions وllms.txt وAgent Skills وAngular CLI MCP يقلل مشكلة كنت أراها كثيراً.

كان المساعد ينتج كوداً يعمل، لكنه لا يبدو وكأنه كود Angular حديث.

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

في السابق كان المساعد ينتج شيئاً كهذا:

@Component({
  selector: 'app-audit-export',
  template: `<div>...</div>`
})
export class AuditExportComponent {
  constructor(private http: HttpClient) {}
}

اليوم ينتج كوداً يتطابق مع المشروع فعلياً:

@Component({
  selector: 'app-audit-export',
  standalone: true,
  imports: [FormsModule],
  template: `<div>...</div>`
})
export class AuditExportComponent {
  private readonly store = inject(Store);
  readonly exportState = this.store.selectSignal(selectExportState);
}

Angular CLI MCP غيّر توقعاتي

ربما كان Angular CLI MCP أكثر إضافة أثرت على طريقة عملي، ليس لأنه يكتب كوداً أفضل، بل لأنه غيّر ما أتوقعه من المساعد.

قبل أن يبدأ بأي مهمة، أصبحت أتوقع منه أن يفهم مساحة العمل بالكامل.

أن يعرف:

• أي مشروع سيتأثر.
• أين توجد الميزة.
• ما أوامر البناء المطلوبة.
• ما الاختبارات المرتبطة بها.
• وما هي واجهات Angular المناسبة للاستخدام.

هذه التوقعات أصبحت أقرب كثيراً لما أتوقعه من مهندس برمجيات آخر يعمل معي.

لم أعد أقيس النجاح بعدد الأسطر التي يولدها

ما زالت جودة الكود مهمة، لكنها لم تعد المقياس الأساسي.

اليوم أهتم أكثر بأسئلة مثل:

• هل فهم المساعد المعمارية؟
• هل التزم بحدود الميزة؟
• هل أبقى NgRx في مكانه الصحيح؟
• هل احترم دور الـ BFF؟
• هل حافظ على العقود الحالية؟
• وهل ترك وراءه كوداً يستطيع أي مطور مراجعته بسهولة؟

هذه بالنسبة لي مؤشرات نجاح أفضل بكثير من عدد الأسطر التي تم توليدها.

الجانب الآخر من Angular AI

حتى الآن كنت أتحدث عن الذكاء الاصطناعي كأداة للمطور.

لكن منظومة Angular AI تتضمن جانباً آخر أيضاً، وهو بناء تطبيقات تعتمد على الذكاء الاصطناعي مباشرة. توفر Genkit وFirebase AI Logic وGemini API طرقاً مختلفة لإضافة هذه الإمكانيات إلى تطبيقات Angular. كما أن أنماط التصميم الخاصة باستخدام واجهات LLM مع Signals وواجهة resource تستحق مقالة مستقلة.

إلى أين أتجه بعد ذلك

بعض أجزاء منظومة Angular AI أصبحت جزءاً من عملي اليومي بالفعل، بينما ما زال البعض الآخر يحتاج إلى إثبات قيمته.

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

يسعدني أيضاً معرفة تجارب الآخرين. إذا كنتم تستخدمون أدوات Angular AI في مشاريعكم، فأخبروني بما نجح معكم، وما الذي لم ينجح، وما الأدوات التي وجدتموها مفيدة أو مخيبة للآمال.

هذا المجال يتطور بسرعة كبيرة، ولذلك لا توجد وجهة نظر واحدة تستطيع تغطية كل شيء.

شاركوني آراءكم في التعليقات أو تواصلوا معي مباشرة.

أقرأ جميع الردود.