Vibe Coding gamit ang ChatGPT: Canvas, Codex at Pagbuo ng App mula sa ChatGPT

Puwede kang mag-vibe code gamit ang ChatGPT sa tatlong paraan. Humingi ng maliit na app sa chat at i-preview ito sa canvas; ibigay ang mga gawain sa totoong codebase sa Codex, ang coding agent ng OpenAI; o ikonekta ang AI app builder gaya ng Mythex para mabuo, ma-host at mai-publish ng ChatGPT ang kumpletong app na may database. Pinakamabilis ang una para sa tool na isang pahina, para sa developer ang ikalawa, at ang ikatlo ay nagbibigay ng live na app na may login at datos nang hindi umaalis sa ChatGPT.

Narito kung paano gumagana ang bawat isa, isang prompt para sa bawat isa, at kung saan sila humihinto. Kung gusto mo ng background sa termino, basahin ang ano ang vibe coding.

Opsyon 1: ChatGPT chat at canvas

Para sa mabilis na tool, itanong lang. Isinusulat ng ChatGPT ang code, at sa canvas ay maipapakita nito ang simpleng HTML at React na pahina para ma-click mo at makahingi ng pagbabago.

Sumulat ng single-page na tip calculator na may input para sa halaga ng bill, porsyento ng tip (mga button para sa 10, 15, 20 at custom na field) at bilang ng tao. Ipakita ang tip at ang halaga bawat tao, na nagbabago habang nagta-type ako. Gawin itong malinis tingnan sa telepono.

Mabuti para sa: calculator, simpleng laro, draft ng landing page, at pag-aaral. Itanong ang "ipaliwanag ang file na ito na parang bago ako sa coding" at mabilis kang matututo.

Saan ito humihinto: walang backend. Walang naka-save para sa ibang user sa anumang ilagay mo, walang login, at para ibahagi ito, kailangan mong kopyahin ang code sa ibang lugar at ikaw mismo ang mag-host. Sa sandaling sabihin mong "at i-save para makita ng team ko," lumampas ka na sa chat.

Copy-paste na vibe coding

Maraming tao ang nagsisimula sa paghingi ng code sa ChatGPT at pag-paste nito sa mga file sa computer nila o sa hosting service. Gumagana ito para sa maliliit na static na site, pero mabilis itong bumibigay. Bawat pagbabago ay nangangahulugang hahanapin ang tamang file, ipa-paste ang tamang bahagi, at umaasang walang ibang nakasalalay sa pinalitan mo. Kung napapansin mong ginagawa mo ito nang higit sa ilang beses, lumipat sa isa sa dalawang opsyon sa ibaba.

Opsyon 2: Codex para sa totoong codebase

Ang Codex ay ahente ng OpenAI para sa gawaing software. Binibigyan mo ito ng gawain sa simpleng salita, at gumagana ito sa isang repository: binabasa ang code, gumagawa ng pagbabago sa maraming file, nagpapatakbo ng command at test, at ibinibigay sa iyo ang resulta para suriin. Inaalok ito ng OpenAI sa ChatGPT, bilang command-line tool at bilang extension sa editor; tingnan ang site ng OpenAI para sa kung aling plan ang may kasama nito at sa kasalukuyang limitasyon.

Bagay sa kanya ang prompt na nakaayos bilang gawain:

Sa repo na ito, magdagdag ng CSV export button sa Orders page. Dapat i-export nito ang kasalukuyang na-filter na orders na may column na date, customer, total at status. Magdagdag ng test para sa export function at patakbuhin ang test suite.

Mabuti para sa: mga developer at technical founder na may umiiral nang proyekto at gustong kunin ng ahente ang buong gawain sa listahan nila. Gumagana ito kasama ang stack at mga kombensiyon mo.

Ano ang ikaw pa rin ang humahawak: kung saan tumatakbo ang app, ang database, ang mga secret, deployment at domain. Nagbabago ng code ang Codex; hindi ito host.

Codex at Mythex nang magkasama

Puwede ring kumonekta ang Codex sa mga MCP server, kasama ang sa Mythex. Idagdag ang https://mcp.mythex.ai/mcp bilang custom MCP server sa Codex, aprubahan ang access sa Mythex, at makakapagtrabaho ang Codex sa Mythex project sa cloud sandbox nito, habang ang preview, database at pag-publish ay hinahawakan ng Mythex. Dinadaanan ng aming post tungkol sa pagbuo ng Mythex apps mula sa Claude, Cursor o Codex ang buong proseso.

Opsyon 3: Bumuo ng kumpletong app mula sa ChatGPT gamit ang Mythex

