سريع وآمن: الذكاء الاصطناعي في كود Angular الخاص بكم
اشحن ميزة ذكاء اصطناعي، ودع الوكلاء يكتبون Angular تحت قواعد، وحافظ على أمانهما، في ثلاثة أيام، على كود بحجم المؤسسات.
عادل بن موسى
معماري واجهات أمامية · Angular و React و Swift · تطوان، المغرب
- عشرون سنة في البرمجيات في هولندا مبرمجاً وقائد فريق ومعماري برمجيات، ويقيم اليوم في تطوان. Angular منذ AngularJS، في منتجات للرعاية الصحية والتعليم والإعلام الرقمي والبنوك يستعملها آلاف المهنيين كل يوم.
- يشحن نفس المعمارية في ثلاث منصات: Angular للمؤسسات لصالح العملاء، و React Native لمنصة مدرسية، و SwiftUI لتطبيق على App Store صدر أول مرة في 2010، مع وكلاء برمجيين (coding agents) داخلها كلها.
ما تأخذه معك
تخرج بشيئين: ميزة Angular تعمل بنموذج LLM بنيتها بنفسك، مع البث (streaming) واستدعاء الأدوات (tool calls) ومعالجة الأخطاء والتكلفة؛ وسير عمل بمساعدة الذكاء الاصطناعي يعمل على كودكم الحالي: إعداد الوكيل، والقواعد، وفحوص المعمارية التي يجب أن يجتازها الوكيل، وانضباط في المراجعة يمكن لفريقك تبنّيه يوم الإثنين.
تطبيق مؤسسي واقعي واحد يرافقنا طوال الأيام الثلاثة: تطبيق Angular متعدد الوحدات بأجزاء قديمة ونماذج حقيقية وخادم خلفي حقيقي، حتى يقع كل تمرين في كود يشبه كودكم.
جرّب مشروع العرض
كل التمارين تجري على Atlas Bank، بنك مغربي خيالي مبني بـ Angular و Nx. تصفّح التطبيق مباشرة، ثم اقرأ الكود وملف القواعد الذي يعمل به الوكلاء.
لمن هذه الورشة
- مطوّرو Angular بسنة واحدة على الأقل من الخبرة في الإنتاج
- القادة التقنيون والمعماريون الذين عليهم أن يقرروا ما يجوز لفريقهم فعله بالذكاء الاصطناعي وما لا يجوز
- الفرق في مراكز الاستعانة القريبة (nearshore) وشركات المنتجات التي تعمل على تطبيقات Angular كبيرة وطويلة العمر
المتطلبات المسبقة
- إلمام بالمكوّنات والخدمات و signals أو RxJS وواجهة Angular CLI
- حاسوب محمول مع Node (آخر إصدار LTS) و Angular CLI و Git وبيئة تطوير (IDE)
- وكيل برمجي مثبّت (GitHub Copilot، أو ChatGPT و Codex، أو Claude Code، أو Cursor)؛ مفاتيح API للتمارين متوفرة
البرنامج
- 01
سير عمل بمساعدة الذكاء الاصطناعي في كود Angular للمؤسسات
المسار 1 · الوكلاء في كودكم- إرشاد الوكيل بطبقات: مهارات و الرسمية، زائد diff من 40 سطراً حيث يختلف مستودعكم عن قصد، ولماذا تفشل ملفات التعليمات العامة ذات 400 سطر
- المعمارية كعقد قابل للتنفيذ، بنكهتين: في Nx (وسوم + مصفوفة اعتماديات) و لمشاريع Angular CLI العادية؛ استيراد عبر API العامة فقط
- مستودع واحد، عدة وكلاء: إبقاء و و و و و على نفس القواعد عبر مشترك، وصيغة المفتوحة (مهارات Angular الرسمية تستعملها)، وخوادم ، و lint يجب أن تجتازه كل أداة؛ ملفات رقيقة خاصة بكل أداة، ومصدر واحد للحقيقة
- حيث يفشل الوكلاء في كود Angular: قواعد الحكم الخمس عشرة (الكود الدفاعي، computed مقابل effect، الخدمات التي تشترك في نفسها، خدمة تستورد مكوّناً، القيم السحرية، التناظري أولاً…) مُراجعة على diff حقيقي من وكيل، ثم أيّها يصبح حظراً في ESLint
- 02
تحديث كود Angular القديم مع الوكلاء
المسار 1 · الوكلاء في كودكم- الانتقال إلى والمكوّنات و الجديد: الوكيل يقترح الخطة، والقاعة تراجعها وفق demote-don't-delete، والحالة بثلاث طبقات، وسجل قرار معماري () لكل سلوك يغيّر القرار
- توليد الاختبارات ثم تقويتها: اختبارات اجتماعية (sociable tests)، بدائل (fakes) عند حدود النظام فقط، أدوات اختبار (harnesses) تُستعلم بالتسمية، والسؤال 'ماذا يمكنني أن أحذف وأبقى أخضر؟'
- انضباط المراجعة: حجم الـdiff، commit واحد لكل مهمة من الأسفل إلى الأعلى، نص الـpull request يشرح كل استعمال أول، ومتى توقف الوكيل
- 03
بناء ميزة ذكاء اصطناعي في Angular
المسار 2 · الذكاء الاصطناعي داخل منتجكم- بث () ردود إلى UI عبر signals
- (tool calling) من الواجهة: ترك النموذج يتصرف في تطبيقك
- حالات الخطأ، والكمون (latency)، وضبط التكلفة، وحدود المعدل: الجزء الإنتاجي الذي لا يعرضه أحد
- 04
واجهة وكيلية (Agentic UI)
المسار 2 · الذكاء الاصطناعي داخل منتجكم- مكوّنات يمكن لوكيل أن يقودها: عائلة / / وما هو مستقر اليوم
- UI ديناميكية تُولَّد وقت التشغيل: أين تستحق وأين لا
- 05
الأمان: الذكاء الاصطناعي مهاجماً، والذكاء الاصطناعي مراجعاً
المساران معاً- حيث يقيم المعيار: لتطبيقات الويب و OWASP Top 10 لتطبيقات LLM، مُسقَطَين على ما يتحكم فيه فريق الواجهة فعلاً، حتى يعرف الفريق أين ينظر حين تتغير القائمة، لا ما قالته في سنة الورشة
- حقن الموجّهات () عبر واجهتكم: نموذج يقرأ محتوى المستخدم، واستدعاء أداة لا ينبغي له، وحدود البيانات في المتصفح
- العيوب التي يكتبها الوكلاء على نطاق واسع: ، وفحوص صلاحيات موجودة في العميل فقط، وأسرار في الحزمة (bundle)، واعتماديات لم يطلبها أحد، تُكتشف مباشرة في diff من وكيل على Atlas Bank
- الذكاء الاصطناعي مراجعاً: النماذج الرائدة تجد اليوم ثغرات حقيقية في كود الواجهة؛ فحص أمني على كل diff من وكيل قبل أن يقرأه إنسان، ما يلتقطه، وما لا يراه، وأين يقع في خط الأنابيب
- ما لا يغادر العميل أبداً، وقابلية التدقيق، وكيف تشرح كل ذلك لفريق الأمان عندكم
- 06
التبنّي داخل الفريق
المساران معاً- سياسة الذكاء الاصطناعي من ثمانية أجزاء التي يكتبها فريقك في القاعة: المهارات المثبّتة، ووثائق قواعد المستودع، وحظر ، وأداة الحدود، وشكل الـpull request، وبوت المراجعة + مهارة المراجعة الذاتية، وخطافات التحرير (edit hooks)، وقائمة الأوامر المحظورة
- ما تكلفته وما يشتريه كل مستوى: المستويات المجانية، وخطط المقعد الأولية، وخطط المقعد المتميزة، ومقاعد الفرق والمؤسسات، والنماذج المحلية للفرق ذات البيانات الحساسة، بأسعار حالية تُراجع في أسبوع الورشة لا من الذاكرة، وكيف تخفض وثيقة قواعد من 40 سطراً وحد diff من 300 سطر فاتورة الرموز ()
- قياس ما إذا كان الذكاء الاصطناعي ساعد فعلاً: زمن التسليم، والعيوب المكتشفة في المراجعة، وعبء المراجعة لكل pull request
المواعيد والصيغ
لا مواعيد عامة بعد. الدورات الأولى تُقام داخل الشركات مع فرق في طنجة والدار البيضاء. اطلب واحدة لفريقك، أو اشترك أدناه لتعرف أول موعد عام.
اطلب ورشة داخل الشركةالأسئلة الشائعة
هل هذه مقدمة إلى Angular؟+
لا. تفترض أنك تبني تطبيقات Angular بالفعل في عملك. إذا كان فريقك يحتاج الأساسيات أولاً، اسأل عن يوم 'Angular الحديث' داخل الشركة قبل هذه الورشة.
أي أدوات ذكاء اصطناعي تستعملون؟+
الورشة لا تعتمد على أداة بعينها: الأنماط تعمل مع Copilot و ChatGPT و Codex و Claude Code و Cursor. تُنفَّذ التمارين بالوكيل الذي يستعمله فريقك أصلاً.
عن بُعد أم حضورياً؟+
كلاهما. ورشات داخل الشركة تُقام حضورياً في مقرّكم، في المغرب أو في الخليج عندما يدعونا فريق (الرياض، الدوحة، دبي). المواعيد العامة عن بُعد أو في الدار البيضاء / طنجة. أنصاف أيام عن بُعد في منطقتكم الزمنية متاحة للفرق التي تفضّل ذلك، ستة أنصاف أيام إجمالاً.
بأي لغة؟+
لغة الشرح من اختيارك: العربية أو الإنجليزية. الشرائح والكود وكل المواد بالإنجليزية حتى تبقى مفيدة بعد الورشة.
شركتنا لن تدفع لخطط الذكاء الاصطناعي الغالية. هل تبقى الورشة مفيدة؟+
نعم، وهذه الحالة مغطاة عن قصد. كل تمرين يعمل على خطة مقعد أولية أو مستوى مجاني، وجزء واحد مخصص لما تشتريه المستويات المتميزة فعلاً، ومتى يحتاجها الفريق، وكيف تُبقي القواعد وحدود الـdiff فاتورة الرموز منخفضة. تُعرض النماذج المحلية للفرق التي لا تستطيع إرسال كودها إلى السحابة.
نستعمل أدوات ذكاء اصطناعي مختلفة في نفس الفريق. أيّها تفترضون؟+
لا شيء منها. الإعداد مبني بحيث يقرأ Copilot و ChatGPT و Codex و Claude Code و Cursor و Gemini CLI نفس القواعد ويجتازون نفس الفحوص. كل واحد يجلب الوكيل الذي عنده، والقاعة تقارن الـdiff.
هل نحصل على المادة؟+
نعم: المستودع كاملاً، والشرائح، وحلول التمارين، إضافة إلى ملفات القواعد والتعليمات التي يمكنكم وضعها في مستودعاتكم.