00:00:00هناك طبقة في عملية البناء القديمة لم تعد موجودة الآن.
00:00:03ولم تكتشف معظم الفرق بعد ما الذي يجب استبدالها به، لذا فهم لا يزالون يتبعون
00:00:06الطريقة القديمة بدافع العادة والروتين.
00:00:08نشرت جيني وين هذا الأسبوع مقابلة في بودكاست ليني.
00:00:11وهي رئيسة قسم التصميم لـ Claude في شركة Anthropic، وقبل ذلك كانت مديرة التصميم
00:00:16في Figma.
00:00:17تحدثت في الحلقة عن كيف أن عملية التصميم التقليدية قد انتهت، وما الذي حل
00:00:21مكانها فعلياً.
00:00:22لذا سنقوم بتحليل ما الذي تغير، ولماذا، ثم سنستعرض العملية الدقيقة
00:00:26التي حلت محلها.
00:00:27لفهم ما الذي استبدلها، عليك أن تفهم سبب وجودها في المقام الأول.
00:00:31في العملية القديمة، كنت تحدد المتطلبات أولاً، ثم يأخذها المصمم
00:00:35إلى Figma لعمل نموذج أولي (Mock-up) لكيفية ظهور التطبيق.
00:00:38كان ملف Figma هو وثيقة التسليم بين ما يريده الشخص وما يتم بناؤه.
00:00:43ثم يقوم مهندس الواجهات الأمامية بتحويل ذلك الملف إلى كود برمجى.
00:00:46وفي الوقت نفسه، كان مهندس الواجهات الخلفية يبني بالتوازي، لأن مواصفات API كانت محددة
00:00:51مسبقاً، ليتمكن الطرفان من العمل في آن واحد ويرتبط كل شيء في النهاية.
00:00:55تصف جيني هذا بأنها عملية تعامل معها المصممون كطقس مقدس.
00:00:58كان هذا هو المعيار السائد في الصناعة.
00:01:00معظم الناس الذين يشرحون سبب التغيير يغفلون السبب الرئيسي لوجودها أصلاً.
00:01:05سيمون ويليسون، المطور الذي يكتب واحدة من أكثر المدونات التقنية انتشاراً
00:01:09في هذا المجال، كتب عن حديث جيني في برلين في يناير وأضاف الرؤية التي لمح إليها
00:01:14حديثها لكنه لم يقله صراحة.
00:01:16البناء باستخدام الذكاء الاصطناعي يقلل بشكل كبير من تكلفة بناء الشيء الخاطئ.
00:01:19قبل الذكاء الاصطناعي، كان التوجه الخاطئ يعني ضياع أشهر من وقت الهندسة.
00:01:23خطأ صغير في الواجهة الأمامية يعني 10 أضعاف العمل أثناء التنفيذ.
00:01:27لذا كانت الفرق تبرر كل خطوة.
00:01:28الأبحاث، النماذج، رحلات المستخدم، المخططات الهيكلية، ووثيقة المواصفات.
00:01:33كل ذلك كان وقاية ضد بناء الشيء الخاطئ على نطاق واسع.
00:01:36إذاً ما الذي تغير فعلياً في العملية؟
00:01:38تغيرت سرعة الهندسة أولاً.
00:01:40وتغيرت أسرع مما استوعبه معظم الناس.
00:01:42قالت جيني إنه قبل سنوات قليلة، كان 60 إلى 70% من وقتها كمصممة يضيع في النمذجة.
00:01:48الآن أصبح 30 إلى 40%.
00:01:49هي لم تقرر العمل بشكل مختلف.
00:01:51بل بدأ المهندسون من حولها في تشغيل عدة وكلاء ذكاء اصطناعي بالتوازي، وفجأة
00:01:55لم تعد الهندسة هي العقبة.
00:01:58تغيرت الهندسة أولاً واضطر التصميم إلى اتباعها.
00:02:00تغيرت جداول الرؤية الزمنية أيضاً.
00:02:02كان التصميم ينتج رؤى تمتد لعامين إلى 5 أعوام.
00:02:04الآن تتحرك التكنولوجيا بسرعة تجعل نطاق 3 إلى 6 أشهر هو الأكثر واقعية.
00:02:09وليس بالضرورة أن يكون ذلك عرضاً تقديمياً.
00:02:11بل هو نموذج أولي يوجه الناس نحو المسار الصحيح.
00:02:13الشيء نفسه حدث لخطوة الترجمة أو التحويل.
00:02:15عندما يتمكن وكيل ذكاء اصطناعي من أخذ وثيقة متطلبات وبناء واجهة عمل، فلا توجد
00:02:19طبقة ترجمة.
00:02:20الوكيل هو من يكتب الكود.
00:02:22لا يوجد ملف Figma للترجمة لأنه لا يوجد ملف Figma أصلاً.
00:02:25أيضاً إذا كنتم تستمتعون بمحتوانا، فكروا في الضغط على زر الإعجاب لأنه يساعدنا
00:02:29على تقديم المزيد من هذا المحتوى والوصول إلى عدد أكبر من الناس.
00:02:33عندما نعمل مع العملاء، هذا هو التحول الدقيق الذي كان علينا القيام به.
00:02:36تغيرت عملية التصميم، لكن الجزء الذي لم يتغير هو المتطلبات.
00:02:40المتطلبات السيئة تضيع عملية البناء بأكملها.
00:02:42ومعظم الفرق تنتقل مباشرة إلى المواصفات.
00:02:44وهذا ترتيب خاطئ.
00:02:45عندما تبني نموذجاً أولياً، لا تحتاج إلى حزمة تقنية أو مواصفات API.
00:02:48أنت بحاجة لمعرفة ما يكفي لبناء شيء يبدو ويشعرك كأنه منتج حقيقي
00:02:52حتى تتمكن من عرضه على شخص ما والحصول على موافقة أو رفض.
00:02:56لذا قبل أن تلمس النموذج الأولي، ابدأ بـ "الفاعلين" (Actors).
00:02:58الفاعل هو الشخص الذي يتفاعل مع النظام.
00:03:01شخص محدد بهدف محدد.
00:03:03من يستخدمه هو ما يحدد ما يجب القيام به.
00:03:06إذا كان لديك شخص يرسل المحتوى وآخر يوافق عليه، فهما واجهتان
00:03:10مختلفتان مع شاشتين رئيسيتين مختلفتين.
00:03:12ثم انظر إلى أين تنقسم الرؤى.
00:03:13في معظم المنتجات، يصل فاعلان مختلفان إلى نفس الرابط ويريان
00:03:18أشياء مختلفة تماماً.
00:03:19يرى المسؤول (Admin) لوحة إدارة.
00:03:21ويرى المستخدم العادي لوحة التحكم الخاصة به.
00:03:22آخر شيء هو القيود.
00:03:24لا تخبر الوكيل بالأدوات التي يجب استخدامها.
00:03:26أخبره بما لا يمكنه فعله وما لا يمكن أن يتكلفه.
00:03:28هذا سيجعل القرارات التقنية أسهل بكثير لاحقاً.
00:03:32لقد طبقنا كل هذه القواعد المحددة في أمر إنشاء وثيقة المتطلبات (PRD)، والذي
00:03:37يقوم بمقابلتك، حيث يعمل كمحاور للـ PRD، ويسألك وفقاً للقواعد،
00:03:42مجموعة من الأسئلة المختلفة.
00:03:44وفي النهاية، تحصل على ملف PRD بصيغة ماركداون، سيتم استخدامه في
00:03:48المراحل اللاحقة من العملية.
00:03:49ملف الـ PRD هذا هو الأساس الذي يبنى عليه كل شيء آخر.
00:03:52لذا الخطوة التالية هي تحويله إلى هيكل للواجهة الأمامية.
00:03:55لهذا، نستخدم أمر "الطبقة"، الذي يطلب من الوكيل النظر في الـ PRD، والذي
00:04:00ليس PRD كاملاً بكل المتطلبات التقنية، لإنتاج شيئين.
00:04:04يطلب منه إنتاج الصفحات والنوافذ المنبثقة التي سترافق نموذجك الأولي
00:04:08ثم مسارات المستخدم.
00:04:09بالطبع، الصفحات والنوافذ مهمة للهيكل بحيث يتم التخطيط مسبقاً لكل
00:04:14ما يحتاج الوكيل لتنفيذه في الواجهة الأمامية.
00:04:17لقد استمررنا في الحديث عن التخطيط قبل اتخاذ الإجراء ولماذا هو مهم جداً
00:04:21للوكيل ونافذة السياق، لذا لا نحتاج للتعمق في ذلك.
00:04:24ولكن مع مسارات المستخدم، من المهم تحديد أفعال كل فاعل.
00:04:28بما أننا نركز بالفعل على الفاعلين أنفسهم وليس الميزات، فمن المهم
00:04:32أيضاً تحديد مسارات المستخدم ليتمكن الوكيل من تنفيذ حالات التفاعل
00:04:36والتنقل الصحيح لنموذج واجهة المستخدم الكامل.
00:04:40لذا ننتهي بملفين حيث يحتوي ملف architecture.md على الصفحات والنوافذ والمسارات
00:04:45التي ناقشناها.
00:04:46بعد ذلك، طلبنا منه تثبيت تطبيق Next.js لأن هذه هي الحزمة التقنية التي
00:04:50نستخدمها عادة، Next.js مع Supabase.
00:04:53وهذا هو ما توصل إليه بالفعل.
00:04:55بشكل عام، يبدو التصميم رائعاً حقاً، ولكن هناك سبب محدد لذلك.
00:04:58أيضاً، لم نذكر ذلك سابقاً، ولكن البناء كان لمنصة مجتمعية تحتوي على قنوات،
00:05:03ومنتجات، ودورات تدريبية.
00:05:04هناك فاعلان، العضو والمنشئ أيضاً، حيث يمتلك المنشئ
00:05:08كل الوظائف الإدارية مثل إنشاء قناة، أو إضافة منتج
00:05:12أو رفع دورة، بالإضافة إلى الاطلاع على إحصائيات مختلفة.
00:05:15في رأينا، بالنسبة لأول نموذج أولي تم إنشاؤه، يبدو التصميم رائعاً حقاً.
00:05:19لكن تجربة المستخدم (UX) ليست جيدة لأننا عادة لا نريد لوحة تحكم كهذه.
00:05:23وهذا هو صلب الموضوع.
00:05:24هذا النوع من التعديل كان يستغرق أياماً، هنا يستغرق دقائق.
00:05:27لأن الذكاء الاصطناعي يمكنه إجراء هذه التعديلات بسرعة كبيرة جداً.
00:05:30وبما أنه لا توجد واجهة خلفية هنا، فإنه لا يتعامل مع كل تلك الأمور الإضافية،
00:05:34إنه مجرد نموذج أولي للواجهة الأمامية.
00:05:36عادة لا يصمم الذكاء الاصطناعي هذه المواقع والواجهات الجميلة.
00:05:40والسبب في أنها تبدو جيدة هو أننا استخدمنا مهارة الواجهات الأمامية
00:05:44العامة التي قدمتها Anthropic في إحدى مدوناتها.
00:05:46نوصي بشدة باستخدام هذا قبل تنفيذ واجهة المستخدم الخاصة بك.
00:05:50فقط احفظه كأمر أو مهارة حتى يتمكن الوكيل من استخدامه.
00:05:53الآن إذا كنت تعمل مع عميل، كل ما عليك فعله هو إظهار هذا النموذج، وهو
00:05:57يعمل بكامل وظائفه مع بيانات وهمية، لأنه لن يقوم بإنشاء
00:06:01قاعدة بيانات حالياً.
00:06:02يمكنك عرض هذا على عميلك، والحصول على موافقته، وإذا لم يوافق، قم بإجراء التغييرات ثم
00:06:06تابع بقية عملية البناء.
00:06:08قوائم المهام هذه هي أحد الأسباب التي تجعلنا الآن نطلب من هؤلاء الوكلاء إنشاء
00:06:12نماذج أولية تعمل بكامل طاقتها.
00:06:14بسبب قوائم المهام هذه، وبسبب استمرارية المهام ولأن كل شيء
00:06:17منظم.
00:06:18لهذا كان إنشاء ملف architecture.md مهماً جداً لأنه يتيح
00:06:23للوكيل بناء قائمة مهام محسنة تماماً ليتجنب الهلوسة.
00:06:28بعد ذلك ننتقل إلى تنفيذ الواجهة الخلفية.
00:06:30عادة هناك شيئان يمكنك القيام بهما.
00:06:32يمكنك الاحتفاظ بـ Next.js، وإبقاء الواجهة الأمامية منفصلة في Next.js ثم تنفيذ
00:06:36الواجهة الخلفية كخدمة Python منفصلة.
00:06:39لكن ذلك يعتمد على نوع التطبيق الذي تعمل عليه.
00:06:42بالنسبة لمعظم المشاريع التي ستبنونها، سيكون Next.js كافياً.
00:06:46تحتاج تحديداً إلى واجهة خلفية بـ Python عندما تحتاج إلى مكتبات واسعة
00:06:50غير متوفرة في Next.js أو إذا كنت بحاجة لتنسيق مهام خلفية جاد
00:06:55لتحسين موقعك أو وظائفه.
00:06:57في هذه الحالة، قد تحتاج إلى واجهة خلفية منفصلة.
00:06:59وإلا فإن الواجهة الخلفية لـ Next.js هي كل ما ستحتاج إليه تقريباً.
00:07:03قبل أن نلمس الواجهة الخلفية، نحتاج لمعرفة ما تحتاجه الواجهة الأمامية منها فعلياً.
00:07:07لذا جعلنا الوكيل ينظر إلى كود الواجهة الأمامية، والـ PRD وملف المعمارية ويكتب
00:07:11مواصفات API.
00:07:12بعد ذلك، طلبنا منه استخدام المستندات الثلاثة لإنشاء مخطط Supabase الكامل لأننا
00:07:17نستخدم Supabase مع Next.js في الواجهة الأمامية.
00:07:20هو بحاجة أساساً لإنشاء المخططات التي ستضم بيانات التطبيق.
00:07:25عادة إذا سألت وكيلك، سيخبرك بالذهاب والحصول على مفاتيح API
00:07:28من قاعدة البيانات ولصق استعلامات SQL يدوياً لإنشاء الجداول.
00:07:33ولكن بدلاً من ذلك، يجب عليك استخدام بروتوكول MCP الخاص بـ Supabase.
00:07:36حاول دائماً استخدام MCP لأي خدمة تعمل معها لأنها تنجز
00:07:40الكثير من الأمور تلقائياً.
00:07:41على سبيل المثال، لم نضطر حتى للنظر في المشاريع هنا.
00:07:43لقد أنشأ المشروع تلقائياً، وشغل الاستعلامات للمخطط وشغل
00:07:48عمليات النقل (Migrations) تلقائياً.
00:07:49لذا لم نضطر لفعل أي شيء تقريباً.
00:07:51بعد إعداد قاعدة البيانات الخاصة بك، ستقوم بتوصيل الواجهة الأمامية بها.
00:07:55هنا مرة أخرى، هناك تمييز واضح.
00:07:57لست مضطراً لتوصيل الواجهة الخلفية بقاعدة البيانات لأنها مدمجة بالفعل في
00:08:00الواجهة الأمامية.
00:08:01تتحدث الواجهة الأمامية مباشرة مع قاعدة البيانات، مما يجعل التكامل والتعقيد العام
00:08:06أسهل بكثير.
00:08:07نحن في الواقع شركاء مع Warp لهذا الفيديو وقد أطلقوا مؤخراً OZ، وهي
00:08:11منصة تنسيق لوكلاء سحابيين مختلفين.
00:08:14هؤلاء الوكلاء السحابيون مفيدون للمهام التي تريد فقط تفويضها وتعلم أن
00:08:19الوكيل سيكون قادراً على إكمالها بمفرده.
00:08:21حتى الآن، كان الوكيل قد ربط الواجهة الأمامية بقاعدة البيانات وكان التطبيق
00:08:26يعمل بشكل أساسي وفقاً لذلك.
00:08:27ولكن لإضافة أشياء مثل معالجة الدفع، أو إشعارات جديدة، أو تحديد معدل الطلبات، أو التحليلات
00:08:32على الموقع، نحتاج فعلياً إلى طبقة API مخصصة للواجهة الخلفية لنتمكن من دمج كل ذلك.
00:08:37لذلك، أنشأنا بيئة باستخدام OZ وشغلنا وكيلاً سحابياً، وطلبنا منه بناء
00:08:41تلك الطبقة المخصصة للواجهة الخلفية.
00:08:43وبعد حوالي 15 دقيقة، انتهى من المهمة وكان كل شيء جاهزاً.
00:08:47لجعل هذا يعمل فعلياً والبدء في قبول المستخدمين، كل ما تبقى هو
00:08:51مجرد مصادقة Google، وتكامل Stripe، وبعض التفاصيل الصغيرة التي احتجنا لإصلاحها.
00:08:56الآن رأيتم العملية الكاملة وكانت الأوامر موجودة هناك على الشاشة.
00:09:00ولكن إذا كنت تريد كل هذه الأوامر كسير عمل خطوة بخطوة يمكنك اتباعه
00:09:04لمشاريعك الخاصة، فنحن نضعها في AI Labs Pro.
00:09:06لمن لا يعرف، هو مجتمعنا حيث تحصل على قوالب جاهزة للاستخدام يمكنك
00:09:10دمجها مباشرة في مشاريعك لهذا الفيديو وجميع الفيديوهات السابقة.
00:09:14إذا وجدت قيمة فيما نقدمه وتريد دعم القناة، فهذه هي أفضل وسيلة
00:09:18للقيام بذلك.
00:09:19الرابط موجود في الوصف.
00:09:20هذا يوصلنا إلى نهاية هذا الفيديو.
00:09:22إذا كنت ترغب في دعم القناة ومساعدتنا في الاستمرار في صنع فيديوهات كهذه، يمكنك
00:09:26القيام بذلك باستخدام زر "شكراً" (Super Thanks) أدناه.
00:09:28كما هو الحال دائماً، شكراً للمشاهدة وأراكم في الفيديو القادم.