Paano Gumawa ng App gamit ang Vibe Coding: Mula Idea hanggang Published App

Para gumawa ng app gamit ang vibe coding, isulat ang isang pahinang paglalarawan ng unang bersyon, ibigay ito sa AI app builder bilang unang prompt, at palaguin ang app sa maliliit at sinubok na hakbang: data, login, ang pangunahing workflow, polish, security pass, at sa huli, publish. Sinusundan ng gabay na ito ang isang halimbawang proyekto, isang class booking app para sa maliit na yoga studio, sa bawat yugto, kasama ang mga prompt na ginamit sa bawat hakbang.

Kung hindi ka pa nakagawa ng kahit ano sa ganitong paraan, mas maliit ang sinisimulan ng aming vibe coding tutorial para sa mga nagsisimula. Para sa mas malawak na pangkalahatang-ideya na hindi nakatali sa vibe coding, tingnan ang paano gumawa ng app gamit ang AI.

Ang proyekto

Isipin si Sara, may-ari ng yoga studio na may walong klase kada linggo. Dumarating ang mga booking sa WhatsApp; may papel na listahan siya bawat klase at madalas siyang mag-overbook. Ang gusto niya:

• Makita ng mga estudyante ang timetable ng linggo at mag-book ng puwesto.
• May kapasidad ang bawat klase.
• Listahan bawat klase na puwede niyang tingnan sa pinto.
• Makapagkansela ang mga estudyante hanggang dalawang oras bago ang klase.

Iyon ang buong unang bersyon. Walang payments, walang memberships, walang app store. Darating ang mga iyon sa susunod, o hindi na.

Hakbang 1: Sumulat ng isang pahinang spec

Bago magbukas ng anumang tool, isulat sa simpleng salita ang unang bersyon. Ang sampung minutong ginugol dito ay makakatipid ng oras ng palitan ng mensahe. Isang kapaki-pakinabang na hugis:

• Sino ang gagamit: estudyante (mag-book at magkansela), si Sara (mamahala ng klase, tumingin ng listahan).
• Mga screen: timetable, detalye ng klase, my bookings, admin classes, admin class list.
• Data: klase (pangalan, guro, oras ng simula, haba, kapasidad), booking (estudyante, klase, status), estudyante (pangalan, email, telepono).
• Mga patakaran: walang booking sa punong klase; isang booking bawat estudyante bawat klase; kanselasyon hanggang dalawang oras bago; sa admin pages, si Sara lang.
• Wala sa v1: payments, class packs, waitlists, reminders.

Pinakamahalaga ang listahang "wala sa v1". Iyon ang nagpapanatiling natatapos ang build. Mas malalim pa ang aming gabay tungkol sa pagsulat ng product requirements doc gamit ang AI kung gusto mo ng mas kumpletong spec.

Hakbang 2: Pumili ng tool na sumasaklaw sa buong loop

Para sa app na may database, login, at public URL, gumamit ng AI app builder na nagpapatakbo ng code, nagkakabit ng database, at nagpa-publish, sa halip na chat assistant na nagbibigay sa iyo ng mga file. Nakalista sa aming paghahambing ng vibe coding tools ang mga opsyon. Gagamit tayo ng Mythex dito dahil sakop nito ang bawat hakbang sa iisang lugar: chat, live preview, totoong database at file storage, at one-click publishing.

Hakbang 3: Ang unang prompt

Gawing isang talata ang spec. Huwag i-paste ang buong dokumento nang sabay-sabay na may bawat detalye; ibigay ang sentro at idagdag ang iba nang paunti-unti.

Gumawa ng class booking app para sa yoga studio ko. Magrerehistro ang mga estudyante gamit ang pangalan, email, at telepono, makikita ang timetable ng linggong ito, at makakapag-book ng puwesto sa isang klase. May pangalan, guro, oras ng simula, haba, at kapasidad ang bawat klase; ang punong klase ay magpapakita ng "Full" at hindi maaaring i-book. Makikita ng estudyante ang kanilang mga booking at makakapagkansela hanggang dalawang oras bago ang klase. Ako ang admin: maaari akong magdagdag at mag-edit ng klase, at makita ang listahan ng mga naka-book sa bawat isa. Kalmado at simpleng disenyo na gumagana nang maayos sa phone.

Kung hindi ka sigurado na naintindihan ng tool, humingi muna ng plano. Sa Mythex, nilalatag ng Plan mode ang mga screen at data bago magsulat ng code, at ikaw ang mag-aapruba.

Hakbang 4: Gawing gumagana ang pangunahing loop

Ang pangunahing loop ang dahilan kung bakit umiiral ang app: nagbo-book ang estudyante ng klase, at nakikita ito ni Sara. Subukan lamang ang bahaging iyon:

1. Mag-sign up bilang estudyante, mag-book ng klase.
2. Buksan ang admin view. Nandoon ba ang booking?
3. I-book muli ang parehong klase. Dapat itong tumanggi.
4. Itakda ang kapasidad ng klase sa 2, i-book ito mula sa dalawang student account, at subukan ang pangatlo.

Karaniwang lumilitaw ang dalawang problema sa puntong ito. Ipinapakita ng timetable ang oras sa time zone ng server, hindi ng studio. At ang tseke ng "Full" ay nangyayari lamang sa page, kaya ang mabilis na double-click ay lumilikha ng dalawang booking.

Ipakita ang lahat ng oras ng klase sa time zone ng studio, [Asia/Dubai], anuman ang naka-set sa device ng bisita.

I-check ang kapasidad at mga duplicate na booking sa server kapag nagagawa ang booking, hindi lamang sa page. Kapag dalawang request ang dumating nang sabay para sa huling puwesto, isa lang ang dapat magtagumpay.

