როგორ ავაშენოთ აპი Vibe Coding-ით: იდეიდან გამოქვეყნებულ აპამდე

აპის vibe coding-ით ასაშენებლად დაწერე ერთგვერდიანი აღწერა პირველი ვერსიისთვის, მიეცი იგი AI აპის ასაშენებელ ინსტრუმენტს როგორც პირველი პრომპტი, შემდეგ კი გაზარდე აპი პატარა, ტესტირებული ნაბიჯებით: მონაცემები, ავტორიზაცია, ძირითადი სამუშაო პროცესი, დახვეწა, უსაფრთხოების შემოწმება და ბოლოს გამოქვეყნება. ეს გზამკვლევი მიჰყვება ერთ მაგალითს, კერძოდ იოგას სტუდიის ჯავშნის აპს პატარა სტუდიისთვის, ყოველ ეტაპზე გამოყენებული პრომპტებით.

თუ არაფერი აგიშენებია ამ მეთოდით, ჩვენი vibe coding-ის სახელმძღვანელო დამწყებთათვის უფრო პატარა ნაბიჯებით იწყება. უფრო ზოგადი მიმოხილვისთვის, რომელიც vibe coding-ზე არ არის მიბმული, იხილე როგორ ავაშენოთ აპი AI-ით.

პროექტი

წარმოიდგინე იოგას სტუდიის მფლობელი, სარა, რომელიც კვირაში რვა გაკვეთილს ატარებს. ჯავშნები WhatsApp-ით მოდის; ის ყოველ გაკვეთილზე ქაღალდის სიას ინახავს და ხშირად ზედმეტ ჯავშნებს იღებს. მას სურს:

• რომ სტუდენტებმა კვირის განრიგი ნახონ და ადგილი დაჯავშნონ.
• რომ თითო გაკვეთილს ჰქონდეს ტევადობა.
• სია თითო გაკვეთილზე, რომ კარებთან შეამოწმოს.
• რომ სტუდენტებმა შეძლონ გაუქმება დაწყებამდე ორი საათით ადრე.

ეს მთელი პირველი ვერსიაა. გადახდები, აბონემენტები და აპ მაღაზია არ შედის; ეს მოგვიანებით მოდის, ან საერთოდ არ მოვა.

ნაბიჯი 1: დაწერე ერთგვერდიანი სპეციფიკაცია

სანამ რომელიმე ინსტრუმენტს გახსნი, დაწერე პირველი ვერსია უბრალო სიტყვებით. ათი წუთი აქ ბევრ საათს დაზოგავს უკან-წინ მიმოწერისგან. სასარგებლო ფორმა:

• ვინ იყენებს: სტუდენტები (ჯავშნიან და აუქმებენ), სარა (ართავს გაკვეთილებს და ხედავს სიებს).
• ეკრანები: განრიგი, გაკვეთილის დეტალები, ჩემი ჯავშნები, ადმინის გაკვეთილები, ადმინის გაკვეთილის სია.
• მონაცემები: გაკვეთილები (სახელი, მასწავლებელი, დაწყების დრო, ხანგრძლივობა, ტევადობა), ჯავშნები (სტუდენტი, გაკვეთილი, სტატუსი), სტუდენტები (სახელი, ელფოსტა, ტელეფონი).
• წესები: სავსე გაკვეთილი არ იჯავშნება; ერთი ჯავშანი სტუდენტზე თითო გაკვეთილზე; გაუქმება დაწყებამდე ორ საათამდე; ადმინის გვერდებს მხოლოდ სარა ხედავს.
• არ არის v1-ში: გადახდები, გაკვეთილების პაკეტები, მოლოდინის სია, შეხსენებები.

სია „არ არის v1-ში“ ყველაზე მნიშვნელოვანია. ის ინარჩუნებს აშენებას დასრულებად. თუ უფრო სრული სპეციფიკაცია გინდა, პროდუქტის მოთხოვნების დოკუმენტის დაწერა AI-ით უფრო შორს მიდის.

