vibe coding مع ChatGPT: Canvas وCodex وبناء التطبيقات من ChatGPT

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

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

الخيار 1: محادثة ChatGPT وcanvas

لأداة سريعة اطلب فقط. يكتب ChatGPT الكود، وفي canvas يستطيع عرض صفحات HTML وReact البسيطة لتتجول فيها وتطلب تغييرات.

اكتب حاسبة بقشيش في صفحة واحدة بمدخلات لمبلغ الفاتورة ونسبة البقشيش (أزرار 10 و15 و20 وحقل مخصص) وعدد الأشخاص. اعرض البقشيش والمبلغ لكل شخص، ويتحدث وأنا أكتب. اجعلها تبدو نظيفة على الهاتف.

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

أين يتوقف: لا يوجد باكند. لا شيء تدخله يُحفظ لمستخدمين آخرين، ولا تسجيل دخول، ولمشاركته عليك نسخ الكود إلى مكان آخر واستضافته بنفسك. لحظة تقول "واحفظه ليراه فريقي" تكون قد تجاوزت المحادثة.

vibe coding بالنسخ واللصق

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

الخيار 2: Codex لقاعدة كود حقيقية

Codex هو وكيل OpenAI للعمل البرمجي. تعطيه مهمة بلغة عادية فيعمل على مستودع: يقرأ الكود ويجري تغييرات عبر الملفات وينفّذ الأوامر والاختبارات ويعطيك النتيجة لتراجعها. تقدمه OpenAI داخل ChatGPT وكأداة سطر أوامر وكإضافة للمحرر؛ راجع موقع OpenAI لمعرفة الخطط التي تشمله وحدوده الحالية.

يناسبه الطلب على هيئة مهمة:

في هذا المستودع، أضف زر تصدير CSV إلى صفحة الطلبات. يجب أن يصدّر الطلبات المصفّاة حاليًا بالأعمدة التاريخ والعميل والإجمالي والحالة. أضف اختبارًا لدالة التصدير ونفّذ مجموعة الاختبارات.

جيد لـ: المطورين والمؤسسين التقنيين الذين لديهم مشروع قائم ويريدون وكيلًا يأخذ مهامًا كاملة من قائمتهم. يعمل مع بنيتك التقنية وأعرافك.

ما تتولاه أنت: أين يعمل التطبيق، وقاعدة البيانات، والأسرار، والنشر، والنطاقات. Codex يغيّر الكود؛ وليس مضيفًا.

Codex وMythex معًا

يستطيع Codex أيضًا الاتصال بخوادم MCP، ومنها خادم Mythex. أضف https://mcp.mythex.ai/mcp كخادم MCP مخصص في Codex، ووافق على الوصول في Mythex، فيستطيع Codex العمل على مشروع Mythex في بيئته السحابية المعزولة، بينما تتولى Mythex المعاينة وقاعدة البيانات والنشر. يشرح ذلك منشورنا بناء تطبيقات Mythex من Claude أو Cursor أو Codex.

الخيار 3: ابنِ تطبيقًا كاملًا من ChatGPT مع Mythex

إذا أردت البقاء في محادثة ChatGPT والخروج بتطبيق حقيقي مستضاف، فاربط Mythex. تعمل Mythex داخل ChatGPT كتطبيق: يتحدث ChatGPT مع أدوات Mythex عبر MCP، البروتوكول المفتوح الذي يتيح للمساعدين استخدام أدوات مستضافة في مكان آخر (ما هو MCP).

بعد الربط يستطيع ChatGPT إنشاء مشروع Mythex، وكتابة الكود في بيئة سحابية خاصة معزولة، وتشغيل معاينة حية، وإضافة قاعدة بيانات وتخزين ملفات، ونشر التطبيق على رابط عام. تعود النتائج برابط لتفتح المشروع في Mythex وتشاهد المعاينة.

كيف تربط

1. في Mythex افتح إعدادات الحساب وانسخ عنوان MCP.
2. في ChatGPT أضف Mythex من إعدادات التطبيقات أو الموصّلات بهذا العنوان. تتغير قوائم ChatGPT من وقت لآخر، فاتبع صفحة مساعدة OpenAI لإضافة تطبيق إذا اختلفت الأسماء.
3. تُفتح صفحة Mythex: سجّل الدخول واختر السماح بالوصول. لا مفتاح تلصقه.
4. ابدأ محادثة واذكر Mythex في طلبك.

الربط يعمل على أي خطة في Mythex. أما أدوات البيئة المعزولة، من بناء ومعاينة ونشر، فتحتاج Mythex Pro ($25 شهريًا)، ويأتي وقت البيئة المعزولة والاستضافة من أرصدة Mythex لديك. يبقى استخدام ChatGPT على خطتك لدى OpenAI.

طلب أول لتجربته

استخدم Mythex لتبني لي متتبّع طلبات توظيف. أضيف طلبات بالشركة والوظيفة والرابط وتاريخ التقديم والحالة (قدّمت، مقابلة، عرض، مرفوض) وملاحظات. اعرض لوحة حسب الحالة أسحب فيها البطاقات، ومخططًا بسيطًا للطلبات في كل أسبوع. احفظ كل شيء في قاعدة بيانات واحمِه بتسجيل دخول. شغّل المعاينة وأعطني الرابط.

ثم تغييرًا واحدًا في كل رسالة:

في مشروع Mythex، أضف تاريخ تذكير لكل طلب وأبرز البطاقات التي حان موعد تذكيرها اليوم أو فات.

انشره وأرسل لي الرابط الحي.

جيد لـ: من يخططون ويفكرون في ChatGPT أصلًا ويريدون النتيجة حية، ببيانات تبقى، دون تعلّم الاستضافة. ولأنه مشروع Mythex عادي، تستطيع متابعة العمل في محادثة Mythex في أي لحظة.

أي خيار يناسب ما تبنيه

عادات صياغة تنجح في ChatGPT

• اذكر الأداة حين تريد استخدامها. "استخدم Mythex لـ…" توضح أن الطلب لمشروعك لا جواب عام.
• تغيير واحد في كل رسالة. القوائم الطويلة من التعديلات تنتج قوائم طويلة من الآثار الجانبية.
• اطلب خطة قبل الخطوات الكبيرة. "قبل تغيير أي شيء، اذكر ما ستغيّره وانتظر موافقتي."
• الصق الأخطاء بنصها. نص الخطأ الكامل أثمن من أي وصف.
• اسأل عما تغيّر. "لخّص تغييراتك الثلاثة الأخيرة بكلمات بسيطة" يبقيك مطلعًا حين لا تقرأ الكود.

المزيد في ورقة طلبات vibe coding.

حافظ على الأمان

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

هل تستخدم Claude أيضًا؟ يغطي الدليل المرافق vibe coding مع Claude وClaude Code. ولمنظور نموذجًا بنموذج، راجع ChatGPT مقابل Claude مقابل Gemini لبناء التطبيقات.

الأسئلة