Building AI Apps Live from Cairo 🔴
تحب تدعم البث؟ عضوية «داعم» على يوتيوب بـ 60 جنيه في الشهر: شارات، إيموجي، وأسئلتك بجاوبها الأول في البث. اشترك كداعم
الخلاصة
يركّز البث على تطوير مركز أوامر يربط خريطة المشاريع ولوحة المهام والموجّهات بجلسات وكلاء البرمجة. نوقشت مفاضلات تشغيل الوكلاء داخل Electron مقابل مسار هجين يرسل موجّهات منظّمة إلى Warp أو Cursor، مع إبقاء المشغّل قادرًا على المتابعة والتدخل ومزامنة حالة المهام. شملت التجارب توليد الموجّهات، فتح جلسات Warp، اللصق الآلي، واختبار جلسات Claude Code التفاعلية؛ لكن الاختبارات كشفت مشكلات في نقل الموجّه، وحالات إنجاز مضللة، وحدودًا في أتمتة تبويبات Warp، لذلك لم يثبت اكتمال التدفق النهائي. كما تناول البث استخدام لقطات الشاشة وDOM وPlaywright لإعادة بناء عناصر واجهة، والبحث عن مراجع تصميمية، وتوزيع النماذج بحسب أدوار الوكلاء، مع بقاء بعض الاتصالات والتعيينات والنتائج البصرية غير محسومة. وظهرت أيضًا مناقشات مفيدة عن أتمتة المحتوى وSEO، والتحقق من قيمة الأدوات قبل بيعها أو دفع اشتراكها، وتشخيص نفاد حصة YouTube API، وأهمية خريطة المشاريع لمقاومة التشتت، والتعلم العلني وتقديم مزيد من المحتوى التقني بالعربية.
43 لحظة من البث
- 0:01:26
أتمتة موقع المحتوى والتحقق من الأدوات قبل بيعها
عرض المتحدث أولويات عامة تشمل أتمتة توزيع المحتوى، وتحسين الموقع لمحركات البحث، وربط الموقع بالمحتوى المنشور. كما ذكر أمثلة لأدوات يستخدمها شخصيًا، منها أدوات للتجارة الإلكترونية والاستضافة والنطاقات، وأكد ضرورة استخدام الأداة والتحقق من قيمتها قبل عرضها للبيع.
- 0:07:03
Cursor وWarp: اختيار بيئة مناسبة للعمل على الواجهات
يقارن المتحدث بين Warp وCursor وبيئة سابقة، موضحًا أن Warp يظل بيئته الأساسية، بينما يرى Cursor أنسب للعمل على الواجهات بسبب المتصفح المدمج وإمكان مشاركة لقطات الشاشة ونسخ محتوى الطرفية. وينسب انتقاله من البيئة السابقة إلى قيود عزل الطرفية والنسخ واللصق فيها.
- 0:10:12
تشخيص تعطل تحديث صورة البث عبر YouTube API
عند عدم تحديث صورة البث تلقائيًا على الموقع، أظهر التشخيص أن حصة YouTube API كانت قد نُفدت. قال المتحدث إنه عدّل طريقة استهلاك الحصة لتقليل نفادها المبكر بعد إعادة الضبط، لكن التحقق المباشر من النتيجة كان لا يزال منتظرًا.
- 0:14:04
استخدام المتصفح المدمج ولقطات الشاشة في سير عمل الواجهة
يستكشف المتحدث فتح البث ومواقع أخرى داخل بيئة التطوير عبر أمر فتح المتصفح، ثم تجربة التقاط جزء محدد من الشاشة ونسخه. ويقترح استخدام هذا السياق المرئي للمساعدة في البحث عن أساليب تنفيذ الواجهات والعصف الذهني للتصميم، من دون الوصول إلى تصميم نهائي في هذا المقطع.
- 0:20:14
دمج لقطات الشاشة مع عناصر DOM عبر Playwright MCP
يشرح المتحدث فكرة مساعدة وكيل برمجة على فهم واجهة موقع بصريًا، لا من خلال قراءة الكود وحده، وذلك بتزويده بلقطة شاشة مع الصنف أو العنصر الخاص بزر الدعوة إلى الإجراء لمحاولة إعادة إنشاء تصميم مشابه. حاول استخدام Playwright MCP لهذا الغرض، لكن الاتصال فشل؛ وأشار الفحص إلى أن حزمة مذكورة في إعداد JSON قد لا تكون موجودة على npm، من دون إثبات نجاح الإصلاح ضمن هذه الصفحة. كما ذكر، على سبيل الاعتقاد لا الجزم، أن Gemini قد يدعم رؤية الموقع عبر لقطات الشاشة.
- 0:25:14
فحص زر CTA وإعادة بنائه بالاستعانة بالذكاء الاصطناعي
تجربة لإعادة بناء زر CTA بصرياً عبر جمع الـ outer HTML ولقطة شاشة، ثم استخدام Playwright لفحص الصفحة والتأثيرات الحركية والألوان. يوضح النقاش سبب مطالبة المساعد أولاً بوصف العنصر وفهمه قبل تنفيذ نسخة React وTailwind قابلة لإعادة الاستخدام ومتجاوبة، مع اختيار مطابقة الألوان الدافئة الأصلية في هذا الاختبار دون تأكيد دقة النتيجة النهائية.
- 0:29:32
الفرق بين outer HTML وinner HTML
توضيح عملي مختصر: يشمل outer HTML العنصر المحدد نفسه ومحتواه، بينما يقتصر inner HTML على المحتوى الموجود داخله. ظهر هذا الفرق أثناء محاولة استخراج عنصر واجهة كامل لإعادة بنائه.
- 0:38:58
بناء زر بتأثير كهربائي أخضر هادئ
أعاد المتحدث بناء مكوّن زر وإضافة CSS المطلوب، ثم حدّد هدفه البصري كتأثير أو حركة كهربائية خضراء هادئة للموقع. وأوضح أن هذه التفاصيل الدقيقة ليست جوهرية، لكنها جزء من تعلّمه أثناء العمل.
- 0:41:53
توزيع أدوار أدوات الذكاء الاصطناعي بين الواجهة والخلفية
نقل المتحدث انطباعًا سمعه بأن إعدادًا غير محدد بدقة من Codex قد يكون أفضل في مهام الواجهات، وذكر أنه يستخدم Claude للعمل على الخلفية. التعليق انطباعي، ولا يقدّم مقارنة مختبرة بين الأدوات.
- 0:44:32
تقييم الترقية المدفوعة حسب الاستخدام والعائد
قال المتحدث إنه قد يفكر في الترقية إلى خطة مدفوعة فقط إذا استخدم الأداة كثيرًا، استفاد منها فعليًا، ووجد لها عائدًا واضحًا. اسم الأداة وبعض مسميات الخطط غير واضحة في النص.
- 0:47:33
استخدام المراجع البصرية لتصميم متتبع أهداف
بعد ملاحظة أن النتيجة اختلفت أساسًا في منطق الحركة مع استهلاك قدر ملحوظ من السياق، اتجه المتحدث للبحث عن أمثلة عالية الجودة لتصميم متتبعات الأهداف وتأثيراتها. ذكر Dribbble وBehance كمصادر إلهام، ورأى أن العثور على أمثلة مناسبة ثم البناء عليها قد يجعل تجارب الواجهة أكثر فاعلية، مع استمرار التحقق مما إذا كانت الأمثلة تتضمن الحركة المطلوبة.
- 0:53:33
فكرة إضافة تحول عناصر الواجهة إلى كود
طرح المتحدث فكرة بناء إضافة تستخرج عناصر واجهة المستخدم من الصفحات وتعيد الكود المقابل لها. بقيت الفكرة في مستوى الاقتراح، ولا تشير النصوص إلى أنها بُنيت أو اختُبرت.
- 0:54:36
تخطيط مركز قيادة يربط مسار العمل بلوحة المهام والوكلاء
ينتقل العمل إلى مركز قيادة قائم على الواجهة، مع جمع أمثلة تصميمية ومراجعة المواصفات الأصلية والسجل السابق قبل التنفيذ. التصور يربط عرض مسار المشروع بلوحة المهام ومركز الوكلاء، مع تركيز خاص على فهم ما أُنجز وما يلي وكيف تتكامل هذه الواجهات في سير عمل واحد.
- 0:59:33
تصميم لوحة مهام وكيلة مع أوضاع تنفيذ متعددة
تُعرض لوحة مهام تتضمن حالات وأولويات واعتماديات وعناصر حظر، مع اختيار تنفيذ المهمة بواسطة إنسان أو وكيل أو بالعمل المشترك. يمكن تخصيص المطالبة بمعايير القبول والقيود وملفات السياق، ثم تشغيل مسار متتابع للبحث والتخطيط والبناء. يظل تحسين تعليمات النظام وسياق المشروع تحدياً تصميمياً قائماً، والواجهة نفسها ما تزال قيد التطوير.
- 1:05:27
الإرسال الفردي وخط أنابيب المطالبات المتتابع
يوضح النقاش مسارين داخل تبويب المطالبة: إرسالاً فردياً يختار نوع وكيل واحد، وخط أنابيب يمر بالتتابع عبر الاستكشاف والتخطيط والبناء، بحيث يغذي ناتج كل مرحلة مطالبة المرحلة التالية. معاينة المطالبة تُنتج مستند Markdown نصياً للصق في جلسة برمجية، وليست رسالة نظام بالمعنى الخاص بواجهات API؛ وهي تجمع سياق المشروع وقاعدة الشفرة وتعليمات ثابتة مرتبطة بنوع الوكيل.
- 1:11:37
استخدام NotebookLM لبناء سياق بحثي أعمق
يوضح المتحدث أنه يستخدم أدوات مختلفة بحسب المهمة، ويفضل عادةً أداة أخرى للبحث العام، بينما استفاد من NotebookLM في جمع مادة كتاب وتقارير بحثية واستخلاصها ثم تمرير السياق إلى نموذج لغوي لتحسين جلسات العصف الذهني. هذا وصف لتجربة شخصية، وليس مقارنة اختبارية حاسمة بين الأدوات.
- 1:13:15
من توليد الموجّهات إلى تشغيل المهام فعلياً
يوضح النقاش أن زر تشغيل المهمة في الحالة الحالية ينسخ الموجّه إلى الحافظة فقط؛ وعلى المستخدم لصقه يدوياً في الطرفية. لا يوجد بعد تكامل مع بيئة التطوير أو إنشاء للعمليات أو توجيه للمهمة إلى طرفية محددة. ويتطلب التنفيذ الفعلي تحديد وسيلة اكتشاف الطرفيات وربط كل مهمة ببيئة التشغيل المناسبة، مع تمييز ذلك عن أدوات البرمجة متعددة الوكلاء التي لا تطابق الاحتياج المطروح تماماً.
- 1:16:32
التفاعل مع الوكيل أم أتمتة دورة العمل بالكامل؟
تناقش المجموعة كيفية تمرير الأوامر من تطبيق Electron إلى جلسات الطرفية. فتح جلسة Warp يتيح مشاهدة الوكيل والتفاعل معه، لكن استرجاع النتائج يظل يدوياً؛ أما تشغيل Claude Code كعملية فرعية أو عبر SDK فيمنح التطبيق مخرجات منظّمة وتحكماً في دورة التشغيل، مع الحاجة إلى واجهة تعرض ما يفعله الوكيل. ظل الاختيار غير محسوم، وكان تقبّل خطوة يدوية مطروحاً لتجنب تعقيد غير ضروري.
- 1:19:39
البث كوسيلة للتعلم ومشاركة المعرفة
يصف المتحدث البث بأنه مشتت جزئياً لكنه مفيد لتعلّمه الشخصي، ويرى أن مشاركة العمل قد تساعد آخرين على الاستفادة من مجال بناء تطبيقات الذكاء الاصطناعي.
- 1:23:49
مزامنة حالة المهام عبر ملف داخل المشروع
طُرح استخدام ملف داخل المشروع يُحدَّث باستمرار بحالة المهمة لإرجاع معلومات التنفيذ إلى التطبيق حتى عند تشغيل الجلسة في طرفية خارجية. وذُكر أن نمط مزامنة الحالة موجود بالفعل في قاعدة الشفرة، بينما آلية إطلاق Warp بالأمر المطلوب لم تكن موجودة بعد.
عندك سؤال عن حاجة في البث ده؟
اسأل في الجروب