스크립트
00:00:00أصبحت هندسة الحلقات ضرورية أساساً لطريقة استخدامنا لوكلاء الذكاء الاصطناعي الآن، وذلك لأن
00:00:04الوكلاء يمكنهم في الواقع العمل بمفردهم لفترة أطول بكثير والاستمرار في المضي قدماً. لذلك سنقوم
00:00:09بعرض ثلاث حلقات مختلفة، وقد قمنا بتنظيمها في مستويات لتسهيل الأمر عليك.
00:00:13المستوى الأول يوضح لك الوحدة الأساسية وكيفية استخدامها بكفاءة. والمستوى الثاني يوضح لك كيفية بناء
00:00:18تلك الوحدة لتصبح مصنعاً، والمستوى الثالث يفرغ معظم وقتك أخيراً ويجعله
00:00:23مبنياً على الوكلاء بشكل حقيقي. وبما أن هذا الفيديو مليء بالكثير من المعلومات، فقد وضعنا طوابع زمنية في الأسفل لكي
00:00:28تتمكن من الانتقال إلى أي لحظة إذا احتجت يوماً للعودة إلى هذا الفيديو. وأيضاً، سنقوم
00:00:33باستخدام Claude Code في هذا الفيديو، ولكن الأنظمة التي سنعرضها عليك ستعمل مع Codex
00:00:38أيضاً. أما بالنسبة لل أدوات، فنحن نستخدم warp وVS Code. كلاهما سهل التثبيت وكل ما تحتاجه هو
00:00:43فتح مجلد واحد في كليهما والبدء في متابعتنا. وقبل أن ننتقل فعلياً إلى كيفية تنفيذ
00:00:48هندسة الحلقات داخل البرمجة الحدسية (Vibe Coding)، نحتاج إلى شرح ماهية الحلقة. لذا سابقاً، عندما كنت
00:00:53تبني شيئاً ما، كنت بالفعل في حلقة. لقد أعطيت الوكيل توجيهاً وبدأ في
00:00:57البناء. ثم عندما انتهى، طلب منك أساساً التحقق منه وإذا كان خاطئاً، أعطيت
00:01:02الوكيل توجيهاً آخر وبدأ في البناء مرة أخرى. كنت بالفعل في حلقة. والآن، حلقة الوكيل هي
00:01:07عندما تزيل نفسك من هذه العملية ويذهب جزء التحقق هذا إلى الوكيل أيضاً. و
00:01:12هذا هو المسار الطبيعي الذي كنا نتجه إليه لأنك إذا فكرت في الأمر، فإن البناء باستخدام الوكلاء ليس هو ما
00:01:17يستهلك معظم الوقت. فهي تفعل ذلك بشكل مستقل في الخلفية. ما يتطلب في الواقع
00:01:21انتباهك هو التحقق مما إذا كان الوكيل ناجحاً أم لا. ولكن وكيلك لا يمكنه إجراء
00:01:26التحقق إلا إذا كان يعرف ما هي النتيجة الصحيحة. هذا هو الجزء الأساسي من الحلقة. ولكن هناك
00:01:30أجزاء أخرى أيضاً. أولاً، هناك شيء يحتاج إلى بدء الحلقة. ثم هناك الحلقة نفسها.
00:01:35وفي نهاية كل حلقة، يجب أن يكون هناك أساساً فحص تحقق، والذي يقرر ما إذا كان
00:01:41الوكيل قد انتهى أم لا. ويجب أن تقرر أنت فحص التحقق هذا. لذا في حلقة الوكيل،
00:01:46القطعة التي تحتفظ بها هي القطعة التي كانت ستظل ملكاً لك دائماً. هذا هو الجزء الذي يقرر
00:01:50ما إذا كنت ستوقف تشغيل الوكيل أو ما إذا كنت تحتاجه للعمل أكثر. لا يمكنك حقاً التخلي عن هذا. والآن،
00:01:55قد تفكر، لماذا ننتقل فجأة إلى هندسة الحلقات ولماذا لم ينجح هذا
00:01:59قبل عام؟ الجواب هو أن النماذج لم تكن قادرة حقاً على العمل لهذه المدة الطويلة. والآن مع النماذج الجديدة
00:02:04التي يتم إصدارها، يمكنها أساساً العمل بدونك لساعات. لذا إليك ما
00:02:08نشغل كل هذا عليه. إنه تطبيق مواعيد لصالون تجميل. يأتي شخص ما إلى الموقع،
00:02:13ويختار مصفف شعر، وبعد ذلك يمكنه رؤية الأوقات المتاحة لهذا المصفف عبر أيام مختلفة وحجز
00:02:17موعد. ثم هناك تسجيل دخول الموظفين لأن كل صالون يستخدم هذا سيعمل به
00:02:22مظف استقبال. إنهم يوافقون على الطلبات الواردة أو يرفضونها ويديرون التقويم
00:02:27لمصففي الشعر المختلفين في الصالون. في الوقت الحالي هناك الكثير من الأشياء المفقودة هنا. لا توجد صفحة هبوط
00:02:31وهناك ميزات مهمة أخرى لا نحتاج إلى إضافتها بعد. هذه هي جلسة Claude Code
00:02:36التي بنيناه فيها. لقد أنشأنا مجلد هندسة الحلقات هذا وفي داخله طلبنا من Claude
00:02:41Code إعداد المشروع. التطبيق نفسه موجود في مجلد loop salon وهو مجرد تطبيق Next.js.
00:02:46إذا كانت هذه هي المرة الأولى التي تسمع فيها عن ذلك، فلا تقلق بشأن الأمر. عليك فقط إخبار النموذج أنك تريد
00:02:51إنشاء تطبيق Next.js والبدء في البناء من هناك وسيتولى هو ذلك نيابة عنك. إنها إحدى
00:02:55الطرق الأكثر شعبية لبناء مواقع ويب حقيقية مثل الموقع الذي نبنيه هنا. والآن هناك
00:03:00بعض الأشياء التي تحتاج إلى توفرها في مجلدك. أولاً لدينا ملف Claude.md وكل ما يقوله هو الذهاب
00:03:04والاطلاع على Agents.md. وذلك لأننا قد نحتاج إلى تشغيل أكثر من وكيل واحد في هذا المستودع،
00:03:09ليس فقط Claude Code. نحن نستخدم هذا الملف لأنเกือบ كل وكيل آخر يستخدم التعليمات الموجودة في
00:03:14ملف Agent.md كقواعد لما يجب فعله كلما تم فتح جلسة جديدة. فقط Claude Code هو من يبتخدم Claude.md.
00:03:21وداخل ملف Agents.md، لم نضطر حقاً إلى كتابة أي شيء بأنفسنا. ثم لدينا هذا الملف
00:03:27الذي يسمى design.functional.md والذي يغطي جميع الأجزاء القابلة للنقر في التطبيق والتي يتعين على المستخدم فعلياً
00:03:33التعامل معها. وتصميم هذه الأجزاء مأخوذ من هذا الملف. وإذا لاحظت،
00:03:36فإن التطبيق يبدو وكأنه Duolingo. وذلك لأننا نسنخنا تصميم Duolingo فيه.
00:03:41ثم هناك بعض المهارات التي يجب أن تعرفها. الأولى هي Grill Me، والتي استخدمناها بينما كنا
00:03:45نبني هذا الإصدار الأول. إنها تستمر في طرح الأسئلة عليك حتى يصبح الوكيل واضحاً تماماً بشأن
00:03:50ما تريده. وهناك مهارات أخرى هنا أيضاً، وسنتناولها لاحقاً. وستلاحظ
00:03:55أن هذا المشروع قد تم بناؤه بالفعل. لقد قمنا بذلك عن قصد. عندما تبدأ شيئاً جديداً،
00:03:59فأول ما تقوم به هو إنشاء الحد الأدنى من المنتجات القابلة للتطبيق (MVP)، وهو أساساً أصعب إصدار عملي
00:04:04المنتج الذي يؤدي الغرض الرئيسي فقط ولا شيء غيره. ولا ترغب في بناء ذلك باستخدام حلقة.
00:04:08على أي حال، بناء الحد الأدنى من المنتجات القابلة للاختبار (MVP) يكون سريعاً. ولكن لوضع حلقة عليه، سيتعين عليك تحديد شكل الاكتمال
00:04:13قبل أن يبدأ الوكيل حتى. وفي تلك المرحلة، لا تكون متأكداً حقاً إلى أين يتجه المنتج
00:04:18بعد. لذا فإن تسوية ذلك ينتهي بها الأمر إلى استغراق وقت أطول من مجرد بناء الإصدار الأول بنفسك.
00:04:23ولكن قبل أن نبدأ بالمستوى الأول، سيكون من الرائع أن تشترك في القناة وتضغط على
00:04:27زر الإعجاب. هذا اللفتة البسيطة من الدعم تعني الكثير بالنسبة لنا. إذن، يقودنا هذا إلى المستوى الأول من
00:04:33هندسة الحلقات (Loop Engineering). هنا نعمل مع حلقة واحدة لها هدف واحد، والفحص
00:04:37ينتقل أساساً منك إلى الوكيل. والمكان الذي نفعل فيه ذلك هو صفحة الهبوط،
00:04:42والذي يبدو في الواقع المكان الخطأ لها لأن صفحة الهبوط هي مجرد شاشة واحدة.
00:04:47يمكن للوكيل بناءها أساساً في تشغيل واحد، وإذا كان هناك أي خطأ، فيمكن إصلاحه بموجه واحد
00:04:51وليس عدة موجهات. وضع حلقة حول صفحة الهبوط سيكون جهداً أكبر من الصفحة نفسها.
00:04:57ولكن هنا نريد صفحة هبوط غنية بالحركة باستخدام مهارة GSAP. كل شيء يتحرك بحركات متدرجة،
00:05:02وإذا فكرت في الأمر، فهذا هو الجزء الذي لا يمكنك التحقق منه حقاً بمجرد النظر إليه مرة واحدة. مع الحركات،
00:05:07هناك العديد من الأماكن التي يمكن أن يخطئ فيها الوكيل وهي تتطلب الكثير من الذهاب والإياب. هذه
00:05:12في الواقع طريقة جيدة حقاً للتحقق مما إذا كان الشيء يحتاج إلى حلقة أم لا إذا كان يتطلب الكثير من الذهاب
00:05:16والإياب مع الوكيل. والآن، قبل أن نعد واحدة، هناك أمر متعلق بالتسمية يربك الناس و
00:05:21ستصادفه بمجرد فتح قائمة الشرطة المائلة (slash menu) في Claude Code. هناك أمر يسمى
00:05:25loop وهناك أمر يسمى goal، وهندسة الحلقات هي أساساً أمر goal. أمر loop
00:05:30يشغل موجهاً على مؤقت، لذلك كل خمس دقائق أو كل ساعة يتم تشغيله مرة أخرى بغض النظر عما إذا تغير شيء أم لا.
00:05:35ولكن أمر goal هو الذي يستمر في العمل حتى يتم تحقيق الشيء الذي طلبتَه فعلياً.
00:05:40لذا عندما نقول هندسة الحلقات، فنحن نستخدم أمر goal. ويُستخدم أمر loop أيضاً في
00:05:45بعض نماذج أو سير عمل هندسة الحلقات، لكننا لن نستخدمه هنا. أمر goal نفسه بسيط جداً.
00:05:51تكتب slash goal ثم تكتب الهدف الذي تريد تحقيقه وتخبر النموذج أيضاً
00:05:56كيفية التحقق مما إذا كان قد حققه أم لا. بعد ذلك في نهاية كل دورة، يقرأ نموذج أصغر
00:06:00المحادثة ويقرر ما إذا كان الوكيل بحاجة للعمل على هذا مرة أخرى أو إذا تم استيفاء الشرط
00:06:05أم لا. لذا لبدء صفحة الهبوط، استخدمنا مهارة Grill Me مرة أخرى وأخبرناه أننا بحاجة إلى
00:06:11ملف مواصفات (spec file) لهذه الميزة. والآن، قبل أن ندخل في ما أخبرناه به، تحتاج إلى رؤية مجلد
00:06:16الميزات (features) داخل المشروع. كل مجلد هناك هو ميزة واحدة يجب على الوكيل إكمالها و
00:06:21كل من تلك المجلدات يحتوي على شيئين. يوجد ملف مواصفات، حيث يتم كتابة كل شيء حول تلك
00:06:25الميزة، ويوجد مجلد تحقق يبدأ فارغاً ويمتلئ أثناء قيام
00:06:31الوكيل بتشغيل الحلقة لتلك الميزة. ثم أخبرناه بالمهارات التي يجب استخدامها. الأولى هي
00:06:35مهارة GSAP وتلك هي التي تمنحك صفحات هبوط متحركة بشكل جميل، لكن الحركة
00:06:41الثقيلة بهذا الشكل تبطئ الصفحة حقاً. لذلك أخبرناه باستخدام مهارة التحسين (optimize) أيضاً، والتي تعود
00:06:45إلى الصفحة لاستعادة السرعة دون إزالة الحركة. وأعطيناه أيضاً مرجع صوري
00:06:50ليتبعه، والذي كان صفحة الهبوط هذه مع الرسوم التوضيحية عليها. وآخر شيء أخبرناه
00:06:55به كان حول الفحص. عادةً، هذا هو الجزء الذي تتبادل فيه أنت والوكيل الحديث،
00:06:59حيث تنظر إلى الصفحة، وتخبره بالخطأ وهو يذهب ليقوم بإصلاحه. لذلك أخبرناه أنه لكي
00:07:04يتحقق من التصميم فعلياً، كان عليه استخدام الأداة المحددة المسماة في ملف Claude.MD العام الخاص بنا، وهو
00:07:11الملف الذي ينطبق على كل مشروع على الجهاز بدلاً من هذا المشروع فقط. لذا ما كتبه كان
00:07:15كلا الشيئين في نفس الوقت. إنه المواصفات الخاصة بنناء الصفحة وهو قائمة تحقق التحقق التي يتم
00:07:20تشغيلها مقابل تلك الصفحة. ولهذا السبب انتهت أداة التقاط الشاشة من الملف العام بالظهور هناك،
00:07:25لأن تلك الأداة تلقط لقطات الشاشة بشكل أسرع بكثير من فتح متصفح كامل في كل مرة.
00:07:30يمكنك التوقف هنا وقراءة الموجه بأكمله إذا أردت. فهو يجعل كل هذا أكثر وضوحاً بكثير.
00:07:34بعد ذلك، دخلت مهارة Grill.me في أسئلتها وطلبت منا مجموعة كاملة منها حول صفحة الهبوط.
00:07:39ثم أخبرناه بشيء آخر وهذا هو الشيء الذي حول المواصفات إلى هدف. أخبرناه كتابة ملف المواصفات
00:07:45كهدف حتى نتمكن من تشغيله باستخدام أمر goal وقام ببعض التغييرات الأخرى بناءً على
00:07:50ذلك، مما يعني أنه من ذلك الحين فصاعداً، كل ما كان علينا فعله هو تشغيل أمر goal وإعطائه ملف مواصفات صفحات
00:07:55الهبوط. والقيام بكل ذلك مرة أخرى لكل ميزة هو العمل الذي لا تريد تكراره.
00:08:00لذلك أنشأنا مهارة كاتب الأهداف (goal writer). يحتوي على كل ما مررنا للتو بداخله، بما في ذلك هذا السطر الواحد.
00:08:06وما يفعله هو إنشاء المجلدات داخل مجلد features مع كتابة ملفات المواصفات بالفعل كأهداف.
00:08:11ثم بدأ العمل ومر عبر تمريره الأول ثم الثاني حيث كان لديه
00:08:16قائمة التحقق مرة أخرى وكان يقيم نفسه بناءً عليها مرارًا وتكرارًا. بعد ذلك توقف وفي ذلك الوقت
00:08:21كان قد عمل لمدة 38 دقيقة وعاد بخطأ واحد، والذي كان وميض إحدى الشخصيات الكرتونية.
00:08:26إذن هذا ما توصل إليه. بعد إعطائه موجه تصحيح إضافي واحد، أصبحت الشخصيات تومض بالطريقة
00:08:31التي أرناها وذلك الخطأ الواحد هو الشيء الوحيد الذي لم يكن التحقق ليتمكن من اكتشافه أبداً لأن
00:08:36لقطة الشاشة لا تلتقط سوى لحظة واحدة والفجوة بين رمشة وأخرى قصيرة جداً بحيث لا يمكن
00:08:42لقطتي شاشة التقاطها. بغض النظر عن ذلك، خرجت الرسومات التوضيحية بشكل جيد حقاً وهي
00:08:46متوافقة مع علامة دُولينغو التجارية التي كنا نستهدفها، وهي نفس النمط الموجود بالفعل في
00:08:50التطبيق الرئيسي. لقد اتبعت المرجع عن قرب أيضاً والنقر على احجز الآن ينقلك مباشرة إلى
00:08:55التطبيق حتى تتمكن من البدء في استخدامه. والآن هناك بعض الإعدادات التي يعمل بناءً عليها كل ما يأتي من هنا فصاعداً.
00:09:00هناك ثلاثة أمور يحتاجها هذا التطبيق والتي لا يستطيع حاسوبك القيام بها بمفرده ولن تقوم
00:09:05بتشغيل أي منها بنفسك، فلا تقلق بشأن هذا الجزء. إذن في الوقت الحالي كل ما بنيته
00:09:10موجود في مجلد واحد على حاسوبك وتلك هي النسخة الوحيدة منه في أي مكان. إذا تعطل حاسوبك أو
00:09:15حذفت الشيء الخطأ فسيضيع المشروع بأكمله معه. هذا هو أول شيء يجب أن
00:09:20يتغير وGitHub هو ما يحل هذه المشكلة. يكتب Claude كود المشروع في مجلدك ويأخذ GitHub هذا
00:09:25الكود عبر الإنترنت ويحفظه في مستودع، وهو في الأساس نفس المجلد الذي يعيش على موقعهم بدلاً من
00:09:31وجوده على جهازك فقط. الشيء الثاني هو أن التطبيق لا يتذكر أي شيء حتى الآن. الأشخاص الحقيقيون
00:09:36سيستخدمون هذا لذا يجب حفظ تلك الحجوزات في مكان ما وإلا سيقوم شخص حجز
00:09:41موعد، بتحديث الصفحة ويختفي كل شيء تماماً. لذا فأنت بحاجة إلى قاعدة بيانات وتلك التي
00:09:45نستخدمها هي Supabase. والشيء الأخير هو أنه لا يمكن لأي شخص آخر الوصول فعلياً إلى تطبيقك لأنه
00:09:50يعمل فقط على حاسوبك الخاص. لذا يجب نشره، مما يعني ببساطة أنه يوضع في مكان ما على الإنترنت
00:09:55حيث يمكن للآخرين فتحه وVercel هو ما يقوم بذلك. والآن كل ما تفعله فعلياً على تلك المنصات الثلاث
00:09:59هو إنشاء حساب وذلك بالدخول إلى كل موقع إلكتروني والنقر على تسجيل الدخول باستخدام جوجل.
00:10:04ليس هناك ما يجب تكوينه ولا ما يجب إعداده. كل ما بعد ذلك يمر عبر الوكيل و
00:10:08السبب في نجاح ذلك هو أن جميع الثلاثة تمتلك واجهة سطر أوامر CLI. لا يمكن لوكيلك النقر في الموقع الإلكتروني
00:10:14بالطريقة التي تفعلها أنت. لذا فإن واجهة سطر الأوامر هي تطبيق ليستخدمه الوكيل على المنصة. لذا عادةً ما تحتاج إلى
00:10:20إنشاء مستودع في GitHub ومشروع في Supabase وVercel ولكن يمكن لـ Claude فعل ذلك ببساطة باستخدام واجهات سطر الأوامر.
00:10:26لذا بعد أن تنشئ حساباتك على الثلاثة تعود إلى الوكيل وتخبره بأنك
00:10:31تريد من الوكيل استخدام الثلاثة باستخدام واجهة سطر الأوامر. سيعطيك أمراً لكل منها وعليك
00:10:37تشغيل تلك الأوامر في طرفية أخرى. وكيلك موجود بالفعل في طرفيتك لذا تفتح
00:10:41طرفية ثانية وتلصق هذا الأمر هناك. سيقوم بتثبيت واجهة سطر الأوامر لك ومن ثم لـ
00:10:46تسجيل الدخول إلى حسابك. سيفتح صفحة في متصفحك. ثم توافق على ذلك وتلك هي
00:10:51عملية المصادقة تمت. ومنذ ذلك الحين فصاعداً يمكن لوكيلك فعل كل شيء على تلك المنصة ولا داعي أبداً
00:10:56لفتح تلك المواقع مرة أخرى. وليست هناك حاجة حقاً لتذكر أي من هذا لأننا وضعنا
00:11:00ملف إعداد مجاني في الوصف أدناه. ما عليك سوى تسليم هذا الملف للوكيل وهو يقوم أساساً بإعداد
00:11:05تطبيق Next.js لك ثم يرشدك خلال كل ما تحتاجه لربط الثلاثة جميعاً.
00:11:10وأيضاً نظراً لأن القواعد على هذه المنصات تتغير باستمرار، فقد أصدرت هذه المنصات
00:11:16مهارات للوكيل. لا يحتاج GitHub حقاً إلى مهارة. فهو لم يتغير كثيراً وما زال
00:11:21لا يتغير لذا ليس لدينا واحدة لذلك. ولكن لدينا مهارة النشر إلى Vercel والتي تقوم أساساً
00:11:26بإخبار الوكيل كيف يجهّز واجهة سطر الأوامر الخاصة بـ Vercel لنشر مشروعك تلقائياً. ثم لدينا
00:11:31مهارة Supabase ومهارة أفضل ممارسات Supabase. ومرة أخرى يتم تشغيل هذه المهارات تلقائياً لذا كلما احتاج وكيلك
00:11:37إاستخدام أي من هاتين المنصتين فسوف يستخدمهما بمفرده ولن تضطر فعلياً
00:11:42لقيام بأي شيء. وستمتلئ قاعدة بيانات Supabase هذه بالبيانات وسيحصل مشروعك
00:11:47على نسخة حية على Vercel. سنترك روابط هذه المهارات في الوصف أدناه. ولكن قبل
00:11:52أن ننتقل إلى المستوى التالي دعونا نستمع إلى كلمة من الراعي، Hedra. ومن السهل ربطها
00:11:57مع وكلاء مثل Manus الذين يبحثون عن شيء ويخططون لمشروع ما. تقوم Hedra بذلك أيضاً. والفرق هو
00:12:02ما يحدث بعد أن يسلمك فيديو جاهزاً، وليس مستنداً ولا عرضاً تقديمياً. فكر في Claude مجتمعاً مع Canva.
00:12:08أنت تتحدث معه وهو يبني بجانبك. لقد جربناه داخل مساحة وطلبنا فيديو ترويجياً قصيراً
00:12:13لتطبيق ما. لم يكن الجزء المثير للاهتمام هو الفيديو، بل مراقبة كيف وصل الوكيل إلى هناك.
00:12:18أولاً جاءت بعض الأسئلة التوضيحية، ثم خطة مقترحة. بدلاً من التخمين، قامت Hedra بالبحث في
00:12:23الموضوع بنفسها وأحترت بنتائج حقيقية. من هناك، هبط النص بالكامل على اللوحة،
00:12:28وأرشدنا الوكيل عبره وخرج الفيديو الترويجي الجاهز. هذا مخصص حقاً لأي شخص يقوم
00:12:33بتسويقه بمفرده بدون محرر وبدون كاتب يقف خلفه. تتيح Hedra أساساً لشخص واحد القيام
00:12:38بما كان يتطلب فريقاً كاملاً سابقاً. يمكنك تجربته مجاناً على Hedra.com واستخدام رمزنا للحصول على خصم 50% على
00:12:43شهرك الأول. الرابط والرمز موجودان في الوصف أدناه. لذا يقودنا ذلك إلى المستوى
00:12:48التالي. يسمى المستوى الثاني حلقة مصنع البرمجيات. في هذا المستوى، تخطط بشكل جماعي لعدة
00:12:53ميزات وتضعها في حلقة بحيث يمكن لوكيلك الاستمرار في العمل طوال الليل على قائمة من الميزات و
00:12:59عدم التوقف بعد الانتهاء من ميزة واحدة. ونظراً لأن هذه الحلقات يمكن أن تصبح طويلة جداً، فهي تحتاج إلى متتبع ليخبره
00:13:04ما إذا كانت قائمة الميزات التي مُنحت قد اكتملت أم لا. تنتهي حلقة أهدافه بمجرد
00:13:09التحقق من جميع الميزات الموجودة في القائمة. والآن عندما تخطط لميزات جديدة،
00:13:13فلا يجب عليك فقط كتابة ما تريد صنعه، بل يجب عليك فعلياً تصميم واجهة المستخدم. يسمى هذا
00:13:18نموذجاً أولياً وهو نسخة قابلة للنقر بالكامل من التطبيق لا تعمل فعلياً. هناك سببان هائلان
00:13:23لبناء نموذج أولي لواجهة المستخدم قبل البدء في البناء. السبب الأول هو أنه باستخدام
00:13:28النموذج الأولي، يمكنك معرفة ما إذا كان الشيء الذي كنت تتخيل بناءه هو في الواقع الشيء
00:13:33الذي أردت بناءه. والسبب الثاني هو أن هذا النموذج الأولي يصبح وسيلة للوكيل
00:13:37الذي يعمل في حلقة للتحقق مما إذا كان الشيء الذي بناه صحيحاً أم لا. والآن في المصنع،
00:13:42لديك القائمة والوكيل يشغل القائمة في حلقة معالجة لكل عنصر واحداً تلو الآخر. ولكن كيف
00:13:48يعمل على كل عنصر على حدة؟ عندما يلتقط الوكيل الرئيسي عنصراً ما، فهو لا يقوم بالبناء
00:13:53بنفسه. بل يسلم المهمة إلى وكيل فرعي ويكمل الوكيل الفرعي الميزة. ولكن ماذا لو
00:13:58فسد الوكيل الفرعي عملية البناء وتخرب تطبيقك؟ ولهذا السبب يقوم الوكيل الرئيسي بإنشاء نسخة من
00:14:03المجلد تسمى فرعاً ويعمل الوكيل عليها. عندما ينتهي الوكيل، فهو لا يتحقق
00:14:07من عمله بنفسه. وهذا يقودنا إلى قاعدة أخرى مهمة جداً في هندسة الحلقات. الوكيل الذي يقوم بالعمل
00:14:13يجب ألا يتحقق منه أبداً. يجب أن يُسند التحقق دائماً إلى وكيل آخر ذي نافذة سياق جديدة.
00:14:18ونظراً لأن هذه هي الطريقة التي تعمل بها الوكلاء الفرعيون بالضبط، يسلم الوكيل الرئيسي الفرع إلى وكيل مراجعة
00:14:24خصمي. هذا يعني أن الوكيل يجب أن يعتقد دائماً بوجود خطأ ما في العمل المُنجز.
00:14:29هكذا يكون مفيداً في اكتشاف الأخطاء البرمجية. لذا إذا كانت هناك مشكلة ما من وكيل المراجعة
00:14:34الخصمي، يتعين على الوكيل الرئيسي بدء وكيل البناء مرة أخرى وتستمر هذه العملية في حلقة حتى تتم
00:14:39إزالة الميزة من القائمة. بعد إتمام تلك الميزة، عليه وضع عمل ذلك الفرع
00:14:44على التطبيق المنشور حتى يبدأ المستخدمون في استخدام الميزة الجديدة. لذا إذا لم تكن تعلم،
00:14:48فإن الإصدار الرئيسي من الكود على GitHub هو ما يُعرض بالفعل على التطبيق المنشور على Vercel.
00:14:53لذا إذا دُمج الفرع مع الإصدار الرئيسي، ستذهب الميزة الموجودة في هذا الفرع إلى التطبيق
00:14:58المنشور. وهنا يأتي دور موافقتك النهائية. عندما تكتمل الميزة، يتم إنشاء طلب سحب.
00:15:03طلب السحب هو طلب لدمج فرع الميزة مع الفرع الرئيسي. في طلب السحب هذا،
00:15:08سيرفق الوكيل لقطات شاشة أيضاً. ولكن إذا كنت تريد التأكد تماماً، يمكنك اختبار ما إذا كانت الميزة
00:15:13تعمل بالفعل على حاسوبك في المجلد من خلال طلب الانتقال إلى ذلك الفرع ثم
00:15:18اختباره. إذا كانت صحيحة، يمكنك دمج طلب السحب. لذا إذا ألقينا نظرة على مهاراتنا مرة أخرى،
00:15:22فسترى أن لدينا الآن ميزة جديدة. عندما تستدعي هذه المهارة، فسوف تخبر الوكيل
00:15:27بأنه يجب إنشاء مجلد هنا ويجب أن يحتوي كل مجلد على ملف spec.md
00:15:33وأشياء أخرى للتحقق منه. وكما ترون، لقد حددنا أساساً ميزتين هنا.
00:15:38الميزة الأولى هي أنه يجب أن تكون هناك الآن صفحة خدمات تضم كل شخص في الصالون. ثم
00:15:43الميزة الثانية هي أنه عندما يكون لدى الشخص جلسة مع مصفف شعر في الصالون، يمكنه أساساً إضافة
00:15:48تقييم من خلال موظف الاستقبال، وهو المسؤول. والآن، بدلاً من استخدام مهارة الميزة الجديدة هنا،
00:15:53نستخدم مباشرة مهارة كاتب الأهداف. والآن، كل هذه المهارات مترابطة. لذا إذا
00:15:58لم نكن نريد لميزة أن تصبح هدفاً، وإذا أردنا فقط العمل على الميزة بدون حلقة،
00:16:03فإننا لا نستخدم كاتب الأهداف. ولكن إذا استخدمنا كاتب الأهداف، فسوف يُطلق مهارة الميزة الجديدة و
00:16:08سوف يضيف القواعد لجعل ملف المواصفات هدفاً قابلاً للتنفيذ أيضاً. والآن، كما ناقشنا بالفعل،
00:16:13يجب عليك تصميم واجهة المستخدم للميزة قبل البدء في تنفيذها. ولهذا السبب
00:16:18تستدعي مهارة الميزة الجديدة مهارة واجهة المستخدم الوظيفية، والتي تخبرها أساساً أن مجلداً
00:16:23يسمى mocks يجب أن يكون موجوداً داخل التطبيق وأن ملف HTML داخل مجلد mocks ذاك سيكون
00:16:29نموذجاً أولياً وظيفياً بالكامل لكامل التطبيق. وسوف يحتوي على واجهات عرض
00:16:33لكل من موظف الاستقبال والعميل أيضاً. والآن من المفترض أن يكون هناك واحد فقط من هذه في كل
00:16:37مجلد ولن تنشئ مهارة واجهة المستخدم الوظيفية هذا إلا إذا لم يكن قد تم إنشاؤه بالفعل. ومن
00:16:42الواضح، نظراً لأنه يتم تشغيله كلما تم إنشاء ميزة جديدة، داخل كل مجلد ميزة،
00:16:47سيضيف أيضًا ملف HTML. الآن سيأخذ التطبيق المنسوخ مسبقًا ويأخذ فقط
00:16:53الجزء الذي تغيره الميزة ويعرضه وحده. على سبيل المثال، لدينا ميزة الخدمات هذه
00:16:58هنا. وإذا فتحنا النموذج الخاص بها، يمكنك أن ترى أننا سنضيف صفحة خدمات كاملة إلى التطبيق،
00:17:04وسيكون الوصول إليها متاحًا عبر هذا الزر. وإذا نقرت على احجز الآن واخترت مصفف شعر،
00:17:08سيطلب منك أولاً تحديد الخدمة التي تريدها مع مصفف الشعر. الآن هذا لم يتم
00:17:13تنفيذه فعليًا في التطبيق، ولم يتم تنفيذه داخل النسخة، ولكنه مُنفذ في نموذج
00:17:19هذه الميزة. لذا فهو يساعدك على تصور ما إذا كان ما تصنعه هو ما تريده حقًا. وهذا أيضًا
00:17:24يصبح وسيلة تستطيع الحلقة من خلالها التحقق فعليًا مما إذا كان ما تبنيه صحيحًا أم لا. لذا بعد ذلك،
00:17:29أخبرناه أن يكتب الميزتين، وقام أساسًا بكتابة المجلدات الخاصة بتقييمات الجلسات
00:17:33والخدمات. إذن هذه هي واجهة المستخدم الخاصة بتقييمات الجلسات. ومرة أخرى، يمكنك عرضها بصفتك
00:17:38العميل وموظف الاستقبال. سيقوم موظف الاستقبال بإضافة التقييمات نيابة عن العميل،
00:17:43لأن هذه هي الطريقة التي نتصور بها عمل الموقع الآن. لن يحدث هذا في موقع فعلي،
00:17:47ولكن بما أن هذا موقع تجريبي، فنحن نبتكر ميزات جديدة. وبما أن لدينا ميزات متعددة
00:17:52للعمل عليها الآن، فنحن بحاجة أساسًا إلى قائمة لتتبعها. ولهذا السبب لدينا مهارة دفعة الميزات هذه،
00:17:57والتي تستخدم ببساطة ملف تخفيض السعر Q هذا، وهو عبارة عن جدول واحد فقط
00:18:02تُردج فيه الميزات. على سبيل المثال، الآن، لا تزال الحلقة مستمرة وهي تبني
00:18:06الأولى بينما لا تزال الثانية في قائمة المهام، وستقوم بتسجيلها واحدة تلو الأخرى. لذا
00:18:11عليك فقط استدعاء المهارة وإخبارها بإضافة الميزات التي تريدها. ثم كما يمكنك أن ترى،
00:18:16فقد ذكرت أنها كانت تكتب الملفين وأضافت تلك الميزات. ثم بمجرد إضافتها،
00:18:21تمنحك أساسًا أمر الهدف لتنفيذه فعليًا. لقد قمنا بتغييره قليلاً وقدمنا تشغيل ملف الطابور
00:18:26داخل هدف ولم يكن سيتوقف إلا عندما لا يكون هناك أي صف في قائمة المهام أو قيد الإنشاء، مما يعني
00:18:31أنها اكتملت جميعها وانتقلت إلى المنجز. وبدأت في العمل أساسًا. لا تزال مستمرة
00:18:36في الميزة الأولى وكما أخبرناك مسبقًا، ستستخدم أولاً وكيلًا فرعيًا لبناء
00:18:41الأشياء ثم لفحص والتحقق من عمله، سيقوم بإطلاق وكيل معارض. لا يزال الأمر مستمراً،
00:18:46لقد مر حوالي ثلاث ساعات وسنريكم النتيجة النهائية بمجرد اكتمالها. إذن كما ترون،
00:18:51كما ترون، لقد فتحنا جيت هاب ولدينا مشروع “لوب سالون” هنا تماماً. إذا لم تتمكن من العثور عليه،
00:18:55فيمكنك ببساطة إخبار الوكيل بمنحك هذا الرابط وستتمكن من فتحه. إذن هنا،
00:19:00سترى علامة تبويب طلبات السحب هذه وبعد فتحها، سترى طلب السحب الذي
00:19:04أنشأه الوكيل لمراجعته. لذا إذا نظرت إلى هذا، فقد قدم لنا الملخص بأكمله ثم
00:19:09منحنا بالفعل لقطات شاشة للصفحات، مما يمنحنا دليلاً على أن العمل الذي كان ينبغي
00:19:13إنجازه قد تم بالفعل. بمجرد أن نراجع كل هذا، يمكننا ببساطة دمج طلب السحب. وكما
00:19:18ترون، لدينا الإصدار المستضاف المباشر هنا. ليس لديه نطاق، ولهذا السبب ينتهي
00:19:23بـ فيرسل. ولكن كما ترون، أردنا إضافة ميزة الخدمات هذه. والآن إذا ذهبنا
00:19:27إلى ميزة الخدمات، نحصل على جميع الخدمات التي يقدمها الصالون. وإذا ذهبنا إلى خيار احجز الآن،
00:19:33يمكننا أن نرى بالفعل أن كل مصفف شعر يحصل على خدماته الخاصة. وقبل أن تتمكن من حجزها،
00:19:37عليك أساسًا تحديد الخدمة. وسيحدث الشيء نفسه عندما نقوم بدمج طلب السحب الثاني
00:19:42هذا أيضًا. وكل ما مررنا به هنا، لقد شرحناه أساسًا
00:19:47بطريقة تجعلك تذهب وتبنيه بنفسك. المهارة هي حقًا مجرد تعليمات مكتوبة موجودة
00:19:51في ملف. لذا ليس هناك أي شيء هنا لا يمكنك صنعه بنفسك في الواقع. ولكن إذا كنت لا تريد
00:19:56إذا لم تكن ترغب في مرود بكل ذلك، فإن المستودع بأكمله موجود في AI labs pro، وهو مجتمعنا.
00:20:01هذا هو النظام بأكمله أساساً، بالشكل الذي رأيته للتو مع وجود كل مهارة بالفعل في مكانها.
00:20:05لذا، إذا وجدت قيمة فيما نقوم به، وتريد دعم القناة، فهذه هي الطريقة الصحيحة للقيام بذلك.
00:20:10سيكون الرابط في الوصف. إذن، لم يتبق سوى شيئين لتفعلهما في هذه العملية بأكملها.
00:20:14الآن عليك فقط تخطيط الميزة وعليك إعطاء الإذن النهائي قبل إرسال الميزة أو التغيير إلى مستخدميك.
00:20:19لا يتطلب أي من هذين الأمرين حقاً أن تكون أمام حاسوبك المحمول، وخاصة جزء التخطيط.
00:20:24أنت توصف ما تريده، وهو يطرح عليك الأسئلة حتى يفهم ويبني لك النموذج الأول.
00:20:28وكل ذلك يمكن القيام به من هاتفك. وإذا كان تغييراً بسيطاً، فيمكنك أيضاً إعطاء الإذن النهائي من هاتفك.
00:20:33وهنا يأتي دور المستوى الثالث وهدفه الرئيسي هو إزالة اعتمادك على حاسوبك المحمول.
00:20:37لهذا الغرض، وجدنا تطبيقاً جيداً حقاً يسمى Paseo. يقوم بتشغيل عميلك على حاسوبك المحمول
00:20:43ويمنحك نافذة للتحكم به من هاتفك. لذا يظل عميلك على جهازك مع كافة ملفاتك,
00:20:48وكافة مهاراتك، وجميع واجهات الأوامر المسجلة مسبقاً. وكل ما بنويته في هذا الفيديو يستمر في العمل.
00:20:52يمكن لـ Claude code القيام بذلك أيضاً باستخدام ميزة التحكم عن بُعد المدمجة،
00:20:57ولكن العديد من الأشياء فيها لا تعمل بشكل صحيح. مثل المهارات، لا تحصل حقاً على قائمة لتشغيل
00:21:03المهارات في ميزة التحكم عن بُعد الخاصة بـ Claude. لذا فهذا تطبيق مجاني
00:21:07وسنضع رابطه أدناه. لن نتعمق في كل ما يفعله، بل الأساسيات فقط لتتمكن من البدء به.
00:21:12يحتوي التطبيق على نظام مساحات عمل حيث تكون كل مساحة عمل عبارة عن مجلد أساساً
00:21:17وتفتح محادثات مختلفة بداخله وهو يشغل Claude code بنفسه لذلك لا تحتاج إلى اشتراك منفصل آخر.
00:21:22ثم هناك جزء آخر مثير للاهتمام حقاً وهو أنه لا يعمل فقط على حاسوبك المحمول،
00:21:26بل يمكنه العمل على جهاز Mac mini قمت بتوصيله أيضاً. لذا من حاسوبك المحمول يمكنك
00:21:31التحكم في جهاز Mac mini ومن هاتفك يمكنك التحكم في ذلك الـ Mac mini أيضاً.
00:21:35وبدلاً من واجهة طرفية الأوامر بالكامل، فهي أكثر صقلاً بكثير. تبدو وكأنها Cursor
00:21:40ولكن جميع الميزات لا تزال موجودة هنا. أمر goal يعمل وكذلك جميع أوامر الشرطة المائلة الأخرى التي أنشأناها.
00:21:45لذا فقد فتحنا مجلد loop engineering هنا وأنشأنا جلسة فيه ونحن نحدد ميزة جديدة فيه.
00:21:49هناك ميزة جديدة واحدة هنا أيضاً وهي مهارة المعاينة على الهاتف المحمول وسنتناولها بعد قليل.
00:21:54الآن لنريكم كيف يبدو هذا على الهاتف المحمول، لقد قمنا بعكس شاشة الهاتف هنا
00:21:59وهذه هي نفس الواجهة تماماً التي تحصل عليها على حاسوبك. تحصل على جميع ميزات Claude code
00:22:03وأوامر الشرطة المائلة جاهزة للاستخدام أيضاً، لذا لبدء ميزة جديدة عليك فقط تشغيل أمر الشرطة المائلة للميزة الجديدة
00:22:09هناك مباشرة على هاتفك المحمول. لقد نفذنا تدفق تسجيل الدخول لجانب العميل والذي لم يكن
00:22:14منفذاً من قبل. ثم هناك جزء مثير للاهتمام حقاً. ستقوم بالطبع كتابة ملف الميزة بالكامل
00:22:18ولكن لكي نريكم شكل النماذج الوهمية، يمكنها أن تمنحنا صوراً مباشرة في الواجهة
00:22:22وتظهر تلك الصور على هاتفك المحمول أيضاً، لذا يمكنك التحقق من واجهة المستخدم مباشرة على هاتفك.
00:22:27ولكن السبب في تشغيلنا لمهارة المعاينة على الجوال هو أنها تنشر النماذج الوهمية لـ HTML على روابط
00:22:32وهي عمليات نشر مجانية على Vercel، وما يوفره لك ذلك هو أنه عندما تنقر على الرابط
00:22:37ينقلك إلى النموذج الوهمي الفعلي ويمكنك النقر واستخدام التطبيق بشكل صحيح بدلاً من مجرد النظر إلى الصور.
00:22:42وهذا حقاً ما تريده عندما تشغل هذا المصنع من هاتفك. وهذا يوصلنا إلى نهاية هذا الفيديو.
00:22:47إذا كنت ترغب في دعم القناة ومساعدتنا في الاستمرار في صنع مقاطع فيديو مثل هذه
00:22:51فيمكنك القيام بذلك باستخدام زر شكراً (Super Thanks) أدناه. وكما هو دائمًا شكراً للمشاهدة
00:22:56هذا يمكنك القيام بذلك باستخدام زر الشكر المتوفر أدناه. وكالعادة، شكراً على المشاهدة
00:23:01وأراك في الفيديو القادم.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기