Vibe Coding para sa Baguhan: Paano Magsimula, Hakbang-Hakbang

Ang vibe coding para sa baguhan ay nasa limang hakbang: pumili ng tool na nagpapatakbo ng app para sa iyo, ilarawan ang isang maliit na app sa simpleng salita, subukan ito na parang user, humingi ng isang ayos sa bawat pagkakataon, at i-publish kapag gumagana na. Hindi mo kailangang marunong mag-code. Dinadaanan ng tutorial na ito ang bawat hakbang gamit ang totoong unang proyekto, ang eksaktong mga prompt na ita-type mo, at ang mga pagkakamaling halos lahat ng baguhan ay nagagawa sa unang linggo.

Kung gusto mo munang malaman ang pinagmulan ng termino at kung bakit maraming nagtatalo tungkol dito, basahin ang ano ang vibe coding. Ang pahinang ito ay ang praktikal na bahagi.

Ano ang kailangan mo bago magsimula

Mas kaunti kaysa inaakala mo:

• Browser at account sa isang vibe coding tool. Dapat pumili ang baguhan ng AI app builder, na sumusulat ng code, nagpapatakbo nito at nagho-host, sa halip na coding assistant na inaasahan kang mamahala ng mga file at server nang mag-isa.
• Isang maliit na ideya. Hindi ang startup mo. Isang tool para sa isang tao (ikaw) na may isa o dalawang screen.
• Isa o dalawang oras na walang abala. Tuturuan ka ng unang sesyon ang ritmo.

Iyon lang. Walang installation, walang programming course, walang terminal.

Aling tool ang pipiliin bilang baguhan

Mas mahalaga ang mga gawi kaysa sa tool, pero dapat nitong gawin ang tatlong bagay: magpakita ng live preview habang gumagawa, hayaan kang bawiin ang masamang pagbabago, at mag-publish sa link na maibabahagi mo. Tinatalakay ng aming paghahambing ng pinakamahusay na vibe coding tools ang pangunahing mga pagpipilian nang tapat. Isa ang Mythex sa mga ito: inilalarawan mo ang app sa chat, gumagawa ito ng totoong full-stack na app na may live preview, nagdaragdag ng database kapag kailangang tandaan ng app ang mga bagay, at nagpa-publish sa isang click. Walang kailangang card ang Free plan.

Hakbang 1: Pumili ng unang proyektong kaya mong tapusin

Kadalasang nabibigo ang mga baguhan dahil masyadong malaki ang tinatarget. Ang magandang unang proyekto:

• Kapaki-pakinabang sa iyo nang personal, kaya susubukan mo ito nang maayos.
• Kasya sa isa o dalawang screen.
• Nag-iimbak ng maliit na dami ng sarili mong datos.
• Walang payments, walang team at walang sensitibong personal na datos.

Magagandang unang proyekto:

Gagamitin natin ang reading list sa natitirang bahagi ng tutorial.

Hakbang 2: Sumulat ng unang prompt mo

Nakatakda ng unang mensahe mo ang hugis ng lahat. Sabihin kung para kanino ito, ano ang ginagawa nito at ano ang dapat na itsura nito. Panatilihin itong isang maikling talata.

Mahinang unang prompt:

Gumawa ka ng book app.

Magandang unang prompt:

Gumawa ng reading list app para sa akin. Maidadagdag ko ang libro na may pamagat, awtor at status (gustong basahin, binabasa, tapos na). Ipakita ang mga libro bilang card na pinagpangkat ayon sa status, pinakabago muna. Mapapalitan ko ang status ng libro o mabubura ito. Panatilihing malinis at simple: puting background, isang accent na kulay, gumagana sa telepono ko. I-save ang mga libro para manatili pa rin ang mga ito pagkatapos kong mag-refresh.