ნაბიჯი 2: აირჩიე ინსტრუმენტი, რომელიც მთელ ციკლს ფარავს

მონაცემთა ბაზის, ავტორიზაციისა და საჯარო მისამართის მქონე აპისთვის გამოიყენე AI აპის ასაშენებელი ინსტრუმენტი, რომელიც აწარმოებს კოდს, მიაქვს მონაცემთა ბაზა და აქვეყნებს, და არა ჩატ-ასისტენტი, რომელიც ფაილებს გადმოგცემს. ჩვენი vibe coding ინსტრუმენტების შედარება ჩამოთვლის ვარიანტებს. აქ ვიყენებთ Mythex-ს, რადგან ყოველ ნაბიჯს ერთ ადგილას ფარავს: ჩატი, ცოცხალი გადახედვა, ნამდვილი მონაცემთა ბაზა და ფაილების საცავი და ერთი დაწკაპუნებით გამოქვეყნება.

ნაბიჯი 3: პირველი პრომპტი

გადააქციე სპეციფიკაცია ერთ აბზაცად. ყველა დეტალი ერთბაშად ნუ ჩასვამ; მიეცი ბირთვი და დანარჩენი ნაბიჯებად დაამატე.

ააშენე იოგას სტუდიისთვის ჯავშნის აპი. სტუდენტები რეგისტრირდებიან სახელით, ელფოსტითა და ტელეფონით, ხედავენ ამ კვირის განრიგს და ჯავშნიან ადგილს გაკვეთილზე. თითო გაკვეთილს აქვს სახელი, მასწავლებელი, დაწყების დრო, ხანგრძლივობა და ტევადობა; სავსე გაკვეთილი აჩვენებს „სავსეა“ და არ ჯავშნება. სტუდენტები ხედავენ თავიანთ ჯავშნებს და შეუძლიათ გაუქმება დაწყებამდე ორი საათით ადრე. მე ვარ ადმინი: შემიძლია გაკვეთილების დამატება და რედაქტირება და იმის ნახვა, ვინ არის დაჯავშნილი თითო გაკვეთილზე. მშვიდი, მარტივი დიზაინი, რომელიც კარგად მუშაობს ტელეფონზე.

თუ არ ხარ დარწმუნებული, ინსტრუმენტმა გაიგო თუ არა, სთხოვე ჯერ გეგმა. Mythex-ში Plan რეჟიმი კოდის წერამდე აწერს ეკრანებსა და მონაცემებს, და შენ ამტკიცებ მას.

ნაბიჯი 4: ააწყე ძირითადი ციკლი

ძირითადი ციკლი არის ის ერთი რამ, რისთვისაც აპი არსებობს: სტუდენტი ჯავშნის გაკვეთილს, და სარა ხედავს მას. ატესტე მხოლოდ ეს:

1. შედი როგორც სტუდენტი, დაჯავშნე გაკვეთილი.
2. გახსენი ადმინის ხედი. არის თუ არა იქ ჯავშანი?
3. დაჯავშნე იგივე გაკვეთილი ხელახლა. უარი უნდა თქვას.
4. დააყენე გაკვეთილის ტევადობა 2-ზე, დაჯავშნე ორი სტუდენტის ანგარიშიდან, სცადე მესამე.

ამ ეტაპზე ორი პრობლემა ჩვეულებრივ ჩნდება. განრიგი დროს აჩვენებს სერვერის დროის ზონაში და არა სტუდიის დროის ზონაში, და „სავსეა“ შემოწმება მხოლოდ გვერდზე ხდება, ამიტომ სწრაფი ორმაგი დაწკაპუნება ორ ჯავშანს ქმნის.

აჩვენე ყველა გაკვეთილის დრო სტუდიის დროის ზონაში, [Asia/Dubai], მიუხედავად იმისა, როგორ არის დაყენებული ვიზიტორის მოწყობილობა.

