vibe coding للمبتدئين: كيف تبدأ خطوة بخطوة

vibe coding للمبتدئين يتلخص في خمس خطوات: اختر أداة تشغّل التطبيق عنك، وصف تطبيقًا صغيرًا واحدًا بكلمات عادية، جرّبه كما يفعل المستخدم، واطلب إصلاحًا واحدًا في كل مرة، وانشر حين يعمل. لا تحتاج إلى معرفة البرمجة. يمر هذا الشرح بكل خطوة عبر مشروع أول حقيقي، والطلبات التي تكتبها بالضبط، والأخطاء التي يقع فيها كل مبتدئ تقريبًا في أسبوعه الأول.

إذا أردت الخلفية أولًا، من أين جاء المصطلح ولماذا يتجادل الناس حوله، فاقرأ ما هو vibe coding. هذه الصفحة هي الجانب العملي.

ما تحتاجه قبل أن تبدأ

أقل مما تظن:

• متصفح وحساب في أداة vibe coding. على المبتدئين اختيار منشئ تطبيقات بالذكاء الاصطناعي، يكتب الكود ويشغّله ويستضيفه، لا مساعد برمجة يتوقع منك إدارة الملفات والخوادم بنفسك.
• فكرة صغيرة واحدة. ليست شركتك الناشئة. أداة لشخص واحد (أنت) بشاشة أو شاشتين.
• ساعة أو ساعتان دون مقاطعة. تعلّمك الجلسة الأولى الإيقاع.

هذا كل شيء. لا تثبيتات ولا دورة برمجة ولا طرفية.

أي أداة تختار كمبتدئ

الأداة أقل أهمية من العادات، لكن عليها أن تفعل ثلاثة أشياء: تعرض معاينة حية أثناء البناء، وتتيح لك التراجع عن تغيير سيئ، وتنشر على رابط تستطيع مشاركته. تغطي مقارنتنا لـأفضل أدوات vibe coding الخيارات الرئيسية بصدق. وMythex إحداها: تصف التطبيق في المحادثة فتبني تطبيقًا متكاملًا حقيقيًا مع معاينة حية، وتضيف قاعدة بيانات حين يحتاج التطبيق إلى التذكّر، وتنشر بنقرة واحدة. الخطة المجانية لا تحتاج بطاقة.

الخطوة 1: اختر مشروعًا أول تستطيع إنهاءه

يفشل المبتدئون عادةً لأنهم يصوّبون عاليًا. المشروع الأول الجيد:

• مفيد لك شخصيًا، فتختبره جيدًا.
• يتسع في شاشة أو شاشتين.
• يخزّن كمية صغيرة من بياناتك أنت.
• لا مدفوعات فيه ولا فرق ولا بيانات شخصية حساسة.

مشاريع أولى جيدة:

سنستخدم قائمة القراءة في بقية هذا الشرح.

الخطوة 2: اكتب أول طلب

رسالتك الأولى ترسم شكل كل ما بعدها. قل لمن هو التطبيق وماذا يفعل وكيف يبدو. اجعلها فقرة قصيرة.

طلب أول ضعيف:

اصنع لي تطبيق كتب.

طلب أول جيد:

ابنِ لي تطبيق قائمة قراءة. أستطيع إضافة كتاب بالعنوان والمؤلف والحالة (أريد قراءته، أقرأه الآن، أنهيته). اعرض الكتب كبطاقات مجمّعة حسب الحالة، الأحدث أولًا. أستطيع تغيير حالة الكتاب أو حذفه. اجعله نظيفًا وبسيطًا: خلفية بيضاء ولون مميز واحد، ويعمل على هاتفي. احفظ الكتب لتبقى موجودة بعد التحديث.

لاحظ ما يفعله الثاني. يسرد الحقول والإجراءات والتخطيط وقاعدة واحدة ينساها المبتدئون دائمًا: احفظ البيانات لتنجو من التحديث. بدون هذا السطر تبني أدوات كثيرة صفحة تبدو مكتملة لكنها تنسى كل شيء حين تعيد التحميل.

لمزيد من نقاط الانطلاق، راجع ورقة طلبات vibe coding.

اطلب خطة حين لا تكون متأكدًا

إذا لم تعرف كيف تصف شيئًا، اطلب من الذكاء الاصطناعي أن يخطط قبل أن يبني:

قبل أن تبني أي شيء، أخبرني بكلمات بسيطة بالشاشات التي ستصنعها والبيانات التي ستخزّنها وأي شيء تحتاج أن أقرره.

في Mythex هذا هو دور وضع Plan: يعرض الوكيل الأسلوب وتوافق عليه قبل أن يتغير أي ملف.

الخطوة 3: اختبره كمستخدم، لا كمن بناه

حين تظهر المعاينة لا تكتفِ بالإعجاب. استخدمها:

1. أضف ثلاثة كتب، منها كتاب بعنوان طويل جدًا.
2. غيّر حالة. هل تنتقل البطاقة إلى المجموعة الصحيحة؟
3. حدّث الصفحة. هل الكتب ما زالت موجودة؟
4. حاول إضافة كتاب بعنوان فارغ. ماذا يحدث؟
5. افتح المعاينة على هاتفك، أو ضيّق نافذة المتصفح.

دوّن ما هو خطأ بكلمات بسيطة. "العنوان الطويل يكسر تخطيط البطاقة" تقرير خلل ممتاز. أما "إنه معطل" فلا.

الخطوة 4: أصلح شيئًا واحدًا في كل رسالة

هذه هي العادة التي تفرّق بين من ينهون ومن يستسلمون. أرسل تغييرًا واحدًا، تحقق منه، ثم أرسل التالي.