Tingnan kung ano ang ginagawa ng pangalawa. Inilista nito ang mga field, ang mga aksyon, ang layout at isang patakarang laging nakakalimutan ng mga baguhan: i-save ang datos para mabuhay pagkatapos ng refresh. Kung wala ang linyang ito, maraming tool ang gagawa ng page na mukhang tapos na pero nakakalimutan ang lahat kapag nire-reload mo.

Para sa dagdag na panimulang ideya, tingnan ang aming cheat sheet ng vibe coding prompts.

Humingi ng plano kapag hindi ka sigurado

Kung hindi ka sigurado kung paano ilalarawan ang isang bagay, humingi sa AI ng plano bago ito gumawa:

Bago ka gumawa ng kahit ano, sabihin mo sa akin sa simpleng salita kung anong mga screen ang gagawin mo, anong datos ang iimbakin mo at anumang desisyong kailangan kong gawin.

Sa Mythex, para ito sa Plan mode: inilalatag ng agent ang pamamaraan at inaaprubahan mo ito bago magbago ang anumang file.

Hakbang 3: Subukan ito na parang user, hindi bilang taong gumawa nito

Kapag lumitaw ang preview, huwag mo lang itong hangaan. Gamitin ito:

1. Magdagdag ng tatlong libro, kasama ang isa na napakahaba ang pamagat.
2. Palitan ang status. Lumilipat ba ang card sa tamang pangkat?
3. I-refresh ang page. Nandoon pa rin ba ang mga libro?
4. Subukang magdagdag ng libro na walang pamagat. Ano ang nangyayari?
5. Buksan ang preview sa telepono mo, o paliitin ang browser window.

Isulat sa simpleng salita kung ano ang mali. "Sinisira ng mahabang pamagat ang layout ng card" ay perpektong bug report. Ang "sira" ay hindi.

Hakbang 4: Ayusin ang isang bagay bawat mensahe

Ito ang ugaling naghihiwalay sa mga taong natatapos sa mga taong sumusuko. Magpadala ng isang pagbabago, tingnan ito, at saka ang susunod.

Ang mahabang pamagat na "The Hitchhiker's Guide to the Galaxy: The Complete Trilogy" ay lumalagpas sa card. Hatiin ang mahabang pamagat sa dalawang linya at putulin ang natitira gamit ang "…".

Tapos:

Kapag isinumite ko ang form na walang pamagat, walang nangyayari at walang mensahe. Ipakita ang "Maglagay ng pamagat" sa ilalim ng field at huwag i-save ang libro.

Bakit isa-isa? Kapag humingi ka ng limang pagbabago sa iisang mensahe, maaaring maayos ng AI ang apat at tahimik na masira ang isa pa, at hindi mo malalaman kung alin ang nagdulot nito. Ginagawang kapaki-pakinabang din ng maliliit na hakbang ang undo: kapag may nagkamali sa isang pagbabago, bumalik sa bersyong bago ito at subukan ang mas malinaw na hiling.

Kapag may nasira

Mangyayari ito. Nakakaranas ng error ang lahat ng builder. Kopyahin ang eksaktong teksto ng error, o ilarawan kung ano mismo ang pinindot mo at ang nakita mo, at i-paste ito pabalik:

Kapag pinindot ko ang Delete sa card, lumalabas ang "Something went wrong" at nananatili ang libro. Alamin kung bakit at ayusin ito. Sabihin mo sa akin kung ano ang dahilan.

Mahalaga ang paghingi ng dahilan. Tinuturuan ka nito kung paano gumagana ang mga app, at pinipigilan nito ang AI sa paghula. Mas malalim pa ang aming gabay sa paano i-debug ang app na ginawa ng AI.

Hakbang 5: Gawin itong sa iyo

Kapag gumagana na, pagbutihin ito sa parehong maliliit na hakbang:

• "Magdagdag ng 1–5 star rating na lumalabas sa mga tapos nang libro."
• "Magdagdag ng search box sa itaas ng mga card na nagfi-filter ayon sa pamagat o awtor."
• "Gumamit ng mainit na off-white na background at madilim na berdeng accent."
• "Magdagdag ng counter sa itaas: mga librong natapos ngayong taon."

