Vibe Coding با ChatGPT: Canvas، Codex و ساخت اپ از داخل ChatGPT

شما می‌توانید به سه روش با ChatGPT vibe code کنید. در چت از آن بخواهید یک اپ کوچک بسازد و آن را در canvas پیش‌نمایش کنید؛ وظیفه‌های روی یک کدبیس واقعی را به Codex، عامل برنامه‌نویسی OpenAI، بسپارید؛ یا یک AI app builder مثل Mythex را وصل کنید تا ChatGPT بتواند یک اپ کامل با پایگاه داده را بسازد، میزبانی کند و منتشر کند. روش اول برای یک ابزار تک‌صفحه‌ای سریع‌ترین است، روش دوم مناسب توسعه‌دهندگان است، و روش سوم بدون خارج شدن از ChatGPT یک اپ زنده با ورود کاربران و داده به شما می‌دهد.

در ادامه نحوه کار هر کدام، یک پرامپت برای هرکدام و جایی که متوقف می‌شود را می‌بینید. اگر پس‌زمینه این اصطلاح را می‌خواهید، vibe coding چیست را بخوانید.

گزینه ۱: چت و canvas در ChatGPT

برای یک ابزار سریع فقط بخواهید. ChatGPT کد را می‌نویسد و در canvas می‌تواند صفحه‌های ساده HTML و React را نشان دهد تا روی آن‌ها کلیک کنید و تغییرات بخواهید.

یک ماشین‌حساب تیپ تک‌صفحه‌ای بنویس که ورودی‌هایش مبلغ صورتحساب، درصد انعام (دکمه‌های ۱۰، ۱۵، ۲۰ و یک فیلد دلخواه) و تعداد نفرات باشد. مبلغ انعام و سهم هر نفر را نشان بده که هنگام تایپ به‌روز شود. ظاهرش در گوشی تمیز باشد.

مناسب برای: ماشین‌حساب‌ها، بازی‌های ساده، پیش‌نویس صفحه فرود و یادگیری. اگر بپرسید «این فایل را طوری توضیح بده که انگار تازه‌کار هستم»، سریع یاد می‌گیرید.

جایی که متوقف می‌شود: بک‌اند وجود ندارد. آنچه وارد می‌کنید برای کاربران دیگر ذخیره نمی‌شود، ورود کاربر وجود ندارد، و برای اشتراک‌گذاری باید کد را جای دیگری کپی کنید و خودتان میزبانی کنید. لحظه‌ای که بگویید «و آن را ذخیره کن تا تیمم ببیند»، از چت بیرون زده‌اید.

vibe coding با کپی و پیست

بسیاری از افراد با درخواست کد از ChatGPT و چسباندن آن در فایل‌های روی کامپیوتر یا یک سرویس میزبانی شروع می‌کنند. برای سایت‌های ایستای کوچک کار می‌کند، اما خیلی زود از کار می‌افتد. هر تغییر یعنی پیدا کردن فایل درست، چسباندن بخش درست و امید به اینکه چیز دیگری به قسمتی که جایگزین کرده‌اید وابسته نباشد. اگر چند بار بیشتر این کار را کردید، به یکی از دو گزینه بعدی بروید.

گزینه ۲: Codex برای یک کدبیس واقعی

Codex عامل OpenAI برای کارهای نرم‌افزاری است. وظیفه‌ای را با زبان ساده به آن می‌دهید و روی یک مخزن کار می‌کند: کد را می‌خواند، تغییرات را در چند فایل اعمال می‌کند، دستورها و تست‌ها را اجرا می‌کند و نتیجه را برای بازبینی به شما می‌دهد. OpenAI آن را در ChatGPT، به‌صورت ابزار خط فرمان و به‌عنوان افزونه ویرایشگر ارائه می‌کند؛ برای دیدن اینکه کدام پلن‌ها شامل آن می‌شوند و محدودیت‌های فعلی، سایت OpenAI را بررسی کنید.

برای آن بهترین کار پرامپتی به شکل وظیفه است:

در این مخزن، یک دکمه خروجی CSV به صفحه Orders اضافه کن. باید سفارش‌های فیلترشده فعلی را با ستون‌های تاریخ، مشتری، جمع و وضعیت خروجی بگیرد. برای تابع خروجی یک تست بنویس و مجموعه تست را اجرا کن.

مناسب برای: توسعه‌دهندگان و بنیان‌گذاران فنی که یک پروژه موجود دارند و می‌خواهند یک عامل وظیفه‌های کامل را از فهرستشان بردارد. با پشته و قراردادهای پروژه شما کار می‌کند.

آنچه هنوز با خودتان است: اینکه اپ کجا اجرا می‌شود، پایگاه داده، secrets، استقرار و دامنه. Codex کد را تغییر می‌دهد؛ میزبان نیست.

Codex و Mythex با هم

Codex می‌تواند به سرورهای MCP هم وصل شود، از جمله سرور Mythex. آدرس https://mcp.mythex.ai/mcp را در Codex به‌عنوان یک سرور MCP سفارشی اضافه کنید، دسترسی را در Mythex تأیید کنید، و Codex می‌تواند روی یک پروژه Mythex در sandbox ابری آن کار کند، در حالی که پیش‌نمایش، پایگاه داده و انتشار را Mythex مدیریت می‌کند. پست ما درباره ساخت اپ‌های Mythex از Claude، Cursor یا Codex مراحل را توضیح می‌دهد.

گزینه ۳: ساخت یک اپ کامل از ChatGPT با Mythex

