Vibe coding-ээр app хэрхэн хийх вэ: санаанаас нийтлэгдсэн app хүртэл

Vibe coding-ээр app хийхийн тулд анхны хувилбарынхаа нэг хуудасны тайлбарыг бичиж, AI app builder-т эхний prompt болгон өгч, дараа нь app-аа жижиг туршигдсан алхмаар өсгө: өгөгдөл, нэвтрэлт, гол ажлын урсгал, засвар, аюулгүй байдлын шалгалт, эцэст нь нийтлэх. Энэ гарын авлага нэг жишээ төслийг бүх шатаар нь дагана: Сара нэртэй йогийн студийн хичээлийн захиалгын app, мөн шат бүрийн prompt-уудыг харуулна.

Хэрэв та өмнө нь ийм байдлаар юу ч бүтээж байгаагүй бол vibe coding-ийн эхлэлийн заавар жижиг алхмаас эхэлдэг. Vibe coding-д хамааралгүй ерөнхий тойм хүсвэл AI-аар app хэрхэн хийх вэ гарын авлагыг үзнэ үү.

Төсөл

Сара гэдэг студийн эзэн долоо хоногт найман хичээл заадаг гэж төсөөлөөрэй. Захиалга нь WhatsApp-аар ирдэг; тэр хичээл бүрт цаасан жагсаалт хөтөлдөг бөгөөд ихэвчлэн хэтрүүлж захиалга авдаг. Тэр хүсдэг нь:

• Оюутнууд долоо хоногийн хуваарийг харж, суудал захиалах.
• Хичээл бүр багтаамжтай байх.
• Тэр үүд дээр шалгах хичээл бүрийн жагсаалт.
• Оюутнууд хичээлээс хоёр цагийн өмнө цуцлах боломжтой байх.

Энэ бол анхны хувилбарын бүх зүйл. Төлбөр, гишүүнчлэл, апп дэлгүүр байхгүй. Эдгээр нь дараа нэмэгдэх, эсвэл огт нэмэгдэхгүй.

Алхам 1: Нэг хуудасны тодорхойлолт бич

Аливаа хэрэгсэл нээхээсээ өмнө анхны хувилбарыг энгийн үгээр бичээрэй. Арван минут энд хэмнэх нь хэдэн цагийн яриа хэлэлцээг хэмнэнэ. Тустай хэлбэр:

• Хэн ашиглах вэ: оюутнууд (захиалах, цуцлах), Сара (хичээл удирдах, жагсаалт харах).
• Дэлгэцүүд: хуваарь, хичээлийн дэлгэрэнгүй, миний захиалгууд, админ хичээлүүд, админ хичээлийн жагсаалт.
• Өгөгдөл: хичээлүүд (нэр, багш, эхлэх цаг, урт, багтаамж), захиалгууд (оюутан, хичээл, төлөв), оюутнууд (нэр, имэйл, утас).
• Дүрмүүд: дүүрсэн хичээлд захиалга авахгүй; оюутан хичээл бүрт нэг л захиалга; хоёр цагийн өмнө хүртэл цуцлах; зөвхөн Сара админ хуудсыг харна.
• v1-д байхгүй: төлбөр, хичээлийн багц, хүлээлтийн жагсаалт, сануулга.

«v1-д байхгүй» жагсаалт хамгийн чухал. Энэ нь бүтээлийг дуусгахад хүрэлцэхүйц байлгана. Илүү бүрэн тодорхойлолт хэрэгтэй бол AI-аар бүтээгдэхүүний шаардлагын баримт бичиг бичих нь гарын авлагад байна.

Алхам 2: Бүх гогцоог даах хэрэгсэл сонго

Өгөгдлийн сан, нэвтрэлт, нийтийн URL бүхий app-д код ажиллуулж, өгөгдлийн сан холбож, нийтэлдэг AI app builder хэрэгтэй; зөвхөн файл өгдөг чатын туслах биш. Манай vibe coding хэрэгслүүдийн харьцуулалт сонголтуудыг жагсаасан. Энд бид Mythex-ийг ашиглана, учир нь чат, урьдчилан харах, жинхэнэ өгөгдлийн сан, файлын хадгалалт, нэг товшилтоор нийтлэх бүгд нэг дор байдаг.

Алхам 3: Эхний prompt

Тодорхойлолтоо нэг догол мөр болго. Бүх баримт бичгийг бүх нарийн зүйлтэйгээр нэг дор бүү хуул; үндсийг нь өгөөд, үлдсэнийг алхам алхмаар нэм.

