Building AI Apps Live from Cairo 🔴
تحب تدعم البث؟ عضوية «داعم» على يوتيوب بـ 60 جنيه في الشهر: شارات، إيموجي، وأسئلتك بجاوبها الأول في البث. اشترك كداعم
الخلاصة
يركّز البث على تجربة عملية طويلة لصقل واجهة موقع بمساعدة وكلاء البرمجة، ولا سيما حركات قسم البداية والشبكة النقطية وخطوط الربط وشريط التقدّم. اعتمد لقمان على المعاينة الحية ولقطات الشاشة وأدوات فحص المتصفح للتحقق من النتيجة بدل الاكتفاء بصحة الكود، وشخّص مشكلات شملت إطارات CSS مفقودة، وتراجعًا بصريًا، والتباس الخوادم والمنافذ، وتأثيرات تختفي بعد التحديث. ظهرت بعض الحركات بعد الانتقال إلى مكتبة الحركة الموجودة في المشروع، لكن ظلّت تفاصيل أخرى قيد الضبط، مع التشديد على حصر التغييرات وحفظ الحالات الجيدة في Git. كما ناقش تصميم مركز قيادة للمشروعات بأدوار وكلاء متعددة وملف JSON مشترك، مقابل خطر الإفراط في الأتمتة وتحول أداة الإدارة إلى مصدر تشتت؛ ولم يُحسم الاختيار بين المسارات المؤتمتة والعمل التفاعلي. وقارن، بوصفه رأيًا وتجربة شخصية لا اختبارًا شاملاً، بين Cursor وWarp وAntigravity وCodex من حيث المعاينة داخل بيئة التطوير، وعزل الطرفية، والتحكم أثناء التنفيذ، ونقل السياق، وحدود الاستخدام. وشملت أسئلة الجمهور WordPress وVercel وCloudflare وSupabase وFirebase، وتحويل فكرة موقع إلى تطبيق Android، وملاءمة WordPress لمنصات IPTV أو OTT مع ضرورة مراعاة حقوق المحتوى. بقيت عدة مسائل بلا نتيجة مؤكدة، منها بعض حركات الواجهة، استعادة تأثير حُذف، استهلاك YouTube API، واختلاف مدة البث المعروضة على YouTube.
108 لحظة من البث
- 4:05:51
لماذا يفضّل Cursor لمهام تطوير الويب
يوضح رأيه بأن Cursor أنسب لسير عمل الويب لأنه بيئة تطوير متكاملة تتيح عرض الموقع والتعامل مع عناصره وأخذ لقطات شاشة داخل بيئة العمل، بينما يصف Warp بأنه ليس بيئة تطوير متكاملة بالمعنى نفسه. كما يعبّر عن إحباطه من بطء الوكلاء وصعوبة رؤية التغييرات.
- 4:08:21
تقييم أثر الإضافات في مخرجات وكيل البرمجة
جرّب لقمان تشغيل وكيل برمجي ومراجعة لقطات الشاشة الناتجة لمعرفة ما إذا كانت الإضافات ستنتج عملاً مختلفاً بوضوح عن المحاولة السابقة. ظلّت النتيجة غير واضحة ولم يعتبر المهمة مكتملة.
- 4:11:41
ضبط النماذج والمهارات وحماية الملفات في بيئة الوكيل
راجع لقمان إعداد بيئة وكيل برمجي، فاختار مجموعة محدودة من النماذج، وتأكد من استيراد الإضافات والمهارات، واستعرض إعدادات طلب الإذن وأدوات المتصفح وMCP والحماية من حذف الملفات أو تعديلها تلقائياً. أسماء وإصدارات بعض النماذج غير واضحة في التفريغ.
- 4:15:29
بدء مشروع عبر الوكيل ومناقشة نافذة السياق
انتقل لقمان إلى مجلد مشروع آخر لبدء العمل من الصفر، وفضّل تنفيذ العمل عبر الوكيل بدلاً من الطرفية المدمجة. اختار نموذجاً للعمل، ثم أشار إلى أن سعة نافذة السياق قد تكون قيداً يستحق التجربة والتحقق.
- 4:22:40
تشخيص حركة غير ظاهرة في قسم الواجهة الرئيسي
وُصفت مشكلة في حركة يُفترض أن تبقى ظاهرة داخل قسم الواجهة الرئيسي، لكنها كانت تظهر لفترة وجيزة ثم تختفي أو لا تظهر إطلاقاً. وبعد أن أفاد الوكيل بإضافة شريط ضوئي أخضر دوري، ظل التغيير غير مرئي على خادم التطوير، فكان المطلوب التحقيق في سبب عدم ظهوره والاستفادة من الأدوات والمهارات المتاحة لإصلاحه؛ ولا توثّق المقاطع حلاً ناجحاً.
- 4:26:54
ملاحظات على سير عمل متعدد الأدوات والوكلاء
رغم بطء التقدم في المشروع، خلص المتحدث إلى أن الجلسة ساعدته على فهم إعداد سير عمله بصورة أفضل. ذكر عدة أدوات، وأبرز قدرة Warp على تشغيل وكلاء متعددين عبر تبويبات متوازية، مع ملاحظة أنه لم يكن، وقت الجلسة، بيئة تطوير متكاملة ولذلك لم يكن يتيح عرض الموقع داخل بيئة التحرير؛ وأضاف، بصيغة توقع شخصي، أنه قد يتطور إلى ذلك لاحقاً.
- 4:28:06
المعاينة الحية ومراجع العناصر في بيئات التطوير بالذكاء الاصطناعي
يقارن المتحدث عمليًا بين Cursor وAntigravity، موضحًا أن عرض الموقع داخل بيئة التطوير وإرسال لقطات الشاشة أو تحديد عناصر وكودها يمكن أن يسهّل توجيه الوكيل. ويرى أن عزل الطرفية قد يقيّد سير العمل، وأن مشاهدة تغييرات الواجهة مباشرة ضرورية أثناء تطوير المواقع.
- 4:30:33
تشخيص تغييرات واجهة لا تظهر على خادم التطوير
بعد أن ظلت الحركة المطلوبة غير ظاهرة رغم تحديث الصفحة، طلب المتحدث من الوكيل التوقف عن تخمين تعديلات الكود وتشخيص سبب عدم ظهورها. أشارت المحاولة إلى احتمال وجود التباس بين الخادم أو العملية العاملة على المنفذ 3000 والصفحة المفتوحة على 3002، لكن الصفحة لا توثّق حلًا نهائيًا مؤكدًا.
- 4:37:09
تشخيص الملفات وفتح عدة مشاريع في Cursor
يشير المتحدث إلى أن بيئات التطوير تعرض مشكلات الملفات بصورة أوضح من العمل عبر الطرفية وحدها، ثم يطلب البحث عمّا إذا كان Cursor يسمح بفتح عدة مشاريع في الوقت نفسه. لا تتضمن الصفحة إجابة عن السؤال.
- 4:39:19
تشغيل عدة نوافذ Cursor لمشاريع مختلفة
يوضح النقاش إمكانية تشغيل عدة نسخ من Cursor في الوقت نفسه، بحيث تُفتح نافذة مستقلة لكل مشروع غير مرتبط بالآخر، مع ذكر اختصار لفتح نافذة جديدة.
- 4:40:45
عزل سبب غياب حركات الواجهة
بعد عدم ظهور تغييرات الواجهة على الخادم المحلي، استُخدمت شارة حمراء نابضة كعلامة تشخيصية. ظهور الشارة مع غياب الحركات الأخرى دعم الاستنتاج بأن المشكلة في الكود، ثم طُرح تداخل عدة خوادم أو منافذ أثناء العمل المتوازي كاحتمال، مع تجربة التركيز على قسم واحد فقط للمقارنة.
- 4:50:15
تشخيص حركة واجهة لا تظهر كما ينبغي
بدأ التشخيص بتمييز مشكلة الخادم عن مشكلة الكود، ثم أظهرت المراجعة أن أسلوب الحركة المعتمد على أصناف CSS ووسم style قد لا يعمل في البيئة المستخدمة. جرى التحول إلى مكتبة الحركة الموجودة في المشروع، فظهرت الحركة وأصبح التركيز على تنعيم الإضاءة، وضبط الخط الدوّار، وتوسيط النص. ظل بعض التقييم بصريًا وتجريبيًا، مع الإقرار بوجود منحنى تعلم في صياغة تعديلات الواجهة الدقيقة.
- 5:01:22
هل يمكن تشغيل Cursor من تطبيق خارجي؟
طُرحت فكرة إضافة زر يفتح طرفية أو وكيلًا داخل Cursor من تطبيق خارجي. الرد المنقول في الجلسة أفاد بعدم وجود مسار مكافئ مباشر، واقترح أن الحل المحتمل يتطلب إضافة صغيرة تعمل داخل بيئة متوافقة مع VS Code؛ لذلك عُدّت الفكرة مشروعًا منفصلًا وأُرجئت.
- 5:03:11
تكرار سريع لضبط تأثير إضاءة داخل بطاقة
استمرت المحاولات لضبط مسح ضوئي داخل بطاقة بعد أن ظل التأثير محصورًا قرب أعلاها أو غير مرئي. تضمنت الملاحظات قياس موضع التأثير، ومراجعة أنماط المزج والإطارات المفتاحية، وتقليل زمن الانتظار بين كل تعديل ومراجعته، لكن النتيجة المطلوبة لم تُحسم في هذه الصفحة.
- 5:08:57
جعل تعديلات الواجهة واضحة وقابلة للتقييم
أثناء تحسين قسم المقدمة، طُلب إجراء تغييرات بصرية أكثر وضوحاً لتسهيل تقييم الاتجاه، واستخدام لقطات شاشة لمراجعة النتيجة. بعد ظهور تأثير المسح الذهبي بوضوح، تقرر الإبقاء عليه مع إزالة التوهج العلوي وتأثير آخر يتحرك داخل الصندوق.
- 5:16:04
ضبط اتجاهات الحركة وتشخيص مؤثر لا يظهر
تضمنت المراجعة توجيه خطوط الحدود للتحرك في اتجاهات محددة وربط الحركة بصرياً بين عناصر الواجهة. وبعد أن ظهر غسيل أخضر ثابت على قسم المقدمة، استُنتج أن المشكلة في تنفيذ المؤثر لا في الخادم، مع اقتراح تجربة Framer Motion أو أساليب أخرى بدلاً من الاعتماد على تنفيذ CSS غير الناجح؛ بعض أسماء العناصر والتفاصيل اللفظية غير واضحة في النص.
- 5:22:01
ضبط حركة خطوط الاتصال في واجهة البطل
يوجّه تعديلات على حركة الواجهة: إزالة انتقال غير مناسب، ومنع توهج مركز الأوامر، وإطلاق خطين من نقطة واحدة أسفل الصندوق ليتحركا يميناً ويساراً بالسرعة نفسها. وبعد استبدال أسلوب CSS بعنصر حركة، أصبحت حركة المسح ظاهرة، ثم طلب جعلها أهدأ وفي الخلفية بخطوط أنحف وطابع تصميمي بسيط.
- 5:26:37
رأي في ملاءمة Warp لأعمال الخلفية والويب
يرى أن Warp جيد، وخصوصاً لأعمال الخلفية، لكنه يلمّح إلى أن العمل على موقع ويب قد يتطلب أداة أو نهجاً آخر. العبارة الأخيرة غير واضحة في النص، لذلك لا تُنسب إليه توصية أكثر تحديداً.
- 5:28:20
إنشاء مواقع بالذكاء الاصطناعي: WordPress أم منصات أحدث؟
رداً على سؤال عن إنشاء موقع بالذكاء الاصطناعي ووضعه على WordPress، يقول إن ذلك ممكن لكنه لا يعمل كثيراً مع WordPress. يوضح أن توجهه يميل أكثر إلى Vercel وCloudflare، ويصف WordPress بأنه أقدم نسبياً في سياق أدوات الذكاء الاصطناعي، مع تقديم ذلك بوصفه رأيه الشخصي لا حكماً مطلقاً.
- 5:29:35
تنقيح ألوان وحركة واجهة البطل
يراجع تصميم واجهة البطل ويطلب الإبقاء على بنيته مع تقليل هيمنة اللون الأخضر، وجعل مركز الشبكة المنقطة أسود يتدرج نحو الأخضر. ويرفض تنفيذًا لاحقًا لأن الخطوط أعطت مظهرًا طفوليًا يشبه لعبة الثعبان.
عندك سؤال عن حاجة في البث ده؟
اسأل في الجروب