هذا المقال هو الجزء الأول من سلسلة Vibe Coding من الصفر في Qafza Library، واللي رح نتعرّف فيها على الفكرة، نستكشف أدواتها، ونفهم كيف نستخدمها لبناء مواقع وتطبيقات بمساعدة الذكاء الاصطناعي.
إذا عندك فكرة موقع أو تطبيق، لكن ما بتعرف كيف تبدأ بتنفيذها، ممكن تكون سمعت عن Vibe Coding: توصف فكرتك للذكاء الاصطناعي، وهو يساعدك في كتابة الكود، وبعدها بتجرّب النتيجة وبتطلب تعديلات.
بس شو يعني هذا فعليًا؟ وهل لازم تكون مبرمج؟ وشو الفرق بين صفحة شكلها جميل وتطبيق جاهز للاستخدام؟ في هذا الجزء بنوضح الفكرة، وبنشاركك مصادر تساعدك تبدأ تتعلّم.
أولًا: ما هو Vibe Coding؟
Vibe Coding هو أسلوب لبناء البرامج من خلال وصف المطلوب للذكاء الاصطناعي بلغة طبيعية، ثم تجربة ما ينتجه وتوجيهه بالتعديلات.
بدل ما تبدأ بكتابة كل سطر كود بنفسك، ممكن تطلب:
«بدي موقع شخصي أعرض فيه نبذة عني، مهاراتي، وثلاثة مشاريع، مع زر للتواصل معي.»
الأداة بتولّد الكود بناءً على وصفك. بعدها بتشوف النتيجة، وبتطلب تغييرات مثل ترتيب الأقسام أو تعديل طريقة عرض المشاريع.
المصطلح يُستخدم بمعانٍ متفاوتة. بمعناه الأضيق، يشير إلى الاعتماد على النتائج الظاهرة بدون متابعة تفاصيل الكود. أما استخدام AI مع قراءة الكود ومراجعته، فهو أقرب إلى التطوير بمساعدة الذكاء الاصطناعي. لذلك، استخدام أداة AI للبرمجة لا يعني تلقائيًا أنك تعمل بأسلوب Vibe Coding.
ثانيًا: كيف تتحول الفكرة إلى موقع أو تطبيق؟
لفهم طريقة العمل، تخيّل أنك تريد صفحة تعرض خدمات مصوّر.
تبدأ بتوضيح المطلوب: لمن الصفحة؟ وما المعلومات التي يحتاج الزائر يشوفها؟ ثم تطلب أقسامًا محددة، مثل معرض الصور، الخدمات، ووسيلة التواصل.
بعد ظهور النسخة الأولى، يصير دورك تجربة النتيجة وإعطاء ملاحظات واضحة:
هل الصور ظاهرة بشكل مناسب على الموبايل؟
هل الزائر بيعرف كيف يتواصل؟
هل الأزرار بتنفّذ المطلوب؟
هل النصوص تعبّر عن الخدمة فعلًا؟
مثلًا، بدل طلب «حسّن الصفحة»، ممكن تقول:
«على شاشة الموبايل، الصور صغيرة والنص مزدحم. اعرض صورة واحدة بكل صف، وزِد المسافة بين الأقسام.»
البناء هون عملية متكررة: توضح المطلوب، تشوف النتيجة، وتراجعها. أول نسخة هي نقطة بداية تحتاج تحسينًا واختبارًا.
ثالثًا: شو ممكن تبني باستخدام Vibe Coding؟
بحسب الأداة ونطاق المشروع، ممكن تبني مواقع وتطبيقات مثل:
موقع تعريفي: يعرض مشروعك وخدماتك وطرق التواصل.
Portfolio: يجمع أعمالك ومهاراتك بمكان واحد.
صفحة هبوط: تشرح خدمة أو فعالية وتوجّه الزائر لخطوة واضحة.
Dashboard: تعرض بيانات ومؤشرات بطريقة مرئية.
نموذج أولي لتطبيق: يساعدك تشرح فكرتك وتجربها قبل التوسع.
منصات مثل Lovable وv0 تدعم أمثلة من هذه الاستخدامات، وقد تتضمن المشاريع قواعد بيانات ووظائف خلفية أيضًا. لكن مستوى التعقيد يختلف من مشروع لآخر.
مثلًا، صفحة تعرض خدماتك أبسط من نظام حجوزات يتأكد من المواعيد المتاحة ويحفظ بيانات العملاء. تشابه شكل الصفحات لا يعني تشابه العمل المطلوب خلفها.
رابعًا: هل لازم تكون مبرمج؟
ممكن تبدأ بتجربة بسيطة بدون خبرة برمجية، لكن المعرفة التقنية بتساعدك تفهم النتيجة وتتحكم فيها.
أدوات مثل Replit Agent تتيح وصف الفكرة باللغة الطبيعية، وتساعد في إعداد المشروع وكتابة الكود وتعديله.
كمبتدئ، ركّز على فهم ثلاثة أمور:
واجهة المستخدم: الجزء اللي الشخص بيشوفه وبيتفاعل معه.
منطق التطبيق: ما يحدث عند الضغط على زر أو إرسال طلب.
البيانات: أين تُحفظ المعلومات وكيف يتم استرجاعها.
مثلًا، ظهور رسالة «تم إرسال طلبك» لا يثبت وحده أن الطلب وصل أو انحفظ. لازم تتحقق من النتيجة الفعلية.
ومع توسع المشروع، بتصير قراءة الكود وفهم الأخطاء ومراجعة التغييرات مهارات أكثر أهمية. ممكن تتعلّمها تدريجيًا، أو تستعين بمطوّر لما تحتاج.
خامسًا: ما أبرز أدوات Vibe Coding؟
هاي أمثلة على أدوات بتساعدك تبني باستخدام AI. التعريفات التالية نقطة بداية لفهم طريقة كل أداة، وليست ترتيبًا من الأفضل إلى الأسوأ.
Lovable
منصة لبناء تطبيقات ويب من خلال وصف المطلوب بالمحادثة. تدعم العمل على الواجهة ووظائف التطبيق والبيانات، مع كود قابل للتعديل.
ممكن تستكشفها إذا بدك تتعرّف على تجربة تحويل وصف مشروع إلى تطبيق ويب، ثم تحسينه بالتدريج.
Bolt
أداة لبناء مواقع وتطبيقات ويب تعتمد على تقنيات JavaScript. بتبدأ بطلب نصّي، وبتتابع تطوير المشروع من خلال التعديلات.
دليل البداية فيها يوضح رحلة بناء مشروع، ومعاينته، وتعديل النتيجة.
Replit Agent
مساعد داخل منصة Replit يقدر يجهّز مشروعًا، يكتب الكود، ويساعد في اختبار الأخطاء وإصلاحها.
بيعطيك طريقة لمتابعة الفكرة من الوصف الأول إلى مشروع تقدر تعاينه وتطوّره داخل بيئة واحدة.
v0
أداة من Vercel لبناء واجهات وتطبيقات ويب انطلاقًا من وصف أو مرجع بصري. تدعم أيضًا ربط وظائف خلفية وبيانات، وليس تصميم الواجهة فقط.
من أمثلتها صفحات الهبوط، لوحات التحكم، وتطبيقات الويب.
Cursor
أداة للعمل على المشاريع البرمجية بمساعدة AI، تشمل فهم ملفات المشروع، بناء ميزات، تعديل الكود، ومراجعة التغييرات.
إذا عندك أساس برمجي وبدك تتعامل مع ملفات المشروع وتفاصيله، ممكن تستكشف هذا النوع من الأدوات.
اقتراحنا للمبتدئ: اختَر أداة واحدة في البداية، وتعرّف على طريقة استخدامها من مصدرها الرسمي قبل التنقل بين الأدوات.
سادسًا: شو لازم تعرف قبل ما تعتمد على النتيجة؟
الوصول إلى نسخة بتشتغل خطوة مهمة، لكن جاهزية المشروع للاستخدام تحتاج مراجعة واختبارًا. الكود الناتج عن AI قد يحتوي على أخطاء، ويحتاج نفس الاهتمام بالجودة والأمان والصيانة مثل غيره.
اختبر الوظائف، مش الشكل فقط
إذا عندك نموذج تواصل، جرّب إرساله وتأكد وين وصلت الرسالة. وإذا في عملية حسابية، افحصها بأرقام تعرف نتيجتها مسبقًا.
ابدأ بنطاق صغير
لأول تجربة، ممكن تختار صفحة تعريف أو Portfolio. هيك بتقدر تفهم التعديلات وتأثيرها قبل إضافة وظائف أكثر تعقيدًا.
اطلب تغييرات محددة
بدل «خليه احترافي»، وضّح المطلوب: ترتيب الأقسام، حجم النص، سلوك الزر، أو طريقة عرض الصفحة على الموبايل.
احتفظ بنسخة تقدر ترجع إلها
قبل تعديل كبير، استخدم وسيلة حفظ الإصدارات المتاحة في أداتك. هذا بيساعدك تقارن التغييرات وترجع لنسخة سابقة عند الحاجة.
انتبه للبيانات والصلاحيات
إذا المشروع يتعامل مع حسابات مستخدمين أو معلومات شخصية، لازم تتأكد مين يقدر يشوف البيانات ويعدّلها. وجود شاشة تسجيل دخول وحدها لا يكفي للتحقق من ذلك.
سابعًا: مصادر تساعدك تبدأ تعلّم Vibe Coding
مش لازم تفتح كل المصادر مرة واحدة. ابدأ بالمصدر المرتبط بالأداة اللي حاب تستكشفها.
1. دليل البداية في Lovable
يساعدك تتعرّف على بداية المشروع وطريقة بناء أول تطبيق. مناسب إذا بتفضّل شرحًا مكتوبًا ترجع له أثناء التعلّم.
2. فيديوهات ودورات Lovable
شاهد مصادر التعلّم المرئية الرسمية
نقطة بداية إذا بتحب تشوف طريقة العمل على الشاشة، مع روابط للفيديوهات والدورات التي تجمعها المنصة.
3. دليل البداية في Bolt
يشرح بناء مشروع وتعديله ومعاينته، ويتضمن شرحًا مرئيًا. مناسب لفهم كيف ينتقل الطلب النصّي إلى نتيجة تقدر تجربها.
4. دليل Replit Agent
تعرّف على استخدام Replit Agent
يوضح وصف الفكرة، تخطيط المشروع، ومتابعة التعديلات. مناسب إذا بدك تفهم دور المساعد خلال مراحل البناء.
5. أفضل ممارسات العمل مع وكلاء البرمجة
مصدر للتعمّق بعد فهم الأساسيات، خصوصًا إذا عندك معرفة بالكود. يناقش التخطيط، توفير السياق، ومراجعة العمل الناتج عن AI.
المصادر المذكورة باللغة الإنجليزية؛ اختر منها ما يناسب مستواك وطريقة تعلّمك.
أسئلة شائعة عن Vibe Coding
هل Vibe Coding لغة برمجة؟
لا، هو أسلوب للتعامل مع أدوات تولّد الكود. المشروع الناتج يظل مبنيًا بلغات وتقنيات برمجية، حتى لو ما كتبت الكود بنفسك.
هل يختلف عن No-Code؟
أدوات No-Code تعتمد عادةً على واجهات مرئية ومكوّنات جاهزة. في Vibe Coding، تعتمد على وصف المطلوب للذكاء الاصطناعي لتوليد الكود وتعديله. وقد تجمع بعض المنصات بين الطريقتين.
هل ممكن أستخدمه إذا بعرف أبرمج؟
نعم. المعرفة البرمجية بتساعدك تراجع الكود وتفهم القرارات وتصلح المشاكل. وإذا كنت تراجع التفاصيل وتتحكم بالتنفيذ، فأنت تستخدم AI ضمن عملية تطوير واعية.
من أين تبدأ الآن؟
اختَر فكرة صغيرة تعرف شو المطلوب منها، مثل صفحة تعرض أعمالك أو تعرّف بخدمة بتقدمها. بعدها اقرأ دليل البداية لأداة واحدة، وركّز على فهم كيف توصف المطلوب وكيف تتحقق من النتيجة.
نصيحة من Qafza Library: لا تقيس تعلّمك بعدد الصفحات اللي ولّدتها. اسأل نفسك: هل بتعرف شو بتعمل الصفحة؟ وهل جرّبت وظائفها؟ وهل بتقدر تشرح التعديل اللي تحتاجه؟
في الأجزاء القادمة من سلسلة Vibe Coding من الصفر، رح نتعمّق في اختيار الأدوات، كتابة طلبات أوضح، ومراجعة المشاريع وتحسينها.