შეამოწმე ტევადობა და დუბლირებული ჯავშნები სერვერზე ჯავშნის შექმნისას, და არა მხოლოდ გვერდზე. თუ ორი მოთხოვნა ერთდროულად მოდის ბოლო ადგილზე, მხოლოდ ერთმა უნდა გაიაროს.

გაასწორე ძირითადი ციკლი სანამ რამეს დაამატებ. ყველაფერი მასზეა დამოკიდებული.

ნაბიჯი 5: დაამატე დარჩენილი წესები, თითო შეტყობინებით

ახლა გაიარე სპეციფიკაციის წესები ერთ-ერთით:

სტუდენტს შეუძლია გააუქმოს ჯავშანი დაწყებამდე ორი საათით ადრე. ამის შემდეგ დამალე გაუქმების ღილაკი და სერვერზე უარყავი გაუქმება ნათელი შეტყობინებით.

მხოლოდ ჩემს ანგარიშს შეუძლია ადმინის გვერდების გახსნა. დარწმუნდი, რომ ეს სერვერზე მოწმდება ადმინის ყოველი მოქმედებისთვის და არა მხოლოდ მენიუს დამალვით.

ყოველი ცვლილების შემდეგ გატესტე და გადადი შემდეგზე მხოლოდ მაშინ, როცა მუშაობს. თუ ცვლილებამ რამე გააფუჭა, დაბრუნდი ბოლო კარგ საკონტროლო წერტილზე და სცადე უფრო მკაფიო მოთხოვნა, ვიდრე ზედ გასწორებების დაგროვება.

ნაბიჯი 6: დახვეწე ის, რასაც რეალური მომხმარებლები შეამჩნევენ

რეალური მომხმარებლები პატარა დეტალებსაც ამჩნევენ. მოკლე სია სარას აპისთვის:

• ცარიელი მდგომარეობები: „ამ კვირაში გაკვეთილები ჯერ არ არის“ ცარიელი გვერდის ნაცვლად.
• დადასტურება: „დაჯავშნილი ხართ Vinyasa-ზე, სამშაბათს 18:00-ზე“ ჯავშნის შემდეგ.
• ტელეფონის განლაგება: დიდი ღილაკები, განრიგი იკითხება 375px ეკრანზე.
• დარჩენილი ადგილები: „დარჩა 3 ადგილი“ თითო ბარათზე, რომ სტუდენტებმა უფრო სწრაფად დაჯავშნონ.

თითო გაკვეთილის ბარათზე აჩვენე დარჩენილი ადგილები, მაგალითად „დარჩა 3 12-დან“. ჯავშნის შემდეგ აჩვენე დადასტურება გაკვეთილის სახელით, დღითა და დროით და ღილაკი ჩემი ჯავშნებისთვის.

ნაბიჯი 7: ატესტე როგორც უცნობმა

ვისმე სხვას რომ მიეცე აპი, ნახევარი საათი სცადე მისი გატეხვა:

AI-საც შეგიძლია სთხოვო კუთხური შემთხვევების გავლა:

ჩამოთვალე ათი რამ, რაც რეალურმა სტუდენტმა შეიძლება გააკეთოს ისე, რომ ჯავშანი ან გაუქმება გატყდეს, გატესტე თითოეული და გაასწორე ის, რაც ვერ გაივლის. მითხარი, რა შეცვალე.

ნაბიჯი 8: უსაფრთხოების შემოწმება

ეს აპი ინახავს სახელებს, ელფოსტებსა და ტელეფონის ნომრებს, ამიტომ მოკლე უსაფრთხოების შემოწმება ღირს. მთავარი კითხვები:

• შეუძლია ერთ სტუდენტს სხვის ჯავშნებისა და საკონტაქტო მონაცემების ნახვა?
• არის თუ არა გასაღებები ან პაროლები ბრაუზერში გაშვებულ კოდში?
• არის თუ არა რეგისტრაციის ფორმა დაცული ბოტებისგან?
• არის თუ არა მონაცემების სარეზერვო ასლი?