Миний йогийн студид зориулсан хичээлийн захиалгын app бүтээ. Оюутнууд нэр, имэйл, утсаа бүртгүүлж, энэ долоо хоногийн хуваарийг харж, хичээлд суудал захиална. Хичээл бүр нэр, багш, эхлэх цаг, урт, багтаамжтай; дүүрсэн хичээл «Дүүрсэн» гэж харагдаж, захиалга авахгүй. Оюутнууд өөрсдийн захиалгыг харж, хичээлээс хоёр цагийн өмнө цуцлах боломжтой. Би админ: хичээл нэмж, засах, хичээл бүрт хэн захиалсныг жагсаалтаар харах. Тайван, энгийн, утсан дээр сайн харагдах дизайн.

Хэрэв хэрэгсэл таныг сайн ойлгосон эсэхээ мэдэхгүй байвал эхлээд төлөвлөгөө хүс. Mythex-д Plan горим код бичихээсээ өмнө дэлгэц, өгөгдлийг тайлбарлаж, та зөвшөөрнө.

Алхам 4: Гол гогцоог ажиллуул

Гол гогцоо бол app-ын үндсэн үүрэг: оюутан хичээлд захиалга хийж, Сара үүнийг харна. Зөвхөн үүнийг туршаарай:

1. Оюутнаар бүртгүүлж, хичээлд захиалга хий.
2. Админ харагдац руу ор. Захиалга тэнд байна уу?
3. Ижил хичээлд дахин захиалга хий. Татгалзах ёстой.
4. Хичээлийн багтаамжийг 2 болго, хоёр оюутны бүртгэлээр захиалж, гуравдахь оролдоорой.

Энэ үед ихэвчлэн хоёр асуудал гарна. Хуваарь нь серверийн цагийн бүсээр цагийг харуулдаг, студийнхээр биш. Мөн «Дүүрсэн» шалгалт зөвхөн хуудсан дээр явагддаг тул хурдан хоёр товшилт хоёр захиалга үүсгэж болно.

Хичээлийн бүх цагийг студийн цагийн бүсээр харуул, [Asia/Dubai], зочны төхөөрөмжийн тохиргоонд үл хамаарч.

Захиалга үүсэх үед багтаамж болон давхардсан захиалгыг зөвхөн хуудсан дээр бус серверт шалга. Хамгийн сүүлийн суудалд хоёр хүсэлт зэрэг ирвэл зөвхөн нэг нь амжилттай болох ёстой.

Юу ч нэмэхээсээ өмнө гол гогцоог засаарай. Бусад бүх зүйл үүн дээр тулгуурладаг.

Алхам 5: Үлдсэн дүрмүүдийг нэг нэгээр нь нэм

Одоо тодорхойлолтын дүрмүүдийг нэг нэгээр нь явж, мессеж бүрт нэгийг нь өг:

Оюутнууд захиалгаа хичээл эхлэхээс хоёр цагийн өмнө хүртэл цуцлах боломжтой байг. Түүнээс хойш цуцлах товчийг нуугаад, серверт тодорхой мессежтэйгээр цуцлалтыг татгалзаарай.

Зөвхөн миний бүртгэл админ хуудсуудыг нээж чадна. Цэс нуусан бус, админ үйлдэл бүрийг серверт шалгаарай.

Бүр дээр нь туршиж, ажиллаж байгаа эсэхийг баталгаажуулаад л дараагийнх руу шилжээрэй. Хэрэв өөрчлөлт ямар нэг зүйлийг эвдвэл сүүлийн сайн checkpoint руу буцаж, илүү тодорхой хүсэлтээр дахин оролдоорой; засварыг дээр нь давхарлаж болохгүй.

Алхам 6: Жинхэнэ хэрэглэгчдэд мэдэгдэх зүйлээ сайжруул

Жинхэнэ хэрэглэгчид жижиг зүйлсийг анзаардаг. Сарагийн app-ын товч жагсаалт:

• Хоосон төлөв: хуудас хоосон харагдахын оронд «Энэ долоо хоногт хичээл алга одоохондоо» гэж харуулах.
• Баталгаажуулалт: захиалгын дараа «Таныг бүртгэлээ: Винясса, Мягмар 18:00».
• Утасны загвар: том товчлуурууд, 375px дэлгэц дээр уншигдах хуваарь.
• Үлдсэн суудал: хичээл бүр дээр «3 суудал үлдсэн», ингэснээр оюутнууд илүү хурдан захиална.

Хичээл бүрийн картад үлдсэн суудлыг харуул, жишээ нь «12-оос 3 үлдсэн». Захиалсны дараа хичээлийн нэр, өдөр, цагийг харуулсан баталгаажуулалт, миний захиалгууд руу шилжих товч гарга.

