00:00:00أهلاً بكم في فيديو أساسيات الـ Vibe Coding. إذا كنت شخصاً لا يتقن البرمجة ولكنك لا تزال ترغب في
00:00:04تحويل فكرتك إلى واقع، سواء كانت موقعاً شخصياً، أو مشروعاً جانبياً، أو شيئاً لطالما
00:00:10أردت بناءه، فهذا الفيديو لك. في نهايته، ستتمكن من بناء منصة حقيقية تعمل
00:00:15دون كتابة سطر برمج واحد. وحتى إن كنت مطوراً، فسيفيدك هذا الفيديو أيضاً
00:00:21لأنك أحياناً قد ترغب في إنجاز شيء ما بسرعة دون تعقيد هندسي زائد. لذا في هذا
00:00:26الفيديو، سأشرح لك عملية الـ Vibe Coding كاملة، وأفضل الممارسات في كل خطوة،
00:00:32وسنبني مشروعاً حقيقياً معاً. لبناء تطبيقنا، سنستخدم أداة Abacus AI
00:00:37Deep Agent. إنها منصتي المفضلة لأي مهمة متعلقة بالذكاء الاصطناعي لأنه باشتراك واحد فقط،
00:00:43يمكنك بناء تطبيقات، ومواقع، وعروض تقديمية، وأي شيء تقريباً. أنا أستخدمها غالباً في
00:00:50الـ Vibe Coding لأنني لاحظت أنها تنتج أخطاءً أقل وسعرها مناسب جداً مقارنة بالأدوات الأخرى
00:00:54التي جربتها. لقد وضعت الرابط في الوصف، لذا احرصوا على تفقدها.
00:00:59هناك خمس خطوات للقيام بالـ Vibe Coding لتطبيق ما بشكل صحيح. معظم الناس يعرفون هذه الخطوات،
00:01:05لكن المشكلة هي أنهم لا يعرفون أفضل الممارسات داخل كل خطوة، ولهذا السبب
00:01:09يحصلون على نتائج ضعيفة وغير متسقة من الذكاء الاصطناعي. فلنصلح ذلك. الخطوة الأولى هي
00:01:14مرحلة تكوين الفكرة. هنا تقرر ما تريد بناءه. يمكن أن يكون موقعك الشخصي أو
00:01:19أي شيء آخر. إذا لم تكن لديك فكرة بعد، يمكنك استخدام الذكاء الاصطناعي للحصول على اقتراحات. الأداة
00:01:25التي أستخدمها هي Abacus Chat LLM، وهي تعمل بشكل رائع لهذا الغرض. فهي تختار تلقائياً أفضل
00:01:31نموذج ذكاء اصطناعي بناءً على المهمة، لكي تحصل على نتائج أفضل دون الحاجة للتفكير في أي
00:01:36نموذج تستخدمه. بمجرد أن تتوفر لديك الفكرة، الشيء التالي الذي يجب عليك فعله هو تدوينها. فقط افتح
00:01:42مستندات جوجل أو وورد واشرح فكرتك بلغة بسيطة. ما تنشئه هنا يسمى
00:01:47وثيقة متطلبات المنتج (PRD). لا تدع الاسم يخيفك. بالنسبة للـ Vibe coding، فإن الـ PRD هي مجرد وثيقة
00:01:53من صفحة أو صفحتين تشرح ما تريد بناءه. ستصبح هذه الوثيقة لاحقاً هي “البرومبت” أو الأمر البرمجي الأولي.
00:01:59أنا أستخدم نموذج PRD بسيطاً من هذا المقال. شكراً للكاتب، ويمكنكم أيضاً الاطلاع على
00:02:05المقال إذا أردتم معرفة المزيد. وإذا كنتم تريدون نموذجاً جاهزاً للتعبئة،
00:02:09فرابط التحميل موجود في الوصف. دعونا نمر سريعاً على الأقسام. في جزء الوصف المكون من
00:02:14جملة واحدة، صف تطبيقك في جملة واحدة فقط. نحن نبني موقعاً لتقسيم النفقات
00:02:20في هذا الفيديو. يمكن أن يكون وصفنا كالتالي. القسم التالي مخصص لـ
00:02:25وصف من هو الجمهور المستهدف لهذا المنتج وما هي المشكلة التي يحلها. بعد ذلك، ستدرج بعض
00:02:31الميزات الرئيسية لتطبيقك. لا داعي لأن تكون تقنياً، فقط اكتب ما تريده بلغة
00:02:36بسيطة، واذكر الميزات الرئيسية فقط. القسم التالي مخصص لذكر ما يجب “عدم” بنائه،
00:02:41حتى لا يخرج مشروعك عن نطاقه المحدد. وإذا لم تكن متأكداً، يمكنك تخطي هذا حالياً.
00:02:47التالي هو قسم “رحلة المستخدم”، والذي يشرح المسار الرئيسي للتطبيق. وهذا أيضاً
00:02:52اختياري. والأخير هو قسم معايير النجاح. هنا تذكر فقط معايير النجاح
00:02:58لميزاتك. وهذا اختياري أيضاً. وهذا كل شيء. إذا شعرت أن الأمر معقد،
00:03:03هناك اختصار يمكنك استخدامه وهو ملء الوصف المكون من جملة واحدة فقط،
00:03:07ثم الصق النموذج في ChatLLM، واطلب منه إكمال الـ PRD نيابة عنك. بمجرد الانتهاء من ذلك،
00:03:13ستكون جاهزاً للخطوة الثانية. في هذه المرحلة، ستختار منصة Vibe coding وتلصق الـ PRD الخاص بك
00:03:19كأمر أولي. لذا من المهم جداً اختيار منصة برمجية جيدة لأنه ببساطة،
00:03:25إذا كنت تريد نتائج رائعة، ستحتاج لاستخدام منصة رائعة. سأستخدم Abacus AI
00:03:30Deep Agent. كل ما عليك فعله هو نسخ الـ PRD الخاص بك ولصقه في مربع الأوامر. إذا كنت تريد تطبيقك
00:03:36بتصميم معين، يمكنك رفع ملف التصميم واطلب منه استخدامه كمرجع. لكن تذكر
00:03:41أنك لا تستطيع رفع ملف Figma مباشرة. الطريقة الأخرى هي أن تصف تصميمك
00:03:47بلغة بسيطة. الآن اضغط إرسال وانتظر. بعد إرسال الطلب، قد يطرح العميل الآلي بعض الأسئلة
00:03:53للمتابعة. وهي غالباً غير تقنية، لذا فقط اكتب تفضيلاتك. في حال لم تفهم
00:03:59شيئاً ما، يمكنك ببساطة أن تطلب من الذكاء الاصطناعي توضيح ما يقصده. بعد إرسال تفضيلاتك، سيبدأ
00:04:05العميل الآلي في برمجة تطبيقك. هذا هو جزئي المفضل لأنني أستطيع فقط تصفح
00:04:10بعض الفيديوهات القصيرة بينما أشاهده وهو ينشئ الكود لي. بعد لحظات قليلة. حسناً، أظن أن تطبيقنا
00:04:17أصبح جاهزاً. الآن نحن مستعدون للخطوة التالية. هذه المرحلة تدور حول اختبار التطبيق، وإصلاح الأخطاء،
00:04:23وتحسين التصميم، أو إضافة ميزات. وهذا هو المكان الذي يخطئ فيه معظم الناس. قبل الحديث عن
00:04:28ذلك، دعونا نلقي نظرة سريعة على منصتنا. تطبيقنا يعمل بشكل جيد. الآن دعونا نتحدث عن
00:04:58ما لا يجب فعله في مرحلة الاختبار والتحسين هذه. أحد الأخطاء الكبيرة التي يرتكبها معظم الناس هو أنهم
00:05:04يدرجون كل ما يحتاج إلى إصلاح ويضعونه في أمر واحد ضخم. الذكاء الاصطناعي لا يعمل بشكل جيد
00:05:09بهذه الطريقة. أفضل ممارسة هي إصلاح شيء واحد في كل مرة وأن تكون محدداً جداً في أمرك.
00:05:15لنفترض أن هناك زراً لا يعمل. لا تكتب أوامر بهذا الشكل. بدلاً من ذلك، يمكنك استخدام هذا
00:05:20النموذج لإصلاح مشكلاتك. بعد ذلك، دعونا نرى عملية إضافة ميزة إضافية.
00:05:25لقد وصفت الميزات بالفعل في الـ PRD الخاص بك. أعد استخدام نفس التنسيق. على سبيل المثال، في موقعنا،
00:05:32دعونا نضيف خاصية تقسيم النفقات بشكل غير متساوٍ. حالياً، عندما ننشئ نفقة، يتم توزيع التكلفة
00:05:38بالتساوي. ولكن مع التوزيع غير المتساوي، يمكنني التحكم في التكلفة لكل شخص. لذا وفقاً لنموذجنا،
00:05:44لقد أنشأت وصفاً لميزتنا الجديدة. الآن لنعد إلى العميل الآلي ونلصقه. ولكن
00:05:50قبل ذلك، تأكد من إضافة هذا السطر، ثم يمكنك لصق وصفك. الآن اضغط إرسال
00:05:56ولننتظر. ميزتنا الجديدة جاهزة. الآن دعونا نختبرها. وكل شيء يبدو جيداً. هذا كل ما في
00:06:17هذه الخطوة. أضف ميزة واحدة، اختبرها، ثم كرر العملية. لا تزال هناك بعض الأشياء التي أريد إضافتها
00:06:23قبل الانتقال إلى الخطوة التالية. أولاً، لا تتردد في التراجع عن التغييرات القديمة. التراجع
00:06:29عن التغييرات القديمة يعني العودة إلى نسخة أقدم من الكود الخاص بك. قد تكون هناك حالات
00:06:33تؤدي فيها إضافة ميزة جديدة أو إصلاح خطأ ما إلى عواقب أخرى. في هذه الحالة، فقط أرسل أمراً
00:06:39للذكاء الاصطناعي موضحاً أن التغييرات الجديدة تسببت في تعطل الكود واطلب منه الإصلاح. سيعمل هذا
00:06:44في معظم الأوقات. ولكن في حال لم ينجح الأمر، فمن الأفضل التراجع إلى النسخة الأقدم. الشيء التالي
00:06:49الذي أريد إضافته هو: لا تتردد في إجراء تغييرات إضافية على نماذج الأوامر التي قدمتها.
00:06:54وهذا يوصلنا إلى الخطوة التالية: التحقق النهائي. بعد إضافة جميع الميزات،
00:06:59ستحتاج إلى إجراء اختبار نهائي لتطبيقك. ليس بالأمر المعقد. فقط تصفح
00:07:04منصتك واختبر كل ميزة. تأكد من أن كل نتيجة صحيحة وأن كل سلوك
00:07:09يسير كما هو متوقع. إذا رأيت أي مشاكل، فارجع إلى مرحلة الاختبار والتحسين مرة أخرى. وهذا
00:07:14كل ما في الأمر تقريباً، يتعلق الأمر بالتأكد من أن كل شيء يعمل قبل إطلاق الموقع.
00:07:20الخطوة الأخيرة هي النشر. مع Abacus AI Deep Agent، النشر يتطلب بضع نقرات فقط. لنشر تطبيقك،
00:07:27ابحث عن زر النشر (Deploy) في الأعلى. انقر فوقه وسترى ثلاثة خيارات: استخدام نطاق
00:07:33Abacus AI، أو نطاق مخصص، أو نطاق فرعي مخصص. اختيار نطاق Abacus يعني أن رابط
00:07:40موقعك المنشور سيتبع هذا النمط. إذا اخترت نطاقاً مخصصاً، فستحتاج لشراء نطاق وربطه
00:07:45بـ Abacus عبر إعدادات DNS. النطاق الفرعي أبسط؛ إذا كنت تملك نطاقاً، يمكنك استخدام
00:07:51شيء كهذا كنطاق فرعي دون شراء أي شيء جديد. في الوقت الحالي، دعونا نستخدم نطاق
00:07:57Abacus فقط. الآن اختر الاسم الذي تفضله وسيكون هذا هو رابط موقعك الإلكتروني بعد النشر.
00:08:03ومبارك لك! تطبيقك الأول بتقنية الـ Vibe Coding أصبح متاحاً الآن. يمكنك مشاركة هذا الرابط مع الآخرين
00:08:09حتى يتمكنوا أيضاً من البدء في استخدام تطبيقك. قبل أن تذهب وتبدأ في إنشاء تطبيقك الخاص، هناك
00:08:14شيء أخير أريد إضافته. تطبيقات الـ Vibe Coding البحتة ليست مثالية للمنتجات التجارية الضخمة.
00:08:20هي الأفضل للمشاريع الشخصية، والأدوات الصغيرة، والنماذج الأولية، وعدد محدود من المستخدمين. ذلك لأنه
00:08:26قد تكون هناك مشكلات أمنية، ومشكلات في الأداء، وأيضاً محدودية في التوسع. إذا كنت تخطط للتوسع بشكل كبير،
00:08:32ستحتاج في النهاية إلى مطورين. وهذا كل شيء. الخطوات الخمس للـ Vibe Coding مع أفضل الممارسات
00:08:38التي تنجح بالفعل. احرصوا على تجربة Abacus AI Deep Agent، الرابط موجود في الوصف.
00:08:44إذا كان هذا الفيديو مفيداً لكم، فاحرصوا على الإعجاب به، ومشاركته، والاشتراك في القناة، وكتابة آرائكم
00:08:49في التعليقات. وأراكم في الفيديو القادم!