ჩვენი გვერდი არის თუ არა vibe coding უსაფრთხო ხსნის ყოველ შემოწმებას და იძლევა მათთვის პრომპტებს, ხოლო უსაფრთხოების ჩეკლისტი AI-ით აშენებული აპებისთვის გრძელი ვერსიაა.

ნაბიჯი 9: გამოქვეყნება

როცა ძირითადი ციკლი, წესები და შემოწმებები გაივლის, გამოაქვეყნე. Mythex-ზე ეს ერთი დაწკაპუნებაა, და აპი იღებს საჯარო მისამართს მონაცემთა ბაზითა და ჰოსტინგით, რომლებიც უკვე მზადაა. Pro-ზე შეგიძლია საკუთარი დომენის მიერთება, მაგალითად book.sarasyoga.com; იხილე როგორ მივაერთოთ საკუთარი დომენი.

მანამდე, სანამ ბმულს გააგზავნი, ერთხელ კიდევ შეამოწმე გამოქვეყნებული ვერსია. დაჯავშნე გაკვეთილი ტელეფონიდან. გადახედვა და გამოქვეყნებული ვერსია ერთნაირად უნდა იქცეოდეს, მაგრამ დაადასტურე.

ნაბიჯი 10: პირველი მომხმარებლები და შემდეგი ვერსია

ბმული ჯერ ხუთ მუდმივ სტუდენტს მიეცი და არა ყველას. სთხოვე, მომდევნო გაკვეთილი ამ გზით დაჯავშნონ და გითხრან, რა იყო დამაბნეველი. შემდეგ გაასწორე პირველი სამი, რაც ახსენეს.

რამდენიმე კვირის რეალური გამოყენების შემდეგ, ასეთი აპის v2 სია თავისით იწერება: მოლოდინის სია სავსე გაკვეთილებისთვის, ელფოსტით შეხსენებები გაკვეთილამდე საღამოს და ონლაინ გადახდილი გაკვეთილების პაკეტები. თითოეულს ერთი და იგივე მიდგომა სჭირდება: აღწერე რამდენიმე სტრიქონში, მიეცი პრომპტად, გატესტე და გამოაქვეყნე. გადახდების დამატებისთვის იხილე როგორ დავამატოთ გადახდები აპში. ხალხის მოზიდვისთვის როგორ გავუშვათ აპი და მოვიზიდოთ პირველი მომხმარებლები.

ტელეფონის აპად გადაქცევა

ბევრ სტუდიას სურს, რომ სტუდენტების ტელეფონებზე ხატულა ეგულებოდეს. Mythex Pro-ზე გამოქვეყნებული აპი შეიძლება გადაიქცეს Android აპად (ფაილი, რომლის Google Play-ზე ატვირთვაც შეგიძლია) და iPhone აპად, რომელიც იგზავნება TestFlight-ში შენი App Store Connect გასაღებით, Mac-ის გარეშე. ტელეფონის აპი ხსნის გამოქვეყნებულ ვებაპს, ამიტომ ყოველი განახლების გამოქვეყნებისას მასაც ახალი ვერსია მიიღებს.

რა წაიღო ამიდან

საკუთრივ აშენება მოკლე ნაწილი იყო. აპი რომ გამოსადეგი გამხდარიყო, გადამწყვეტი იყო სპეციფიკაციის „არ არის v1-ში“ სია, ძირითადი ციკლის ტესტირება ყველაფრამდე, სერვერზე მხარეს არსებული წესები ტევადობისა და წვდომისთვის და ხუთი რეალური მომხმარებელი ორმოცდაათამდე. სწორედ ასე გამოიყურება vibe coding, როცა აპი სხვა ხალხისთვის უნდა მუშაობდეს.

მზად ხარ საკუთარი აპის საცდელად? დაწერე ერთგვერდიანი სპეციფიკაცია, შემდეგ ჩასვი პირველი აბზაცი AI აპის ასაშენებელ ინსტრუმენტში. თუ უფრო მეტი აპის ტიპი და მათი პრომპტები გაინტერესებს, წაიკითხე ჩვენი vibe coding-ის მაგალითები.

კითხვები