Bawat isa ay iisang pagbabago na kayang subukan.

Hakbang 6: I-publish at ibahagi

Kapag ginagawa na nito ang kailangan mo, i-publish ito. Sa Mythex, isang click lang iyon, at makakakuha ka ng pampublikong URL na mabubuksan sa anumang device o maipapadala sa kaibigan. Kung gusto mo ng sarili mong domain sa hinaharap, Pro feature iyon, at ipinapaliwanag ng aming gabay sa pagkonekta ng custom domain kung paano.

Bago mo ibahagi ang anuman nang lampas sa ilang kaibigan, basahin ang ligtas ba ang vibe coding?. Para sa personal na reading list, mababa ang panganib. Para sa app na nagpaparehistro ang mga estranghero at nag-iimbak ng datos, may mga pagsusuring kailangan mong gawin muna.

Mga pagkakamaling iwasan ng baguhan

• Paghingi ng lahat nang sabay. "Gumawa ka ng Goodreads" ay nagbubunga ng bagay na mukhang kahanga-hanga pero mahina ang gana. Magsimula sa pinakamaliit na kapaki-pakinabang na bersyon.
• Hindi pagsubok sa refresh. Ang datos na nawawala kapag nire-reload ang page ang pinakakaraniwang sorpresa ng baguhan.
• Muling pagsusulat ng hiling mula sa simula sa bawat pagkakataon. Sabihin kung ano ang babaguhin at kung ano ang panatilihin: "Panatilihin ang layout, kulay lang ang palitan."
• Pagtitiwala sa "naayos na." Madalas sabihin ng AI na naayos na ang bug. Suriin ito mo mismo sa bawat pagkakataon.
• Pagpaste ng password o API key sa chat. Kung kailangan ng app mo ng key para sa panlabas na serbisyo, ilagay ito sa secrets settings ng tool, hindi sa mensahe o sa code. Tingnan ang paano panatilihing ligtas ang API keys.
• Pagsuko pagkatapos ng unang error. Normal ang mga error. I-paste ang mga ito pabalik at humingi ng dahilan.

Ano ang dapat matutunan habang gumagawa

Hindi mo kailangan ng kurso, pero ang ilang ideya ay magpapatalas sa bawat hiling mo. Ipaliwanag ang mga ito ng AI gamit ang sarili mong app:

• Frontend at backend: ano ang tumatakbo sa browser ng bisita kumpara sa server. (Frontend vs backend)
• Database: saan iniimbak ng app mo ang datos. (Ano ang database?)
• Authentication: paano nalalaman ng app kung sino ang tao.
• Secrets: mga pribadong key na ginagamit ng app na hindi dapat makita ng mga bisita.

Magandang prompt para dito: "Ipaliwanag kung paano sine-save ng reading list ko ang isang libro, mula sa pag-click ng Add hanggang sa pag-iimbak ng datos. Gumamit ng simpleng salita at banggitin ang aktwal na mga file."

Ang pangalawa at pangatlo mong proyekto

Pagkatapos ng unang app, pumili ng bagay na isang hakbang na mas mahirap. Habit tracker na may lingguhang chart. Booking form na nagpapadala ng email sa iyo. Maliit na dashboard na bumabasa mula sa Google Sheet. Ipinapakita ng aming mga halimbawa ng vibe coding ang mga totoong uri ng app kasama ang mga prompt at kung ano ang nagkamali, at dinadala ka ng paano gumawa ng app gamit ang vibe coding sa mas malaking proyekto mula sa ideya hanggang sa na-publish na app na may mga user.

Kapag handa ka nang magsimula, buksan ang AI app builder, i-paste ang prompt ng reading list sa itaas, at palitan ito ng sarili mong ideya.

Mga tanong