اگر می‌خواهید در یک گفتگوی ChatGPT بمانید و در پایان یک اپ واقعی و میزبانی‌شده داشته باشید، Mythex را وصل کنید. Mythex داخل ChatGPT به‌عنوان یک اپ کار می‌کند: ChatGPT از طریق MCP، یعنی پروتکلی که به دستیارها اجازه می‌دهد از ابزارهایی که جای دیگری میزبانی شده‌اند استفاده کنند، با ابزارهای Mythex صحبت می‌کند (MCP چیست).

وقتی وصل شد، ChatGPT می‌تواند یک پروژه Mythex بسازد، کد را در یک sandbox ابری خصوصی بنویسد، یک پیش‌نمایش زنده راه بیندازد، پایگاه داده و ذخیره‌سازی فایل اضافه کند و اپ را روی یک آدرس عمومی منتشر کند. نتایج همراه با لینکی برمی‌گردند تا پروژه را در Mythex باز کنید و پیش‌نمایش را تماشا کنید.

نحوه اتصال

1. در Mythex، Account settings را باز کنید و آدرس MCP را کپی کنید.
2. در ChatGPT، Mythex را از تنظیمات apps یا connectors با آن آدرس اضافه کنید. منوهای ChatGPT گاهی تغییر می‌کنند، پس اگر نام‌ها فرق داشت، صفحه راهنمای OpenAI درباره افزودن یک اپ را دنبال کنید.
3. یک صفحه Mythex باز می‌شود: وارد شوید و Allow access را انتخاب کنید. هیچ کلیدی برای چسباندن وجود ندارد.
4. یک گفتگو شروع کنید و در درخواستتان Mythex را نام ببرید.

اتصال در هر پلن Mythex کار می‌کند. ابزارهای sandbox، یعنی ساخت، پیش‌نمایش و انتشار، به Mythex Pro ($25 در ماه) نیاز دارند و زمان sandbox و میزبانی از اعتبارهای Mythex شما تأمین می‌شود. مصرف ChatGPT شما روی پلن OpenAI خودتان می‌ماند.

یک پرامپت اول برای امتحان

با Mythex یک ردیاب درخواست شغلی برایم بساز. می‌توانم درخواست‌ها را با نام شرکت، نقش، لینک، تاریخ ارسال، وضعیت (ارسال‌شده، مصاحبه، پیشنهاد، رد‌شده) و یادداشت اضافه کنم. یک تابلو بر اساس وضعیت نشان بده که بتوانم کارت‌ها را بکشم، و یک نمودار ساده از تعداد درخواست‌ها در هر هفته. همه چیز را در یک پایگاه داده ذخیره کن و با ورود محافظت کن. پیش‌نمایش را راه بینداز و لینک را بده.

بعد، یک تغییر در هر پیام:

در پروژه Mythex، یک تاریخ یادآوری به هر درخواست اضافه کن و کارت‌هایی را که یادآوری‌شان امروز یا گذشته است هایلایت کن.

منتشرش کن و آدرس زنده را برایم بفرست.

مناسب برای: کسانی که از قبل در ChatGPT برنامه‌ریزی و فکر می‌کنند و می‌خواهند نتیجه زنده شود، با داده‌ای که می‌ماند، بدون یادگرفتن میزبانی. چون این یک پروژه عادی Mythex است، هر لحظه می‌توانید در چت Mythex ادامه دهید.

کدام گزینه برای چه کاری مناسب است

عادت‌های پرامپت‌نویسی که در ChatGPT خوب کار می‌کنند

• اسم ابزار را ببرید وقتی می‌خواهید استفاده شود. «با Mythex…» روشن می‌کند که درخواست برای پروژه شماست، نه یک پاسخ عمومی.
• در هر پیام یک تغییر. فهرست‌های بلند تغییرات، عوارض جانبی طولانی‌تری می‌سازند.
• قبل از قدم‌های بزرگ برنامه بخواهید. «قبل از تغییر هر چیزی، فهرست کن چه چیزی را عوض می‌کنی و منتظر تأیید من بمان.»
• متن دقیق خطا را بچسبانید. متن کامل خطا از هر توصیفی ارزشمندتر است.
• بپرسید چه چیزی تغییر کرد. «سه تغییر آخرت را با کلمات ساده خلاصه کن» وقتی کد را نمی‌خوانید، جهت شما را نگه می‌دارد.

بیشتر این‌ها در برگه پرامپت‌های vibe coding آمده است.

امن نگه داشتن کار

• هرگز رمز عبور یا کلید API واقعی را در گفتگوی ChatGPT نچسبانید. اگر اپ به کلیدی نیاز دارد، آن را در secrets پروژه ذخیره کنید. ابزارهای Mythex فقط نام secrets را گزارش می‌کنند، نه مقدارشان.
• قبل از انتشار، بررسی کنید کاربران نمی‌توانند داده یکدیگر را ببینند و هیچ کلیدی در کدی که در مرورگر اجرا می‌شود قرار نگرفته باشد. راهنمای آیا vibe coding امن است؟ بررسی‌ها را همراه با پرامپت‌هایی که می‌توانید بچسبانید فهرست کرده است.

اگر Claude را هم استفاده می‌کنید، راهنمای همراه vibe coding با Claude و Claude Code را ببینید. برای نگاه مدل‌به‌مدل، ChatGPT در برابر Claude در برابر Gemini برای ساخت اپ را بخوانید.

پرسش‌ها