Алхам 7: Танихгүй хүн шиг туршаарай

Өөр хүн ашиглахаас өмнө хагас цаг эвдэх оролдоорой:

Мөн AI-аас онцгой тохиолдлуудыг туршуулж болно:

Жинхэнэ оюутан захиалга эсвэл цуцлалтыг эвдэж болох арван зүйлийг жагсааж, тус бүрийг туршаад, бүтэлгүйтсэн зүйлийг засаарай. Юуг өөрчилснөө надад хэлээрэй.

Алхам 8: Аюулгүй байдлын шалгалт

Энэ app нэр, имэйл, утасны дугаарыг хадгалдаг тул товч аюулгүй байдлын шалгалт хийх нь зүйтэй. Гол асуултууд:

• Нэг оюутан нөгөөгийнхөө захиалга эсвэл холбоо барих мэдээллийг харж чадах уу?
• Хөтчийн кодонд ямар нэг түлхүүр эсвэл нууц үг байна уу?
• Бүртгүүлэх маягтыг ботоос хамгаалсан уу?
• Өгөгдлийн нөөц хуулбар байгаа юу?

Vibe coding аюулгүй юу гэдгийг энэ хуудас шалгах бүрийг тайлбарлаж, тэдгээрт зориулсан prompt өгдөг, AI-аар бүтээсэн аппын аюулгүй байдлын жагсаалт нь урт хувилбар юм.

Алхам 9: Нийтлэх

Гол гогцоо, дүрмүүд, шалгалтууд тэнцсэний дараа нийтлэ. Mythex дээр нэг товшилтоор болж, app нь өгөгдлийн сан, хостингтойгоо хамт нийтийн URL авдаг. Pro дээр өөрийн домэйн холбож болно, жишээ нь book.sarasyoga.com; өөрийн домэйн холбох гарын авлагыг үзнэ үү.

Линкээ гадагш илгээхээсээ өмнө нийтэлсэн хувилбарыг дахин нэг шалга. Утсанаараа хичээл захиалж үз. Продакшн болон урьдчилан харах адилхан ажиллах ёстой, гэхдээ баталгаажуул.

Алхам 10: Анхны хэрэглэгчид ба дараагийн хувилбар

Линкээ эхлээд таван байнгын оюутанд өг, бүгдэд нь биш. Тэднээс дараагийн хичээлээ энэ линкээр захиалахыг хүс, юу будлиантай байснаа хэлэхийг хүс. Дараа нь тэд дурдсан дээд гурван зүйлийг засаарай.

Бодит хэрэглээний хэдэн долоо хоногийн дараа ийм app-ын v2 жагсаалт ихэвчлэн өөрөө бичигддэг: дүүрсэн хичээлд хүлээлтийн жагсаалт, өмнөх оройн имэйл сануулга, онлайнаар төлөгдөх хичээлийн багц. Тус бүрд ижил арга: хэдэн мөрөөр тодорхойлж, prompt өгч, туршиж, нийтэл. Төлбөр нэмэх талаар app-дөө төлбөр нэмэх, хүмүүст мэдэгдэх талаар app-ийг хэрхэн launch хийж анхны хэрэглэгчид олох вэ гарын авлагыг үзнэ үү.

Утасны app болгож хөрвүүлэх нь

Олон студи оюутнуудынхаа утсанд дүрс байрлуулахыг хүсдэг. Mythex Pro дээр нийтэлсэн app нь Android app (Google Play-д байршуулах файл) болж, мөн өөрийн App Store Connect түлхүүрээр iPhone app TestFlight-д илгээгдэж, Mac шаардлагагүй. Утасны app нь нийтлэгдсэн веб app-ыг нээдэг тул шинэчлэлт нийтлэх бүрт утасны app-д мөн орно.

Энэ юуг заадаг вэ

Бүтээх нь хамгийн богино хэсэг байсан. App-ийг ашигтай болгосон зүйл бол тодорхойлолтын «v1-д байхгүй» жагсаалт, гол гогцоог бусад бүхнээс өмнө туршсан, багтаамж болон хандалтын дүрмийг серверт байрлуулсан, тавин хүнээс өмнө таван жинхэнэ хэрэглэгчтэй байсан явдал юм. Энэ бол бусад хүмүүст ажилладаг app байх ёстой үед vibe coding ямар байдгийг харуулж байна.

Өөрийнхөө app-ыг бүтээхэд бэлэн үү? Нэг хуудасны тодорхойлолтоо бичээд, эхний догол мөрөө AI app builder-т буулга. Илүү олон app төрөл, тэдгээрийн prompt-уудыг хармаар бол vibe coding жишээнүүд-ийг уншаарай.

Асуултууд