العنوان الطويل "The Hitchhiker's Guide to the Galaxy: The Complete Trilogy" يفيض عن البطاقة. اجعل العناوين الطويلة تلتف على سطرين واقطع الباقي بـ "…".

ثم:

إذا أرسلت النموذج بعنوان فارغ لا يحدث شيء ولا تظهر رسالة. أظهر "أضف عنوانًا" تحت الحقل ولا تحفظ الكتاب.

لماذا واحدًا في كل مرة؟ حين تطلب خمسة تغييرات في رسالة واحدة قد ينفذ الذكاء الاصطناعي أربعة جيدًا ويكسر شيئًا آخر بصمت، ولن تعرف أي تغيير تسبب في ذلك. والخطوات الصغيرة تجعل التراجع مفيدًا: إذا ساء تغيير ما، ارجع إلى النسخة التي قبله وجرّب طلبًا أوضح.

حين ينكسر شيء

سينكسر. كل منشئ يواجه أخطاء. انسخ نص الخطأ بالضبط، أو صف ما نقرته وما رأيته بدقة، والصقه:

عندما أنقر على حذف في بطاقة أرى "حدث خطأ" ويبقى الكتاب. اعرف السبب وأصلحه. أخبرني ما كان السبب.

طلب السبب مهم. فهو يعلّمك كيف تعمل التطبيقات، ويمنع الذكاء الاصطناعي من التخمين. ويتعمق دليلنا كيف تصحح أخطاء تطبيق بُني بالذكاء الاصطناعي أكثر.

الخطوة 5: اجعله لك

حين يعمل، حسّنه بالخطوات الصغيرة نفسها:

• "أضف تقييمًا من 1 إلى 5 نجوم يظهر على الكتب المنتهية."
• "أضف مربع بحث فوق البطاقات يصفّي حسب العنوان أو المؤلف."
• "استخدم خلفية بيضاء دافئة ولونًا مميزًا أخضر داكنًا."
• "أضف عدّادًا في الأعلى: الكتب التي أنهيتها هذه السنة."

كل واحد منها تغيير واحد قابل للاختبار.

الخطوة 6: انشره وشاركه

حين يفعل ما تحتاجه، انشره. في Mythex هذا نقرة واحدة، وتحصل على رابط عام تفتحه على أي جهاز أو ترسله لصديق. وإن أردت لاحقًا نطاقك الخاص فهذه ميزة Pro، ويشرحها دليلنا ربط نطاق مخصص.

قبل أن تشارك أي شيء يتجاوز بضعة أصدقاء، اقرأ هل vibe coding آمن؟. بالنسبة لقائمة قراءة شخصية الخطر منخفض. أما التطبيق الذي يسجّل فيه غرباء ويخزّنون بيانات فهناك فحوص يلزمك إجراؤها أولًا.

أخطاء المبتدئين التي يجب تجنبها

• طلب كل شيء دفعة واحدة. "ابنِ لي Goodreads" ينتج شيئًا يبدو مبهرًا ويعمل بشكل سيئ. ابدأ بأصغر نسخة مفيدة.
• عدم اختبار التحديث. البيانات التي تختفي عند إعادة التحميل هي أكثر مفاجآت المبتدئين شيوعًا.
• إعادة كتابة طلبك من الصفر كل مرة. قل ما الذي يتغير وما الذي يبقى: "أبقِ التخطيط، وغيّر الألوان فقط."
• تصديق "تم الإصلاح". سيقول الذكاء الاصطناعي كثيرًا إن الخلل أُصلح. تحقق بنفسك في كل مرة.
• لصق كلمات المرور أو مفاتيح API في المحادثة. إذا احتاج تطبيقك مفتاحًا لخدمة خارجية فضعه في إعدادات الأسرار بالأداة، لا في رسالة ولا في الكود. راجع كيف تحمي مفاتيح API.
• الاستسلام بعد أول خطأ. الأخطاء طبيعية. الصقها واطلب السبب.

ما تتعلمه أثناء العمل

لا تحتاج إلى دورة، لكن بضع أفكار ستجعل كل طلب أدق. اطلب من الذكاء الاصطناعي أن يشرحها في سياق تطبيقك أنت:

• الواجهة الأمامية والخلفية: ما يعمل في متصفح الزائر مقابل ما يعمل على الخادم. (الواجهة الأمامية مقابل الخلفية)
• قاعدة البيانات: أين يحتفظ تطبيقك ببياناته. (ما هي قاعدة البيانات؟)
• المصادقة: كيف يعرف التطبيق من هو الشخص.
• الأسرار: مفاتيح خاصة يستخدمها التطبيق ولا يجوز أن يراها الزوار أبدًا.

طلب جيد لذلك: "اشرح كيف تحفظ قائمة قراءتي كتابًا، من النقر على إضافة إلى تخزين البيانات. استخدم كلمات بسيطة وأشِر إلى الملفات الفعلية."

مشروعك الثاني والثالث

بعد التطبيق الأول اختر شيئًا أصعب بدرجة. متتبّع عادات بمخطط أسبوعي. نموذج حجز يرسل لك بريدًا. لوحة صغيرة تقرأ من Google Sheet. تعرض أمثلة vibe coding أنواع تطبيقات حقيقية مع الطلبات خلفها وما الذي حدث خطأ، ويأخذ كيف تبني تطبيقًا بـ vibe coding مشروعًا أكبر من الفكرة إلى تطبيق منشور له مستخدمون.

حين تكون جاهزًا للبدء افتح منشئ التطبيقات بالذكاء الاصطناعي، والصق طلب قائمة القراءة أعلاه، وعدّله إلى فكرتك أنت.

الأسئلة