Kung gusto mong manatili sa isang ChatGPT na usapan at magtapos sa totoong naka-host na app, ikonekta ang Mythex. Gumagana ang Mythex sa loob ng ChatGPT bilang app: nakikipag-usap ang ChatGPT sa mga tool ng Mythex sa pamamagitan ng MCP, ang bukas na protocol na nagpapahintulot sa mga assistant na gumamit ng mga tool na naka-host sa iba (ano ang MCP).

Kapag nakakonekta na, puwedeng gumawa ang ChatGPT ng Mythex project, isulat ang code sa pribadong cloud sandbox, magsimula ng live preview, magdagdag ng database at file storage, at i-publish ang app sa pampublikong URL. Bumabalik ang mga resulta na may link para mabuksan mo ang project sa Mythex at mapanood ang preview.

Paano ikonekta

1. Sa Mythex, buksan ang Account settings at kopyahin ang MCP address.
2. Sa ChatGPT, idagdag ang Mythex mula sa apps o connectors settings gamit ang address na iyon. Nagbabago paminsan-minsan ang mga menu ng ChatGPT, kaya sundin ang help page ng OpenAI sa pagdaragdag ng app kung iba ang mga pangalan.
3. May bubukas na Mythex page: mag-sign in at piliin ang Allow access. Walang key na kailangang i-paste.
4. Magsimula ng usapan at banggitin ang Mythex sa hiling mo.

Gumagana ang pagkonekta sa anumang Mythex plan. Kailangan ng sandbox tools (pagbuo, pag-preview, pag-publish) ang Mythex Pro ($25 bawat buwan), at nagmumula ang oras ng sandbox at hosting sa mga Mythex credit mo. Nananatili sa OpenAI plan mo ang paggamit mo ng ChatGPT.

Isang unang prompt na subukan

Gamitin ang Mythex para gumawa ng job application tracker para sa akin. Nagdaragdag ako ng mga aplikasyon na may kumpanya, posisyon, link, petsa ng pag-apply, status (applied, interview, offer, rejected) at mga tala. Magpakita ng board ayon sa status kung saan puwede kong i-drag ang mga card, at simpleng chart ng bilang ng aplikasyon bawat linggo. I-save ang lahat sa database at protektahan ito ng login. Simulan ang preview at ibigay sa akin ang link.

Tapos, isang pagbabago bawat mensahe:

Sa Mythex project, magdagdag ng petsa ng paalala sa bawat aplikasyon at i-highlight ang mga card na ang paalala ay ngayon o lampas na.

I-publish ito at ipadala sa akin ang live URL.

Mabuti para sa: mga taong nagpaplano at nag-iisip na sa ChatGPT at gustong live ang resulta, na may datos na nananatili, nang hindi natututo ng hosting. Dahil ordinaryong Mythex project ito, puwede kang magpatuloy sa Mythex chat anumang oras.

Aling opsyon ang bagay sa ginagawa mo

Mga ugaling pang-prompt na gumagana sa ChatGPT

• Banggitin ang tool kapag gusto mo itong gamitin. Ang "Gamitin ang Mythex para…" ay nagpapaliwanag na ang hiling ay para sa proyekto mo, hindi pangkalahatang sagot.
• Isang pagbabago bawat mensahe. Ang mahabang listahan ng pag-edit ay nagbubunga ng mahabang listahan ng side effect.
• Humingi ng plano bago ang malalaking hakbang. "Bago ka magbago ng kahit ano, ilista kung ano ang babaguhin mo at maghintay ng OK ko."
• I-paste ang eksaktong error. Mas mahalaga ang buong teksto ng error kaysa sa anumang paglalarawan.
• Itanong kung ano ang nagbago. Ang "Ibuod ang huling tatlong pagbabago mo sa simpleng salita" ay nagpapanatili sa iyong oryentado kapag hindi mo binabasa ang code.

Marami pa sa aming cheat sheet ng vibe coding prompts.

Panatilihing ligtas

• Huwag kailanman mag-paste ng totoong password o API key sa usapan ng ChatGPT. Kung kailangan ng app mo ng key, itago ito sa secrets ng project. Ang mga tool ng Mythex ay nag-uulat lang ng pangalan ng secret, hindi ng halaga.
• Bago mag-publish, siguruhing hindi nakikita ng mga user ang datos ng isa't isa, at walang key na napunta sa code na tumatakbo sa browser. Inilista ng aming gabay na ligtas ba ang vibe coding? ang mga pagsusuri kasama ang mga prompt na puwede mong i-paste.

Gumagamit ka rin ba ng Claude? Sakop ng kasamang gabay ang vibe coding gamit ang Claude at Claude Code. Para sa pagtingin ayon sa model, tingnan ang ChatGPT vs Claude vs Gemini para sa pagbuo ng app.

Mga tanong