Ayusin ang pangunahing loop bago magdagdag ng iba. Nakadepende ang lahat ng iba roon.

Hakbang 5: Idagdag ang natitirang patakaran, isa bawat mensahe

Ngayon, dumaan sa mga patakaran ng spec nang isa-isa:

Maaaring magkansela ang mga estudyante ng booking hanggang dalawang oras bago magsimula ang klase. Pagkatapos noon, itago ang cancel button at tanggihan ang pagkansela sa server na may malinaw na mensahe.

Ako lang ang maaaring magbukas ng admin pages. Siguraduhing sinusuri ito sa server para sa bawat admin action, hindi lamang sa pagtatago ng menu.

Pagkatapos ng bawat isa, subukan ito, at lumipat lamang kapag gumagana. Kapag may nasira ang isang pagbabago, bumalik sa huling gumaganang checkpoint at subukan ulit sa mas malinaw na hiling, sa halip na magdagdag ng ayos sa ibabaw ng sirang bahagi.

Hakbang 6: Pinuhin ang mga bagay na mapapansin ng totoong users

Mapapansin ng totoong users ang maliliit na bagay. Maikling listahan para sa app ni Sara:

• Empty states: "Wala pang klase ngayong linggo" sa halip na blangkong page.
• Kumpirmasyon: "Naka-book ka na sa Vinyasa, Martes 18:00" pagkatapos mag-book.
• Layout sa phone: malalaking button, at nababasa ang timetable sa 375px na screen.
• Natitirang puwesto: "3 puwesto na lang" sa bawat klase, para mas mabilis mag-book ang mga estudyante.

Sa bawat class card, ipakita ang natitirang puwesto, halimbawa "3 sa 12 ang natitira". Pagkatapos mag-book, magpakita ng kumpirmasyon na may pangalan ng klase, araw, at oras, at button papunta sa my bookings ko.

Hakbang 7: Subukan na parang estranghero

Bago gamitin ito ng iba, gumugol ng kalahating oras sa pagsisikap na sirain ito:

Maaari mo ring hilingin sa AI na dumaan sa mga kakaibang kaso:

Ilista ang sampung bagay na maaaring gawin ng totoong estudyante na makakasira sa pag-book o pagkansela, subukan ang bawat isa at ayusin ang mga pumapalya. Sabihin sa akin kung ano ang binago mo.

Hakbang 8: Security pass

Nag-iimbak ang app na ito ng pangalan, email, at numero ng telepono, kaya sulit ang maikling security pass. Ang mga pangunahing tanong:

• Makakakita ba ang isang estudyante ng booking o detalye ng kontak ng iba?
• May key o password ba sa code na tumatakbo sa browser?
• Protektado ba ang sign-up form laban sa mga bot?
• May backup ba ng data?

Ipinaliliwanag ng aming pahina tungkol sa kung ligtas ba ang vibe coding ang bawat check at nagbibigay ng mga prompt para sa mga ito, at ang security checklist para sa AI-built apps ang mas mahabang bersyon.

Hakbang 9: Mag-publish

Kapag pumasa na ang pangunahing loop, ang mga patakaran, at ang mga check, mag-publish. Sa Mythex, isang click lang ito, at makakakuha ang app ng public URL na may database at hosting na nakahanda na. Sa Pro, puwede mong ikonekta ang sarili mong domain, halimbawa book.sarasyoga.com; tingnan ang paano ikonekta ang custom domain.

Bago mo ipadala ang link, suriin muli ang na-publish na bersyon. Mag-book ng klase mula sa phone mo. Dapat magkapareho ang production at preview, pero kumpirmahin pa rin.

Hakbang 10: Unang users at ang susunod na bersyon

Ibigay muna ang link sa limang regular na estudyante, hindi sa lahat. Hilingin sa kanila na mag-book ng susunod nilang klase sa pamamagitan nito at sabihin sa iyo kung ano ang nakalito sa kanila. Saka ayusin ang nangungunang tatlong bagay na nabanggit nila.

Pagkaraan ng ilang linggo ng totoong paggamit, kusang mabubuo ang v2 listahan para sa ganitong app: waitlist para sa punong klase, email reminders kinagabihan bago ang klase, at class packs na binabayaran online. Bawat isa ay may parehong pagtrato: ilarawan sa ilang linya, bigyan ng prompt, subukan, at i-publish. Para sa pagdaragdag ng payments, tingnan ang paano magdagdag ng payments sa app. Para sa pagpapakilala ng app, paano i-launch ang app at makakuha ng unang users.

Gawing phone app

Maraming studio ang gustong may icon sa phone ng mga estudyante. Sa Mythex Pro, ang na-publish na app ay puwedeng maging Android app (isang file na maaari mong i-upload sa Google Play) at iPhone app na ipapadala sa TestFlight gamit ang sarili mong App Store Connect key, nang walang Mac. Binubuksan ng phone app ang na-publish na web app, kaya tuwing mag-publish ka ng update, makukuha rin ito ng phone app.

Ano ang dapat tandaan

Ang mismong build ay ang maikling bahagi. Ang nagpagana sa app ay ang listahang "wala sa v1" ng spec, ang pagsubok sa pangunahing loop bago ang lahat, mga patakaran sa server para sa kapasidad at access, at limang totoong user bago ang limampu. Ganito ang itsura ng vibe coding kapag kailangang gumana ang app para sa ibang tao.

Handa ka na bang subukan ang sarili mo? Isulat ang iyong pahinang spec, saka i-paste ang unang talata sa AI app builder. Kung gusto mong makita ang iba pang uri ng app at ang mga prompt sa likod ng mga ito, basahin ang aming mga halimbawa ng vibe coding.

Mga tanong